/* ═══════════════════════════════════════════════════════════════════════
   RageshWaikar.com — v2 design system
   One stylesheet for all six pages. Change a value here, every page moves.
   Type: Newsreader (variable, optical-size axis) + IBM Plex Mono.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#faf8f4;
  --ink:#14120f;
  --ink-2:#5f5a52;
  --accent:#7a5024;
  --hair:rgba(20,18,15,.15);
  --hair-2:rgba(20,18,15,.08);
  --serif:'Newsreader', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --gut:clamp(22px, 5vw, 64px);
  --frame:1180px;      /* page ceiling */
  --measure:648px;     /* prose measure */
}
*{box-sizing:border-box}
html{background:var(--paper); -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.6;
  font-variation-settings:'opsz' 16;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* paper grain — a printed surface instead of flat colour. No requests. */
body::before{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.038; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bleed{width:100%; max-width:var(--frame); margin:0 auto; padding:0 var(--gut)}
.col{max-width:var(--measure)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}

/* ── header ─────────────────────────────────────────────────────────── */
header{padding:28px 0 0}
.headrow{display:flex; justify-content:space-between; align-items:baseline;
  gap:24px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--hair)}
.name{font-family:var(--serif); font-variation-settings:'opsz' 24;
  font-size:20px; font-weight:600; letter-spacing:.005em;
  color:var(--ink); text-decoration:none; display:inline-block; padding:8px 0}
.name:hover{text-decoration:none; color:var(--accent)}
nav{display:flex; flex-wrap:wrap}
nav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none;
  display:inline-block; padding:14px 0; margin-left:26px}
nav a:first-child{margin-left:0}
nav a:hover{color:var(--accent); text-decoration:none}
nav a[aria-current]{color:var(--ink); box-shadow:0 1px 0 var(--accent)}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{padding:clamp(52px, 10vh, 124px) 0 clamp(38px, 6vh, 68px)}
h1{
  font-variation-settings:'opsz' 72;
  font-weight:400; line-height:1.0; letter-spacing:-.02em;
  margin:0 0 clamp(26px, 4.4vh, 46px); text-wrap:balance;
  /* interior pages */
  font-size:clamp(2.5rem, 5.6vw, 4.25rem);
}
/* the homepage makes the statement; interiors sit a step below it */
body.home h1{font-size:clamp(3rem, 8.4vw, 6.4rem); line-height:.99;
  letter-spacing:-.022em; max-width:15ch}
h1 .stop{color:var(--accent)}
.hero .lede{font-size:clamp(19px, 1.55vw, 22px); line-height:1.55;
  max-width:54ch; margin:0 0 16px; font-variation-settings:'opsz' 20}
.hero .quiet{color:var(--ink-2); max-width:54ch; margin:0 0 14px; font-size:18px}
.hero p{max-width:56ch; margin:0 0 14px}

/* ── section rule system ────────────────────────────────────────────── */
section{padding:clamp(42px, 6.5vh, 82px) 0 0}
.rule{display:flex; align-items:baseline; gap:20px;
  padding-bottom:16px; border-bottom:1px solid var(--hair); margin-bottom:32px}
.rule .lbl{font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.rule .n{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--accent); margin-left:auto}
section p{max-width:56ch; margin:0 0 14px}
section p.q{color:var(--ink-2)}

/* shared "read more" affordance — always a 44px+ target */
.go{display:inline-block; padding:14px 0; font-family:var(--mono);
  font-size:12px; letter-spacing:.11em; text-transform:uppercase}

/* ── home: product + fees ───────────────────────────────────────────── */
.venture h2{font-size:clamp(30px, 3.6vw, 42px); font-weight:500;
  font-variation-settings:'opsz' 48; letter-spacing:-.012em;
  line-height:1.1; margin:0 0 16px}
.fees{display:flex; flex-direction:column; margin:26px 0 6px}
.fees div{display:flex; justify-content:space-between; align-items:baseline;
  gap:18px; padding:15px 0; border-bottom:1px solid var(--hair-2)}
.fees div:first-child{border-top:1px solid var(--hair)}
.fees .what{font-size:19px}
.fees .amt{font-family:var(--mono); font-size:14.5px; color:var(--accent);
  white-space:nowrap; letter-spacing:.02em}

/* ── essays ─────────────────────────────────────────────────────────── */
.essay{display:block; text-decoration:none; color:inherit;
  padding:22px 0; border-bottom:1px solid var(--hair-2)}
.essay:first-of-type{padding-top:0}
.essay:hover{text-decoration:none}
.essay .date{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--ink-2); display:block; margin-bottom:8px}
.essay .t{font-size:clamp(24px, 2.7vw, 32px); font-weight:500;
  font-variation-settings:'opsz' 36; letter-spacing:-.01em;
  color:var(--ink); line-height:1.14; display:block}
.essay:hover .t{color:var(--accent)}
.essay .sum{margin:9px 0 0; color:var(--ink-2); font-size:17.5px; max-width:56ch}

/* ── numbered forms. Three exist and each means something different:
   .law  = a maintained position   (Writing)
   .dec  = a choice with a cost    (Cosmiclogy)
   .step = a sequence in time      (Advisory)                        ── */
.law{display:flex; gap:18px; margin:0 0 22px}
.law .n{font-family:var(--mono); font-size:13px; color:var(--accent);
  padding-top:6px; flex-shrink:0; width:24px}
.law .t{font-weight:600; display:block; margin-bottom:3px; font-size:20px}
.law p{margin:0; font-size:17.5px; color:var(--ink-2); max-width:52ch}

.dec{margin:0 0 34px}
.dec h2{font-size:clamp(23px, 2.4vw, 28px); font-weight:600;
  font-variation-settings:'opsz' 32; margin:0 0 10px; line-height:1.22}
.dec p{margin:0 0 10px; max-width:56ch; color:var(--ink-2)}
.dec p.cost{color:var(--ink); font-style:italic}

.step{display:flex; gap:18px; margin:0 0 22px}
.step .n{font-family:var(--mono); font-size:13px; color:var(--accent);
  padding-top:6px; flex-shrink:0; width:24px}
.step p{margin:0; max-width:52ch; color:var(--ink-2)}
.step p b{color:var(--ink); font-weight:600}

/* ── advisory engagements ───────────────────────────────────────────── */
.eng{margin:0 0 30px; padding-bottom:2px}
.eng h2{font-size:clamp(21px, 2.2vw, 26px); font-weight:600;
  font-variation-settings:'opsz' 30; margin:0 0 7px; line-height:1.25}
.eng .meta{font-family:var(--mono); font-size:13.5px; color:var(--accent);
  display:block; margin-bottom:10px}
.eng p{margin:0; max-width:56ch; color:var(--ink-2)}
.boundary .sharp{color:var(--ink)}
.addr{font-family:var(--mono); font-size:15px}

/* ── about ──────────────────────────────────────────────────────────── */
.portrait{width:148px; height:148px; border-radius:2px; object-fit:cover;
  display:block; margin:0 0 28px; filter:grayscale(100%); opacity:.92}
.yours{background:rgba(122,80,36,.05); border-left:2px solid var(--accent);
  padding:20px 22px; margin:0 0 6px; max-width:var(--measure)}
.yours .tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:11px}
.yours p{color:var(--ink-2); font-size:17px; margin:0 0 10px; max-width:54ch}
.yours p:last-child{margin-bottom:0}

/* ── now ────────────────────────────────────────────────────────────── */
.dateline{font-family:var(--mono); font-size:12.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent); display:block;
  padding-top:18px; border-top:1px solid var(--hair); max-width:var(--measure)}

/* ── writing: subscribe ─────────────────────────────────────────────── */
.sub{margin-top:10px; padding:24px 0 0; border-top:1px solid var(--hair)}
.sub .lbl2{font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2); display:block; margin-bottom:15px}
.sub form{display:flex; gap:10px; max-width:430px}
.sub input{flex:1; min-width:0; font-family:var(--mono); font-size:14px;
  padding:13px 14px; min-height:48px; border:1px solid var(--hair);
  border-radius:3px; background:#fff; color:var(--ink)}
.sub input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.sub button{font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; padding:13px 20px; min-height:48px;
  border:1px solid var(--accent); border-radius:3px; background:none;
  color:var(--accent); cursor:pointer}
.sub button:hover{background:rgba(122,80,36,.07)}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{margin-top:clamp(56px, 8vh, 100px); padding:24px 0 60px;
  border-top:1px solid var(--hair)}
.nowline{font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--ink-2); margin:0 0 14px}
.nowline b{color:var(--ink); font-weight:500}
.colophon{font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-2); margin:0}

/* ── one restrained entrance. CSS-only; text is in the HTML regardless,
   and it is switched off entirely for reduced-motion. ───────────────── */
@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .62s cubic-bezier(.22,.7,.3,1) both}
  .d1{animation-delay:.09s} .d2{animation-delay:.16s} .d3{animation-delay:.23s}
  @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
}

/* ── review annotations — deleted in the real build ─────────────────── */
.notes{max-width:760px; margin:80px auto 60px; padding:26px 24px;
  background:rgba(122,80,36,.06); border-top:2px solid var(--accent)}
.notes h3{font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 16px}
.notes ul{margin:0; padding-left:18px}
.notes li{font-size:15px; color:var(--ink-2); margin-bottom:9px; line-height:1.55}
.notes b{color:var(--ink); font-weight:600}

/* ── mobile ─────────────────────────────────────────────────────────── */
@media(max-width:640px){
  body{font-size:18px}
  .headrow{flex-direction:column; align-items:flex-start; gap:0; padding-bottom:12px}
  /* 14px, not 12 — at 12 the tap target measures 42.4px and misses 44px. */
  nav a{margin-left:0; margin-right:22px; padding:14px 0}
  body.home h1{max-width:none; letter-spacing:-.015em}
  .fees div{flex-direction:column; align-items:flex-start; gap:4px}
  .sub form{flex-direction:column}
}

/* ═══════════════════════════════════════════════════════════════════════
   Semantic markup support (the shipping build uses real h2/h3 headings and
   a skip link). Additive — the mockups are unaffected.
   ═══════════════════════════════════════════════════════════════════════ */

/* keyboard users get a way past the nav */
.skip{position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:var(--paper); padding:13px 20px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase}
.skip:focus{left:0; text-decoration:none}
.sr{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap}

/* headings now carry meaning; strip the UA margins they arrive with */
h2,h3{margin:0; font-weight:inherit}
.rule h2.lbl{margin:0; font-size:11px; font-weight:500}

.venture h3.big{font-size:clamp(30px, 3.6vw, 42px); font-weight:500;
  font-variation-settings:'opsz' 48; letter-spacing:-.012em;
  line-height:1.1; margin:0 0 16px}
.dec h3{font-size:clamp(23px, 2.4vw, 28px); font-weight:600;
  font-variation-settings:'opsz' 32; margin:0 0 10px; line-height:1.22}
.eng h3{font-size:clamp(21px, 2.2vw, 26px); font-weight:600;
  font-variation-settings:'opsz' 30; margin:0 0 7px; line-height:1.25}
.law h3.t{font-weight:600; margin:0 0 3px; font-size:20px; display:block}

/* .sum and .t are spans inside a block-level <a> */
.essay .t,.essay .sum{display:block}

/* essay pages */
.essay-meta{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 16px}
.standfirst{font-size:clamp(19px, 1.5vw, 21px); color:var(--ink-2);
  max-width:52ch; margin:0}
.unwritten{color:var(--ink-2); font-style:italic}

/* the footer Now line is a link in the shipping build */
.nowline a{color:inherit}
.nowline a:hover{color:var(--accent)}

/* ── essay body ─────────────────────────────────────────────────────── */
article h2{font-size:clamp(21px, 2.1vw, 25px); font-weight:600;
  font-variation-settings:'opsz' 30; letter-spacing:-.008em;
  margin:38px 0 14px; line-height:1.25}
article .col p{margin:0 0 16px}
.essay-end{margin-top:30px; padding-top:20px; border-top:1px solid var(--hair)}

/* ── method: the four refusals ──────────────────────────────────────── */
.never{margin:0 0 22px; padding:20px 0; border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.never p{margin:0 0 7px; font-size:19px; font-style:italic; max-width:46ch}
.never p:last-child{margin-bottom:0}

/* ── advisory: who this is for ──────────────────────────────────────── */
.crit{margin:0 0 18px; padding-left:20px; max-width:54ch; color:var(--ink-2)}
.crit li{margin-bottom:8px}
.selfcheck{max-width:54ch}

/* ═══════════════════════════════════════════════════════════════════════
   v3 — the page had a 648px column inside an 1180px frame, so half of
   every screen was empty and every section looked the same. Three fixes:
   an editorial rail, tonal contrast, and one display moment per long page.
   ═══════════════════════════════════════════════════════════════════════ */

:root{ --rail:132px; --gap:52px }

/* ── editorial two-column grid: numeral in the rail, prose in the column.
      The rule spans both, so the structure reads across the full frame. ── */
section{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--gap);
  align-items:start;
}
section > .rule{grid-column:1 / -1}
section > *{grid-column:2}

/* the numeral is now a graphic element, not a footnote */
section > .n{
  grid-column:1; justify-self:start;
  font-family:var(--serif); font-variation-settings:'opsz' 48;
  font-size:clamp(30px, 3.4vw, 46px); line-height:.9;
  color:var(--accent); opacity:.42; letter-spacing:-.02em;
  padding-top:4px; font-weight:400;
}
.rule{justify-content:flex-start}
.rule .lbl{margin-right:auto}

/* ── tonal contrast: one inverted block breaks 3,000px of paper ── */
.invert{
  background:var(--ink); color:var(--paper);
  padding:clamp(24px,3vw,38px) clamp(22px,3vw,40px);
  margin:30px 0 10px; border-radius:2px;
}
.invert .inv-lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(250,248,244,.5);
  display:block; margin-bottom:6px;
}
.invert .fees{margin:0}
.invert .fees div{border-bottom-color:rgba(250,248,244,.13); padding:17px 0}
.invert .fees div:first-child{border-top-color:rgba(250,248,244,.22)}
.invert .fees div:last-child{border-bottom:0; padding-bottom:2px}
.invert .what{color:var(--paper); font-size:19.5px}
.invert .amt{color:#d6a469; font-size:14.5px}

/* ── one display moment per long page ── */
.pull{
  grid-column:1 / -1 !important;
  margin:44px 0 40px; padding-top:26px;
  border-top:1px solid var(--accent);
  font-size:clamp(25px, 3.6vw, 44px);
  font-variation-settings:'opsz' 60;
  line-height:1.16; letter-spacing:-.018em;
  max-width:19ch; color:var(--ink); font-weight:400;
}

/* essay list gets more presence now that there is room for it */
.essay{padding:26px 0}
.essay .t{font-size:clamp(26px, 3vw, 35px)}
.essay .sum{font-size:18px; max-width:54ch}

/* the hero keeps its own full-width axis */
.hero{grid-column:1 / -1}

@media(max-width:860px){
  :root{ --rail:0px; --gap:0px }
  section{grid-template-columns:1fr}
  section > .rule, section > *{grid-column:1}
  section > .n{
    font-size:22px; opacity:.5; padding:0 0 10px; line-height:1;
  }
  .pull{max-width:none; margin:32px 0 28px}
}

/* the priced block earns the full frame — it is the commercial focal point */
.invert{grid-column:1 / -1 !important}
.invert .fees{max-width:none}
.invert .fees div{padding:19px 0}
@media(max-width:860px){ .invert{margin:24px 0 10px} }

/* ═══════════════════════════════════════════════════════════════════════
   HYBRID — Apple's composition for the homepage (a lobby), the editorial
   grid for the pages that argue. Plus the three Apple lessons applied to
   the interiors: tonal bands, more vertical room, larger section openers.
   ═══════════════════════════════════════════════════════════════════════ */

:root{ --paper-2:#f2efe8; --accent-lit:#d6a469 }

/* ── sticky translucent bar (homepage) ── */
.bar{position:sticky; top:0; z-index:50;
  background:rgba(250,248,244,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(20,18,15,.08)}
.bar-in{max-width:1024px; margin:0 auto; padding:0 22px;
  display:flex; justify-content:space-between; align-items:center; gap:20px}
.bar .name{font-size:17px; font-weight:600; color:var(--ink); padding:14px 0;
  font-variation-settings:'opsz' 20}
.bar nav{display:flex; flex-wrap:wrap}
.bar nav a{font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); padding:15px 0; margin-left:24px}
.bar nav a:first-child{margin-left:0}
.bar nav a:hover{color:var(--accent); text-decoration:none}

/* ── bands: one idea per screen ── */
body.bands{overflow-x:hidden}
.band{padding:clamp(78px, 13vh, 152px) 22px; text-align:center;
  display:block; grid-template-columns:none}
.band-in{max-width:700px; margin:0 auto}
.b-paper{background:var(--paper)}
.b-tint {background:var(--paper-2)}
.b-dark {background:var(--ink); color:var(--paper)}

.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-2); display:block; margin-bottom:20px}
.b-dark .kicker{color:rgba(250,248,244,.5)}

body.bands h1{font-size:clamp(2.9rem, 7.4vw, 5.4rem); max-width:none;
  line-height:1.03; letter-spacing:-.022em; margin:0 0 22px; font-weight:500}
.band h2{font-size:clamp(2.1rem, 4.6vw, 3.6rem); font-variation-settings:'opsz' 72;
  font-weight:500; letter-spacing:-.022em; line-height:1.05; margin:0 0 22px}
.b-dark .stop{color:var(--accent-lit)}

.band .bsub{font-size:clamp(19px, 1.6vw, 23px); line-height:1.5; color:var(--ink-2);
  max-width:36ch; margin:0 auto 10px; font-variation-settings:'opsz' 22}
.b-dark .bsub{color:rgba(250,248,244,.72)}
.band .fine{font-size:17px; color:var(--ink-2); max-width:44ch; margin:18px auto 0}
.b-dark .fine{color:rgba(250,248,244,.6)}

.more{display:inline-block; margin-top:26px; padding:10px 0; font-size:17.5px}
.more::after{content:' \203A'}
.b-dark .more{color:var(--accent-lit)}

.prices{display:flex; justify-content:center; flex-wrap:wrap;
  margin:40px auto 0; max-width:660px}
.prices div{flex:1 1 190px; padding:22px 14px;
  border-left:1px solid rgba(250,248,244,.14)}
.prices div:first-child{border-left:0}
.prices .amt{font-family:var(--mono); font-size:19px; color:var(--accent-lit);
  display:block; margin-bottom:7px}
.prices .what{font-size:15.5px; color:rgba(250,248,244,.66); line-height:1.4}

.pair{display:grid; grid-template-columns:1fr 1fr; gap:20px;
  max-width:940px; margin:44px auto 0; text-align:left}
.card{background:var(--paper); border-radius:14px; padding:34px 32px;
  display:block; color:inherit}
.b-paper .card{background:var(--paper-2)}
.card:hover{text-decoration:none}
.card .date{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  color:var(--ink-2); display:block; margin-bottom:12px}
.card .t{font-size:26px; font-weight:600; font-variation-settings:'opsz' 36;
  line-height:1.18; letter-spacing:-.012em; display:block; color:var(--ink)}
.card:hover .t{color:var(--accent)}
.card .s{font-size:16.5px; color:var(--ink-2); margin:11px 0 0; line-height:1.5}

/* ── the three Apple lessons, applied to the editorial interiors ── */
.bleed main > section{
  padding-top:clamp(58px, 9vh, 104px);
  padding-bottom:clamp(20px, 4vh, 46px);
}
/* alternating tonal band, full-bleed while content stays in the frame */
.bleed main > section:nth-of-type(even){
  background:var(--paper-2);
  box-shadow:0 0 0 100vw var(--paper-2);
  clip-path:inset(0 -100vw);
}
/* larger section openers */
.dec h3,.eng h3{font-size:clamp(25px, 2.7vw, 32px); letter-spacing:-.012em}
.venture h3.big{font-size:clamp(34px, 4vw, 48px)}

@media(max-width:760px){
  .pair{grid-template-columns:1fr}
  .prices div{flex:1 1 100%; border-left:0; border-top:1px solid rgba(250,248,244,.14)}
  .prices div:first-child{border-top:0}
  .bar-in{flex-direction:column; align-items:flex-start; gap:0}
  /* 15px, not 13 — at 13 the tap target measures 43.6px. */
  .bar nav a{margin-left:0; margin-right:20px; padding:15px 0}
}

/* ═══════════════════════════════════════════════════════════════════════
   Hero reduced to name + descriptor, and every small size raised a step.
   Nothing here changes the display sizes — only the type that was too
   small to read comfortably.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── hero: the name is the headline ── */
.hero-band{padding-top:clamp(64px, 15vh, 168px)}
.hero-band h1{letter-spacing:-.018em; margin-bottom:30px}
.hero-p{
  font-size:clamp(19.5px, 1.65vw, 23px); line-height:1.55;
  color:var(--ink-2); max-width:52ch; margin:0 auto;
  font-variation-settings:'opsz' 22;
}

/* ── small type, raised one step across the site ── */
.kicker{font-size:12px}
.band .fine{font-size:18.5px; max-width:46ch}
.band .bsub{font-size:clamp(20px, 1.7vw, 24px); max-width:37ch}
.more{font-size:18.5px}

.card .date{font-size:12px}
.card .s{font-size:18px}
.prices .amt{font-size:20px}
.prices .what{font-size:17px}

.bar nav a{font-size:12px}
nav a{font-size:12.5px}

.rule .lbl,.rule h2.lbl{font-size:12px}
section > .n{opacity:.46}

.go{font-size:13px}
.essay .date{font-size:12px}
.essay .sum{font-size:19px}
.law p{font-size:18.5px}
.eng .meta{font-size:14.5px}
.addr{font-size:16px}
.dateline{font-size:13.5px}

.yours .tag{font-size:12px}
.yours p{font-size:18px}

.essay-meta{font-size:12px}
.standfirst{font-size:clamp(20px, 1.6vw, 22.5px)}

.sub .lbl2{font-size:12px}
.sub input{font-size:15px}
.sub button{font-size:12.5px}

.nowline{font-size:13px}
.colophon{font-size:12px}

@media(max-width:640px){
  .hero-p{font-size:19px}
  .band .fine{font-size:18px}
}

/* ── the left wordmark, slightly bigger — on every page ── */
.bar .name{font-size:22px; font-variation-settings:'opsz' 26; padding:16px 0}
.wordmark{margin:0; font-weight:inherit; line-height:1.1}
header .name{font-size:22px; font-variation-settings:'opsz' 26}

/* hero band now carries the descriptor alone */
.hero-band{padding-top:clamp(56px, 12vh, 132px); padding-bottom:clamp(56px, 11vh, 124px)}

@media(max-width:640px){

  .bar .name, header .name{font-size:20px}
}

/* ── the hero has to be felt: bigger than the live site, and it owns the
      first screen. Headline first, descriptor beneath it. ── */
.hero-band{
  padding-top:clamp(70px, 16vh, 176px);
  padding-bottom:clamp(64px, 14vh, 150px);
}
body.bands .hero-band h1{
  font-size:clamp(3.1rem, 8.8vw, 6.9rem);   /* 50px → 110px */
  line-height:.97;
  letter-spacing:-.026em;
  margin:0 auto 34px;
  max-width:16ch;
}
.hero-band .hero-p{
  font-size:clamp(19px, 1.75vw, 23px);
  line-height:1.55; color:var(--ink-2); max-width:52ch;
}
@media(max-width:640px){
  body.bands .hero-band h1{font-size:clamp(2.5rem, 11vw, 3.4rem); max-width:none}
  .hero-band .hero-p{font-size:19px}
}

/* ── hero headline reduced 30% (110.4px -> 77.3px at 1440) ── */
body.bands .hero-band h1{
  font-size:clamp(2.17rem, 6.16vw, 4.83rem);   /* was 3.1 / 8.8 / 6.9 */
  max-width:17ch;
}
@media(max-width:640px){
  body.bands .hero-band h1{font-size:clamp(1.75rem, 7.7vw, 2.38rem)}
}

/* ── portrait band: the one real image, given real presence, and the only
      asymmetric layout on the homepage — which is itself the variety the
      page was missing. ── */
.portrait-band{text-align:left}
.pb{max-width:960px; margin:0 auto; display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    gap:clamp(28px,5vw,64px); align-items:center}
.pb-img{width:100%; height:auto; max-width:420px; display:block;
  filter:grayscale(100%) contrast(1.04); opacity:.94;
  border-radius:0;                     /* Apple's tiles are square-cornered */
  justify-self:end}
.pb-txt h2{margin:0 0 18px}
.pb-txt .fine{margin:0 auto 0 0; max-width:38ch; text-align:left}
.pb-txt .more{margin-top:20px}
@media(max-width:760px){
  .pb{grid-template-columns:1fr; gap:26px; text-align:center}
  .pb-img{justify-self:center; max-width:260px}
  .pb-txt .fine{margin-left:auto; text-align:center}
  .portrait-band{text-align:center}
}

/* ── the four measured fixes from the apple.com audit ── */
body.bands .hero-band h1{letter-spacing:-.008em; line-height:1.05}
.band h2{letter-spacing:-.008em; line-height:1.06;
  font-size:clamp(1.95rem, 4.1vw, 3.25rem)}   /* 57.6 -> 52px, restores the step */
.card{border-radius:0}                          /* Apple's tiles: 0px radius */
.invert{border-radius:0}

/* ── figures: real engine output, set like plates in a book ── */
.figwrap{grid-column:1 / -1 !important}
.fig{margin:0; padding:30px 0 0}
.fig svg{width:100%; height:auto; display:block; overflow:visible}
.fig .fb{font-family:var(--mono); font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; fill:var(--ink-2); text-anchor:middle}
.fig .fa{font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  fill:var(--ink-2)}
.fig .fk{font-family:var(--mono); font-size:14px; letter-spacing:.04em;
  fill:var(--ink-2); dominant-baseline:middle}
.fig rect:hover{stroke:var(--accent); stroke-width:2}
.fig figcaption{margin:28px 0 0; max-width:58ch; font-size:17px;
  color:var(--ink-2); line-height:1.55}
@media(max-width:640px){
  .fig .fb,.fig .fa{font-size:17px; letter-spacing:.1em}
  .fig .fk{font-size:18px}
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile header. Six nav items wrapped to two rows and ate 163px; the
   hero then added 130px of desktop-scale padding, so the headline began
   36% down the screen. Menu collapses to a button, padding comes down.
   No JavaScript — a hidden checkbox drives it, and the checkbox stays
   keyboard-reachable rather than display:none.
   ══════════════════════════════════════════════════════════════════════ */

.nav-toggle{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap}
.burger{display:none; cursor:pointer; padding:14px 0 14px 16px;
  min-height:48px; align-items:center; gap:5px; flex-direction:column;
  justify-content:center}
.burger span{display:block; width:23px; height:1.5px; background:var(--ink)}
.nav-toggle:focus-visible + .burger{outline:2px solid var(--accent); outline-offset:3px}

@media(max-width:760px){
  .burger{display:flex}
  .bar .bar-in, header .headrow{flex-direction:row; flex-wrap:wrap;
    justify-content:space-between; align-items:center; gap:0}
  .bar nav, header nav{display:none; flex-basis:100%; flex-direction:column;
    padding-bottom:8px}
  .nav-toggle:checked ~ nav{display:flex}
  .bar nav a, header nav a{margin:0; padding:13px 0; font-size:14px;
    letter-spacing:.12em; border-top:1px solid var(--hair-2)}
  /* the hero no longer starts a third of the way down the phone */
  .hero-band{padding-top:clamp(38px, 7vh, 60px);
             padding-bottom:clamp(40px, 8vh, 72px)}
  .band{padding-top:clamp(52px, 9vh, 88px); padding-bottom:clamp(52px, 9vh, 88px)}
}

/* ── site chrome is identical on every page: the bar aligns to the same
      frame as the content, so the wordmark sits on the page's left edge. ── */
.bar-in{max-width:var(--frame); padding:0 var(--gut)}

/* Reserve the scrollbar gutter always, so short pages (404, Now) do not
   shift the whole layout 8px sideways when you navigate to them. */
html{scrollbar-gutter:stable}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ── audit fixes ─────────────────────────────────────────────────────── */

/* 7 · designed focus states — the browser default ring was the only
      indicator on most links. Keyboard users get something intentional. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, label.burger:focus-within{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:1px;
}
.b-dark a:focus-visible{outline-color:var(--accent-lit)}
.skip:focus-visible{outline-offset:-3px}

/* 13 · footer legal line */
.legalline{font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--ink-2); margin:0 0 8px}
.legalline a{color:var(--ink-2); display:inline-block; padding:10px 2px}
.legalline a:hover{color:var(--accent)}

/* 2 · the subscribe block is now a sentence, not a form */
.subline{max-width:52ch; margin:0; color:var(--ink-2); font-size:18px}

/* 14 · 404 site list */
.sitelist{margin:0; padding-left:20px; max-width:56ch; color:var(--ink-2)}
.sitelist li{margin-bottom:11px}
.sitelist a{font-weight:600}

/* legal pages */
.legal-date{font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  color:var(--accent); text-transform:uppercase; margin:0 0 22px}
.legal-list{margin:0 0 16px; padding-left:20px; max-width:56ch; color:var(--ink-2)}
.legal-list li{margin-bottom:8px}