:root { --blue:#087ee8; --sky:#38a8ff; --ink:#090b0f; --gold:#ffb20f; --paper:#f4f3ec; --white:#fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:"Courier New",monospace; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.site-header { position:absolute; z-index:10; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:22px 4vw; border-bottom:2px solid rgba(255,255,255,.65); }
.brand { display:flex; align-items:center; gap:12px; font-family:"Arial Black",Impact,sans-serif; letter-spacing:.04em; }
.brand img { width:48px; height:48px; object-fit:cover; border:3px solid var(--ink); border-radius:50%; box-shadow:3px 3px 0 var(--gold); }
nav { display:flex; gap:30px; font-weight:700; font-size:.85rem; }
nav a { border-bottom:2px solid transparent; }
nav a:hover,nav a:focus-visible { border-color:var(--gold); }
.hero { --mx:0px; --my:0px; position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--blue); }
.hero-art { position:absolute; inset:-14px; width:calc(100% + 28px); height:calc(100% + 28px); object-fit:cover; transform:translate(var(--mx),var(--my)) scale(1.025); transition:transform .2s ease-out; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,20,42,.82) 0%,rgba(2,20,42,.42) 35%,rgba(2,20,42,0) 68%),linear-gradient(0deg,rgba(0,0,0,.34),transparent 45%); }
.hero-copy { position:relative; z-index:2; width:min(650px,92vw); margin:90px 0 50px 5vw; }
.eyebrow,.section-kicker { display:inline-block; padding:7px 11px; color:var(--ink); background:var(--gold); font-weight:700; font-size:.78rem; transform:rotate(-1deg); box-shadow:4px 4px 0 var(--ink); }
h1,h2 { margin:0; font-family:Impact,"Arial Black",sans-serif; font-weight:400; text-transform:uppercase; line-height:.82; letter-spacing:-.02em; }
h1 { margin-top:22px; font-size:clamp(7rem,16vw,14rem); color:var(--white); text-shadow:6px 7px 0 var(--ink),10px 12px 0 rgba(255,178,15,.9); transform:rotate(-2deg); }
h1 span { color:var(--gold); }
.ticker { margin:25px 0 26px; font-family:"Arial Black",Impact,sans-serif; font-size:clamp(1.4rem,3vw,2.5rem); letter-spacing:.12em; }
.actions { display:flex; gap:15px; flex-wrap:wrap; }
.drawn-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:15px; min-width:180px; padding:16px 22px; color:var(--ink); background:var(--paper); border:4px solid var(--ink); font-family:"Arial Black",Impact,sans-serif; box-shadow:7px 7px 0 var(--gold); transform:rotate(-1deg); transition:.18s ease; }
.drawn-btn:nth-child(2) { min-width:90px; color:var(--paper); background:var(--ink); border-color:var(--paper); transform:rotate(1.4deg); }
.drawn-btn:hover,.drawn-btn:focus-visible { transform:translate(-2px,-3px) rotate(0); box-shadow:11px 11px 0 var(--gold); }
.scroll-mark { position:absolute; right:3vw; bottom:32px; z-index:2; writing-mode:vertical-rl; font-size:.7rem; letter-spacing:.16em; }
.mission { position:relative; min-height:820px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7vw; padding:110px 8vw; background:var(--gold); color:var(--ink); overflow:hidden; }
.mission::before { content:"JEAN"; position:absolute; left:-3vw; bottom:-10vw; font-family:Impact,"Arial Black",sans-serif; font-size:40vw; line-height:1; color:rgba(255,255,255,.17); }
.mission-copy,.portrait-card { position:relative; z-index:1; }
.mission .section-kicker { color:var(--paper); background:var(--ink); box-shadow:4px 4px 0 var(--paper); }
.mission h2 { margin:28px 0; font-size:clamp(4rem,9vw,8rem); text-shadow:5px 5px 0 var(--paper); }
.mission-copy>p:last-child { max-width:590px; font-size:1.1rem; line-height:1.7; font-weight:700; }
.portrait-card { max-width:590px; justify-self:end; transform:rotate(2deg); border:6px solid var(--ink); background:var(--ink); box-shadow:16px 16px 0 var(--paper); }
.portrait-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.stamp { position:absolute; right:-28px; bottom:-28px; width:112px; height:112px; display:grid; place-items:center; color:var(--paper); background:var(--blue); border:4px solid var(--ink); border-radius:50%; font-family:"Arial Black",Impact,sans-serif; text-align:center; transform:rotate(-12deg); }
.orbit { position:absolute; width:550px; height:550px; right:-180px; top:-200px; border:3px dashed var(--ink); border-radius:50%; animation:spin 22s linear infinite; }
.signal { padding:120px 6vw; color:var(--paper); background:radial-gradient(circle at 75% 20%,#0e72d0 0,transparent 35%),#07101a; text-align:center; }
.signal-inner { max-width:1050px; margin:auto; }
.signal h2 { margin:26px 0 48px; font-size:clamp(4rem,10vw,8.5rem); color:var(--gold); text-shadow:5px 5px 0 var(--blue); }
.ca-box { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:24px; color:var(--paper); background:rgba(255,255,255,.07); border:3px solid var(--paper); box-shadow:9px 9px 0 var(--blue); cursor:pointer; font:inherit; transition:.2s; }
.ca-box:hover,.ca-box:focus-visible,.ca-box.copied { color:var(--ink); background:var(--gold); box-shadow:12px 12px 0 var(--blue); }
.ca-label,.copy-state { font-family:"Arial Black",Impact,sans-serif; }
.ca-label { color:var(--gold); }
.ca-box:hover .ca-label,.ca-box.copied .ca-label { color:var(--ink); }
.ca-box code { overflow:hidden; text-overflow:ellipsis; font:700 1rem "Courier New",monospace; white-space:nowrap; }
.microcopy { margin-top:28px; font-size:.78rem; opacity:.72; }
footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px 5vw; border-top:2px solid #2c3b4a; font-size:.75rem; }
.footer-mark { display:inline-grid; place-items:center; width:38px; height:38px; margin-right:9px; color:var(--ink); background:var(--gold); border-radius:50%; font-family:"Arial Black",Impact,sans-serif; }
.footer-links { display:flex; gap:24px; font-weight:700; }
.footer-links a:hover { color:var(--gold); }
.reveal { opacity:0; transform:translateY(35px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.orbit{animation:none}.reveal{opacity:1;transform:none;transition:none}.hero-art{transform:none;transition:none} }
@media (max-width:760px) {
  .site-header { padding:14px 18px; }
  .brand span,nav { display:none; }
  .brand img { width:42px;height:42px; }
  .hero { min-height:840px; align-items:flex-end; }
  .hero-art { object-position:67% center; }
  .hero-shade { background:linear-gradient(0deg,rgba(2,12,23,.94) 4%,rgba(2,12,23,.3) 72%,rgba(2,12,23,.15)); }
  .hero-copy { margin:0 20px 72px; }
  h1 { font-size:clamp(6.1rem,31vw,9rem); text-shadow:4px 5px 0 var(--ink),7px 8px 0 rgba(255,178,15,.9); }
  .scroll-mark { display:none; }
  .mission { min-height:auto; grid-template-columns:1fr; padding:90px 22px 105px; }
  .mission h2 { font-size:clamp(4.4rem,21vw,7rem); }
  .portrait-card { justify-self:center; }
  .signal { padding:90px 20px; }
  .ca-box { grid-template-columns:auto 1fr; text-align:left; }
  .copy-state { grid-column:1/-1; text-align:center; padding-top:12px; border-top:1px solid currentColor; }
  footer { flex-direction:column; text-align:center; }
}