@font-face { font-family: "Patrick Hand"; src: url("assets/patrick-hand.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("assets/permanent-marker.ttf") format("truetype"); font-display: swap; }

:root { --paper:#fff; --ink:#090909; --muted:#57534e; --page:min(1380px,calc(100vw - 48px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:#fff; font-family:"Patrick Hand","Comic Sans MS",cursive; font-size:19px; }
body::before { content:""; position:fixed; inset:0; z-index:30; pointer-events:none; 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='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { color:inherit; font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }

.site-header { width:var(--page); min-height:92px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:20; }
.site-header::after,.briefing::before,.manifesto::before,.manifesto::after,.final-cta::before,footer::before { content:""; position:absolute; left:0; right:0; height:8px; background:url("data:image/svg+xml,%3Csvg width='900' height='10' viewBox='0 0 900 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6 Q170 1 330 6 T898 4' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100%; }
.site-header::after { bottom:0; }
.brand { display:inline-flex; align-items:center; gap:13px; font-family:"Permanent Marker",cursive; font-size:1.1rem; transform:rotate(-1deg); }
.brand-mark { width:48px; height:46px; display:grid; place-items:center; border:3px solid var(--ink); border-radius:46% 54% 51% 49%/54% 46% 55% 45%; background:#fff; font-size:1.5rem; transform:rotate(-5deg); box-shadow:2px 1px 0 var(--ink); }
nav { display:flex; align-items:center; gap:31px; font-family:"Permanent Marker",cursive; font-size:.78rem; }
nav a { position:relative; transform:rotate(-1deg); }
nav a:nth-child(2) { transform:rotate(1deg); }
nav a::after { content:""; position:absolute; left:-3px; right:-3px; bottom:-7px; height:7px; opacity:0; background:url("data:image/svg+xml,%3Csvg width='120' height='7' viewBox='0 0 120 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4 Q28 0 60 4 T119 3' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/100% 100%; transition:opacity .15s; }
nav a:hover::after { opacity:1; }
.x-button { padding:8px 12px; border:3px solid var(--ink); border-radius:7px 3px 9px 4px; background:#fff; box-shadow:3px 3px 0 var(--ink); transform:rotate(-1.5deg); }
.x-button::after { display:none; }
.x-button:hover { transform:translate(2px,2px) rotate(1deg); box-shadow:1px 1px 0 var(--ink); }
.ticker-copy { border:0; background:transparent; cursor:pointer; font-family:"Permanent Marker",cursive; }
nav .ticker-copy { padding:10px 16px; border:3px solid var(--ink); border-radius:3px 8px 4px 7px; transform:rotate(2deg); box-shadow:3px 3px 0 var(--ink); background:#fff; }
nav .ticker-copy span { margin-left:7px; font-family:"Patrick Hand",cursive; color:var(--muted); }
.menu-toggle { display:none; padding:7px 13px; border:3px solid var(--ink); border-radius:4px 8px 3px 7px; background:#fff; font-family:"Permanent Marker",cursive; }

.hero { width:var(--page); min-height:calc(100vh - 92px); margin:0 auto; display:grid; grid-template-columns:1fr .92fr; align-items:center; gap:clamp(25px,5vw,80px); padding:72px 0 60px; }
.hero-copy { position:relative; }
.hero-copy::after { content:"↘"; position:absolute; right:4%; top:2%; font:400 4rem "Patrick Hand",cursive; transform:rotate(12deg); }
.eyebrow { margin:0 0 20px; font-weight:700; font-size:.88rem; letter-spacing:.1em; transform:rotate(-1deg); }
h1,h2,h3 { font-family:"Permanent Marker",cursive; font-weight:400; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(5rem,9.6vw,9rem); line-height:.9; letter-spacing:-.055em; transform:rotate(-1deg); }
h1 span,h2 span { display:inline-block; position:relative; color:var(--ink); background:transparent; padding:0; transform:rotate(-2deg); }
h1 span::after,h2 span::after { content:""; position:absolute; left:-2%; right:-3%; bottom:-5px; height:13px; background:url("data:image/svg+xml,%3Csvg width='500' height='13' viewBox='0 0 500 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8 Q90 2 180 8 T350 6 T498 4' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.lead { width:min(600px,94%); margin:34px 0; font-size:clamp(1.25rem,1.8vw,1.65rem); line-height:1.25; transform:rotate(.3deg); }
.hero-actions { display:flex; flex-wrap:wrap; gap:16px; }
.button { min-height:56px; padding:0 23px; display:inline-flex; justify-content:center; align-items:center; gap:25px; border:3px solid var(--ink); border-radius:5px 11px 4px 9px; background:#fff; font-family:"Permanent Marker",cursive; font-size:.78rem; cursor:pointer; transform:rotate(-1deg); box-shadow:4px 4px 0 var(--ink); transition:transform .15s,box-shadow .15s; }
.button:nth-child(2) { transform:rotate(1deg); }
.button:hover { transform:translate(3px,3px) rotate(.5deg); box-shadow:1px 1px 0 var(--ink); }
.button-dark { color:var(--ink); background:#fff; }
.button-dark::before { content:"✦"; }
.status-strip { display:flex; gap:28px; margin-top:38px; padding-top:17px; position:relative; font-size:.85rem; }
.status-strip::before { content:""; position:absolute; top:0; left:0; width:min(530px,100%); height:5px; background:url("data:image/svg+xml,%3Csvg width='530' height='7' viewBox='0 0 530 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3 Q110 7 240 2 T529 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/100% 100%; }
.status-strip span:first-child { display:flex; align-items:center; gap:8px; }
.status-strip i { width:9px; height:9px; border-radius:50%; background:var(--ink); animation:blink 1.3s steps(1) infinite; }

.hero-art { position:relative; min-height:670px; display:grid; place-items:center; }
.hero-art::before { content:""; position:absolute; width:87%; aspect-ratio:1; background:#fff; border:5px solid var(--ink); border-radius:51% 49% 47% 53%/48% 54% 46% 52%; transform:rotate(3deg); }
.hero-art::after { content:""; position:absolute; left:8%; right:4%; bottom:13%; height:8px; background:url("data:image/svg+xml,%3Csvg width='650' height='10' viewBox='0 0 650 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7 Q130 0 250 6 T648 4' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100%; transform:rotate(-5deg); }
.mascot-stage { position:relative; z-index:2; width:min(620px,95%); }
.hero-art .mascot-stage img { width:100%; }
.blink-eye { position:absolute; top:38.7%; width:5.15%; height:11.8%; border-radius:48%; background:#fff; }
.blink-eye::before { content:""; position:absolute; left:23%; top:8%; width:56%; height:84%; border-radius:50%; background:var(--ink); transform:translate(var(--eye-x,0),var(--eye-y,0)) scaleY(1); transform-origin:center; transition:transform .13s ease-out; }
.blink-eye::after { content:""; position:absolute; left:13%; right:13%; top:48%; height:5px; border-radius:50%; background:var(--ink); opacity:0; transform:rotate(-1deg); }
.blink-eye-left { left:43.95%; }
.blink-eye-right { left:49.35%; }
.mascot-stage.is-blinking .blink-eye::before { transform:translate(var(--eye-x,0),var(--eye-y,0)) scaleY(.04); }
.mascot-stage.is-blinking .blink-eye::after { opacity:1; }
.stamp { position:absolute; z-index:4; right:-1%; top:5%; width:110px; aspect-ratio:1; border:4px solid var(--ink); border-radius:50% 47% 53% 48%; display:grid; place-items:center; text-align:center; font-family:"Permanent Marker",cursive; font-size:.9rem; line-height:1.05; transform:rotate(13deg); background:#fff; }
.stamp::after { content:""; position:absolute; inset:6px; border:2px solid var(--ink); border-radius:48% 52% 45% 55%; }
.spark { position:absolute; z-index:4; font-size:3.4rem; font-family:serif; }
.spark-a { top:14%; left:2%; transform:rotate(-8deg); }
.spark-b { right:2%; bottom:21%; transform:rotate(9deg); }
.scribble { position:absolute; z-index:4; right:1%; bottom:2%; font-size:1rem; line-height:1.1; transform:rotate(-5deg); }

.marquee { overflow:hidden; background:#fff; border-top:4px solid var(--ink); border-bottom:4px solid var(--ink); transform:rotate(-.7deg) scale(1.01); }
.marquee-track { width:max-content; display:flex; gap:65px; padding:12px 0; font-family:"Permanent Marker",cursive; font-size:1rem; animation:marquee 24s linear infinite; }
.section { width:var(--page); margin:0 auto; padding:130px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:34px; margin-bottom:65px; }
.section-heading .eyebrow { align-self:start; }
h2 { margin:0; font-size:clamp(3.8rem,7.3vw,7.3rem); line-height:.95; letter-spacing:-.045em; transform:rotate(-1deg); }
h2 em { font-family:"Patrick Hand",cursive; font-weight:400; text-transform:none; letter-spacing:-.03em; }

.dossier { position:relative; }
.dossier::before { content:"* classified notes"; position:absolute; right:2%; top:9%; font-size:1.2rem; transform:rotate(7deg); }
.dossier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.paper-card { min-height:340px; padding:26px; display:flex; flex-direction:column; position:relative; background:#fff; border:4px solid var(--ink); border-radius:7px 12px 5px 10px; box-shadow:7px 8px 0 var(--ink); }
.paper-card::before { content:""; position:absolute; width:84px; height:24px; top:-16px; left:38%; background:rgba(226,220,207,.78); transform:rotate(-4deg); }
.rotate-left { transform:rotate(-1.4deg); }
.rotate-right { transform:rotate(1.3deg); }
.card-number { font-size:.85rem; }
.doodle { margin:auto 0; font-size:6rem; line-height:1; }
.paper-card h3 { margin:0 0 8px; font-size:1.3rem; line-height:1.05; }
.paper-card p { margin:0; color:#282522; font-size:1.12rem; line-height:1.3; }

.chart-section { position:relative; padding-top:80px; }
.chart-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:50px; }
.chart-note { margin:0 4% 20px 0; font-size:1.25rem; line-height:1.05; transform:rotate(6deg); }
.chart-paper { --chart-progress:0; position:relative; min-height:530px; padding:20px; border:4px solid var(--ink); border-radius:7px 13px 5px 10px; background:#fff; box-shadow:8px 9px 0 var(--ink); transform:rotate(-.45deg); overflow:hidden; }
.chart-paper::before { content:""; position:absolute; width:120px; height:30px; top:-10px; left:44%; background:rgba(226,220,207,.82); transform:rotate(2deg); z-index:3; }
.mission-chart { width:100%; height:auto; overflow:visible; }
.mission-chart path { fill:none; stroke:var(--ink); stroke-linecap:round; stroke-linejoin:round; }
.chart-axis { stroke-width:5; }
.chart-guide { stroke-width:2; stroke-dasharray:10 18; opacity:.2; }
.chart-path { stroke-width:12; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--chart-progress)); }
.chart-arrow { stroke-width:12; opacity:calc(.15 + var(--chart-progress)); }
.chart-dot { fill:#fff; stroke:var(--ink); stroke-width:5; opacity:calc(var(--chart-progress) * 1.2); }
.chart-agent-svg circle { fill:#fff; stroke:var(--ink); stroke-width:4; }
.chart-agent-svg path { fill:var(--ink); stroke:none; }
.chart-label { position:absolute; z-index:2; padding:4px 8px; background:#fff; font-family:"Permanent Marker",cursive; font-size:.7rem; }
.chart-label-a { left:24%; bottom:19%; transform:rotate(-5deg); }
.chart-label-b { left:62%; top:39%; transform:rotate(4deg); }
.chart-label-c { right:6%; top:10%; font-size:1.2rem; transform:rotate(-7deg); }
.chart-scribble { position:absolute; right:4%; bottom:4%; font-size:.95rem; line-height:1; transform:rotate(-4deg); }

.briefing { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,130px); align-items:center; position:relative; }
.briefing::before { top:0; }
.briefing-art { position:relative; padding:17px; background:#fff; border:4px solid var(--ink); border-radius:6px 2px 9px 4px; transform:rotate(-2deg); box-shadow:10px 10px 0 var(--ink); }
.briefing-art img { aspect-ratio:1; object-fit:cover; }
.tape { position:absolute; width:120px; height:31px; background:rgba(226,220,207,.8); }
.tape-top { left:35%; top:-18px; transform:rotate(3deg); }
.tape-bottom { right:12%; bottom:-14px; transform:rotate(-8deg); }
.steps { list-style:none; margin:45px 0 0; padding:0; }
.steps li { display:grid; grid-template-columns:47px 1fr; gap:18px; padding:17px 0; position:relative; }
.steps li::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:url("data:image/svg+xml,%3Csvg width='500' height='7' viewBox='0 0 500 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3 Q110 7 240 2 T499 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/100% 100%; }
.steps li>span { display:grid; place-items:center; width:39px; height:39px; border:3px solid var(--ink); border-radius:52% 48% 46% 54%; font-family:"Permanent Marker",cursive; transform:rotate(-5deg); }
.steps b { font-family:"Permanent Marker",cursive; font-size:.95rem; }
.steps p { margin:3px 0 0; color:#3d3934; line-height:1.23; }
.steps a { font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.contract-file { margin-top:24px; padding:14px 17px; border:3px dashed var(--ink); border-radius:4px 10px 5px 8px; display:flex; justify-content:space-between; gap:18px; font-size:.9rem; transform:rotate(-.6deg); }
.contract-file b { font-family:"Permanent Marker",cursive; font-size:.72rem; }

.manifesto { padding:120px 24px; background:#fff; color:var(--ink); text-align:center; position:relative; }
.manifesto::before { top:0; }
.manifesto::after { bottom:0; transform:rotate(180deg); }
.manifesto-inner { width:min(1100px,100%); margin:auto; position:relative; }
.manifesto p { margin:0; font-family:"Permanent Marker",cursive; font-size:clamp(2.4rem,5.5vw,5.7rem); line-height:1.04; }
.manifesto u { font-family:"Patrick Hand",cursive; text-decoration-thickness:4px; text-underline-offset:8px; }
.manifesto small { display:block; margin-top:30px; font-size:.9rem; }
.quote { position:absolute; left:-2%; top:-45%; font:10rem Georgia,serif; opacity:.12; }

.media-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; align-items:end; }
.asset-card { display:block; border:4px solid var(--ink); border-radius:5px 10px 4px 8px; background:#fff; box-shadow:6px 7px 0 var(--ink); transform:rotate(-.5deg); transition:transform .16s,box-shadow .16s; }
.asset-card:nth-child(even) { transform:rotate(.6deg); }
.asset-card:hover { transform:translate(4px,4px) rotate(0); box-shadow:2px 2px 0 var(--ink); }
.asset-preview { aspect-ratio:1; overflow:hidden; background:#fff; border-bottom:4px solid var(--ink); }
.asset-preview img { width:100%; height:100%; object-fit:cover; }
.mascot-preview { background:#fff; }
.mascot-preview img { object-fit:contain; }
.asset-wide { grid-column:1/-1; }
.asset-wide .asset-preview,.asset-banner .asset-preview { aspect-ratio:3/1; }
.asset-card>div:last-child { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 15px; }
.asset-card b { font-family:"Permanent Marker",cursive; font-size:.75rem; }
.asset-card span { color:var(--muted); font-size:.82rem; }

.final-cta { min-height:720px; display:grid; grid-template-columns:1fr .8fr; align-items:center; position:relative; }
.final-cta::before { top:0; }
.final-copy .button { margin-top:35px; }
.orbit { min-height:520px; display:grid; place-items:center; position:relative; }
.globe { width:min(355px,72vw); aspect-ratio:1; display:grid; place-items:center; position:relative; border:5px solid var(--ink); border-radius:49% 51% 47% 53%; background:#fff; font-family:"Permanent Marker",cursive; font-size:2.7rem; transform:rotate(-8deg); }
.globe::before,.globe::after { content:""; position:absolute; width:55%; height:96%; border:3px solid var(--ink); border-radius:50%; }
.globe::after { width:95%; height:35%; }
.orbit-line { position:absolute; width:110%; height:48%; border:4px solid var(--ink); border-radius:50%; transform:rotate(-22deg); }
.satellite { position:absolute; top:13%; right:3%; font-size:4rem; animation:float 2.8s ease-in-out infinite; }

footer { width:var(--page); min-height:112px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:20px; position:relative; font-size:.85rem; }
footer::before { top:0; }
.footer-x { position:relative; font-family:"Permanent Marker",cursive; font-size:.72rem; transform:rotate(-1deg); }
.footer-x::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:5px; background:url("data:image/svg+xml,%3Csvg width='130' height='6' viewBox='0 0 130 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4 Q33 0 66 4 T129 3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/100% 100%; }
.toast { position:fixed; z-index:50; left:50%; bottom:24px; padding:12px 19px; border:3px solid var(--ink); border-radius:5px 9px 4px 8px; color:var(--ink); background:#fff; font-family:"Permanent Marker",cursive; font-size:.75rem; box-shadow:4px 4px 0 var(--ink); transform:translate(-50%,150%); transition:transform .24s; }
.toast.show { transform:translate(-50%,0) rotate(-1deg); }
.reveal { opacity:0; transform:translateY(25px) rotate(.3deg); transition:opacity .65s,transform .65s; }
.reveal.visible { opacity:1; transform:translateY(0) rotate(0); }

@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes blink { 50% { opacity:.15; } }
@keyframes float { 50% { transform:translateY(-13px) rotate(8deg); } }

@media (max-width:900px) {
  :root { --page:min(100% - 28px,760px); }
  body { font-size:18px; }
  .site-header { min-height:75px; }
  .menu-toggle { display:block; }
  nav { position:absolute; top:74px; left:0; right:0; padding:25px; flex-direction:column; align-items:stretch; gap:19px; border:3px solid var(--ink); background:#fff; box-shadow:5px 5px 0 var(--ink); opacity:0; visibility:hidden; transform:rotate(-1deg) translateY(-8px); transition:.18s; }
  nav.open { opacity:1; visibility:visible; transform:rotate(-1deg) translateY(0); }
  nav .ticker-copy { width:100%; }
  .hero { grid-template-columns:1fr; padding-top:55px; }
  .hero-copy::after { display:none; }
  .hero-art { min-height:540px; }
  .section { padding:95px 0; }
  .section-heading { display:block; }
  .dossier-grid { grid-template-columns:1fr; }
  .paper-card { min-height:275px; }
  .chart-heading { display:block; }
  .chart-note { margin:25px 0 0 65%; }
  .chart-paper { min-height:auto; padding:8px; }
  .briefing { grid-template-columns:1fr; }
  .media-grid { grid-template-columns:1fr; }
  .asset-wide { grid-column:auto; }
  .final-cta { grid-template-columns:1fr; padding-bottom:40px; }
  footer { padding:28px 0; flex-wrap:wrap; }
}

@media (max-width:560px) {
  h1 { font-size:clamp(4rem,20vw,5.8rem); }
  h2 { font-size:clamp(3.1rem,15vw,4.8rem); }
  .hero { padding-top:42px; }
  .hero-art { min-height:430px; }
  .stamp { width:82px; font-size:.68rem; }
  .lead { width:100%; }
  .button { width:100%; }
  .status-strip { justify-content:space-between; gap:10px; font-size:.72rem; }
  .section-heading { margin-bottom:45px; }
  .contract-file { align-items:flex-start; flex-direction:column; }
  .chart-note,.chart-label { display:none; }
  .chart-scribble { font-size:.72rem; }
  .asset-card>div:last-child { align-items:flex-start; flex-direction:column; }
  footer { display:grid; }
}

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