:root{--ox:#16070B;--ox2:#250C14;--ox3:#3E1420;--gold:#D9B473;--gold-hi:#F0D9A8;
 --cream:#F6F2E7;--cream2:#EDE0C8}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ox);color:var(--cream);font-family:Poppins,system-ui,sans-serif;
 font-weight:300;line-height:1.62;overflow-x:hidden}
.wrap{max-width:1400px;margin:0 auto;padding:0 40px}
.narrow{max-width:980px}
a{color:var(--gold)}
.deco{position:fixed;inset:14px;border:1px solid rgba(217,180,115,.26);pointer-events:none;z-index:60}
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
 background:linear-gradient(180deg,rgba(22,7,11,.97),rgba(22,7,11,.82));
 border-bottom:1px solid rgba(217,180,115,.22)}
.bar{display:flex;align-items:center;gap:26px;padding-top:15px;padding-bottom:15px}
/* .bar must NOT use the padding shorthand: it would cancel the horizontal
   padding inherited from .wrap and push the wordmark outside the frame.
   (found live, 26 Aug 2026 - TJ spotted the title crossing the line) */
.mark{font-weight:700;letter-spacing:.13em;font-size:clamp(15px,1.35vw,18px);white-space:nowrap;
 text-decoration:none;color:var(--cream)}
.mark i{color:var(--gold);font-style:normal}
nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
nav a{color:var(--cream2);text-decoration:none;font-size:12.5px;letter-spacing:.13em;
 text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;transition:.22s}
nav a:hover,nav a.on{color:var(--gold);border-color:var(--gold)}
.buy{background:var(--gold);color:#2A0E16;border:none;border-radius:2px;padding:9px 17px;
 font:700 11px/1 Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
 text-decoration:none;transition:.22s;white-space:nowrap;display:inline-block}
.buy:hover{background:var(--gold-hi);transform:translateY(-2px);box-shadow:0 8px 22px rgba(217,180,115,.32)}
.hero{position:relative;padding:46px 0 38px;overflow:hidden}
.hero::after{content:"";position:absolute;width:900px;height:900px;top:-380px;right:-260px;border-radius:50%;
 background:radial-gradient(circle,rgba(62,20,32,.85),transparent 66%);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.5fr .62fr;gap:38px;align-items:center}
.eyebrow{color:var(--gold);letter-spacing:.28em;font-size:10px;text-transform:uppercase;margin-bottom:11px}
h1{font-size:clamp(23px,3.05vw,39px);font-weight:700;line-height:1.14;letter-spacing:-.3px}
h1 em{font-style:normal;color:var(--gold);display:block;font-size:.66em;font-weight:500;margin-top:9px}
.sub{margin:15px 0 20px;font-size:14.5px;color:var(--cream2);max-width:48em;opacity:.92}
.cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ghost{color:var(--gold);text-decoration:none;font-size:12px;letter-spacing:.09em;
 border-bottom:1px solid rgba(217,180,115,.45);padding-bottom:3px}
.ghost:hover{color:var(--gold-hi)}
.kindle{margin-top:11px;font-size:11.5px;color:rgba(246,242,231,.55)}
.cover{display:block;position:relative;transition:.45s cubic-bezier(.2,.7,.3,1);
 box-shadow:0 30px 70px rgba(0,0,0,.65);border:1px solid rgba(217,180,115,.35)}
.cover img{display:block;width:100%;height:auto}
.cover:hover{transform:translateY(-8px) rotate(-.6deg);
 box-shadow:0 40px 90px rgba(0,0,0,.75),0 0 0 1px var(--gold)}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,transparent 32%);opacity:.65;transition:.45s}
.cover:hover::after{opacity:1}
.ticker{border-block:1px solid rgba(217,180,115,.22);background:rgba(37,12,20,.5);overflow:hidden;padding:11px 0}
.track{display:flex;gap:44px;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.fact{display:flex;align-items:baseline;gap:11px;white-space:nowrap}
.fact b{color:var(--gold);font-size:17px;font-weight:700}
.fact span{font-size:11.5px;color:rgba(246,242,231,.72)}
section{padding:52px 0}
.head{text-align:center;max-width:1280px;margin:0 auto 32px}
.head h2{font-size:clamp(19px,2.35vw,29px);font-weight:700;line-height:1.25}
.head h2 b{color:var(--gold)}
.head p{margin-top:9px;color:var(--cream2);opacity:.85;font-size:14px;
 max-width:none;margin-left:auto;margin-right:auto}
.rule{width:130px;height:1px;margin:15px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.worlds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.world{position:relative;padding:30px 20px 24px;text-align:center;text-decoration:none;
 color:var(--ac,var(--gold));border:2px solid var(--ac-dim,rgba(217,180,115,.3));
 background:rgba(37,12,20,.35);transition:.3s cubic-bezier(.2,.7,.3,1);overflow:hidden}
.world::before{content:"";position:absolute;inset:0;opacity:0;transition:.3s;
 background:radial-gradient(circle at 50% 0%,var(--ac-glow,rgba(217,180,115,.16)),transparent 68%)}
.world:hover{transform:translateY(-8px);border-color:var(--ac,var(--gold));
 box-shadow:0 20px 44px rgba(0,0,0,.5)}
.world:hover::before{opacity:1}
.world-shot{position:absolute;inset:0;overflow:hidden}
.world-shot img{width:100%;height:100%;object-fit:cover;display:block;
 opacity:.85;transition:.45s cubic-bezier(.2,.7,.3,1)}
.world.has-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(22,7,11,.18) 0%,rgba(22,7,11,.68) 48%,rgba(22,7,11,.93) 100%)}
.world.has-shot:hover .world-shot img{opacity:1;transform:scale(1.06)}
.world.has-shot{background:var(--ox)}
.world.has-shot .world-ico,.world.has-shot h3,.world.has-shot p,.world.has-shot .go,
.world.has-shot .soon{position:relative;z-index:2}
.world.has-shot .ico{filter:drop-shadow(0 2px 8px rgba(0,0,0,.9))}
.world-ico{height:84px;display:grid;place-items:center;margin-bottom:12px}
.ico{width:88px;height:88px;transition:.4s}
.world:hover .ico{transform:scale(1.09) rotate(-3deg)}
.world h3{font-size:19px;letter-spacing:.09em;color:var(--ac,var(--gold));font-weight:700;
 margin-bottom:9px;line-height:1.15;
 text-shadow:0 2px 10px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.95)}
.world.has-shot h3{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 26px var(--ac)}
.world p{font-size:13px;color:rgba(246,242,231,.72);line-height:1.55;min-height:66px}
.go{font-size:11px;letter-spacing:.14em;color:var(--ac,var(--gold));opacity:0;transition:.3s;display:block}
.world:hover .go{opacity:1}
.soon{position:absolute;top:10px;right:10px;font-size:9px;letter-spacing:.14em;
 color:var(--ac-dim,rgba(217,180,115,.6));border:1px solid var(--ac-dim,rgba(217,180,115,.3));padding:3px 7px}
.news-wrap{background:rgba(37,12,20,.55);border-block:1px solid rgba(217,180,115,.2)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px}
/* Use the class, never an inline grid-template-columns: an inline style outranks
   every media query below and the cards stay side by side on a phone. The news
   page did exactly that and rendered 128px-wide columns. (found 26 Aug 2026) */
.posts.two{grid-template-columns:1fr 1fr}
@media(max-width:820px){.posts{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:600px){.posts,.posts.two{grid-template-columns:1fr;gap:18px}}
.post{border-left:2px solid var(--gold);padding:5px 0 5px 17px;transition:.25s}
.post:hover{padding-left:23px}
.post time{font-size:10.5px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.post h4{font-size:15.5px;font-weight:500;margin:9px 0 7px;line-height:1.35}
.post h4 a{color:var(--cream);text-decoration:none}
.post h4 a:hover{color:var(--gold)}
.post p{font-size:13px;color:rgba(246,242,231,.65)}
.vocab{border:1px solid var(--gold);padding:26px 30px;display:flex;gap:24px;align-items:center;
 justify-content:space-between;flex-wrap:wrap;background:rgba(22,7,11,.5)}
.vocab p{max-width:44em;font-size:15px}
.vocab b{color:var(--gold);font-weight:500}
.comp{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.pdf{display:block;text-decoration:none;aspect-ratio:8.5/11;border:1px solid rgba(217,180,115,.4);
 background:linear-gradient(160deg,var(--ox3),var(--ox));display:grid;place-items:center;text-align:center;
 padding:30px;transform:rotate(-3deg);transition:.4s;box-shadow:0 26px 60px rgba(0,0,0,.55)}
.pdf:hover{transform:rotate(0) scale(1.03)}
.pdf span{color:var(--gold);font-size:11px;letter-spacing:.2em;line-height:2.1}
.form{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.form input{flex:1;min-width:220px;background:rgba(246,242,231,.06);color:var(--cream);
 border:1px solid rgba(217,180,115,.4);padding:13px 16px;font:300 14px Poppins,sans-serif}
.form input::placeholder{color:rgba(246,242,231,.4)}
.form input:focus{outline:none;border-color:var(--gold)}
.tiny{font-size:12px;color:rgba(246,242,231,.5);margin-top:13px}
/* article pages */
.page-hero{padding:40px 0 24px;border-bottom:1px solid rgba(217,180,115,.2)}
.page-hero h1{font-size:clamp(22px,2.8vw,34px)}
.page-hero .lede{margin-top:12px;font-size:15.5px;color:var(--gold);max-width:none;line-height:1.45}
article{padding:36px 0 54px;font-size:15.5px}
article p{margin-bottom:20px;color:rgba(246,242,231,.88)}
article h2{font-size:21px;font-weight:700;margin:34px 0 13px;color:var(--cream)}
article h2.named{color:var(--gold)}
article h2.named .tag{color:var(--cream);font-weight:500;letter-spacing:.01em;white-space:nowrap}
article h2.named .tag::before{content:"·";margin:0 .42em;opacity:.55;font-weight:300}
article h3{font-size:13px;letter-spacing:.18em;color:var(--gold);margin:40px 0 14px;font-weight:500}
article strong{color:var(--cream);font-weight:500}
article em{color:var(--gold);font-style:italic}
article ul,article ol{margin:0 0 22px 22px}
article ol li{margin-bottom:11px}
article table{width:100%;border-collapse:collapse;margin:20px 0 26px;font-size:14.5px}
article th{text-align:left;background:var(--ox3);color:var(--cream);font-weight:500;
 font-size:11px;letter-spacing:.13em;text-transform:uppercase;padding:9px 12px}
article td{padding:9px 12px;border-bottom:1px solid rgba(217,180,115,.16);
 color:rgba(246,242,231,.85);vertical-align:top}
article td b{color:var(--gold);font-weight:500;white-space:nowrap}
article ul{margin:0 0 22px 20px}article li{margin-bottom:9px;color:rgba(246,242,231,.85)}
.callout{border-left:3px solid var(--gold);background:rgba(62,20,32,.4);padding:22px 26px;margin:30px 0}
.callout p:last-child{margin-bottom:0}
.warn{border-left-color:#E0A030;background:rgba(90,45,15,.3)}
.disc{font-size:11.5px;line-height:1.6;color:rgba(246,242,231,.5);
 max-width:none;margin:18px auto 10px;text-align:center}
.disc b{color:rgba(246,242,231,.72);font-weight:500}
.xp-disc{font-size:13px;color:rgba(246,242,231,.6);border-left:2px solid rgba(217,180,115,.4);
 padding-left:14px;margin:34px 0 -8px;line-height:1.6}
.xp-disc b{color:var(--gold);font-weight:500}
.cform{display:flex;flex-direction:column;gap:16px;margin:30px 0 18px;max-width:620px}
.cform label{display:flex;flex-direction:column;gap:6px;font:500 11px Poppins,sans-serif;
 letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cform input,.cform textarea,.cform select{background:rgba(246,242,231,.06);color:var(--cream);
 border:1px solid rgba(217,180,115,.4);padding:13px 15px;font:300 15px Poppins,sans-serif;
 border-radius:2px;text-transform:none;letter-spacing:normal}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--gold)}
.cform textarea{resize:vertical;min-height:130px;line-height:1.55}
.cform select option{background:var(--ox2);color:var(--cream)}
.cform button{align-self:flex-start;margin-top:4px}
/* experience panels */
.xp{border:1px solid rgba(217,180,115,.34);border-top:3px solid var(--ac,var(--gold));
 background:linear-gradient(180deg,rgba(62,20,32,.34),rgba(22,7,11,.22));
 padding:30px 32px;margin:38px 0}
.xp-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.xp-tag{font:700 10.5px Poppins,sans-serif;letter-spacing:.26em;color:var(--ac,var(--gold));
 border:1px solid currentColor;padding:4px 9px;line-height:1;white-space:nowrap}
.xp-head h3{font-size:24px;font-weight:700;color:var(--cream);line-height:1.1;margin:0}
.xp-lede{font-size:15.5px;color:var(--cream2);margin-bottom:22px}
.xp-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:24px}
.xp h4{font:500 10.5px Poppins,sans-serif;letter-spacing:.2em;text-transform:uppercase;
 color:var(--gold);padding-bottom:7px;border-bottom:1px solid rgba(217,180,115,.24);margin-bottom:14px}
.xp-stages{list-style:none;counter-reset:xs}
.xp-stages li{counter-increment:xs;position:relative;padding-left:30px;margin-bottom:15px}
.xp-stages li::before{content:counter(xs);position:absolute;left:0;top:1px;width:20px;height:20px;
 border:1px solid var(--ac,var(--gold));border-radius:50%;color:var(--ac,var(--gold));
 font:500 11px Poppins,sans-serif;display:flex;align-items:center;justify-content:center}
.xp-stages b{color:var(--cream);font-weight:700;font-size:14.5px}
.xp-when{float:right;font:300 11.5px Poppins,sans-serif;color:var(--gold);opacity:.85;
 white-space:nowrap;margin-left:10px}
.xp-stages p{font-size:14px;color:rgba(246,242,231,.8);margin-top:2px;line-height:1.55}
.xp-fx{list-style:none}
.xp-fx li{font-size:14px;color:rgba(246,242,231,.82);margin-bottom:11px;padding-left:14px;
 position:relative;line-height:1.55}
.xp-fx li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
 background:var(--ac,var(--gold));border-radius:50%}
.xp-fx b{color:var(--cream);font-weight:500}
.xp-gb{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.xp-good,.xp-bad{padding:16px 18px;border-left:3px solid}
.xp-good{border-color:#7FB069;background:rgba(60,90,50,.24)}
.xp-bad{border-color:#C4553F;background:rgba(110,40,28,.24)}
.xp-gb h5{font:700 10.5px Poppins,sans-serif;letter-spacing:.24em;text-transform:uppercase;margin-bottom:7px}
.xp-good h5{color:#A8CE93}.xp-bad h5{color:#E09079}
.xp-gb p{font-size:13.8px;color:rgba(246,242,231,.85);line-height:1.55}
.xp-note{margin-top:20px;padding-top:16px;border-top:1px solid rgba(217,180,115,.2);
 font-size:14px;color:var(--cream2);font-style:italic}
@media(max-width:820px){.xp{padding:24px 20px}.xp-grid,.xp-gb{grid-template-columns:1fr;gap:22px}
 .xp-head h3{font-size:20px}.xp-when{float:none;display:block;margin:0 0 2px}}
/* dictionary */
.dletter{font:700 13px Poppins,sans-serif;letter-spacing:.22em;color:var(--gold);
 border-bottom:1px solid rgba(217,180,115,.28);padding:0 0 6px;margin:34px 0 14px}
.djump{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.djump a{font:500 12px Poppins,sans-serif;letter-spacing:.1em;text-decoration:none;
 border:1px solid rgba(217,180,115,.32);padding:5px 10px;line-height:1;transition:.2s}
.djump a:hover{background:var(--gold);color:var(--ox);border-color:var(--gold)}
.dsearch{position:sticky;top:66px;z-index:40;background:rgba(22,7,11,.96);backdrop-filter:blur(10px);
 padding:18px 0;border-bottom:1px solid rgba(217,180,115,.2);margin-bottom:8px}
.dsearch input{width:100%;background:rgba(246,242,231,.06);color:var(--cream);
 border:1px solid rgba(217,180,115,.4);padding:14px 18px;font:300 16px Poppins,sans-serif}
.dsearch input:focus{outline:none;border-color:var(--gold)}
.dcount{font-size:12px;color:rgba(246,242,231,.5);margin-top:9px}
.entry{border:1px solid rgba(217,180,115,.2);background:rgba(37,12,20,.3);padding:24px 26px;margin-bottom:14px}
.entry h3{font-size:19px;letter-spacing:.06em;color:var(--gold);margin:0 0 14px;font-weight:700}
.meta{display:grid;gap:6px;margin-bottom:14px;font-size:13.5px;color:rgba(246,242,231,.78)}
.meta b{color:var(--cream);font-weight:500}
.aka{font-size:13.5px;line-height:1.9;color:rgba(246,242,231,.7)}
.aka .lab{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--gold);margin:12px 0 6px}

.filters{border:1px solid rgba(217,180,115,.22);background:rgba(37,12,20,.32);padding:20px 22px;margin-bottom:28px}
.frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.flab{font-size:10.5px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;
 min-width:78px;opacity:.8}
.f{background:none;border:1px solid rgba(217,180,115,.3);color:rgba(246,242,231,.72);
 padding:7px 14px;font:300 12.5px Poppins,sans-serif;cursor:pointer;transition:.2s;border-radius:2px}
.f:hover{border-color:var(--gold);color:var(--gold)}
.f.on{background:var(--gold);border-color:var(--gold);color:#2A0E16;font-weight:500}
.nsearch{width:100%;background:rgba(246,242,231,.06);color:var(--cream);
 border:1px solid rgba(217,180,115,.35);padding:12px 16px;font:300 15px Poppins,sans-serif;margin-top:6px}
.nsearch:focus{outline:none;border-color:var(--gold)}
.ni{border-left:2px solid rgba(217,180,115,.35);padding:4px 0 4px 20px;margin-bottom:30px;transition:.25s}
.ni:hover{border-left-color:var(--gold);padding-left:26px}
.ni-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.ni-meta time{font-size:11px;letter-spacing:.13em;color:var(--gold);text-transform:uppercase}
.chip{font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(217,180,115,.4);
 color:rgba(246,242,231,.7);padding:3px 9px;border-radius:2px}
.chip.r{border-color:rgba(246,242,231,.28)}
.place{font-size:12px;color:rgba(246,242,231,.5)}
/* letter-spacing:0 is load-bearing. `.ni` IS an <article>, so the wide-tracking
   rule `article h3{letter-spacing:.18em}` - written for the explore-page section
   headings - was leaking in and stretching every archive headline by 3.42px per
   character. Invisible with 7 entries, obvious with 40. (found live, 26 Aug 2026) */
.ni h3{font-size:19px;font-weight:500;color:var(--cream);margin-bottom:8px;line-height:1.32;
 letter-spacing:0;text-transform:none}
.ni p{font-size:14.5px;color:rgba(246,242,231,.72);margin-bottom:8px}
.src{font-size:12px;letter-spacing:.08em;color:var(--gold);text-decoration:none}
.src:hover{text-decoration:underline}

/* Year rules in the archive. With 40 entries a flat list is a wall of text; these
   give the eye somewhere to land, and they make the shape of the story visible -
   one entry in 1970, then a 49-year gap, then fourteen in 2026 alone. */
.yr{display:flex;align-items:baseline;gap:14px;margin:52px 0 26px;
 border-bottom:1px solid rgba(217,180,115,.22);padding-bottom:9px}
.yr:first-child{margin-top:8px}
.yr span{font-size:clamp(26px,3vw,38px);font-weight:700;color:var(--gold);line-height:1}
.yr i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
 color:rgba(246,242,231,.42)}
/* Source link. Every claim after 2024 carries one, so a reader never has to
   take our word for anything. */
.nsrc{display:inline-block;margin-top:4px;font-size:11.5px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--gold);text-decoration:none;
 border-bottom:1px solid rgba(217,180,115,.35);padding-bottom:2px}
.nsrc:hover{border-bottom-color:var(--gold)}
.post .nsrc{margin-top:12px}
/* 22px is too small a target for a thumb. 44px is the accepted floor. */
@media(max-width:820px){.nsrc{min-height:44px;display:inline-flex;align-items:center}
 .yr{margin:38px 0 20px}.yr span{font-size:28px}}

.fig{margin:26px 0 30px}
.fig img{max-width:100%;max-height:min(560px,72vh);width:auto;height:auto;display:block;
 margin:0 auto;border:1px solid rgba(217,180,115,.32)}
.fig.wide img{max-height:min(460px,60vh)}
.fig figcaption{margin-top:9px;font-size:12.5px;line-height:1.55;color:rgba(246,242,231,.72)}
.cred{display:block;margin-top:3px;font-size:11px;color:rgba(246,242,231,.42)}
.cred a{color:rgba(217,180,115,.7);text-decoration:none}
.cred a:hover{color:var(--gold)}
.galwrap{background:rgba(37,12,20,.5);border-block:1px solid rgba(217,180,115,.2);
 padding:48px 0 54px;margin-top:52px}
.galtitle{font-size:22px;font-weight:700;color:var(--cream);margin-bottom:8px}
.galead{font-size:14px;color:rgba(246,242,231,.7);margin-bottom:26px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.gcard{margin:0}
.gcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
 border:1px solid rgba(217,180,115,.28);transition:.35s cubic-bezier(.2,.7,.3,1)}
.gcard:hover img{border-color:var(--gold);transform:translateY(-4px);
 box-shadow:0 16px 34px rgba(0,0,0,.5)}
.gcard figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:rgba(246,242,231,.7)}
.world h3{font-size:clamp(15px,1.45vw,19px)}
@media(max-width:940px){.world h3{font-size:17px}}
@media(max-width:640px){.gal{grid-template-columns:1fr 1fr;gap:12px}}

.creditlist{list-style:none;margin:0 0 30px;padding:0}
.creditlist li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
 padding:9px 0;border-bottom:1px solid rgba(217,180,115,.14);font-size:14px}
.creditlist b{color:var(--cream);font-weight:500;white-space:nowrap}
.cfile{text-align:right;font-size:12.5px;color:rgba(246,242,231,.5);line-height:1.4}
.cfile a{color:rgba(246,242,231,.5);text-decoration:none}
.cfile a:hover{color:var(--gold);text-decoration:underline}
.licnote{font-size:13px;color:rgba(246,242,231,.55);margin:-4px 0 14px}
@media(max-width:640px){.creditlist li{flex-direction:column;gap:3px}.cfile{text-align:left}}
footer{border-top:1px solid rgba(217,180,115,.22);padding:52px 0 34px;background:rgba(37,12,20,.4)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:36px}
.fgrid h5{font-size:11px;letter-spacing:.19em;color:var(--gold);margin-bottom:15px;font-weight:500}
.fgrid a{display:block;color:rgba(246,242,231,.68);text-decoration:none;font-size:13.5px;padding:4px 0;transition:.2s}
.fgrid a:hover{color:var(--gold);padding-left:5px}
.tsuite{display:flex;align-items:center;gap:14px;margin-top:22px;opacity:.75}
.tsuite img{width:44px;height:44px}
.tsuite div{font-size:12px;line-height:1.5;color:rgba(246,242,231,.6)}
.tsuite b{display:block;color:var(--gold);font-size:12.5px;letter-spacing:.1em;font-weight:500}
.sign{text-align:center;color:var(--gold);font-size:15px;padding-top:26px;border-top:1px solid rgba(217,180,115,.16)}
.copy{text-align:center;font-size:11.5px;color:rgba(246,242,231,.38);margin-top:14px}
.note{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:70;background:var(--gold);
 color:#2A0E16;padding:9px 20px;font-size:11.5px;font-weight:500;letter-spacing:.08em;border-radius:2px;
 box-shadow:0 8px 26px rgba(0,0,0,.5)}
@media(max-width:940px){
 .hero-grid,.comp{grid-template-columns:1fr}
 .hero{padding:26px 0 30px}
 .hero-grid{gap:26px}
 .cover{max-width:190px;margin:0 auto}
 h1{font-size:clamp(22px,6.4vw,30px)}
 .sub{font-size:14px;margin:12px 0 16px}
 .head{margin-bottom:26px}
 .worlds{grid-template-columns:repeat(2,1fr)}
 .posts,.fgrid{grid-template-columns:1fr}
 .cover{max-width:280px}
 /* The nav used to be display:none here, which left phone users with no way to
    reach any page except by scrolling to the footer. Wrap it onto its own row
    instead, scrollable sideways if it needs to be. (found on a real 369px
    viewport, 25 Aug 2026) */
 .bar{flex-wrap:wrap;gap:10px 16px;padding:12px 0}
 .mark{flex:1 1 auto;font-size:12px}
 header .buy{flex:0 0 auto;padding:11px 15px;font-size:11px;min-height:42px;
  display:inline-flex;align-items:center}
 header nav{display:flex;order:3;width:100%;gap:20px;overflow-x:auto;
  border-top:1px solid rgba(217,180,115,.18);padding-top:9px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
 header nav::-webkit-scrollbar{display:none}
 header nav a{white-space:nowrap;padding:10px 0;font-size:12px;min-height:42px;
  display:inline-flex;align-items:center}
 /* thumbs need something to hit */
 .buy,.ghost,.pdf{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 .djump a{min-height:38px;display:inline-flex;align-items:center}}
/* nothing should ever push the page sideways on a phone */
html{overflow-x:hidden}