/* hamdanbaig.com STADIUM
   One grotesk worked across its width axis. Compressed black for the shout,
   open regular for the talk, condensed bold for every number and label.
   The green is not a garnish: it carries the live layer of the whole site.
   Order: primitives, tokens, reset, base, components, layouts, pages, utils. */

/* ====== FONTS */

@font-face{font-family:"Archivo Comp";src:url("/assets/fonts/archivo-comp-800-latin.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Cond";src:url("/assets/fonts/archivo-cond-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Cond";src:url("/assets/fonts/archivo-cond-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Metric matched stand ins, so only the shapes change on the font swap.
   Archivo shares Arial's x-height, so the text stand in needs no size adjust. */
@font-face{font-family:"Display Fallback";src:local("Arial Narrow Bold"),local("Arial Bold"),local("Helvetica Neue Bold");font-weight:800;size-adjust:80%;ascent-override:128%;descent-override:32%;line-gap-override:0%}
@font-face{font-family:"Text Fallback";src:local("Arial"),local("Helvetica Neue");size-adjust:100%;ascent-override:101%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Cond Fallback";src:local("Arial Narrow"),local("Arial"),local("Helvetica Neue");font-weight:500;size-adjust:86%;ascent-override:118%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:"Cond Fallback";src:local("Arial Narrow Bold"),local("Arial Bold"),local("Helvetica Neue Bold");font-weight:700;size-adjust:87%;ascent-override:117%;descent-override:30%;line-gap-override:0%}

/* ====== PRIMITIVES. Raw values; nothing else carries a literal colour. */

:root{
  /* The ground is a black with green already in it, so the accent reads as the
     same material lit up rather than a sticker laid on a neutral. */
  --c-ink:#0D0F0E;
  --c-ink-deep:#070908;
  --c-ink-rise:#151816;
  --c-paper:#F2F5F3;
  --c-text:#CFD6D1;
  --c-muted:#A8B2AC;
  --c-faint:#9CA8A1;
  /* 16.9:1, 12.4:1, 8.6:1 and 7.6:1 on the page ground. Nothing under 7:1,
     so every step survives a bright phone outdoors. */

  /* THE GREEN, two steps. Deep is the flag green and only ever a ground. Lit
     is the one that speaks: 9.5:1 on the page, so it carries live text, figures
     and marks, not just decoration. Two steps, not three, so there is never a
     green a reader has to work out the job of. */
  --c-green-deep:#01411C;
  --c-green-lit:#4FD183;
  --g-wash:rgba(79,209,131,.10);
  --g-hair:rgba(79,209,131,.26);
  --g-rule:rgba(79,209,131,.44);
  --g-glow:rgba(79,209,131,.16);

  --a-hair:rgba(242,245,243,.12);
  --a-rule:rgba(242,245,243,.24);
  --a-mast:rgba(242,245,243,.40);
  --a-lit:rgba(242,245,243,.18);
  --a-weight:rgba(0,0,0,.55);
  --a-well:rgba(0,0,0,.42);
  /* a control boundary clears 3:1, not the 1.3:1 a hairline rule gets away
     with, so no field on the site is a void */
  --a-field:rgba(242,245,243,.44);
  --a-onfield:rgba(242,245,243,.26);
  --a-onfield-text:rgba(242,245,243,.93);
  --a-onfield-soft:rgba(242,245,243,.78);
  --a-onfield-green:rgba(124,226,165,.96);

  --ff-display:"Archivo Comp","Display Fallback","Archivo Narrow","Arial Narrow",Arial,sans-serif;
  --ff-text:"Archivo","Text Fallback",Arial,"Helvetica Neue",sans-serif;
  --ff-furniture:"Archivo Cond","Cond Fallback","Archivo Narrow","Arial Narrow",Arial,sans-serif;
}

/* ====== TOKENS. Semantic roles and the fluid scale; pages use these. */

:root{
  /* ground */
  --bg:var(--c-ink);
  --bg-deep:var(--c-ink-deep);
  --bg-rise:var(--c-ink-rise);
  --field:var(--c-green-deep);

  /* ink */
  --ink:var(--c-paper);          /* display type and the statements */
  --body:var(--c-text);          /* running text */
  --sub:var(--c-muted);          /* secondary copy */
  --fine:var(--c-faint);         /* fine print and furniture only */

  /* the live layer: labels, figures, marks, actions */
  --live:var(--c-green-lit);
  --on-live:#06140C;             /* the ink that sits on a lit green fill */

  /* one numeral system: condensed, tabular, two states */
  --fig:var(--c-muted);
  --fig-lit:var(--c-green-lit);

  /* rules */
  --well:var(--a-well);
  --edge:var(--a-field);         /* the boundary of anything you can type into */
  --hair:var(--a-hair);
  --rule:var(--a-rule);
  --mast:var(--a-mast);

  /* measure */
  --container:1240px;
  --pad:clamp(22px,4.2vw,40px);
  --measure:66ch;

  /* type scale, 320 to 1280. Compressed caps carry no descenders and take
     little width, so the display steps run larger than a serif page would. */
  --t-name:clamp(56px,15vw,152px);
  --t-d1:clamp(38px,5.4vw,70px);
  --t-d2:clamp(31px,4.3vw,53px);
  --t-d3:clamp(24px,2.9vw,35px);
  --t-pull:clamp(27px,3vw,40px);
  --t-spec:clamp(21px,2.1vw,27px);
  --t-job:clamp(19px,1.8vw,23px);
  --t-lede:clamp(17px,1.2vw,18px);
  --t-body:clamp(16px,.95vw,17px);
  --t-small:16px;
  --t-cap:16px;                  /* nothing that reads as prose goes under 16 (scale stepped down 2026-09-17, his call: "very big font sizes") */
  --t-fine:16px;
  --t-label:12px;
  --t-micro:11.5px;

  /* numerals */
  --t-fig-xl:clamp(34px,4vw,54px);
  --t-fig-lg:clamp(27px,2.6vw,34px);
  --t-fig-md:13.5px;

  /* space */
  --s1:6px;
  --s2:12px;
  --s3:18px;
  --s4:26px;
  --s5:38px;
  --s6:44px;
  --s7:58px;
  --s8:clamp(44px,4.4vw,64px);
}

/* ====== RESET */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);color-scheme:dark}
body{margin:0;overflow-x:hidden}
h1,h2,h3,h4,p,figure,fieldset,blockquote{margin:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
ul,ol{margin:0;padding:0;list-style:none}
img,picture,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--live);outline-offset:3px}
::selection{background:var(--c-green-lit);color:var(--on-live)}

/* ====== BASE */

body{
  background:var(--bg);color:var(--body);
  font-family:var(--ff-text);font-size:var(--t-body);line-height:1.6;font-weight:400;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
p+p{margin-top:var(--s4)}
strong{font-weight:600;color:var(--ink)}

h1,h2,h3{
  font-family:var(--ff-display);font-weight:800;color:var(--ink);
  line-height:.92;letter-spacing:-.004em;text-transform:uppercase;
}
h1{font-size:var(--t-d1)}
h2{font-size:var(--t-d2)}
h3{font-size:var(--t-d3);line-height:.96}

/* ====== TYPE ROLES */

/* Every headline on the site is compressed black caps. The optical inset pulls
   the stem to the datum, not the glyph box. */
.display,.chapter__title,.green__title,.essay__pull,.pull{
  font-family:var(--ff-display);font-weight:800;color:var(--ink);
  line-height:.9;letter-spacing:-.004em;text-transform:uppercase;
  margin-left:-.012em;
}
.dir__name,.link-card__title{
  font-family:var(--ff-display);font-weight:800;color:var(--ink);
  font-size:var(--t-d3);line-height:.94;letter-spacing:-.002em;
  text-transform:uppercase;margin-left:-.01em;
}
/* one small caps label for the whole site: eyebrows, dividers, the stage marks
   under the plates, the tier tags, the form's group titles. All of them run in
   the live green, which is how a reader learns what green means here. */
.eyebrow,.divider,.notice__label,.plate__stage,.tier__tag,.form__group-title{
  display:block;
  font-family:var(--ff-furniture);font-weight:700;font-size:var(--t-label);
  letter-spacing:.22em;text-transform:uppercase;color:var(--live);
  font-variant-numeric:lining-nums tabular-nums;
}
.eyebrow{line-height:1}
/* an eyebrow carries a short green bar, so the label reads as a mark struck on
   the page rather than a floating line of small caps */
.eyebrow::before{
  content:"";display:inline-block;vertical-align:.16em;
  width:20px;height:2px;margin-right:11px;background:var(--live);
}
.lede{
  font-size:var(--t-lede);line-height:1.5;color:var(--ink);font-weight:400;
  max-width:54ch;text-wrap:pretty;
}
.text-muted{color:var(--sub)}
.max-w-prose{max-width:var(--measure)}

/* The caption role that replaces the broadsheet's italics: condensed, tracked,
   quiet. A technical annotation, which is what a sports sheet uses. */
.cap-note{
  font-family:var(--ff-furniture);font-weight:500;letter-spacing:.055em;
  color:var(--sub);
}

/* ONE NUMERAL SYSTEM: every figure on the site is set here. Condensed, bold,
   tabular, and the lit state is the green. */
.num,.spec__big,.plate__state,.tier__name,.tier__price,.page-home .offer__price{
  font-family:var(--ff-furniture);font-weight:700;color:var(--fig);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:.01em;
}
.dropcap::first-letter{
  float:left;font-family:var(--ff-display);font-weight:800;font-size:3.5em;
  line-height:.74;padding:.04em .1em 0 0;color:var(--live);
}
.pull,.essay__pull{
  font-size:var(--t-pull);line-height:.94;letter-spacing:-.006em;
  padding-bottom:.06em;
  text-wrap:balance;
}
.divider{padding-top:var(--s5);padding-bottom:var(--s2)}
.rule{height:1px;background:var(--rule)}
.rule--hair{background:var(--hair)}
/* the masthead pair: a green bar over a hairline, the site's heaviest datum */
.rule--mast{
  height:auto;background:none;
  border-top:3px solid var(--live);padding-top:5px;
}
.rule--mast::after{content:"";display:block;height:1px;background:var(--mast)}

/* ====== NAV */

.nav{position:relative;z-index:5}
.nav__inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:var(--s3) var(--s4);padding-top:22px;padding-bottom:20px;
}
.nav__brand{
  grid-area:1/1;
  font-family:var(--ff-furniture);font-weight:700;font-size:17px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;
}
.nav__brand::before{content:"";width:9px;height:16px;background:var(--live);flex:0 0 auto}
.nav__cta{grid-area:1/2;justify-self:end}
.nav__links{grid-area:2/1/3/3;display:flex;flex-wrap:wrap;gap:0 var(--s4);justify-content:space-between}
.nav__link{
  font-family:var(--ff-furniture);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.15em;text-transform:uppercase;color:var(--body);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.nav__link:hover{color:var(--live);border-bottom-color:var(--live)}

/* ====== BUTTONS */

.btn{
  display:inline-block;font-family:var(--ff-furniture);font-weight:700;
  font-size:13px;letter-spacing:.15em;text-transform:uppercase;line-height:1;
  text-decoration:none;border:0;border-radius:0;cursor:pointer;
  padding:17px 26px;text-align:center;transition:background .16s ease,box-shadow .16s ease,color .16s ease;
}
.btn--primary{
  background:var(--live);color:var(--on-live);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.20);
}
.btn--primary:hover{background:#6FE09C;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 4px var(--g-glow)}
.btn--secondary{
  background:none;color:var(--ink);padding-inline:2px;
  box-shadow:inset 0 -2px 0 var(--g-rule);
}
.btn--secondary:hover{color:var(--live);box-shadow:inset 0 -2px 0 var(--live)}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--g-hair)}
.btn--ghost:hover{color:var(--live);box-shadow:inset 0 0 0 1px var(--live)}
.btn--nav{font-size:11.5px;padding:12px 17px;letter-spacing:.16em}
.btn--lg{font-size:14px;padding:21px 34px}
.btn--block{display:block;width:100%}

/* ====== BADGE */

.badge{
  display:inline-block;font-family:var(--ff-furniture);font-weight:700;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  padding:8px 12px;background:var(--live);color:var(--on-live);
}
.badge--quiet{background:none;color:var(--live);box-shadow:inset 0 0 0 1px var(--g-rule)}

/* ====== MASTHEAD */
/* The portrait is the page. Full bleed from under the nav, face high, no box,
   no radius, no border, no scrim. The name sits in the dark of his own shirt. */

.masthead{position:relative;isolation:isolate;background:var(--bg)}
.masthead__frame{position:relative;min-height:min(66vh,520px);display:flex}
.masthead__img{position:absolute;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);z-index:0;overflow:hidden}
.masthead__img img{width:100%;height:100%;object-fit:cover;object-position:54% 16%}
.masthead__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,#0D0F0E 0%,#0D0F0E 4%,rgba(13,15,14,.94) 12%,rgba(13,15,14,.8) 22%,rgba(13,15,14,.5) 36%,rgba(13,15,14,.22) 47%,rgba(13,15,14,.06) 58%,rgba(13,15,14,.1) 72%,rgba(13,15,14,.3) 86%,rgba(13,15,14,.72) 95%,#0D0F0E 100%);
}
.masthead__head{position:relative;z-index:2;align-self:flex-end;width:100%;padding-bottom:var(--s4)}
.masthead__kicker{color:var(--a-onfield-soft);margin-bottom:var(--s3)}
.masthead__name{
  font-family:var(--ff-display);font-weight:800;color:var(--ink);
  font-size:var(--t-name);line-height:.84;letter-spacing:-.008em;
  text-transform:uppercase;margin-left:-.012em;
}
.masthead__rest{position:relative;z-index:2;padding-top:var(--s5);padding-bottom:var(--s7)}
.masthead__rule{width:132px;height:4px;background:var(--live);margin:var(--s5) 0 var(--s4);display:none}
.masthead__job{
  font-family:var(--ff-text);font-weight:600;font-size:var(--t-job);line-height:1.3;
  color:var(--ink);max-width:34ch;text-wrap:balance;
}
.masthead__body{margin-top:var(--s4);max-width:56ch;text-wrap:pretty}
.masthead__cta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4) var(--s5);margin-top:var(--s5)}

/* ====== SPEC ROWS. Four facts on the masthead rule. */

.specs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
.spec{padding:var(--s4) 0 var(--s3);position:relative}
.spec:nth-child(2),.spec:nth-child(4){padding-left:var(--s4)}
.spec:nth-child(2)::before,.spec:nth-child(4)::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hair);
}
.spec:nth-child(3),.spec:nth-child(4){border-top:1px solid var(--hair)}
/* one face for the whole strip, whether the cell carries a number or a word */
.spec__big{
  display:block;line-height:1;color:var(--live);letter-spacing:.05em;
  text-transform:uppercase;
  font-size:clamp(20px,2.4vw,31px);             /* FROM PKR 20,000 holds one line */
}
.spec__small{
  display:block;margin-top:var(--s2);font-size:var(--t-small);color:var(--sub);
  font-family:var(--ff-furniture);font-weight:500;letter-spacing:.055em;
}

/* ====== CHAPTER. A datum rule, a large muted numeral on it, the argument. */

.chapter{border-top:1px solid var(--rule);padding-top:var(--s4);position:relative}
.chapter::before{content:"";position:absolute;top:-2px;left:0;width:88px;height:4px;background:var(--live)}
.chapter__num{
  font-size:var(--t-fig-xl);line-height:.82;display:block;margin-bottom:var(--s3);
  color:var(--fig-lit);
}
.chapter__eyebrow{margin-bottom:var(--s2)}
.chapter__title{max-width:24ch}
.chapter__lede{margin-top:var(--s4)}

/* ====== PHOTO ESSAY PLATES */
/* Three frames graded to one warm monochrome in the image pipeline. */

.essay{margin-top:var(--s7)}
/* The "overweight" master is a 257 px phone picture and there is no bigger one,
   so its frame is capped at 257 below and the rising scale keeps it smallest.
   The other two carry 2x files. */
.plates{display:grid;gap:0}
.plate{padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--hair)}
.plate:nth-child(3){border-bottom:0;padding-bottom:0;margin-bottom:0}
.plate__frame{
  position:relative;isolation:isolate;overflow:hidden;background:var(--bg-rise);
  margin-bottom:var(--s3);
}
.plate__frame::before{                        /* film grain, so the set agrees */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.plate__frame::after{                         /* a print vignette, not a UI shadow */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 46px rgba(12,10,8,.30);
}
/* all three frames stand the same height: 3:4, the Today photograph shown whole and the two earlier ones re-cropped taller from their masters */
.plate__frame img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.plate__frame{width:100%}
/* the frame that is the present tense is the one lit at its foot */
.plate:nth-child(3) .plate__frame::after{box-shadow:inset 0 0 46px rgba(12,10,8,.30),inset 0 -5px 0 var(--live)}
.plates__rule{display:none}

.plate__note{
  margin-top:var(--s1);font-size:var(--t-cap);line-height:1.4;color:var(--sub);
  font-family:var(--ff-furniture);font-weight:500;letter-spacing:.05em;
}
.plate__state{margin-top:var(--s1);font-size:var(--t-fig-md);letter-spacing:.06em;text-transform:uppercase}
.plate__state--lit{color:var(--fig-lit)}     /* past dimmed, present lit */

.essay__close{margin-top:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s4);position:relative}
.essay__close::before{content:"";position:absolute;top:-2px;left:0;width:88px;height:4px;background:var(--live)}
.essay__pull{max-width:30ch}
.essay__note{margin-top:var(--s3);font-size:var(--t-small);line-height:1.55;color:var(--sub);text-wrap:pretty}

/* ====== LEDGER. One ruled index: numeral, title, one line of body. */

.ledger{border-top:1px solid var(--rule);margin-top:var(--s6)}
.ledger__row{
  display:grid;grid-template-columns:2.4em minmax(0,1fr);
  column-gap:var(--s3);align-items:baseline;
  padding:var(--s4) 0;border-bottom:1px solid var(--hair);
  position:relative;transition:background .16s ease;
}
.ledger__row::before{
  content:"";position:absolute;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);top:0;bottom:0;
  background:var(--g-wash);opacity:0;transition:opacity .16s ease;pointer-events:none;
}
.ledger__row:hover::before{opacity:1}
.ledger__num{grid-area:1/1;font-size:var(--t-fig-lg);line-height:.9;color:var(--fig-lit)}
.ledger__title{
  grid-area:1/2;font-family:var(--ff-display);font-weight:800;color:var(--ink);
  font-size:23px;letter-spacing:-.002em;line-height:1;text-transform:uppercase;
}
.ledger__body{grid-area:2/2;margin-top:var(--s2);color:var(--sub);text-wrap:pretty}
.ledger__after{display:flex;justify-content:flex-start;margin-top:var(--s4)}
.link-rule{
  font-family:var(--ff-furniture);font-weight:700;font-size:12.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--live);text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--g-rule);padding-bottom:4px;
}
.link-rule:hover{box-shadow:inset 0 -2px 0 var(--live)}

/* ====== DIRECTORY */

.dir-list{border-bottom:1px solid var(--hair)}
.dir{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:var(--s1) var(--s3);padding:var(--s4) 0;
  border-top:1px solid var(--hair);text-decoration:none;color:inherit;
}
.dir__name{grid-area:1/1;line-height:1}
.dir__handle{
  grid-area:1/2;font-family:var(--ff-furniture);font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--live);
  text-align:right;white-space:nowrap;
}
.dir__body{grid-area:2/1/3/3;font-size:var(--t-small);line-height:1.5;color:var(--sub)}
.dir:hover .dir__name{color:var(--live)}
.dir:hover .dir__handle{color:var(--ink)}

/* ====== THE GREEN FIELD. The site spends its colour exactly once, here. */

.green{
  position:relative;isolation:isolate;
  background:var(--field);color:var(--ink);
  border-top:4px solid var(--live);
  border-bottom:1px solid var(--a-weight);
  padding-block:clamp(64px,8.4vw,110px);
}
.green::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(86% 74% at 16% 0%,rgba(140,235,178,.16),rgba(140,235,178,0) 68%),
    linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(0,0,0,.28) 100%);
}
.green>*{position:relative;z-index:1}
.green__grid{display:grid;gap:var(--s6)}
.green__eyebrow{color:var(--a-onfield-green);margin-bottom:var(--s4)}
.green__eyebrow::before{background:var(--a-onfield-green)}
.green__title{font-size:var(--t-d2);line-height:1;max-width:16ch;text-wrap:balance}
.green__body{margin-top:var(--s4);color:var(--a-onfield-text);max-width:46ch;text-wrap:pretty}
.green__cta{margin-top:var(--s5)}
.green__list{border-top:1px solid var(--a-onfield)}
.green__item{
  position:relative;padding:var(--s3) 0 var(--s3) var(--s4);
  border-bottom:1px solid var(--a-onfield);
  color:var(--a-onfield-text);font-size:var(--t-small);line-height:1.45;
}
.green__item::before{
  content:"";position:absolute;left:0;top:calc(var(--s3) + .52em);
  width:9px;height:2px;background:var(--a-onfield-green);
}
/* on the deep field the loud control inverts: paper fill, field green type */
.green .btn--primary{background:var(--ink);color:var(--field);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
.green .btn--primary:hover{background:#fff;box-shadow:0 0 0 4px rgba(242,245,243,.16)}
.green .btn--secondary{color:var(--ink);box-shadow:inset 0 -2px 0 var(--a-onfield)}
.green .btn--secondary:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}

/* ====== PRICE TABLE */
/* Not three cards. A ruled index in the ledger idiom: the length at the left in
   the figure face, the price as the lit figure, the terms to the right. The
   recommended row is marked by weight on its rule. */

.tiers{border-top:1px solid var(--rule)}
.tier{display:grid;gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--hair)}
.tier--featured{box-shadow:inset 0 4px 0 var(--live);background:var(--g-wash)}
.tier__name{                                  /* one numeral system: "6 MONTHS" */
  font-family:var(--ff-display);font-weight:800;font-size:var(--t-d3);margin-top:var(--s2);
  line-height:.96;letter-spacing:-.002em;text-transform:uppercase;color:var(--ink);
}
.tier__badge{margin-top:var(--s3)}
.tier__price{
  color:var(--fig-lit);font-size:var(--t-fig-lg);line-height:1;letter-spacing:.005em;
}
.tier__unit{
  display:block;margin-top:var(--s1);font-family:var(--ff-furniture);font-weight:500;
  font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--live);
}
.tier__total{font-size:var(--t-small);color:var(--sub)}
.tier__features{display:grid;gap:var(--s2);margin-top:var(--s4)}
.tier__features li{position:relative;padding-left:var(--s4);font-size:var(--t-small);color:var(--body)}
.tier__features li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;background:var(--live)}

/* ====== FAQ */

.faq{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--hair)}
.faq__q{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;
  padding:var(--s4) 0;cursor:pointer;list-style:none;
  font-family:var(--ff-text);font-weight:600;font-size:var(--t-lede);line-height:1.35;color:var(--ink);
}
.faq__q:hover{color:var(--live)}
.faq__q::after{
  content:"+";font-family:var(--ff-furniture);font-weight:700;font-size:23px;
  color:var(--live);line-height:1;transition:transform .18s ease;
}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__item[open] .faq__q{color:var(--live)}
.faq__a{padding-bottom:var(--s4);color:var(--sub);max-width:64ch;text-wrap:pretty}

/* ====== FORM */

.form{display:grid;gap:var(--s5)}
.form__grid{display:grid;gap:var(--s4)}
.form__group{border:0;padding:0}
.form__group>*+*{margin-top:var(--s4)}
.form__group-title{width:100%;border-top:1px solid var(--hair);padding-top:var(--s4)}
.form__group:first-of-type .form__group-title{border-top:0;padding-top:0}
.field{display:grid;gap:var(--s1)}
.field__label{                                /* the smallest text at the one
  place a visitor has to read carefully, so it is not the smallest any more */
  font-family:var(--ff-furniture);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--body);
}
.field__req{color:var(--live);margin-left:.35em}
.field__input{
  width:100%;background:var(--well);color:var(--ink);
  border:1px solid var(--edge);border-radius:0;
  padding:14px 15px;font-family:var(--ff-text);font-size:17px;line-height:1.4;
  appearance:none;
}
.field__input::placeholder{color:var(--fine);opacity:1}
.field__input:hover{border-color:var(--g-rule)}
.field__input:focus{outline:none;border-color:var(--live);box-shadow:0 0 0 3px var(--g-glow)}
textarea.field__input{min-height:120px;resize:vertical}
select.field__input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 2 6 6.6 11 2' fill='none' stroke='%234FD183' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
select.field__input option{                  /* the native list is drawn by the
  browser; give it the well and the ink, or Windows paints it grey on grey */
  background:var(--well);color:var(--ink);padding:10px 15px;
}
select.field__input option:checked{background:var(--live);color:var(--on-live);
}
.form__note{font-size:var(--t-fine);line-height:1.55;color:var(--sub)}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ====== SUCCESS */

.success{
  border-top:4px solid var(--live);padding-top:var(--s5);
}
.success .eyebrow{margin-bottom:var(--s3)}

/* ====== LINK LIST */

.link-list{display:grid;border-top:1px solid var(--rule)}
.link-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--hair);
  text-decoration:none;color:inherit;position:relative;
}
.link-card::before{
  content:"";position:absolute;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);top:0;bottom:0;
  background:var(--g-wash);opacity:0;transition:opacity .16s ease;pointer-events:none;
}
.link-card:hover::before{opacity:1}
.link-card::after{
  content:"\2192";font-family:var(--ff-furniture);font-weight:700;font-size:18px;color:var(--live);
  transition:transform .16s ease;
}
.link-card:hover::after{transform:translateX(4px)}
.link-card__title{display:block;line-height:1}
.link-card__sub{display:block;margin-top:var(--s1);font-size:var(--t-small);color:var(--sub)}
/* Raised, never enclosed: the mark the recommended price row carries. */
.link-card--lead{box-shadow:inset 0 4px 0 var(--live);padding-top:var(--s5)}
.link-card--lead .link-card__title{font-size:var(--t-d2)}
.link-card:hover .link-card__title{color:var(--live)}

/* The colophon that closes the index: the standing policy, then the row of
   platforms. The index already ends on a rule, so the notice draws no second. */
.notice{display:grid;gap:var(--s2);margin-top:var(--s5)}
.notice__body{font-size:var(--t-small);line-height:1.55;color:var(--body)}
.social-row{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hair);
}

/* ====== LISTS */

.list-check,.list-cross{display:grid;gap:var(--s3)}
.list-check li,.list-cross li{position:relative;padding-left:var(--s5);text-wrap:pretty}
.list-check li::before,.list-cross li::before{
  position:absolute;left:0;top:0;
  font-family:var(--ff-furniture);font-weight:700;font-size:14px;line-height:1.6;
}
.list-check li::before{content:"\2713";color:var(--live)}
.list-cross li::before{content:"\00d7";color:var(--fine)}
.list-check li strong,.list-cross li strong{
  font-family:var(--ff-furniture);font-weight:700;font-size:var(--t-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--live);
}

/* ====== PDF COVER */
/* A flat mock of the real cover: bold condensed caps, and no colour. */

.cover{                                       /* A4, so it reads as a page */
  display:grid;gap:var(--s2);justify-items:center;align-content:center;
  text-align:center;aspect-ratio:1/1.414;
  padding:var(--s6) var(--s5);background:var(--bg-rise);
  box-shadow:inset 0 0 0 1px var(--g-hair),inset 0 6px 0 var(--live);
}
.cover__eyebrow{
  font-family:var(--ff-furniture);font-weight:700;font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--live);
}
.cover__title{
  font-family:var(--ff-display);font-weight:800;font-size:clamp(44px,7vw,68px);
  line-height:.88;letter-spacing:-.004em;text-transform:uppercase;color:var(--ink);
  margin-top:var(--s3);
}
.cover__subtitle{
  margin-top:var(--s3);font-size:var(--t-small);color:var(--sub);max-width:30ch;
  font-family:var(--ff-furniture);font-weight:500;letter-spacing:.05em;
}
.cover__name{
  margin-top:var(--s5);font-family:var(--ff-furniture);font-weight:700;font-size:19px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.cover__handle{
  margin-top:var(--s1);font-family:var(--ff-furniture);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--fine);
}

/* ====== FOOTER. A room darker than the page, so the site ends. */

.footer{background:var(--bg-deep);color:var(--sub)}
.footer__mast{border-top:4px solid var(--live);padding-top:5px}
.footer__mast::after{content:"";display:block;height:1px;background:var(--mast)}
.footer__grid{display:grid;gap:var(--s6);padding-top:var(--s6);padding-bottom:var(--s6)}
.footer__brand{
  font-family:var(--ff-display);font-weight:800;font-size:clamp(38px,5.4vw,66px);
  line-height:.9;letter-spacing:-.004em;text-transform:uppercase;color:var(--ink);
}
.footer__tag{
  margin-top:var(--s3);font-size:var(--t-small);color:var(--sub);max-width:34ch;
  font-family:var(--ff-furniture);font-weight:500;letter-spacing:.05em;
}
.footer__col{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;
  padding:var(--s3) 0;border-top:1px solid var(--hair);
}
.footer__col:first-child{border-top:0;padding-top:0}
.footer__label{flex:0 0 100%;font-size:11px;letter-spacing:.2em;line-height:1.4}
.footer__label::before{display:none}
.footer__links{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.footer__links a,.social-row a{font-size:var(--t-small);color:var(--body);text-decoration:none}
.footer__links a:hover,.social-row a:hover{color:var(--live)}
.footer__note{padding-top:var(--s3);border-top:1px solid var(--hair);font-size:var(--t-fine);line-height:1.55;color:var(--sub)}
.footer__bottom{
  border-top:1px solid var(--hair);padding-block:var(--s4) var(--s5);
  font-family:var(--ff-furniture);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fine);
  font-variant-numeric:lining-nums tabular-nums;
}

/* ====== LAYOUTS */

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
/* A narrower MEASURE, not a narrower page: every rule keeps the left datum. */
.container--narrow>*{max-width:880px}
.container--form>*{max-width:760px}
.container--links>*{max-width:820px}

.section{padding-block:var(--s8)}
.section--alt{background:var(--bg-rise)}
.section--tight{padding-block:var(--s7)}

.stack>*+*{margin-top:var(--s4)}
.stack p+p{margin-top:var(--s4)}

.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5)}
.split{display:grid;gap:var(--s6)}

/* ====== PAGE HOOKS */

.page-blueprint-thanks main,.page-coaching-thanks main,.page-404 main{padding-block:var(--s7)}
.page-coaching .tiers{margin-top:var(--s6)}

/* COACHING. There is one good photograph and home spends it, full bleed, as its
   whole idea. Running it again here with a five percent pan was the same page
   twice, so this one opens on type at masthead scale. */
.page-coaching .co-open{padding-top:var(--s4);padding-bottom:var(--s7)}
.page-coaching .co-head{padding-top:var(--s5)}
.page-coaching .co-kicker{margin-bottom:var(--s4)}
.page-coaching .co-title{
  font-family:var(--ff-display);font-weight:800;color:var(--ink);
  font-size:clamp(46px,8.8vw,96px);line-height:.88;letter-spacing:-.006em;
  text-transform:uppercase;margin-left:-.012em;max-width:17ch;text-wrap:balance;
}
.page-coaching .co-lower{
  display:grid;gap:var(--s5);margin-top:var(--s6);
  border-top:1px solid var(--rule);padding-top:var(--s5);
}
.page-coaching .co-stand{max-width:52ch;text-wrap:pretty}
@media (min-width:34em){
  .page-coaching .ledger__row{grid-template-columns:2.6em minmax(0,13.5em) minmax(0,1fr);column-gap:var(--s4)}
  .page-coaching .field--wide{grid-column:1/-1}
}
@media (min-width:64em){
  .page-coaching .co-open{padding-top:152px}
  .page-coaching .co-lower{grid-template-columns:minmax(0,1fr) auto;gap:var(--s7);align-items:start}
  .page-coaching .ledger__row{grid-template-columns:3.2em minmax(0,20.5em) minmax(0,1fr);column-gap:var(--s5)}
  .page-coaching .ledger__title{font-size:24px}   /* sentences, not one word entries */
  /* the second "Common questions." is a standfirst, not a second masthead */
  .page-coaching #faq .chapter__title{font-size:var(--t-d3)}
}

/* BLUEPRINT. A title page for the document the page gives away: the name of the
   thing at masthead scale, the cover under the brief, the form on its own stock. */
.page-blueprint .bp-open{padding-top:var(--s4);padding-bottom:var(--s8)}
.page-blueprint .bp-head{padding-top:var(--s5)}
.page-blueprint .bp-kicker{margin-bottom:var(--s4)}
.page-blueprint .bp-headline{display:grid;gap:var(--s4)}
.page-blueprint .bp-title{
  font-family:var(--ff-display);font-weight:800;color:var(--ink);
  font-size:clamp(58px,11.6vw,126px);line-height:.84;letter-spacing:-.008em;
  text-transform:uppercase;margin-left:-.012em;
}
.page-blueprint .bp-stand{
  font-family:var(--ff-text);font-weight:600;font-size:var(--t-job);line-height:1.3;
  color:var(--ink);max-width:34ch;text-wrap:pretty;
}
.page-blueprint .bp-split{display:grid;gap:var(--s6);margin-top:var(--s7)}
.page-blueprint .bp-form{order:-1}            /* on a phone the form comes first */
.page-blueprint .cover{max-width:414px}   /* A4 at 414 wide is exactly the form height, so top and bottom edges meet */
/* a contents leaf, not the home page's three column ledger */
.page-blueprint .ledger__row{grid-template-columns:2.6em minmax(0,1fr);column-gap:var(--s4)}
.page-blueprint .ledger__title{grid-area:1/2;font-size:20px}
.page-blueprint .ledger__body{grid-area:2/2;margin-top:var(--s2);max-width:64ch}
/* the bio standfirst is a bio standfirst, not a second masthead */
.page-blueprint #bio .chapter__title{font-size:var(--t-d3);max-width:30ch}
.page-blueprint .bp-form{
  background:var(--bg-rise);padding:var(--s4);
  box-shadow:inset 0 4px 0 var(--live),inset 0 0 0 1px var(--g-hair);
}
.page-blueprint .bp-quote{
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hair);
  padding-left:var(--s4);box-shadow:inset 3px 0 0 var(--live);
  font-size:var(--t-lede);line-height:1.5;color:var(--body);
  max-width:44ch;text-wrap:pretty;
}
@media (min-width:34em){
  .page-blueprint .bp-form{padding:var(--s5)}
}
@media (min-width:64em){
  .page-blueprint .bp-open{padding-top:152px;padding-bottom:var(--s8)}
  .page-blueprint .bp-headline{
    grid-template-columns:auto minmax(0,1fr);column-gap:var(--s6);align-items:end;
  }
  .page-blueprint .bp-stand{padding-bottom:.2em;max-width:40ch}
  .page-blueprint .bp-split{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    column-gap:var(--s7);align-items:start;
  }
  .page-blueprint .bp-form{order:0}
}

/* BLUEPRINT THANKS. One statement, one control, one onward row. */
.page-blueprint-thanks .th-title{
  font-size:clamp(42px,6.4vw,82px);line-height:.94;letter-spacing:-.024em;max-width:15ch;
}
.page-blueprint-thanks .th-lede{margin-top:var(--s4)}
.page-blueprint-thanks .th-cta{margin-top:var(--s6)}
.page-blueprint-thanks .th-note{
  margin-top:var(--s5);font-size:var(--t-small);line-height:1.55;color:var(--sub);max-width:46ch;
}
@media (min-width:64em){
  .page-blueprint-thanks main{padding-top:150px}
}

/* LINKS. A link-in-bio page, the shape the first site had and he asked for
   back (2026-09-17): one centred column, the same round picture people just
   saw on the app they came from, the name, one line, a stack of buttons. */
.page-links .lk{
  width:100%;max-width:480px;margin-inline:auto;min-height:100vh;
  padding:48px 20px 28px;display:flex;flex-direction:column;
}
.page-links .lk-head{display:grid;justify-items:center;text-align:center}
.page-links .lk-avatar{
  width:120px;height:120px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--live),0 0 0 8px var(--g-wash),0 10px 36px rgba(0,0,0,.6);
}
.page-links .lk-name{
  margin-top:22px;font-family:var(--ff-display);font-weight:800;font-size:38px;
  line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);
}
.page-links .lk-handle{
  margin-top:8px;font-family:var(--ff-furniture);font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--live);
}
.page-links .lk-bio{margin-top:14px;font-size:15px;line-height:1.55;color:var(--body);max-width:34ch;text-wrap:pretty}
.page-links .lk-badge{margin-top:14px}
.page-links .lk-links{display:grid;gap:12px;margin-top:32px}
.page-links .lk-link{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:16px 18px;background:var(--bg-rise);box-shadow:inset 0 0 0 1px var(--edge);
  text-decoration:none;color:inherit;transition:box-shadow .16s ease,transform .16s ease;
}
.page-links .lk-link:hover{box-shadow:inset 0 0 0 1px var(--live);transform:translateY(-1px)}
.page-links .lk-link--lead{
  background:linear-gradient(135deg,var(--g-wash),var(--bg-rise) 70%);
  box-shadow:inset 0 0 0 1px var(--live);
}
.page-links .lk-tag{
  position:absolute;top:-9px;left:16px;padding:3px 8px;background:var(--live);color:var(--on-live);
  font-family:var(--ff-furniture);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.page-links .lk-icon{
  width:40px;height:40px;display:grid;place-items:center;color:var(--live);
  background:var(--g-wash);box-shadow:inset 0 0 0 1px var(--g-rule);
}
.page-links .lk-icon svg{width:18px;height:18px}
.page-links .lk-title{
  display:block;font-family:var(--ff-furniture);font-weight:700;font-size:16px;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.2;color:var(--ink);
}
.page-links .lk-sub{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--sub)}
.page-links .lk-arrow{
  font-family:var(--ff-furniture);font-weight:700;font-size:18px;color:var(--fine);
  transition:transform .16s ease,color .16s ease;
}
.page-links .lk-link:hover .lk-arrow{color:var(--live);transform:translateX(3px)}
.page-links .lk-divider{
  display:flex;align-items:center;gap:12px;margin:14px 4px 0;
  font-family:var(--ff-furniture);font-weight:700;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--fine);
}
.page-links .lk-divider::before,.page-links .lk-divider::after{content:"";flex:1;height:1px;background:var(--hair)}
.page-links .lk-notice{
  margin-top:28px;padding:14px 16px;text-align:center;font-size:13px;line-height:1.55;color:var(--sub);
  background:var(--g-wash);box-shadow:inset 0 0 0 1px var(--g-rule);
}
.page-links .lk-notice__label{
  display:block;margin-bottom:4px;font-family:var(--ff-furniture);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--live);
}
.page-links .lk-notice strong{color:var(--ink);font-weight:600}
.page-links .lk-socials{display:flex;justify-content:center;gap:12px;margin-top:30px}
.page-links .lk-social{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--bg-rise);box-shadow:inset 0 0 0 1px var(--edge);color:var(--sub);
  transition:color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.page-links .lk-social:hover{color:var(--live);box-shadow:inset 0 0 0 1px var(--live);transform:translateY(-2px)}
.page-links .lk-social svg{width:18px;height:18px}
.page-links .lk-foot{
  margin-top:auto;padding-top:28px;text-align:center;font-family:var(--ff-furniture);font-weight:500;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fine);
}
.page-links .lk-foot a{color:var(--live);text-decoration:none}
@media (max-width:30em){
  .page-links .lk{padding:36px 18px 20px}
  .page-links .lk-avatar{width:104px;height:104px}
  .page-links .lk-name{font-size:34px}
  .page-links .lk-link{padding:14px 15px;gap:12px}
}

/* chapter 04 stands on the green field but is still a chapter, so it carries
   the same large numeral as 01, 02, 03 and 05, in the field's own ink */
.page-home .green .chapter__num{color:var(--a-onfield-green);margin-bottom:var(--s4)}

/* Coaching is the one thing on the site that earns money, so it is the one
   block that is a panel and not a ruled row. Same stock and the same lit bar as
   the blueprint form, so it reads as a place you do something. */
.page-home .offer{
  margin-top:var(--s5);padding:var(--s5) var(--s4);
  background:var(--bg-rise);
  box-shadow:inset 0 4px 0 var(--live),inset 0 0 0 1px var(--g-hair);
  display:grid;gap:var(--s5);position:relative;
}
.page-home .offer>p{margin:0}
.page-home .offer__cta{order:1}          /* stacked: reasons first, then the control */
.page-home .offer__list{display:grid;gap:var(--s2);align-content:start}
.page-home .offer__list li{
  position:relative;padding-left:var(--s4);
  font-size:var(--t-small);line-height:1.45;color:var(--body);
}
.page-home .offer__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--live);
}
.page-home .offer__price{
  color:var(--fig-lit);font-size:var(--t-fig-xl);line-height:.86;letter-spacing:.005em;
}
.page-home .offer__terms{margin-top:var(--s3)}
.page-home .offer__from,.page-home .offer__unit{
  display:block;font-weight:700;font-size:var(--t-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--live);
}
.page-home .offer__from{margin-bottom:var(--s2)}
.page-home .offer__unit{margin-top:var(--s2)}
/* the separator binds forward, so no line can end on a middle dot */
.page-home .offer__terms{font-size:var(--t-small);line-height:1.5;color:var(--sub)}
.page-home .offer__terms span+span::before{content:"\00b7";margin-right:.38em;color:var(--live)}
@media (min-width:34em){
  .page-home .offer{padding:var(--s5);grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--s5) var(--s6);align-items:start}
  .page-home .offer__cta{grid-column:1/-1;order:0}
}

/* 404: the code itself is a figure, so it is set like every other figure */
.page-404 .lost{border-top:1px solid var(--rule);padding-top:var(--s4);position:relative}
.page-404 .lost::before{content:"";position:absolute;top:-2px;left:0;width:88px;height:4px;background:var(--live)}
.page-404 .lost__num{font-size:var(--t-fig-xl);line-height:.82;display:block;margin-bottom:var(--s4);color:var(--fig-lit)}
.page-404 .lost__title{font-size:var(--t-d2);line-height:1;max-width:18ch}
.page-404 .lost__lede{margin-top:var(--s4);font-size:var(--t-lede);line-height:1.56;color:var(--ink);max-width:46ch}
.page-404 .link-list{margin-top:var(--s7)}
@media (min-width:64em){
  .page-404 main{padding-top:152px;padding-bottom:var(--s8)}
}

/* ====== UTILITIES */

.measure{max-width:var(--measure)}
.flow-top{margin-top:var(--s6)}
.flow-top--sm{margin-top:var(--s4)}

/* ====== TABLET */

@media (min-width:34em){
  .nav__inner{display:flex;align-items:baseline;gap:var(--s5);padding-top:26px}
  .nav__brand{margin-right:auto}
  .nav__links{display:flex;gap:var(--s5);justify-content:flex-start}

  .form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}

  .tier{grid-template-columns:minmax(0,13em) minmax(0,1fr);column-gap:var(--s6);align-items:start}
  .tier__label{grid-area:1/1}
  .tier__price{grid-area:2/1}
  .tier__detail{grid-area:1/2/3/3}
  .tier__cta{grid-area:3/1/4/3}
  .tier__cta .btn{display:inline-block;width:auto}

  .specs{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}
  .spec{padding:var(--s4) 0 var(--s4)}
  .spec:nth-child(n+2){padding-left:var(--s4)}
  .spec:nth-child(n+2)::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hair);
  }
  .spec:nth-child(n+3){border-top:0}

  .plates{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 1px auto;column-gap:var(--s4)}
  .plate{display:contents}
  .plate__frame{align-self:end;margin-bottom:0}
  .plate:nth-child(1) .plate__frame{grid-area:1/1;width:100%}
  .plate:nth-child(2) .plate__frame{grid-area:1/2;width:100%}
  .plate:nth-child(3) .plate__frame{grid-area:1/3;width:100%}
  .plate:nth-child(1) .plate__cap{grid-area:3/1}
  .plate:nth-child(2) .plate__cap{grid-area:3/2}
  .plate:nth-child(3) .plate__cap{grid-area:3/3}
  .plate__cap{padding-top:var(--s3)}
  .plates__rule{display:block;grid-area:2/1/3/4;background:var(--rule)}

  .essay__close{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s6);align-items:start}
  .essay__note{margin-top:.35em}

  .ledger__row{grid-template-columns:2.6em minmax(0,11em) minmax(0,1fr);column-gap:var(--s5)}
  .ledger__title{grid-area:1/2}
  .ledger__body{grid-area:1/3;margin-top:0}

  .green__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:start}
  .green__list{margin-top:calc(var(--t-label) + var(--s4))}

  .footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .footer__label{flex:0 0 84px;line-height:1.9}
}

/* ====== DESKTOP */

@media (min-width:64em){
  .nav{position:absolute;top:0;left:0;right:0}
  .nav__inner{padding-top:30px;padding-bottom:22px}

  .masthead__frame{position:static;min-height:0;display:block}
  .masthead__img{position:absolute;inset:0 0 0 auto;left:auto;width:min(54%,778px);right:max(0px,calc((100% - 1440px) / 2));transform:none}   /* past 1440px the portrait stays with the content, not the window edge (2026-09-18) */
  .masthead__img img{object-position:56% 19%}
  .masthead__img::after{
    background:
      linear-gradient(90deg,#0D0F0E 0%,#0D0F0E 5%,rgba(13,15,14,.97) 12%,rgba(13,15,14,.88) 20%,rgba(13,15,14,.72) 29%,rgba(13,15,14,.5) 40%,rgba(13,15,14,.29) 51%,rgba(13,15,14,.13) 62%,rgba(13,15,14,.04) 71%,rgba(13,15,14,0) 80%),
      linear-gradient(180deg,rgba(13,15,14,.66) 0%,rgba(13,15,14,.34) 8%,rgba(13,15,14,.12) 17%,rgba(13,15,14,0) 26%),
      linear-gradient(0deg,rgba(13,15,14,.82) 0%,rgba(13,15,14,0) 30%);
  }
  /* The light lies OVER the photograph and its scrim, not under. Under, the
     scrim blocked it exactly at the photograph edge and the two grounds met at
     a visible vertical seam. */
  .masthead::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(118% 88% at 74% 6%,rgba(79,209,131,.09),rgba(79,209,131,0) 62%);
  }
  /* The name is a two line nameplate held inside the left column. Run as one
     compressed line it crossed into the portrait and sat over his face, which
     spends the photograph to buy nothing. */
  .masthead__head{padding-top:150px;padding-bottom:0;align-self:auto}
  .masthead__name{font-size:clamp(72px,8.6vw,124px);max-width:min(430px,42vw)}
  .masthead__kicker{margin-bottom:26px}
  .masthead__rest{padding-top:0;padding-bottom:var(--s8)}
  .masthead__rule{display:block}
  .masthead__job{max-width:30ch}
  .masthead__body{max-width:45ch}

  .tier{grid-template-columns:minmax(0,13em) minmax(0,11em) minmax(0,1fr) auto;column-gap:var(--s6)}
  .tier__price{grid-area:1/2}
  .tier__detail{grid-area:1/3}
  .tier__cta{grid-area:1/4;align-self:center}
  .split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s7)}

  .chapter{display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 var(--s4);padding-top:var(--s5)}
  .chapter__num{grid-area:1/1;margin-bottom:0}
  .chapter__body{grid-area:1/2}

  .ledger__row{grid-template-columns:3.2em minmax(0,13em) minmax(0,1fr);column-gap:var(--s6);padding:var(--s4) 0}
  .ledger__title{font-size:26px}
  .ledger__after{justify-content:flex-end}

  .essay__close{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s7)}

  .faq__q{font-size:21px}
  .dir{grid-template-columns:230px minmax(0,1fr) auto;gap:0 var(--s5);padding:var(--s4) 0 var(--s4)}
  .dir__name{grid-area:1/1}
  .dir__body{grid-area:1/2;max-width:42ch}
  .dir__handle{grid-area:1/3}
  .footer__grid{padding-top:var(--s7);padding-bottom:var(--s7)}

  .page-home .offer{
    padding:var(--s6);grid-template-columns:minmax(0,auto) minmax(0,1fr);
    gap:var(--s5) var(--s7);align-items:start;
  }
  .page-home .offer__cta{grid-column:1;justify-self:start}
  .page-home .offer__list{grid-column:2;grid-row:1/4}
  .page-404 .lost{display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 var(--s4);padding-top:var(--s5)}
  .page-404 .lost__num{grid-area:1/1;margin-bottom:0}
  .page-404 .lost__body{grid-area:1/2}
}

/* ====== FINE PRINT */

@media (max-width:22.5em){
  .nav__link{font-size:10.5px;letter-spacing:.09em}
  .nav__links{gap:0 var(--s2)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

@media print{
  body{background:#fff;color:#111413}
  .nav,.green,.footer{display:none}
}

/* Past 1440px the portrait column stops short of the window, so its right edge
   needs to dissolve like the other three. Only there; on a normal screen the
   photograph still bleeds to the edge (2026-09-18). */
@media (min-width:1441px){
  .masthead__img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(270deg,#0D0F0E 0%,rgba(13,15,14,.55) 7%,rgba(13,15,14,0) 18%)}
}