/* ============================================================================
   craft/p-about.css · the About page layer
   Loaded after the kit (scrollcraft.css, d-current.css, inner.css). Only what
   the kit does not cover: the origin's grid and its wide scene, the peak's
   stage, its ghost line and its four brackets, the quiet cream section, the
   list and aside on the lime band, the three bets, the look's spec plate and
   the close's text link. Everything is
   drawn on D's tokens; nothing here restyles a kit or D class globally.
   ========================================================================== */

/* page tokens: ink pitched for small type and rules on the lime band.
   ink at 74% on lime composites to about #4D522A, 6.9:1 on --lime */
.fit{--fit-soft:rgba(24,23,28,.74);--fit-line:rgba(24,23,28,.26)}

/* ---- 2 · the origin ----------------------------------------------------- */
/* the id column (portrait and credits) holds beside the prose on wide screens,
   so the credentials stay in view while the story is read */
.origin__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.8rem,4.5vw,4rem);
  align-items:start;margin-top:2.6rem}
.origin__id{position:sticky;top:calc(var(--nav-h) + 1.6rem)}
.origin__rail{margin-top:1.4rem;gap:.6rem}
.origin__rail div{line-height:1.6;padding-bottom:.6rem}
/* each title holds together, and each separator is bound to the word before
   it (  in the markup), so a wrapped row never opens on a dot */
.origin__rail .t{white-space:nowrap}
.origin__text .lede{margin-bottom:.2rem}
/* the 2 AM scene: a wide screen inside the story, after the line it pictures */
.screen.origin__scene{aspect-ratio:16/9;margin:1.9rem 0 1.7rem}
@media(max-width:900px){
  .origin__grid{grid-template-columns:minmax(0,1fr)}
  .origin__id{position:static;max-width:520px}
}

/* ---- 3 · the peak --------------------------------------------------------- */
/* D's silence ground (ink-3). The stage greets with its eyebrow and the open
   brackets, so it is never an empty screen while it slides in. */
.peak{background:var(--ink-3)}
.peak__stage{background:var(--ink-3)}
.peak__stage .wrap{position:relative;z-index:2}
/* the column is centred on the stage (the type inside it stays left aligned),
   so the open brackets frame the middle of the screen, not its left side */
.peak__col{width:fit-content;max-width:100%;margin-inline:auto}
.peak__frame{position:relative;width:fit-content;max-width:100%;margin-top:.6rem}
/* the scan host carries the type; the inner line inherits it (kit 7.4).
   pretty, not balance: balance evens five lines and hands "not be the ones"
   a line of its own, and the kinetic split animates each rendered line */
.peak__line{font-size:clamp(2rem,5.3vw,5.2rem);line-height:.92;letter-spacing:-.02em;color:#F4F4F0;
  max-width:17ch;text-wrap:pretty}
/* the ghost: the same line in the same type (it shares .peak__line, so it
   breaks where the scan host breaks at every width), bone at 12%, laid under
   the host. The stage is never an empty screen: the line waits there, dim,
   from the first frame the stage slides in, and the sweep writes over it.
   p-about.js fades it out across the scan's hand-off, so the finished line
   never sits on a second copy of itself. Decorative: aria-hidden. */
.peak__ghost{position:absolute;left:0;top:0;width:100%;margin:0;color:rgba(244,244,240,.12);
  pointer-events:none;user-select:none}
/* four registration brackets, 1px lime: they start open toward the stage's
   corners and close in on the line as the pin runs (p-about.js). Transform only. */
.bk{position:absolute;z-index:3;width:clamp(18px,2.2vw,30px);height:clamp(18px,2.2vw,30px);
  border:1px solid var(--lime);pointer-events:none;will-change:transform}
.bk--tl{top:-1rem;left:-1.3rem;border-right:0;border-bottom:0}
.bk--tr{top:-1rem;right:-1.3rem;border-left:0;border-bottom:0}
.bk--bl{bottom:-1rem;left:-1.3rem;border-right:0;border-top:0}
.bk--br{bottom:-1rem;right:-1.3rem;border-left:0;border-top:0}
/* the lede wraps to the line's own width: contain:inline-size keeps it out of
   the column's fit-content sizing, so the frame alone sets the measure and the
   column stays centred on it */
.peak__lede{margin-top:clamp(2rem,5vh,3rem);font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.3vw,2rem);line-height:1.15;letter-spacing:-.01em;color:var(--lime);
  max-width:none;contain:inline-size;text-wrap:pretty}
/* the brackets' readout: decorative telemetry, the gap counting down to zero */
.peak__clear{position:absolute;right:clamp(1.25rem,4vw,3rem);bottom:20px;z-index:3;color:var(--ash)}
.peak__clear b{font-weight:400;color:var(--lime);font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .peak__stage{padding-block:4.5rem 5rem}
}
@media(max-width:640px){
  /* a measure in em holds one set of breaks at every phone width ("should
     not be" stays on one line); left to the width, 412 to 500px breaks
     before "not" */
  .peak__line{font-size:clamp(1.75rem,8.4vw,2.6rem);max-width:10.6em}
  /* the lede breaks after "work," rather than after an article */
  .peak__lede{max-width:17.5em}
  /* the column runs the full width from the gutter, as every other section's
     text does, and the brackets rest inside the 16px gutter */
  .peak__col{width:auto;margin-inline:0}
  .bk--tl,.bk--bl{left:-.25rem}
  .bk--tr,.bk--br{right:-.7rem}
  .peak__clear{display:none}
  /* the hairline and the bottom mark: the kit hides them in every section at this width */
}

/* ---- 4 · the devotion (the quiet section) --------------------------------- */
/* after a pinned stage the first content should arrive near the top of the
   screen, so the top padding is short (devices.md, flow after a pin) */
.devotion{padding-top:clamp(3rem,6vw,5rem)}
.devotion .wrap{position:relative}
.devotion__prose{max-width:62ch}
.devotion__prose p{font-size:clamp(1.06rem,1.45vw,1.24rem);line-height:1.62}
/* the framing line is the block's big type moment: it runs the full measure
   under a hairline with a moss cap, against the small prose above it */
.devotion .kicker--big{position:relative;margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--line-paper);max-width:none;margin-right:clamp(4rem,8vw,7rem)}
.devotion .kicker--big::before{content:"";position:absolute;left:0;top:-1px;width:26px;height:2px;background:var(--moss-deep)}
/* a still rail on the right, the legal rail's grammar: hairline, the kanji
   for devotion set vertically, a vertical mono code, a moss square. Nothing
   here moves; this is the page's quiet section. Wide screens only. */
.devotion__rail{position:absolute;top:0;right:clamp(1.25rem,4vw,3rem);display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  padding-top:.3rem;user-select:none;pointer-events:none}
.devotion__rail::before{content:"";width:1px;height:clamp(4rem,12vh,7rem);background:var(--line-paper)}
.devotion__kj{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;
  writing-mode:vertical-rl;color:var(--ink);opacity:.16}
.devotion__code{writing-mode:vertical-rl;color:var(--ash-paper)}
.devotion__rail::after{content:"";width:7px;height:7px;background:var(--moss-deep)}
@media(max-width:900px){.devotion__rail{display:none}.devotion .kicker--big{margin-right:0}}

/* ---- 5 · fit, on the lime band -------------------------------------------- */
.fit{overflow:hidden}
.fit .wrap{position:relative;z-index:1}
/* the three glyphs of "the true, the good, the beautiful", set as a column */
.fit__kj{position:absolute;right:clamp(.4rem,3vw,2.6rem);top:6%;z-index:0;writing-mode:vertical-rl;
  font-family:var(--font-display);font-weight:900;font-size:clamp(4rem,11vw,10rem);line-height:1;
  color:var(--ink);opacity:.08;pointer-events:none;user-select:none}
.fit__h2{color:var(--ink);font-size:clamp(2rem,4.6vw,3.9rem);line-height:.9;max-width:21ch}
/* the four: an outline drawn grid, so a shared line is never doubled */
.fit__list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:2.4rem}
.fit__list li{position:relative;outline:1px solid var(--fit-line);
  padding:clamp(1.3rem,2.6vw,2rem) clamp(1.2rem,2.4vw,1.9rem) clamp(1.4rem,2.8vw,2.2rem)}
.fit__list li::before{content:"";position:absolute;left:0;top:0;width:26px;height:2px;background:var(--ink)}
.fit__n{display:block;color:var(--fit-soft);margin-bottom:.8rem}
.fit__list p{font-size:clamp(1.08rem,1.6vw,1.32rem);line-height:1.42;color:var(--ink);max-width:34ch}
.fit__split{margin-top:2.6rem;align-items:end}
.fit__body{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:var(--ink);max-width:58ch}
/* the aside, the key and the telemetry on the lime band: the kit's .who--lime variants */
@media(max-width:720px){.fit__list{grid-template-columns:minmax(0,1fr)}}
/* on a phone the heading runs the full width and the column would sit behind
   it; the telemetry line still carries the three glyphs */
@media(max-width:640px){.fit__kj{display:none}}

/* ---- 6 · the thesis ------------------------------------------------------- */
/* no ghost kanji here: the lime band before it and the look after it both
   carry one, so this section's layer is the pixel boot on the team */
.thesis .wrap{position:relative;z-index:2}
.thesis__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.8rem,4.5vw,4rem);
  align-items:center;margin-top:1rem}
.bets{list-style:none;border-top:1px solid var(--line-dim)}
.bet{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2.6vw,2rem);
  padding-block:clamp(1.3rem,2.6vw,1.9rem);border-bottom:1px solid var(--line-dim)}
/* the index is set big against the small type beside it: the page's type contrast */
.bet__n{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.8;
  letter-spacing:-.02em;color:var(--lime);font-variant-numeric:tabular-nums;min-width:2ch}
.bet h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.15rem,1.7vw,1.4rem);
  line-height:1.05;color:#F4F4F0;margin-bottom:.55rem;text-wrap:balance}
.bet p{color:var(--ash);font-size:.98rem;line-height:1.58;max-width:52ch}
.thesis__pic .screen{max-width:460px;margin-inline:auto}
@media(max-width:900px){
  .thesis__grid{grid-template-columns:minmax(0,1fr)}
  .thesis__pic .screen{max-width:420px;margin-inline:0}
}

/* ---- 7 · the look: a spec plate ------------------------------------------- */
.look{overflow:hidden}
.look__kj{font-size:min(30vw,400px);right:-3vw;top:2%}
.look__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
/* sized so AESTHETIC, the longest word (about 6px of width per px of font),
   always fits its column and clears the plate; the peak line stays the
   page's biggest moment */
.look__h2{font-size:clamp(2.6rem,6vw,5.4rem);margin-bottom:1.8rem;color:var(--ink)}
.look__side{padding-top:clamp(0rem,3vw,2.4rem)}
/* the plate: thin line work drawn by the pen (kit 7.6), two flat tiles and four
   knockout labels, each layer on its own parallax rate */
.plate{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin-inline:auto 0}
.wire.plate__wire{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:2}
.plate__tile{position:absolute;display:block;z-index:1}
.plate__tile--lime{width:34%;height:21%;right:-3%;top:15%;background:var(--lime)}
.plate__tile--ink{width:13%;height:13%;left:7%;top:7%;background:var(--ink)}
.plate__lbl{position:absolute;z-index:3;color:var(--ink);background:var(--paper);padding:.22rem .45rem;
  font-size:.6rem;white-space:nowrap}
.plate__lbl--a{left:-3%;top:47%}
.plate__lbl--b{right:0;bottom:19%}
.plate__lbl--c{left:28%;bottom:-2%}
.plate__lbl--d{right:9%;top:2%}
.look .aside{margin-top:2.6rem;max-width:36ch}
@media(max-width:900px){
  .look__grid{grid-template-columns:minmax(0,1fr)}
  .look__side{padding-top:0}
  .plate{max-width:340px;margin-inline:auto}
}

/* ---- 8 · the close -------------------------------------------------------- */
/* .cta-band p (kit) sets margin-top 0 at higher specificity */
.cta-band .close__link{margin-top:.9rem}
/* a 44px target (the build bar's text link, as Custom Build's .cb-tlink):
   the box is 44px tall and the rule is an underline, so it stays under the
   words rather than dropping to the foot of the box */
.close__link a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.2rem;color:var(--ash);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line-dim);
  transition:color .18s var(--e-io),text-decoration-color .18s var(--e-io)}
.close__link a:hover{color:var(--lime);text-decoration-color:var(--lime)}

/* ---- reduced motion: every device at its finished state -------------------- */
@media(prefers-reduced-motion:reduce){
  .bk{transform:none!important}
  /* the kit skips the scan: the line is plain type from the first frame */
  .peak__ghost{display:none}
  .close__link a{transition:none}
}