/* ==========================================================================
   Kiwi Casino Guide — editorial single-article layout
   Palette: Vellum #F6F1E7 · Fern Ink #10281F · Poker Felt #0C1F19
            Kākāpo Gold #C9A227 · Roulette Red #A63D2F
   Type:    Fraunces (display) · Source Serif 4 (body) · Inter (utility)
   ========================================================================== */

:root {
  --vellum: #f6f1e7;
  --vellum-deep: #efe7d6;
  --ink: #10281f;
  --felt: #0c1f19;
  --gold: #c9a227;
  --gold-soft: #b18f1f;
  --red: #a63d2f;
  --hairline: rgba(16, 40, 31, 0.18);
  --w-max: 46rem;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--vellum);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.17rem);
  line-height: 1.72;
}

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.95rem var(--pad) 0.7rem;
}

.brand {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brand::first-letter { color: var(--gold-soft); }

.age-badge {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--vellum);
  background: var(--red);
  border-radius: 999px;
  padding: 0.28em 0.8em;
}

/* ---------- hero ---------- */

.hero {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.hero img {
  width: 100%;
  border: 1px solid var(--hairline);
  animation: rise 0.7s ease-out both;
}

.hero figcaption {
  margin-top: 0.55rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(16, 40, 31, 0.62);
}

/* ---------- article frame ---------- */

.article {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--pad) 0;
}

.article h1 {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

.article h1 .year { color: var(--gold-soft); font-style: italic; font-weight: 400; }

.standfirst {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  line-height: 1.55;
  margin: 0 0 0.8rem;
}

.meta {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: rgba(16, 40, 31, 0.62);
  margin: 0;
}

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: clamp(2rem, 5vw, 3rem) 0;
}

/* section headings */

.eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 0.45rem;
}

.article h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
}

.article h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.12rem;
  margin: 1.6em 0 0.35em;
}

.article p { margin: 0 0 1.05em; }

.article section { margin-bottom: clamp(2rem, 5vw, 3rem); }

/* drop cap on the opening paragraph of the first section */
section[aria-labelledby="law"] p:first-of-type::first-letter {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 3.3em;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--gold-soft);
}

/* lists */

.article ul, .article ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.article li { margin-bottom: 0.55em; }
.article li::marker { color: var(--gold-soft); }

.steps li { margin-bottom: 0.8em; }
.steps li::marker {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  color: var(--gold-soft);
}

/* ---------- ledger table (signature) ---------- */

.ledger-wrap {
  overflow-x: auto;
  margin: 1.2rem 0 0.7rem;
  border-block: 1px solid var(--hairline);
}

.ledger {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95em;
}

.ledger th {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(16, 40, 31, 0.62);
  padding: 0.8em 0.9em 0.6em;
  border-bottom: 1px solid var(--hairline);
}

.ledger td {
  padding: 0.85em 0.9em;
  border-bottom: 1px dashed rgba(16, 40, 31, 0.22);
  vertical-align: top;
}

.ledger tr:last-child td { border-bottom: 0; }

.ledger td:first-child {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  white-space: nowrap;
}

.ledger tr:hover td { background: rgba(201, 162, 39, 0.07); }

.fineprint {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(16, 40, 31, 0.62);
}

/* ---------- figures ---------- */

.inline-figure { margin: 1.6rem 0 1.4rem; }

.inline-figure img {
  border: 1px solid var(--hairline);
}

.inline-figure figcaption {
  margin-top: 0.55rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(16, 40, 31, 0.62);
}

/* ---------- closing + footer ---------- */

.closing {
  font-style: italic;
  font-size: 1.05em;
}

.colophon {
  background: var(--felt);
  color: var(--vellum);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2rem, 5vw, 3rem) var(--pad) clamp(2.2rem, 5vw, 3.2rem);
  text-align: center;
}

.colophon .brand { letter-spacing: 0.22em; }

.colophon p {
  max-width: var(--w-max);
  margin: 0.5rem auto;
  font-size: 0.92rem;
}

.colophon .fineprint { color: rgba(246, 241, 231, 0.55); font-size: 0.78rem; }

/* ---------- motion ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero img { animation: none; }
}

/* ---------- small screens ---------- */

@media (max-width: 480px) {
  .article h1 { margin-bottom: 0.7rem; }
  .ledger { min-width: 30rem; }
  section[aria-labelledby="law"] p:first-of-type::first-letter {
    font-size: 2.7em;
  }
}

/* ---------- breadcrumbs & guide index ---------- */

.brand a { color: inherit; text-decoration: none; }

.backlink {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin: 0 0 1.4rem;
}

.backlink a {
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(177, 143, 31, 0.4);
  padding-bottom: 2px;
}

.backlink a:hover, .backlink a:focus-visible { border-bottom-color: var(--gold-soft); }

.guide-index ul {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.3rem 1.6rem;
}

.guide-index a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(177, 143, 31, 0.45);
  padding-bottom: 1px;
}

.guide-index a:hover, .guide-index a:focus-visible { color: var(--gold-soft); }

/* ---------- sticky quick nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 241, 231, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.site-nav ul {
  list-style: none;
  margin: 0 auto;
  max-width: 72rem;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0 var(--pad);
  scrollbar-width: none;
}

.site-nav ul::-webkit-scrollbar { display: none; }

.site-nav a {
  display: block;
  padding: 0.7em 0.8em 0.55em;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(16, 40, 31, 0.68);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
}

.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); }

.site-nav a.active {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--gold);
}

/* desktop: one roomy centered row */
@media (min-width: 820px) {
  .site-nav ul { justify-content: center; }
  .site-nav a { padding: 0.75em 1.05em 0.6em; }
}

/* small screens: tighter header + nav pills */
@media (max-width: 560px) {
  .masthead { padding: 0.7rem var(--pad) 0.5rem; }
  .brand { font-size: 0.92rem; letter-spacing: 0.12em; }
  .age-badge { font-size: 0.66rem; }
  .site-nav a { font-size: 0.7rem; padding: 0.6em 0.6em 0.45em; }
}

/* ---------- ratings tabs ---------- */

.tabs { margin-top: 0.6rem; }

.tab-list {
  list-style: none;
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  margin: 0 0 1.1rem;
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--hairline);
  scrollbar-width: none;
}

.tab-list::-webkit-scrollbar { display: none; }

.tab-list button {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(16, 40, 31, 0.62);
  background: none;
  border: 0;
  padding: 0.55em 0.85em 0.5em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
}

.tab-list button:hover, .tab-list button:focus-visible { color: var(--ink); }

.tab-list button[aria-selected="true"] {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--gold);
}

.tab-pane[hidden] { display: none; }

.ledger .rank {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  color: var(--gold-soft);
}

.ledger .score { font-weight: 700; white-space: nowrap; }

.ledger .score .star { color: var(--gold-soft); }