/* ============================================================================
   Manager's Guide — the five reading modes this document needs and the first
   edition did not.

   `doc.css` is BYTE-IDENTICAL to the reading edition's, on purpose. It is the
   design system: grounds, grid, type scale, the reveal devices, the rail, the
   contents panel. Editing it here would fork the system and the two editions
   would drift a rule at a time. So the shared file stays untouched and
   everything this document alone needs lives in this one, which is the second
   stylesheet the shell links.

   Nothing in here invents a token. Every colour, measure and radius is one that
   already exists in doc.css.

   THE .js GUARD. Every rule that hides something is written `.js <sel>`, never
   bare, because the document has to be whole with the script disabled and
   `check_readable_without_js` reads this file too. A bare `opacity:0` here would
   ship an invisible section to every crawler.
   ========================================================================= */

/* ==================================================================== BRIEF
   The standfirst. Three paragraphs at a lead measure with the brand statement
   set beside them, which is the only place this manuscript describes the
   company in the abstract. */
.brief{
  display:grid;
  grid-template-columns:1fr;
  gap:calc(var(--u) * 6);
}
@media (min-width:60rem){
  .brief{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:calc(var(--u) * 10)}
}
.prose--lead > p:first-child{
  font-family:var(--sans-display);
  font-size:var(--t-deck);
  line-height:1.42;
  color:var(--ink);
}
.brief__brand{
  background:var(--paper);
  border:1px solid var(--hair);
  padding:calc(var(--u) * 5);
  display:grid;
  gap:var(--gap);
  align-content:start;
}
@media (min-width:60rem){
  .brief__brand{max-width:34rem}
}

/* ================================================================= GLOSSARY
   The nine capabilities. A register, not an argument, so it is a grid: label,
   then what it does. The hairline between cells is the grid gap showing
   through, which is how the figure tiles in doc.css already work. */
.caps{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
@media (min-width:44rem){ .caps{grid-template-columns:1fr 1fr} }
@media (min-width:72rem){ .caps{grid-template-columns:1fr 1fr 1fr} }
/* ICON INLINE, not on its own row.
   On its own row the glyph added its height plus a 28px gap to every cell, and
   grid rows equalise to the tallest cell in the row, so nine short definitions
   measured 950px tall at 1512px wide. Inline it is the same treatment the
   dossier edition uses, so the two editions now agree, and the section lost
   about 150px of dead height without losing a word. */
.cap{
  background:var(--paper);
  padding:calc(var(--u) * 3) calc(var(--u) * 3.5) calc(var(--u) * 4);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:calc(var(--u) * .5) calc(var(--u) * 1.5);
  align-content:start;
}
.cap .ic{width:18px;height:18px;color:var(--on-ground);margin-top:.22em}
/* One paragraph, label bolded in place. The <strong> goes display:block so it
   reads as a heading while the string stays a single text run: see the note on
   lead_in() in doc_managers.py for why splitting it would break fidelity. */
.cap__t{
  margin:0;
  font-size:var(--t-small);
  line-height:1.5;
  color:var(--ink-72);
}
/* INLINE, not block. Set as a block the label took its own line and left the
   contract's em dash starting the next one, so nine cells each opened with a
   dangling dash. Inline it reads as what it is: a definition list entry, name
   then dash then meaning, which is also how print sets it. The dash stays
   because it is Vespa's punctuation and the string is theirs. */
.cap__t strong{
  font-family:var(--sans-display);
  font-weight:500;
  color:var(--ink);
}

/* =================================================================== LEDGER
   The integration tax. The one section with somebody else's money in it, so it
   sits on ink to mark the change of register, and the attribution is part of
   the composition rather than a footnote.

   The figures do not animate. See the note in doc_managers.sec_ledger. */
.ledger__figures{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--paper-14);
  border:1px solid var(--paper-14);
}
@media (min-width:52rem){ .ledger__figures{grid-template-columns:repeat(3,1fr)} }
.fig-n{
  background:var(--ink);
  padding:calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 6);
  display:grid;
  gap:calc(var(--u) * 1);
  align-content:end;
  min-height:9rem;
}
.fig-n__over{
  margin:0;
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-48);
}
.fig-n__v{
  margin:0;
  font-family:var(--sans-display);
  font-weight:500;
  font-size:clamp(2rem,1.4rem+2.4vw,3.4rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--green);
}
.fig-n__l{
  margin:0;
  font-size:var(--t-small);
  line-height:1.4;
  color:var(--paper-72);
  max-width:20ch;
}
.ledger__cite{
  margin:0;
  display:grid;
  gap:calc(var(--u) * 3);
  border-top:1px solid var(--paper-14);
  padding-top:calc(var(--u) * 5);
}
.ledger__cite blockquote{margin:0}
.ledger__cite blockquote p{
  margin:0;
  font-family:var(--sans-display);
  font-size:var(--t-deck);
  line-height:1.44;
  color:var(--paper);
  max-width:52ch;
}
.ledger__cite figcaption{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap) calc(var(--u) * 4);
  align-items:baseline;
  font-size:var(--t-small);
  color:var(--paper-48);
}
.ledger__cite figcaption .mono{
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--green);
}
.ledger__cite cite{font-style:normal}

/* ================================================================ SEQUENCE
   The five requirements. Reuses the pillar rhythm from doc.css and adds the
   one thing this document has that the other did not: every requirement ends
   in its own goal, so the goal is the card's conclusion rather than a
   paragraph that happens to be last. */
.req{
  display:grid;
  grid-template-columns:1fr;
  gap:calc(var(--u) * 4);
  padding-block:calc(var(--u) * 8);
  border-top:1px solid var(--hair);
}
@media (min-width:60rem){
  .req{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:calc(var(--u) * 10)}
}
/* "3. Continuous Freshness" is ONE string, with the numeral bolded in place.
   Splitting it into a number element and a title element dropped the ". "
   between them and failed all five headings at the fidelity gate. The numeral
   still gets the display treatment, as a block <strong>. */
.req__title{
  margin:0;
  font-family:var(--sans-display);
  font-weight:500;
  font-size:var(--t-section);
  line-height:1.16;
  letter-spacing:-.018em;
  color:var(--ink);
}
.req__title strong{
  display:block;
  font-weight:500;
  font-size:clamp(2.5rem,1.6rem+3vw,4.5rem);
  line-height:.85;
  letter-spacing:-.04em;
  color:var(--green);
  margin-bottom:calc(var(--u) * 1.5);
}
.req__goal{
  margin:0;
  background:var(--sage);
  border:1px solid var(--hair);
  padding:calc(var(--u) * 4) calc(var(--u) * 5);
  font-family:var(--sans-display);
  font-size:var(--t-body);
  line-height:1.45;
  color:var(--ink);
}

/* ==================================================================== AUDIT
   The nine questions. Marked VISUAL CALL OUT in the contract. An ordered list,
   because a manager works through them in order rather than picking from
   them. */
.audit{
  list-style:none;margin:0;padding:0;
  counter-reset:q;
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
@media (min-width:48rem){ .audit{grid-template-columns:1fr 1fr} }
@media (min-width:76rem){ .audit{grid-template-columns:1fr 1fr 1fr} }
.q{
  counter-increment:q;
  background:var(--paper);
  padding:calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 5);
  display:grid;
  gap:var(--gap);
  align-content:start;
  position:relative;
}
.q::before{
  content:counter(q,decimal-leading-zero);
  position:absolute;
  top:calc(var(--u) * 4);right:calc(var(--u) * 4);
  font-family:var(--mono);
  font-size:var(--t-mono);
  color:var(--ink-38);
}
.q .ic{width:20px;height:20px;color:var(--on-ground)}
.q__t{
  margin:0;
  font-size:var(--t-small);
  line-height:1.5;
  color:var(--ink-72);
  padding-right:2.5rem;
}
.q__t strong{
  display:block;
  font-family:var(--sans-display);
  font-weight:500;
  font-size:var(--t-body);
  line-height:1.3;
  color:var(--ink);
  margin-bottom:calc(var(--u) * .75);
}

/* =================================================================== LADDER
   The maturity model. Three rungs, and the step off each one.

   The rungs indent progressively, which is the whole point: a reader should be
   able to see which one they are on without reading it. The connecting line is
   a border rather than a pseudo-element run, so it survives a wrap. */
.ladder-3{
  list-style:none;margin:0;padding:0;
  display:grid;
  gap:calc(var(--u) * 5);
}
.rung{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:calc(var(--u) * 4);
  padding:calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 6);
  background:var(--paper);
  border:1px solid var(--hair);
  border-left:3px solid var(--green);
}
@media (min-width:60rem){
  .rung{gap:calc(var(--u) * 6)}
  /* Each rung sits one step further in than the last, so the sequence reads as
     a climb before a word of it is read. */
  .rung:nth-child(2){margin-left:calc(var(--u) * 8)}
  .rung:nth-child(3){margin-left:calc(calc(var(--u) * 8) * 2)}
}
.rung__n{
  margin:0;
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.1em;
  color:var(--on-ground-mute);
}
.rung__t{
  margin:0;
  font-family:var(--sans-display);
  font-weight:500;
  font-size:var(--t-section);
  line-height:1.18;
  letter-spacing:-.016em;
  color:var(--ink);
}
.rung__next{
  margin:0;
  padding-top:calc(var(--u) * 3);
  border-top:1px solid var(--hair);
  font-size:var(--t-small);
  line-height:1.5;
  color:var(--ink);
}
.rung__next strong{
  display:block;
  font-family:var(--mono);
  font-weight:400;
  font-size:var(--t-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-ground-mute);
  margin-bottom:calc(var(--u) * 1);
}

/* ============================================================ shared extras
   Two variants the wide statement mode needs. There is deliberately no eyebrow
   variant for the ink section: .act--ink redefines --on-ground-mute, so the
   shared .eyebrow inverts on its own. */
.title--wide{max-width:24ch}
.prose--wide{max-width:none}
.prose--wide > p{max-width:72ch}

/* ==================================================================== PRINT
   The document prints. The rail, the contents panel and the ink grounds do
   not, so the new modes flatten the same way doc.css flattens the old ones. */
@media print{
  .ledger,.fig-n{background:#fff!important;color:#000!important}
  .fig-n__v{color:#000!important}
  .fig-n__over,.fig-n__l{color:#333!important}
  .ledger__cite blockquote p{color:#000!important}
  .ledger__figures{border-color:#999!important;background:#999!important}
  .rung{break-inside:avoid}
  .rung:nth-child(2),.rung:nth-child(3){margin-left:0!important}
  .caps,.audit{break-inside:auto}
  .cap,.q{break-inside:avoid}
}

/* =============================================================== companion
   The link to the other edition. On the ink close, so it takes the green link
   colour doc.css already gives anchors on that ground. */
.companion{
  margin:0;
  font-family:var(--sans-display);
  font-size:var(--t-section);
  line-height:1.2;
  font-weight:500;
}
/* Its own class, NOT .eyebrow. The alignment audit measures the gap from an
   eyebrow to the title that follows it, and this label sits below the title, so
   reusing .eyebrow reported a -592.9px gap as real drift. The audit was right:
   .eyebrow means "the label above a section title" and this is not one. */
.companion__l{
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-ground-mute);
}

/* ===================================================================== BAND
   A closing statement across the full measure.

   These two were `.split` wrappers holding a single card, which handed the card
   the left column and left the right half of a 64rem section empty. A statement
   that closes a section is not a column of it.

   The text keeps a reading measure inside the full-width ground, because a
   64rem line of 1.5rem type is not a line anybody finishes. */
.band{
  width:100%;
  padding-block:calc(var(--u) * 4);
}
.band > .section-title{
  max-width:52ch;
  margin:0;
}