/* ============================================================
   KING OF K — kingofk.com
   Royal Apothecary design system
   Deep emerald · gilded gold · aged parchment
   Display: Fraunces · UI/labels: Karla
   ============================================================ */

:root {
  /* palette */
  --green-950: #04211A;
  --green-900: #06392B;
  --green-800: #0A4A36;
  --green-700: #10614A;
  --green-500: #2E7D5B;
  --green-300: #7FB49A;

  --gold-700: #806218;  /* darkened from #8C6D1F: WCAG AA on parchment + gold-100 */
  --gold-500: #C9A227;
  --gold-400: #D4AF37;
  --gold-300: #E8CE7A;
  --gold-100: #F4E9C8;

  --parchment: #F6F1E3;
  --parchment-2: #EFE7D2;
  --parchment-3: #E6DBBF;
  --ink: #1B2420;
  --ink-soft: #46534C;

  --red-vein: #8A3B3B;
  --white-vein: #EDE6D6;
  --yellow-vein: #C9902E;

  --gold-grad: linear-gradient(135deg, #8C6D1F 0%, #D4AF37 35%, #F1DE9C 55%, #C9A227 80%);

  /* type */
  --font-display: "Fraunces", "Georgia", serif;
  --font-ui: "Karla", "Helvetica Neue", sans-serif;

  /* rhythm */
  --container: 1200px;
  --radius: 18px;
  --arch: 999px 999px 18px 18px;
  --shadow-lift: 0 24px 48px -20px rgba(4, 33, 26, 0.35);
  --hairline: 1px solid rgba(140, 109, 31, 0.35);

  --ease-royal: cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; }
input, select, textarea { font: inherit; }
::selection { background: var(--gold-400); color: var(--green-950); }

/* grain texture over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 420;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--green-950);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h1 em, h2 em, h3 em, .display em {
  font-style: italic;
  font-weight: 340;
  color: var(--green-700);
}
.on-dark h1, .on-dark h2, .on-dark h3,
.on-deep h1, .on-deep h2, .on-deep h3 { color: var(--parchment); }
.on-dark h1 em, .on-dark h2 em,
.on-deep h1 em, .on-deep h2 em { color: var(--gold-300); }

p.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 56ch; }
.on-dark p.lede, .on-deep p.lede { color: rgba(246, 241, 227, 0.78); }

.kicker {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-700);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1.1rem;
}
.kicker::before { content: "✦"; font-size: 0.8em; }
.on-dark .kicker, .on-deep .kicker { color: var(--gold-300); }

/* ornamental double rule with center diamond */
.ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 1.6rem 0;
  color: var(--gold-500);
}
.ornament::before, .ornament::after {
  content: "";
  flex: 1;
  height: 3px;
  border-top: 1px solid rgba(140, 109, 31, 0.5);
  border-bottom: 1px solid rgba(140, 109, 31, 0.25);
}
.ornament span { font-size: 0.7rem; }

/* ---------- layout ---------- */
.container {
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
}
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-head { max-width: 640px; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }

.on-dark { background: var(--green-950); color: var(--parchment); }
.on-deep { background: var(--green-900); color: var(--parchment); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease-royal), box-shadow 0.35s var(--ease-royal);
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold-grad);
  color: var(--green-950);
  box-shadow: 0 10px 24px -10px rgba(140, 109, 31, 0.55);
}
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-royal);
}
.btn-gold:hover::after { transform: translateX(120%); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(140, 109, 31, 0.65); }
.btn-ghost {
  border: 1px solid var(--gold-500);
  color: var(--gold-700);
  background: transparent;
}
.on-dark .btn-ghost, .on-deep .btn-ghost { color: var(--gold-300); border-color: rgba(212, 175, 55, 0.6); }
.btn-ghost:hover { background: rgba(212, 175, 55, 0.12); transform: translateY(-2px); }
.btn-dark { background: var(--green-950); color: var(--gold-300); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---------- chips / vein badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  border: 1px solid rgba(27, 36, 32, 0.18);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.35);
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(4, 33, 26, 0.25); }
.chip.active, .chip:hover { border-color: var(--gold-500); color: var(--green-950); background: var(--gold-100); }
button.chip { cursor: pointer; transition: all 0.25s var(--ease-royal); }

/* ---------- announcement ticker ---------- */
.ticker {
  background: var(--green-950);
  color: var(--gold-300);
  overflow: hidden;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ticker-track {
  display: flex;
  gap: 3rem;
  padding: 0.55rem 0;
  width: max-content;
  animation: ticker 32s linear infinite;
}
.ticker-track span { white-space: nowrap; }
.ticker-track span::after { content: "✦"; margin-left: 3rem; color: var(--gold-500); }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(6, 57, 43, 0.96);
  backdrop-filter: blur(8px);
  color: var(--parchment);
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  margin-right: auto;
}
/* The mark is a fixed-height illustration; width follows its own aspect so
   the intrinsic width/height attributes still hold and nothing reflows. */
.brand-mark { display: block; width: auto; }
.brand .brand-mark { height: 58px; }
.wordmark {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 560;
  letter-spacing: 0.02em;
  color: var(--parchment);
}
.wordmark em { font-style: italic; font-weight: 320; color: var(--gold-300); font-size: 0.85em; }

.main-nav { display: flex; gap: 1.9rem; }
.main-nav a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(246, 241, 227, 0.82);
  padding: 0.4em 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.main-nav a:hover { color: var(--gold-300); }
.main-nav a[aria-current="page"] { color: var(--gold-300); border-bottom-color: var(--gold-500); }

.header-actions { display: flex; align-items: center; gap: 1rem; }
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 999px;
  padding: 0.55em 1.2em;
  color: var(--gold-300);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.25s;
}
.cart-btn:hover { background: rgba(212, 175, 55, 0.14); }
.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: var(--green-950);
  font-size: 0.68rem;
}

.menu-btn { display: none; color: var(--gold-300); padding: 0.4rem; }
.menu-btn svg { width: 26px; height: 26px; }

/* mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--green-950);
  color: var(--parchment);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-royal);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 2rem;
  text-decoration: none;
  color: var(--parchment);
}
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--gold-300); font-style: italic; }
.mobile-menu .close-menu { position: absolute; top: 1.4rem; right: 1.6rem; color: var(--gold-300); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  background:
    radial-gradient(60% 120% at 50% -20%, rgba(212, 175, 55, 0.18), transparent 60%),
    var(--green-950);
  color: var(--parchment);
  text-align: center;
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
}
.page-hero h1 { color: var(--parchment); }
.page-hero h1 em { color: var(--gold-300); }
.page-hero .kicker { color: var(--gold-300); justify-content: center; }
.page-hero p.lede { margin: 1.2rem auto 0; color: rgba(246, 241, 227, 0.78); }

/* ---------- arch cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.arch-card {
  background: var(--parchment-2);
  border: 1px solid rgba(140, 109, 31, 0.3);
  border-radius: var(--arch);
  padding: 2.4rem 1.6rem 1.8rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  transition: transform 0.45s var(--ease-royal), box-shadow 0.45s var(--ease-royal), border-color 0.45s;
  position: relative;
}
.arch-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold-500);
}
.arch-card .visual { width: 72%; margin-bottom: 0.4rem; }
/* The card title is h2 on /shop (directly under the page h1) and h3 where a
   section heading sits above it. Same look either way. */
.arch-card h2,
.arch-card h3 { font-size: 1.28rem; }
.arch-card .epithet {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  color: var(--green-700);
  font-size: 0.95rem;
  margin-top: -0.5rem;
}
.arch-card .price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-700);
  margin-top: auto;
}
.arch-card .card-cta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-950);
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  padding: 0.6em 1.4em;
  background: transparent;
  transition: background 0.3s, color 0.3s;
}
.arch-card:hover .card-cta, .arch-card .card-cta:hover { background: var(--gold-grad); }

/* vein cards (the court) */
.vein-card { padding-top: 3rem; }
.vein-card .crown-dot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  display: grid;
  place-items: center;
}
.vein-card .crown-dot i {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(4, 33, 26, 0.2);
}
.vein-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- standards band ---------- */
.standards { position: relative; overflow: hidden; }
.standards::after {
  content: "";
  position: absolute;
  inset: auto -10% -55% -10%;
  height: 80%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(212, 175, 55, 0.14), transparent 70%);
  pointer-events: none;
}
.standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}
.standard h3 { color: var(--gold-300); font-style: italic; font-weight: 380; margin-bottom: 0.6rem; }
.standard p { color: rgba(246, 241, 227, 0.72); font-size: 0.95rem; }
.standard .num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--gold-500);
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: 1rem;
}
.pull-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--gold-300);
  text-align: center;
  max-width: 30ch;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  position: relative;
  z-index: 1;
}

/* ---------- ledger steps ---------- */
.ledger { counter-reset: step; }
.ledger-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-top: var(--hairline);
  align-items: start;
}
.ledger-row:last-child { border-bottom: var(--hairline); }
.ledger-row .step-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--gold-500);
}
.ledger-row h3 { margin-bottom: 0.4rem; }
.ledger-row p { color: var(--ink-soft); max-width: 62ch; }

/* ---------- prose (about, legal, generic content) ---------- */
.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.2rem; color: var(--ink-soft); }
.prose p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.2em;
  float: left;
  line-height: 0.85;
  padding-right: 0.12em;
  color: var(--green-800);
}
.prose h2, .prose h3 { margin: 2.2rem 0 0.8rem; }
.prose ul { color: var(--ink-soft); padding-left: 1.2rem; margin-bottom: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--ink); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.3rem; }
.field label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-800);
}
.field input, .field select, .field textarea {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(27, 36, 32, 0.25);
  border-radius: 10px;
  padding: 0.85em 1em;
  color: var(--ink);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

/* inline newsletter form */
.register-form {
  display: flex;
  gap: 0.7rem;
  max-width: 480px;
  margin-inline: auto;
}
.register-form input {
  flex: 1;
  background: rgba(246, 241, 227, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  padding: 0.85em 1.4em;
  color: var(--parchment);
}
.register-form input::placeholder { color: rgba(246, 241, 227, 0.45); }
.register-form input:focus { outline: none; border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }

/* ---------- accordion (FAQ) ---------- */
.faq-item {
  border-top: var(--hairline);
}
.faq-item:last-child { border-bottom: var(--hairline); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 0.2rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--green-950);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold-500);
  transition: transform 0.3s var(--ease-royal);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 0.2rem 1.6rem; color: var(--ink-soft); max-width: 68ch; }

/* ---------- tables (assay ledger) ---------- */
.table-wrap { overflow-x: auto; }
.assay-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.assay-table th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 2px solid var(--gold-500);
}
.assay-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(140, 109, 31, 0.25);
  color: var(--ink-soft);
}
.assay-table tr:hover td { background: rgba(212, 175, 55, 0.07); }
.pass-badge {
  display: inline-block;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  background: rgba(46, 125, 91, 0.14);
  border: 1px solid rgba(46, 125, 91, 0.4);
  color: var(--green-700);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- cart drawer ---------- */
.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 33, 26, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.cart-scrim.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 310;
  width: min(430px, 100vw);
  background: var(--parchment);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.45s var(--ease-royal);
  box-shadow: -30px 0 60px rgba(4, 33, 26, 0.35);
}
.cart-drawer.open { transform: none; }
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.6rem;
  border-bottom: var(--hairline);
}
.cart-head h3 { font-size: 1.5rem; }
.cart-close { color: var(--gold-700); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.ship-progress { padding: 1rem 1.6rem 0; font-size: 0.78rem; color: var(--ink-soft); }
.ship-bar { height: 5px; background: rgba(27, 36, 32, 0.12); border-radius: 999px; margin-top: 0.5rem; overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: var(--gold-grad); border-radius: 999px; transition: width 0.5s var(--ease-royal); }
.cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.6rem; }
.cart-empty { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.cart-empty .display { font-size: 1.4rem; margin-bottom: 0.5rem; }
.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(140, 109, 31, 0.2);
  align-items: center;
}
.cart-item .thumb { width: 64px; }
.cart-item .ci-name { font-family: var(--font-display); font-size: 1.02rem; color: var(--green-950); }
.cart-item .ci-meta { font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.cart-item .ci-price { font-family: var(--font-display); color: var(--gold-700); text-align: right; }
.qty-row { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.qty-row button {
  width: 24px; height: 24px;
  border: 1px solid rgba(140, 109, 31, 0.4);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--green-800);
  font-size: 0.9rem;
  line-height: 1;
}
.qty-row button:hover { background: var(--gold-100); border-color: var(--gold-500); }
.ci-remove { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-vein); margin-top: 0.35rem; }
.cart-foot { padding: 1.3rem 1.6rem 1.6rem; border-top: var(--hairline); background: var(--parchment-2); }
.cart-subtotal { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 1rem; }
.cart-foot .btn { width: 100%; }
.cart-fine { font-size: 0.68rem; color: var(--ink-soft); text-align: center; margin-top: 0.8rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 400;
  /* The hidden state has to clear the element's own height AND its bottom
     offset. `150%` is a fraction of the element's own height, and an idle
     toast is empty — about 22px tall — so it only travelled 33px against the
     54px needed. 21 of its 22 pixels stayed on screen, which is the green pill
     that sat at the bottom of every page. calc() is independent of how tall
     the toast happens to be, so a one-line and a three-line toast both clear. */
  transform: translate(-50%, calc(100% + 2rem));
  visibility: hidden;
  background: var(--green-950);
  color: var(--gold-300);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 999px;
  padding: 0.8em 1.6em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* visibility flips only after the slide-out finishes, so the animation is
     still seen; hiding it outright keeps an off-screen toast from taking
     taps or being announced by a screen reader while empty. */
  transition: transform 0.5s var(--ease-royal), visibility 0s linear 0.5s;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.toast.show {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform 0.5s var(--ease-royal), visibility 0s;
}

/* ---------- age gate ---------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(212, 175, 55, 0.12), transparent 60%),
    rgba(4, 33, 26, 0.97);
}
.age-gate[hidden] { display: none; }
.age-card {
  background: var(--parchment);
  border: 1px solid var(--gold-500);
  border-radius: var(--arch);
  padding: 3.2rem 2.4rem 2.6rem;
  max-width: 430px;
  text-align: center;
}
.age-card .brand-mark { height: 104px; margin: 0 auto 1.2rem; }
.age-card h2 { font-size: 1.8rem; margin-bottom: 0.6rem; }
.age-card p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.6rem; }
.age-actions { display: flex; flex-direction: column; gap: 0.7rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--green-950);
  color: rgba(246, 241, 227, 0.75);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-brand .brand-mark { height: 64px; margin-bottom: 1rem; }
.footer-brand .wordmark { font-size: 1.6rem; }
.footer-brand p { font-size: 0.88rem; max-width: 30ch; margin-top: 0.8rem; }
/* h2, not h4: the footer link groups sit under the page h1, and jumping
   straight to h4 skips a level for anyone navigating by heading. */
.footer-col h2 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 1.1rem;
}
.footer-col a {
  display: block;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.28rem 0;
  color: rgba(246, 241, 227, 0.7);
  transition: color 0.25s;
}
.footer-col a:hover { color: var(--gold-300); }
.footer-compliance {
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding-top: 1.6rem;
  font-size: 0.76rem;
  line-height: 1.7;
  color: rgba(246, 241, 227, 0.62); /* required disclosure — was .5 / .72rem, failed AA */
  max-width: 90ch;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(246, 241, 227, 0.1);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(246, 241, 227, 0.55); /* was .45 — below WCAG AA on green-950 */
}
.footer-credit a {
  color: rgba(246, 241, 227, 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  padding-bottom: 1px;
  transition: color 0.25s var(--ease-royal), border-color 0.25s var(--ease-royal);
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--gold-300);
  border-bottom-color: var(--gold-300);
}

/* ---------- reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-royal), transform 0.9s var(--ease-royal);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- product page ---------- */
.product-layout {
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.product-visual {
  background: var(--parchment-2);
  border: 1px solid rgba(140, 109, 31, 0.3);
  border-radius: var(--arch);
  padding: 3rem 2.5rem 2.5rem;
  position: sticky;
  top: 100px;
}
.product-info h1 { font-size: clamp(2rem, 4vw, 3rem); }
.product-info .epithet {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  font-size: 1.3rem;
  color: var(--green-700);
  margin: 0.2rem 0 1rem;
}
.size-picker { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0 1.4rem; }
.size-btn {
  border: 1px solid rgba(27, 36, 32, 0.25);
  border-radius: 12px;
  padding: 0.7em 1.1em;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.25s var(--ease-royal);
  text-align: center;
}
.size-btn small { display: block; font-family: var(--font-display); color: var(--gold-700); font-size: 0.95em; }
.size-btn.active { border-color: var(--gold-500); background: var(--gold-100); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3); }
.buy-row { display: flex; align-items: stretch; gap: 0.8rem; margin: 1.4rem 0; flex-wrap: wrap; }
.character-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.4rem; }

/* shop filters */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 2.4rem;
}
.filter-bar .filter-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 0.4rem;
}
.filter-sep { width: 1px; height: 22px; background: rgba(140, 109, 31, 0.4); margin: 0 0.6rem; }

/* ---------- seal (circular text badge) ---------- */
.seal-badge { width: 150px; height: 150px; animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-layout { grid-template-columns: 1fr; }
  .product-visual { position: static; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .site-header .container { height: 66px; }
  .brand .brand-mark { height: 46px; }
  .wordmark { font-size: 1.2rem; }
  .ledger-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .cart-btn .cart-label { display: none; }
  .register-form { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* Available to screen readers, clipped from view. Used where a control's
   visible text is too terse to stand alone as its accessible name. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}