*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

.skip-link{
  position:absolute;top:-100%;left:1rem;
  background:#111;color:#fff;padding:0.5rem 1rem;
  font-size:1rem;text-decoration:none;z-index:999;transition:top 0.2s;
}
.skip-link:focus{top:1rem}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

:root{
  --bg-dark: #0c0e12;
  --bg:      #ffffff;
  --ink:     #111214;
  --mid:     #565a60;
  --dim:     #969a9f;
  --rule:    #e4e5e7;
  --accent:  #3d6b8e;
  --accent-pale: #edf2f7;
  --serif:   'EB Garamond', Georgia, serif;
  --sans:    'DM Sans', system-ui, sans-serif;
  --col:     720px;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:1rem;
  font-weight:400;line-height:1.75;
  overflow-x:hidden;
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 2.5rem;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.nav-logo{
  font-family:var(--sans);font-size:1rem;font-weight:500;
  letter-spacing:-0.01em;text-decoration:none;color:var(--ink);
}
.nav-back{
  font-family:var(--sans);font-size:1rem;font-weight:400;
  text-decoration:none;color:var(--mid);
  display:flex;align-items:center;gap:0.4rem;
  transition:color 0.2s;
}
.nav-back:hover{color:var(--accent)}
.nav-back:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ── HERO ── */
.case-hero{
  padding-top:64px;
  background:var(--bg-dark);
}
.hero-inner{
  max-width:var(--col);margin:0 auto;
  padding:5rem 2rem 4rem;
}
.hero-eyebrow{
  font-family:var(--sans);font-size:1rem;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(61,107,142,0.15);
  border:1px solid rgba(61,107,142,0.3);
  display:inline-block;
  padding:0.25rem 0.65rem;
  margin-bottom:2rem;
}
.case-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.5rem,5.5vw,4.5rem);
  line-height:1.05;letter-spacing:-0.02em;
  color:#fff;margin-bottom:1.75rem;
}
.case-hero h1 em{font-style:italic;color:rgba(255,255,255,0.65)}
.hero-summary{
  font-family:var(--serif);font-size:1.1rem;
  color:rgba(255,255,255,0.55);
  line-height:1.85;max-width:52ch;margin-bottom:3rem;
}
.hero-summary strong{color:#fff;font-weight:400}

/* meta strip */
.meta-strip{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:2rem;
}
.meta-item{
  padding-right:2.5rem;margin-right:2.5rem;
  border-right:1px solid rgba(255,255,255,0.1);
}
.meta-item:last-child{border-right:none}
.meta-label{
  font-family:var(--sans);font-size:1rem;font-weight:400;
  color:rgba(255,255,255,0.35);
  display:block;margin-bottom:0.25rem;
}
.meta-value{
  font-family:var(--serif);font-size:1rem;
  color:rgba(255,255,255,0.8);
}

/* ── STAT BAND ── */
.stat-band{
  max-width:var(--col);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--rule);
}
.stat{
  padding:2.5rem 2rem;
  border-right:1px solid var(--rule);
}
.stat:last-child{border-right:none}
.stat-n{
  font-family:var(--serif);font-weight:400;
  font-size:3.25rem;line-height:1;
  letter-spacing:-0.03em;
  color:var(--accent);
  display:block;margin-bottom:0.4rem;
}
.stat-d{
  font-family:var(--sans);font-size:1rem;font-weight:400;
  color:var(--mid);line-height:1.5;
}

/* ── STORY ── */
.story{
  max-width:var(--col);margin:0 auto;
  padding:0 2rem 7rem;
}
.story-section{padding-top:4.5rem}

.section-eyebrow{
  font-family:var(--sans);font-size:1rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:1rem;
}
.story-section h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.65rem,3vw,2.5rem);
  line-height:1.1;letter-spacing:-0.015em;
  margin-bottom:1.25rem;
}
.story-section h2 em{font-style:italic}
.story-section p{
  font-family:var(--serif);font-size:1.05rem;
  color:var(--mid);line-height:1.9;
  margin-bottom:1rem;max-width:60ch;
}
.story-section p:last-of-type{margin-bottom:0}
.story-section p strong{color:var(--ink);font-weight:400}

/* image blocks */
.img-full{
  margin:2.5rem -2rem;
  background:var(--accent-pale);
  aspect-ratio:16/8;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.img-full img{width:100%;height:100%;object-fit:cover}
.img-caption{
  font-family:var(--sans);font-size:1rem;
  color:var(--dim);margin-top:0.65rem;padding:0 0;
  font-style:italic;
}

/* two-up */
.two-up{
  margin:2.5rem -2rem;
  display:grid;grid-template-columns:1fr 1fr;
  gap:3px;background:var(--rule);
}
.two-up-panel{background:#fff}
.two-up-img{
  background:var(--accent-pale);
  aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
}
.two-up-body{padding:1rem 1.25rem 1.5rem}
.two-up-label{
  font-family:var(--sans);font-size:1rem;font-weight:500;
  color:var(--ink);display:block;margin-bottom:0.25rem;
}
.two-up-desc{
  font-family:var(--serif);font-size:1rem;
  color:var(--mid);line-height:1.6;
}

/* findings */
.finding{
  padding:1.75rem 0;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:2.5rem 1fr;
  gap:1.25rem;
  align-items:start;
}
.finding:last-of-type{border-bottom:1px solid var(--rule);margin-bottom:0.5rem}
.finding-n{
  font-family:var(--serif);font-size:1.5rem;font-style:italic;
  color:var(--accent);line-height:1;padding-top:0.15rem;
}
.finding-title{
  font-family:var(--sans);font-size:1rem;font-weight:500;
  color:var(--ink);margin-bottom:0.35rem;
}
.finding-body{
  font-family:var(--serif);font-size:1.05rem;
  color:var(--mid);line-height:1.8;
}
.finding-body strong{color:var(--ink);font-weight:400}

/* pull quote */
.pull{
  margin:3rem 0;
  padding:2rem 0 2rem 1.75rem;
  border-left:2px solid var(--accent);
}
.pull blockquote{
  font-family:var(--serif);font-style:italic;
  font-size:1.65rem;line-height:1.45;
  color:var(--ink);max-width:38ch;
}
.pull cite{
  display:block;
  font-family:var(--sans);font-style:normal;
  font-size:1rem;color:var(--dim);
  margin-top:0.75rem;
}

/* tags */
.tags{
  display:flex;flex-wrap:wrap;gap:0.4rem;
  padding-top:3rem;margin-top:3rem;
  border-top:1px solid var(--rule);
}
.tag{
  font-family:var(--sans);font-size:1rem;
  color:var(--mid);
  border:1px solid var(--rule);
  padding:0.25rem 0.75rem;
  border-radius:1px;
}

/* ── NEXT ── */
.next{
  background:var(--bg-dark);
  padding:5rem 2rem;
}
.next-inner{
  max-width:var(--col);margin:0 auto;
  display:flex;align-items:center;
  justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.next-label{
  font-family:var(--sans);font-size:1rem;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:0.75rem;
}
.next h3{
  font-family:var(--serif);font-weight:400;
  font-size:1.75rem;line-height:1.25;color:#fff;
  letter-spacing:-0.01em;
}
.next-btn{
  flex-shrink:0;
  font-family:var(--sans);font-size:1rem;font-weight:500;
  text-decoration:none;color:#fff;
  background:var(--accent);
  padding:0.8rem 1.75rem;
  border-radius:2px;
  white-space:nowrap;
  transition:background 0.2s;
}
.next-btn:hover{background:#2f5570}
.next-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── FOOTER ── */
footer{
  background:var(--bg-dark);
  border-top:1px solid rgba(255,255,255,0.07);
  padding:1.5rem 2.5rem;
  display:flex;justify-content:space-between;align-items:center;
}
footer span{
  font-family:var(--sans);font-size:1rem;
  color:rgba(255,255,255,0.2);
}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 0.65s ease,transform 0.65s ease}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:0.08s}.d2{transition-delay:0.16s}

/* ── RESPONSIVE ── */
@media(max-width:680px){
  nav{padding:1rem 1.25rem}
  .hero-inner,.story{padding-left:1.25rem;padding-right:1.25rem}
  .meta-strip{gap:1.5rem}
  .meta-item{border-right:none;padding-right:0;margin-right:0}
  .stat-band{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--rule);padding:2rem 1.25rem}
  .stat:last-child{border-bottom:none}
  .img-full,.two-up{margin-left:-1.25rem;margin-right:-1.25rem}
  .two-up{grid-template-columns:1fr}
  .finding{grid-template-columns:2rem 1fr;gap:1rem}
  .next{padding:3.5rem 1.25rem}
  .next-inner{flex-direction:column;align-items:flex-start}
  footer{flex-direction:column;gap:0.5rem;text-align:center;padding:1.25rem}
}