/* T2 Forged. One shell (iron and ember), three worlds set by the body class. */
:root{
  --iron:#232b30; --steel:#46535b; --ash:#c9d0d2; --paper:#eef0ec; --ember:#ff7a1a;
  --bg:var(--iron); --fg:var(--paper); --muted:#aeb8bb; --accent:var(--ember); --accent-fg:#201006;
  --display:"Big Shoulders Display",Impact,sans-serif; --body:"Archivo",system-ui,sans-serif;
  --title:var(--display);
}
body.zzz{--bg:#071a17; --fg:#e4f5e8; --muted:#9dc2ae; --accent:#6dff3a; --accent-fg:#06200b; --title:"Creepster",var(--display)}
body.uns{--bg:#6d4526; --fg:#fff7ea; --muted:#efdcc2; --accent:#bff06a; --accent-fg:#1c3206; --title:"Pixelify Sans",var(--display)}
body.hr{--bg:#e2d0a4; --fg:#22190c; --muted:#5e4c2e; --accent:#b3201c; --accent-fg:#fff; --title:"Special Elite",Courier,monospace; --body:"Special Elite",Courier,monospace}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.6 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1100px;margin-inline:auto;padding-inline:16px}

/* Shell */
.bar{background:var(--iron);color:var(--paper);font-family:"Archivo",system-ui,sans-serif;border-bottom:4px solid var(--ember)}
.bar .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between;padding-block:10px}
.mark{font:800 1.7rem/1 "Big Shoulders Display",Impact,sans-serif;letter-spacing:.02em;text-decoration:none}
.mark b{color:var(--ember);font-weight:800}
.bar nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.95rem}
.bar nav a{text-decoration:none;padding:4px 0}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--ember)}
footer{background:var(--iron);color:var(--ash);font:400 .95rem/1.5 "Archivo",system-ui,sans-serif;padding-block:28px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}

/* Home */
.forge{padding-block:clamp(36px,7vw,84px) clamp(26px,5vw,52px)}
.forge h1{font:900 clamp(4.4rem,19vw,15rem)/.82 var(--display);margin:0;padding-bottom:.14em;letter-spacing:-.005em;
  background:linear-gradient(180deg,#fff3dd 0%,#ffc069 36%,var(--ember) 62%,#a33a10 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.forge p{max-width:34em;margin:20px 0 0;font-size:1.2rem;color:var(--ash)}
.slab{display:block;position:relative;text-decoration:none;overflow:hidden;border-top:4px solid #12171a}
.slab img{width:100%;height:clamp(240px,38vw,440px);object-fit:cover;transition:transform .35s ease}
.slab:hover img,.slab:focus-visible img{transform:scale(1.025)}
.slab .tag{position:absolute;left:0;right:0;bottom:0;padding:48px 0 14px;background:linear-gradient(transparent,rgba(5,10,10,.86))}
.slab .tag .wrap{display:flex;flex-wrap:wrap;gap:0 18px;align-items:baseline;justify-content:space-between;color:#fff}
.slab h2{margin:0;font-size:clamp(1.9rem,5vw,3.2rem);line-height:1.1;font-weight:400}
.slab.z h2{font-family:"Creepster",var(--display);color:#79ff45}
.slab.u h2{font-family:"Pixelify Sans",var(--display);color:#d9f7a4}
.slab .status{font-size:1rem}
.slab.r{background:#e2d0a4;color:#22190c;padding-block:clamp(30px,6vw,56px)}
.slab.r h2{font-family:"Special Elite",Courier,monospace;font-size:clamp(1.6rem,4vw,2.4rem)}
.slab.r .wrap{display:grid;gap:12px}
.slab.r .row{font:400 1.1rem/1.9 "Special Elite",Courier,monospace}
.x{background:#14100a;color:#14100a;border-radius:1px;padding:.1em 0;box-decoration-break:clone;-webkit-box-decoration-break:clone;user-select:none}

/* Game pages */
.top{position:relative;overflow:hidden}
.top>img{width:100%;max-height:560px;object-fit:cover}
.title{padding-block:clamp(26px,5vw,48px) 8px}
.title h1{font:400 clamp(2.8rem,9vw,5.4rem)/1 var(--title);margin:0;color:var(--accent)}
.lede{font-size:1.3rem;line-height:1.45;max-width:32em;margin:14px 0 0}
.status{color:var(--muted);margin:10px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.btn{display:inline-block;padding:11px 20px;border:2px solid var(--accent);background:var(--accent);color:var(--accent-fg);font-weight:600;text-decoration:none;border-radius:3px}
.btn.ghost{background:transparent;color:var(--fg)}
.btn:hover{filter:brightness(1.1)}
.copy{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px 48px;padding-block:36px}
.copy h2{font:400 1.7rem/1.15 var(--title);margin:0 0 10px;color:var(--accent)}
.copy p{margin:0 0 14px;max-width:62ch}
.copy ul{margin:0;padding-left:1.1em}
.copy li{margin-bottom:8px}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:48px}
.shots a{display:block}
.shots a:first-child{grid-column:1/-1}
.shots img{width:100%;aspect-ratio:16/9;object-fit:cover}
.next{border-top:2px solid color-mix(in srgb,var(--fg) 24%,transparent);padding-block:22px 40px}
@media(max-width:720px){.copy{grid-template-columns:minmax(0,1fr)}.shots{grid-template-columns:minmax(0,1fr)}}

/* Hot Road file */
body.hr .sheet{max-width:820px;margin:clamp(20px,5vw,48px) auto;padding:clamp(22px,5vw,52px);background:#f0e4c5;box-shadow:0 2px 0 #b9a673;position:relative}
body.hr h1{font:400 clamp(2.2rem,8vw,3.8rem)/1.1 var(--title);margin:0;color:var(--fg)}
.stamp{display:inline-block;margin:14px 0 22px;padding:4px 14px;border:3px solid var(--accent);color:var(--accent);font-size:1.5rem;transform:rotate(-4deg)}
.file p{margin:0 0 18px;line-height:1.9}
.file dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;margin:0 0 24px}
.file dd{margin:0}.file dt{color:var(--muted)}
.exhibits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px}
.exhibits figure{margin:0;position:relative}
.exhibits img{width:100%;aspect-ratio:4/3;object-fit:cover}
.exhibits figure::after{content:"";position:absolute;left:-3%;right:-3%;top:44%;height:17%;background:#14100a;transform:rotate(-3deg)}
.exhibits figcaption{margin-top:6px;font-size:.9rem}
button.x{border:0;cursor:pointer;font:inherit;display:inline;vertical-align:baseline}
#caught{min-height:1.9em;color:var(--accent)}
@media(max-width:520px){.exhibits{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.slab img{transition:none}.slab:hover img{transform:none}}
.slab.z img{object-position:50% 12%}
.slab.z .tag{padding-top:24px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Hot Road banner: game icon, red and checkered start line */
.slab.r{background:none;padding:0}
.slab.r .wrap{display:flex}
.hrban{background:#262b35;color:#fff}
.hrban::before,.hrban::after{content:"";display:block;height:14px;background:repeating-conic-gradient(#f4f4f4 0 25%,#14161b 0 50%) 0 0/14px 14px}
.hrban .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 40px;padding-block:10px}
.hrban img{width:clamp(200px,30vw,340px);image-rendering:pixelated}
.hrt{font:700 clamp(3rem,10vw,6.4rem)/1 "Silkscreen","Courier New",monospace;color:#e8233c;margin:0;letter-spacing:-.02em}
body.hr .hrt{font:700 clamp(3rem,10vw,6.4rem)/1 "Silkscreen","Courier New",monospace;color:#e8233c}
.hrban .wrap>div{position:relative;min-width:0;flex:1 1 300px}
.hrs{position:absolute;right:4%;top:-6%;padding:2px 12px;border:3px solid #ffd23f;color:#ffd23f;font:400 clamp(1rem,2.4vw,1.5rem)/1.3 "Special Elite",Courier,monospace;transform:rotate(-6deg);background:#262b35}
.hrl{display:grid;gap:10px;margin-top:16px}
.hrl i{display:block;height:20px;background:#0c0d10}
.hrl i:first-child{width:92%}.hrl i:last-child{width:58%}
.slab.r:hover .hrban,.slab.r:focus-visible .hrban{filter:brightness(1.08)}
body.hr .sheet{margin-top:clamp(20px,4vw,36px)}
.slab.r h2.hrt{font:700 clamp(3rem,10vw,6.4rem)/1 "Silkscreen","Courier New",monospace}

/* T2 Forged brand: painted blue on paper with the black T2 mark */
:root{--brand:#0077b6;--ember:#0077b6;--iron:#16191c}
.bar{background:var(--brand);border-bottom:4px solid #111}
.mark{display:block;line-height:0}.mark img{height:56px;width:auto}
.bar nav a:hover,.bar nav a[aria-current]{color:#fff;text-decoration:underline;text-underline-offset:4px}
.forge{padding-block:clamp(20px,4vw,44px) clamp(26px,4vw,44px);background:#dfe2dc url(img/paper.jpg) center/cover;color:#16191c}
.forge h1{all:unset;display:block}
.forge h1 img{width:min(100%,920px)}
.forge p{color:#16191c;margin:8px 0 0}
.forge .wrap{max-width:1100px}
@media(max-width:720px){.slab img{height:auto}.slab.z .tag{padding-top:10px}}

/* Round 5: paper site background, one centred column on every screen size */
html{background:#dfe2dc url(img/paper.jpg) center/cover fixed}
body,body.zzz,body.uns,body.hr{background:transparent}
main{max-width:1180px;margin-inline:auto}
body.zzz main,body.uns main,body.hr main{background:var(--bg)}
.forge{background:none;text-align:center;padding-inline:16px}
.forge .wrap{padding:0}
.forge h1 img{margin-inline:auto}
.forge p{margin-inline:auto}
.slab,.slab.r{border-top:0;margin-top:clamp(16px,2.4vw,28px);padding:0}
.slab:last-child{margin-bottom:clamp(16px,2.4vw,28px)}
.slab img,.top>img{width:100%;height:auto;max-height:none;object-fit:initial}
.slab:hover img,.slab:focus-visible img{transform:none;filter:brightness(1.08)}
.slab .tag{padding:26px 0 10px}
.sealed{display:block;position:relative;line-height:0}
.signbar{position:absolute;left:61%;top:9%;width:33%;height:33%;background:#0e0e10;transform:rotate(-3deg)}
.stampx{position:absolute;right:3%;bottom:7%;padding:.1em .5em;border:.14em solid #fbf7ee;color:#fbf7ee;background:#c3262b;font:400 clamp(1rem,2.6vw,1.9rem)/1.3 "Special Elite",Courier,monospace;transform:rotate(-5deg)}
.exhibits figure::after{height:9%;top:46%}
.exhibits img{aspect-ratio:16/9}
body.hr .sheet{margin:0 auto;max-width:860px;box-shadow:none;background:none}
html{background:#dfe2dc url(img/paper.jpg) center top/100% auto repeat-y}
body.uns{--bg:#050505;--fg:#fff;--muted:#d4dccb;--accent:#bff06a;--accent-fg:#1c3206}
body.uns main{background:#050505 url(img/uns-pattern.jpg) center top/1400px auto repeat}
.exhibits img{aspect-ratio:16/9}
body.hr .sheet{position:relative}
.file .stamp{position:absolute;right:clamp(16px,5vw,52px);top:clamp(24px,5vw,50px);margin:0;font-size:clamp(1.5rem,4vw,2.3rem);border-width:4px;background:transparent;transform:rotate(-7deg);opacity:.92}
@media(max-width:720px){.file .stamp{position:static;display:inline-block;margin:0 0 18px 4px}}