/* ======================================================
   Dishanth CA — "The Broadsheet"
   An antique newspaper front page: aged parchment, sepia
   ink, oxblood + antique gold, a Didone nameplate, broad-
   sheet columns, fleurons, and a celestial star-chart plate.
   Degrades to a static, legible page under reduced-motion / no-JS.
   ====================================================== */

:root{
  --paper:     #E7DBBF;   /* aged parchment */
  --paper-2:   #EFE7CF;   /* lighter panel  */
  --paper-3:   #E1D4B4;   /* footer / inset */
  --ink:       #2C2118;   /* sepia press-ink (not black) */
  --ink-soft:  #574736;
  --ink-faint: #8A7657;
  --hair:      rgba(44,33,24,.16);
  --rule:      rgba(44,33,24,.52);
  --oxblood:   #8A2B17;
  --oxblood-deep:#6E2011;
  --gold:      #9A7B36;
  --gold-soft: #B79A56;
  --gold-line: rgba(154,123,54,.55);

  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:   'Crimson Pro', Georgia, 'Times New Roman', serif;
  --black:  'UnifrakturCook', 'Playfair Display', serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.6;
  font-weight:400;
  font-variant-numeric:oldstyle-figures proportional;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Paper grain — static, GPU-cheap */
body::before{
  content:"";
  position:fixed; inset:0; z-index:90;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Laid-paper lines + edge vignette — gives the page real depth */
body::after{
  content:"";
  position:fixed; inset:0; z-index:95;
  pointer-events:none;
  mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(0deg, rgba(44,33,24,.028) 0 1px, transparent 1px 4px),
    radial-gradient(125% 120% at 50% 38%, transparent 56%, rgba(44,33,24,.20) 100%);
}

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--oxblood);
  outline-offset:3px;
}

.shell{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--pad);
}

strong{ font-weight:600; color:var(--ink); }

.serif{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
}
.star{ color:var(--gold); font-style:normal; }

/* ── Shared label / eyebrow ── */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0;
}
.eyebrow::before{
  content:"";
  width:30px; height:2px;
  background:var(--gold);
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.08;
}

/* ── Folio / navigation bar ── */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:24px;
  padding:11px var(--pad);
  background:var(--paper);
  border-bottom:3px double var(--rule);
  transition:padding .3s ease;
}
.nav.is-scrolled{ padding-block:8px; }
.nav-logo{
  font-family:var(--display);
  font-weight:800;
  font-size:20px;
  letter-spacing:.01em;
}
.nav-est{
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-left:14px;
  border-left:1px solid var(--hair);
}
.nav-links{
  display:flex;
  gap:28px;
  margin-left:auto;
}
.nav-links a{
  position:relative;
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .2s ease;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:-5px;
  width:100%; height:1.5px;
  background:var(--oxblood);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after,
.nav-links a.is-active::after{ transform:scaleX(1); }
.nav-links a.is-active{ color:var(--ink); }
.nav-cta{
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:9px 18px;
  border:1px solid var(--rule);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{ background:var(--ink); color:var(--paper); box-shadow:3px 3px 0 var(--gold-line); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  background:none;
  border:1px solid var(--rule);
  cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:1.6px; background:var(--ink); transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.nav-mobile[hidden]{ display:none; }
.nav-mobile{
  position:fixed;
  inset:56px 0 auto 0;
  z-index:49;
  display:flex; flex-direction:column;
  gap:2px;
  padding:14px var(--pad) 26px;
  background:var(--paper);
  border-bottom:3px double var(--rule);
}
.nav-mobile a{
  padding:13px 4px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid var(--hair);
}
.nav-mobile .nm-cta{ margin-top:14px; border:1px solid var(--rule); text-align:center; }

/* ── Hero / front page ── */
.hero{
  position:relative;
  padding:clamp(24px,4vh,48px) 0 clamp(40px,7vh,80px);
  border-bottom:4px double var(--rule);
}

/* Masthead / nameplate */
.masthead{ text-align:center; }
.masthead-folio{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.masthead-folio .orn{ color:var(--gold); font-size:16px; }
.masthead-kicker{
  margin:14px 0 6px;
  font-family:var(--black);
  font-weight:700;
  font-size:clamp(17px,2.4vw,26px);
  letter-spacing:.02em;
  color:var(--ink);
}
.nameplate{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(46px,12.5vw,152px);
  line-height:.92;
  letter-spacing:-.02em;
  color:var(--ink);
  /* subtle letterpress: a hint of paper-relief highlight + ink bleed */
  text-shadow:0 1px 0 rgba(255,255,255,.30), 0 0 1px rgba(44,33,24,.16), 0 1px 4px rgba(44,33,24,.06);
  text-wrap:balance;
}
.dateline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:10px;
  padding:9px 0;
  border-top:3px double var(--rule);
  border-bottom:1px solid var(--rule);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* Lead story */
.lead{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(28px,5vw,68px);
  align-items:center;
  padding:clamp(32px,5vh,60px) 0 0;
}
.lead-kicker{
  display:inline-flex; align-items:center; gap:.6em;
  margin:0 0 18px;
  font-size:12.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oxblood);
}
.lead-kicker::before{ content:""; width:26px; height:2px; background:var(--oxblood); }
.hero-title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(42px,6.4vw,86px);
  line-height:1.0;
  letter-spacing:-.02em;
  margin:0 0 24px;
}
.hero-title .serif{ font-weight:400; font-size:1.02em; }
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero-title .line-inner{
  display:block;
  transform:translateY(115%);
  opacity:0;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1), opacity 1.05s ease;
}
.hero-title.in .line-inner{ transform:none; opacity:1; }
.hero-title .line:nth-child(2) .line-inner{ transition-delay:.12s; }
.hero-sub{
  max-width:560px;
  font-size:clamp(18px,2vw,22px);
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 34px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* Celestial plate (framed engraving) */
.lead-figure{
  position:relative;
  margin:0;
  aspect-ratio:1 / 1;
  border:2px double var(--gold-line);
  background:radial-gradient(120% 120% at 50% 45%, rgba(154,123,54,.06), transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(44,33,24,.06);
}
.lead-figure .hero-canvas{
  position:absolute; inset:10px;
  width:calc(100% - 20px); height:calc(100% - 44px);
  display:block;
}
.lead-figure figcaption{
  position:absolute;
  left:12px; right:12px; bottom:10px;
  text-align:center;
  font-style:italic;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-faint);
}
.plate-corner{ position:absolute; width:14px; height:14px; border:0 solid var(--gold); z-index:2; }
.plate-corner.tl{ top:5px; left:5px; border-top-width:1.5px; border-left-width:1.5px; }
.plate-corner.tr{ top:5px; right:5px; border-top-width:1.5px; border-right-width:1.5px; }
.plate-corner.bl{ bottom:5px; left:5px; border-bottom-width:1.5px; border-left-width:1.5px; }
.plate-corner.br{ bottom:5px; right:5px; border-bottom-width:1.5px; border-right-width:1.5px; }

/* By-the-numbers strip */
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(28px,6vw,80px);
  margin:clamp(36px,6vh,64px) 0 0;
  padding:22px 0;
  border-top:3px double var(--rule);
  border-bottom:1px solid var(--rule);
}
.hero-stats div{ margin:0; }
.hero-stats dt{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(34px,4.4vw,52px);
  letter-spacing:-.01em;
  line-height:1;
  font-variant-numeric:lining-nums;
}
.hero-stats dd{
  margin:7px 0 0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── Buttons ── */
.btn{
  display:inline-flex;
  align-items:center;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:14px 26px;
  border:1px solid transparent;
  transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--oxblood); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--gold-line); }
.btn-ghost{ border-color:var(--rule); color:var(--ink); }
.btn-ghost:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--gold-line); border-color:var(--ink); }

/* ── Section scaffolding ── */
.section{
  position:relative;
  padding:clamp(60px,10vh,118px) 0;
  border-bottom:1px solid var(--rule);   /* thin — lower line of the Oxford pair */
}
.section::before{   /* thick — upper line of the Oxford rule */
  content:"";
  position:absolute;
  left:0; right:0; bottom:3px;
  height:2px;
  background:var(--rule);
  opacity:.5;
  pointer-events:none;
}
.section::after{   /* printer's flower centerpiece breaking the rule */
  content:"❧";
  position:absolute;
  left:50%; bottom:-.7em;
  z-index:1;
  transform:translateX(-50%);
  padding:0 22px;
  background:var(--paper);
  color:var(--gold);
  font-family:var(--display);
  font-size:21px;
  line-height:1;
}
.section-head{
  position:relative;
  max-width:820px;
  margin-bottom:clamp(34px,5vh,56px);
}
.section-head .eyebrow{ position:relative; z-index:1; margin-bottom:18px; }
.section-head h2{
  position:relative; z-index:1;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(32px,5vw,60px);
  letter-spacing:-.015em;
  line-height:1.04;
}
/* Big vintage folio numeral — a faint watermark that fills the empty margin */
.section-folio{
  position:absolute;
  top:-.34em; right:-.04em;
  z-index:0;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(96px,17vw,280px);
  line-height:.78;
  letter-spacing:-.04em;
  color:var(--ink);
  opacity:.055;
  pointer-events:none;
  user-select:none;
}
/* Standfirst — the italic lead-in beneath each headline */
.standfirst{
  position:relative; z-index:1;
  margin:clamp(16px,2.4vh,22px) 0 0;
  max-width:60ch;
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(18px,2.1vw,25px);
  line-height:1.48;
  color:var(--ink-soft);
}
.standfirst::first-letter{ color:var(--oxblood); }
.section-note{
  position:relative; z-index:1;
  margin:18px 0 0;
  font-style:italic;
  font-size:17px;
  color:var(--ink-faint);
}

/* ── About / leader article ── */
.article{
  border-top:4px double var(--rule);
  padding-top:clamp(22px,3vh,34px);
}
.byline{
  margin:0 0 22px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.article-body{
  column-count:2;
  column-gap:clamp(28px,3.4vw,52px);
  column-rule:1px solid var(--hair);
  font-size:18.5px;
  line-height:1.62;
  text-align:justify;
  text-wrap:pretty;
  hyphens:auto;
  color:var(--ink);
}
/* Drop cap — float fallback everywhere … */
.article-body::first-letter{
  float:left;
  font-family:var(--display);
  font-weight:900;
  font-size:5em;
  line-height:.72;
  padding:.02em .1em 0 0;
  color:var(--oxblood);
}
/* … upgraded to true initial-letter where the browser supports it. */
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .article-body::first-letter{
    float:none;
    -webkit-initial-letter:3;
    initial-letter:3;
    font-size:inherit;
    line-height:inherit;
    padding:0;
    margin-right:.12em;
  }
}
/* Dateline lead-in — small caps, drop-capped first letter flows from it */
.dateline-lead{
  font-weight:600;
  font-variant:small-caps;
  letter-spacing:.04em;
  color:var(--ink);
}
/* Pull quote — breaks across both columns, set large in italic Playfair */
.pull{
  column-span:all;
  margin:clamp(22px,3.2vh,34px) 0;
  padding:clamp(14px,2vh,20px) 8px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(23px,3.3vw,38px);
  line-height:1.2;
  text-align:center;
  text-wrap:balance;
  color:var(--oxblood);
}
.pull::before{ content:"\201C"; }
.pull::after{ content:"\201D"; }
/* End-mark — the printer's square that closes a story */
.endmark{
  display:inline-block;
  width:.5em; height:.5em;
  margin-left:.34em;
  background:var(--oxblood);
  vertical-align:baseline;
}

/* ── Capabilities (boxed dispatches) ── */
.cap-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,28px);
}
.cap{
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:clamp(26px,3.2vw,38px);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cap:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--gold-line);
  border-color:var(--ink);
}
.cap h3{
  font-family:var(--display);
  font-size:26px;
  font-weight:700;
  margin-bottom:12px;
}
.cap p{ margin:0 0 22px; color:var(--ink-soft); font-size:17px; }

.tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin:0; padding:0;
}
.tags li{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:5px 11px;
  border:1px solid var(--gold-line);
  color:var(--ink-soft);
}

/* ── Selected work (classified dispatches) ── */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,26px);
}
.work-card{
  display:flex; flex-direction:column;
  padding:26px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.work-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--gold-line);
  border-color:var(--ink);
}
.work-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--hair);
}
.work-year{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.work-metric{
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--oxblood); text-align:right;
}
.work-card h3{
  font-family:var(--display);
  font-size:24px; font-weight:700;
  margin-bottom:12px;
}
.work-card p{ margin:0 0 22px; font-size:16.5px; color:var(--ink-soft); flex:1; }

/* ── The Arsenal / stack (ledger) ── */
.stack-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,44px) clamp(28px,4vw,56px);
}
.stack-cat h3{
  font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
  padding-bottom:12px; margin-bottom:4px;
  border-bottom:3px double var(--rule);
}
.stack-cat ul{ list-style:none; margin:0; padding:0; }
.stack-cat li{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--hair);
  font-size:18px;
}
.stack-cat li:last-child{ border-bottom:none; }
.stack-cat li i{
  font-style:normal;
  font-size:13.5px; font-weight:600; letter-spacing:.04em;
  font-variant-numeric:oldstyle-figures proportional;
  color:var(--ink-faint);
}

/* ── Credentials / certs (ledger) ── */
.certs{
  list-style:none; margin:0; padding:0;
  border-top:4px double var(--rule);
}
.certs li{
  display:grid;
  grid-template-columns:96px 1fr auto;
  gap:24px; align-items:baseline;
  padding:24px 0;
  border-bottom:1px solid var(--rule);
}
.cert-year{
  font-size:14px; font-weight:600; letter-spacing:.1em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--oxblood);
}
.cert-name{ font-family:var(--display); font-size:24px; font-weight:700; }
.cert-org{
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); text-align:right;
}

/* ── Correspondence / footer ── */
.foot{
  background:var(--paper-3);
  padding:clamp(64px,11vh,128px) 0 44px;
  border-top:4px double var(--rule);
}
.foot .eyebrow{ margin-bottom:26px; }
.foot-mega{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(44px,8vw,104px);
  line-height:1.0;
  letter-spacing:-.02em;
  margin:0 0 32px;
  max-width:15ch;
  text-shadow:0 1px 0 rgba(255,255,255,.28), 0 0 1px rgba(44,33,24,.14);
}
.foot-cta{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(22px,3vw,36px);
  padding-bottom:4px;
  border-bottom:2px solid var(--gold);
  transition:color .2s ease, border-color .2s ease;
}
.foot-cta:hover{ color:var(--oxblood); border-color:var(--oxblood); }

.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:clamp(52px,8vh,90px);
  padding-top:44px;
  border-top:3px double var(--rule);
}
.foot-cols h4{
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:16px;
}
.foot-cols p{ margin:0; font-size:16.5px; line-height:1.7; color:var(--ink-soft); }
.foot-cols a{ display:block; font-size:16.5px; padding:6px 0; color:var(--ink-soft); transition:color .2s ease; }
.foot-cols a:hover{ color:var(--oxblood); }

.foot-bot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:56px;
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── Reveal animation (one-shot) ── */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d, 0ms);
}
.reveal.in{ opacity:1; transform:none; }

/* ── Scroll progress ── */
.scroll-progress{
  position:fixed; top:0; left:0;
  z-index:60;
  height:3px; width:100%;
  transform:scaleX(var(--p, 0)); transform-origin:left;
  background:linear-gradient(90deg, var(--gold), var(--oxblood));
  pointer-events:none;
}

/* ══════════════════════════════════════════════════════
   Scroll-driven motion — premium, subtle depth.
   Runs entirely on the compositor via native scroll-timeline
   (Chromium 115+). Where unsupported, the page keeps the JS
   IntersectionObserver `.reveal.in` fade as a clean fallback.
   Every rule is gated on `prefers-reduced-motion: no-preference`,
   so reduced-motion users get the fully static page.
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){

    /* 1 ── Reveals: rise + a hair of 3D, scrubbed by scroll position.
       Cards (.cap, .work-card) and every .reveal inherit this. */
    @keyframes reveal-rise{
      from{ opacity:0; transform:perspective(900px) rotateX(7deg) translateY(30px); }
      to  { opacity:1; transform:perspective(900px) rotateX(0)    translateY(0);    }
    }
    .reveal{
      opacity:0;                       /* held by fill:both before the range */
      animation-name:reveal-rise;
      animation-fill-mode:both;
      animation-timing-function:cubic-bezier(.2,.7,.3,1);
      animation-timeline:view();
      animation-range:entry 4% cover 32%;
    }

    /* 2 ── Big Playfair headlines print in with a left→right clip wipe. */
    @keyframes headline-wipe{
      from{ clip-path:inset(-12% 100% -12% 0); }
      to  { clip-path:inset(-12% -4%  -12% 0); }
    }
    .section-head h2{
      animation-name:headline-wipe;
      animation-fill-mode:both;
      animation-timing-function:cubic-bezier(.2,.7,.3,1);
      animation-timeline:view();
      animation-range:entry 16% cover 46%;
    }

    /* 3 ── Hero parallax — the signature. Each layer rides its own view()
       timeline and drifts only as it exits the top of the viewport, at a
       different magnitude for genuine layered depth. Neutral at rest (before
       each layer's top reaches the viewport top). The celestial plate also
       tilts a few degrees into the page as it leaves. */
    .hero{
      perspective:1200px;
      perspective-origin:50% 28%;
    }
    .masthead, .lead-copy, .lead-figure{
      will-change:transform;
      animation-fill-mode:both;
      animation-timing-function:linear;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }

    @keyframes hero-drift-masthead{
      from{ transform:translateY(0);     }
      to  { transform:translateY(-26px); }
    }
    @keyframes hero-drift-copy{
      from{ transform:translateY(0);     }
      to  { transform:translateY(-12px); }
    }
    @keyframes hero-drift-figure{
      from{ transform:translateY(0)     rotateX(0);     }
      to  { transform:translateY(-46px) rotateX(4.5deg); }
    }
    .masthead { animation-name:hero-drift-masthead; }
    .lead-copy{ animation-name:hero-drift-copy; }
    /* .lead-figure is also a .reveal — this rule follows it in source order
       so the parallax wins; opacity:1 restores it (reveal-rise no longer runs). */
    .lead-figure{ opacity:1; animation-name:hero-drift-figure; }
  }
}

/* ══════════════════════════════════════════════════════
   "Going to Press" — Lenis + GSAP enhancement layer.
   When GSAP is live (`html.js-gsap`), JS drives all motion, so the
   native scroll-timeline layer above is switched off (it remains the
   no-JS / no-GSAP fallback). Lenis owns smooth scrolling.
   ══════════════════════════════════════════════════════ */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

html.js-gsap .reveal,
html.js-gsap .section-head h2,
html.js-gsap .masthead,
html.js-gsap .lead-copy,
html.js-gsap .lead-figure{
  animation:none !important;   /* GSAP takes over these elements */
}

/* Kinetic split-text — words rise out of a clip mask. Generous bottom
   padding (+ negative margin) keeps descenders/italic overhang uncut
   without changing layout. */
.split .w-mask{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:0.06em 0 0.24em; margin:-0.06em 0 -0.24em;
}
.split .w-in{ display:inline-block; will-change:transform; }
/* In GSAP mode the hero title's word-masks do the clipping, not the lines */
html.js-gsap .hero-title .line{ overflow:visible; }
html.js-gsap .hero-title .line-inner{ transform:none !important; opacity:1 !important; transition:none; }

/* ── Custom registration-mark cursor (desktop, fine pointer) ── */
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor .btn,
html.has-cursor .nav-toggle{ cursor:none; }

.cur-ring, .cur-dot{
  position:fixed; top:0; left:0;
  z-index:9999;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.cur-dot{ width:15px; height:15px; }              /* registration crosshair */
.cur-dot::before, .cur-dot::after{ content:""; position:absolute; background:var(--oxblood); }
.cur-dot::before{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.cur-dot::after { top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }
.cur-ring{
  width:30px; height:30px;
  border:1px solid var(--gold-line);
  border-radius:50%;
  transition:width .3s cubic-bezier(.2,.7,.3,1), height .3s cubic-bezier(.2,.7,.3,1),
             border-color .3s ease, background-color .3s ease, opacity .3s ease;
}
.cur-ring.is-hot{ width:62px; height:62px; border-color:var(--oxblood); background:rgba(138,43,23,.05); }
.cur-ring.is-down{ width:22px; height:22px; }

/* ── Horizontal "press run" — Selected Work (enhanced desktop) ── */
#work.work-horizontal{ overflow:hidden; border-bottom:none; padding-block:0; }
#work.work-horizontal::after,
#work.work-horizontal::before{ display:none; }
#work.work-horizontal .shell{
  max-width:none; height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(20px,4vh,46px);
  padding-inline:0;
}
#work.work-horizontal .section-head{ padding-inline:var(--pad); margin:0; max-width:820px; }
#work.work-horizontal .work-grid{
  display:flex; flex-wrap:nowrap; width:max-content;
  grid-template-columns:none;
  gap:clamp(18px,2vw,30px);
  padding-inline:var(--pad);
  align-items:stretch;
  will-change:transform;
}
#work.work-horizontal .work-card{ flex:0 0 auto; width:clamp(300px,30vw,400px); }

.work-progress{
  position:fixed; left:var(--pad); right:var(--pad); bottom:clamp(26px,6vh,58px);
  z-index:40;
  display:flex; align-items:center; gap:20px;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); pointer-events:none;
  opacity:0; transition:opacity .45s ease;     /* only visible while the press runs */
}
.work-progress.is-live{ opacity:1; }
.work-progress .wp-track{ position:relative; flex:1; height:2px; background:var(--hair); }
.work-progress .wp-fill{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--gold),var(--oxblood)); }
.work-progress .wp-folio{ color:var(--oxblood); font-variant-numeric:lining-nums; white-space:nowrap; }
.work-progress .wp-count{ white-space:nowrap; }

/* ── Stop-press ticker (vintage marquee) ── */
.ticker{
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  background:var(--paper-2);
  padding:11px 0;
}
.ticker-track{ display:flex; width:max-content; will-change:transform; animation:ticker 38s linear infinite; }
.ticker-item{
  flex:0 0 auto; white-space:nowrap;
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(16px,2vw,22px); letter-spacing:.01em; color:var(--ink-soft);
  padding-right:0;
}
.ticker-item i{ color:var(--gold); font-style:normal; padding:0 .35em; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
html.js-gsap .ticker-track{ animation:none; }   /* GSAP drives it (velocity-reactive) */

/* ── Intro overlay — "Going to Press" ── */
html.intro-on, html.intro-on body{ overflow:hidden; height:100%; }
.press-intro{ display:none; }
html.intro-on .press-intro{
  display:flex;
  position:fixed; inset:0; z-index:1000;
  flex-direction:column; align-items:center; justify-content:center;
  background:var(--paper);
  will-change:transform;
}
html.intro-on .press-intro::after{        /* edge vignette echo */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(125% 120% at 50% 40%, transparent 55%, rgba(44,33,24,.16) 100%);
  mix-blend-mode:multiply;
}
.pi-inner{ position:relative; z-index:2; text-align:center; width:100%; max-width:var(--max); padding-inline:var(--pad); }
.pi-kicker{
  margin:0 0 10px; opacity:0;
  font-family:var(--black); font-weight:700;
  font-size:clamp(15px,2.2vw,24px); letter-spacing:.02em; color:var(--ink);
}
.pi-name{
  margin:0; opacity:0;
  font-family:var(--display); font-weight:900;
  font-size:clamp(52px,13vw,168px); line-height:.9; letter-spacing:-.02em; color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
}
.pi-rule{
  display:block; height:3px; width:min(560px,72vw); margin:clamp(18px,3vh,30px) auto 0;
  background:linear-gradient(90deg, var(--gold), var(--oxblood));
  transform:scaleX(0); transform-origin:center;
}
.pi-meta{
  display:flex; gap:clamp(14px,3vw,30px); align-items:center; justify-content:center;
  margin:clamp(16px,2.5vh,26px) 0 0; opacity:0;
  font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}
.pi-meta .pi-count{ color:var(--oxblood); font-variant-numeric:lining-nums tabular-nums; min-width:2.6ch; text-align:right; }
.pi-skip{
  position:absolute; right:clamp(18px,4vw,40px); bottom:clamp(18px,4vh,36px); z-index:3;
  background:none; border:1px solid var(--rule); color:var(--ink-soft);
  font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:9px 16px; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.pi-skip:hover{ background:var(--ink); color:var(--paper); }

/* ══════════════════════════════════════════════════════
   "The Cybersecurity Chronicle: Full Edition" — newspaper
   furniture applied front-to-end. Art-directed & airy:
   ears, deck, contents index, department folios, dressed
   dispatches, column rules, colophon. All decorative bits
   are aria-hidden; the index uses real jump-links.
   ══════════════════════════════════════════════════════ */

/* Typographic craft — ligatures, hanging punctuation, balanced heads */
body{
  font-variant-ligatures:common-ligatures contextual;
  hanging-punctuation:first allow-end last;
}
.section-head h2, .standfirst, .cap h3, .work-card h3,
.cert-name, .foot-mega, .hero-deck, .hero-sub{ text-wrap:balance; }

/* ── Masthead ears (flank the nameplate) ── */
.masthead-main{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(10px,1.6vw,26px);
  margin-top:14px;
}
.masthead-center{ text-align:center; }
.masthead-center .masthead-kicker{ margin-top:0; }
.ear{
  display:flex; flex-direction:column; gap:5px;
  padding:11px 15px;
  border:1px solid var(--hair);
  line-height:1.3;
  max-width:210px;
}
.ear-l{ justify-self:start; align-items:flex-start; text-align:left; }
.ear-r{ justify-self:end; align-items:flex-end; text-align:right; }
.ear-label{
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oxblood);
}
.ear-text{
  font-family:var(--display); font-style:italic; font-size:13.5px; color:var(--ink-soft);
}

/* ── Hero deck (sub-headline) ── */
.hero-deck{
  max-width:600px;
  margin:0 0 26px;
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(19px,2.3vw,27px);
  line-height:1.4;
  color:var(--ink-soft);
}

/* ── "By the Numbers" strip label ── */
.strip-label{
  margin:clamp(36px,6vh,64px) 0 0;
  font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
}
.strip-label + .hero-stats{ margin-top:13px; border-top:1px solid var(--rule); }

/* ── "Inside this Edition" — Oxford-ruled contents / secondary nav ── */
.whats-inside{
  position:relative;
  margin:clamp(34px,6vh,60px) 0 0;
  padding-top:13px;
}
.whats-inside::before{   /* Oxford rule — thick */
  content:""; position:absolute; left:0; right:0; top:0; height:2.5px; background:var(--ink);
}
.whats-inside::after{    /* Oxford rule — thin companion */
  content:""; position:absolute; left:0; right:0; top:5.5px; height:1px; background:var(--rule);
}
.wi-title{
  display:block; margin:9px 0 14px;
  font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
}
.wi-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0 clamp(24px,4vw,52px);
}
.wi-list a{
  display:flex; align-items:baseline; gap:11px;
  padding:11px 0;
  border-bottom:1px solid var(--hair);
  font-family:var(--display); font-size:19px; font-weight:600;
  color:var(--ink);
  transition:color .2s ease, padding-left .2s ease;
}
.wi-list li:nth-last-child(-n+1) a{ border-bottom:1px solid var(--hair); }
.wi-list a:hover{ color:var(--oxblood); padding-left:7px; }
.wi-list b{
  min-width:2.6ch; color:var(--oxblood); font-weight:700;
  font-size:13px; letter-spacing:.06em;
}

/* ── Department banner — running head / page folio on each section ── */
.dept-banner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:18px;
  margin-bottom:clamp(22px,3.4vh,32px);
  padding-top:13px;
}
.dept-banner .ox-rule{   /* the drawn Oxford rule (GSAP scales it in) */
  position:absolute; left:0; right:0; top:0;
  height:2.5px; background:var(--ink);
  transform-origin:left center;
}
.dept-banner .ox-rule::after{
  content:""; position:absolute; left:0; right:0; top:5px; height:1px; background:var(--rule);
}
.dept-slug{
  justify-self:start;
  font-size:12.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oxblood);
}
.dept-mark{
  justify-self:center;
  font-family:var(--display); font-style:italic; font-size:15px; color:var(--ink-faint);
}
.dept-page{
  justify-self:end;
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── Capabilities — boxed dispatch furniture ── */
.cap-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:13px; margin-bottom:16px;
  border-bottom:1px solid var(--hair);
}
.cap-slug{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oxblood);
}
.cap-no{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); font-variant-numeric:lining-nums;
}
.cap .filed{
  margin:0 0 9px;
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── Work — classified dispatch plate folio ── */
.work-plate{
  font-style:normal; font-weight:700; color:var(--oxblood);
  margin-right:.2em;
}

/* ── Arsenal — column rules between the three ledgers (3-col only) ── */
@media (min-width:901px){
  .stack-cat:not(:nth-child(3n+1)){
    border-left:1px solid var(--hair);
    padding-left:clamp(16px,2.4vw,32px);
  }
}

/* ── Credentials — register close ── */
.register-foot{
  margin:clamp(20px,3vh,30px) 0 0;
  padding-top:16px;
  border-top:1px solid var(--rule);
  text-align:right;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── Colophon / printer's masthead ── */
.colophon{
  display:flex; flex-direction:column; align-items:center; gap:15px;
  margin-top:clamp(48px,8vh,84px);
  padding-top:42px;
  border-top:3px double var(--rule);
  text-align:center;
}
.colophon .seal{ width:48px; height:48px; color:var(--gold); opacity:.92; }
.colophon-line{
  margin:0; max-width:62ch;
  font-size:12.5px; letter-spacing:.05em; line-height:1.75; color:var(--ink-faint);
}
.end-30{
  margin:2px 0 0;
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:21px; letter-spacing:.12em; color:var(--ink-soft);
}
.colophon + .foot-bot{ margin-top:30px; }

/* ── Responsive ── */
/* The nameplate is huge; flank it with ears only when there's genuine room.
   Below that, the ears stack as centred masthead notices under the nameplate. */
@media (max-width:1080px){
  .masthead-main{ grid-template-columns:1fr; gap:14px; margin-top:16px; }
  .masthead-center{ order:-1; }
  .ear{ max-width:440px; }
  .ear-l, .ear-r{ justify-self:center; align-items:center; text-align:center; }
}

@media (max-width:900px){
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .stack-grid{ grid-template-columns:repeat(2,1fr); }
  .wi-list{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  .lead{ grid-template-columns:1fr; gap:32px; }
  .lead-figure{ order:-1; max-width:380px; margin:0 auto; width:100%; }
}

@media (max-width:720px){
  body{ font-size:18px; }
  .nav-est{ display:none; }
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .masthead-folio{ flex-wrap:wrap; justify-content:center; gap:3px 10px; font-size:10px; letter-spacing:.14em; }
  .masthead-folio .orn{ display:none; }
  .ear{ max-width:none; }
  .ear-l, .ear-r{ justify-self:stretch; }
  .dateline{ gap:8px; font-size:10.5px; letter-spacing:.12em; }
  .dept-banner{ grid-template-columns:1fr auto; column-gap:14px; }
  .dept-mark{ display:none; }
  .wi-list{ grid-template-columns:1fr; }
  .article-body{ column-count:1; }
  .cap-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .stack-grid{ grid-template-columns:1fr; gap:32px; }
  .foot-cols{ grid-template-columns:1fr; gap:32px; }
  .certs li{ grid-template-columns:70px 1fr; gap:6px 18px; }
  .cert-org{ grid-column:2; text-align:left; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-title .line-inner{ transform:none; opacity:1; transition:none; }
  .hero-canvas, .scroll-progress{ display:none !important; }
  /* neutralize the scroll-driven layer so the page is fully static */
  .reveal, .section-head h2, .masthead, .lead-copy, .lead-figure{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
    clip-path:none !important;
    will-change:auto !important;
  }
  .hero{ perspective:none !important; }
  .press-intro{ display:none !important; }   /* never gate the page */
  .split .w-in{ transform:none !important; }
  .ticker-track{ animation:none !important; transform:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}