/* ============================================================
   Brian Mills portfolio design system (v4)
   Editorial, warm, legible. Two first-class themes.
   Light: warm off-white paper. Dark: deep, comfortable ground.
   Every text/background pair is WCAG AA verified (see build notes).
   No em dashes anywhere, in copy or code.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

/* ---------- Tokens: LIGHT (default) ---------- */
:root{
  /* surfaces */
  --paper:#f5f1ea;        /* warm off-white, never pure white */
  --paper-deep:#efe9df;   /* recessed wells */
  --card:#fbf9f4;         /* lifted card/panel */
  --rule:#e4ded2;         /* hairline */
  --rule-strong:#d4ccbc;  /* stronger hairline */

  /* ink */
  --ink:#1f242c;          /* primary text  13.9:1 on paper */
  --muted:#585f6b;        /* secondary     5.7:1 on paper */
  --faint:#636a76;        /* captions      4.8:1 on paper */

  /* accent (navy) */
  --accent:#2d4a73;       /* links, primary fill  8.0:1 on paper */
  --accent-deep:#22395a;  /* pressed */
  --accent-soft:#41618d;  /* large display accent */
  --on-accent:#f7f4ee;    /* text on accent fill */

  /* buttons: their own tokens so a filled button never rides the link color.
     Navy in BOTH themes, always light ink. */
  --btn-bg:#2d4a73; --btn-bg-hover:#22395a; --btn-ink:#f7f4ee; --btn-border:transparent;

  /* wayfinding secondary (used sparingly: reserved / in-development) */
  --clay:#8f5f33;         /* 4.9:1 on paper */

  /* selection + tint */
  --tint:rgba(45,74,115,0.06);   /* row hover wash */
  --tint-strong:rgba(45,74,115,0.10);

  --shadow:0 1px 2px rgba(31,36,44,0.04), 0 6px 24px rgba(31,36,44,0.05);

  /* type */
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --label:"Lora", Georgia, serif;

  /* type scale */
  --t-display:clamp(40px, 6.2vw, 60px);
  --t-h1:clamp(30px, 4.6vw, 40px);
  --t-h2:clamp(22px, 3vw, 26px);
  --t-h3:19px;
  --t-body:18px;
  --t-small:15px;
  --t-label:12px;

  /* spacing scale (8px base) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --maxw:940px;     /* page frame */
  --readw:680px;    /* reading column */

  --ease:cubic-bezier(0.22,0.61,0.36,1);
  color-scheme:light;
}

/* ---------- Tokens: DARK (system preference) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12151c; --paper-deep:#0e1117; --card:#1a1e27;
    --rule:#2a2f3a; --rule-strong:#39414f;
    --ink:#e8e4db; --muted:#a6aebd; --faint:#8b94a4;
    --accent:#9fbcec; --accent-deep:#b9d0f6; --accent-soft:#b9d0f6; --on-accent:#10131a;
    --btn-bg:#355a86; --btn-bg-hover:#3f6aa0; --btn-ink:#f7f4ee; --btn-border:#4a6fa0;
    --clay:#d7a368;
    --tint:rgba(159,188,236,0.07); --tint-strong:rgba(159,188,236,0.12);
    --shadow:0 1px 2px rgba(0,0,0,0.30), 0 8px 30px rgba(0,0,0,0.34);
    color-scheme:dark;
  }
}
/* ---------- Tokens: DARK (explicit toggle) ---------- */
:root[data-theme="dark"]{
  --paper:#12151c; --paper-deep:#0e1117; --card:#1a1e27;
  --rule:#2a2f3a; --rule-strong:#39414f;
  --ink:#e8e4db; --muted:#a6aebd; --faint:#8b94a4;
  --accent:#9fbcec; --accent-deep:#b9d0f6; --accent-soft:#b9d0f6; --on-accent:#10131a;
  --btn-bg:#355a86; --btn-bg-hover:#3f6aa0; --btn-ink:#f7f4ee; --btn-border:#4a6fa0;
  --clay:#d7a368;
  --tint:rgba(159,188,236,0.07); --tint-strong:rgba(159,188,236,0.12);
  --shadow:0 1px 2px rgba(0,0,0,0.30), 0 8px 30px rgba(0,0,0,0.34);
  color-scheme:dark;
}

/* ---------- Reset + base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:var(--t-body); line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .4s var(--ease), color .4s var(--ease);
}
::selection{background:var(--tint-strong)}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s4)}
.col{max-width:var(--readw); margin:0 auto; padding:0 var(--s4)}
@media (max-width:640px){ .wrap,.col{padding:0 var(--s3)} }

/* skip link */
.skip{position:absolute; left:var(--s2); top:-60px; background:var(--btn-bg); color:var(--btn-ink);
  padding:8px 16px; border-radius:6px; font-family:var(--label); font-size:12px; z-index:99; transition:top .2s}
.skip:focus{top:var(--s2)}

/* ---------- Links ---------- */
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  header.site{background:color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter:saturate(1.1) blur(10px); -webkit-backdrop-filter:saturate(1.1) blur(10px)}
}
.masthead{max-width:var(--maxw); margin:0 auto; padding:14px var(--s4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.brand{font-weight:700; font-size:17px; letter-spacing:.01em; color:var(--ink); flex:0 0 auto}
.brand:hover{text-decoration:none; color:var(--accent)}
nav.site{display:flex; gap:var(--s3); align-items:center; margin-left:auto}
nav.site a{font-size:15px; color:var(--muted); padding:4px 0}
nav.site a:hover{color:var(--ink); text-decoration:none}
nav.site a[aria-current]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent)}
.theme-toggle{flex:0 0 auto}
@media (max-width:640px){
  .masthead{padding:12px var(--s3); gap:var(--s2)}
  nav.site{order:3; flex-basis:100%; justify-content:center; gap:var(--s4); padding-top:12px; margin-top:2px; border-top:1px solid var(--rule)}
}

.theme-toggle{appearance:none; background:none; border:1px solid var(--rule-strong);
  border-radius:999px; padding:6px 12px 6px 10px; font-family:var(--label); font-size:11px;
  letter-spacing:.04em; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:border-color .18s var(--ease), color .18s var(--ease)}
.theme-toggle:hover{border-color:var(--accent); color:var(--ink)}
.theme-toggle svg{width:13px; height:13px; display:block}
.theme-toggle .ico-dark{display:none}
:root[data-theme="dark"] .theme-toggle .ico-dark{display:block}
:root[data-theme="dark"] .theme-toggle .ico-light{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .ico-dark{display:block}
  :root:not([data-theme="light"]) .theme-toggle .ico-light{display:none}
}

/* ---------- Dropdown sub-navigation (built by site.js) ---------- */
.navitem{position:relative; display:inline-flex; align-items:center; gap:2px}
.navitem > a{margin-left:0}
.caret{appearance:none; background:none; border:0; padding:4px 2px; margin:0; cursor:pointer;
  color:var(--faint); display:inline-flex; align-items:center; line-height:1; border-radius:4px}
.caret svg{width:11px; height:11px; transition:transform .2s var(--ease)}
.navitem:hover .caret svg, .navitem:focus-within .caret svg, .caret[aria-expanded="true"] svg{transform:rotate(180deg)}
.caret:hover{color:var(--ink)}
.submenu{position:absolute; top:100%; left:-12px; min-width:262px; background:var(--card);
  border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); padding:7px; margin-top:10px;
  list-style:none; opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index:40}
/* transparent bridge across the gap so moving from the link to the menu never drops :hover */
.submenu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.navitem:hover .submenu, .navitem:focus-within .submenu, .submenu.open{opacity:1; visibility:visible; transform:none}
.submenu li{margin:0}
.submenu a{display:block; padding:9px 12px; border-radius:7px; font-size:14.5px; color:var(--ink); line-height:1.3}
.submenu a .sm-note{display:block; font-size:12px; color:var(--faint); margin-top:1px}
.submenu a:hover{background:var(--tint); text-decoration:none; color:var(--accent)}
.submenu a:hover .sm-note{color:var(--accent)}
.submenu a[aria-current]{color:var(--accent)}
@media (max-width:640px){
  .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:1px solid var(--rule); border-radius:0; margin:6px 0 6px 8px; min-width:0; padding:0 0 0 10px; display:none}
  .submenu.open{display:block}
  .navitem{display:block}
  .navitem:hover .submenu, .navitem:focus-within .submenu{display:none}
  .navitem .submenu.open{display:block}
}

/* ---------- Type ---------- */
.kicker{font-family:var(--label); font-size:var(--t-label); letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:var(--s3)}
.kicker.muted{color:var(--faint)}
.kicker.strong{font-weight:700; letter-spacing:.15em; color:var(--accent)}
h1{font-size:var(--t-h1); line-height:1.14; font-weight:700; letter-spacing:-.012em; margin-bottom:var(--s3); text-wrap:balance}
h2{font-size:var(--t-h2); line-height:1.25; font-weight:600; letter-spacing:-.006em; margin:var(--s6) 0 var(--s2)}
h3{font-size:var(--t-h3); line-height:1.35; font-weight:600; margin:var(--s4) 0 var(--s1)}
p{margin-bottom:var(--s2); max-width:66ch}
.lede{font-size:20px; line-height:1.55; color:var(--ink); max-width:60ch; text-wrap:pretty}
.small{font-size:var(--t-small); color:var(--faint); line-height:1.5}
strong{font-weight:600}
em{font-style:italic}

/* ---------- Hero ---------- */
.hero{padding-block:var(--s7) var(--s5)}
.hero.center{text-align:center}
.hero.center h1{max-width:20ch; margin-left:auto; margin-right:auto}
.hero.center .lede,.hero.center .kicker{margin-left:auto; margin-right:auto}
.hero.home h1{max-width:22ch}
.hero.home .lede{max-width:60ch}
.hero .lede{margin-top:var(--s1)}
@media (max-width:640px){ .hero{padding-block:var(--s6) var(--s5)} }

/* availability marker: a flat inline "open to work" status line in the hero */
.avail{display:inline-flex; align-items:center; gap:var(--s1); font-size:var(--t-small); color:var(--muted); margin-top:var(--s3)}
.avail .dot{width:8px; height:8px; border-radius:1px; background:var(--clay); transform:rotate(45deg); flex:0 0 auto}
/* status modifier: a deliberate uppercase "open to work" label, not body text */
.avail.status{font-family:var(--label); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:var(--s4)}
.hero.center .avail{display:flex; width:fit-content; margin-left:auto; margin-right:auto}

/* ---------- Panel list (Home wayfinding): horizontal rows, fully clickable ---------- */
.panels{border-top:1px solid var(--rule); margin:var(--s5) 0}
.panel{display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s2); border-bottom:1px solid var(--rule); position:relative;
  color:inherit; transition:background .22s var(--ease)}
.panel .p-mid{flex:1 1 auto; min-width:0}
.panel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; transition:background .22s var(--ease)}
.panel:hover{background:var(--tint); text-decoration:none}
.panel:hover::before{background:var(--accent)}
.panel:hover .p-title{color:var(--accent)}
.panel .p-index{font-family:var(--label); font-size:13px; color:var(--faint); font-weight:500; flex:0 0 auto}
.panel .p-title{font-size:21px; font-weight:600; letter-spacing:-.01em; line-height:1.2; transition:color .2s var(--ease)}
.panel .p-desc{display:block; font-size:var(--t-small); color:var(--muted); margin-top:4px; max-width:52ch}
.panel .p-go{font-family:var(--label); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); white-space:nowrap; flex:0 0 auto}
.panel:hover .p-go{color:var(--accent)}
.panel.reserved .p-go{color:var(--clay)}
.panel.reserved::before{background:transparent}
.panel.reserved:hover::before{background:var(--clay)}
@media (max-width:640px){
  .panel{gap:var(--s2); padding:var(--s3) var(--s1)}
  .panel .p-go{display:none}
}

/* ---------- Proof cards (Home: three real numbers) ---------- */
.proofs{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin:var(--s4) 0 var(--s5)}
.proof{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:var(--s4); display:flex; flex-direction:column; min-width:0}
.proof .n{font-size:clamp(34px,4.4vw,46px); font-weight:700; color:var(--accent-soft); letter-spacing:-.015em; font-variant-numeric:oldstyle-nums; line-height:1; margin-bottom:var(--s2)}
.proof p{font-size:var(--t-small); color:var(--muted); margin:0 0 var(--s3); max-width:34ch; text-wrap:balance}
.proof a{margin-top:auto; font-size:12.5px; font-family:var(--label); font-weight:600; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px}
@media (max-width:640px){ .proofs{grid-template-columns:1fr} }

/* ---------- Statline (case study opener) ---------- */
.statline{display:flex; align-items:center; gap:var(--s3); border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule); padding:var(--s3) 0; margin:var(--s4) 0; flex-wrap:wrap}
.statline .n{font-size:clamp(34px,5vw,46px); font-weight:700; color:var(--accent-soft); letter-spacing:-.02em; line-height:1; font-variant-numeric:oldstyle-nums}
.statline p{margin:0; font-size:var(--t-small); color:var(--muted); max-width:46ch}

/* ---------- Buttons ---------- */
.btn{display:inline-block; background:var(--btn-bg); color:var(--btn-ink);
  font-family:var(--serif); font-size:16px; font-weight:600; padding:13px 26px; border-radius:8px;
  border:1px solid var(--btn-border); cursor:pointer; box-shadow:0 1px 2px rgba(31,36,44,0.06);
  transition:background .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease)}
.btn:hover{background:var(--btn-bg-hover); text-decoration:none; color:var(--btn-ink); box-shadow:var(--shadow)}
.btn:active{background:var(--btn-bg-hover); transform:translateY(1px)}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ink);
  font-family:var(--serif); font-size:16px; font-weight:600; padding:12px 22px; border-radius:8px;
  border:1px solid var(--rule-strong); transition:border-color .18s var(--ease), color .18s var(--ease)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn .arr{font-family:var(--label); font-weight:400; margin-left:8px; display:inline-block; transition:transform .18s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- Door (single primary CTA block) ---------- */
.door{border:1px solid var(--rule); background:var(--card); border-radius:12px;
  padding:var(--s5) var(--s4); margin:var(--s5) 0; box-shadow:var(--shadow)}
.door.center{text-align:center}
.door.center p{margin-left:auto; margin-right:auto; max-width:54ch}
.door h2{margin-top:0}
.door p{max-width:58ch}
.door .btn,.door .btn-ghost{margin-top:var(--s2)}

/* ---------- Demo band (Home: full-width recessed feature) ----------
   A tonal band breaks the stack of same-colored boxes and signals
   "this one is special, try it." Rhymes with the .contact band. */
.demo{background:linear-gradient(var(--tint),var(--tint)), var(--paper-deep); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:var(--s6) 0; margin:var(--s6) 0 0; text-align:center}
.demo .kicker{color:var(--accent)}
.demo h2{margin-top:0; max-width:24ch; margin-inline:auto}
.demo p{max-width:54ch; margin-inline:auto; color:var(--muted)}
.demo .btn{margin-top:var(--s3)}
@media (max-width:640px){ .demo{padding:var(--s5) 0} }

/* ---------- Cards (work index) ---------- */
.cards{display:flex; flex-direction:column; gap:var(--s3); margin:var(--s4) 0}
.card{display:block; border:1px solid var(--rule); background:var(--card); border-radius:12px; padding:var(--s4);
  transition:border-color .2s var(--ease), background .2s var(--ease)}
.card .meta:first-child{margin-top:0}
a.card:hover{border-color:var(--accent); text-decoration:none}
.card .meta{font-family:var(--label); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
.card h3{margin-top:0}
.card p{color:var(--muted); margin-bottom:var(--s2)}
.card .more{font-family:var(--label); font-size:12px; letter-spacing:.05em; text-transform:uppercase}

/* ---------- Figures / hand-built diagrams ---------- */
figure.artifact{border:1px solid var(--rule); background:var(--card); border-radius:12px;
  padding:var(--s4); margin:var(--s4) 0; overflow-x:auto}
figure.artifact svg{display:block; width:100%; height:auto}
figcaption{font-size:13px; color:var(--faint); margin-top:var(--s2); line-height:1.5; max-width:64ch}

/* ---------- Pull quote ---------- */
.pull{border-left:3px solid var(--accent); padding:4px 0 4px var(--s3); margin:var(--s4) 0;
  font-size:22px; line-height:1.4; color:var(--ink); max-width:50ch; font-weight:500}

/* ---------- Placeholder (honest in-development) ---------- */
.placeholder{border:1px dashed var(--rule-strong); border-radius:10px; padding:var(--s3);
  margin:var(--s4) 0; color:var(--faint); font-size:var(--t-small)}
.placeholder strong{color:var(--muted)}

/* ---------- Exhibit frame (openable artifact preview) ---------- */
.exhibit{border:1px solid var(--rule); border-radius:12px; overflow:hidden; margin:var(--s4) 0; background:var(--card); position:relative}
.exhibit-bar{display:flex; align-items:center; gap:7px; padding:11px 15px; border-bottom:1px solid var(--rule)}
.exhibit-bar i{width:10px; height:10px; border-radius:50%; background:var(--rule-strong); display:inline-block}
.exhibit-bar span{font-family:var(--label); font-size:12px; color:var(--faint); margin-left:8px}
.exhibit iframe{display:block; width:100%; height:430px; border:0; background:#fff}
.exhibit-cover{position:absolute; left:0; right:0; bottom:0; top:38px; z-index:2; cursor:pointer; transition:box-shadow .18s var(--ease)}
/* a persistent "open" button so the preview is obviously interactive, on touch too */
.exhibit-cover[data-open]::after{content:attr(data-open); position:absolute; right:12px; bottom:12px;
  display:inline-flex; align-items:center; background:var(--btn-bg); color:var(--btn-ink);
  border:1px solid var(--btn-border); font-family:var(--label); font-size:12.5px; font-weight:600;
  letter-spacing:.04em; padding:8px 14px; border-radius:8px; box-shadow:var(--shadow);
  transition:transform .18s var(--ease)}
.exhibit-cover:hover,.exhibit-cover:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.exhibit-cover:hover::after,.exhibit-cover:focus-visible::after{transform:translateY(-2px)}
@media (max-width:640px){ .exhibit-cover[data-open]::after{right:10px; bottom:10px; padding:7px 12px; font-size:12px} }
@media (max-width:640px){ .exhibit iframe{height:320px} }

/* ---------- Timeline (about) ---------- */
.timeline{list-style:none; margin:var(--s3) 0; border-left:1px solid var(--rule); padding-left:var(--s3)}
.timeline li{margin-bottom:var(--s3); position:relative}
.timeline li::before{content:""; position:absolute; left:calc(-1 * var(--s3) - 5px); top:9px; width:9px; height:9px; border-radius:50%; background:var(--accent)}
.timeline .when{font-family:var(--label); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:4px}

/* ---------- Roles (resume) ---------- */
.role{margin-bottom:var(--s4)}
.role .where{font-weight:600; font-size:18px}
.role .when{font-family:var(--label); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); display:block; margin:3px 0 var(--s1)}
ul.r{margin:0 0 var(--s1) var(--s3)}
ul.r li{margin-bottom:7px; max-width:64ch; color:var(--muted)}
ul.r li::marker{color:var(--faint)}

/* ---------- Next + contact + footer ---------- */
.next{border-top:1px solid var(--rule); margin-top:var(--s6); padding-top:var(--s3)}
.next .kicker{margin-bottom:var(--s1)}
.next p{color:var(--muted)}
.contact{margin-top:var(--s5); padding:var(--s5) 0; text-align:center}
.contact .q{font-size:22px; color:var(--ink); margin-bottom:var(--s2); margin-left:auto; margin-right:auto}
.contact .avail.status{justify-content:center; margin:0 auto var(--s3)}
.contact .lines{font-size:var(--t-small); color:var(--muted); margin-left:auto; margin-right:auto}
footer.site{border-top:1px solid var(--rule); padding:var(--s4) 0 var(--s6); color:var(--faint); font-size:14px}
footer.site .frow{max-width:var(--maxw); margin:0 auto; padding:0 var(--s4); display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap}
footer.site nav{display:flex; gap:var(--s3); flex-wrap:wrap}
footer.site nav a{color:var(--faint)}
footer.site nav a:hover{color:var(--ink); text-decoration:none}
@media (max-width:640px){ footer.site .frow{flex-direction:column; align-items:flex-start; gap:var(--s2)} }

/* ---------- Section rhythm + main ---------- */
main{display:block; padding-bottom:var(--s2)}
section[id]{scroll-margin-top:80px}

/* ---------- Motion: one calm fade-in on load ----------
   Base state is fully visible. The hidden start lives only inside the
   keyframe, so if animations never run (no JS engine, reduced motion,
   an old client) the content is shown in full with nothing to reveal.
   We only animate when the visitor has not asked us not to. */
@media (prefers-reduced-motion: no-preference){
  /* The children reveal in sequence so the headline reads first, then the
     line beneath it, then the status pill: a calm cascade, not a slide show. */
  .rise > *{ animation: riseIn .7s var(--ease) both }
  .rise > *:nth-child(2){ animation-delay:.07s }
  .rise > *:nth-child(3){ animation-delay:.14s }
  .rise > *:nth-child(4){ animation-delay:.21s }
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(9px) }
  to{ opacity:1; transform:none }
}

/* ============================================================
   Elevation pass (v5): targeted refinements on top of v4.
   Restraint is the brief. Each rule earns its place; nothing
   here changes the identity, only its polish.
   ============================================================ */

/* The homepage headline is the hook. Give it display weight so the
   first screen lands before a visitor decides whether to stay. */
.hero.home h1{ font-size:var(--t-display); line-height:1.08; letter-spacing:-.02em }

/* Centered showcase composition: the headline stays the largest element but
   sits on a single line on desktop (it wraps only on narrow screens), so it
   leads without swallowing the first screen. Lede holds a balanced measure. */
.hero.home.center h1{ max-width:none; font-size:clamp(28px,4vw,38px); line-height:1.1; letter-spacing:-.018em }
.hero.home.center .lede{ max-width:56ch }
.hero-cta{ margin-top:var(--s5); display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap }

/* Cards lift slightly on hover, in addition to the accent border, so the
   work index feels responsive to the cursor instead of merely recolored. */
a.card{ transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease) }
a.card:hover{ box-shadow:var(--shadow); transform:translateY(-2px) }
a.card:active{ transform:translateY(0) }
@media (prefers-reduced-motion: reduce){ a.card:hover{ transform:none } }

/* The home kicker is a standalone identity line; give it a touch more size
   and tracking so it reads as a label, not fine print. */
.hero.home .kicker{ font-size:14px; letter-spacing:.16em }

/* ---------- Home signature: "the same fact, two readers" ----------
   A small live demonstration of the whole thesis. One fact, swapped
   between two registers on click. Proves the headline instead of
   asserting it. Type only, no portrait, calm by default. */
.demo-flip{max-width:60ch; margin:var(--s4) auto; text-align:left;
  padding:0}
.flip-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  flex-wrap:wrap; margin-bottom:var(--s3)}
.flip-label{font-family:var(--label); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.flip-toggle{display:inline-flex; gap:5px; background:var(--card);
  border:1px solid var(--rule); border-radius:999px; padding:3px}
.flip-btn{appearance:none; cursor:pointer; border:0; background:transparent;
  font-family:var(--label); font-size:12.5px; letter-spacing:.02em; color:var(--muted);
  padding:6px 14px; border-radius:999px; transition:background .2s var(--ease), color .2s var(--ease)}
.flip-btn:hover{color:var(--ink)}
.flip-btn.is-on{background:var(--btn-bg); color:var(--btn-ink)}
.flip-out{font-size:18px; line-height:1.55; color:var(--ink); margin:0; min-height:4.7em}
.flip-text[hidden]{display:none}
.flip-text .who{font-family:var(--label); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); margin-right:8px}
@media (prefers-reduced-motion: no-preference){
  .flip-text:not([hidden]){animation:flipFade .34s var(--ease)}
}
@keyframes flipFade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
@media (max-width:640px){
  .demo-flip{margin:var(--s3) auto}
  .flip-out{min-height:0}
  .flip-head{margin-bottom:var(--s2)}
}