/* ============================================================
   EXETER WHISKEY CLUB — design system
   Palette and type per the redesign brief. Two grounds: the dark
   cellar and the warm paper, so the page is not one long black
   sequence.

   CONTRAST NOTE — measured, not assumed:
   Aged Brass (#C9A35B) is 8.51:1 on Cellar Black but only 2.01:1
   on Warm Paper, so it is never text on a light ground. Light
   sections use --brass-ink (#654F22, 6.62:1) instead. Ash
   (#6F6A63) is 3.76:1 and is decoration only; small text that
   must be read uses --ash-text (#857F76, 5.08:1).
   ============================================================ */

:root {
  /* grounds */
  --cellar:      #070707;   /* main dark ground */
  --charcoal:    #11100E;   /* alternating dark sections and cards */
  --paper:       #F1ECE2;   /* light editorial sections */
  --parchment:   #DDD4C5;   /* secondary light background */

  /* ink */
  --ink:         #181713;   /* text on light grounds */
  --ivory:       #F4F1EA;   /* text on dark grounds */
  --smoke:       #C4BFB6;   /* secondary text — 11.3:1 on the cellar */
  --ash:         #6F6A63;   /* decoration and hairlines only */
  --ash-text:    #A19B92;   /* tertiary text that must actually be read — 7.2:1 */

  /* brass */
  --brass:       #C9A35B;   /* accent on dark grounds */
  --brass-dim:   #8F7238;   /* quiet accents, hover */
  --brass-ink:   #654F22;   /* brass as TEXT on light grounds */

  /* lines */
  --rule:        rgba(244,241,234,0.14);
  --rule-soft:   rgba(244,241,234,0.072);
  --rule-ink:    rgba(24,23,19,0.16);
  --rule-ink-soft:rgba(24,23,19,0.09);

  --bad:         #D98A72;
  --good:        #7FA06A;

  --ease:        cubic-bezier(0.22,1,0.36,1);
  --shell:       1080px;
  --shell-wide:  1200px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { min-height: 100%; scroll-behavior: smooth; color-scheme: dark; }
/* light sections get light native widgets — pickers, autofill, scrollbars */
.light { color-scheme: light; }
body {
  background: var(--cellar); color: var(--ivory);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400; font-size: 16.5px; line-height: 1.68;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100svh;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--brass); color: #14100A; padding: 12px 18px;
  font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; border-radius: 2px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- focus, visible everywhere ---------- */
:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px;
}
.light :focus-visible { outline-color: var(--brass-ink); }

/* ============================================================
   TYPE
   Cormorant for the emotional and historical moments; Jost for
   institutional labels; Inter for everything functional.
   ============================================================ */

.display, h1, h2, .serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400; line-height: 1.14; letter-spacing: .005em;
}
h1 { font-size: clamp(38px, 7vw, 82px); }
h2 { font-size: clamp(27px, 4.4vw, 46px); }
h3 {
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 14px;
  letter-spacing: .13em; text-transform: uppercase; padding-left: .13em; line-height: 1.5;
}
p { max-width: 68ch; }

/* institutional labels — tracked uppercase, short strings only */
.label {
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; padding-left: .2em;
  color: var(--brass);
}
.light .label { color: var(--brass-ink); }

.folio {
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px;
  letter-spacing: .16em; color: var(--brass); padding-left: .16em;
}
.light .folio { color: var(--brass-ink); }

.lede { font-size: clamp(17px, 1.9vw, 19px); color: var(--smoke); line-height: 1.72; }
.light .lede { color: #43403A; }
.small { font-size: 15px; }
.tiny  { font-size: 13px; }
.meta  { font-size: 13.5px; color: var(--ash-text); letter-spacing: .01em; }
.light .meta { color: #555047; }
.muted { color: var(--smoke); }
.light .muted { color: #555047; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; }

a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }
.light a { color: var(--brass-ink); }

/* ============================================================
   LAYOUT
   ============================================================ */
.shell { width: min(var(--shell), 100%); margin: 0 auto; padding: 0 22px; }
.shell.wide   { width: min(var(--shell-wide), 100%); }
.shell.narrow { width: min(760px, 100%); }

section.band { padding: clamp(58px, 10vh, 118px) 0; }
section.band.hairline { border-top: 1px solid var(--rule-soft); }

/* the light ground — this is what breaks up the black */
.light { background: var(--paper); color: var(--ink); }
.light.parchment { background: var(--parchment); }
.light h1, .light h2 { color: var(--ink); }
.light p { color: #33302A; }
/* paper grain, very quiet */
.light.grain { position: relative; }
.light.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.light.grain > * { position: relative; }

.dark-alt { background: var(--charcoal); }

.sec-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
            gap: 18px; margin-bottom: clamp(30px, 5vh, 54px); }
.sec-head .aside { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px;
                   letter-spacing: .12em; text-transform: uppercase; color: var(--ash-text);
                   white-space: nowrap; padding-left: .12em; }
.light .sec-head .aside { color: #555047; }
@media (max-width: 640px) {
  .sec-head { grid-template-columns: auto 1fr; }
  .sec-head .aside { grid-column: 1 / -1; }
}

.stack > * + * { margin-top: 18px; }
.stack.loose > * + * { margin-top: 32px; }
.grid { display: grid; gap: 18px; }
.grid.two   { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.four  { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.row-between { display: flex; align-items: center; justify-content: space-between;
               gap: 16px; flex-wrap: wrap; }
.hidden { display: none !important; }
.rule-line { height: 1px; background: var(--rule-soft); border: 0; }
.light .rule-line { background: var(--rule-ink-soft); }

/* ============================================================
   NAVIGATION — transparent over the hero, solid once scrolled
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.nav.solid {
  background: rgba(7,7,7,0.94); backdrop-filter: blur(14px);
  border-bottom-color: var(--rule-soft);
}
.nav .in { width: min(var(--shell-wide), 100%); margin: 0 auto; padding: 0 22px;
           display: flex; align-items: center; justify-content: space-between;
           gap: 16px; min-height: 68px; }
.nav .brand {
  font-family: 'Jost', sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: .17em; font-size: 13px; color: var(--ivory);
  white-space: nowrap; display: flex; align-items: center; min-height: 44px;
  padding: 0 4px 0 calc(4px + .26em); margin-left: -4px;
}
.nav .brand:hover { color: var(--brass); text-decoration: none; }
.nav .links { display: flex; align-items: center; gap: 2px; }
.nav .links a {
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--smoke);
  padding: 12px 13px; padding-left: calc(13px + .12em);
  border-bottom: 1px solid transparent; min-height: 44px; display: flex; align-items: center;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.nav .links a:hover { color: var(--ivory); text-decoration: none; }
.nav .links a[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass); }
.nav .links a.action {
  color: var(--brass); border: 1px solid var(--rule); border-radius: 2px;
  margin-left: 10px; padding: 11px 16px; padding-left: calc(16px + .12em);
}
.nav .links a.action:hover { border-color: var(--brass); }

.nav .burger {
  display: none; background: none; border: 1px solid var(--rule); border-radius: 2px;
  width: 44px; height: 44px; cursor: pointer; color: var(--ivory);
  align-items: center; justify-content: center;
}
.nav .burger span { display: block; width: 17px; height: 1px; background: currentColor;
                    position: relative; }
.nav .burger span::before, .nav .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1px; background: currentColor; }
.nav .burger span::before { top: -5px; } .nav .burger span::after { top: 5px; }

@media (max-width: 820px) {
  .nav .burger { display: flex; }
  .nav .links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(7,7,7,0.985); border-bottom: 1px solid var(--rule-soft);
    padding: 8px 22px 18px;
  }
  .nav .links.open { display: flex; }
  .nav .links a { padding: 15px 0; border-bottom: 1px solid var(--rule-soft); font-size: 12px; }
  /* Score the Flight first inside the menu, per the brief */
  .nav .links a.action { order: -1; margin: 10px 0 12px; text-align: center;
                         justify-content: center; border: 1px solid var(--brass-dim); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  border-top: 1px solid var(--rule-soft); padding: 34px 22px calc(38px + env(safe-area-inset-bottom));
  text-align: center; font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ash-text); line-height: 2.3;
}
.foot .bits span { display: block; }

/* ============================================================
   CARDS AND PANELS
   ============================================================ */
.card { border: 1px solid var(--rule-soft); background: var(--charcoal);
        border-radius: 3px; padding: 22px 20px; }
.light .card { background: rgba(255,255,255,0.5); border-color: var(--rule-ink-soft); }
.card.brass { border-color: var(--brass-dim); }

.pill {
  display: inline-block; font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; padding-left: calc(10px + .1em);
  border: 1px solid var(--rule); border-radius: 2px; color: var(--smoke); white-space: nowrap;
}
.pill.brass { color: var(--brass); border-color: var(--brass-dim); }
.light .pill { color: #4A463E; border-color: var(--rule-ink); }
.light .pill.brass { color: var(--brass-ink); border-color: var(--brass-ink); }

/* ============================================================
   CONTROLS
   ============================================================ */
label.lbl {
  display: block; font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--smoke);
  margin-bottom: 9px; padding-left: .2em;
}
.light label.lbl { color: #4A463E; }
label.lbl .opt { color: var(--ash-text); letter-spacing: .1em; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=tel], input[type=number], input[type=search], select, textarea {
  width: 100%; background: rgba(255,255,255,0.022);
  border: 1px solid var(--rule-soft); border-bottom-color: var(--rule);
  color: var(--ivory); font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 16.5px;                     /* 16px stops iOS zooming on focus */
  padding: 14px 13px; border-radius: 2px; min-height: 48px;
  transition: border-color .3s var(--ease);
}
.light input, .light select, .light textarea {
  background: rgba(255,255,255,0.72); border-color: var(--rule-ink-soft);
  border-bottom-color: var(--rule-ink); color: var(--ink);
}
textarea { min-height: 116px; line-height: 1.7; resize: vertical; }
select { appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--smoke) 50%),
                    linear-gradient(135deg, var(--smoke) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
/* A native dropdown's option list is painted by the operating system, not by
   this stylesheet, and it takes the select's own background-color. The shared
   near-transparent fill composited against white there, which left ivory text
   on a white popup — unreadable. Selects therefore carry an opaque ground, and
   the options carry one too, because Chrome has used one or the other
   depending on the version. */
select { background-color: #121110; color: var(--ivory); }
.light select { background-color: #F6F3EC; color: var(--ink); }
option, optgroup { background-color: #121110; color: #F4F1EA; font-size: 15px; }
.light select option, .light select optgroup { background-color: #F6F3EC; color: #181713; }

input:focus, select:focus, textarea:focus { border-color: var(--brass); }
input::placeholder, textarea::placeholder { color: var(--ash-text); }
.light input::placeholder, .light textarea::placeholder { color: #6E6960; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }

.field { margin-bottom: 20px; }
.field .err { display: block; font-size: 13.5px; color: var(--bad); margin-top: 7px; min-height: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; background: transparent; color: var(--ivory);
  border: 1px solid var(--rule); padding: 15px 22px;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; font-size: 11px; cursor: pointer;
  position: relative; overflow: hidden; border-radius: 2px; text-decoration: none;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.btn span { position: relative; z-index: 1; padding-left: .22em; }
.btn::before { content: ""; position: absolute; inset: 0;
  background: var(--brass); transform: translateY(101%); transition: transform .34s var(--ease); }
.btn:hover:not(:disabled) { color: #14100A; border-color: var(--brass); text-decoration: none; }
.btn:hover:not(:disabled)::before { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.auto { width: auto; }
.btn.ghost { border-color: var(--rule-soft); color: var(--smoke); font-size: 12px; min-height: 44px; }
.btn.ghost::before { display: none; }
.btn.ghost:hover { color: var(--brass); border-color: var(--brass); }
.btn.danger.ghost:hover { color: var(--bad); border-color: var(--bad); }
.light .btn { color: var(--ink); border-color: var(--rule-ink); }
.light .btn:hover:not(:disabled) { color: var(--paper); border-color: var(--brass-ink); }
.light .btn::before { background: var(--brass-ink); }
.light .btn.ghost { color: #4A463E; border-color: var(--rule-ink-soft); }
.light .btn.ghost:hover { color: var(--brass-ink); border-color: var(--brass-ink); }

.msg { min-height: 20px; font-size: 14.5px; }
.msg.err { color: var(--bad); }
.msg.ok  { color: var(--brass); }
.light .msg.ok { color: var(--brass-ink); }

/* error summary at the top of a form */
.err-summary { border: 1px solid var(--bad); border-radius: 3px; padding: 15px 17px;
               margin-bottom: 20px; }
.err-summary h3 { color: var(--bad); margin-bottom: 8px; }
.err-summary ul { list-style: none; }
.err-summary a { color: var(--bad); font-size: 14.5px; text-decoration: underline; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.tabs button {
  background: transparent; border: 1px solid var(--rule-soft); color: var(--smoke);
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 15px; padding-left: calc(15px + .1em); min-height: 44px;
  cursor: pointer; border-radius: 2px; flex: 1 1 auto; min-width: 108px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.tabs button[aria-selected="true"], .tabs button.on {
  color: var(--brass); border-color: var(--brass); background: rgba(201,163,91,0.08);
}

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11px;
     letter-spacing: .1em; text-transform: uppercase; color: var(--ash-text);
     text-align: left; padding: 11px 15px 11px 0;
     border-bottom: 1px solid var(--rule-soft); white-space: nowrap; }
td { padding: 14px 15px 14px 0; border-bottom: 1px solid var(--rule-soft);
     font-weight: 400; vertical-align: top; }
td.n, th.n { text-align: right; padding-left: 20px; font-variant-numeric: tabular-nums; }
td:last-child, th:last-child { padding-right: 0; }
tr:last-child td { border-bottom: none; }
.owed { color: var(--bad); } .credit { color: var(--good); } .square { color: var(--ash-text); }

.empty { text-align: center; padding: 48px 14px; color: var(--smoke);
         font-size: 15.5px; line-height: 1.85; }
.bar { height: 2px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brass-dim); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   MOTION — composure, not spectacle
   ============================================================ */
[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].shown { opacity: 1; transform: none; }

.rule-grow { height: 1px; background: var(--brass-dim); width: 0;
             transition: width 1.1s var(--ease); }
.rule-grow.shown { width: 100%; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  margin-top: calc(-1 * var(--navh, 68px)); padding-top: var(--navh, 68px);
  overflow: hidden; background: var(--cellar);
}
.hero .plate { position: absolute; inset: 0; }
.hero .plate img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  opacity: 0; filter: saturate(.92) contrast(1.06) brightness(1.04);
  transition: opacity 1.4s var(--ease), transform 14s linear;
  transform: scale(1.03);
}
.hero .plate img.loaded { opacity: 1; transform: scale(1); }
.hero .plate::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(7,7,7,0.96) 0%, rgba(7,7,7,0.76) 32%, rgba(7,7,7,0.30) 66%, rgba(7,7,7,0.58) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(7,7,7,0.55), transparent 70%);
}
.hero .in {
  position: relative; width: min(var(--shell-wide), 100%); margin: 0 auto;
  padding: 0 22px clamp(42px, 8vh, 86px);
}
.hero h1 { max-width: 22ch; margin: 20px 0 0; text-wrap: balance; }
.hero .sub { margin-top: 22px; max-width: 46ch; font-size: clamp(17px, 1.9vw, 19px);
             color: var(--smoke); line-height: 1.7; }
.hero .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .acts .btn { width: auto; min-width: 210px; }
.hero .stamp {
  margin-top: clamp(34px, 6vh, 60px); padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ash-text);
  padding-left: .15em;
}
@media (max-width: 560px) {
  .hero { min-height: 92svh; }
  .hero .acts .btn { width: 100%; min-width: 0; }
}

/* ============================================================
   01 · THE NEXT POUR
   ============================================================ */
.pour-panel { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(26px, 5vw, 64px);
              align-items: start; }
.pour-date { border-right: 1px solid var(--rule-soft); padding-right: clamp(20px, 3vw, 40px); }
.pour-date .mo { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12.5px; letter-spacing: .18em;
                 color: var(--brass); padding-left: .3em; }
.pour-date .dd { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
                 font-size: clamp(76px, 13vw, 140px); line-height: .92; margin-top: 4px;
                 font-variant-numeric: tabular-nums; }
.pour-date .wk { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--ash-text); margin-top: 8px; padding-left: .24em; }
.pour-body h2 { margin-bottom: 4px; }
.pour-body .when { font-size: 15.5px; color: var(--smoke); margin-top: 14px; }
.pour-body .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pour-body .lines { margin-top: 24px; }
.pour-body .lines dt { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .12em;
                       text-transform: uppercase; color: var(--ash-text); padding-left: .2em; }
.pour-body .lines dd { font-size: 16.5px; margin: 5px 0 18px; }
@media (max-width: 720px) {
  .pour-panel { grid-template-columns: 1fr; }
  .pour-date { border-right: none; border-bottom: 1px solid var(--rule-soft);
               padding-right: 0; padding-bottom: 22px; }
  .pour-date .dd { font-size: 84px; }
}

/* ============================================================
   02 · THE RITUAL — five steps, no icons
   ============================================================ */
.steps { counter-reset: step; border-top: 1px solid var(--rule-ink-soft); margin-top: 8px; }
.steps li {
  counter-increment: step; list-style: none; display: grid;
  grid-template-columns: 62px 1fr; gap: 18px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule-ink-soft);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12.5px; letter-spacing: .12em;
  color: var(--brass-ink); padding-left: .2em;
}
.steps li b { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
              font-size: 25px; display: block; line-height: 1.25; }
.steps li span { display: block; font-size: 15.5px; color: #43403A; margin-top: 5px; max-width: 58ch; }

/* ============================================================
   03 · BY THE NUMBERS
   ============================================================ */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.figs div { padding: 26px 20px 26px 0; border-top: 1px solid var(--rule-soft); }
.figs .n { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
           font-size: clamp(50px, 7vw, 78px); line-height: 1; font-variant-numeric: tabular-nums;
           color: var(--ivory); }
.figs .k { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11.5px; letter-spacing: .14em;
           text-transform: uppercase; color: var(--ash-text); margin-top: 12px; padding-left: .24em; }

/* ============================================================
   04 · FROM THE LEDGER — editorial entry cards
   ============================================================ */
.entries { display: grid; gap: 1px; background: var(--rule-soft); border-block: 1px solid var(--rule-soft); }
.entries.cols { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.entry { background: var(--cellar); padding: 28px 26px 30px; display: flex; flex-direction: column;
         transition: background .4s var(--ease); }
.entries.cols .entry { background: var(--charcoal); }
.entry:hover { background: #151412; }
.entry .when { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11.5px; letter-spacing: .15em;
               text-transform: uppercase; color: var(--brass); padding-left: .26em; }
.entry h3.th { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
               font-size: 30px; letter-spacing: 0; text-transform: none; padding-left: 0;
               margin-top: 10px; line-height: 1.16; color: var(--ivory); }
.entry .row { margin-top: 18px; }
.entry .row dt { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--ash-text); padding-left: .2em; }
.entry .row dd { font-size: 15.5px; margin-top: 6px; color: var(--ivory); font-weight: 400; }
ol.lineup { list-style: none; margin-top: 6px; }
ol.lineup li { font-size: 15.5px; padding: 5px 0 5px 24px; position: relative; color: var(--ivory); }
ol.lineup li::before {
  content: attr(data-n); position: absolute; left: 0; top: 6px;
  font-family: 'Jost', sans-serif; font-size: 11px; color: var(--ash-text);
  font-variant-numeric: tabular-nums;
}
ol.lineup li.won { color: var(--brass); }
ol.lineup li.won::before { color: var(--brass-dim); }
.entry .verdict { margin-top: auto; padding-top: 22px; }
.entry .verdict .who { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px;
                       color: var(--brass); line-height: 1.3; }
.entry .tag { margin-top: 14px; }

/* ============================================================
   05 · THE CODE
   ============================================================ */
.code-band { position: relative; overflow: hidden; background: var(--charcoal); }
.code-band .plate { position: absolute; inset: 0; }
.code-band .plate img { width: 100%; height: 100%; object-fit: cover; opacity: .14;
                        filter: grayscale(.4) contrast(1.1); }
.code-band .plate::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(17,16,14,0.92), rgba(7,7,7,0.86)); }
.code-band .shell { position: relative; }
.creed { list-style: none; margin-top: 8px; }
.creed li {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(22px, 3.1vw, 34px); line-height: 1.42; color: var(--ivory);
  padding: 16px 0 16px 34px; position: relative; max-width: 34ch;
}
.creed li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 18px;
                    height: 1px; background: var(--brass-dim); }
.creed li + li { border-top: 1px solid var(--rule-soft); }
.closing { margin-top: 38px; font-family: 'Cormorant Garamond', Georgia, serif;
           font-style: italic; font-size: clamp(19px, 2.4vw, 26px); color: var(--brass); }

/* ============================================================
   06 · AN INTRODUCTION
   ============================================================ */
.intro-grid { display: grid; grid-template-columns: 1fr minmax(320px, 480px);
              gap: clamp(30px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.counter { font-size: 13px; color: var(--ash-text); text-align: right; margin-top: 6px;
           font-variant-numeric: tabular-nums; }
.counter.over { color: var(--bad); }
.privacy-note { font-size: 13.5px; color: var(--ash-text); margin-top: 16px; line-height: 1.7; }
.thanks { border: 1px solid var(--brass-dim); border-radius: 3px; padding: 30px 26px; }
.thanks h3 { color: var(--brass); margin-bottom: 12px; }

/* ============================================================
   THE LEDGER PAGE
   ============================================================ */
.filters { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: end; }
.filters .field { margin-bottom: 0; }
.filters .btn { width: auto; min-width: 130px; }
@media (max-width: 760px) {
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .wide { grid-column: 1 / -1; }
  .filters .btn { width: 100%; min-width: 0; grid-column: 1 / -1; }
}
.count-line { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .12em;
              text-transform: uppercase; color: var(--ash-text); padding-left: .2em;
              margin: 26px 0 0; }

.led-row { border-bottom: 1px solid var(--rule-soft); }
.led-row h2 { margin: 0; font-size: inherit; }
.led-row button.head {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: baseline;
  padding: 26px 4px; color: inherit; font: inherit;
  transition: background .3s var(--ease);
}
.led-row button.head:hover { background: rgba(244,241,234,0.028); }
.led-row .d { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .12em;
              text-transform: uppercase; color: var(--brass); padding-left: .2em; white-space: nowrap; }
.led-row .t { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
              font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
.led-row .t em { font-style: normal; color: var(--brass); }
.led-row .chev { color: var(--ash-text); font-size: 12px; transition: transform .35s var(--ease); }
.led-row button.head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.led-row .panel { padding: 0 4px 30px; display: grid; gap: 26px;
                  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width: 680px) {
  .led-row button.head { grid-template-columns: 1fr auto; }
  .led-row .d { grid-column: 1 / -1; }
}

/* ============================================================
   ACCORDIONS — the FAQ
   ============================================================ */
.acc { border-top: 1px solid var(--rule-soft); }
.acc .q { border-bottom: 1px solid var(--rule-soft); }
.acc .q h3 { margin: 0; font-size: inherit; letter-spacing: 0;
              text-transform: none; padding-left: 0; }
.acc .q button.head {
  width: 100%; background: none; border: 0; cursor: pointer; color: inherit;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 22px 4px; text-align: left; min-height: 56px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(19px, 2.2vw, 25px); line-height: 1.3;
  transition: color .3s var(--ease);
}
.acc .q button.head:hover { color: var(--brass); }
.acc .q .sign { font-family: 'Jost', sans-serif; font-size: 16px; color: var(--brass-dim);
                flex: none; transition: transform .35s var(--ease); }
.acc .q button.head[aria-expanded="true"] .sign { transform: rotate(45deg); }
.acc .a { padding: 0 4px 26px; max-width: 70ch; }
.acc .a p + p { margin-top: 14px; }

/* ============================================================
   THE SCORECARD — one bottle at a time, built for a phone
   ============================================================ */
.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.progress .track { flex: 1; height: 2px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.progress .track i { display: block; height: 100%; background: var(--brass);
                     transition: width .5s var(--ease); }
.progress .of { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .12em;
                text-transform: uppercase; color: var(--ash-text); white-space: nowrap; padding-left: .2em; }

.pour-card { border: 1px solid var(--rule-soft); border-radius: 3px; padding: 26px 22px 28px;
             background: var(--charcoal); }
.pour-card .no { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11.5px; letter-spacing: .15em;
                 text-transform: uppercase; color: var(--brass); padding-left: .26em; }
.pour-card h2 { font-size: clamp(27px, 5vw, 38px); margin-top: 10px; }
.pour-card .style { margin-top: 10px; }

.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.scale button {
  min-height: 56px; border: 1px solid var(--rule); background: transparent; color: var(--ivory);
  border-radius: 3px; cursor: pointer; font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 20px; font-variant-numeric: tabular-nums;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.scale button:hover { border-color: var(--brass-dim); }
.scale button[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: #14100A; }
.scale-ends { display: flex; justify-content: space-between; margin-top: 10px;
              font-size: 13px; color: var(--ash-text); }

.stepper { display: flex; gap: 10px; margin-top: 28px; }
.stepper .btn { flex: 1; }
.dots { display: flex; gap: 7px; justify-content: center; margin-top: 22px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule);
          transition: background .3s var(--ease), transform .3s var(--ease); }
.dots i.done { background: var(--brass-dim); }
.dots i.on   { background: var(--brass); transform: scale(1.35); }

.rank-list { list-style: none; margin-top: 10px; }
.rank-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0;
                border-bottom: 1px solid var(--rule-soft); }
.rank-list .place { width: 40px; height: 40px; flex: none; border-radius: 50%;
                    border: 1px solid var(--rule); display: flex; align-items: center;
                    justify-content: center; font-family: 'Jost', sans-serif; font-size: 13px;
                    color: var(--ash-text); }
.rank-list .place.set { border-color: var(--brass); color: var(--brass); }
.rank-list .nm { flex: 1; font-size: 16.5px; }

.saved-flag { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px;
              color: var(--good); }
.saved-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                      background: currentColor; }

/* ============================================================
   PAGE HEADERS on interior pages
   ============================================================ */
.page-head { padding: clamp(66px, 13vh, 130px) 0 clamp(30px, 6vh, 56px); }
.page-head h1 { margin-top: 16px; max-width: 18ch; }
.page-head .lede { margin-top: 24px; max-width: 58ch; }

/* ============================================================
   COMPATIBILITY — the Admin tool
   Admin is an internal instrument, not part of the public
   redesign, and it still speaks the older names. These aliases
   keep it working against this stylesheet without rewriting it.
   ============================================================ */
:root {
  --accent:     var(--brass);
  --panel:      var(--charcoal);
  --line:       var(--rule);
  --line-soft:  var(--rule-soft);
  --ink-soft:   var(--smoke);
  --ink-faint:  var(--ash-text);
}
.kicker {
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; padding-left: .2em;
  color: var(--brass);
}
.card.gold, .pill.gold { border-color: var(--brass-dim); }
.pill.gold { color: var(--brass); }
td.num, th.num { text-align: right; padding-left: 20px; font-variant-numeric: tabular-nums; }
.figure { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
          font-size: clamp(44px, 8vw, 66px); line-height: 1; font-variant-numeric: tabular-nums; }
.verdict { font-family: 'Jost', sans-serif; font-size: 10.5px; letter-spacing: .24em;
           text-transform: uppercase; margin-top: 10px; padding-left: .24em; }
.tabs button.on { background: var(--brass); border-color: var(--brass); color: #14100A; }
.divider { height: 1px; background: var(--rule-soft); margin: 26px 0; }
.mast { padding: 26px 0 8px; }
.mast .what { font-family: 'Jost', sans-serif; font-size: 10.5px; letter-spacing: .3em;
              text-transform: uppercase; color: var(--brass); padding-left: .3em; }
.kpi { border: 1px solid var(--rule-soft); border-radius: 3px; padding: 20px 18px; }
.kpi .n { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
          font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .k { font-family: 'Jost', sans-serif; font-size: 9.5px; letter-spacing: .2em;
          text-transform: uppercase; color: var(--ash-text); margin-top: 10px; padding-left: .2em; }