/*
  Site theme — Sterling homepage look (Bricolage Grotesque + Instrument Sans,
  navy ink, gold accent, pill buttons, books standing on a dark ledge).
  Loaded after each page's inline <style>, so it re-skins shared classes and
  tokens without touching content. Layout/display rules are deliberately left
  alone so each page's own responsive breakpoints keep working; sizes use
  clamp() where the inline CSS has breakpoint overrides.
*/

:root{
  --paper:#f5f6f2;
  --paper-2:#eceee8;
  --white:#ffffff;
  --ink:#0f1a24;
  --ink-2:#3f4a55;
  --muted:#55606b;
  --faint:#5f6a75;
  --ghost:#7a848e;
  --line:#dde0d8;
  --line-2:#c9cdc3;
  --navy:#0f1a24;
  --navy-2:#2a3846;
  --charcoal:#0f1a24;
  --accent:#6a5420;        /* gold for small labels/links on light (AA) */
  --accent-dk:#4f3e16;
  --gold:#d9a441;          /* gold fills: accent buttons, marks, active nav */
  --teal:#1b6b66;
  --focus:#2f6fdb;
  --sans:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
  --shadow-object:0 14px 22px -14px rgba(15,26,36,.55);
}

body{background:var(--paper);color:var(--ink);font-family:var(--sans)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em}
a{text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

/* ---------- headings ---------- */
.hero-h1{font-size:clamp(34px,4.4vw,54px);font-weight:700;line-height:1;letter-spacing:-.03em;text-transform:none}
.h-sec{font-size:clamp(24px,2.6vw,30px);font-weight:700;line-height:1.1;letter-spacing:-.02em;text-transform:none}
.pd-title{font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.lede{color:var(--ink-2)}
.philo-h{text-transform:none!important;font-weight:700!important;letter-spacing:-.02em!important}

.eyebrow{color:var(--muted)}
.mark{background:var(--gold);height:2px}

/* ---------- buttons: pills, sentence case ---------- */
.btn{height:auto;min-height:46px;padding:0 22px;border-radius:999px;border-width:1.5px;
  font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}
.btn:hover{transform:none}
.btn-solid{background:var(--ink);color:var(--paper);box-shadow:none}
.btn-solid:hover{background:#22313f;color:var(--paper);box-shadow:none}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px;letter-spacing:0}
/* on dark bands the primary action is the gold accent button */
.release .btn-solid,.ftr .btn-solid{background:var(--gold);color:var(--ink)}
.release .btn-solid:hover,.ftr .btn-solid:hover{background:#e6b65a;color:var(--ink)}

/* ---------- header ---------- */
.hdr{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.8vw,20px);letter-spacing:-.015em;text-transform:none;color:var(--ink)}
/* SGS monogram mark — the site icon itself, so header and favicon always match */
.brand::before{content:"";display:inline-block;flex:none;width:34px;height:34px;border-radius:8px;
  background:var(--ink) url("../icon.svg") center/cover no-repeat}
.navlink{font-size:15px;font-weight:500;color:var(--ink)}
.navlink::after{height:2px;bottom:0;background:var(--gold)}
.drawer a{font-family:var(--display);font-weight:700}

/* market switcher */
.mkt-btn{border-radius:999px;border-color:var(--line-2);min-height:40px;padding:0 14px}
.mkt-btn:hover{border-color:var(--ink)}
.mkt-menu{border-radius:12px}
.mkt-opt.active{color:var(--ink)}
.mkt-opt.active::after{color:var(--gold)}

/* ---------- books on a dark ledge ---------- */
.bkslot{padding:20px 12px 0;border-bottom:6px solid var(--ink);box-sizing:content-box}
.bk-face{border-radius:3px 10px 10px 3px;box-shadow:var(--shadow-object)}
.bkcard:hover .bk-face{transform:translateY(-6px);box-shadow:0 22px 28px -16px rgba(15,26,36,.6)}
.bkcard h3{font-family:var(--display)}
.viewlink{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.cardmeta .mono,.bkcard .mono[style*="var(--accent)"]{color:var(--accent)!important}

/* hero shelf ledge */
.shelf-line{height:6px;background:var(--ink)}
.shelf-cap{color:var(--muted)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(56px,7vw,88px)}
.sec-white{background:var(--white);border-block:1px solid var(--line)}
.sec-soft{background:var(--paper-2)}
.release{background:var(--ink)}
.related{background:var(--white);border-top:1px solid var(--line)}
.stat-n{color:var(--ink)}
.topic{color:var(--ink-2)}

/* ---------- product pages ---------- */
/* .crumb and .pd set padding:… 0 …, which zeroed the .wrap side margins — content ran
   to the screen edge and out of line with the header. Restore them (same values as .wrap). */
.wrap.crumb,.wrap.pd{padding-left:40px;padding-right:40px}
@media (max-width:640px){.wrap.crumb,.wrap.pd{padding-left:24px;padding-right:24px}}
.crumb a:hover{color:var(--ink)}
.pd-sub{color:var(--ink-2)}
.pd-fmt .price{font-family:var(--mono);font-weight:500}
.section-title{color:var(--muted);border-bottom-color:var(--ink)}
.feat svg path{stroke:var(--teal)}
.series-row a:hover{color:var(--accent)}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#c9d1d8}
.ftr-top{border-bottom-color:#2a3846}
.flink{color:#c9d1d8;min-height:44px;display:inline-flex;align-items:center;padding:0}
.flink:hover{color:var(--paper)}
.fhead{color:#a9b4be}
.ftr-bot{color:#a9b4be}

/* ---------- homepage new-release call to action (under the header) ---------- */
.promo{background:var(--ink);color:#c9d1d8;border-bottom:1px solid #2a3846}
.promo-in{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;padding-block:12px}
.promo-cover{width:40px;height:auto;flex:none;border-radius:2px 5px 5px 2px;box-shadow:0 6px 12px -6px rgba(0,0,0,.7)}
.promo-copy{flex:1 1 320px;margin:0;font-size:15px;line-height:1.45}
.promo-tag{display:inline-block;margin-right:10px;padding:2px 9px;border-radius:999px;background:var(--gold);color:var(--ink);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;vertical-align:2px}
.promo-copy a{color:var(--paper);font-family:var(--display);font-weight:700;text-decoration:none}
.promo-copy a:hover{text-decoration:underline}
.promo-cta{display:flex;gap:8px;flex-wrap:wrap}
.promo .btn-solid{background:var(--gold);color:var(--ink)}
.promo .btn-solid:hover{background:#e6b65a;color:var(--ink)}
.promo .btn-ghost{border-color:#5b6b7a;color:var(--paper)}
.promo .btn-ghost:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
@media (max-width:640px){
  .promo-cover{display:none}
  .promo-sub{display:block;margin-top:2px}
  .promo-cta{width:100%}
  .promo-cta .btn{flex:1 1 0}
}

/* puzzle room + 404 page headings (own markup) */
.pr-head h1,.card h1{text-transform:none;font-weight:700;letter-spacing:-.02em}
.code .zero{color:var(--gold)}
footer .foot-in{color:var(--muted)}