/* ---- hero: B's landing view, unchanged ---- */
  .hero{border-bottom:1px solid var(--ink);}
  .hero .in{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:40px;
    align-items:end;
    padding-top:80px;
    padding-bottom:56px;
  }
  .head{
    font-family:"Instrument Serif",Georgia,serif;
    font-weight:400;
    font-size:clamp(2.2rem,5vw,3.5rem);
    line-height:1.02;
    letter-spacing:-.02em;
    margin:0;
    /* No measure of its own: the headline fills the column the hero grid
       gives it, which is 700px at the page's full width and narrower with
       it. It used to be capped at 13ch, and 13ch of a 56px serif is about
       360 -- so the line broke at half the width of the column it sat in
       and the hero opened with a tall narrow stack against 340px of empty
       paper. The column IS the measure here; the cap was a second one
       arguing with it.

       balance still decides where the breaks fall inside that width, which
       is what keeps the last line from being one orphaned word. Ignored by
       browsers that lack it, which fall back to greedy wrapping and land on
       the same two lines at this width. */
    text-wrap:balance;
  }
  .head i{color:var(--red);font-style:italic;}
  .sub{margin:0;color:var(--body);font-size:.95rem;}
  /* Block B carries the claim, so it gets its own vertical space and a step
     up in size. Dark, not red -- the red budget above the fold is already
     spent on the wordmark dot and the headline accent. */
  .sub-lead{margin:16px 0 0;color:var(--ink);font-size:1.15rem;line-height:1.3;}
  .cta{margin:26px 0 0;font-size:.95rem;}
  /* The link is one target; the two spans split the labour. The action reads
     as primary, the address trails it as a secondary confirmation of where
     the click goes. The rule sits on .act alone so the grey address is not
     underlined in red. */
  .cta a{border-bottom:none;padding-bottom:0;}
  .cta .act{
    display:inline-block;
    font-size:1.15rem;
    /* 500 is the heaviest weight the self-hosted Inter subset actually ships;
       600 would be faux-bolded. The size step and the red rule carry the rest
       of the emphasis. */
    font-weight:500;
    border-bottom:2px solid var(--red);
    padding-bottom:2px;
  }
  /* The colour here is load-bearing: it is what keeps a:hover's red from
     reaching the address by inheritance. There used to be a
     .cta a:hover .addr rule restoring it, which could never fire, because an
     inherited value always loses to a specified one. */
  .cta .addr{display:block;margin-top:10px;color:var(--body);font-size:.85rem;}
  /* The paragraph about where hardware goes wrong used to be a section of
     its own, halfway down the page, under a "What I do" label with six
     discipline cards below it. The cards are on the phase pages now and the
     paragraph is the first thing said, so it sits in the landing view across
     both columns with a hairline between it and the headline row. Same type
     pair as everywhere else: a serif line, then the grey gloss under it. */
  .hero .creed{
    grid-column:1 / -1;
    margin-top:44px;
    padding-top:26px;
    border-top:1px solid var(--rule);
  }
  .hero .creed p{margin:0 0 12px;max-width:66ch;color:var(--body);font-size:.95rem;}
  .hero .creed p:last-child{margin-bottom:0;}
  /* The serif term over the grey gloss, the page's one hierarchy device,
     applied to the creed. Instrument Serif carries a small x-height for its
     em, so a size that matches the body copy on paper reads smaller than it
     on screen: 1.62rem is what it takes for this line to sit ABOVE the
     paragraph rather than beside it.

     Selector qualified rather than shortened: .hero .creed p above sets a
     font-size and outranks a bare .strap, so the class on its own silently
     lost and the line rendered at body size in a serif, which reads as a
     caption. Match the specificity, do not reach for !important. */
  .hero .creed .strap{
    font-family:"Instrument Serif",Georgia,serif;
    font-size:1.62rem;
    line-height:1.2;
    color:var(--ink);
    margin-bottom:16px;
  }

  /* ---- phase page head ----
     The homepage hero is a two-column landing view with a contact block
     beside the headline. A phase page has one thing to say at the top and
     the rail directly above it, so it gets a single column and closes on
     the same ink rule. */
  .phead{border-bottom:1px solid var(--ink);}
  .phead .in{padding-top:60px;padding-bottom:46px;}
  .phead h1{
    font-family:"Instrument Serif",Georgia,serif;
    font-weight:400;
    font-size:clamp(2rem,4.4vw,3rem);
    line-height:1.04;
    letter-spacing:-.02em;
    margin:0;
    max-width:18ch;
    text-wrap:balance;
  }
  .phead .sub{margin:20px 0 0;color:var(--body);font-size:1.05rem;line-height:1.45;max-width:62ch;}

  /* ---- a phase, as one section of /phases ----
     Each phase opens the same way and is separated from the one before it
     by a full-width ink rule, which is the heaviest line the page has. The
     tint alternation cannot mark these boundaries on its own: a phase runs
     to an odd number of bands, so the next one would sometimes open on
     paper against paper. The rule does not care. */
  .phase + .phase{border-top:1px solid var(--ink);}
  /* h2 here is a phase title, not a section label, so it takes the h1
     treatment rather than the sticky uppercase one. */
  .phase > .phead h2{
    font-family:"Instrument Serif",Georgia,serif;
    font-weight:400;
    font-size:clamp(1.7rem,3.6vw,2.5rem);
    line-height:1.06;
    letter-spacing:-.02em;
    margin:0;
    max-width:20ch;
    text-wrap:balance;
  }
  /* The stop's own number, said again at the top of the phase it belongs
     to, so a reader who arrived by scrolling knows which stop just lit up
     without looking back at the rail. Same size and tracking as the .n in
     the pill. */
  .phase .pnum{
    margin:0 0 14px;
    font-size:.66rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--soft);
    font-variant-numeric:tabular-nums;
  }

  /* The line that introduces a block rather than closing one. Ink, so it
     reads as a statement, and it carries the gap to whatever follows. */
  .lede{color:var(--ink) !important;margin-bottom:20px !important;}

  /* The line a phase closes on: what you walk away with. Serif over the
     grey gloss above it, which is the pair this page uses everywhere else
     to say "this is the term, that was the explanation". */
  .ask{
    font-family:"Instrument Serif",Georgia,serif;
    /* Same size as .strap on the homepage. The two are the same object -- the
       one serif statement line a section closes on -- and they were 1.5 and
       1.62, which is 8% apart: too close to read as a step, far enough to
       read as an accident. */
    font-size:1.62rem;
    line-height:1.2;
    /* The one serif statement line without it. On a phone this was closing
       on a two-word last line; balance spreads the break instead. */
    text-wrap:balance;
    color:var(--ink) !important;
    margin:26px 0 0 !important;
    /* No max-width. 24ch never applied: .body > p is (0,1,1) and later in the
       file, so its 66ch always won, and the line has been setting to one
       clean 605px line at both 1280 and 1024 for as long as it has shipped.
       That is the same specificity trap .strap documents above. Declaring
       24ch properly would break both lines into three, which is not what is
       wanted here, so the dead line goes rather than the live look. */
  }

  /* The one button. Everywhere else a link is a red hairline under the
     words, which is right for an address in a sentence and wrong for the
     single action a phase is asking for. It is the same red hairline,
     closed into a box: no fill until you are on it, 2px radius, nothing
     the page does not already use. The border shorthand is what takes
     back the global a{} underline. Ink on paper, paper on the ink band --
     one shape, and only the letters change colour with the ground. */
  .btn{
    display:inline-block;
    margin:16px 0 0;
    padding:13px 22px;
    /* --red-text, not --red. This border is the only thing that makes the
       button read as a button, so SC 1.4.11 applies to it, and --red is
       2.85:1 on the tint bands two of these four sit on. --red-text is 5.08
       there and 5.59 on paper. It also makes the button one red now that the
       hover fill is --red-text. --red stays on the .cta .act underline,
       which is a mark rather than a boundary. */
    border:1px solid var(--red-text);
    border-radius:2px;
    color:var(--ink);
    font-size:1.05rem;
    font-weight:500;
    transition:background-color .18s ease,color .18s ease;
  }
  /* The border comes with the fill. A #C42222 fill inside a #FF4D4D ring is
     the one place the two reds touch, and at 20 points of lightness apart
     and one pixel of separation that stops reading as weight and starts
     reading as two colours. Same reasoning for a:hover below. */
  .btn:hover{background:var(--red-text);border-color:var(--red-text);color:var(--paper);}
  .end .btn{margin-top:26px;color:var(--paper);}

  a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:1px;}
  a:hover{color:var(--red-text);border-bottom-color:var(--red-text);}
  /* Ink, matching .rail .pill:focus-visible and for the same reason: red is
     2.85:1 on tint, under the 3:1 WCAG 2.2 asks of a focus indicator, and
     there are links on the tint bands. Ink is 16.7 on paper and 15.2 on
     tint. */
  a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

  /* ---- bands ---- */
  /* --ground is what the ruled cells fill with; --rule-c is the hairline
     that reads correctly against it. Every band sets both, and everything
     below is written against the two variables rather than against a
     colour, which is the whole trick that lets B's sheet sit on C's
     grounds without a second set of rules. */
  .band{
    --ground:var(--paper);
    --rule-c:var(--rule);
    padding:46px 0;
    border-top:1px solid var(--rule);
  }
  .band:first-of-type{border-top:0;}
  /* Lifted out of the flow purely to sit ABOVE the cursor glow: .dots is
     fixed at z-index 0, which puts it over the background of every
     unpositioned block, so a tinted band would otherwise be dotted too. The
     glow is a paper-only effect -- see .dots. */
  .band.alt{
    --ground:var(--tint);
    --rule-c:var(--rule-on-tint);
    background:var(--tint);
    border-top-color:var(--rule-on-tint);
    position:relative;
    z-index:1;
  }
  /* minmax(0,1fr), not 1fr. A grid track sized 1fr still takes its MINIMUM
     from the item's min-content, and the rail's stops are nowrap, so a plain
     1fr let the track grow to the rail's intrinsic width and pushed the whole
     document sideways. minmax(0,...) says the track may be smaller than its
     contents, which is what lets the rail scroll instead of shoving. */
  .sec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;}
  .sec > *{min-width:0;}
  .sec > h2,.sec > h3{
    position:sticky;
    top:70px;
    align-self:start;
    margin:0;
    font-weight:500;
    font-size:.72rem;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--soft);
  }
  /* Where the body opens on a ruled grid rather than on a paragraph, the
     first ink is a border plus 18px of cell padding down, and the label was
     hanging 17px above it. Sections that open on a paragraph already agree
     to within a pixel and are left alone. A browser without :has() keeps
     today's alignment, which is the status quo, not a break. */
  .sec:has(> .body > .cells:first-child) > h2,
  .sec:has(> .body > .cells:first-child) > h3{margin-top:17px;}
  /* A section whose only content is its body -- the Produce stub's CTA --
     still starts where every other body starts. Without this, grid auto
     placement drops it into the 200px label column and the button lands 240px
     left of the two identical buttons above it. */
  .sec > .body:first-child{grid-column:2;}
  .body > p{margin:0 0 14px;max-width:66ch;color:var(--body);}
  .body > p:last-child{margin-bottom:0;}
  .turn{color:var(--ink) !important;}

  /* ---- ruled cell blocks: the gap is the rule, the cell is the ground ---- */
  .cells{
    display:grid;
    gap:1px;
    background:var(--rule-c);
    border:1px solid var(--rule-c);
  }
  .cells > *{background:var(--ground);}
  .tri{list-style:none;margin:0;padding:0;grid-template-columns:repeat(3,1fr);}
  .tri li{padding:18px 20px;}
  .tri .n{display:block;font-size:.7rem;letter-spacing:.12em;color:var(--soft);font-variant-numeric:tabular-nums;}
  .tri .t{
    display:block;
    font-family:"Instrument Serif",Georgia,serif;
    font-size:1.32rem;
    line-height:1.2;
    margin:6px 0;
  }
  .tri .d{display:block;color:var(--body);font-size:.9rem;}

  .fit{grid-template-columns:1fr 1fr;}
  .fit > div{padding:18px 20px;}
  .fit h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.16rem;margin:0 0 10px;}
  .fit .no h3{color:var(--red-text);}
  .fit .plain li:last-child{border-bottom:0;}