@import url("/fonts/fonts.css");

/* ============================================================
   NEWQZ — design system
   Warm editorial paper + ink, echoing CityWright's architectural
   sketch aesthetic. Per-game accent colours are set via a
   [data-accent] attribute on any container.
   ============================================================ */

:root {
  /* paper & ink */
  --paper:        #F6F1E7;
  --paper-2:      #EFE8DA;
  --surface:      #FFFDF8;
  --surface-2:    #FBF7EE;
  --ink:          #191713;
  --ink-2:        #3B352C;
  --muted:        #6E6558;
  --muted-2:      #716758;   /* AA on all three light grounds: surface 5.46, paper 4.93, paper-2 4.55 */
  --rule:         #E2D9C7;
  --rule-strong:  #99886B;   /* 3.06:1 on --paper — the border is the only thing defining ghost buttons */

  /* brand */
  --brand:        #B4552B;
  --brand-ink:    #8A3F1E;
  --brand-soft:   #F6E4D8;

  /* per-game accents (defaults = brand) */
  --accent:       var(--brand);
  --accent-ink:   var(--brand-ink);
  --accent-soft:  var(--brand-soft);

  /* semantic */
  --ok:           #4F7A43;
  --ok-soft:      #E4EEDD;
  --warn:         #9A6B12;
  --danger:       #A33716;   /* 4.5:1 on --paper and --surface */
  --warn-soft:    #F7EBD2;

  /* shape */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Always-dark panel tokens. The footer and .ink-panel are dark by DESIGN, not
     because the theme happens to be light — so they must not be built on --ink,
     which flips to near-white in dark mode and made the footer white-on-white. */
  --panel:        #191713;
  --panel-surface:#241F16;
  --panel-rule:   #37311F;
  --panel-fg:     #CFC6B4;
  --panel-fg-dim: #A79C89;
  --panel-fg-max: #F4EFE3;
  --panel-accent: #F3C9A8;

  --shadow-sm: 0 1px 2px rgba(45,35,20,.06), 0 1px 3px rgba(45,35,20,.05);
  --shadow:    0 2px 4px rgba(45,35,20,.05), 0 8px 20px -6px rgba(45,35,20,.12);
  --shadow-lg: 0 4px 8px rgba(45,35,20,.05), 0 24px 48px -12px rgba(45,35,20,.20);

  --maxw: 1180px;
  --gut: clamp(1.15rem, 4vw, 2.75rem);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  color-scheme: light;
}

/* accent themes */
[data-accent="citywright"]  { --accent:#B4552B; --accent-ink:#8A3F1E; --accent-soft:#F7E6D9; }
[data-accent="spire"]       { --accent:#5B5FA8; --accent-ink:#43478A; --accent-soft:#E6E6F5; }
[data-accent="crow"]        { --accent:#3F8F4B; --accent-ink:#2E6E38; --accent-soft:#E2F0E1; }
[data-accent="merch"]       { --accent:#8A6D3B; --accent-ink:#6B5329; --accent-soft:#F2E9D6; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #17150F;
    --paper-2:     #1E1B14;
    --surface:     #201D16;
    --surface-2:   #262218;
    --ink:         #F4EFE3;
    --ink-2:       #DDD5C4;
    --muted:       #A79C89;
    --muted-2:     #958874;   /* AA on all four dark grounds; #877D6C was 4.15 on --surface */
    --rule:        #37311F;
    --rule-strong: #4B4330;
    --brand:       #E08B57;
    --brand-ink:   #F0A87A;
    --brand-soft:  #3A2718;
    --ok:          #86BC74; --ok-soft:#22301C;
    --warn:        #D9A752; --warn-soft:#332715;
    --danger:      #F0937A;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 2px 4px rgba(0,0,0,.3), 0 8px 20px -6px rgba(0,0,0,.5);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.3), 0 24px 48px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) [data-accent="citywright"] { --accent:#E08B57; --accent-ink:#F0A87A; --accent-soft:#3A2718; }
  :root:not([data-theme="light"]) [data-accent="spire"]      { --accent:#9CA0E8; --accent-ink:#B4B7F0; --accent-soft:#22233F; }
  :root:not([data-theme="light"]) [data-accent="crow"]       { --accent:#6FC47C; --accent-ink:#8AD695; --accent-soft:#1B2E1E; }
  :root:not([data-theme="light"]) [data-accent="merch"]      { --accent:#C9A664; --accent-ink:#DBBB7F; --accent-soft:#2E2718; }

  /* Accents lighten in dark mode, so a filled button needs dark text on top of
     it — white-on-light-orange fails contrast. */
  :root:not([data-theme="light"]) .btn { --btn-fg: #17150F; }
  :root:not([data-theme="light"]) .btn-ghost { --btn-fg: var(--ink); }
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

h1,h2,h3,h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0;
}
h1 { font-size: clamp(2.35rem, 6.2vw, 4.1rem); letter-spacing: -.028em; font-variation-settings:"opsz" 120; }
h2 { font-size: clamp(1.75rem, 3.7vw, 2.7rem); letter-spacing: -.022em; font-variation-settings:"opsz" 90; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); }
h4 { font-size: 1.05rem; }
/* Promoted from h4 to h3 for correct document outline; keeps the h4 size. */
.h-sm { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip {
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem; border-radius:0 0 var(--r) 0;
  font-weight:600; font-size:.9rem;
}
.skip:focus { left:0; }

/* ---------------- layout ---------------- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow { max-width: 760px; }
.wrap-wide { max-width: 1360px; }
section { position: relative; }
.section { padding-block: clamp(3.4rem, 8vw, 6.5rem); }
.section-sm { padding-block: clamp(2.4rem, 5vw, 3.8rem); }
.tint { background: var(--paper-2); }
.tint-accent { background: var(--accent-soft); }
.ink-panel { background: var(--panel); color: var(--panel-fg); }
.ink-panel h1,.ink-panel h2,.ink-panel h3 { color: var(--panel-fg-max); }
.ink-panel .lede { color: var(--panel-fg-dim); }
.ink-panel .eyebrow { color: var(--panel-accent); }
.ink-panel .eyebrow::before { background: var(--panel-accent); }
.ink-panel a { color: var(--panel-accent); }
/* --muted-2 is tuned for paper grounds; on the always-dark panel it cannot pass. */
.ink-panel .tiny, .ink-panel .small, .ink-panel .stat-src { color: var(--panel-fg-dim); }

.grid { display:grid; gap: clamp(1.1rem, 2.4vw, 1.9rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(320px,100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(285px,100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); }
.stack > * + * { margin-top: 1rem; }

/* ---------------- typographic bits ---------------- */
.eyebrow {
  font-size: .74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: var(--accent-ink); margin:0 0 .85rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before { content:""; width:26px; height:2px; background: var(--accent); flex:none; border-radius:2px; }
.eyebrow.center { justify-content:center; }
.lede { font-size: clamp(1.06rem, 1.9vw, 1.28rem); color: var(--muted); line-height:1.6; max-width: 62ch; }
.small { font-size:.85rem; color: var(--muted); }
.tiny  { font-size:.78rem; color: var(--muted-2); }
.center { text-align:center; }
.center .lede { margin-inline:auto; }
.serif { font-family: var(--serif); }

.section-head { max-width: 66ch; margin-bottom: clamp(1.8rem,3.5vw,2.9rem); }
.section-head.center { margin-inline:auto; text-align:center; }

/* ---------------- buttons ---------------- */
.btn {
  --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--sans); font-weight:600; font-size:.94rem; line-height:1;
  padding:.88rem 1.5rem; border-radius:999px; border:1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s, color .16s, border-color .16s;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn-ghost:hover { --btn-bd: var(--accent); --btn-fg: var(--accent-ink); }
.btn-ink { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
.btn-sm { padding:.62rem 1.1rem; font-size:.86rem; }
.btn-lg { padding:1.03rem 1.9rem; font-size:1rem; }
.btn[aria-disabled="true"] { opacity:.5; pointer-events:none; }

/* Inline icons carry no intrinsic size, so without this they render at the SVG
   default 300x150 and blow the layout apart. Every icon() output gets .ico. */
.ico { width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.13em; }
.btn .ico { width:1.05em; height:1.05em; vertical-align:0; }
.social .ico { width:17px; height:17px; vertical-align:0; }

.btn-row { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.btn-row.center { justify-content:center; }

/* ---------------- pills / tags ---------------- */
.pill {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  padding:.35rem .75rem; border-radius:999px;
  background: var(--accent-soft); color: var(--accent-ink);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  white-space:nowrap;
}
.pill-ok   { background: var(--ok-soft);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.pill-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.pill-plain{ background: var(--surface-2); color: var(--muted); border-color: var(--rule); }
.pill-row { display:flex; flex-wrap:wrap; gap:.45rem; }
.dot { width:.45rem;height:.45rem;border-radius:50%;background:currentColor;flex:none; }
.dot-live { background:#3F8F4B; box-shadow:0 0 0 0 rgba(63,143,75,.55); animation: pulse 2.2s infinite; }
@keyframes pulse { 70%{box-shadow:0 0 0 7px rgba(63,143,75,0);} 100%{box-shadow:0 0 0 0 rgba(63,143,75,0);} }

/* ---------------- cards ---------------- */
.card {
  background: var(--surface); border:1px solid var(--rule); border-radius: var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.card-link { text-decoration:none; color:inherit; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--rule-strong); color:inherit; }
.card-body { padding: clamp(1.1rem,2.2vw,1.5rem); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card-body > h3 { margin:0; }
.card-media { position:relative; aspect-ratio: 16/10; background: var(--paper-2); overflow:hidden; }
.card-media img { width:100%; height:100%; object-fit:cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card-link:hover .card-media img { transform: scale(1.045); }
.card-media.tall { aspect-ratio: 4/5; }
.card-media.square { aspect-ratio: 1/1; }
.card-media.contain { background: var(--surface-2); }
.card-media.contain img { object-fit: contain; padding: 8%; }
/* Box-art banners must never be cropped through their own title. */
.card-media.fit-art { background: var(--art-bg, var(--surface-2)); }
.card-media.fit-art img { object-fit: contain; padding: 0; }
.card-media.top img { object-position: 50% 12%; }
.card-media .float-tag { position:absolute; top:.8rem; left:.8rem; z-index:2; backdrop-filter: blur(8px); }
.card-foot { margin-top:auto; padding-top:.7rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }

.price { font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--ink); }
.price small { font-size:.75rem; color:var(--muted); font-family:var(--sans); font-weight:500; }

/* ---------------- header ---------------- */
.site-header {
  position: sticky; top:0; z-index:100;
  background: var(--paper); /* fallback where color-mix() is unsupported */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.stuck { border-bottom-color: var(--rule); box-shadow: 0 1px 12px rgba(45,35,20,.06); }
.nav { display:flex; align-items:center; gap:1rem; height:68px; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--serif); font-weight:700; font-size:1.32rem; letter-spacing:.01em; margin-right:auto; }
.brand:hover { color:var(--ink); }
.brand-mark {
  width:32px;height:32px;border-radius:9px;flex:none;
  background: linear-gradient(140deg, var(--brand), #D98A4E 55%, #8A3F1E);
  display:grid;place-items:center;color:#fff;font-size:.85rem;font-weight:700;font-family:var(--sans);letter-spacing:-.03em;
  box-shadow: var(--shadow-sm);
}
.nav-links { display:flex; align-items:center; gap:.15rem; }
.nav-links a {
  text-decoration:none; color:var(--ink-2); font-size:.92rem; font-weight:500;
  padding:.5rem .78rem; border-radius:999px; transition: background .15s, color .15s; white-space:nowrap;
}
.nav-links a:hover { background: var(--paper-2); color:var(--ink); }
.nav-links a[aria-current="page"] { color:var(--brand-ink); background: var(--brand-soft); font-weight:600; }
.nav-cta { margin-left:.5rem; }
.nav-toggle { display:none; background:none;border:1px solid var(--rule-strong);border-radius:10px;width:42px;height:38px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink); }

@media (max-width: 900px) {
  .nav-toggle { display:flex; }
  /* Collapsed by DEFAULT in CSS rather than by a JS-set [hidden]: otherwise the
     panel renders permanently open (covering the page) whenever JS has not run. */
  .nav-links {
    display:none;
    position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch; gap:.15rem;
    background: var(--paper); border-bottom:1px solid var(--rule); padding: .8rem var(--gut) 1.4rem;
    box-shadow: var(--shadow); overflow-y:auto;
    max-height: calc(100vh - 68px);  /* fallback for browsers without dvh */
    max-height: calc(100dvh - 68px);
  }
  .nav-links[data-open="true"] { display:flex; }
  .nav-links a { padding:.72rem .8rem; border-radius:var(--r); font-size:1rem; }
  .nav-cta { margin-left:0; margin-top:.4rem; }
  .nav-cta .btn { width:100%; }
}

/* ---------------- hero ---------------- */
.hero { position:relative; overflow:hidden; padding-block: clamp(2.6rem,6vw,4.6rem) clamp(3rem,7vw,5.4rem); }
.hero-grid { display:grid; gap: clamp(1.8rem,4vw,3.4rem); align-items:center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.02fr 1.18fr; } }
.hero h1 { margin-bottom:.4em; }
.hero-art { position:relative; border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--shadow-lg); border:1px solid var(--rule); }
.hero-art img { width:100%; aspect-ratio: 16/9; object-fit:cover; }
.hero-stats {
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.1rem,2.6vw,1.8rem) clamp(1.2rem,3vw,2.2rem);
  margin-top:1.9rem; padding-top:1.5rem; border-top:1px solid var(--rule);
}
@media (min-width:520px) and (max-width:939px) { .hero-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat-n { font-family:var(--serif); font-size: clamp(1.5rem,3vw,2rem); font-weight:700; line-height:1; color:var(--ink); display:block; letter-spacing:-.02em; }
.stat-l { font-size:.79rem; color:var(--muted); margin-top:.35rem; display:block; line-height:1.35; }
.stat-src { font-size:.7rem; color:var(--muted-2); }
.stat-src a { color:inherit; }

/* paper texture */
.paper-tex::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.45;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(180,85,43,.07), transparent 46%),
    radial-gradient(circle at 84% 12%, rgba(91,95,168,.06), transparent 42%),
    radial-gradient(circle at 62% 88%, rgba(63,143,75,.05), transparent 46%);
}
.paper-tex > * { position:relative; z-index:1; }

/* ---------------- stat band ---------------- */
.statband { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(165px,100%),1fr)); }
.statband > div { background:var(--surface); padding: clamp(1.1rem,2.4vw,1.6rem); text-align:center; }

/* ---------------- quotes / reviews ---------------- */
.quote {
  background: var(--surface); border:1px solid var(--rule); border-radius: var(--r-lg);
  padding: clamp(1.25rem,2.5vw,1.7rem); display:flex; flex-direction:column; gap:.85rem; height:100%;
}
.quote blockquote { margin:0; font-family:var(--serif); font-size:1.03rem; line-height:1.52; color:var(--ink); font-variation-settings:"opsz" 40; }
.quote blockquote::before { content:"\201C"; color:var(--accent); font-size:1.9em; line-height:0; vertical-align:-.32em; margin-right:.06em; }
.quote-foot { margin-top:auto; display:flex; align-items:center; gap:.7rem; padding-top:.7rem; border-top:1px solid var(--rule); flex-wrap:wrap; }
/* let the name take the room it needs and keep the source link on one line */
.quote-foot > span:not(.avatar) { flex:1 1 auto; min-width:0; }
.quote-foot > a { flex:0 0 auto; }
.avatar { width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:.82rem;
  background: var(--accent-soft); color:var(--accent-ink); border:1px solid color-mix(in srgb,var(--accent) 20%, transparent); }
.quote-who { font-weight:600; font-size:.88rem; line-height:1.3; }
.quote-meta { font-size:.76rem; color:var(--muted); }
.stars { color:#C98A2E; letter-spacing:.08em; font-size:.9rem; line-height:1; }
.verified { display:inline-flex; align-items:center; gap:.28rem; font-size:.72rem; font-weight:600; color:var(--ok); }
.verified svg { width:.9em;height:.9em; }

/* pull quote */
.pullquote { border-left:3px solid var(--accent); padding-left: clamp(1rem,2.4vw,1.6rem); margin: 2rem 0; }
.pullquote p { font-family:var(--serif); font-size: clamp(1.15rem,2.3vw,1.45rem); line-height:1.45; color:var(--ink); }
.pullquote cite { font-style:normal; font-size:.85rem; color:var(--muted); }

/* ---------------- spec table ---------------- */
/* Always an even grid — 2x2 then 4x1 — so a 4-item spec block never orphans a cell. */
.specs { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
  grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width:1100px) { .specs { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.specs > div { background:var(--surface); padding:1rem .7rem; text-align:center; min-width:0; }
.spec-v { font-family:var(--serif); font-weight:600; font-size:clamp(.98rem,2vw,1.15rem); display:block; line-height:1.2; overflow-wrap:anywhere; hyphens:auto; }
.spec-k { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; margin-top:.3rem; display:block; }

.deftable { width:100%; border-collapse:collapse; font-size:.93rem; table-layout:fixed; }
.deftable th, .deftable td {
  text-align:left; padding:.78rem .5rem; border-bottom:1px solid var(--rule); vertical-align:top;
  /* long URLs and product names must break rather than push the page sideways */
  overflow-wrap:anywhere; word-break:break-word;
}
.deftable th { width:38%; font-weight:600; color:var(--muted); font-size:.85rem; }
.deftable tr:last-child th, .deftable tr:last-child td { border-bottom:0; }

/* ---------------- gallery ---------------- */
.gallery { display:grid; gap:.85rem; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); }
.gallery figure { margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--rule); background:var(--surface); }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.gallery figcaption { padding:.6rem .8rem; font-size:.79rem; color:var(--muted); }

/* ---------------- steps / features ---------------- */
.steps { counter-reset: s; display:grid; gap:1.1rem; }
.step { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.step::before {
  counter-increment:s; content:counter(s);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:.9rem;
  border:1px solid color-mix(in srgb,var(--accent) 25%, transparent);
}
.step .h-sm { margin:.28rem 0 .3rem; }
.step p { font-size:.93rem; color:var(--muted); margin:0; }

.feature { display:flex; gap:.9rem; align-items:flex-start; }
.feature .ficon { width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font-size:1.1rem; }
.feature .h-sm { margin:.15rem 0 .28rem; }
.feature p { font-size:.92rem; color:var(--muted); margin:0; }

/* district cards (CityWright) */
.district { position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--rule); background:var(--surface); }
.district img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.district .d-body { padding:1.1rem 1.2rem 1.25rem; }
.district .h-sm { margin:0 0 .3rem; font-size:1.12rem; }
.district p { font-size:.9rem; color:var(--muted); margin:0; }
.district .d-chip { position:absolute; top:.75rem; left:.75rem; }

/* ---------------- breadcrumb ---------------- */
.crumbs { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.82rem; color:var(--muted); padding-top:1.4rem; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--accent-ink); text-decoration:underline; }
.crumbs span[aria-current] { color:var(--ink); font-weight:500; }

/* ---------------- notice ---------------- */
.notice {
  display:flex; gap:.85rem; align-items:flex-start;
  background: var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 28%, transparent);
  border-radius:var(--r); padding:1rem 1.15rem; font-size:.9rem; color:var(--ink-2);
}
.notice.info { background:var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 25%, transparent); }
.notice .n-ico { flex:none; font-size:1.05rem; line-height:1.4; }
.notice strong { color:var(--ink); }

/* ---------------- form ---------------- */
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-size:.85rem; font-weight:600; }
.input, .textarea, .select {
  font-family:inherit; font-size:.95rem; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--rule-strong); border-radius:var(--r);
  padding:.75rem .95rem; width:100%; transition:border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent);
}
.textarea { min-height:120px; resize:vertical; }
.inline-form { display:flex; gap:.6rem; flex-wrap:wrap; }
.inline-form .input { flex:1 1 220px; width:auto; }
.form-msg { font-size:.87rem; margin-top:.7rem; }
.form-msg.ok { color:var(--ok); }
.form-msg.err { color:var(--danger); }

/* ---------------- accordion ---------------- */
/* No overflow:hidden here — it clipped the summary's focus ring entirely, which
   made all 21 FAQ rows invisible to keyboard users. The children round instead. */
.acc { border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); }
.acc + .acc { margin-top:.65rem; }
.acc summary {
  cursor:pointer; padding:1rem 1.2rem; font-weight:600; font-size:.98rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; font-size:1.35rem; color:var(--accent); flex:none; line-height:1; transition:transform .2s; }
.acc[open] summary::after { transform:rotate(45deg); }
.acc summary { border-radius:calc(var(--r) - 1px); }
.acc[open] summary { border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; }
.acc summary:hover { background:var(--surface-2); }
.acc .acc-body { padding:0 1.2rem 1.2rem; font-size:.93rem; color:var(--muted); }
.acc .acc-body p { margin-bottom:.7em; }

/* ---------------- filter bar ---------------- */
.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; }
.filter-btn {
  font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:.5rem 1rem; border-radius:999px; border:1.5px solid var(--rule-strong);
  background:transparent; color:var(--ink-2); transition:all .15s;
}
.filter-btn:hover { border-color:var(--accent); color:var(--accent-ink); }
.filter-btn[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------------- footer ---------------- */
.site-footer { background: var(--panel); color:var(--panel-fg); padding-block: clamp(2.8rem,6vw,4.2rem) 2rem; margin-top: clamp(3rem,7vw,5rem); }
.site-footer h4 { color:var(--panel-fg-max); font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem; }
.site-footer a { color:var(--panel-fg); text-decoration:none; font-size:.9rem; display:inline-block; padding:.2rem 0; }
.site-footer a:hover { color:var(--panel-accent); text-decoration:underline; }
.foot-grid { display:grid; gap:2.2rem; grid-template-columns: repeat(auto-fit,minmax(min(190px,100%),1fr)); }
.foot-grid ul { list-style:none; margin:0; padding:0; }
.foot-brand { max-width:34ch; }
.foot-brand .brand { color:var(--panel-fg-max); margin-bottom:.8rem; }
.foot-brand p { font-size:.88rem; color:var(--panel-fg-dim); line-height:1.6; }
.foot-bottom { margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--panel-rule); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--panel-fg-dim); }
.social { display:flex; gap:.55rem; margin-top:1rem; }
.social a { width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--panel-surface);border:1px solid var(--panel-rule);padding:0; }
.social a:hover { background:#2E2718; border-color:#4B4330; color:var(--panel-accent); }
.social svg { width:17px;height:17px; }

/* ---------------- misc ---------------- */
.hr { border:0; border-top:1px solid var(--rule); margin-block: clamp(2rem,5vw,3.4rem); }
.badge-row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.kbd { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82em; background:var(--surface-2); border:1px solid var(--rule); border-bottom-width:2px; border-radius:5px; padding:.1em .4em; }
.prose { max-width:70ch; }
.prose h2 { margin-top:2.2em; }
.prose h3 { margin-top:1.8em; }
.prose ul, .prose ol { padding-left:1.3em; margin:0 0 1.1em; }
.prose li { margin-bottom:.45em; }
.prose li::marker { color:var(--accent); }

.reveal { opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } }

/* logo strip */
.logostrip { display:flex; flex-wrap:wrap; gap: clamp(1.2rem,3.5vw,2.8rem); align-items:center; justify-content:center; }
.logostrip a { font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--muted); text-decoration:none; opacity:.82; transition:opacity .2s,color .2s; }
.logostrip a:hover { opacity:1; color:var(--ink); }

@media print {
  .site-header, .site-footer, .btn, .nav-toggle { display:none !important; }
  body { background:#fff; color:#000; }
}