*{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:dark;
  --night:#0B1410; --bark:#141F19; --green:#16402A; --gold:#D4AF37; --gold-b:#F0D272;
  --parch:#EFE6D2; --soft:#C9C2AE; --paper:#E6D9B8; --paper-ink:#1E1810;
  --disp:'Cinzel',Georgia,serif; --body:'IM Fell English',Georgia,serif; --code:ui-monospace,Menlo,Consolas,monospace;
  --t-1:clamp(44px,4.6vw,68px); --t-2:clamp(24px,2.5vw,36px); --t-3:clamp(19px,1.45vw,21px); --t-4:16px;
  --m:clamp(20px,2.5vw,36px); --gap:clamp(16px,2.2vw,32px);
  --out:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
body{background:var(--night);color:var(--parch);font:400 var(--t-3)/1.5 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:lining-nums}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2{font-family:var(--disp);font-weight:700;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--t-1)}
h2{font-size:var(--t-2)}
p{text-wrap:pretty}
code{font-family:var(--code);overflow-wrap:anywhere}
ol,ul{list-style:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold-b);outline-offset:3px}
.wrap{padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 26px;background:var(--gold);color:var(--night);font:700 17px/1.1 var(--disp);text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .15s var(--out)}
.btn:hover{background:var(--gold-b)}
.btn:active{transform:scale(.96)}
.btn.dark{background:var(--night);color:var(--gold-b)}
.btn.dark:hover{background:var(--green);color:#fff}

/* nav */
nav{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:18px max(var(--m),env(safe-area-inset-right,0px)) 18px max(var(--m),env(safe-area-inset-left,0px))}
.brand{display:inline-flex;align-items:center;min-height:44px;font:700 26px/1 var(--disp);letter-spacing:.02em;text-decoration:none;color:#fff}
.nav-links{display:flex;gap:clamp(18px,2.4vw,36px);margin-left:auto}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;font:500 17px/1 var(--disp);text-decoration:none;color:var(--parch);transition:color .2s ease}
.nav-links a:hover{color:var(--gold-b)}
nav .btn{min-height:44px;padding:8px 18px;font-size:16px;flex:none}

/* hero: the arch window opens to the whole screen as the page scrolls */
.hero{height:200svh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--night);--w:min(38vw,calc((100svh - 170px)*.8))}
.hero-art{position:absolute;inset:0;z-index:1}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:75% 50%}
.hero-art img.cam{position:absolute;left:0;top:0;width:2400px;height:1019px;max-width:none;object-fit:fill;transform-origin:0 0}
html:not(.js) .hero-art::after{content:"";position:absolute;inset:0;background:rgba(11,20,16,.62)}
.js .hero-art{clip-path:inset(13% 32% 7% 32% round 18vw 18vw 0 0)}
.flies{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hero-grid{position:relative;z-index:3;height:100%;pointer-events:none;display:grid;grid-template-columns:1fr var(--w) 1fr;gap:var(--gap);padding:clamp(84px,10svh,104px) var(--m) clamp(24px,5svh,48px);align-items:end}
.hero-slot{width:var(--w);aspect-ratio:4/5}
.hero-title,.hero-side{opacity:calc(1 - var(--p,0)*2.6);transform:translateY(calc(var(--p,0)*-28px))}
.hero-title{color:#fff;line-height:1}
.hero-side{justify-self:end;max-width:31ch;display:grid;gap:22px;justify-items:start;pointer-events:auto}
.hero.faded .hero-title,.hero.faded .hero-side{visibility:hidden}
.hero:not(.open) .hero-caption{visibility:hidden}
.hero-caption{position:absolute;z-index:3;left:var(--m);bottom:clamp(20px,5vh,44px);max-width:calc(100% - var(--m)*2);padding:.4em .7em;background:rgba(11,20,16,.78);font-size:var(--t-2);line-height:1.2;color:#fff;opacity:calc((var(--p,0) - .72)*4)}

/* the board: square cells, tiles fitted edge to edge */
.board{--cell:calc((100vw - 104px)/12);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(var(--cell),auto);gap:8px;padding:8px;background:var(--night)}
.t{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.2vw,32px);background:var(--bark);scroll-margin-top:8px}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}
.r2{grid-row:span 2}.r3{grid-row:span 3}.r4{grid-row:span 4}.r6{grid-row:span 6}
.gold{background:var(--gold);color:var(--night)}
.green{background:var(--green)}
.paper{background:var(--paper);color:var(--paper-ink)}
.fees{background:var(--green)}
.t h2+p{max-width:60ch}
.green p,.fees p{font-size:clamp(20px,1.75vw,27px);line-height:1.4;color:#fff}
.gold code{font-size:clamp(14px,1.28vw,19px);font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.acts .btn{min-height:48px;padding:8px 18px;min-width:96px}
.stat{justify-content:flex-end;gap:6px}
.stat .v{font:700 var(--t-1)/1.05 var(--disp);color:var(--gold-b);font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
.stat .v.long{font-size:var(--t-2);line-height:1.3}
.stat .l{color:var(--parch)}
.t h2{letter-spacing:0}
.green h2,.fees h2,.buy h2{color:#fff}
.buy{background:var(--bark);justify-content:center}
.buy ol{display:grid;gap:16px;max-width:76ch}
.buy b{font:700 1.02em/1.3 var(--disp);color:#fff;display:block;margin-bottom:2px}
.buy a,.buy code{color:var(--gold-b)}
.buy code{font-size:.84em}

/* memes */
.m{padding:0;background:var(--bark)}
.m a{display:block;width:100%;height:100%}
.m img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--out)}
.m a:hover img,.m a:focus-visible img{transform:scale(1.035)}
.m figcaption{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);padding:.25em .6em;background:rgba(11,20,16,.82);color:#fff;font-size:var(--t-4);line-height:1.3;pointer-events:none}

/* footer */
footer{background:var(--green);padding-top:clamp(28px,3vw,44px);padding-bottom:clamp(28px,3vw,44px);color:var(--parch)}
.foot-name{font:700 31vw/.9 var(--disp);letter-spacing:-.02em;color:var(--parch);white-space:nowrap}
.foot-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:32px;margin-top:clamp(36px,5vw,72px)}
.foot-big{grid-column:1/8;display:grid;gap:8px;justify-items:start;align-content:start}
.foot-big a{display:inline-flex;align-items:center;min-height:44px;font:700 var(--t-2)/1.1 var(--disp);color:var(--gold-b);text-decoration:none;transition:color .2s ease,transform .3s var(--out)}
.foot-big a:hover{color:#fff;transform:translateX(6px)}
.foot-big p{margin-top:8px}
.foot-links{grid-column:8/13;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap);align-content:start}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:var(--t-3);transition:color .2s ease}
.foot-links a:hover{color:var(--gold-b)}
.fine{margin-top:clamp(32px,4vw,56px);max-width:72ch;font-size:var(--t-4);line-height:1.5;color:var(--parch)}
.foot-end{margin-top:18px}
.foot-end a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-4)}

/* entrances: the page reads fine if these never run. If the script never starts, everything shows anyway. */
@keyframes show{to{opacity:1;transform:none}}
.js:not(.js-ready) .rise{animation:show .4s 1.2s forwards}
.js .rise{opacity:0;transform:translateY(20px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .8s var(--out),transform .8s var(--out);transition-delay:calc(var(--i,0)*70ms)}

@media(max-width:900px){
  .stage{--w:min(76vw,calc((100svh - 390px)*.8))}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start;align-items:start;gap:16px;padding-top:118px;padding-bottom:20px}
  .hero-slot{justify-self:center}
  .hero-side{justify-self:stretch;max-width:none;gap:14px}
  .hero-side p{line-height:1.35}
  .hero-side .btn{width:100%}
}
/* phone: two columns, the big memes run full width */
@media(max-width:760px){
  :root{--t-1:clamp(38px,10.5vw,52px);--t-2:26px;--t-3:19px}
  nav{flex-wrap:wrap;gap:4px 14px;padding-top:12px;padding-bottom:6px}
  .nav-links{order:3;width:100%;margin-left:0;gap:22px}
  .nav-links a{font-size:16px}
  .brand{font-size:22px}
  .hero{height:170svh}
  .hero-side p{font-size:18px}
  .board{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:6px;padding:6px}
  .t{grid-column:span 2!important;grid-row:auto!important;padding:20px}
  .t.stat{grid-column:span 1!important;min-height:132px}
  .stat .v{font-size:30px}
  .stat .v.long{font-size:22px;line-height:30px}
  .stat .l{font-size:16px;line-height:1.3}
  .m{padding:0}
  .m.c3:not(.pw){grid-column:span 1!important}
  .m img{aspect-ratio:1;height:auto}
  .green p,.fees p{font-size:19px}
  .m figcaption{font-size:14px;left:6px;top:6px}
  .gold code{font-size:13px}
  .acts .btn{flex:1 1 auto}
  .buy code{font-size:.8em}
  .foot-name{font-size:29vw}
  .foot-row{display:block}
  .foot-links{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:auto}
  .stage{position:relative}
  .js .rise{opacity:1;transform:none;transition:none}
  .btn,.m img,.foot-big a{transition:none}
  .btn:active,.foot-big a:hover,.m a:hover img{transform:none}
}