:root{
  --bg:#E6E9EC; --surface:#F3F5F6; --ink:#1E2328; --muted:#56606A;
  --line:#C3C9CF; --accent:#7A5719; --accent-ink:#F3F5F6; --plate:#2A3037; --plate-ink:#E9ECEE;
  --brass:#B08A3E; --ok:#2F6B45; --bad:#9A2E2E;
  --display:"Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body:"Literata", Georgia, "Times New Roman", serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#1A1F24; --surface:#232930; --ink:#E4E7EA; --muted:#A3ACB5;
    --line:#39414A; --accent:#D2AA55; --accent-ink:#1A1F24; --plate:#0F1317; --plate-ink:#E4E7EA;
    --ok:#6FBF8B; --bad:#E07A7A; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body)}
a{color:var(--accent);text-underline-offset:.18em}
a:focus-visible,button:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
img{max-width:100%}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--surface);padding:.5rem 1rem;z-index:10}
h1,h2{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:.005em;margin:0}

.site-head{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:baseline;justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line)}
.brand{font:800 1.6rem/1 var(--display);color:var(--ink);text-decoration:none}
.brand span{font-weight:600;color:var(--muted)}
.site-head nav{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}
.site-head nav a{font:600 1.05rem/1.4 var(--display);color:var(--muted);text-decoration:none;letter-spacing:.02em}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px}

main{padding:0 clamp(1rem,4vw,3rem) 4rem;max-width:72rem;margin:0 auto}

/* Home hero: a stamped iron plate */
.hero{position:relative;margin:clamp(1.5rem,5vw,3.5rem) 0 2.5rem;padding:clamp(2rem,6vw,4.5rem) clamp(1.25rem,5vw,4rem);
  background:var(--plate);color:var(--plate-ink);border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -18px 40px rgba(0,0,0,.35)}
.hero h1{font-size:clamp(2.9rem,9.5vw,7.25rem);max-width:12ch;
  text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.6)}
.hero .creed{font-size:clamp(1.05rem,2.2vw,1.3rem);max-width:44ch;margin:1.5rem 0 0;color:#C9CFD5}
.stamp{position:absolute;top:clamp(1rem,3vw,1.75rem);right:clamp(1rem,3vw,1.75rem);margin:0;
  font:600 .95rem/1 var(--display);letter-spacing:.06em;color:var(--brass);
  border:2px solid var(--brass);border-radius:50%;width:5.2rem;height:5.2rem;display:grid;place-items:center;
  transform:rotate(-12deg);opacity:.9;white-space:nowrap;font-size:1.05rem}
@media (max-width:540px){.stamp{position:static;margin-bottom:1rem;width:4.4rem;height:4.4rem}}

.intro p{max-width:60ch;font-size:1.15rem;margin:0 0 2.5rem}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));border-top:2px solid var(--ink)}
.door{display:block;padding:1.4rem 1.25rem 1.6rem 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.door h2{font-size:2.4rem}
.door p{margin:.4rem 0 0;color:var(--muted);max-width:34ch}
.door:hover h2{color:var(--accent)}

.page-head{margin:clamp(1.5rem,5vw,3rem) 0 2rem;max-width:62ch}
.page-head h1{font-size:clamp(2.6rem,7vw,4.75rem)}
.page-head p{margin:.75rem 0 0;font-size:1.125rem;color:var(--muted)}
.disclose{font-size:.95rem!important;border-left:3px solid var(--brass);padding-left:.75rem}

/* Books: each book stands on the shelf with its spine */
.shelf{display:grid;gap:1.25rem}
.book{display:grid;grid-template-columns:3.25rem 1fr;background:var(--surface);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.spine{display:flex;align-items:center;justify-content:center;padding:.75rem 0}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);font:800 .95rem/1 var(--display);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:14rem}
.spine-iron{background:#2A3037;color:#E9ECEE}
.spine-steel{background:#5E6B77;color:#F1F3F5}
.spine-brass{background:#A5823A;color:#1C1A15}
.book-body{padding:1.25rem 1.4rem 1.4rem}
.book h2{font-size:clamp(1.7rem,3.5vw,2.3rem)}
.sub{margin:.25rem 0 .75rem;color:var(--muted);font-style:italic}
.book-body p{max-width:60ch}
.status{font:600 1rem/1 var(--display);letter-spacing:.03em;color:var(--muted)}
.btn{display:inline-block;margin-top:.5rem;padding:.7rem 1.1rem;background:var(--accent);color:var(--accent-ink);
  font:700 1.05rem/1 var(--display);letter-spacing:.03em;text-decoration:none;border-radius:3px}
.btn:hover{filter:brightness(1.08)}

.list{max-width:62ch}
.item{padding:1.5rem 0;border-top:1px solid var(--line)}
.item h2{font-size:2rem;margin-bottom:.5rem}
.item p{margin:.5rem 0}
.find{margin-top:2rem;color:var(--muted)}
.prose{max-width:62ch;font-size:1.125rem}

.gear{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);max-width:52rem}
.gear-item{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.gear-item h2{font-size:1.75rem}
.gear-item p{margin:.35rem 0 0;color:var(--muted);max-width:44ch}

.site-foot{border-top:1px solid var(--line);padding:1.5rem clamp(1rem,4vw,3rem) 2.5rem;color:var(--muted);font-size:.95rem;
  display:flex;flex-wrap:wrap;gap:.25rem 2rem}
.site-foot p{margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}