:root {
  --navy: #06142b;
  --blue: #0d57a1;
  --blue-light: #39a9e7;
  --red: #dd2e3f;
  --red-dark: #801525;
  --gold: #f6c545;
  --cream: #fff5d8;
  --ink: #050b15;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy); }
body { margin: 0; color: var(--cream); background: var(--navy); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 84px; padding: 14px clamp(20px, 5vw, 74px); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(3, 12, 28, .86), transparent); }
.wordmark { display: flex; align-items: baseline; gap: 7px; transform: skew(-7deg); font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: .03em; text-shadow: 3px 3px 0 var(--red-dark); }
.wordmark span { font-size: .75rem; color: var(--gold); letter-spacing: .12em; }
.wordmark strong { font-size: 1.7rem; }
nav { display: flex; gap: clamp(18px, 3vw, 42px); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
nav a { position: relative; padding: 10px 0; }
nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 3px; background: var(--gold); transition: right .25s ease; }
nav a:hover::after, nav a:focus-visible::after { right: 0; }

section { position: relative; min-height: 100vh; }
.hero { min-height: 760px; display: grid; align-items: center; isolation: isolate; overflow: hidden; }
.hero-image { position: absolute; top: 0; right: 0; bottom: 0; width: min(68vw, 920px); z-index: -3; background: #0a1b39 url('assets/original-super-phil.png') center 26% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 23%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 23%, #000 100%); }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4, 13, 31, .98) 0%, rgba(4, 13, 31, .82) 36%, rgba(4, 13, 31, .08) 73%), linear-gradient(0deg, rgba(3, 11, 25, .9), transparent 36%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .14; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); }
.hero-copy { width: min(640px, 88vw); margin-left: clamp(24px, 9vw, 150px); padding-top: 80px; }
.eyebrow { margin: 0 0 18px; color: var(--gold); font-size: .78rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow--red { color: var(--red); }
h1, h2 { margin: 0; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .84; }
h1 { font-size: clamp(5rem, 12vw, 11rem); transform: skew(-5deg); text-shadow: 7px 7px 0 var(--red-dark), 12px 12px 0 rgba(0,0,0,.4); }
h1 span { display: block; width: max-content; padding: .08em .14em .02em; margin-left: .03em; font-size: .34em; letter-spacing: .08em; color: var(--navy); background: var(--gold); text-shadow: none; transform: rotate(-3deg); }
.hero-line { margin: 25px 0 32px; font: 800 clamp(1.3rem, 2.1vw, 2rem)/1.12 'Arial Narrow', Arial, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.issue-stamp { position: absolute; right: clamp(20px, 4vw, 70px); bottom: 45px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 12px; transform: rotate(3deg); border: 2px solid rgba(255,255,255,.45); padding: 8px 12px; color: rgba(255,255,255,.78); }
.issue-stamp b { color: var(--gold); font-size: 1.35rem; }
.issue-stamp span { font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.scroll-cue { position: absolute; left: 50%; bottom: 30px; display: grid; gap: 7px; place-items: center; font-size: .58rem; font-weight: 900; letter-spacing: .18em; opacity: .65; }
.scroll-cue span { display: block; width: 1px; height: 30px; background: var(--cream); }

.phil-button { position: relative; display: inline-flex; min-width: 215px; min-height: 58px; align-items: center; justify-content: space-between; gap: 30px; border: 0; padding: 0 24px; color: var(--cream); cursor: pointer; text-transform: uppercase; font-weight: 950; font-size: .83rem; letter-spacing: .1em; clip-path: polygon(10px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 10px 100%, 0 50%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.16); transition: transform .18s ease, filter .18s ease; }
.phil-button::before { content: ''; position: absolute; inset: 5px; z-index: -1; border: 1px solid rgba(255,255,255,.3); clip-path: inherit; }
.phil-button:hover, .phil-button:focus-visible { transform: translateY(-4px) rotate(-1deg); filter: brightness(1.13); outline: none; }
.phil-button--gold { color: var(--navy); background: linear-gradient(135deg, #ffe17f, var(--gold) 58%, #c98718); }
.phil-button--red { background: linear-gradient(135deg, #f24657, var(--red) 58%, var(--red-dark)); }
.phil-button--blue { background: linear-gradient(135deg, #278cd4, var(--blue) 58%, #07336a); }
.phil-button i { font-style: normal; font-size: 1.1rem; }

.lore { min-height: 880px; display: grid; grid-template-columns: minmax(340px, 1.1fr) minmax(380px, .9fr); background: var(--cream); color: var(--navy); overflow: hidden; }
.lore-art { min-height: 760px; background: #264670 url('assets/story-bg.png') center / cover no-repeat; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.lore-panel { align-self: center; padding: 90px clamp(28px, 6vw, 100px) 90px clamp(36px, 4vw, 70px); }
.lore-panel h2, .code h2, .links h2 { font-size: clamp(3.5rem, 7vw, 7.5rem); }
.lore-panel h2 em { color: var(--red); font-style: normal; }
.lore-copy { max-width: 630px; margin: 38px 0; font-size: 1.06rem; line-height: 1.75; }
.lore-copy p:first-child::first-letter { float: left; margin: .09em .12em 0 0; color: var(--red); font: 5rem/.68 Impact, sans-serif; }
blockquote { margin: 42px 0 0; padding: 19px 0 19px 24px; border-left: 7px solid var(--gold); font: 900 1.25rem/1.35 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; }

.code { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(40px, 8vw, 130px); padding: 120px clamp(25px, 8vw, 130px); background: radial-gradient(circle at 15% 28%, #174f90 0, transparent 29%), linear-gradient(120deg, #06142b, #0b2c5a 68%, #07172f); overflow: hidden; }
.code::before { content: ''; position: absolute; inset: 0; opacity: .08; background: repeating-linear-gradient(-30deg, transparent 0 18px, #fff 19px 20px); }
.code-heading { position: relative; z-index: 1; }
.code h2 span, .links h2 span { color: var(--gold); }
.rules { position: relative; z-index: 1; display: grid; gap: 3px; }
.rule { display: grid; grid-template-columns: 70px 1fr; grid-template-areas: 'n h' 'n p'; align-items: center; padding: 28px 30px; background: rgba(255,255,255,.065); border-left: 5px solid var(--red); transform: skew(-2deg); backdrop-filter: blur(4px); }
.rule:nth-child(2) { margin-left: 24px; border-color: var(--gold); }
.rule:nth-child(3) { margin-left: 48px; border-color: var(--blue-light); }
.rule b { grid-area: n; align-self: stretch; display: grid; place-items: center; color: rgba(255,255,255,.27); font: 2.5rem Impact, sans-serif; border-right: 1px solid rgba(255,255,255,.14); }
.rule h3 { grid-area: h; margin: 0 0 4px 22px; font-size: 1.35rem; text-transform: uppercase; }
.rule p { grid-area: p; margin: 0 0 0 22px; color: #c8d9ea; }
.phil-seal { position: absolute; left: 44%; bottom: 4%; width: 135px; aspect-ratio: 1; display: grid; place-items: center; transform: rotate(-12deg); border: 4px double var(--gold); border-radius: 50%; color: var(--gold); opacity: .65; }
.phil-seal span { font: 4rem/.6 Impact, sans-serif; }
.phil-seal small { font-weight: 900; letter-spacing: .18em; }

.links { min-height: 820px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px 24px 30px; text-align: center; background: linear-gradient(180deg, #091a37, #030914 75%); overflow: hidden; }
.links-glow { position: absolute; width: 70vw; height: 70vw; top: -42vw; border-radius: 50%; background: radial-gradient(circle, rgba(221,46,63,.55), transparent 65%); }
.links h2 { position: relative; font-size: clamp(4rem, 9vw, 9rem); }
.links-intro { margin: 28px 0 38px; color: #b9c9da; font-size: 1.05rem; }
.action-stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.action-stack .phil-button { width: 250px; }
.copy-status { min-height: 24px; margin: 16px 0; color: var(--gold); font-weight: 800; letter-spacing: .05em; }
footer { width: min(1100px, 92vw); margin-top: auto; padding-top: 26px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.15); color: #8194aa; font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; text-align: left; }

@media (max-width: 820px) {
  .site-header { height: 68px; padding: 10px 18px; }
  nav { gap: 14px; font-size: .67rem; }
  nav a:nth-child(2) { display: none; }
  .hero { min-height: 720px; align-items: end; }
  .hero-image { top: 0; width: 100%; height: 72%; background-position: center 20%; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); }
  .hero-shade { background: linear-gradient(0deg, rgba(3,11,25,.98) 0%, rgba(3,11,25,.76) 48%, rgba(3,11,25,.1) 82%); }
  .hero-copy { margin: 0 22px 85px; padding-top: 260px; }
  .issue-stamp { display: none; }
  .scroll-cue { left: auto; right: 25px; }
  .lore { grid-template-columns: 1fr; }
  .lore-art { min-height: 58vh; clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%); }
  .lore-panel { padding: 50px 24px 75px; }
  .code { grid-template-columns: 1fr; padding: 95px 24px; }
  .rule:nth-child(2), .rule:nth-child(3) { margin-left: 0; }
  .phil-seal { display: none; }
  .links { padding-top: 90px; }
  .action-stack { flex-direction: column; }
  footer { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}