@font-face{font-family:"Alegreya";src:url(/fonts/alegreya-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya";src:url(/fonts/alegreya-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Alegreya";src:url(/fonts/alegreya-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url(/fonts/caveat-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--paper:#f3eddf;--paper2:#ebe3cf;--ink:#1e2940;--ink2:#46506a;--rule:#c9bfa6;--grid:rgba(30,41,64,.055);--manila:#e6cf98;--manila-d:#c9ad6b;--red:#b0402a;--moss:#3f5b3a;--sea:#2f5d6e;--card:#fbf8f0;
--serif:"Alegreya",Georgia,"Times New Roman",serif;--hand:"Caveat","Segoe Print","Bradley Hand",cursive;--mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 var(--serif);
background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
img{max-width:100%;height:auto;display:block}
a{color:var(--sea);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:99}
.skip:focus{left:1rem}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0 0 .6rem;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.55rem,3vw,2.1rem);margin-top:2.6rem}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
.lede{font-size:1.28rem;color:var(--ink2);max-width:42em}
.mono,.label{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.label{color:var(--red)}
small,.small{font-size:.9rem;color:var(--ink2)}
hr{border:0;border-top:1px dashed var(--rule);margin:2.5rem 0}
/* header */
.top{border-bottom:2px solid var(--ink);background:rgba(243,237,223,.94);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.45rem}
.brand svg{width:34px;height:34px}
.brand span.dot{color:var(--red)}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.2rem;flex-wrap:wrap}
.nav a{display:block;padding:.35rem .6rem;color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;border-radius:2px}
.nav a:hover,.nav a[aria-current=page]{background:var(--ink);color:var(--paper)}
.navbtn{display:none;margin-left:auto;background:none;border:2px solid var(--ink);font:600 .8rem var(--mono);padding:.4rem .7rem;color:var(--ink);cursor:pointer}
@media (max-width:900px){.navbtn{display:block}.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:2px solid var(--ink)}.nav.open{display:block}.nav ul{flex-direction:column;padding:.5rem 1.25rem 1rem}.nav a{font-size:.95rem;padding:.6rem .4rem}}
/* hero */
.hero{padding:3rem 0 2rem;display:grid;grid-template-columns:1.25fr 1fr;gap:2.5rem;align-items:center}
.hero h1 em{font-style:italic;color:var(--red);font-weight:400}
.stamp{display:inline-block;border:2px solid var(--red);color:var(--red);font:600 .75rem var(--mono);letter-spacing:.12em;padding:.25rem .6rem;transform:rotate(-2deg);text-transform:uppercase;margin-bottom:1rem}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-top:2rem}}
/* plates & tags */
.plate{background:var(--card);border:1px solid var(--rule);padding:.7rem .7rem .5rem;box-shadow:2px 3px 0 rgba(30,41,64,.12);position:relative}
.plate img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper2)}
.plate figcaption,.credit{font-family:var(--mono);font-size:.68rem;color:var(--ink2);margin-top:.4rem;line-height:1.4}
.credit a{color:var(--ink2)}
.tilt-l{transform:rotate(-1.2deg)}.tilt-r{transform:rotate(1.1deg)}
.tag{display:inline-block;background:var(--manila);border:1px solid var(--manila-d);font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem .2rem 1.1rem;position:relative;color:var(--ink)}
.tag:before{content:"";position:absolute;left:.4rem;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--manila-d)}
.tag.live{background:#cfe0c4;border-color:#8aa57d}
.tag.soon{background:transparent;border-style:dashed;color:var(--ink2)}
.sci{font-style:italic}
/* grid & cards */
.grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--card);border:1px solid var(--rule);padding:1.1rem 1.2rem;position:relative}
.card h3{margin-top:.2rem}
.card .plate{box-shadow:none;border:0;padding:0;margin:-1.1rem -1.2rem 1rem}
.card .plate img{aspect-ratio:3/2}
.card .plate figcaption{padding:0 .8rem}
.specimen{border-left:6px solid var(--manila)}
.btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--ink);color:var(--paper);border:2px solid var(--ink);font:600 .85rem var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:.65rem 1rem;text-decoration:none;cursor:pointer;border-radius:2px}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0}
/* section bands */
.band{border-top:2px solid var(--ink);margin-top:3rem;padding-top:.4rem}
.band>.label{display:block;margin-bottom:.8rem}
/* animal of day */
.aotd{display:grid;grid-template-columns:1fr 1.1fr;gap:1.6rem;align-items:center;background:var(--card);border:1px solid var(--rule);padding:1.3rem}
@media (max-width:720px){.aotd{grid-template-columns:1fr}}
.aotd .plate{box-shadow:none}
.aotd h3{font-size:1.9rem}
/* Useless note */
.useless{display:grid;grid-template-columns:110px 1fr;gap:1rem;align-items:start;background:#fffbe8;border:1px solid #e1d6a8;padding:1rem 1.2rem;position:relative;transform:rotate(-.6deg);box-shadow:2px 3px 0 rgba(30,41,64,.1);margin:2rem 0}
.useless:before{content:"";position:absolute;top:-12px;left:46%;width:90px;height:24px;background:rgba(176,64,42,.18);transform:rotate(3deg)}
.useless img{width:110px;cursor:pointer}
.useless .note{font:500 1.55rem/1.25 var(--hand);color:#2a3b7a}
.useless .sig{font:500 1.2rem var(--hand);color:var(--red);display:block;margin-top:.3rem}
.useless button.who{all:unset;cursor:pointer}
.useless button.who:focus-visible{outline:3px solid var(--red)}
@media (max-width:560px){.useless{grid-template-columns:70px 1fr}.useless img{width:70px}.useless .note{font-size:1.35rem}}
/* journal */
.journal{background:#fffdf3;border:1px solid var(--rule);padding:2rem clamp(1rem,4vw,3rem);background-image:repeating-linear-gradient(transparent 0 33px,rgba(47,93,110,.18) 33px 34px);box-shadow:3px 4px 0 rgba(30,41,64,.12)}
.entry{font:500 1.6rem/34px var(--hand);color:#273a78;margin:0 0 34px}
.entry .date{font:600 .75rem/34px var(--mono);color:var(--red);letter-spacing:.08em;text-transform:uppercase;display:block}
.entry .strike{text-decoration:line-through;text-decoration-color:var(--red)}
.entry .fact{font:400 1.02rem/34px var(--serif);color:var(--ink);background:rgba(230,207,152,.35);padding:0 .3rem}
/* tables */
table{border-collapse:collapse;width:100%;background:var(--card);font-size:1rem}
th,td{border:1px solid var(--rule);padding:.55rem .7rem;text-align:left;vertical-align:top}
th{font:600 .75rem var(--mono);text-transform:uppercase;letter-spacing:.05em;background:var(--paper2)}
.tablewrap{overflow-x:auto}
/* myths */
.myth{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);background:var(--card);margin-bottom:1rem}
.myth>div{padding:1rem 1.1rem}
.myth .m{border-right:1px dashed var(--rule)}
.myth .m p{text-decoration:line-through;text-decoration-color:rgba(176,64,42,.7);color:var(--ink2)}
.myth .label.ok{color:var(--moss)}
@media (max-width:640px){.myth{grid-template-columns:1fr}.myth .m{border-right:0;border-bottom:1px dashed var(--rule)}}
/* map */
.map{background:#f7f1e1;border:1px solid var(--rule);padding:.5rem}
.map svg{width:100%;height:auto;display:block}
.map a text{text-decoration:underline}
.map a:focus-visible ellipse,.map a:hover ellipse,.map a:hover path.isle{stroke:var(--red);stroke-width:3}
/* tree */
.tree ul{list-style:none;margin:0;padding-left:1.3rem;border-left:1px dashed var(--rule)}
.tree>ul{border-left:0;padding-left:0}
.tree li{margin:.2rem 0}
.tree button{font:inherit;background:none;border:0;color:var(--ink);cursor:pointer;padding:.15rem .2rem;text-align:left}
.tree button[aria-expanded]:before{content:"+ ";font-family:var(--mono);color:var(--red)}
.tree button[aria-expanded=true]:before{content:"− "}
.tree .rank{font:600 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-left:.4rem}
.tree .leaf{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.treebox{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.treebox .panel{position:sticky;top:84px}
@media (max-width:760px){.treebox{grid-template-columns:1fr}.treebox .panel{position:static}}
/* games */
.game{background:var(--card);border:2px solid var(--ink);padding:1.3rem;max-width:760px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1rem 0}
@media (max-width:520px){.opts{grid-template-columns:1fr}}
.opt{font:1.05rem var(--serif);text-align:left;background:var(--paper);border:1px solid var(--ink);padding:.75rem .9rem;cursor:pointer;color:var(--ink)}
.opt:hover{background:var(--manila)}
.opt.right{background:#cfe0c4;border-color:var(--moss)}
.opt.wrong{background:#f0cfc6;border-color:var(--red)}
.opt:disabled{cursor:default}
.score{font:600 .85rem var(--mono);text-transform:uppercase;letter-spacing:.05em}
.feedback{min-height:3em}
.hl{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center}
.hl .vs{font:600 1rem var(--mono)}
@media (max-width:620px){.hl{grid-template-columns:1fr}.hl .vs{text-align:center}}
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem;margin-top:1rem}
.bin{border:2px dashed var(--ink2);background:var(--paper);padding:.6rem;min-height:90px;font:inherit;cursor:pointer;text-align:left;color:var(--ink)}
.bin strong{display:block;font:600 .75rem var(--mono);text-transform:uppercase;letter-spacing:.05em}
.bin.over{background:var(--manila)}
.chip{display:inline-block;font:.8rem var(--mono);background:var(--card);border:1px solid var(--rule);padding:.1rem .35rem;margin:.15rem}
.chip.bad{border-color:var(--red);color:var(--red)}
.crop{width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule);background:var(--paper2);position:relative}
.crop img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
/* support */
.support{display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:1.6rem;align-items:center;background:var(--card);border:1px solid var(--rule);padding:1.2rem}
.support img{border:1px solid var(--rule)}
@media (max-width:640px){.support{grid-template-columns:1fr}}
/* kit */
.kit li{margin-bottom:.6rem}
.disclose{font:.8rem var(--mono);color:var(--ink2);border:1px dashed var(--rule);padding:.5rem .7rem;display:inline-block;background:var(--card)}
/* footer */
.foot{margin-top:4rem;border-top:2px solid var(--ink);background:var(--paper2);padding:2rem 0 2.5rem;font-size:.98rem}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.5rem}
.foot h2{font-size:.8rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:0 0 .5rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:.25rem 0}
.foot .fine{margin-top:1.8rem;font:.75rem/1.6 var(--mono);color:var(--ink2)}
.pill{display:inline-block;font:.72rem var(--mono);border:1px solid var(--rule);padding:.05rem .4rem;margin-left:.3rem;color:var(--ink2)}
.toast{position:fixed;right:1rem;bottom:1rem;max-width:340px;background:#fffbe8;border:1px solid #e1d6a8;padding:.8rem 1rem;font:500 1.35rem/1.25 var(--hand);color:#273a78;box-shadow:3px 4px 0 rgba(30,41,64,.18);transform:rotate(-1deg);z-index:50;display:none}
.toast.show{display:block}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}