:root {
  --ink: #111217;
  --navy: #151a2a;
  --navy-2: #20283b;
  --red: #c7202f;
  --paper: #eee5d5;
  --paper-2: #d5c3a6;
  --sun: #f0ac58;
  --white: #f8f3ea;
  --muted: #b9b3aa;
  --line: rgba(255,255,255,.16);
  --mx: 0px;
  --my: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 1100px;
  overflow-x: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 85% 4%, rgba(240,172,88,.13), transparent 28%),
    var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--red); color: white; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.grain {
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .055; mix-blend-mode: soft-light;
  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='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; z-index: 2; width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(243,169,84,.11), rgba(243,169,84,0) 68%);
  transform: translate(-50%, -50%); left: 50%; top: 50%;
}

.topbar {
  position: fixed; z-index: 90; top: 20px; left: 50%; transform: translateX(-50%);
  width: min(1540px, calc(100vw - 72px)); height: 62px; padding: 0 18px 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(17,18,23,.72); border: 1px solid rgba(255,255,255,.13); border-radius: 16px;
  box-shadow: 0 14px 44px rgba(0,0,0,.28); backdrop-filter: blur(18px);
}
.brand { display:flex; align-items:center; gap:11px; font-size: 15px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; }
.brand-dot { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(199,32,47,.15); }
.brand-ticker { color: var(--paper-2); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a { padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #d7d2ca; transition: .22s ease; }
.nav-links a:hover { background: rgba(255,255,255,.09); color: white; transform: translateY(-1px); }

.hero {
  min-height: 1080px; height: 100vh; position: relative; overflow: hidden; display: grid; align-items: center;
  background: #151319;
}
.hero-scene {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../assets/images/background/washington-sunset.png');
  background-repeat: no-repeat; background-size: 100% auto; background-position: center 51%;
  transform: scale(1.045) translate(calc(var(--mx) * -.012), calc(var(--my) * -.012));
  transition: transform .18s ease-out;
}
.hero-scene::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(12,13,18,.12) 0%, rgba(12,13,18,.08) 44%, rgba(12,13,18,.5) 70%, rgba(12,13,18,.78) 100%); }
.hero-vignette { position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(10,10,14,.66) 0%, transparent 18%, transparent 72%, rgba(10,10,14,.96) 100%), radial-gradient(circle at 65% 48%, transparent 10%, rgba(9,10,14,.08) 48%, rgba(9,10,14,.62) 100%); }
.hero-content { position: relative; z-index: 4; width: min(1540px, calc(100vw - 120px)); margin: 0 auto; padding-left: 57%; padding-top: 90px; }
.hero-kicker, .eyebrow { display:inline-flex; align-items:center; gap:10px; font-size: 12px; font-weight: 900; letter-spacing: .19em; text-transform:uppercase; color:#29251f; background: var(--paper); padding: 9px 12px; transform: rotate(-1deg); box-shadow: 3px 4px 0 rgba(0,0,0,.22); }
.hero-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--red); }
.hero-title { margin: 22px 0 3px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: clamp(92px, 7.2vw, 150px); line-height:.82; letter-spacing:-.035em; text-transform:uppercase; text-shadow:0 7px 0 rgba(0,0,0,.22), 0 20px 60px rgba(0,0,0,.3); }
.hero-row { display:flex; align-items:center; gap:20px; margin-top:20px; }
.hero-ticker { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 42px; line-height:1; color:#fff; letter-spacing:.015em; }
.signal { display:flex; gap:3px; align-items:flex-end; height:23px; }
.signal i { display:block; width:5px; background:var(--red); border-radius:4px; animation:signal 1.5s infinite ease-in-out; }
.signal i:nth-child(1){height:7px}.signal i:nth-child(2){height:11px;animation-delay:.1s}.signal i:nth-child(3){height:16px;animation-delay:.2s}.signal i:nth-child(4){height:22px;animation-delay:.3s}
.online { font-size: 13px; font-weight: 700; letter-spacing:.04em; color:#e8e0d7; }
.online b { display:inline-block; width:8px; height:8px; border-radius:50%; background:#76d26f; margin-right:7px; box-shadow:0 0 0 4px rgba(118,210,111,.12); }
.hero-copy { max-width: 560px; margin: 20px 0 28px; color:#d9d4cc; font-size: 21px; line-height:1.45; font-family: Georgia, 'Times New Roman', serif; font-style:italic; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { min-height:52px; padding:0 21px; display:inline-flex; align-items:center; justify-content:center; gap:14px; border:1px solid transparent; border-radius:12px; font-size:12px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn span { font-size:17px; transition:transform .18s ease; }
.btn:hover { transform: translateY(-3px) rotate(-.5deg); }
.btn:hover span { transform: translate(3px,-3px); }
.btn:active { transform:translateY(1px) scale(.985); }
.btn-primary { background:var(--red); color:white; box-shadow:0 9px 0 #841622, 0 20px 34px rgba(0,0,0,.22); }
.btn-primary:hover { box-shadow:0 12px 0 #841622,0 24px 38px rgba(0,0,0,.28); }
.btn-paper { background:var(--paper); color:#1b1b1c; border-color:#fff; box-shadow:0 9px 0 #aa9d89,0 20px 34px rgba(0,0,0,.2); }

.ca-box { margin-top:24px; width:min(570px,100%); min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 12px 12px 17px; background:rgba(12,13,18,.66); border:1px solid rgba(255,255,255,.18); border-radius:14px; backdrop-filter:blur(14px); }
.ca-box > div { min-width:0; }
.ca-label { display:block; margin-bottom:5px; color:#a8a49d; font-size:9px; letter-spacing:.19em; font-weight:900; }
.ca-box code { display:block; max-width:395px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 13px/1.2 Consolas, monospace; color:#fff; }
.copy-btn { flex:0 0 auto; border:0; border-radius:9px; padding:14px 14px; color:#111; background:#f0ac58; font-size:11px; font-weight:900; letter-spacing:.09em; cursor:pointer; transition:.2s; }
.copy-btn:hover { transform:translateY(-2px); background:#ffc271; }
.copy-btn:active { transform:translateY(1px) scale(.98); }

.phone-ping { position:absolute; z-index:6; left:47.7%; top:40.2%; width:76px; height:76px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(17,18,23,.82); color:#fff; cursor:pointer; box-shadow:0 14px 40px rgba(0,0,0,.28); backdrop-filter:blur(10px); transition:.22s; }
.phone-ping:hover { transform:scale(1.08) rotate(2deg); background:var(--red); }
.phone-icon { font-size:21px; }
.ping-label { position:absolute; white-space:nowrap; left:62px; top:18px; background:var(--red); color:#fff; font-size:10px; font-weight:900; padding:8px 10px; border-radius:8px; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-3deg); }
.ping-ring { position:absolute; inset:-1px; border-radius:50%; border:2px solid rgba(255,255,255,.65); animation:ring 2s infinite; }
.scroll-note { position:absolute; z-index:5; right:46px; bottom:34px; writing-mode:vertical-rl; font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:#b5aea6; display:flex; align-items:center; gap:11px; }
.scroll-note span { color:var(--sun); font-size:18px; }

.marquee { height:72px; overflow:hidden; background:var(--red); color:#fff; display:flex; align-items:center; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(0,0,0,.3); }
.marquee-track { display:flex; align-items:center; gap:27px; min-width:max-content; animation:marquee 23s linear infinite; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size:34px; letter-spacing:.025em; }
.marquee b { font-size:18px; opacity:.6; }

.status-section { min-height:980px; position:relative; padding:130px max(7vw,80px); display:grid; grid-template-columns:.9fr 1.15fr .75fr; gap:42px; align-items:center; overflow:hidden; background:radial-gradient(circle at 50% 45%, #31384a 0%, #181c29 37%, #101219 72%); }
.status-section::before { content:""; position:absolute; inset:0; opacity:.14; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.17) 50%,transparent 50.2%), linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.1) 50%,transparent 50.2%); background-size:95px 95px; mask-image:linear-gradient(to bottom, transparent, black 25%, black 75%, transparent); }
.status-copy { position:relative; z-index:2; align-self:center; }
.eyebrow { background:#d8ccb9; color:#25221e; box-shadow:none; }
.eyebrow.light { background:rgba(238,229,213,.9); }
.status-copy h2, .lore-copy h2, .feed-heading h2, .hotline h2 { margin:25px 0 18px; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-weight:500; text-transform:uppercase; line-height:.9; letter-spacing:-.025em; }
.status-copy h2 { font-size:clamp(68px,5vw,100px); }
.status-copy p { max-width:480px; color:#c3c7d0; font:italic 19px/1.55 Georgia, serif; }
.micro-list { margin-top:34px; display:grid; gap:13px; font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:800; color:#8f96a8; }
.micro-list span { display:flex; align-items:center; gap:10px; }
.micro-list i { width:8px; height:8px; background:var(--red); border-radius:50%; }
.character-stage { position:relative; height:780px; align-self:end; display:flex; justify-content:center; align-items:flex-end; }
.character-stage img { position:relative; z-index:3; width:min(760px,46vw); max-height:790px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 32px 34px rgba(0,0,0,.48)); transform:translate(calc(var(--mx) * .007), calc(var(--my) * .006)); transition:transform .16s ease-out; user-select:none; }
.poster-word { position:absolute; top:105px; left:50%; transform:translateX(-50%); z-index:1; font-family:Impact,sans-serif; font-size:230px; line-height:.72; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.08); letter-spacing:.02em; }
.shadow-disc { position:absolute; z-index:2; width:80%; height:105px; bottom:16px; border-radius:50%; background:rgba(0,0,0,.45); filter:blur(18px); }
.phone-card { position:relative; z-index:4; width:330px; height:650px; padding:15px; border:8px solid #0d0e12; border-radius:45px; background:#0e1015; box-shadow:0 45px 80px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.08); transform:rotate(4deg); transition:transform .16s ease-out; overflow:hidden; }
.phone-notch { position:absolute; z-index:5; top:14px; left:50%; width:112px; height:26px; transform:translateX(-50%); border-radius:18px; background:#0b0c0f; }
.phone-status { position:absolute; z-index:4; top:17px; left:28px; right:27px; display:flex; justify-content:space-between; font-size:10px; font-weight:800; }
.phone-card img { width:100%; height:59%; object-fit:cover; border-radius:30px 30px 18px 18px; filter:saturate(.86) contrast(1.03); }
.phone-card::after { content:""; position:absolute; inset:15px; border-radius:29px; background:linear-gradient(180deg,transparent 25%,rgba(9,10,14,.08) 45%,#0d0e12 63%); pointer-events:none; }
.caller-line,.caller-name,.phone-buttons { position:relative; z-index:5; }
.caller-line { margin-top:-2px; text-align:center; color:#8d919d; font-size:9px; letter-spacing:.18em; text-transform:uppercase; font-weight:900; }
.caller-name { margin-top:9px; text-align:center; color:#fff; font:700 20px/1.2 Georgia,serif; }
.phone-buttons { display:flex; justify-content:center; gap:34px; margin-top:28px; }
.phone-buttons button { width:72px; height:72px; border-radius:50%; border:0; color:#fff; cursor:pointer; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; transition:.18s; }
.phone-buttons button:hover { transform:scale(1.08) rotate(-3deg); }
.decline { background:#d63443; }.accept { background:#3ea65d; }

.lore-section { min-height:1050px; padding:120px max(7vw,80px); background:var(--paper); color:#171719; position:relative; overflow:hidden; }
.lore-section::after { content:"$TONE"; position:absolute; right:-70px; bottom:-85px; font:320px/.8 Impact,sans-serif; color:rgba(23,23,25,.045); transform:rotate(-5deg); }
.lore-grid { width:min(1540px,100%); margin:0 auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:80px; align-items:center; }
.lore-copy { position:relative; z-index:2; }
.lore-copy h2 { font-size:clamp(74px,5.5vw,112px); color:#15161a; }
.lore-copy > p { max-width:600px; font:19px/1.58 Georgia,serif; color:#514a42; }
.rule-card { margin-top:42px; width:min(540px,100%); padding:18px 20px 20px; border:2px solid #18191c; box-shadow:8px 8px 0 var(--red); transform:rotate(-1deg); background:#f5edde; }
.rule-card span { display:block; font-size:10px; letter-spacing:.18em; font-weight:900; color:var(--red); }
.rule-card strong { display:block; margin-top:7px; font:700 21px/1.2 Georgia,serif; }
.lore-visual { min-height:740px; position:relative; }
.photo { position:absolute; margin:0; background:#f7f0e4; padding:13px 13px 46px; box-shadow:0 28px 60px rgba(55,39,25,.18); }
.photo img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.82) contrast(1.06); }
.photo figcaption { position:absolute; bottom:15px; left:18px; font-size:9px; font-weight:900; letter-spacing:.12em; color:#403a34; }
.photo-eagle { width:360px; height:485px; top:46px; left:8%; transform:rotate(-7deg); z-index:2; }
.photo-capitol { width:430px; height:560px; right:1%; bottom:18px; transform:rotate(6deg); z-index:1; }
.stamp { position:absolute; z-index:5; left:38%; bottom:56px; width:200px; height:200px; display:grid; place-items:center; text-align:center; border:5px double var(--red); color:var(--red); border-radius:50%; font:36px/.85 Impact,sans-serif; transform:rotate(-12deg); mix-blend-mode:multiply; opacity:.87; }

.feed-section { min-height:880px; padding:130px max(7vw,80px); display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:center; background:linear-gradient(135deg,#111318,#1d2230 65%,#32171c); }
.feed-heading h2 { font-size:clamp(72px,5.3vw,108px); }
.messages { width:min(720px,100%); display:grid; gap:18px; }
.msg { max-width:73%; padding:16px 18px 14px; border-radius:18px 18px 18px 5px; background:#2c303a; box-shadow:0 14px 30px rgba(0,0,0,.14); }
.msg.right { justify-self:end; border-radius:18px 18px 5px 18px; background:#b32936; }
.msg span { display:block; margin-bottom:7px; font-size:9px; font-weight:900; letter-spacing:.15em; color:#b8bdc8; }
.msg.right span { color:#ffdfe2; }
.msg p { margin:0; font:18px/1.35 Georgia,serif; }
.msg time { display:block; margin-top:9px; font-size:9px; color:#8e94a0; }
.msg.right time { color:#f5b7bd; text-align:right; }
.msg.special { animation:softpulse 3s infinite; }

.hotline { min-height:980px; position:relative; display:grid; place-items:center; overflow:hidden; background:#0d0e12; }
.hotline-bg { position:absolute; inset:-5%; background:url('../assets/images/background/washington-sunset.png') center/cover no-repeat; filter:blur(12px) brightness(.28) saturate(.8); transform:scale(1.08); }
.hotline::before { content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(circle at 70% 40%,rgba(240,172,88,.22),transparent 24%),linear-gradient(180deg,rgba(13,14,18,.25),rgba(13,14,18,.88)); }
.hotline-panel { position:relative; z-index:3; width:min(770px,70vw); padding:66px 70px; text-align:center; background:rgba(18,20,28,.76); border:1px solid rgba(255,255,255,.16); border-radius:26px; box-shadow:0 40px 120px rgba(0,0,0,.45); backdrop-filter:blur(20px); }
.hotline-panel .eyebrow { transform:rotate(-1deg); }
.hotline h2 { font-size:clamp(90px,7vw,138px); margin-bottom:9px; }
.hotline p { margin:0 0 30px; color:#bfc2ca; font:italic 19px/1.4 Georgia,serif; }
.hotline-buttons { display:flex; justify-content:center; gap:12px; }
.final-ca { margin-top:28px; min-height:64px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:9px 10px 9px 15px; border:1px solid rgba(255,255,255,.15); border-radius:13px; background:rgba(0,0,0,.26); }
.final-ca > span { font-size:10px; font-weight:900; color:var(--sun); letter-spacing:.16em; }
.final-ca code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font:700 12px Consolas,monospace; color:#e8e6e2; }
.final-ca button { padding:12px 14px; border:0; border-radius:8px; background:var(--paper); color:#111; cursor:pointer; font-size:10px; font-weight:900; }
.giant-ticker { position:absolute; z-index:2; right:-40px; bottom:-32px; font:250px/.8 Impact,sans-serif; color:rgba(255,255,255,.045); transform:rotate(-4deg); }

footer { height:88px; padding:0 max(7vw,80px); display:flex; align-items:center; gap:10px; background:#090a0d; border-top:1px solid rgba(255,255,255,.07); font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:900; color:#777d89; }
.footer-state { margin-left:auto; display:flex; align-items:center; gap:8px; }.footer-state i { width:7px;height:7px;border-radius:50%;background:#67c96c; }

.toast { position:fixed; z-index:110; left:50%; bottom:35px; transform:translate(-50%,30px); opacity:0; pointer-events:none; padding:13px 17px; border-radius:10px; background:#f0ac58; color:#161618; font-size:11px; font-weight:900; letter-spacing:.1em; box-shadow:0 16px 50px rgba(0,0,0,.3); transition:.28s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.message-pop { position:fixed; z-index:120; left:50%; top:50%; width:350px; transform:translate(-50%,-46%) scale(.92); opacity:0; pointer-events:none; padding:27px; border-radius:18px; background:#ece4d6; color:#14151a; box-shadow:0 40px 100px rgba(0,0,0,.55); transition:.25s ease; border:1px solid rgba(0,0,0,.1); }
.message-pop.show { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.message-pop button { position:absolute; right:12px; top:9px; border:0; background:transparent; font-size:25px; cursor:pointer; }
.message-pop span { display:block; color:var(--red); font-size:9px; font-weight:900; letter-spacing:.16em; }
.message-pop strong { display:block; margin-top:12px; font:700 37px/1 Georgia,serif; }
.message-pop small { display:block; margin-top:14px; color:#716a61; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }

@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes signal { 0%,100%{opacity:.35;transform:scaleY(.75)}50%{opacity:1;transform:scaleY(1)} }
@keyframes ring { 0%{transform:scale(.85);opacity:.8} 70%,100%{transform:scale(1.5);opacity:0} }
@keyframes softpulse { 0%,100%{box-shadow:0 14px 30px rgba(0,0,0,.14)}50%{box-shadow:0 18px 44px rgba(199,32,47,.28)} }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}