:root{--navy:oklch(0.2 0.045 262);--ivory:oklch(0.96 0.018 85);--vermilion:oklch(0.6 0.2 32);
--font-display:"Archivo Black","Arial Black",sans-serif;--font-sans:"Archivo",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--navy);color:var(--ivory);-webkit-font-smoothing:antialiased}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.page{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow:hidden}
.layer{position:absolute;inset:0}
.hero-photo{z-index:-3;width:100%;height:100%;object-fit:cover}
.hero-overlay{z-index:-2}.grain{z-index:-1}
.wrap{width:100%;max-width:80rem;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.5rem}
.top .dossier-meta{display:none}
.main{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:4rem;padding-bottom:4rem}
.labels{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:2rem}
.headline{max-width:64rem}
.accent{color:var(--vermilion)}
.brief{display:grid;gap:2rem;max-width:56rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid color-mix(in oklab,var(--ivory) 25%,transparent)}
.brief .dossier-meta{padding-top:.25rem}
.body{font-size:1.125rem;line-height:1.65;color:color-mix(in oklab,var(--ivory) 85%,transparent)}
.body strong{display:block;margin-top:1rem;font-weight:500;color:var(--ivory)}
.foot{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1.5rem;font-size:.75rem;color:color-mix(in oklab,var(--ivory) 60%,transparent)}
.foot-row{display:flex;flex-direction:column;gap:.5rem}
.follow{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.social-link{display:inline-flex;color:color-mix(in oklab,var(--ivory) 70%,transparent)}
.social-link svg{width:18px;height:18px;fill:currentColor}
.social-link:hover{color:var(--vermilion)}
@media(min-width:640px){.wrap{padding-left:2.5rem;padding-right:2.5rem}.top{padding-top:2.5rem}.top .dossier-meta{display:block}
.main{padding-top:6rem;padding-bottom:6rem}.brief{grid-template-columns:auto 1fr;gap:3rem}.body{font-size:1.25rem}
.foot-row{flex-direction:row;justify-content:space-between;align-items:flex-end}.foot{padding-bottom:2rem}}
/* reveal is gated by JS so content stays visible without it */
.js .reveal{opacity:0}
.js.ready .reveal{animation:reveal .9s cubic-bezier(.2,.7,.2,1) both}
body { font-family: var(--font-sans); }

.hero-photo { filter: grayscale(0.55) contrast(1.05); }
.hero-overlay {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--navy) 94%, transparent) 0%, color-mix(in oklab, var(--navy) 80%, transparent) 55%, color-mix(in oklab, var(--navy) 55%, transparent) 100%),
    linear-gradient(0deg, color-mix(in oklab, var(--navy) 90%, transparent) 0%, transparent 40%);
}
.grain {
  opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.headline { font-weight: 400;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 7.5rem);
  line-height: .92; letter-spacing: -0.035em; text-wrap: balance;
}
.dossier-meta {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in oklab, var(--ivory) 65%, transparent);
}
.stamp {
  font-family: var(--font-mono); font-weight: 600; font-size: .78rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--vermilion);
  border: 2px solid var(--vermilion); padding: .45rem .8rem .4rem;
  transform: rotate(-2deg); display: inline-block;
}
.wordmark { font-weight: 400; display: flex; flex-direction: column; line-height: .9; font-family: var(--font-display); text-transform: uppercase; }
.wordmark-top { font-size: 1.6rem; letter-spacing: -0.02em; }
.wordmark-bottom { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .28em; margin-top: .35rem; display: flex; gap: .5em; align-items: center; }
.redacted { background: var(--vermilion); color: var(--ivory); padding: .1em .35em; }
.attr-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--ivory) 40%, transparent); }
.attr-link:hover { color: var(--ivory); text-decoration-color: var(--vermilion); }
.mail-link { font-family: var(--font-mono); font-size: .95em; letter-spacing: .02em; color: var(--ivory); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--vermilion); text-decoration-thickness: 2px; word-break: break-word; }
.mail-link:hover { color: var(--vermilion); }

@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal-1 { animation-delay: .15s; } .reveal-2 { animation-delay: .3s; }
.reveal-3 { animation-delay: .5s; } .reveal-4 { animation-delay: .7s; }
@media (prefers-reduced-motion: reduce){.js .reveal,.js.ready .reveal{opacity:1;animation:none}}