/* ── Motehaven standings — "illuminated guild ledger" ──────────
   A candle-lit, hand-bound tavern leaderboard. Warm parchment,
   gold leaf, ink-on-vellum rows, a struck record plaque.
   Self-contained, vanilla, OBS-irrelevant (public web page). ── */
:root {
  --ink:        #38291320;
  --wood-0:     #140f0a;
  --wood-1:     #221913;
  --glow:       rgba(247, 201, 120, 0.16);

  --vellum-0:   #f3e7c8;
  --vellum-1:   #ead8af;
  --vellum-2:   #e0cb9c;
  --rule:       rgba(86, 62, 28, 0.22);
  --rule-soft:  rgba(86, 62, 28, 0.12);

  --text:       #3a2a14;
  --text-soft:  #6e5631;
  --text-dim:   #93764a;

  --gold:       #a9842f;
  --gold-lit:   #efce7d;
  --gold-deep:  #7c5e1f;
  --gold-ink:   #7a5a16;

  --silver:     #b7bac6;
  --bronze:     #c0824e;
  --sage:       #5f7d3f;

  --shadow:     0 22px 50px -18px rgba(0, 0, 0, 0.62);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  color: var(--text);
  min-height: 100vh;
  padding: 28px 16px 56px;
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--glow), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(120, 78, 28, 0.10), transparent 60%),
    linear-gradient(178deg, var(--wood-1), var(--wood-0));
  background-attachment: fixed;
  position: relative;
}
/* Fine candle-soot grain over the whole scene */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.page {
  position: relative;
  z-index: 1;
  max-width: 568px;
  margin: 0 auto;
  padding: 30px 28px 34px;
  border-radius: 6px;
  color: var(--text);
  background:
    linear-gradient(180deg, var(--vellum-0), var(--vellum-1) 46%, var(--vellum-2));
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(255, 251, 240, 0.45),
    inset 0 0 64px rgba(150, 110, 52, 0.14);
  animation: ledger-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Vellum tooth + a gilt double rule framing the whole sheet */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.05' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='0.3'/%3E%3C/svg%3E");
}
.page::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 3px;
  pointer-events: none;
  border: 1px solid rgba(140, 102, 38, 0.34);
  box-shadow: inset 0 0 0 3px rgba(247, 234, 200, 0.5);
}

/* ── Masthead ─────────────────────────────────────────────── */
.header { text-align: center; position: relative; z-index: 2; }
.header__brand {
  font-family: "Newsreader", serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.header__title {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(40px, 11vw, 60px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.012em;
  margin: 6px 0 2px;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.6), 0 2px 5px rgba(78, 52, 18, 0.18);
}
.header__rule {
  width: 168px;
  height: 14px;
  margin: 10px auto 8px;
  color: var(--gold);
  opacity: 0.85;
}
.header__sub {
  font-size: 14px;
  font-style: italic;
  color: var(--text-soft);
  max-width: 38ch;
  margin: 0 auto;
}

/* ── Ribbon tabs ──────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 22px 0 20px;
}
.tab {
  appearance: none;
  font-family: "Newsreader", serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 9px 20px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: color 160ms ease, background 160ms ease, transform 120ms ease;
}
.tab::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tab:hover { color: var(--text); background: rgba(140, 102, 38, 0.08); }
.tab.is-active {
  color: var(--gold-ink);
  background: rgba(201, 162, 63, 0.10);
}
.tab.is-active::after { transform: scaleX(1); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tab:active { transform: translateY(1px); }

/* ── Record plaque ────────────────────────────────────────── */
.record {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  padding: 16px 22px;
  border-radius: 4px;
  overflow: hidden;
  color: #2c1f0c;
  background:
    linear-gradient(177deg, #f6dd9c, #e8c069 52%, #cf9f44);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 222, 0.7),
    inset 0 0 0 2px rgba(141, 102, 33, 0.45),
    0 10px 24px -12px rgba(96, 64, 16, 0.6);
  animation: plaque-strike 760ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
/* Slow raking candle-light sheen */
.record::after {
  content: "";
  position: absolute;
  top: -60%; bottom: -60%; left: -30%;
  width: 36%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 252, 236, 0.55), transparent);
  animation: plaque-sheen 7s ease-in-out 1.4s infinite;
}
.record[hidden] { display: none; }
.plaque__trophy {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(120, 80, 20, 0.5));
}
.plaque__label {
  font-family: "Newsreader", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #5e441a;
}
.plaque__num {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(34px, 9vw, 46px);
  font-weight: 900;
  line-height: 1;
  color: #2c1f0c;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 250, 226, 0.6);
  justify-self: end;
}