/* ==========================================================================
   SPINE (full page) — Curtis Reynolds, independent software engineer

   Structural conceit: a load-bearing spine. Every block on the page donates
   one segment to a single continuous rail down the left edge; the rail is
   assembled BY the content, not drawn beside it. No centred anything.

   THE RAIL'S GRAMMAR — four marks, assigned a job before use, no exceptions.
     1. hue bar + numeral   a KIND OF WORK.  The index, 01-05, five hues.
     2. rail bar            THE ENGINEER.    Hero, method, who, contact.
     3. rail bar, heavy     A SYSTEM HE ALREADY RUNS. Proof, and only proof:
                            the spine visibly thickens where the load is. The
                            three proof segments abut into ONE member rather
                            than three, so the thickening reads as structure
                            and not as a row of capsules (see 03 below).
     4. ash bar, thin       A JOINT.         Section heads and closing asides.
                            Connective tissue: present, quiet, never a claim.
   Chroma belongs to mark 1 alone, so a colour on this page always answers
   "which kind of work" and never anything else.

   Structure is ROUND (radius = exactly half the bar's own width, true
   semicircle caps). Content is uniformly SQUARE (radius 0 on every button,
   well, rule and readout). Two motion tokens. Two font weights. No gradients,
   no shadows, no icons, no mono face.
   ========================================================================== */

/* ---- Face. One family, two weights, self-hosted, system stack for body.
   SWAP POINT: the display family is referenced everywhere through the single
   custom property --display below. To change faces, replace the two
   @font-face src files and the first name in --display. Nothing else. ------ */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-v25-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-v25-latin-800.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}

/* ==========================================================================
   TOKENS — dark is the default state; light is an override.
   Every colour is named for the material it came from. Contrast ratios are
   measured against the ground the colour is actually used on, and written in
   beside them.
   ========================================================================== */
:root{
  /* --- page grounds & ink. these flip with the theme. --------------------- */
  --pitch:      #1B1726; /* violet-tinted near-black. the page ground.        */
  --well:       #2A2340; /* one step up. the row hover well.                  */
  --bone:       #F2EFE6; /* warm off-white. body ink + achromatic action.     15.3:1 on pitch */
  --ash:        #ADA6BE; /* violet gray. secondary ink, never a heading.       6.4:1 on well  */
  --hair:       #3A3348; /* the 1px rule. all structure is drawn with it.     */
  --edge:       #F2EFE6; /* focus ring.                                       */

  /* --- the spine itself. these do NOT flip. ------------------------------- */
  /* The rail is the structure, and structure does not change when the room
     lights do: the spine is one dark violet member in both themes. That is
     what lets the five index hues be a single measured set instead of two,
     and it is why the light theme no longer has to darken a yellow into mud.
     Yellow cannot be dark: at 4.5:1 on a pale ground the maximum chroma
     available at hue ~80 degrees forces brass to brown, which broke 02 out of
     the set. Holding the rail constant removes the requirement entirely. */
  --basalt:     #2A2340; /* the rail field. constant.                         */
  --rail-ink:   #F2EFE6; /* wordmark, plain segments, terminus.  12.9:1 on basalt */
  --rail-ash:   #ADA6BE; /* joints and closing segments.          6.4:1 on basalt */
  --rail-hair:  #3A3348; /* the rail's own edge. constant.                    */

  /* --- the index: five materials, five written jobs, two tokens each. -----
     <material>       = the MARK. bar + numeral, on the constant rail field.
     <material>-ink   = the INK.  the 13px "from" caption, on the page ground.
     They are separate because a 22px bar and a 13px label do not have the same
     contrast requirement, and collapsing them is what forced 02 to mud.
     In dark they coincide; the marks already clear 4.5:1 as text.            */
  --cinnabar:      #FF6A3D; /* 01 · integrations — two systems that won't talk. 5.2:1 on basalt */
  --brass:         #F0B429; /* 02 · the spreadsheet that should be an app.     8.0:1 on basalt */
  --verdigris:     #35D6A4; /* 03 · internal tools and dashboards.             8.0:1 on basalt */
  --cobalt:        #7DA2FF; /* 04 · customer-facing builds.                    6.0:1 on basalt */
  --orchid:        #EE6CC9; /* 05 · rescues.                                   5.4:1 on basalt */
  --cinnabar-ink:  #FF6A3D; /*                                                 5.2:1 on well   */
  --brass-ink:     #F0B429; /*                                                 8.0:1 on well   */
  --verdigris-ink: #35D6A4; /*                                                 8.0:1 on well   */
  --cobalt-ink:    #7DA2FF; /*                                                 6.0:1 on well   */
  --orchid-ink:    #EE6CC9; /*                                                 5.4:1 on well   */
  /* the masthead, the hero, the method, the proof, the person and the buttons
     take NO hue — they are bone. chroma is reserved for the index, so a colour
     on this page always means "which kind of work". Colour never carries the
     meaning alone: every hue is doubled by a written numeral, a written
     heading and a written price. */

  /* --- type --- */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-micro: .6875rem;  /* 11px — rail labels, eyebrow, colophon             */
  --t-fine:  .8125rem;  /* 13px — price keys, from-prices                    */
  --t-small: clamp(.9375rem, .9rem + .15vw, 1rem); /* 15→16px — item copy    */
  --t-body:  1.0625rem; /* 17px — lede                                       */
  --t-lede:  clamp(1.0625rem, .95rem + .6vw, 1.3125rem);
  --t-no:    clamp(1.25rem, .55rem + 1.5vw, 2rem);     /* index numerals      */
  --t-nos:   clamp(.85rem, .5rem + 1.05vw, 1.5rem);    /* step numerals       */
  --t-item:  clamp(1.28rem, .85rem + 1.45vw, 2rem);    /* index headings      */
  --t-step:  clamp(1.3rem, .95rem + 1.15vw, 1.95rem);  /* method headings     */
  --t-claim: clamp(1.2rem, .88rem + 1.15vw, 1.85rem);  /* proof claims        */
  --t-sub:   clamp(1.0625rem, .9rem + .7vw, 1.4375rem);/* who-you're-hiring   */
  --t-fig:   clamp(1.05rem, .78rem + 1.15vw, 1.7rem);  /* price figures       */
  --t-h2:    clamp(1.8rem, .55rem + 3.1vw, 3.35rem);
  --t-h1:    clamp(2.4rem, .4rem + 6.1vw, 5.7rem);
  --lh-h1: .93;  --lh-h2: .97;  --lh-item: 1;
  --trk-h1: -.009em; --trk-h2: -.008em; --trk-item: -.01em; --trk-no: -.008em;

  /* --- structure --- */
  --spine: clamp(2.75rem, 7vw, 6.5rem);    /* the rail's width, page-wide.    */
  --bar:   clamp(.625rem, 1.9vw, 1.375rem);/* segment width. radius = half.   */
  --gut:   clamp(1rem, 2.4vw, 2.75rem);    /* gutters stay tight on purpose.  */
  --bayr:  clamp(1rem, 3vw, 3.5rem);       /* the bay's right margin.         */
  /* THE REACH and THE RIM. The page's measures are set in ch and stop growing;
     the viewport does not, and that mismatch is what left ~180px of unused
     page to the right of every ch-capped column and made the composition
     drift left as you scrolled. So the bay stops growing too: --reach is the
     widest the bay is ever allowed to be, and everything past it becomes
     --rim, a declared third track of the strip rather than accidental slack
     inside it. Every hairline on the page terminates on the rim, so the page
     gains a second continuous edge answering the rail, and the prose runs to
     that edge at every width from 1296px up. Below 1296px the rim is zero and
     the bay is simply the page. 100vw is deliberate: if it overshoots the
     container by a scrollbar's width the 1fr bay absorbs it, so this can
     never overflow. */
  --reach: 74.5rem;                        /* max bay width — 1192px.         */
  --rim:   max(0px, calc(100vw - var(--spine) - var(--reach)));
  /* THE SEAM. Every enumerated section splits its bay at the same fraction,
     so the prose starts on one unbroken vertical line from the index to the
     contact block — a second continuous edge, answering the rail. */
  --claim:  46.5%;
  --colgap: clamp(1.25rem, 3vw, 3.25rem);
  --stagger: calc(var(--bar) * 1.5);     /* the method's lateral travel.     */

  /* --- motion. two tokens, no exceptions. --- */
  --fast: 120ms;
  --slow: 160ms;

  color-scheme: dark;
}

/* --- light. the page flips; the spine does not. The index inks are deepened
       to hold 4.5:1 on the pale ground, and they are the ONLY hue values that
       change between themes. ------------------------------------------------ */
@media (prefers-color-scheme: light){
  :root[data-theme="system"]{
    --pitch:  #E7E3EE; /* pale violet chalk. deliberately not an off-white grey. */
    --well:   #DBD5E7; /* the row hover well.                                    */
    --bone:   #1B1726; /* ink is the near-black now.              12.3:1 on well */
    --ash:    #565068; /*                                          5.4:1 on well */
    --hair:   #C3BBD4;
    --edge:   #1B1726;
    --cinnabar-ink:  #B02D06; /* 01                                4.6:1 on well */
    --brass-ink:     #7E5605; /* 02                                4.6:1 on well */
    --verdigris-ink: #04684B; /* 03                                4.8:1 on well */
    --cobalt-ink:    #2440D6; /* 04                                5.3:1 on well */
    --orchid-ink:    #A5118F; /* 05                                4.8:1 on well */
    color-scheme: light;
  }
}
:root[data-theme="light"]{
  --pitch:#E7E3EE; --well:#DBD5E7;
  --bone:#1B1726; --ash:#565068; --hair:#C3BBD4; --edge:#1B1726;
  --cinnabar-ink:#B02D06; --brass-ink:#7E5605; --verdigris-ink:#04684B;
  --cobalt-ink:#2440D6; --orchid-ink:#A5118F;
  color-scheme: light;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--pitch); color:var(--bone);
  font:400 var(--t-body)/1.55 var(--body);
  overflow-wrap:break-word;
}
h1,h2,h3,p,ul,ol,dl{margin:0}
ol,ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--edge); outline-offset:3px}
/* the rail is dark in BOTH themes, so the page's focus ring would vanish on it
   in light. Anything focusable inside the rail gets the rail's own ink. */
.rail :focus-visible{outline-color:var(--rail-ink)}
[tabindex="-1"]:focus{outline:none}

.skip{
  position:absolute; left:-9999px; top:0; z-index:9;
  background:var(--bone); color:var(--pitch); border-radius:0;
  font-family:var(--display); text-transform:uppercase; font-weight:600;
  font-size:var(--t-fine); letter-spacing:.09em; padding:.6em 1em .5em;
}
.skip:focus{left:0}

/* Everything in the display face is uppercase. Everything in the body face
   never is. One rule, no opt-outs. */
.wordmark,.eyebrow,h1,h2,h3,.btn,.no,.k,.v,.from,.theme button,.colophon,.addr{
  font-family:var(--display); text-transform:uppercase;
}

/* ==========================================================================
   THE STRIP — the page's only layout primitive. rail | bay | rim. No variant
   is symmetric and there is no centred mode.
   ========================================================================== */
.strip{
  display:grid;
  grid-template-columns:var(--spine) minmax(0,1fr) var(--rim);
  align-items:stretch;
}
.rail{
  position:relative;
  background:var(--basalt);
  border-right:1px solid var(--rail-hair);
  display:flex; flex-direction:column; align-items:center;
  gap:.4rem; padding:5px 0;
  min-height:100%;
}
.bay{
  min-width:0;
  padding:var(--gut) var(--bayr) var(--gut) var(--gut);
}
.sec{display:block}

/* --- rail segments. structure is ROUND: radius is exactly half the segment's
       own width, so every cap is a true semicircle whatever the width. ----- */
.bar{
  display:block; width:var(--w,var(--bar)); flex:1 1 auto; min-height:1.25rem;
  border-radius:calc(var(--w,var(--bar)) / 2);
  background:var(--hue, var(--rail-ash));
}
.bar--rail{background:var(--rail-ink)}
.bar--ash{background:var(--rail-ash)}
.bar--hue{background:var(--hue)}
.bar--heavy{--w:calc(var(--bar) * 1.75)}  /* mark 3 — the load-bearing run   */
.bar--thin{--w:calc(var(--bar) * .4)}     /* mark 4 — the joint              */
.no{
  font-weight:800; font-size:var(--t-no); line-height:.85;
  color:var(--hue); letter-spacing:var(--trk-no); font-variant-numeric:tabular-nums;
  padding-top:.15em;
}
/* the method's numerals are a different series from the index's: smaller,
   rail ink, single-digit. They cannot be confused for a service number. */
.no--step{font-size:var(--t-nos); color:var(--rail-ink); font-weight:600}
.terminus{
  display:block; width:var(--bar); height:calc(var(--bar) * 2.4);
  border-radius:calc(var(--bar) / 2); background:var(--rail-ink);
}

/* ==========================================================================
   MASTHEAD — the control row and the hero are ONE strip, so the wordmark
   climbs the whole hero rail instead of inflating a band of its own. There is
   no separate nav band: the controls are a 1px-ruled row at the top of the
   hero bay, and they are the only thing setting its height.
   ========================================================================== */
.rail--mast{padding:clamp(.9rem,2vw,1.4rem) 0 5px}
.wordmark{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-weight:800; font-size:clamp(.75rem,.6rem + .35vw,.9375rem);
  letter-spacing:.14em; line-height:1; color:var(--rail-ink);
  padding:.25rem 0; transition:color var(--fast) linear;
}
.wordmark:hover{color:var(--cinnabar)}
.bay--mast{padding-top:0}
.ctl{
  display:flex; justify-content:space-between; align-items:center;
  gap:.75rem; flex-wrap:wrap;
  margin-inline:calc(-1 * var(--gut)) calc(-1 * var(--bayr));
  padding:clamp(.55rem,1.1vw,.8rem) var(--bayr) clamp(.55rem,1.1vw,.8rem) var(--gut);
  border-bottom:1px solid var(--hair);
}
/* Two children, not three: .ctl is space-between, so a third child would be
   pushed to the middle of the bar with nothing to align to. The two links
   travel together on the right. */
.ctl__acts{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}

/* ==========================================================================
   BUTTONS — square, always. Primary is achromatic on purpose.
   ========================================================================== */
.btn{
  display:inline-block; border:1px solid var(--bone); border-radius:0;
  font-weight:600; font-size:var(--t-fine); letter-spacing:.09em;
  padding:.55em .95em .45em; line-height:1;
  transition:background var(--fast) linear, color var(--fast) linear,
             border-color var(--fast) linear;
}
.btn--solid{background:var(--bone); color:var(--pitch)}
.btn--solid:hover{background:var(--cinnabar-ink); border-color:var(--cinnabar-ink); color:var(--pitch)}
.btn--ghost{background:transparent; color:var(--bone); border-color:var(--hair)}
.btn--ghost:hover{border-color:var(--bone)}
.btn--big{font-size:var(--t-small); padding:.8em 1.35em .7em; letter-spacing:.1em}
.btn--huge{font-size:var(--t-body); padding:.95em 1.65em .85em; letter-spacing:.1em}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding-block:clamp(2.25rem,6vw,4.75rem) clamp(1.5rem,3vw,2.25rem)}
.eyebrow{
  font-weight:600; font-size:var(--t-micro); letter-spacing:.13em;
  color:var(--ash); margin-bottom:clamp(.9rem,2vw,1.4rem);
}
h1{
  font-weight:800; font-size:var(--t-h1); line-height:var(--lh-h1);
  letter-spacing:var(--trk-h1); max-width:20ch;
  margin-bottom:clamp(1.1rem,2.4vw,1.75rem);
}
.hero__body{
  display:grid; grid-template-columns:minmax(0,var(--claim)) minmax(0,1fr);
  column-gap:var(--colgap); row-gap:clamp(1.75rem,3vw,2.5rem);
  align-items:start;
}
.lede{
  font-size:var(--t-lede); line-height:1.5; max-width:52ch; color:var(--ash);
  margin-bottom:clamp(1.25rem,2.4vw,1.75rem);
}

/* price line — a hard-edged readout, not a card */
.rates{min-width:0}
.prices{border-top:1px solid var(--hair)}
.prices li{
  display:grid; grid-template-columns:minmax(7.5rem,auto) auto minmax(0,1fr);
  gap:.55rem; align-items:baseline;
  border-bottom:1px solid var(--hair); padding:.5rem 0 .45rem;
}
.k{font-weight:600; font-size:var(--t-fine); letter-spacing:.1em; color:var(--ash)}
.d{color:var(--ash); font-size:var(--t-fine)}
.v{
  font-weight:800; font-size:var(--t-fig); line-height:1; color:var(--bone);
  font-variant-numeric:tabular-nums; letter-spacing:var(--trk-item);
}
.acts{display:flex; flex-wrap:wrap; gap:.5rem}

/* --- THE TERMS. Four readouts under the price rail, filling the right column
   of the hero, which was empty below the prices (CSITE-46).

   Every value here is already stated in prose further down the page; nothing is
   a new commitment. Putting them at the top is not decoration — they are the
   four things a buyer wants to know before reading anything, and the page made
   them hunt for all four.

   Shape is the LCARS readout: label above at 11px, value below, the value the
   only weight in the block. Two columns, because four in a row would set a
   measure narrower than "ONE TO TWO WEEKS" and wrap every value. ----------- */
.terms{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--hair);
}
.terms div{
  padding:.7rem 1rem .75rem 0;
  border-bottom:1px solid var(--hair);
}
.terms div:nth-child(odd){border-right:1px solid var(--hair); padding-right:1rem}
.terms div:nth-child(even){padding-left:1rem}
.terms dt{
  font-weight:600; font-size:var(--t-micro); letter-spacing:.13em;
  color:var(--ash); text-transform:uppercase; margin-bottom:.3rem;
}
.terms dd{
  /* the UA's default 40px start margin on dd indents every value away from its
     own label, which reads as a hanging quote rather than a readout */
  margin:0;
  font-weight:600; font-size:var(--t-fine); line-height:1.25; color:var(--bone);
  letter-spacing:.01em;
}

/* ==========================================================================
   SECTION HEADS — the joint, now drawn as one.

   The rail's thin ash connector used to stop at the rail's edge and the bay
   carried nothing but the h2, which left 440-670px of dead air to its right at
   1440 (CSITE-38). The fix is structural rather than decorative: the joint
   turns the corner and runs the width of the bay as a horizontal member of the
   SAME thickness, terminating in a true semicircular cap short of the rim, with
   the section's name in micro caps past the cap.

   Two rules from the LCARS extraction (docs/lcars-extraction.md) govern it:
   radius is exactly half the member's own thickness, so the cap is a true
   semicircle at any size; and AN UNCAPPED END MEANS THIS ABUTS SOMETHING — the
   left end is square because it meets the rail, the right end is capped because
   it meets nothing. The member is ash, not ink and not hue: it is mark 4, the
   joint, and it says the same thing horizontally that it already said
   vertically. No fifth mark, no second numeral series.

   The label is the page's only navigational affordance. Five sections had no
   scannable names at all before this.
   ========================================================================== */
.strip--head .bay{padding-block:clamp(1.25rem,2.6vw,2rem) clamp(1rem,2vw,1.5rem)}
.strip--head.rule .bay{border-top:1px solid var(--hair)}
.strip--head.rule .bay{padding-top:clamp(1.75rem,3.6vw,2.75rem)}

.joint{
  display:grid; grid-template-columns:minmax(0,1fr) max-content;
  align-items:center; gap:.75rem;
  margin-bottom:clamp(1rem,2.2vw,1.6rem);
}
.joint__bar{
  --t:calc(var(--bar) * .4);              /* same thickness as mark 4 */
  display:block; height:var(--t); min-width:2rem;
  background:var(--rail-ash);
  /* square where it meets the rail, capped where it meets nothing */
  border-radius:0 calc(var(--t) / 2) calc(var(--t) / 2) 0;
  /* pull left so the member starts flush against the rail rather than inside
     the bay's gutter — the joint has to touch what it joins. */
  margin-left:calc(var(--gut) * -1);
}
.joint__name{
  font-weight:600; font-size:var(--t-micro); letter-spacing:.16em;
  color:var(--ash); text-transform:uppercase; white-space:nowrap;
}
h2{
  font-weight:800; font-size:var(--t-h2); line-height:var(--lh-h2);
  max-width:23ch; letter-spacing:var(--trk-h2);
}

/* ==========================================================================
   01 · THE INDEX — five items, five hues. The only chroma on the page.
   ========================================================================== */
.item .bay{
  border-top:1px solid var(--hair);
  padding-block:clamp(1.1rem,2.1vw,1.55rem) clamp(1.2rem,2.3vw,1.75rem);
  transition:background var(--slow) linear;
  display:grid;
  grid-template-columns:minmax(0,var(--claim)) minmax(0,1fr) max-content;
  column-gap:var(--colgap); row-gap:.3rem;
  align-items:start;
}
.item:hover .bay{background:var(--well)}
.item h3{
  grid-column:1; grid-row:1;
  font-weight:800; font-size:var(--t-item); line-height:var(--lh-item);
  max-width:26ch; letter-spacing:var(--trk-item);
}
.item .say{grid-column:2; grid-row:1}
.item .from{grid-column:3; grid-row:1; justify-self:end; padding-top:.35em}
.from{
  font-weight:600; font-size:var(--t-fine); letter-spacing:.1em;
  color:var(--hue-ink); white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* the measure is set generously enough that the grid column binds first at
   every width the rim allows. The ch cap is the safety stop, not the layout:
   that is what keeps the prose running to the rim instead of stopping short
   of it. */
.say{font-size:var(--t-small); line-height:1.6; max-width:62ch; color:var(--ash)}

/* ==========================================================================
   02 · THE METHOD — three steps. The rail steps with them: the segment for
   each step sits one bar-width further toward the page than the last, so the
   spine physically walks from the call to the handoff. Bone, not hue: a
   method is not a kind of work. Wide prose, narrow headings — a document
   rhythm, deliberately unlike the index's menu rhythm.
   ========================================================================== */
.step .bay{
  border-top:1px solid var(--hair);
  padding-block:clamp(1.25rem,2.4vw,1.9rem);
  display:grid;
  grid-template-columns:minmax(0,var(--claim)) minmax(0,1fr);
  column-gap:var(--colgap); row-gap:.4rem;
  align-items:start;
}
.step h3{
  font-weight:800; font-size:var(--t-step); line-height:.98;
  max-width:16ch; letter-spacing:-.003em;
}
.say--wide{font-size:var(--t-body); line-height:1.55; max-width:58ch}
/* the stagger is 0.75 of a bar-width each way: consecutive segments still
   overlap in x, so the column reads as one member that leans, not three. */
.step--1 .rail{padding-right:var(--stagger)}
.step--3 .rail{padding-left:var(--stagger)}

/* ==========================================================================
   03 · PROOF — the only place the rail thickens. These are the systems that
   already carry weight, so the spine carries more of it here: bar width x1.75.

   The three segments ABUT into a single member. Three separate x1.75 bars,
   each about three times its own width tall, read as capsules — at that
   aspect the two semicircle caps are most of the object and the straight run
   is the smaller part. Removing the block padding between them makes one run
   roughly fifteen times its own width, so the caps become terminations of a
   member instead of the shape of a pill. The caps that remain are still true
   semicircles struck from the run's own width; the interior joins are square
   and invisible because they touch.
   ========================================================================== */
.proof .bay{
  border-top:1px solid var(--hair);
  padding-block:clamp(1.5rem,3vw,2.4rem);
  display:grid;
  grid-template-columns:minmax(0,var(--claim)) minmax(0,1fr);
  column-gap:var(--colgap); row-gap:.5rem;
  align-items:start;
}
.proof h3{
  font-weight:800; font-size:var(--t-claim); line-height:.98;
  max-width:24ch; letter-spacing:-.003em;
}
.proof .rail{padding-block:0}
.proof .bar--heavy{border-radius:0; min-height:0}
.list--proof .proof:first-child .rail{padding-top:5px}
.list--proof .proof:last-child  .rail{padding-bottom:5px}
.list--proof .proof:first-child .bar--heavy{
  border-radius:calc(var(--w) / 2) calc(var(--w) / 2) 0 0;
}
.list--proof .proof:last-child .bar--heavy{
  border-radius:0 0 calc(var(--w) / 2) calc(var(--w) / 2);
}

/* ==========================================================================
   04 · WHO YOU'RE HIRING — five rail segments at the standard width. Five
   again, but no numeral and no hue: these are facets of one person, not
   entries in an index. Dense rows, small claims — the opposite treatment to
   proof, which is why the page does not read as one long list.
   ========================================================================== */
.who .bay{
  border-top:1px solid var(--hair);
  padding-block:clamp(.85rem,1.6vw,1.15rem);
  display:grid;
  grid-template-columns:minmax(0,var(--claim)) minmax(0,1fr);
  column-gap:var(--colgap); row-gap:.35rem;
  align-items:start;
}
.who h3{
  font-weight:600; font-size:var(--t-sub); line-height:1.05;
  max-width:22ch; letter-spacing:.005em; color:var(--bone);
}

/* ==========================================================================
   CLOSING ASIDES — the same thin ash joint as a section head. Both are
   connective; neither is a claim. The text sits in the seam column with the
   rest of the page's prose rather than running the full bay: a closing aside
   is a note on the column it closes, and it lands on the same vertical line
   every other paragraph on the page starts from.
   ========================================================================== */
.strip--close .bay{
  border-top:1px solid var(--hair);
  padding-block:clamp(1.5rem,3.2vw,2.5rem);
  display:grid;
  grid-template-columns:minmax(0,var(--claim)) minmax(0,1fr);
  column-gap:var(--colgap);
  align-items:start;
}
.close{
  grid-column:2;
  font-size:var(--t-lede); line-height:1.5; max-width:52ch; color:var(--bone);
}
.close--note{font-size:var(--t-body); color:var(--ash); max-width:58ch}

/* ==========================================================================
   05 · CONTACT — no head strip: there is no list to introduce, so the
   heading, the ask and the address arrive as one block on one bone segment.
   ========================================================================== */
.bay--ask{
  border-top:1px solid var(--hair);
  padding-block:clamp(2.25rem,5vw,4rem) clamp(2rem,4vw,3.25rem);
  display:grid; grid-template-columns:minmax(0,var(--claim)) minmax(0,1fr);
  column-gap:var(--colgap); row-gap:clamp(1.25rem,2.5vw,1.75rem);
  align-items:start;
}
.bay--ask h2{max-width:11ch}
.ask__body{display:grid; row-gap:clamp(1.25rem,2.5vw,1.9rem); align-content:start}
.ask__body .lede{margin-bottom:0; color:var(--bone)}
.ask__act{
  display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
  border-top:1px solid var(--hair); padding-top:clamp(1.1rem,2.2vw,1.6rem);
}
.addr{
  font-weight:600; font-size:var(--t-small); letter-spacing:.05em;
  color:var(--ash); border-bottom:1px solid var(--hair);
  padding-bottom:.2em; overflow-wrap:anywhere;
  transition:color var(--fast) linear, border-color var(--fast) linear;
}
.addr:hover{color:var(--bone); border-color:var(--bone)}

/* ==========================================================================
   FOOT — the spine ends in a cap, not a fade.
   ========================================================================== */
.strip--foot .rail{justify-content:flex-start; padding-top:0}
.bay--foot{
  border-top:1px solid var(--hair);
  min-height:clamp(3rem,7vw,5.5rem);
  display:flex; align-items:center;
}
.colophon{font-weight:600; font-size:var(--t-micro); letter-spacing:.13em; color:var(--ash)}

/* Hidden until the pre-paint script adds .js to <html>. Nothing here works
   without that script, and a control that does nothing when you press it is
   worse than a control that isn't there. */
.theme{display:none; border:1px solid var(--hair)}
.js .theme{display:flex}
.theme button{
  appearance:none; background:transparent; color:var(--ash);
  border:0; border-left:1px solid var(--hair); border-radius:0;
  font-weight:600; font-size:var(--t-micro); letter-spacing:.12em;
  padding:.55em .8em .45em; cursor:pointer;
  transition:color var(--fast) linear, background var(--fast) linear;
}
.theme button:first-child{border-left:0}
.theme button:hover{color:var(--bone)}
.theme button[aria-pressed="true"]{background:var(--bone); color:var(--pitch)}

/* ==========================================================================
   NARROW — the spine survives to 360px. It is the whole design; it does not
   collapse into a top bar.
   ========================================================================== */
@media (max-width:900px){
  .hero__body{grid-template-columns:minmax(0,1fr)}
  .bay--ask{grid-template-columns:minmax(0,1fr); row-gap:clamp(1rem,2.2vw,1.5rem)}
  .bay--ask h2{max-width:18ch}
  .item .bay{grid-template-columns:minmax(0,1fr) max-content; row-gap:.5rem}
  .item h3{grid-column:1; max-width:none}
  .item .from{grid-column:2; grid-row:1; padding-top:.45em}
  .item .say{grid-column:1 / -1; grid-row:2; max-width:62ch}
  .step .bay,.proof .bay,.who .bay{grid-template-columns:minmax(0,1fr); row-gap:.45rem}
  .step h3,.proof h3,.who h3{max-width:30ch}
  .say--wide{max-width:62ch}
  .strip--close .bay{grid-template-columns:minmax(0,1fr)}
  .close{grid-column:1; max-width:62ch}
}
@media (max-width:560px){
  /* The terms go to one column here rather than at 900px, because the two-up
     arrangement still reads at tablet width. Below this "Half up front, half on
     delivery" wraps to three lines beside a two-word neighbour and the row
     stops being a readout. The vertical rule goes with the second column. */
  .terms{grid-template-columns:minmax(0,1fr)}
  .terms div:nth-child(odd){border-right:0; padding-right:0}
  .terms div:nth-child(even){padding-left:0}
  .item .bay{grid-template-columns:minmax(0,1fr)}
  .item h3{grid-row:1}
  .item .from{grid-column:1; grid-row:2; justify-self:start; padding-top:0}
  .item .say{grid-row:3}
  h1{max-width:none}
  h2{max-width:none}
  .acts .btn{flex:1 1 auto; text-align:center}
  .prices li{grid-template-columns:minmax(5.75rem,auto) auto minmax(0,1fr); gap:.4rem}
  .ask__act{align-self:stretch}
  .ask__act .btn{align-self:stretch; text-align:center}
  .addr{font-size:var(--t-fine); letter-spacing:.01em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important; animation-duration:1ms !important}
}


/* ==========================================================================
   PRINT — a small business owner forwarding this to a partner, or putting it
   in front of somebody who has to approve the spend.

   The rail is the design and it is also 6.5rem of solid dark violet down every
   page, so it goes. What survives is what someone would actually be printing
   this for: the prices, the terms, the five kinds of work, and how to make
   contact. The theme control and both nav buttons go too — a printed page
   cannot be clicked, and a button on paper is just a box.
   ========================================================================== */
@media print{
  /* Force the light palette regardless of the reader's screen theme. Printing
     a dark page wastes an astonishing amount of ink and most browsers will
     silently drop the backgrounds anyway, leaving pale ink on white. */
  :root, :root[data-theme="dark"], :root[data-theme="system"]{
    --pitch:#fff; --well:#fff; --bone:#000; --ash:#333;
    --hair:#999; --basalt:#fff; --rail-ink:#000; --rail-ash:#333;
    color-scheme: light;
  }
  body{background:#fff; color:#000}

  .rail, .terminus, .theme, .skip, .acts, .joint__bar{display:none}
  .strip{grid-template-columns:minmax(0,1fr); }
  .bay{padding-left:0; padding-right:0}
  .ctl{display:none}

  /* Every button goes: a button on paper is a box. The contact block still
     reads correctly without them, because .addr already prints the address as
     its own text rather than hiding it behind a label. Adding a generated
     copy of it, which the first draft of this stylesheet did, just prints the
     address twice. */
  .btn{display:none}

  /* Do not split an item across a page break: half a description with its price
     on the previous sheet is worse than a short page. */
  .item, .step, .proof, .who, .terms div{break-inside:avoid; page-break-inside:avoid}
  h1,h2,h3{break-after:avoid; page-break-after:avoid}

  /* The index numerals live in the rail, which is gone, so the item headings
     lose their only ordinal. Give them one back. */
  .list{counter-reset:item}
  .item{counter-increment:item}
  .item h3::before{content:counter(item,decimal-leading-zero) "  "; color:#666}

  h1{font-size:24pt} h2{font-size:15pt} h3{font-size:11pt}
  body{font-size:10pt}
  .lede{font-size:11pt}
}