@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Literata;src:url("/assets/fonts/literata-variable.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --ink:#141712;--paper:#f2ead8;--paper-2:#e6ddc8;--cyan:#00c7bd;--orange:#ff5c35;
  --violet:#4e42e8;--white:#fffdf7;--line:rgba(20,23,18,.24);--muted:#5d625b;
  --display:"Barlow Condensed",Impact,sans-serif;--text:Literata,Georgia,serif;
  --pad:clamp(1rem,3vw,2.5rem);--max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--text);font-size:17px;line-height:1.72;overflow-x:hidden}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
img{display:block;width:100%;height:auto}
button,input{font:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
.skip{position:absolute;left:1rem;top:-5rem;background:var(--white);padding:.7rem 1rem;z-index:99}.skip:focus{top:1rem}

.mast{position:relative;z-index:20;background:var(--ink);color:var(--white);border-bottom:1px solid #34372f}
.mast__bar{max-width:var(--max);margin:auto;min-height:82px;padding:.8rem var(--pad);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.035em;font-size:clamp(1.35rem,2.5vw,2rem);line-height:.9}
.brand__reel{width:2.7rem;height:2.7rem;border:3px solid var(--paper);border-radius:50%;position:relative;background:conic-gradient(var(--orange) 0 25%,transparent 25% 50%,var(--cyan) 50% 75%,transparent 75%)}
.brand__reel:after{content:"";position:absolute;inset:.75rem;border-radius:50%;background:var(--ink);border:2px solid var(--paper)}
.nav{justify-self:end;display:flex;align-items:center;gap:1.25rem;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.96rem}
.nav a{text-decoration:none;border-bottom:2px solid transparent}.nav a:hover{border-color:var(--cyan)}
.nav-toggle{display:none;border:1px solid #64685e;background:transparent;color:var(--white);padding:.45rem .65rem;font-family:var(--display);text-transform:uppercase}
.ticker{overflow:hidden;border-top:1px solid #34372f;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#bdbdab}
.ticker__track{display:flex;width:max-content;animation:ticker 34s linear infinite}.ticker span{padding:.4rem 1.5rem}.ticker i{color:var(--orange);font-style:normal}
@keyframes ticker{to{transform:translateX(-50%)}}

.sprocket{position:fixed;inset:0 auto 0 0;width:18px;z-index:40;pointer-events:none;background:var(--ink);background-image:radial-gradient(circle at 50% 12px,var(--paper) 0 4px,transparent 4.5px);background-size:18px 28px}
.wrap{width:min(var(--max),calc(100% - 2 * var(--pad)));margin-inline:auto}
.hero{min-height:690px;background:var(--ink);color:var(--white);position:relative;isolation:isolate;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,23,18,.93) 0 42%,rgba(20,23,18,.2) 76%),url("/assets/images/26738294.jpg") center/cover;filter:saturate(.7) contrast(1.12);z-index:-2}
.hero:after{content:"";position:absolute;inset:auto -5% 6% 37%;height:16%;background:repeating-radial-gradient(ellipse at center,transparent 0 12px,rgba(0,199,189,.26) 13px 14px,transparent 15px 24px);transform:rotate(-5deg);z-index:-1}
.hero__grid{min-height:690px;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(260px,.55fr);gap:5vw;align-items:center;padding-block:4rem}
.eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--cyan);font-size:.9rem}
.hero h1,.page-hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.8;margin:.3rem 0 1.4rem;font-size:clamp(4.8rem,12vw,10.5rem);max-width:9ch}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero__lead{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:44rem;color:#e6e2d7}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.button{display:inline-flex;align-items:center;gap:.5rem;background:var(--orange);color:var(--ink);padding:.76rem 1rem;text-decoration:none;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--orange);line-height:1}
.button:hover{background:var(--cyan);border-color:var(--cyan)}.button--ghost{background:transparent;color:var(--white);border-color:var(--white)}
.frame-note{align-self:end;justify-self:end;max-width:310px;border:1px solid rgba(255,255,255,.55);padding:1.25rem;background:rgba(20,23,18,.72);backdrop-filter:blur(7px);transform:rotate(2deg)}
.frame-note strong{display:block;font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--orange);text-transform:uppercase}.frame-note p{font-size:.9rem;line-height:1.55;margin:.7rem 0 0}

.section{padding:clamp(3.8rem,8vw,7rem) 0;border-bottom:1px solid var(--line)}
.section--ink{background:var(--ink);color:var(--white)}.section--cyan{background:var(--cyan)}.section--orange{background:var(--orange)}
.section__head{display:grid;grid-template-columns:160px 1fr;gap:2rem;align-items:start;margin-bottom:2.5rem}
.section__no{font-family:var(--display);font-weight:800;font-size:5rem;line-height:.75;color:var(--orange)}
.section h2,.article h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(2.6rem,6vw,5.6rem);margin:0;max-width:15ch}
.section h3,.article h3{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;font-size:clamp(1.6rem,3vw,2.45rem);margin:2.2rem 0 .7rem}
.lede{font-size:1.18rem;max-width:760px}
.contact-sheet{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.shot{position:relative;background:var(--ink);color:var(--white);border:8px solid var(--ink);text-decoration:none;overflow:hidden;min-height:330px}
.shot:nth-child(1){grid-column:span 7}.shot:nth-child(2){grid-column:span 5}.shot:nth-child(3){grid-column:span 4}.shot:nth-child(4){grid-column:span 8}
.shot img{height:100%;object-fit:cover;filter:saturate(.72);transition:.45s transform,.45s filter}.shot:hover img{transform:scale(1.035);filter:saturate(1)}
.shot__caption{position:absolute;inset:auto .6rem .6rem .6rem;background:var(--paper);color:var(--ink);padding:.7rem .8rem;display:flex;justify-content:space-between;align-items:end;gap:1rem}
.shot__caption strong{font-family:var(--display);font-size:1.65rem;line-height:.92;text-transform:uppercase}.shot__caption span{font-family:var(--display);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.reel-list{list-style:none;padding:0;margin:0;border-top:1px solid currentColor}
.reel-list li{display:grid;grid-template-columns:80px 1fr auto;gap:1rem;align-items:center;border-bottom:1px solid currentColor;padding:1rem 0}
.reel-list b{font-family:var(--display);font-size:1.7rem;color:var(--cyan)}.reel-list a{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.5rem;text-decoration:none}.reel-list a:hover{color:var(--orange)}
.reel-list small{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em}

.page-hero{background:var(--ink);color:var(--white);padding:clamp(4rem,10vw,8rem) 0 3rem;position:relative;overflow:hidden}
.page-hero:after{content:attr(data-frame);position:absolute;right:-.02em;bottom:-.22em;font-family:var(--display);font-weight:800;font-size:clamp(9rem,27vw,26rem);line-height:1;color:rgba(255,255,255,.04)}
.page-hero h1{font-size:clamp(4rem,10vw,8.7rem);max-width:12ch;position:relative;z-index:1}.page-hero__lead{font-size:1.2rem;max-width:760px;color:#d9d7cd;position:relative;z-index:1}
.crumbs{font-family:var(--display);font-size:.9rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cyan);margin-bottom:1rem}.crumbs a{text-decoration:none}
.article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,1fr);gap:clamp(2rem,7vw,7rem);align-items:start;padding-block:clamp(3.5rem,7vw,6rem)}
.article{min-width:0}.article>p:first-of-type{font-size:1.22rem}.article p{margin:0 0 1.35rem}.article ul,.article ol{padding-left:1.4rem}.article li{margin:.45rem 0}
.article blockquote{margin:2.5rem 0;padding:1rem 0 1rem 1.5rem;border-left:7px solid var(--orange);font-size:1.25rem;font-style:italic}
.article figure{margin:2.5rem 0;background:var(--ink);padding:.65rem}.article figcaption{color:var(--paper);font-family:var(--display);font-size:.82rem;letter-spacing:.06em;padding:.55rem .35rem 0}
.article-aside{position:sticky;top:1.25rem;border-top:10px solid var(--violet);background:var(--paper-2);padding:1.4rem}
.article-aside h2{font-size:1.45rem;max-width:none}.article-aside ul{list-style:none;padding:0;margin:1rem 0 0}.article-aside li{border-top:1px solid var(--line);padding:.6rem 0}.article-aside a{text-decoration:none;font-family:var(--display);font-weight:600;text-transform:uppercase}
.fact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink);margin:2.5rem 0}.fact{background:var(--cyan);padding:1rem}.fact b{display:block;font-family:var(--display);font-size:2rem;line-height:1}.fact span{font-size:.82rem}
.source-box{margin-top:3rem;border:1px solid var(--line);padding:1rem 1.2rem;background:var(--white);font-size:.92rem}.source-box h2{font-size:1.35rem;max-width:none}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.related a{border:1px solid var(--ink);padding:1rem;text-decoration:none;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}.related b{font-family:var(--display);font-size:1.45rem;text-transform:uppercase;line-height:1}.related span{font-size:.82rem;color:var(--muted)}

.game-shell{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.5fr);gap:1.2rem;align-items:stretch}
.game-screen{position:relative;min-height:480px;background:linear-gradient(#a9e2da 0 18%,#00a8ae 18% 45%,#092f3b 100%);border:12px solid var(--ink);overflow:hidden;cursor:crosshair;touch-action:none}
.game-screen:before{content:"";position:absolute;inset:18% 0 auto;height:3px;background:rgba(255,255,255,.5);box-shadow:0 8px 0 rgba(255,255,255,.12)}
.game-screen:after{content:"";position:absolute;inset:auto 0 0;height:24%;background:repeating-linear-gradient(165deg,#0e3e35 0 14px,#124b40 15px 28px);clip-path:polygon(0 40%,12% 20%,24% 42%,38% 12%,55% 37%,69% 15%,82% 30%,100% 10%,100% 100%,0 100%)}
.fish{position:absolute;width:86px;height:38px;background:var(--paper);border-radius:65% 45% 45% 65%;filter:drop-shadow(0 4px 2px rgba(0,0,0,.18));z-index:2}.fish:after{content:"";position:absolute;right:-24px;top:3px;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:27px solid var(--paper)}.fish:before{content:"";position:absolute;left:17px;top:10px;width:6px;height:6px;background:var(--ink);border-radius:50%}.fish.reverse{transform:scaleX(-1)}
.viewfinder{position:absolute;width:150px;height:100px;border:4px solid var(--orange);z-index:5;pointer-events:none;transform:translate(-50%,-50%)}.viewfinder:before,.viewfinder:after{content:"";position:absolute;background:var(--orange)}.viewfinder:before{left:50%;top:-15px;width:2px;height:130px}.viewfinder:after{top:50%;left:-15px;width:180px;height:2px}
.splash{position:absolute;border:2px solid rgba(255,255,255,.7);border-radius:50%;animation:splash .65s ease-out forwards;z-index:6}@keyframes splash{to{width:120px;height:50px;opacity:0;transform:translate(-60px,-25px)}}
.game-panel{background:var(--ink);color:var(--white);padding:1.5rem;display:flex;flex-direction:column}.game-panel h3{font-family:var(--display);font-size:2.7rem;text-transform:uppercase;line-height:.9;margin:0 0 1rem}.score{font-family:var(--display);font-size:4rem;font-weight:800;color:var(--cyan);line-height:1}.game-panel button{margin-top:auto;border:0;background:var(--orange);padding:.85rem;font-family:var(--display);font-size:1.15rem;text-transform:uppercase;font-weight:700;cursor:pointer}.game-panel button:hover{background:var(--cyan)}

.section--reading{background:var(--paper);color:var(--ink)}
.home-copy{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3.5rem);padding-left:clamp(0rem,10vw,9rem)}
.home-copy section{border-top:4px solid var(--ink);padding-top:1.1rem}
.home-copy h3{font:700 clamp(1.8rem,3vw,2.8rem)/.95 var(--display);text-transform:uppercase;margin:0 0 1rem}
.home-copy p{font:400 1.02rem/1.72 var(--body);margin:.9rem 0}
.home-copy a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}

.footer{background:var(--ink);color:var(--white);padding:3.5rem 0 2rem}.footer__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:2rem}.footer h2{font-family:var(--display);font-size:2.4rem;text-transform:uppercase;margin:0}.footer h3{font-family:var(--display);text-transform:uppercase;color:var(--cyan);margin:0 0 .8rem}.footer ul{list-style:none;padding:0;margin:0}.footer a{text-decoration:none}.footer a:hover{color:var(--orange)}.footer__fine{border-top:1px solid #3d4138;margin-top:2.5rem;padding-top:1rem;font-size:.78rem;color:#aeb1a9;display:flex;justify-content:space-between;gap:1rem}
.not-found{min-height:70vh;display:grid;place-items:center;background:var(--ink);color:var(--white);text-align:center;padding:2rem}.not-found b{display:block;font-family:var(--display);font-size:clamp(9rem,35vw,28rem);line-height:.65;color:var(--orange)}

@media(max-width:860px){
  .mast__bar{grid-template-columns:1fr auto}.nav-toggle{display:block}.nav{display:none;grid-column:1/-1;justify-self:stretch;flex-direction:column;align-items:start;border-top:1px solid #3b3f37;padding:1rem 0}.nav.open{display:flex}
  .hero__grid,.game-shell,.article-layout,.home-copy{grid-template-columns:1fr}.home-copy{padding-left:0}.frame-note{justify-self:start}.article-aside{position:static}.article-layout{gap:1rem}
  .section__head{grid-template-columns:1fr}.section__no{font-size:3.3rem}.contact-sheet{grid-template-columns:1fr}.shot:nth-child(n){grid-column:1}.related{grid-template-columns:1fr}.footer__grid{grid-template-columns:1fr 1fr}.game-screen{min-height:390px}
}
@media(max-width:560px){.hero h1,.page-hero h1{font-size:clamp(3.7rem,20vw,6rem)}.hero__grid{min-height:610px}.fact-strip{grid-template-columns:1fr}.reel-list li{grid-template-columns:45px 1fr}.reel-list small{grid-column:2}.footer__grid{grid-template-columns:1fr}.footer__fine{display:block}.sprocket{width:9px;background-size:9px 20px;background-image:radial-gradient(circle at 50% 8px,var(--paper) 0 2px,transparent 2.5px)}.game-screen{min-height:340px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.ticker__track{animation:none}.shot img{transition:none}}