/* ============================================================
   Anastasiia — portfolio
   Palette + type continue the AI Dev 26 field report system.
   ============================================================ */

:root{
  --ink:#0b2a6b;        /* deep navy — text, dark bands */
  --ink-soft:#1f3d80;
  --paper:#ffffff;
  --mist:#f4f6fb;       /* soft blue-white band */
  --signal:#d92027;     /* true red — accent */
  --signal-deep:#a8141a;
  --rule:#d9dde6;
  --muted:#5e6b85;
  --chip:#e7ecf7;

  /* editorial aliases — identical values under the names the
     conference / attribution / forecasting pages already use, so
     existing references to either name keep working (no mass rename) */
  --accent:#d92027;        /* = --signal */
  --accent-deep:#a8141a;   /* = --signal-deep */
  --accent-soft:#fdebec;   /* opaque light-red tint */
  --paper-warm:#f4f6fb;    /* = --mist */
  --blue:#0b2a6b;          /* = --ink */
  --blue-soft:#e7ecf7;     /* = --chip */
  --tint:#a9b8d9;          /* muted navy tint — attribution/forecasting charts */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px}   /* clear the sticky nav on anchor jumps */
html:has(#overview){scroll-padding-top:0}              /* beyond.html sets its own via scroll-margin */
body{
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:17px;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--signal);color:#fff}
a{color:inherit}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-mark{
  font-family:'Fraunces',serif;font-weight:600;font-style:italic;
  font-size:18px;letter-spacing:-.01em;text-decoration:none;
}
.nav-mark span{color:var(--signal)}
.nav-links{display:flex;gap:4px;font-size:13.5px;font-weight:500;flex-wrap:wrap}
.nav-links a{
  color:var(--ink-soft);text-decoration:none;
  padding:6px 11px;border-radius:4px;transition:all .2s;white-space:nowrap;
}
.nav-links a:hover{background:var(--mist)}
.nav-links a.active{background:var(--ink);color:#fff}
.nav-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink)}
@media(max-width:820px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:#fff;border-bottom:1px solid var(--rule);padding:14px;
  }
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
section{padding:88px 0}
section.tight{padding:60px 0}
.band{background:var(--mist);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band-dark{background:var(--ink);color:var(--paper)}
.band-dark .eyebrow{color:var(--signal)}
.band-dark h2,.band-dark h3{color:var(--paper)}
.band-dark p{color:rgba(255,255,255,.82)}

/* ---------- type ---------- */
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal);font-weight:600;margin-bottom:14px;display:block;
}
h1{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(42px,7vw,84px);line-height:.98;letter-spacing:-.03em;
}
h1 em{font-style:italic;font-weight:300;color:var(--signal)}
h2{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.02em;
}
h3{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:22px;line-height:1.2;letter-spacing:-.01em;
}
.lead{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:62ch}
/* a .lead used as a section intro (straight after the full-width divider) drops
   the 62ch reading measure so it lines up with the divider / module-meta above */
.section-head + .lead,
.module-head + .lead{max-width:none}
p{font-size:15.5px;line-height:1.68;color:var(--muted)}
p+p{margin-top:14px}
p strong{color:var(--ink);font-weight:600}
.section-head{
  display:flex;align-items:end;justify-content:space-between;gap:24px;
  padding-bottom:20px;border-bottom:1px solid var(--ink);margin-bottom:44px;flex-wrap:wrap;
}

/* ---------- signature: status block ---------- */
.status{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:2.1;
  border-left:3px solid var(--signal);padding:16px 0 16px 20px;margin-top:36px;
}
.status b{color:var(--muted);font-weight:400;display:inline-block;min-width:88px}
.status span{color:var(--ink);font-weight:600}

/* ---------- signature: metric chip ---------- */
.metric{
  display:inline-flex;align-items:baseline;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--chip);color:var(--ink);
  padding:5px 11px;border-radius:2px;border-left:2px solid var(--signal);
  font-weight:600;
}
.metric b{font-size:13px;font-weight:700}
.metric-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.band-dark .metric{background:rgba(255,255,255,.1);color:#fff}

/* ---------- hero ---------- */
.hero{padding:96px 0 76px;position:relative}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 20%,#000,transparent);
  mask-image:radial-gradient(ellipse 70% 60% at 70% 20%,#000,transparent);
}
.hero-inner{position:relative;z-index:1}
.hero .lead{margin-top:26px}

/* ---------- cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:24px}

.card{
  background:#fff;border:1px solid var(--rule);border-radius:5px;
  padding:30px 28px;position:relative;transition:box-shadow .3s,transform .3s;
}
.card:hover{box-shadow:0 14px 44px -20px rgba(11,42,107,.22);transform:translateY(-3px)}
.card h3{margin-bottom:10px}
.card .role{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);font-weight:600;margin-bottom:12px;display:block;
}

/* project case card — Problem / Approach / Outcome */
.case{border-left:3px solid var(--signal)}
.pao{margin-top:20px;display:grid;gap:14px}
.pao-row{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start}
.pao-row dt{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);font-weight:700;padding-top:3px;
}
.pao-row dd{font-size:14.5px;line-height:1.62;color:var(--muted)}
.pao-row dd strong{color:var(--ink);font-weight:600}
@media(max-width:520px){.pao-row{grid-template-columns:1fr;gap:4px}}

.stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.stack span{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;
  color:var(--muted);background:var(--mist);padding:4px 9px;border-radius:2px;
}
.stack-link{
  display:inline-flex;align-items:baseline;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--signal);color:#fff;
  padding:5px 11px;border-radius:2px;border-left:2px solid var(--signal);
  font-weight:600;
  text-decoration:none;transition:background .2s;
}
.stack-link:hover{background:var(--signal-deep)}

/* ---------- lists ---------- */
.ticks{list-style:none;display:grid;gap:13px;margin-top:20px}
.ticks li{font-size:15px;line-height:1.6;color:var(--muted);padding-left:26px;position:relative}
.ticks li::before{content:'→';position:absolute;left:0;top:0;color:var(--signal);font-weight:700}
.ticks li strong{color:var(--ink);font-weight:600}
.band-dark .ticks li{color:rgba(255,255,255,.82)}
.band-dark .ticks li strong{color:#fff}

/* ---------- article rows ---------- */
.rows{border-top:1px solid var(--rule)}
.row{
  display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;transition:background .25s;
}
.row:hover{background:var(--mist)}
.row .meta{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal);font-weight:600;
}
.row h3{font-size:19px;margin-bottom:6px}
.row p{font-size:14.5px}
.row .go{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);white-space:nowrap}
@media(max-width:720px){.row{grid-template-columns:1fr;gap:8px}.row .go{display:none}}

/* ---------- park counter (Beyond) ---------- */
.counter{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.counter .n{font-family:'Fraunces',serif;font-size:76px;font-weight:500;letter-spacing:-.03em;line-height:1}
.counter .of{font-family:'Fraunces',serif;font-size:30px;color:var(--muted);font-style:italic}
.parkbar{display:flex;flex-wrap:wrap;gap:4px;margin-top:26px;max-width:760px}
.parkbar i{width:14px;height:24px;border-radius:1px;background:var(--rule);display:block}
.parkbar i.on{background:var(--signal)}
.band-dark .parkbar i{background:rgba(255,255,255,.18)}
.band-dark .parkbar i.on{background:var(--signal)}

/* ---------- photo ---------- */
.photo{border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:var(--mist)}
.photo img{display:block;width:100%;height:auto}
.photo figcaption{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:11px 14px;
  border-top:1px solid var(--rule);background:#fff;
  display:flex;justify-content:space-between;gap:12px;
}

/* ---------- cta ---------- */
.btn{
  display:inline-block;font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:600;
  padding:12px 24px;border-radius:3px;text-decoration:none;transition:all .25s;
}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--signal-deep)}
.btn-ghost{border:1px solid var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--mist)}
.band-dark .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.band-dark .btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---------- footer ---------- */
footer{padding:52px 0 40px;border-top:1px solid var(--rule);background:var(--mist)}
.foot-inner{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center}
.foot-mark{font-family:'Fraunces',serif;font-style:italic;font-size:22px}
.foot-mark span{color:var(--signal)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;
  color:var(--muted);text-decoration:none;text-transform:uppercase;
}
.foot-links a:hover{color:var(--signal)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ============================================================
   BEYOND WORK — hub, parks, travels
   ============================================================ */

/* ---------- sub-nav pills ---------- */
.subnav{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:18px 0;border-bottom:1px solid var(--rule);
}
.subnav a{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:600;text-decoration:none;
  color:var(--muted);background:var(--mist);
  padding:8px 15px;border-radius:99px;border:1px solid var(--rule);
  transition:all .2s;
}
.subnav a:hover{border-color:var(--ink);color:var(--ink)}
.subnav a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- about photo ---------- */
.about-photo{
  margin:0;border:1px solid var(--rule);border-radius:5px;overflow:hidden;
  background:var(--mist);
}
.about-photo img{width:100%;height:auto;display:block;margin:0}
.about-photo .ph{
  display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#9aa4b8;text-align:center;padding:40px 18px;
}

/* ---------- hub cards (two big doors) ---------- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.door{
  display:block;text-decoration:none;position:relative;overflow:hidden;
  border:1px solid var(--rule);border-radius:5px;background:#fff;
  transition:box-shadow .3s,transform .3s;
}
.door:hover{box-shadow:0 18px 50px -22px rgba(11,42,107,.28);transform:translateY(-4px)}
.door .door-img{
  height:300px;background:var(--mist);position:relative;overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.door .door-img img{width:100%;height:100%;object-fit:cover;display:block}
.door .door-body{padding:26px 26px 28px}
.door .door-body h3{margin-bottom:9px}
.door .door-body p{font-size:14.5px}
.door .door-go{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal);font-weight:700;margin-top:16px;display:block;
}

/* ---------- parks list ---------- */
.park-tools{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin:26px 0 4px;
}
.park-filter{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;cursor:pointer;
  color:var(--muted);background:transparent;border:1px solid var(--rule);
  padding:7px 14px;border-radius:99px;transition:all .2s;
}
.park-filter:hover{border-color:var(--ink);color:var(--ink)}
.park-filter.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.park-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;
  overflow:hidden;margin-top:22px;
}
.park{
  background:#fff;padding:13px 15px;display:flex;align-items:center;gap:11px;
  transition:background .2s;
}
.park:hover{background:var(--mist)}
.park .dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--rule);border:1px solid #c3c9d6;
}
.park.done .dot{background:var(--signal);border-color:var(--signal)}
.park .pn{font-size:13.5px;line-height:1.3;color:var(--muted)}
.park.done .pn{color:var(--ink);font-weight:600}
.park .st{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;
  color:#9aa4b8;margin-left:auto;text-transform:uppercase;white-space:nowrap;
}

/* ---------- trip cards (international) ---------- */
.trips{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
/* below 640px two columns would push cards under 280px, so stack them */
@media(max-width:640px){.trips{grid-template-columns:1fr}}
.trip{
  border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:#fff;
  transition:box-shadow .3s,transform .3s;
}
.trip:hover{box-shadow:0 14px 40px -20px rgba(11,42,107,.2);transform:translateY(-3px)}
.trip .trip-img{
  height:300px;background:var(--mist);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.trip .trip-img img{width:100%;height:100%;object-fit:cover;display:block}
.trip .trip-img .ph{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#9aa4b8;text-align:center;padding:0 18px;
}
.trip .trip-body{padding:20px 22px 22px}
.trip .place{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--signal);font-weight:700;margin-bottom:8px;display:block;
}
.trip h3{font-size:19px;margin-bottom:8px}
.trip p{font-size:14px;line-height:1.6}

/* region heading */
.region{
  display:flex;align-items:baseline;gap:16px;margin:52px 0 22px;
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.region h2{font-size:clamp(24px,3vw,32px)}
.region .cnt{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;margin-left:auto;white-space:nowrap;
}

/* ============================================================
   EDITORIAL SYSTEM  ·  Phase-1 consolidation
   ------------------------------------------------------------
   Single source of truth for the magazine / field-report chrome
   previously duplicated in the inline <style> blocks of
   conference.html, attribution.html, forecasting.html, and
   (as a pilot) beyond.html.

   `body.editorial` turns on the grain overlay + makes a page eligible for
   the editorial components below. All 8 pages carry it.

   The editorial gradient hero and the dark .footer-cta footer are keyed off
   markup, not a body class:
     .hero:has(.hero-grid-bg)   → editorial gradient hero
     footer:has(.footer-cta)    → dark footer
   Every page now uses the single light <nav> (portfolio base). conference /
   attribution / forecasting add a sticky .subnav-bar for in-page section links.
   ============================================================ */

/* ---------- grain overlay ---------- */
body.editorial::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events:none;z-index:9999;opacity:.5;mix-blend-mode:multiply;
}

/* ---------- scroll progress bar ---------- */
.progress-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--signal);z-index:1001;transition:width .1s linear;
}

/* ---------- sticky sub-nav bar (in-page section links) ---------- */
/* conference / attribution / forecasting mount this right under the main nav;
   beyond.html also uses it — its own <style> keeps an identical copy */
.subnav-bar{
  position:sticky;top:48px;z-index:90;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.subnav-bar .subnav{border-bottom:none;padding:13px 0}

/* ---------- "back to …" link above a hero eyebrow (attribution / forecasting) ---------- */
.hero-back{
  display:inline-block;margin-bottom:16px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;
}
.hero-back:hover{color:var(--signal)}

/* ---------- editorial gradient hero (index / conference / attribution / forecasting) ---------- */
/* keyed off .hero-grid-bg (the editorial hero's decoration) — no body class needed;
   the portfolio-hero pages carry .hero-grid instead */
.hero:has(.hero-grid-bg){
  padding:72px 32px 60px;position:relative;overflow:hidden;
  display:flex;align-items:center;
  background:
    radial-gradient(ellipse at top right,
      color-mix(in srgb, var(--signal) 8%, transparent), transparent 60%),
    radial-gradient(ellipse at bottom left,
      color-mix(in srgb, var(--ink) 8%, transparent), transparent 60%),
    var(--paper);
}
.hero:has(.hero-grid-bg) .hero-inner{max-width:1200px;margin:0 auto;width:100%;position:relative;z-index:2}
/* conference's landing hero is taller */
.hero.hero-landing{min-height:88vh;padding-top:60px}
/* any hero whose .hero-inner carries a photo-card stack splits into
   text column + photo column (conference + about / index / projects / writing) */
.hero-inner:has(.hero-card-stack){
  display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center;
}
/* about.html — text column + a photo column wide enough for three
   comparably-sized scattered prints */
.hero-inner:has(.hero-card-stack.is-aligned){
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;
}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(10,27,61,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,27,61,.04) 1px, transparent 1px);
  background-size:40px 40px;
}
.hero-meta{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:24px;
  display:flex;align-items:center;gap:12px;
}
.hero-meta::before{content:'';width:24px;height:1px;background:var(--signal)}
h1.hero-title{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(40px, 6.5vw, 76px);line-height:1.0;letter-spacing:-.03em;
  margin-bottom:14px;color:var(--ink);
}
h1.hero-title em{font-style:italic;font-weight:300;color:var(--signal)}
h1.hero-title .accent{display:inline-block;position:relative}
h1.hero-title .accent::after{
  content:'';position:absolute;bottom:.08em;left:-2%;right:-2%;height:.22em;
  background:var(--signal);z-index:-1;opacity:.18;transform:skew(-12deg);
}
.hero-pull{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:clamp(22px, 3vw, 32px);line-height:1.35;color:var(--ink);margin:8px 0 30px;
}
.hero-pull em{font-style:italic;color:var(--signal)}
.hero-sub{font-size:17px;color:var(--ink-soft);margin-bottom:40px;line-height:1.65}
.hero-landing .hero-sub{font-size:18px;max-width:540px}
/* portfolio-hero pages (about / projects / writing) — constrain the sub so it
   doesn't run the full .wrap width; the editorial gradient hero stays wide */
.hero:has(.hero-grid) .hero-sub{max-width:62ch}
.hero-cta{margin-bottom:36px}
.hero-cta a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:1px solid var(--rule);padding:11px 18px;border-radius:2px;transition:all .2s;
}
.hero-cta a:hover{border-color:var(--signal);color:var(--signal)}

/* hero stats row */
.hero-stats{display:flex;gap:36px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--rule)}
.hero-stats .stat{display:flex;flex-direction:column;gap:4px}
.hero-stats .stat-num{
  font-family:'Fraunces',serif;font-size:36px;font-weight:500;letter-spacing:-.02em;color:var(--ink);
}
.hero-stats .stat-num .pink,
.hero-stats .stat-num .accent{color:var(--signal)}
.hero-stats .stat-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.hero-stats .stat-label.long{
  text-transform:none;letter-spacing:.01em;font-family:'Inter Tight',sans-serif;
  font-size:12px;font-weight:500;line-height:1.45;
}

/* hero photo-card stack (conference landing hero) */
.hero-card-stack{position:relative;height:520px}
.photo-card{
  position:absolute;background:#fff;padding:16px 16px 22px;border-radius:2px;
  box-shadow:0 20px 60px -20px rgba(10,27,61,.3), 0 2px 6px rgba(0,0,0,.08);
  width:252px;   /* shared hero-card size — matches about.html's reference cards.
                    every hero-card-stack page (index/projects/writing/about/conference)
                    inherits this; do not re-add per-page width values. */
}
.photo-card-1{top:0;left:30%;transform:rotate(-5deg)}
.photo-card-2{top:140px;left:0;transform:rotate(4deg);z-index:2}
.photo-card-3{top:300px;left:35%;transform:rotate(-2deg)}
.photo-frame{
  width:100%;aspect-ratio:1/1;background:var(--mist);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);
  text-align:center;margin-bottom:10px;
}
.photo-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:center top;   /* portrait: crop from the bottom, never the head */
}
.photo-cap{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);
  letter-spacing:.05em;display:flex;justify-content:space-between;
}
/* about.html — three full-size prints scattered on a desk (see composition ref):
   graduation front / bottom-left, snow-plane behind / top-centre, seated-hat
   behind-right. No aspect-ratio box — each print keeps its own proportions. */
.hero-card-stack.is-aligned{height:545px}
.hero-card-stack.is-aligned .photo-frame{
  aspect-ratio:auto;border:none;background:transparent;overflow:hidden;
}
.hero-card-stack.is-aligned .photo-frame img{width:100%;height:100%;object-fit:cover}
/* positioned to the reference: snow top-centre (in front of seated, behind grad),
   graduation bottom-left front-most over the snow's lower-left, seated right/back
   with its left edge tucked behind the snow. Sizes unchanged from before. */
.hero-card-stack.is-aligned .photo-card-1{top:0;left:72px;width:252px;transform:rotate(5deg);z-index:2}
.hero-card-stack.is-aligned .photo-card-1 .photo-frame{height:240px}
.hero-card-stack.is-aligned .photo-card-1 .photo-frame img{object-position:center 58%}
/* 2 = graduation — bottom-left, front-most */
.hero-card-stack.is-aligned .photo-card-2{top:190px;left:-24px;width:258px;transform:rotate(-6deg);z-index:3}
.hero-card-stack.is-aligned .photo-card-2 .photo-frame{height:278px}
.hero-card-stack.is-aligned .photo-card-2 .photo-frame img{object-position:center 5%}
/* 3 = seated/hat — right, back of the stack */
.hero-card-stack.is-aligned .photo-card-3{top:208px;left:232px;width:244px;transform:rotate(5deg);z-index:1}
.hero-card-stack.is-aligned .photo-card-3 .photo-frame{height:261px}
.hero-card-stack.is-aligned .photo-card-3 .photo-frame img{object-position:center 38%}

/* projects.html — the two hero cards are landscape screenshots (never cropped).
   Both cards are the SAME fixed size as about.html's cards; each screenshot sits
   inside via object-fit:contain (letterboxed, not cropped). Multi-agent in front. */
.hero-card-stack.shots{height:352px}
.hero-card-stack.shots .photo-frame{
  aspect-ratio:auto;height:240px;border:none;background:#fff;overflow:hidden;
}
.hero-card-stack.shots .photo-frame img{width:100%;height:100%;object-fit:contain}
.hero-card-stack.shots .photo-card{width:252px}
.hero-card-stack.shots .photo-card-1{top:0;left:42%;transform:rotate(-4deg);z-index:3}
.hero-card-stack.shots .photo-card-2{top:48px;left:-8%;transform:rotate(3deg);z-index:2}

/* writing.html — hero cards are article diagrams: show them whole, letterboxed
   in the frame's fill, instead of cropped. Fit-mode only; positions/sizes stay
   the shared defaults. */
.hero-card-stack.diagram .photo-frame img{object-fit:contain;object-position:center}

@media(max-width:900px){
  .hero-inner:has(.hero-card-stack){grid-template-columns:1fr;gap:40px}
  .hero-inner:has(.hero-card-stack.is-aligned){grid-template-columns:1fr;gap:40px}
  .hero-card-stack{width:100%;height:400px;max-width:340px;margin:0 auto}
  .photo-card-1,.photo-card-2,.photo-card-3{width:240px}
  .photo-card-2{left:50px}.photo-card-3{left:80px}
  /* mobile: the fan doesn't fit a phone width — plain full-size portrait column */
  .hero-card-stack.is-aligned{
    position:static;height:auto;display:flex;flex-direction:column;gap:16px;
    width:100%;max-width:270px;margin:0 auto;
  }
  .hero-card-stack.is-aligned .photo-card{position:static;width:100%;transform:none}
}

/* ---------- section-tag (mono eyebrow, distinct from .eyebrow) ---------- */
.section-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);margin-bottom:20px;display:inline-block;
}

/* ---------- numbered module header ---------- */
/* .module-head is beyond.html's name for the same component — kept as an alias.
   Placed after .section-head so its grid wins when both classes sit on one node. */
section.module{padding:100px 32px;position:relative}
.module-inner{max-width:1200px;margin:0 auto}
.module-header,
.module-head{
  display:grid;grid-template-columns:120px 1fr auto;gap:32px;align-items:end;
  padding-bottom:24px;border-bottom:1px solid var(--ink);margin-bottom:48px;
}
.module-num{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:84px;line-height:.85;letter-spacing:-.04em;color:var(--signal);
}
.module-title{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(32px, 4vw, 48px);line-height:1.05;letter-spacing:-.02em;
}
.module-meta{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.6;
}
.band-dark .module-header,
.band-dark .module-head{border-bottom-color:rgba(255,255,255,.28)}
.band-dark .module-meta{color:rgba(255,255,255,.6)}
@media(max-width:700px){
  .module-header,.module-head{grid-template-columns:60px 1fr;gap:16px}
  .module-num{font-size:48px}
  .module-meta{display:none}
}
.mod-lead{font-size:17px;line-height:1.65;color:var(--ink-soft);margin-bottom:8px}
.mod-note{font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:20px}
.mod-note a,.ds-callout a{color:var(--signal)}

/* ---------- ds-callout ---------- */
.ds-callout{
  background:var(--mist);border-left:4px solid var(--signal);
  padding:28px 32px;margin:32px 0;border-radius:0 4px 4px 0;
}
.ds-callout-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--signal);margin-bottom:10px;font-weight:600;
}
.ds-callout p{font-size:15px;line-height:1.6;color:var(--ink-soft)}
.ds-callout p + p{margin-top:12px}

/* ---------- pullquote ---------- */
.pullquote{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:24px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);
  margin:32px 0;padding-left:20px;border-left:3px solid var(--signal);
}
.pullquote em{font-style:italic}   /* forecasting.html adds color:var(--accent) locally */
.pullquote-attr{
  display:block;font-family:'JetBrains Mono',monospace;font-size:11px;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;
}
.band-dark .pullquote{color:#fff}

/* ---------- highlights box ---------- */
.highlights{
  margin:28px 0;background:var(--mist);padding:24px 28px;
  border-radius:2px;border-top:2px solid var(--ink);
}
.highlights-title{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:14px;color:var(--ink);font-weight:600;
}
.highlights ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.highlights li{
  font-size:14px;line-height:1.55;color:var(--ink-soft);padding-left:24px;position:relative;
}
.highlights li::before{content:'→';position:absolute;left:0;top:0;color:var(--signal);font-weight:600}
.highlights li strong{color:var(--ink);font-weight:600}

/* ---------- day divider / region divider ---------- */
.day-divider{text-align:center;padding:80px 32px 40px;position:relative}
.day-divider-line{
  display:flex;align-items:center;justify-content:center;gap:24px;max-width:800px;margin:0 auto;
}
.day-divider-line::before,.day-divider-line::after{content:'';flex:1;height:1px;background:var(--rule)}
.day-label{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:48px;letter-spacing:-.02em;white-space:nowrap;
}
.day-label .num{color:var(--signal)}
.day-date{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-top:14px;
}
/* beyond.html's region divider = the same treatment on the .region node */
.region-divider{display:block;text-align:center;border-bottom:none;padding-bottom:0;margin:56px 0 30px}
.region-divider .region-line{
  display:flex;align-items:center;justify-content:center;gap:24px;max-width:800px;margin:0 auto;
}
.region-divider .region-line::before,
.region-divider .region-line::after{content:'';flex:1;height:1px;background:var(--rule)}
.region-divider .region-label{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:clamp(26px,3.2vw,40px);line-height:1;letter-spacing:-.02em;white-space:nowrap;margin:0;
}
.region-divider .region-cnt{
  display:block;margin:12px 0 0;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}

/* ---------- finding cards (numbered outcome grid) ---------- */
.finding-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:8px}
.finding-card{border:1px solid var(--rule);padding:28px 26px;background:var(--paper);transition:border-color .2s}
.finding-card:hover{border-color:var(--signal)}
.finding-num{font-family:'Fraunces',serif;font-style:italic;font-size:32px;color:var(--signal);margin-bottom:12px}
.finding-card h3{font-family:'Fraunces',serif;font-weight:500;font-size:19px;line-height:1.25;margin-bottom:10px;letter-spacing:-.01em}
.finding-card p{font-size:14px;line-height:1.58;color:var(--ink-soft)}

/* ---------- actions / action cards ---------- */
.actions{background:var(--ink);color:var(--paper);padding:100px 32px}
.actions-inner{max-width:1200px;margin:0 auto}
.actions-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px;margin-top:48px;
}
.action-card{
  border:1px solid rgba(245,243,238,.15);padding:32px 28px;position:relative;transition:all .3s;
}
.action-card:hover{
  border-color:var(--signal);
  background:color-mix(in srgb, var(--signal) 6%, transparent);
}
.action-card-num{
  font-family:'Fraunces',serif;font-style:italic;font-size:36px;color:var(--signal);margin-bottom:14px;
}
.action-card h4{
  font-family:'Fraunces',serif;font-weight:500;font-size:22px;line-height:1.2;
  margin-bottom:12px;letter-spacing:-.01em;
}
.action-card p{font-size:14px;line-height:1.55;color:rgba(245,243,238,.75)}
.action-card .tag{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;margin-top:14px;
  color:var(--signal);background:color-mix(in srgb, var(--signal) 20%, transparent);
}

/* ---------- footer-cta + editorial footer ---------- */
.footer-cta{
  max-width:640px;margin:0 auto 46px;padding-bottom:46px;
  border-bottom:1px solid rgba(245,243,238,.16);
}
.footer-cta h3{
  font-family:'Fraunces',serif;font-weight:300;font-size:clamp(24px, 3vw, 34px);
  line-height:1.18;letter-spacing:-.02em;color:var(--paper);margin:14px 0 22px;
}
.footer-cta h3 em{font-style:italic;color:var(--signal)}
.footer-cta-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.footer-cta-links a{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--paper);text-decoration:none;
  border:1px solid rgba(245,243,238,.3);padding:11px 20px;border-radius:2px;transition:all .2s;
}
.footer-cta-links a:hover{
  border-color:var(--signal);
  background:color-mix(in srgb, var(--signal) 12%, transparent);
}
.footer-mark{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:32px;
  letter-spacing:-.02em;color:var(--paper);margin-bottom:14px;
}
.footer-mark span{color:var(--signal)}
.footer-nav{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.footer-nav a{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.68);text-decoration:none;padding:5px 10px;border-radius:3px;transition:all .2s;
}
.footer-nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.footer-meta{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  color:rgba(245,243,238,.55);text-transform:uppercase;
}
/* the editorial footer is dark wherever it carries a .footer-cta
   (its text is white); pages without one keep the light base footer */
footer:has(.footer-cta){
  padding:80px 32px 48px;background:var(--ink);color:var(--paper);
  border-top:1px solid rgba(245,243,238,.16);text-align:center;
}

/* ---------- beyond.html pilot leftovers folded in ---------- */
.kicker-mono{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);font-weight:600;display:block;margin-bottom:10px;
}
/* beyond's world→parks lead-in is a .pullquote; .bridge-line only keeps it
   on one line on wide screens (its font styling now comes from .pullquote) */
@media(min-width:1200px){.bridge-line{white-space:nowrap}}

/* ---------- editorial reveal (conference / attribution / forecasting JS adds .visible;
   beyond + portfolio JS adds .in, handled by the base .reveal rules above) ---------- */
.reveal.visible{opacity:1;transform:none}