/* Sudoku Dungeon site. Palette from docs/stijl/tokens-papier.json (the game's own paper style).
   Font: Atkinson Hyperlegible (SIL OFL), self-hosted: no third-party requests. */
@font-face{font-family:"Atkinson";src:url("/assets/AtkinsonHyperlegible-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url("/assets/AtkinsonHyperlegible-Semibold.ttf") format("truetype");font-weight:600;font-display:swap}
:root{
  --paper:#F2E6C7; --paper-2:#E6D4AD; --card:#FCF5E0; --ink:#38261A; --blue:#2B4575;
  --accent:#B2382B; --edge:#7A5C3D; --line:rgba(92,66,46,.35);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --radius:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden}
body{margin:0; background:var(--paper); color:var(--ink); font:400 18px/1.65 "Atkinson",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
h1,h2,h3{font-weight:600; line-height:1.2}
h1{font-size:clamp(32px,6vw,52px); margin:0 0 var(--s2)}
h2{font-size:clamp(24px,4vw,32px); margin:var(--s5) 0 var(--s2)}
h3{font-size:20px; margin:var(--s3) 0 var(--s1)}
a{color:var(--accent); text-underline-offset:3px}
a:hover{color:var(--ink)}
a:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:4px}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1000px; margin:0 auto; padding:0 var(--s3)}
.prose{max-width:720px; margin:0 auto; padding:var(--s4) var(--s3) var(--s5)}
.lede{font-size:21px; color:var(--ink)}
.muted{color:var(--edge)}
.ta-center{text-align:center}
header.site{border-bottom:1px solid var(--line); background:var(--paper)}
header.site .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3); padding-top:var(--s1); padding-bottom:var(--s1)}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); text-decoration:none; min-height:44px}
.brand img{width:32px; height:32px; border-radius:6px}
nav.main{margin-left:auto; display:flex; flex-wrap:wrap; gap:0 4px; font-size:16px}
nav.main a,footer nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 10px; color:var(--ink); text-decoration:none}
nav.main a:hover,footer nav a:hover{color:var(--accent); text-decoration:underline}
nav.main a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px}
@media (max-width:680px){nav.main{margin-left:0; width:100%}}
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s4); align-items:center; padding:var(--s5) 0 var(--s4)}
.hero img{border-radius:var(--radius); box-shadow:0 8px 24px rgba(56,38,26,.22); max-width:320px; margin:0 auto}
@media (max-width:760px){.hero{grid-template-columns:1fr; padding-top:var(--s4)}}
.cta{display:inline-flex; align-items:center; min-height:48px; padding:0 22px; background:var(--accent); color:#fff; border-radius:var(--radius); text-decoration:none; font-weight:600}
.cta:hover{background:var(--ink); color:#fff}
.cta.alt{background:transparent; color:var(--ink); border:2px solid var(--edge)}
.cta.alt:hover{background:var(--card); color:var(--ink)}
.row{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s3); margin:var(--s3) 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3); box-shadow:0 2px 8px rgba(56,38,26,.12)}
.card h3{margin-top:0}
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s3); margin:var(--s3) 0}
.shots figure{margin:0}
.shots img{border-radius:var(--radius); box-shadow:0 4px 14px rgba(56,38,26,.2)}
figcaption{font-size:15px; color:var(--edge); margin-top:var(--s1)}
.section{padding:var(--s4) 0; border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}
table{width:100%; border-collapse:collapse; margin:var(--s2) 0; font-size:16px}
th,td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line)}
th{font-weight:600; width:34%}
.tablewrap{overflow-x:auto}
details{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:0 var(--s2); margin:10px 0}
summary{cursor:pointer; min-height:48px; display:flex; align-items:center; font-weight:600}
details p{margin:0 0 var(--s2)}
.note{border-left:4px solid var(--accent); background:var(--card); padding:var(--s2) var(--s3); border-radius:0 var(--radius) var(--radius) 0; margin:var(--s3) 0}
.note p{margin:6px 0}
.relics{columns:2 280px; column-gap:var(--s4); padding:0; list-style:none; font-size:16px}
.relics li{break-inside:avoid; margin-bottom:10px}
.relics b{font-weight:600}
code{font-family:ui-monospace,Menlo,monospace; font-size:.9em; background:var(--paper-2); padding:1px 5px; border-radius:4px}
footer{border-top:1px solid var(--line); padding:var(--s3) 0; font-size:15px; color:var(--edge)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s1) var(--s3)}
footer nav{display:flex; flex-wrap:wrap}
.reveal{transition:opacity .5s ease, transform .5s ease}
.js-reveal .reveal:not(.in){opacity:0; transform:translateY(12px)}
@media (prefers-reduced-motion:reduce){.reveal{transition:none}}
.top{margin-top:var(--s4)}
.shots.one{grid-template-columns:minmax(200px,320px)}
.flush{padding-left:0;padding-right:0}
.wide{width:100%;border-radius:var(--radius);box-shadow:0 6px 20px rgba(56,38,26,.2)}