/* ============================================
   RENCOATS.GG — Strategy Guide
   Design tokens, layout, components
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* Palette — parchment & smoke with regimental accents */
  --bg: #f5ecd9;
  --bg-elev: #ede0c4;
  --bg-deep: #1a1612;
  --ink: #2a1f17;
  --ink-soft: #5a4a3a;
  --ink-faint: #6f5d48;
  --rule: #cdb992;
  --rule-soft: #e0d3b4;

  --red: #a82a26;
  --red-deep: #7a1d1b;
  --blue: #1f3a6b;
  --blue-deep: #142747;
  --gold: #b8893f;
  --gold-bright: #d4a655;
  --parchment: #f5ecd9;
  --success: #4a6b3a;

  /* Typography */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Crimson Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --container: 1180px;
  --container-narrow: 820px;
  --radius: 2px;

  --shadow-sm: 0 1px 2px rgba(42, 31, 23, 0.08);
  --shadow-md: 0 4px 16px rgba(42, 31, 23, 0.12);
  --shadow-lg: 0 12px 40px rgba(42, 31, 23, 0.2);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(at 20% 10%, rgba(184, 137, 63, 0.08) 0, transparent 50%),
    radial-gradient(at 80% 80%, rgba(168, 42, 38, 0.05) 0, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0.05 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--red-deep); text-decoration: none; transition: color .2s; }
a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ============== Typography ============== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 0.6em;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: 0.04em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.05em; }
h3 { font-size: 1.35rem; letter-spacing: 0.04em; }
h4 { font-size: 1.1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }

p { margin: 0 0 1.1em; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.8rem;
  display: inline-block;
}

.lede {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 60ch;
}

/* ============== Layout ============== */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; }

section { padding: 4.5rem 0; }
section.tight { padding: 2.5rem 0; }

.divider-ornament {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 2.5rem 0; color: var(--gold);
}
.divider-ornament::before, .divider-ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}
.divider-ornament svg { width: 28px; height: 28px; opacity: 0.7; }

/* ============== Header / Nav ============== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 236, 217, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; max-width: var(--container);
  margin: 0 auto; padding: 0 1.5rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: 0.6rem;
}
.brand:hover { text-decoration: none; color: var(--red-deep); }
.brand-mark {
  width: 32px; height: 32px;
  background: var(--ink);
  color: var(--gold-bright);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  border: 1.5px solid var(--gold);
}
.brand small {
  font-family: var(--font-body); font-style: italic; font-weight: 400;
  font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.05em;
  text-transform: none;
}

.nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
/* nav items must never wrap: "TIER LIST" is two words; if it wraps the
   absolutely-positioned ::after underline only covers the last line and
   looks broken. Keep this comment OUTSIDE the rule body — a comment
   between declarations was being mis-parsed by the critical-CSS
   extractor, which dropped white-space:nowrap from the inlined
   above-the-fold CSS and reintroduced the wrap on first paint. */
.nav-links a {
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); position: relative; padding: 6px 0;
  white-space: nowrap;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
}
/* underline visibility, colour & motion are defined once, later in this
   file (single sliding-indicator block) — do not add hover/active rules
   here or they will conflict. */

.nav-cta {
  font-family: var(--font-display); font-weight: 700;
  background: var(--ink); color: var(--gold-bright);
  padding: 9px 18px; font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; border: 1.5px solid var(--gold);
  transition: all .2s;
}
.nav-cta:hover {
  background: var(--red-deep); color: var(--parchment);
  text-decoration: none; border-color: var(--red-deep);
}

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  width: 40px; height: 40px; cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto;
}

/* Medium-width safety: between the mobile breakpoint and a comfortable
   desktop, progressively tighten nav spacing so the (now non-wrapping)
   items never overflow or get squeezed. Prevents the "TIER LIST" half-
   wrap / cramped state at in-between widths. */
@media (min-width: 861px) and (max-width: 1024px) {
  .nav-links { gap: 1.25rem; }
  .nav-links a { letter-spacing: 0.12em; font-size: 0.8rem; }
  .nav { padding: 0 1rem; }
}

@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    padding: 1rem 1.5rem;
  }
  .nav.open .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
  .nav.open .nav-cta { display: inline-block; margin: 1rem 1.5rem 1.5rem; }
}

/* ============== Hero ============== */

.hero {
  padding: 6rem 0 5rem;
  position: relative;
  background:
    linear-gradient(180deg, transparent 0%, rgba(26, 22, 18, 0.04) 100%),
    radial-gradient(ellipse at 30% 40%, rgba(168, 42, 38, 0.08), transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(31, 58, 107, 0.08), transparent 60%);
  border-bottom: 1px solid var(--rule);
}
.hero h1 { max-width: 18ch; margin-bottom: 1.2rem; }
.hero .lede { margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

.btn {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 14px 28px;
  border: 1.5px solid var(--ink); transition: all .2s;
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--gold-bright); border-color: var(--gold); }
.btn-primary:hover { background: var(--red-deep); color: var(--parchment); border-color: var(--red-deep); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--parchment); text-decoration: none; }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem; margin-top: 3.5rem;
  padding-top: 2.5rem; border-top: 1px solid var(--rule);
}
.stat-num {
  font-family: var(--font-display); font-size: 2.6rem;
  font-weight: 800; color: var(--ink); line-height: 1;
}
.stat-label {
  font-family: var(--font-display); font-size: 0.75rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 0.5rem;
}

/* ============== Cards / Grids ============== */

.section-head { text-align: center; margin-bottom: 3rem; }
.section-head h2 { margin-bottom: 0.5rem; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; max-width: 60ch; margin: 0 auto; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  padding: 1.8rem;
  position: relative;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid var(--rule-soft); pointer-events: none;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }

.card-class { padding-top: 2rem; }
.card-class .card-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--gold-bright);
  margin-bottom: 1.2rem; border: 1.5px solid var(--gold);
}
.card-class .card-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.card-class h3 {
  margin-bottom: 0.3rem; font-size: 1.5rem;
}
.card-class .role {
  font-family: var(--font-display); font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem; display: block;
}
.card-class p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 1.2rem; }
.card-class .meta-row {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem;
}
.tag {
  font-family: var(--font-mono); font-size: 0.72rem;
  background: var(--bg); color: var(--ink-soft);
  padding: 3px 10px; border: 1px solid var(--rule);
  letter-spacing: 0.05em;
}
.card-class .read-more {
  font-family: var(--font-display); font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red-deep); font-weight: 700;
}
.card-class .read-more::after { content: ' →'; }

/* ============== Article Layout ============== */

.article {
  padding: 3rem 0 5rem;
}
.article-header {
  text-align: center;
  padding-bottom: 2.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
}
.article-header h1 { margin: 0.5rem auto 1rem; max-width: 22ch; }
.article-meta {
  font-family: var(--font-display); font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
}
.article-meta span { display: flex; align-items: center; gap: 0.4rem; }

.article-body { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }
.article-body h2 {
  font-size: 1.7rem; margin-top: 3rem;
  padding-bottom: 0.6rem; border-bottom: 2px solid var(--gold); display: inline-block;
}
.article-body h3 { margin-top: 2rem; font-size: 1.25rem; color: var(--ink); }
.article-body p { font-size: 1.1rem; line-height: 1.7; }
.article-body blockquote {
  border-left: 3px solid var(--red); margin: 2rem 0;
  padding: 1rem 0 1rem 1.5rem; font-style: italic;
  color: var(--ink-soft); font-size: 1.15rem;
  background: var(--bg-elev);
}
.article-body ul, .article-body ol {
  font-size: 1.08rem; line-height: 1.7; padding-left: 1.4rem;
}
.article-body ul li, .article-body ol li { margin-bottom: 0.5rem; }
.article-body code {
  font-family: var(--font-mono); background: var(--ink); color: var(--gold-bright);
  padding: 2px 8px; font-size: 0.92em; border: 1px solid var(--rule);
}

/* TOC */
.toc {
  background: var(--bg-elev); border: 1px solid var(--rule);
  padding: 1.5rem 1.8rem; margin: 2rem 0;
}
.toc h4 { margin-top: 0; margin-bottom: 0.8rem; color: var(--gold); }
.toc ol {
  list-style: none; counter-reset: toc; padding: 0; margin: 0;
  font-family: var(--font-display); font-size: 0.95rem;
}
.toc ol li {
  counter-increment: toc; padding: 6px 0;
  border-bottom: 1px dotted var(--rule);
}
.toc ol li:last-child { border-bottom: 0; }
.toc ol li::before {
  content: counter(toc, upper-roman) '. ';
  color: var(--gold); font-weight: 700; letter-spacing: 0.1em;
}
.toc a { color: var(--ink); }

/* Callouts */
.callout {
  display: flex; gap: 1rem; padding: 1.2rem 1.5rem;
  background: var(--bg-elev); border-left: 4px solid var(--gold);
  margin: 1.8rem 0;
}
.callout-icon { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--gold); flex-shrink: 0; }
.callout-body p:last-child { margin: 0; }
.callout.warn { border-left-color: var(--red); background: rgba(168, 42, 38, 0.06); }
.callout.warn .callout-icon { color: var(--red); }
.callout.tip { border-left-color: var(--blue); background: rgba(31, 58, 107, 0.06); }
.callout.tip .callout-icon { color: var(--blue); }

/* Table */
.data-table {
  width: 100%; border-collapse: collapse;
  margin: 1.5rem 0; font-size: 0.98rem;
  background: var(--bg-elev); border: 1px solid var(--rule);
}
.data-table th, .data-table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--rule-soft);
}
.data-table th {
  background: var(--ink); color: var(--gold-bright);
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: var(--bg); }

/* Keybind grid */
.keybinds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.keybind-group { background: var(--bg-elev); border: 1px solid var(--rule); padding: 1.5rem; }
.keybind-group h4 { margin: 0 0 1rem; color: var(--red-deep); }
.keybind-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px dotted var(--rule);
  font-size: 0.98rem;
}
.keybind-row:last-child { border-bottom: 0; }
kbd {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
  background: var(--ink); color: var(--gold-bright);
  padding: 4px 10px; border: 1px solid var(--gold);
  border-bottom-width: 2px;
  min-width: 36px; text-align: center; display: inline-block;
}

/* Tier list */
.tier-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 1rem;
  margin-bottom: 1rem; align-items: stretch;
}
.tier-badge {
  background: var(--ink); color: var(--gold-bright);
  font-family: var(--font-display); font-weight: 800; font-size: 2.4rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--gold);
}
.tier-badge.S { background: linear-gradient(135deg, var(--red-deep), var(--red)); color: #fff7e0; }
.tier-badge.A { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--bg-deep); }
.tier-badge.B { background: var(--blue); color: var(--parchment); }
.tier-badge.C { background: var(--ink-soft); color: var(--parchment); }
.tier-content {
  background: var(--bg-elev); border: 1px solid var(--rule); padding: 1rem 1.5rem;
}
.tier-content h4 { margin: 0 0 0.4rem; color: var(--ink); }
.tier-content p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-display); font-size: 0.78rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-faint); padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule-soft); margin-bottom: 0;
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--red-deep); }
.breadcrumb .sep { margin: 0 0.6rem; color: var(--rule); }

/* Related */
.related {
  background: var(--bg-elev);
  padding: 3rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}

/* ============== Footer ============== */

.site-footer {
  background: var(--bg-deep); color: var(--rule);
  padding: 4rem 0 2rem; margin-top: 4rem;
  border-top: 4px double var(--gold);
}
.site-footer h4 { color: var(--gold-bright); font-size: 0.85rem; letter-spacing: 0.2em; margin-bottom: 1rem; }
.site-footer a { color: var(--rule-soft); }
.site-footer a:hover { color: var(--gold-bright); text-decoration: none; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(184, 137, 63, 0.25);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; font-family: var(--font-body); font-size: 0.95rem; line-height: 2; }
.footer-brand p { font-size: 0.95rem; color: var(--ink-faint); margin-top: 0.8rem; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2rem; font-family: var(--font-display);
  font-size: 0.75rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
  flex-wrap: wrap; gap: 1rem;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============== Animations ============== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1, .hero .lede, .hero-actions, .hero .stats { animation: fadeUp .7s cubic-bezier(.2,.7,.3,1) backwards; }
.hero .lede { animation-delay: .1s; }
.hero-actions { animation-delay: .2s; }
.hero .stats { animation-delay: .3s; }

/* ============== Utilities ============== */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ============================================
   SITE SEARCH
   ============================================ */

.search-trigger {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--bg);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all .2s;
  margin-right: 0.6rem;
}
.search-trigger:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: var(--bg-elev);
}
.search-trigger svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
.search-trigger .search-label {
  font-style: italic; color: var(--ink-faint);
}
.search-trigger .search-kbd {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--bg-elev);
  color: var(--ink-soft);
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  letter-spacing: 0.05em;
}

@media (max-width: 860px) {
  .search-trigger { padding: 7px 10px; }
  .search-trigger .search-label,
  .search-trigger .search-kbd { display: none; }
}

/* Modal */
.search-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26, 22, 18, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  padding: 8vh 1rem 1rem;
}
.search-modal.open { display: block; animation: searchFade .15s ease-out; }
@keyframes searchFade { from { opacity: 0; } to { opacity: 1; } }

.search-box {
  max-width: 640px; margin: 0 auto;
  background: var(--bg);
  border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: searchSlide .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes searchSlide {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-box::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid var(--rule-soft); pointer-events: none;
}

.search-input-row {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--rule);
  padding: 0 1rem;
  position: relative;
}
.search-input-row svg {
  width: 18px; height: 18px;
  stroke: var(--ink-faint); fill: none; stroke-width: 2;
  flex-shrink: 0;
}
.search-input {
  flex: 1;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--ink);
  padding: 1.1rem 1rem;
  outline: none;
}
.search-input::placeholder { color: var(--ink-faint); font-style: italic; }

.search-close {
  background: transparent; border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.12em;
  padding: 4px 8px; cursor: pointer;
  transition: all .15s;
}
.search-close:hover { border-color: var(--red); color: var(--red); }

.search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem;
}
.search-results::-webkit-scrollbar { width: 6px; }
.search-results::-webkit-scrollbar-thumb { background: var(--rule); }

.search-result {
  display: block;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  margin-bottom: 2px;
  transition: all .12s;
}
.search-result:hover,
.search-result:focus {
  background: var(--bg-elev);
  border-color: var(--gold);
  outline: none;
  text-decoration: none;
  transform: translateX(2px);
}
.search-result-cat {
  font-family: var(--font-display);
  font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.search-result-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  margin: 4px 0 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.search-result-desc {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.search-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ink-faint);
}
.search-empty-icon {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 0.8rem;
  letter-spacing: 0.1em;
}
.search-empty p {
  font-size: 0.98rem;
  margin: 0 auto 1rem;
  max-width: 36ch;
}
.search-empty strong { color: var(--ink); }

.search-shortcuts {
  display: flex; gap: 1.2rem;
  justify-content: center; flex-wrap: wrap;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.search-shortcuts kbd {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 6px;
  margin-right: 4px;
  min-width: auto;
  border-bottom-width: 1px;
}

@media (max-width: 600px) {
  .search-modal { padding-top: 4vh; }
  .search-shortcuts { display: none; }
  .search-input { font-size: 1rem; padding: 0.9rem 0.8rem; }
}

/* ============================================
   LANGUAGE SWITCHER (i18n)
   ============================================ */
.lang-switch { position: relative; display: inline-flex; margin-right: 0.6rem; }
.lang-current {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--bg); color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 7px 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: all .2s;
}
.lang-current:hover, .lang-switch.open .lang-current {
  border-color: var(--gold); color: var(--ink); background: var(--bg-elev);
}
.lang-current svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.lang-current .lang-chev { width: 11px; height: 11px; transition: transform .2s; }
.lang-switch.open .lang-current .lang-chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 178px; margin: 0; padding: 5px;
  list-style: none;
  background: var(--bg); border: 1px solid var(--rule);
  box-shadow: 0 14px 34px rgba(26,18,8,0.22);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 60;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li { margin: 0; }
.lang-menu a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 9px 12px; color: var(--ink-soft); text-decoration: none;
  font-size: 0.92rem; transition: background .15s, color .15s;
}
.lang-menu a:hover { background: var(--bg-elev); color: var(--ink); text-decoration: none; }
.lang-menu a.active { color: var(--red-deep); }
.lang-menu a.active::after { content: "✓"; margin-left: auto; color: var(--gold); font-size: 0.85rem; }
.lang-menu .lang-code {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; min-width: 1.6rem; color: var(--gold);
}
.lang-menu a:hover .lang-code { color: var(--gold-bright); }
.lang-menu .lang-name { font-family: var(--font-body); }

@media (max-width: 860px) {
  .lang-switch { margin-right: 0.4rem; order: -1; }
  .lang-current { padding: 7px 9px; font-size: 0.7rem; gap: 0.3rem; }
  .lang-current .lang-chev { display: none; }
  /* On mobile the .lang-switch is order:-1 (pushed to the far left of
     the bar). With right:0 the dropdown right-aligns to that tiny
     left-positioned button and expands LEFTWARD, overflowing off the
     left screen edge so you can't see it. Anchor it to the LEFT edge of
     the button instead so it opens rightward into the viewport, and cap
     its width so it can never exceed a narrow screen. */
  .lang-menu {
    right: auto; left: 0;
    min-width: 0; width: max-content;
    max-width: calc(100vw - 24px);
  }
}

/* i18n switcher — no-JS / stale-JS fallback */
.lang-menu{list-style:none!important;}
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-switch:focus-within .lang-current .lang-chev,
.lang-switch:hover .lang-current .lang-chev{transform:rotate(180deg);}

/* mobile: kill horizontal overflow at the source */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));}
html{overflow-x:clip;}
body{max-width:100%;overflow-x:clip;}
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;margin:1.5rem 0;}
.table-scroll .data-table{margin:0;min-width:540px;}
@media (max-width:640px){.table-scroll{border:1px solid var(--rule);}.table-scroll .data-table{border:0;}}

/* accessibility: skip-to-content link (WCAG 2.4.1) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red-deep);color:#fff;padding:10px 18px;font-family:var(--font-display);font-weight:700;font-size:0.85rem;border-radius:0 0 6px 0;text-decoration:none;}
.skip-link:focus{left:0;outline:2px solid var(--gold-bright);outline-offset:2px;}
#main:focus{outline:none;}

/* in-body contextual cross-links (P1): readable but
   subordinate to running text — underline on hover only */
.article-body a.xlink,.container a.xlink{color:var(--red-deep);text-decoration:none;border-bottom:1px solid rgba(122,29,27,0.28);transition:border-color .15s,background .15s;}
.article-body a.xlink:hover,.container a.xlink:hover{border-bottom-color:var(--red-deep);background:rgba(184,137,63,0.10);}

/* visitor-triage wayfinding strip (P2) */
.triage{padding:2rem 0 0.5rem;}
.triage-head{font-family:var(--font-display);font-size:0.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin:0 0 1rem;}
.triage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.9rem;}
.triage-card{display:flex;flex-direction:column;align-items:flex-start;gap:0.45rem;padding:1.15rem 1.25rem;background:var(--bg-elev);border:1px solid var(--rule);border-radius:10px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s;}
.triage-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 18px rgba(42,31,23,0.10);}
.triage-ic{display:inline-flex;width:30px;height:30px;color:var(--red-deep);}
.triage-ic svg{width:100%;height:100%;}
.triage-label{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink);}
.triage-desc{font-size:0.88rem;color:var(--ink-soft);line-height:1.5;flex:1;}
.triage-cta{font-family:var(--font-display);font-size:0.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red-deep);font-weight:700;margin-top:0.2rem;}
@media(max-width:760px){.triage-grid{grid-template-columns:1fr;}.triage{padding-top:1.25rem;}}

/* mechanism 1: jump-to-FAQ anchor in article meta */
/* FAQ deep-link targets clear the sticky header when
   scrolled to (paired with main.js auto-expand). */
.faq-section,.faq-item{scroll-margin-top:90px;}
.faq-jump{color:var(--red-deep);text-decoration:none;border-bottom:1px solid rgba(122,29,27,0.3);font-weight:600;}
.faq-jump:hover{border-bottom-color:var(--red-deep);}
/* mechanism 3: home 'players are asking' card */
.askq{padding:1.5rem 0 0.5rem;}
.askq-head{font-family:var(--font-display);font-size:0.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin:0 0 1rem;}
.askq-list{display:flex;flex-direction:column;gap:0.5rem;max-width:760px;margin:0 auto;}
.askq-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.85rem 1.1rem;background:var(--bg-elev);border:1px solid var(--rule);border-radius:8px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s;}
.askq-item:hover{border-color:var(--gold);transform:translateX(3px);}
.askq-q{font-size:0.96rem;line-height:1.4;}
.askq-arrow{color:var(--red-deep);font-weight:700;flex-shrink:0;}

/* --- nav underline: STANDARD model (root-cause fix) ---
   Past bugs came from a 'sliding indicator' design that
   tried to keep exactly ONE bar and move it to follow the
   pointer. That is inherently glitchy: when the pointer
   is inside .nav-links but between/off the links, the
   active bar retracts but no hovered bar shows -> the
   underline blinks/disappears, and the active+hover color
   rules fight. Replaced with the standard, unambiguous
   model used by virtually every site:
     - current page: underline ALWAYS shown, never moves,
       not affected by where the pointer is;
     - hovered/focused item: its own underline shows while
       hovered, gone on mouse-out;
     - both can be lit at once (that is correct: 'I am
       here' + 'I am pointing there'). No retract, no
       follow, no single-bar constraint -> no glitch.
   This block is the ONLY place nav underline behaviour is
   defined (source template only has the empty ::after
   skeleton). Do not add nav hover/active rules elsewhere. */
.nav-links a::after{height:2px;background:var(--red);transform:scaleX(0);transform-origin:center;transition:transform .18s ease;}
.nav-links a.active::after{transform:scaleX(1);}
@media (hover:hover) and (pointer:fine){
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a:hover{color:var(--red-deep);}
}
.nav-links a.active{color:var(--red-deep);font-weight:700;}
.nav-links a:focus-visible{outline:2px solid var(--red-deep);outline-offset:4px;border-radius:2px;}
.nav-links a:focus:not(:focus-visible){outline:none;}
@media(max-width:860px){.nav-links a::after{display:none;}.nav-links a.active{border-left:3px solid var(--red);padding-left:10px;}}

/* per-class FAQ section (native <details>, no JS) */
.faq-section{margin:2rem 0;}
.faq-item{border:1px solid var(--rule);border-radius:8px;background:var(--bg-elev);margin:0 0 0.7rem;overflow:hidden;}
.faq-item summary{cursor:pointer;padding:0.85rem 1rem;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:0.8rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';color:var(--red-deep);font-size:1.3rem;font-weight:700;line-height:1;flex:0 0 auto;transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item summary:hover{color:var(--red-deep);}
.faq-a{padding:0 1rem 1rem;}
.faq-a p{color:var(--ink-soft);margin:0;font-size:0.95rem;line-height:1.65;}

/* search: popular terms + no-result recommendations */
.search-pop{padding:0.8rem 1rem 1rem;border-top:1px solid var(--rule-soft);}
.search-pop-head{font-family:var(--font-display);font-size:0.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-faint);margin-bottom:0.6rem;}
.search-pop-list{display:flex;flex-wrap:wrap;gap:0.5rem;}
.search-chip{font-family:var(--font-body);font-size:0.85rem;padding:6px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--bg);color:var(--ink-soft);cursor:pointer;transition:all .15s;}
.search-chip:hover{border-color:var(--red);color:var(--red-deep);background:var(--bg-elev);}

/* reading progress bar + back-to-top (article pages) */
#read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--red));z-index:60;transition:width .1s linear;pointer-events:none;}
#to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:var(--bg-elev);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(42,31,23,.18);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;z-index:55;}
#to-top.show{opacity:1;transform:translateY(0);}
#to-top:hover{background:var(--gold);color:#fff;border-color:var(--gold);}
#to-top svg{width:20px;height:20px;}
@media print{#read-progress,#to-top{display:none;}}
/* unified 'return to reading position' floating pill.
   Appears only after a keyword deep-link jump so the
   reader can get back to exactly where they were
   (esp. on mobile). Sits above #to-top. */
#ret-pos{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(16px);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--parchment);font-family:var(--font-display);font-size:0.9rem;border:none;cursor:pointer;opacity:0;pointer-events:none;white-space:nowrap;box-shadow:0 4px 16px rgba(42,31,23,.32);transition:opacity .25s,transform .25s;z-index:58;}
#ret-pos.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
#ret-pos:hover{background:var(--red-deep);}
#ret-pos .rp-x{display:inline-flex;margin-left:4px;opacity:.7;font-size:1.1rem;line-height:1;padding:0 2px;}
#ret-pos .rp-x:hover{opacity:1;}
@media print{#ret-pos{display:none;}}

/* ============== Site KPI strip + page-updated stamp (r43) ============== */
.site-kpi {
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 2rem 0;
  margin: 0;
}
.site-kpi .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.site-kpi .eyebrow {
  display: block;
  margin-bottom: 1rem;
  text-align: center;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.kpi-item {
  text-align: center;
  padding: 0.5rem 0;
}
.kpi-item .v {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.kpi-item .l {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
}
.kpi-item.is-zero .v { color: var(--success); }

.page-updated {
  display: inline-block;
  margin: 0.4rem 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}
.page-updated time {
  color: var(--ink-soft);
  font-weight: 500;
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .kpi-item .v { font-size: 2rem; }
  .site-kpi { padding: 1.5rem 0; }
}