/* ============================================================================
   craft/p-fractional-cto.css · the Fractional CTO page, on the interior kit
   Loaded after craft/inner.css. Only what the kit does not cover: the hero
   headline sized for a media column, the text links, the stakes ledger, the
   velocity act (the page's signature), the thesis line, the rhythm wire and
   its month dial, the extra large price, and the fit split. D's tokens
   throughout; the two literals D itself writes inline (bone, warm ink) are
   named once here.
   ========================================================================== */
:root{--cto-bone:#F4F4F0;--cto-warm-ink:#33332c}

/* ---- hero: the kit sizes an h1 beside a picture (.phero .hero-grid h1) */
.cto-hero .substat{text-wrap:pretty}
/* "Month to month." is one phrase: text-wrap:pretty only guards single words */
.cto-keep{white-space:nowrap}
.cto-hero .craft{max-width:470px}

/* ---- text links: one step below the buttons (brief section 3), mono,
   underlined, with an arrow that is decoration only (alt text empty).
   a.tlink, so a link inside a lens (whose .lens a is lime) takes it too.
   A 44px target (INNER-KIT section 9), as Custom Build's .cb-tlink: the
   box grows around the text, so each .cto-link margin is 6px less than
   before and the words sit where they did. The arrow is taken out of flow:
   a flex container passes its underline to every in-flow child, and the
   arrow should stay clean of it. */
.cto-link{margin-top:.7rem}
a.tlink{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-right:1.25em;color:var(--ash);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line-lime);
  transition:color .15s var(--e-io),text-decoration-color .15s var(--e-io)}
a.tlink::after{content:"\2197";content:"\2197" / "";position:absolute;right:0;top:50%;transform:translateY(-50%);transition:transform .2s var(--e-io)}
a.tlink:hover{color:var(--lime);text-decoration-color:var(--lime)}
a.tlink:hover::after{transform:translate(2px,calc(-50% - 2px))}
.cta-band .cto-link{margin:.8rem auto 0}
.lens .cto-link{margin-top:.1rem}

/* read by assistive tech, not drawn: the counters' final figures */
.cto-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============ 2 · THE STAKES: three improvisers as a ledger ============ */
.stakes .sec-head{max-width:19ch}
.roles{margin-top:2.2rem;border-top:1px solid var(--line-dim)}
.role{position:relative;display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:1.4rem;align-items:baseline;
  padding:clamp(1rem,2vw,1.35rem) 0;border-bottom:1px solid var(--line-dim)}
/* a lime cap on each rule, as D caps its steps and asides */
.role::before{content:"";position:absolute;left:0;top:-1px;width:26px;height:1px;background:var(--lime)}
.role__k{color:var(--lime);letter-spacing:.2em}
.role p{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:clamp(1.12rem,1.9vw,1.55rem);
  line-height:1.25;color:var(--cto-bone);max-width:46ch;text-wrap:balance}
.stakes__pair{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.6rem,4.5vw,4.4rem);margin-top:2.6rem;align-items:start}
.stakes__pair .prose p.lede{font-size:clamp(1.1rem,1.6vw,1.3rem)}
@media(max-width:820px){
  .role{grid-template-columns:minmax(0,1fr);gap:.45rem}
  .stakes__pair{grid-template-columns:minmax(0,1fr)}
}

/* ============ 3 · THE MIDDLE PATH ============ */
.middle .sec-head{max-width:17ch}
.middle .screen{max-width:440px;margin-inline:auto}

/* ============ 4 · VELOCITY: the signature ============ */
/* A pinned act. The ledger is there as the stage slides in (ground or greet):
   rules, labels, and three numerals waiting dim at 0. As the reader scrolls
   each numeral counts up in turn, brightening as it goes, with a lime bar
   filling under its row; the source note arrives last. --k is a row's count
   progress, 0 to 1. On a wide screen the counters are the engine's (scrubbed
   by the pin's p across data-sc-count-at) and --k reads --sc-p in CSS over
   the same window (--a to --b, set on each row); CSS reading the engine's
   variable is the homepage's own pattern (the stripes, the gears), and the
   race rule is about JS effect loops. On a flowed page p-fractional-cto.js
   drives the count and writes --k from each row's own position. */
.velo{background:var(--ink-3)}
.velo__stage{background:var(--ink-3)}
.velo__stage .kanji{right:-3vw;bottom:-10%;top:auto;font-size:min(34vw,440px);will-change:transform}
.velo__reg{bottom:20px;left:var(--gutter)}
/* In the markup the note follows the rows (so a phone reads the numbers, then
   where they come from); on a wide screen grid areas put it under the heading. */
.velo__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-areas:"head rows" "note rows";
  column-gap:clamp(2rem,5vw,5rem);row-gap:0;align-items:center;position:relative;z-index:2}
.velo__head{grid-area:head;align-self:end}
.velo__rows{grid-area:rows}
.velo__note{grid-area:note;align-self:start}
.velo__head .sec-head{font-size:clamp(2.2rem,4.4vw,4rem);max-width:11ch;margin-bottom:0}
.velo__note{margin-top:1.8rem;max-width:46ch}
.velo__note p{color:var(--ash);font-size:clamp(.94rem,1.1vw,1.02rem);line-height:1.6}
.velo__note p+p{margin-top:.7rem}
.velo__rows{border-top:1px solid var(--hl)}
.velo__row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2.4vw,2.2rem);align-items:end;
  padding:clamp(.7rem,2vh,1.3rem) 0;border-bottom:1px solid var(--hl);
  --k:clamp(0,calc((var(--sc-p,0) - var(--a,0)) / (var(--b,1) - var(--a,0))),1)}
/* tabular numerals: every digit is 1ch wide, so a 3ch column right-aligns 701, 3 and 89 on one edge */
.velo__n{width:3ch;text-align:right;font-family:var(--font-display);font-weight:900;font-size:clamp(4rem,min(10vw,16.5vh),10rem);
  line-height:.8;letter-spacing:-.02em;color:var(--lime);font-variant-numeric:tabular-nums}
.velo__l{padding-bottom:.35rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;
  color:var(--ash);max-width:34ch}
/* Full without the engine (scripts off): the finished ledger. With it, the
   bar fills over the count and the numeral lights from .42 (about 3.6:1 on
   ink-3, over the 3:1 large type floor) to full as its number lands. */
.velo__bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lime);transform-origin:0 50%;will-change:transform}
html.sc-ready .velo__bar{transform:scaleX(var(--k))}
html.sc-ready .velo__n{opacity:calc(.42 + .58 * var(--k))}
/* One column wherever the stage is not pinned (a phone, reduced motion, or
   scripts off). A stage the engine pinned keeps its two columns at any width:
   zoom after load narrows the viewport without unpinning it, and one column
   is far taller than the sticky stage. */
@media(max-width:900px){
  .velo__stage:not(.sc-stage) .velo__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "rows" "note";row-gap:2rem}
  .velo__stage:not(.sc-stage) .velo__head .sec-head{font-size:clamp(2.1rem,10.5vw,3.4rem);max-width:12ch}
  .velo__stage:not(.sc-stage) .velo__n{font-size:clamp(3.6rem,19vw,5.6rem)}
  .velo__reg{display:none}
}
/* A pinned stage on a short viewport (a landscape phone over 900px wide, or
   browser zoom after load): the stage is one viewport tall and clips, so the
   type compacts to keep the heading and the source note inside it. */
@media(max-height:620px){
  .sc-stage.velo__stage .velo__head .sec-head{font-size:clamp(1.5rem,6.2vh,2.6rem)}
  .sc-stage.velo__stage .velo__note{margin-top:1rem}
  .sc-stage.velo__stage .velo__note p{font-size:.8rem;line-height:1.45}
  .sc-stage.velo__stage .velo__note p+p{margin-top:.45rem}
  .sc-stage.velo__stage .velo__n{font-size:clamp(3rem,15vh,10rem)}
  .sc-stage.velo__stage .velo__row{padding-block:clamp(.45rem,1.6vh,1rem)}
  .velo__reg{display:none}
}
/* Shorter still (a zoomed or very short window after load), where no
   compaction fits: the kit's fit check releases the act and the stage grows
   with its content (inner.js 3b). A narrow one then stacks into the phone's
   single column, so the labels keep their measure. */
@media(max-width:640px){
  .ri-unpinned .velo__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "rows" "note";row-gap:1.4rem}
}

/* ============ 5 · THE GUIDE ============ */
/* the stage above slides off on its own; full section padding on top of that
   would hold an almost empty screen (devices.md §8) */
.guide{border-top:1px solid var(--line-dim);padding-top:clamp(3.2rem,6vw,5rem)}
.guide .sec-head{max-width:18ch}
.guide__grid{margin-top:2.4rem;align-items:start}
.guide .prose p{max-width:60ch}
/* The page's one sentence, as its own beat across the full measure and
   above the section head's scale: it assembles a word at a time, then the
   colour comes on (the kit's words device, on the line's own travel). */
.guide__line{margin:clamp(3rem,7vw,5.5rem) 0 0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,5.6rem);line-height:.92;letter-spacing:-.02em;color:var(--cto-bone);max-width:16ch;text-wrap:balance}
/* the client's words sit under it, on the bio's column edge: .4 of (100% less the 2.5rem gap), plus the gap */
.guide__quote{margin:clamp(2rem,4vw,3rem) 0 0 calc(40% + 1.5rem)}
@media(max-width:820px){.guide__quote{margin-left:0}}

/* ============ 6 · THE RHYTHM ============ */
.rhythm{overflow:hidden}
.rhythm .wrap{position:relative;z-index:1}
/* The month dial: a thin line clock of 31 day ticks and four week marks.
   The face stands still in ink; the hand, in moss, sweeps once around as
   the section passes (a month runs), and the elapsed arc fills behind it.
   --dial (0 to 1) is the act's --sc-p over .05 to .55, so the month
   completes, hand back at the top and arc closed, as the section settles
   under the bar. CSS reading the engine's variable is the homepage's own
   pattern (the stripes); the race rule is about JS effect loops. Without
   the engine (scripts off, or before mount) the dial shows its finished
   month. */
.rhythm__dial{position:absolute;right:-9%;top:-8vw;width:min(36vw,460px);height:auto;z-index:0;pointer-events:none;
  fill:none;stroke-width:1;--dial:1}
html.sc-ready .rhythm__dial{--dial:clamp(0,calc((var(--sc-p,1) - .05) / .5),1)}
.rhythm__face{stroke:var(--ink);opacity:.22}
.rhythm__ticks{stroke-width:14;stroke-dasharray:1 9}
/* four week marks, centred on the quarters */
.rhythm__weeks{stroke:var(--moss-deep);stroke-width:20;stroke-dasharray:3 97;stroke-dashoffset:1.5;opacity:.5}
.rhythm__run{stroke:var(--moss-deep);stroke-width:1.6;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - 100 * var(--dial));opacity:.7}
.rhythm__hand{stroke:var(--moss-deep);stroke-width:1.6;opacity:.85;transform-box:view-box;transform-origin:200px 200px;
  transform:rotate(calc(var(--dial) * 360deg))}
.rhythm__hand circle{fill:var(--moss-deep);stroke:none}
/* the label knocks the dial's lines out beneath it, as a callout breaks the
   line work on a drawing, so the hand never runs through its letters */
.rhythm .telem{background:var(--paper);box-shadow:0 0 0 .4rem var(--paper)}
.rhythm .sec-head{max-width:14ch}
.rhythm__wire{margin-top:2.4rem}
/* The phone rail (the Book page's pattern, craft/p-book.css): below 820px
   the kit hides the row wire, so the pen writes the route down a rail beside
   the stacked steps. Each step carries a node and a run to the next node;
   the last carries its node, a tail and the onward arrow. The runs stretch
   with their step (preserveAspectRatio none on a 24 unit box drawn 24px
   wide, so a vertical stroke keeps its weight); nodes never stretch. The
   loop is the monthly return: from the Every month node out to a lane left
   of the rail, up, and into the Ongoing node with an arrowhead. It spans
   node to node (the step's height plus the row gap) and its viewBox is that
   span at 390px, so its short horizontal ends stay within a few percent of
   their drawn weight at other phone widths. */
.rh-rail{display:none}
@media(max-width:820px){
  .rhythm .steps{padding-left:3rem;row-gap:2.2rem}
  .rhythm .rh-rail{display:block;position:absolute;left:-30px;width:24px;margin:0;overflow:visible}
  .rhythm .rh-rail--node,.rhythm .rh-rail--end{top:-12px;height:auto}
  .rhythm .rh-rail--node{aspect-ratio:1}
  .rhythm .rh-rail--end{aspect-ratio:24/72}
  /* from under this node to just above the next: the step's padding box
     plus the row gap, less the two node radii (with stroke) */
  .rhythm .rh-rail--run{top:8px;height:calc(100% + 2.2rem - 15px)}
  /* node centre to node centre, in a lane 16px left of the rail */
  .rhythm .rh-rail--loop{top:0;left:-46px;width:28px;height:calc(100% + 2.2rem)}
}

/* ============ 7 · THE RETAINER: the range, extra large ============ */
/* the kanji sits inside the section: at a negative top it painted over the cream section above */
.retainer{overflow:clip}
.retainer .kanji{font-size:min(34vw,420px);right:-3vw;top:2.2rem}
.retainer .wrap{position:relative;z-index:2}
.retainer__head{position:relative}
/* The line break is set by the measure, not by the markup: the scan needs
   plain text, and its line split breaks on any space. Measured in Kallisto
   900: "$5,000 to $15,000" is 10.49em, one word more ("a") is 11.53em. An
   11em measure keeps the range whole on the first line and sends "a month."
   to the second, at every width, because the em follows the font size; the
   size is capped so 10.49em always fits the column (7.6vw of a desktop
   viewport). On a phone that cap would set the page's XL moment smaller
   than its headings, so there the range runs over three lines instead
   (see PHONES). */
.retainer__price{font-size:min(7.6vw,6.6rem);line-height:.9;letter-spacing:-.02em;color:var(--lime);max-width:11em;text-wrap:wrap;margin:0}
.retainer__label{margin-top:1.5rem;color:var(--ash);letter-spacing:.16em;line-height:1.7}
.retainer .lenses{margin-top:2.6rem}
.retainer__note{margin-top:2.2rem;max-width:48ch}

/* ============ 8 · FIT: a clear two column split, ruled by the pen ============ */
/* The split's hairlines are kit wires (data-fx="wire") in place of borders:
   the top rule runs out from the centre both ways, the divider drops, and
   each row's rule is drawn as the row arrives. Each is 1px of --line-paper
   (the pen keeps a stroke's own computed width when it has no weight
   class). The horizontal rules scale uniformly with their box (height
   auto), so the stroke holds 1px at every width; the divider stretches only
   along its length. Scripts off, they are plain solid lines. */
.fit .wire{margin:0;color:var(--line-paper)}
.fit .wire .fit-hl{stroke-width:1}
.fit__grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.4rem}
.fit__top{position:absolute;top:-.5px;left:0;width:100%;height:auto}
.fit__col{position:relative;padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,3vw,2.8rem) 0 0}
.fit__col--no{padding-left:clamp(1.2rem,3vw,2.8rem);padding-right:0}
.fit__div{position:absolute;top:0;left:-.5px;width:2px;height:100%}
.fit__rule{position:absolute;left:0;bottom:-.5px;width:100%;height:auto}
.fit__col::before{content:"";position:absolute;top:-1px;left:0;width:44px;height:2px;background:var(--moss-deep)}
.fit__col--no::before{left:clamp(1.2rem,3vw,2.8rem);background:var(--ink)}
.fit__col h3{display:flex;align-items:center;gap:.75rem;font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1;color:var(--ink)}
.fit__col h3::before{content:"";flex:none;width:12px;height:12px;background:var(--moss-deep)}
.fit__col--no h3::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.fit__col ul{list-style:none;margin-top:1.2rem}
.fit__col li{position:relative;padding:.9rem 0 .9rem 1.5rem;
  font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.5;color:var(--cto-warm-ink)}
.fit__col li::before{content:"";position:absolute;left:0;top:1.45em;width:7px;height:7px;background:var(--moss-deep)}
.fit__col--no li{color:var(--ash-paper)}
.fit__col--no li::before{background:transparent;box-shadow:inset 0 0 0 1px var(--ash-paper)}
@media(max-width:820px){
  .fit__grid{grid-template-columns:minmax(0,1fr)}
  .fit__col{padding-right:0}
  .fit__col--no{padding-left:0;border-top:1px solid var(--line-paper);margin-top:2.4rem}
  .fit__div{display:none}
  .fit__col--no::before{left:0}
}

/* ============ PHONES ============ */
@media(max-width:640px){
  .cto-hero .hero-grid h1{font-size:clamp(2.1rem,9.6vw,3.2rem)}
  .guide__line{font-size:clamp(2.3rem,11vw,3.6rem)}
  /* Three lines at 15vw: "$5,000 to" is 5.78em and "$15,000 a" is 5.52em in
     Kallisto 900, so a 5.9em measure breaks "$5,000 to / $15,000 a / month."
     (58.5px at 390, against 41px section heads). A line-height of .95 keeps
     the comma descenders clear of the next line's caps. */
  .retainer__price{font-size:15vw;max-width:5.9em;line-height:.95}
  .rhythm__dial{width:56vw;right:-20vw;top:-6vw}
  .rhythm__face{opacity:.18}
}

/* ============ REDUCED MOTION: finished states ============ */
@media(prefers-reduced-motion:reduce){
  html.sc-ready .velo__bar{transform:none}
  html.sc-ready .velo__n{opacity:1}
  html.sc-ready .rhythm__dial{--dial:1}
  .tlink,.tlink::after{transition:none}
}