/* ═══════════════════════════════════════════════════════════════════
   TEQUILA WATCH · "Cantera" design system (from design handoff)
   Warm off-white ground · gold as lines and marks, never floods ·
   fading hairlines · outlined buttons · Inter everywhere.
   Tokens unwrapped from assets/ds-cantera.css per README.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

/* Cantera, light ground. The ramps are ordered so a HIGHER neutral number is
   always more muted and a HIGHER accent number is always paler, exactly as in
   the dark original. Every consumer of these tokens therefore keeps working
   without edits. Values are hand tuned, not mechanically inverted, so that
   small text at neutral-500 still clears WCAG AA on the off-white ground. */
:root{
  --color-bg:#faf8f4; --color-surface:#ffffff; --color-text:#1c1917;
  --color-accent:#8a6a1f;
  --color-divider:color-mix(in srgb,#1c1917 14%,transparent);
  --color-neutral-100:#26231f; --color-neutral-200:#3b3833; --color-neutral-300:#55514a;
  --color-neutral-400:#6b665e; --color-neutral-500:#736e65; --color-neutral-600:#8f8a80;
  --color-neutral-700:#b3ada2; --color-neutral-800:#e8e4db; --color-neutral-900:#f4f1ea;
  --color-accent-100:#3a2c10; --color-accent-200:#5a4418; --color-accent-300:#7a5d20;
  --color-accent-400:#9a7728; --color-accent-500:#b8912f; --color-accent-600:#cfa14a;
  --color-accent-700:#e6cd93; --color-accent-800:#f7e9c6; --color-accent-900:#fdf6e6;
  --color-section:#f6ecd4; --color-section-glow:#fdf7e8;
  --color-up:#1f7a3f; --color-down:#b0342a;
  --color-scrim:rgba(28,25,23,.62);
  --font-heading:"Inter",system-ui,sans-serif; --font-heading-weight:500;
  --font-body:"Inter",system-ui,sans-serif;
  --space-1:2.8px; --space-2:5.6px; --space-3:8.4px; --space-4:11.2px; --space-6:16.8px; --space-8:22.4px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;
  --shadow-sm:0 0 0 1px rgba(28,25,23,.10);
  --shadow-md:0 0 0 1px rgba(28,25,23,.12),0 6px 18px rgba(28,25,23,.10);
  --shadow-lg:0 0 0 1px rgba(28,25,23,.14),0 16px 40px rgba(28,25,23,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:15px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-heading-weight);line-height:1.12;letter-spacing:-0.015em;margin:0 0 var(--space-2)}
p{margin:0 0 var(--space-3)}
a{color:var(--color-accent);text-underline-offset:3px}
img{display:block;max-width:100%}
figure{margin:0}
figcaption{font-size:12px;margin-top:8px;color:var(--color-neutral-400)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
.text-muted{color:color-mix(in srgb,var(--color-text) 55%,transparent)}
/* On the dark ground this blended photo edges into the page. On an off-white
   ground "lighten" would wash every image out to near white, so the class keeps
   its name (build.mjs emits it everywhere) but composites normally instead. */
.lighten{mix-blend-mode:normal;background-color:transparent;position:relative}
.lighten img{filter:saturate(1.02)}
/* Attribution sits on the image itself: small, bottom right, on a scrim so it
   reads over any photograph. Emitted by build.mjs for openly licensed imagery;
   CC BY and BY-SA require the credit, so it never gets styled away. */
.imgcredit{position:absolute;right:6px;bottom:6px;max-width:calc(100% - 12px);font-size:10px;line-height:1.3;letter-spacing:.02em;color:rgba(255,255,255,.92);background:rgba(28,25,23,.55);padding:2px 7px;border-radius:4px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
/* A required credit that gets ellipsed is no credit at all: on narrow screens
   the line wraps instead of truncating. */
@media (max-width:640px){.imgcredit{white-space:normal}}

/* fading hairline: solid at left, transparent at right (Cantera signature) */
.frule{height:1px;border:0;margin:0;max-width:1440px;margin-inline:auto;background:linear-gradient(90deg,var(--color-divider) 0%,var(--color-divider) 55%,transparent 100%)}
.frule-soft{height:1px;background:linear-gradient(90deg,var(--color-divider),transparent)}

/* — buttons: outlined, never solid — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-weight:500;font-size:14px;line-height:1.2;color:var(--color-text);background:transparent;border:1px solid transparent;padding:var(--space-2) calc(var(--space-3)*1.2);border-radius:var(--radius-md)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{color:var(--color-accent);border-color:var(--color-accent)}
.btn-primary:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.btn-primary:active{background:color-mix(in srgb,var(--color-accent) 22%,transparent)}
.btn-secondary{border-color:var(--color-divider)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.btn-ghost{color:var(--color-accent);padding-inline:var(--space-1)}
.btn-ghost:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.btn-block{width:100%;margin-top:var(--space-2)}

/* — forms — */
.input{width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:14px;color:var(--color-text);caret-color:var(--color-accent);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.input:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.input:focus-visible{border-color:var(--color-accent);outline-offset:0}
/* Segmented control. These were bare <button>s in a square box, so the browser
   drew its own chrome on top: the same "old HTML" look the filter chips had.
   One track, one thumb. It shares the pill vocabulary of .chip but stays a
   single joined run, because a seg picks one option where chips stack. */
.seg{display:inline-flex;gap:3px;padding:3px;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:999px}
.seg-opt{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-family:var(--font-heading);font-weight:500;font-size:13px;line-height:1;letter-spacing:.005em;cursor:pointer;background:transparent;border:0;border-radius:999px;color:var(--color-neutral-300);white-space:nowrap}
.seg-opt.on{color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.seg-opt:not(.on):hover{color:var(--color-text);background:color-mix(in srgb,var(--color-text) 5%,transparent)}
.seg-opt:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* — cards — */
.card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-surface)}
.card-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.card-title{font-family:var(--font-heading);font-weight:500;font-size:17px;line-height:1.2;color:inherit;text-decoration:none}
.card-body{margin:0;font-size:13px;opacity:.8;flex:1}
.card-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:color-mix(in srgb,var(--color-text) 50%,transparent)}
.elev-sm{box-shadow:var(--shadow-sm)}
.card-flush{padding:0;gap:0;overflow:hidden}
/* lead card in a mixed-height grid: image absorbs the extra height, no dead space */
.card-grow .lighten{flex:1;min-height:0}
.card-grow .lighten img{height:100% !important;aspect-ratio:auto !important}
.card-pad{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px}

/* — tags — */
.tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:6px;text-decoration:none}
.tag-accent{background:var(--color-accent-800);color:var(--color-accent-100)}
.tag-neutral{background:var(--color-neutral-800);color:var(--color-neutral-100)}
.tag-outline{border:1px solid var(--color-accent);color:var(--color-accent);background:transparent}

/* — filter chips —
   One component for every card grid on the site: recipes, houses, the news
   river. These are <button>s, so they need the appearance reset: without it
   the browser draws its own border and the row reads as a 1998 form. Gold
   marks the active chip as a line and a whisper of wash, never a fill. */
.chipbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:22px 0 0}
.chip{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;font-family:var(--font-heading);font-weight:500;font-size:13px;line-height:1;letter-spacing:.005em;color:var(--color-neutral-300);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.chip:hover{color:var(--color-text);border-color:color-mix(in srgb,var(--color-text) 32%,transparent);box-shadow:var(--shadow-sm)}
.chip:active{background:color-mix(in srgb,var(--color-text) 4%,transparent)}
.chip .n{font-size:11px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--color-neutral-500);transition:color .18s ease}
.chip.on{color:var(--color-accent);border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,transparent)}
.chip.on .n{color:color-mix(in srgb,var(--color-accent) 78%,transparent)}
.chip.on:hover{border-color:var(--color-accent);box-shadow:none}
.chip:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
/* The search sits in the same row and answers to the same shape. */
.toolbar-search{max-width:270px;min-width:190px;margin-left:auto;border-radius:999px;padding:8px 16px;min-height:0}

/* — ask the sommelier (recipes page) — */
/* A person at the bar, not a form: photographic header, presence dot, typing
   indicator. The dot and dots animate, so everything here degrades cleanly
   under the global reduced-motion kill switch (they simply hold still). */
.somm{max-width:860px}
.somm-hero{position:relative;min-height:150px;background:linear-gradient(120deg,#241d15,#3a2c1a 60%,#241d15);display:flex;align-items:flex-end}
.somm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.somm-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,10,.05) 0%,rgba(20,15,10,.38) 55%,rgba(20,15,10,.78) 100%)}
/* On the hero the identity row owns the bottom edge, so the credit rides the
   top corner instead of its usual bottom-right and never collides with it. */
.somm-hero .imgcredit{z-index:2;top:6px;bottom:auto}
.somm-id{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:16px 18px}
.somm-ava{position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:#3a2c1a;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 4px 14px rgba(0,0,0,.35)}
.somm-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:58% 28%}
.somm-dot{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:#2fae5e;box-shadow:0 0 0 2.5px #fff;animation:sommPulse 2.4s ease-out infinite}
.somm-dot.off{background:var(--color-neutral-600);animation:none}
@keyframes sommPulse{0%{box-shadow:0 0 0 2.5px #fff,0 0 0 0 rgba(47,174,94,.55)}70%{box-shadow:0 0 0 2.5px #fff,0 0 0 9px rgba(47,174,94,0)}100%{box-shadow:0 0 0 2.5px #fff,0 0 0 0 rgba(47,174,94,0)}}
.somm-who{display:flex;flex-direction:column;gap:2px}
.somm-name{font-family:var(--font-heading);font-weight:500;font-size:17px;color:#fff;letter-spacing:-0.01em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.somm-status{font-size:12px;color:rgba(255,255,255,.88);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.somm-status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2fae5e;margin-right:6px;vertical-align:1px}
.somm-status.off::before{background:var(--color-neutral-600)}
.somm-body{gap:12px}
.somm-intro{max-width:64ch;font-size:14px}
/* Always rendered, never display:none: it is an aria-live region, and screen
   readers routinely miss announcements in a container revealed in the same
   tick it is filled. Empty, a flex column renders zero height anyway. */
.somm-log{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto}
.somm-msg{font-size:14px;line-height:1.55;padding:9px 13px;border-radius:14px;max-width:56ch;white-space:pre-line}
.somm-msg.you{align-self:flex-end;border-bottom-right-radius:5px;background:color-mix(in srgb,var(--color-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 35%,transparent)}
.somm-msg.som{align-self:flex-start;border-bottom-left-radius:5px;background:var(--color-bg);border:1px solid var(--color-divider)}
.somm-msg.err{align-self:flex-start;color:var(--color-neutral-300);border:1px dashed var(--color-divider)}
.somm-typing{display:flex;gap:5px;align-items:center;padding:13px 14px}
.somm-typing .td{width:7px;height:7px;border-radius:50%;background:var(--color-accent-500);opacity:.4;animation:sommTd 1.2s infinite}
.somm-typing .td:nth-child(2){animation-delay:.18s}
.somm-typing .td:nth-child(3){animation-delay:.36s}
@keyframes sommTd{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.somm-picks{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start;align-items:center}
.somm-picks-label{font-size:11px;color:var(--color-neutral-500)}
.somm-chips{display:flex;gap:8px;flex-wrap:wrap}
.somm-chip{cursor:pointer;border:0;font-family:inherit;min-height:30px}
.somm-chip:hover{color:var(--color-accent)}
.somm-form{display:flex;gap:8px;margin:0}
.somm-form .input{flex:1;min-width:0}
.somm-note{margin:0;font-size:11px;color:var(--color-neutral-500)}
@media (max-width:640px){
  .chip{min-height:44px;padding-inline:16px}
  .toolbar-search{max-width:none;width:100%;margin-left:0;min-height:44px}
  .pager button{min-height:44px}
  .somm{max-width:none}
  .somm-hero{min-height:124px}
  .somm-id{padding:12px 14px;gap:11px}
  .somm-ava{width:52px;height:52px}
  .somm-name{font-size:15px}
  /* One swipeable row instead of a wall of stacked chips. */
  .somm-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .somm-chips::-webkit-scrollbar{display:none}
  .somm-chip{min-height:44px;flex:none}
  .somm-form .btn{min-height:44px}
  .somm-msg{max-width:88%}
}

/* — tables — */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 60%,transparent);padding:var(--space-2);border-bottom:1px solid transparent}
.table td{padding:var(--space-2);border-bottom:1px solid transparent}
.table thead tr{background:linear-gradient(to right,transparent,var(--color-divider) 48px,var(--color-divider) calc(100% - 48px),transparent) no-repeat bottom/100% 1px}
.table tbody tr{background:linear-gradient(to right,transparent,color-mix(in srgb,var(--color-text) 8%,transparent) 48px,color-mix(in srgb,var(--color-text) 8%,transparent) calc(100% - 48px),transparent) no-repeat bottom/100% 1px}
.table tbody tr:hover{background:linear-gradient(color-mix(in srgb,var(--color-text) 4%,transparent),color-mix(in srgb,var(--color-text) 4%,transparent)) no-repeat 0 0/100% 100%,linear-gradient(to right,transparent,color-mix(in srgb,var(--color-text) 8%,transparent) 48px,color-mix(in srgb,var(--color-text) 8%,transparent) calc(100% - 48px),transparent) no-repeat bottom/100% 1px}

/* ═══ chrome ═══ */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 48px;max-width:1440px;margin-inline:auto;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-400)}
.hdr{display:flex;align-items:center;gap:24px;padding:16px 48px;max-width:1440px;margin-inline:auto}
.hdr-brand{font-family:var(--font-heading);font-weight:500;font-size:20px;letter-spacing:.02em;text-decoration:none;color:inherit;margin-right:auto}
.hdr nav{display:flex;gap:20px;font-size:14px}
.hdr nav a{color:var(--color-neutral-300);text-decoration:none}
.hdr nav a:hover{color:var(--color-accent-300)}
.hdr nav a.on{color:var(--color-accent-300);border-bottom:1px solid var(--color-accent)}
.menu-toggle{display:none;background:none;border:0;color:var(--color-text);cursor:pointer;padding:6px}


/* ticker */
.ticker{display:flex;align-items:center;gap:24px;padding:11px 48px;max-width:1440px;margin-inline:auto;white-space:nowrap;font-size:13px}
.ticker-view{overflow:hidden;flex:1;display:flex;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.tape{display:inline-flex;gap:24px;padding-right:24px;flex:none;min-width:max-content;animation:tickerScroll 48s linear infinite}
.ticker:hover .tape,.ticker:focus-within .tape{animation-play-state:paused}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.ticker-label{flex:none;border-left:2px solid var(--color-accent);padding-left:10px;color:var(--color-accent-300);letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.tk{display:inline-flex;gap:6px;flex:none}
.tk a{color:var(--color-neutral-200);text-decoration:none}
.tk a:hover{color:var(--color-accent-300)}
.tk .s{font-weight:500}
.d-up{color:var(--color-up);font-size:11px}
.d-dn{color:var(--color-down);font-size:11px}
.d-un{color:var(--color-neutral-500);font-size:10px}

/* layout: content hugs left, whitespace right */
.px{padding-left:48px;padding-right:88px}
.sec{padding:32px 48px 40px;max-width:1440px;margin-inline:auto}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.sec-head h2{margin:0;font-size:26px;font-weight:500}
.sec-note{font-size:13px;color:var(--color-neutral-400)}
.sec-link{margin-left:auto;font-size:13px;color:var(--color-accent-300);text-decoration:none}

/* ── section separation ──────────────────────────────────────────────
   A single hairline was not enough to tell one homepage section from the
   next. Sections now sit in full bleed bands that alternate ground colour,
   carry a rule at the seam, and open with a gold eyebrow above a larger
   heading. Three cues, so the boundary survives at any zoom and does not
   depend on colour alone. */
.band{position:relative}
.band+.band{border-top:1px solid var(--color-divider)}
.band-tint{background:color-mix(in srgb,var(--color-accent) 4%,var(--color-bg))}
.band-hero .sec,.band .sec{padding-block:44px 52px}
.band-hero{padding-bottom:8px}
.sec-head{flex-wrap:wrap;align-items:baseline;row-gap:4px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--color-divider)}
.sec-head h2{font-size:32px;letter-spacing:-0.02em}
.sec-eyebrow{flex:0 0 100%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:2px}
.sec-eyebrow::before{content:"";display:inline-block;width:18px;height:1px;background:var(--color-accent);vertical-align:middle;margin-right:8px}

/* ── Index search + collection filters ── */
.idxf{margin-bottom:18px;display:flex;flex-direction:column;gap:10px}
.idxf-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.idxf-search{max-width:340px}
.idxf-lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-500);min-width:76px}
.idxf-clear{font-size:13px}
.idxf-empty{font-size:14px;color:var(--color-neutral-400);padding:22px 0}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--color-accent-300);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){
  .idxf-lbl{min-width:0;flex:0 0 100%}
  .idxf-row{gap:8px}
  .idxf-search{max-width:none;flex:1}
  /* A pill radius on a track that has wrapped to two rows reads as a stadium,
     so the wrapped form squares off to the standard card radius. */
  .idxf .seg{flex-wrap:wrap;border-radius:var(--radius-lg)}
  .sec-head h2{font-size:26px}
}
.kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-300)}
.overline{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-400)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:44px;padding:32px 48px 40px;max-width:1440px;margin-inline:auto}
.rail-grid{display:grid;grid-template-columns:1fr 340px;gap:44px;padding:24px 48px 48px;max-width:1440px;margin-inline:auto}
.rail-item{padding:12px 0}
.rail-item .m{font-size:11px;color:var(--color-neutral-500);display:flex;gap:8px;margin-bottom:5px}
.rail-item a.t{font-weight:500;font-size:16px;line-height:1.4;color:inherit;text-decoration:none}
.rail-item a.t:hover{color:var(--color-accent-300)}

/* reading pages */
.read{max-width:1440px;margin-inline:auto;padding:28px 48px 48px}
.read>*{max-width:66ch}
.read-wide{padding:28px 48px 48px;max-width:1440px;margin-inline:auto}
.crumb{font-size:12px;color:var(--color-neutral-500);padding:18px 48px 0;max-width:1440px;margin-inline:auto}
.crumb a{color:var(--color-neutral-400);text-decoration:none}
.crumb a:hover{color:var(--color-accent-300)}
.byline{font-size:13px;color:var(--color-neutral-400);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.byline a{color:var(--color-accent-300);text-decoration:none}
.article-body{font-size:19px;line-height:1.75;color:var(--color-neutral-200)}
.article-body p{margin:0 0 20px;max-width:66ch}
.article-body h2{font-size:24px;font-weight:500;color:var(--color-text);margin:30px 0 12px}
.article-body a{color:var(--color-accent-300)}
.dek{font-size:18px;line-height:1.65;color:var(--color-neutral-200);max-width:58ch}
.srcbox{background:var(--color-surface);border-left:2px solid var(--color-accent);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:16px 18px;margin:24px 0;max-width:66ch}
.srcbox .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin-bottom:6px}
.srcbox p{margin:0;font-size:14px;color:var(--color-neutral-300)}
.brief{background:var(--color-surface);border-radius:var(--radius-md);padding:18px 20px;margin:20px 0;max-width:66ch;box-shadow:var(--shadow-sm)}
.brief .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin-bottom:8px}
.brief ul{margin:0;padding-left:18px;font-size:15px;line-height:1.65;color:var(--color-neutral-200)}
.brief li{margin-bottom:6px}
.pull{border-left:2px solid var(--color-accent);padding:4px 0 4px 20px;margin:26px 0;max-width:60ch}
.pull .q{font-size:22px;line-height:1.5;color:var(--color-text);font-weight:400}
.pull .c{font-size:13px;color:var(--color-neutral-500);margin-top:8px}

/* score plate (dossier) */
.plate{display:inline-flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--color-accent);border-radius:var(--radius-md);padding:14px 26px}
.plate .n{font-size:44px;font-weight:500;color:var(--color-accent-300);line-height:1}
.plate .b{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-400);margin-top:4px}
/* 7 day movement, set large enough to read at a glance beside the score it
   belongs to. Colour alone never carries the meaning: the arrow glyph and the
   number do, so this stays legible to colour blind readers and in print. */
.plate-row{display:inline-flex;align-items:center;gap:12px}
.mv{display:inline-flex;align-items:center;gap:3px;line-height:1;font-weight:500}
.mv .ar{font-size:30px;line-height:1}
.mv .dv{font-size:24px;line-height:1}
.mv-up{color:var(--color-up)}
.mv-dn{color:var(--color-down)}
.mv-un,.mv-new{font-size:11px;letter-spacing:.1em;color:var(--color-neutral-500);border:1px solid var(--color-divider);border-radius:4px;padding:3px 7px}

/* three pillars summary on a dossier */
.pillars-mini{border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:18px 20px;margin:0 0 26px;background:var(--color-surface)}
.pm-head{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:14px}
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pm{display:flex;gap:10px;align-items:flex-start}
.pm-n{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--color-accent);color:var(--color-accent);font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.pm-t{font-weight:500;font-size:14px;margin-bottom:3px}
.pm p{margin:0;font-size:13px;line-height:1.5;color:var(--color-neutral-400)}
.pm-link{display:inline-block;margin-top:14px;font-size:13px;color:var(--color-accent-300);text-decoration:none}
@media(max-width:860px){.pm-grid{grid-template-columns:1fr;gap:14px}}
.spec{width:100%;max-width:560px;font-size:14px}
.spec .row{display:flex;justify-content:space-between;gap:20px;padding:9px 0;background:linear-gradient(to right,var(--color-neutral-800),transparent) no-repeat bottom/100% 1px}
.spec .k{color:var(--color-neutral-500);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.spec .v{color:var(--color-neutral-200);text-align:right}
.notes p{font-size:17px;line-height:1.7;color:var(--color-neutral-200);max-width:60ch}
.notes .lead{color:var(--color-accent-300);font-weight:500}

/* newsletter band */
.nl-bleed{background:linear-gradient(140deg,var(--color-section) 0%,var(--color-section-glow) 100%)}
.nl-band{padding:44px 48px;display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:center;max-width:1440px;margin-inline:auto}
.nl-inline{background:linear-gradient(140deg,var(--color-section) 0%,var(--color-section-glow) 100%);border-radius:var(--radius-md);padding:20px 22px;margin:28px 0;max-width:66ch}
.nl-inline .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-300);margin-bottom:6px}
.nl-inline form{display:flex;gap:10px;margin-top:12px}

/* footer */
.foot{padding:32px 48px 36px;max-width:1440px;margin-inline:auto}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot h5{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-500);margin:0 0 10px;font-weight:500}
.foot .col{display:flex;flex-direction:column;gap:6px;font-size:13px}
.foot .col a{color:var(--color-neutral-300);text-decoration:none}
.foot .col a:hover{color:var(--color-accent-300)}
.foot-line{display:flex;justify-content:space-between;font-size:12px;color:var(--color-neutral-500);gap:14px;flex-wrap:wrap}
.foot-line a{color:var(--color-accent-300);text-decoration:none}

/* feed */
.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{cursor:pointer;text-align:left;border:0;font-family:inherit;color:inherit}
.fthumb{position:relative}
.fthumb img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover}
.fplay{position:relative;margin-top:-52px;padding:0 14px;display:flex;justify-content:space-between;align-items:center;z-index:1}
.fplay .pb{width:40px;height:40px;border:1px solid var(--color-accent);border-radius:50%;color:var(--color-accent-300);display:grid;place-items:center;font-size:13px;background:color-mix(in srgb,var(--color-bg) 55%,transparent)}
.fplay .dur{background:var(--color-neutral-900);color:var(--color-neutral-200);font-size:11px;padding:2px 8px;border-radius:var(--radius-sm)}
/* overlay */
.ovl{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:24px;background:var(--color-scrim);backdrop-filter:blur(6px)}
.ovl.open{display:grid}
.ovl-card{width:min(880px,100%);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:16px 18px 18px}
.ovl-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ovl-head .x{margin-left:auto;background:none;border:0;color:var(--color-neutral-400);font-size:20px;cursor:pointer;line-height:1}
.ovl-head .x:hover{color:var(--color-text)}
.ovl-frame{aspect-ratio:16/9;background:#000;border-radius:var(--radius-md);overflow:hidden}
.ovl-frame iframe{width:100%;height:100%;border:0;display:block}
.ovl-title{font-size:18px;font-weight:500;margin:14px 0 4px}
.ovl-meta{font-size:12px;color:var(--color-neutral-400)}
.ovl-actions{display:flex;gap:10px;align-items:center;margin-top:14px}
.ovl-hint{margin-left:auto;font-size:11px;color:var(--color-neutral-500)}

/* database filters */
.dbf{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0}
.dbf .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-500)}
.fgroup{display:contents}
.fpills{gap:8px;white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 10px}
.fpills::-webkit-scrollbar{display:none}
.fpills .fpill{min-height:40px;flex:none}
.fpills .fpill.on{color:var(--color-accent);border-color:var(--color-accent)}
/* innovation index grid (was inline style; must collapse on mobile) */
.inno-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-top:22px}
/* newsletter landing two-col */
.nl-grid{grid-template-columns:1fr 1.2fr;gap:44px}
.pager{display:flex;gap:6px;align-items:center;margin-top:16px;font-size:13px;flex-wrap:wrap}
.pager button{appearance:none;-webkit-appearance:none;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:999px;color:var(--color-neutral-300);padding:7px 14px;cursor:pointer;font-family:var(--font-heading);font-weight:500;font-size:13px;line-height:1;transition:color .18s ease,border-color .18s ease,box-shadow .18s ease}
.pager button:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent);box-shadow:var(--shadow-sm)}
.pager button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.pager button.on{color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent);border-color:var(--color-accent)}
.pager button:disabled{opacity:.4;cursor:default}
.pager .info{color:var(--color-neutral-500);margin-left:8px}
.pager .gap{color:var(--color-neutral-500);padding:0 2px}
.sorth{cursor:pointer;user-select:none}
.sorth:hover{color:var(--color-accent-300)}

/* brands directory */
/* Visually hidden, present for screen readers: the clip pattern. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* — the homepage Index list —
   A list, not a table: on a phone a seven column table has to be rebuilt with
   absolute positioning, and this section only carries what a reader ranks by.
   The bottle stands on its own plate, the way it does on its dossier. */
.idxlist{display:flex;flex-direction:column;margin-top:16px;border-top:1px solid var(--color-divider)}
.idxrow{display:grid;grid-template-columns:26px 44px 1fr auto;align-items:center;gap:14px;padding:11px 4px;text-decoration:none;color:inherit;border-bottom:1px solid var(--color-divider);transition:background-color .18s ease}
.idxrow:hover{background:color-mix(in srgb,var(--color-accent) 5%,transparent)}
.idxrow-rk{font-size:12px;color:var(--color-neutral-500);font-variant-numeric:tabular-nums;text-align:right}
.idxrow-shot{display:flex;align-items:center;justify-content:center;height:52px;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-sm)}
.idxrow-shot img{max-height:44px;width:auto;object-fit:contain}
.idxrow-main{min-width:0}
.idxrow-name{display:block;font-family:var(--font-heading);font-weight:500;font-size:16px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idxrow-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--color-neutral-400);margin-top:2px}
.idxrow-brand{color:var(--color-accent-300)}
.idxrow-dot{color:var(--color-neutral-600)}
.idxrow-vp{color:var(--color-neutral-400)}
/* The score and its band are two facts, not one. At line-height 1.1 the digits
   and the word under them read as a single smudged block, so they get air. */
.idxrow-score{display:flex;flex-direction:column;align-items:flex-end;gap:5px;line-height:1.1}
.idxrow-score .sv{font-family:var(--font-heading);font-weight:500;font-size:21px;color:var(--color-accent-300);font-variant-numeric:tabular-nums}
.idxrow-score .sb{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-500)}
/* One bar on a desktop: chips left, search right. */
.filterbar{display:flex;align-items:center;gap:14px;margin:22px 0 0}
.filterbar .chipbar{margin:0;flex:1 1 auto;min-width:0}
.filterbar .toolbar-search{margin-left:0;flex:0 0 auto}
@media (max-width:640px){
  .idxrow{grid-template-columns:38px 1fr auto;gap:11px;padding:10px 2px}
  .idxrow-rk{display:none}
  .idxrow-shot{height:46px}
  .idxrow-shot img{max-height:40px}
  .idxrow-name{font-size:15px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .idxrow-score .sv{font-size:19px}
  /* The front page asks for name, place, brand and score. Purity is the one
     thing that pushed the meta line onto a second row on a phone, and it is
     already the loudest filter chip above, so it steps out here. */
  .idxrow-vp{display:none}
  /* Three stacked rows of chips plus a field put the first bottle most of a
     screen below the heading. One scrolling line of chips and one field. */
  .filterbar{flex-direction:column;align-items:stretch;gap:9px;margin-top:16px}
  .filterbar .chipbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:7px;padding-bottom:1px}
  .filterbar .chipbar::-webkit-scrollbar{display:none}
  .filterbar .chip{padding:7px 13px;font-size:12.5px}
  .filterbar .toolbar-search{width:100%;max-width:none;min-width:0}
}

/* — industry metrics —
   Every figure here was measured by somebody else, so every figure names them,
   dates itself and links out. build.mjs drops any metric missing one of those. */
/* The bottom margin matters: .grid3 carries none of its own, so without it the
   strip sat flush against the article cards under it on the front page. */
.metricstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:22px 0 30px}
.metric{display:flex;flex-direction:column;gap:5px;padding:16px 18px;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.metric-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.metric-value{font-family:var(--font-heading);font-weight:500;font-size:30px;line-height:1.05;color:var(--color-text);display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.metric-unit{font-family:var(--font-body);font-weight:400;font-size:12px;color:var(--color-neutral-400);letter-spacing:0}
.metric-src{font-size:11px;color:var(--color-neutral-500)}
.metric-src a{color:var(--color-neutral-400);text-decoration:none}
.metric-src a:hover{color:var(--color-accent-300)}
.metric-note{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--color-neutral-300)}
.metricstrip-full{grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:1020px){.metricstrip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.metricstrip,.metricstrip-full{grid-template-columns:1fr;gap:12px}.metric-value{font-size:26px}}

/* — house directory cards — */
.bcard{text-decoration:none;color:inherit}
.bcard-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bcard-score{font-family:var(--font-heading);font-weight:500;font-size:19px;color:var(--color-accent-300);flex:none}
/* The monogram tile: a house with no real photograph gets its initial set
   large on a warm tint instead of a stock agave field that told the reader
   nothing. A portal photo upload replaces it the moment one exists. */
.bmono{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-section) 0%,var(--color-accent-900) 55%,var(--color-section-glow) 100%)}
/* A square or portrait upload sits whole on the same warm ground the monogram
   uses, rather than being cover-cropped through its own subject. */
.bshot-tile-pad{background:linear-gradient(135deg,var(--color-section) 0%,var(--color-accent-900) 55%,var(--color-section-glow) 100%)}
.bshot-tile-pad img{padding:10px}
.bmono span{font-family:var(--font-heading);font-weight:500;font-size:46px;letter-spacing:.01em;color:var(--color-accent-400);border:1px solid color-mix(in srgb,var(--color-accent) 35%,transparent);border-radius:50%;width:84px;height:84px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#ffffff 55%,transparent)}
@media (max-width:640px){
  .bmono span{font-size:38px;width:72px;height:72px}
}

/* at-a-glance / rail cards */
.glance .row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:13px;background:linear-gradient(to right,var(--color-neutral-800),transparent) no-repeat bottom/100% 1px}
.glance .k{color:var(--color-neutral-500)}
.glance .v{color:var(--color-neutral-200);text-align:right}
.scorecard{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;background:linear-gradient(to right,var(--color-neutral-800),transparent) no-repeat bottom/100% 1px;font-size:14px;color:var(--color-neutral-200);text-decoration:none}
.scorecard:hover{color:var(--color-accent-300)}
.scorecard .sc{font-weight:500;color:var(--color-accent-300)}

/* definitions */
.az{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;margin:14px 0 6px}
.az a{color:var(--color-accent-300);text-decoration:none}
.az span{color:var(--color-neutral-500)}
.gloss{columns:2;column-gap:48px;max-width:1100px}
.gloss .entry{break-inside:avoid;padding:14px 0}
.gloss .entry .t{font-size:18px;font-weight:500;margin-bottom:5px}
.gloss .entry p{font-size:15px;line-height:1.65;color:var(--color-neutral-300);margin:0}
.gloss .entry{background:linear-gradient(90deg,var(--color-divider),transparent) no-repeat top/100% 1px}

/* recipe */
.steps{counter-reset:st;margin:0;padding:0;list-style:none}
.steps li{counter-increment:st;display:flex;gap:14px;margin-bottom:14px;font-size:16px;line-height:1.65;color:var(--color-neutral-200)}
.steps li::before{content:counter(st);flex:none;width:26px;height:26px;border:1px solid var(--color-accent);border-radius:50%;color:var(--color-accent-300);display:grid;place-items:center;font-size:12px}

/* author */
.avatar{width:84px;height:84px;border:1px solid var(--color-accent);border-radius:50%;display:grid;place-items:center;font-size:26px;color:var(--color-accent-300)}
.avatar-sm{width:52px;height:52px;font-size:17px}

/* number steps (methodology / newsletter) */
.numrow{display:flex;gap:14px;margin-bottom:16px}
.numrow .n{flex:none;width:26px;height:26px;border:1px solid var(--color-accent);border-radius:50%;color:var(--color-accent-300);display:grid;place-items:center;font-size:12px}
.numrow .t{font-size:16px;font-weight:500;margin-bottom:3px}
.numrow p{font-size:14px;color:var(--color-neutral-300);margin:0;line-height:1.6}

/* sticky mobile newsletter bar */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--color-surface);border-top:1px solid var(--color-accent);padding:10px 16px;display:none;align-items:center;justify-content:space-between;gap:12px}
.sticky-bar .st{font-size:14px}
.sticky-bar .x{background:none;border:0;color:var(--color-neutral-400);font-size:18px;cursor:pointer}

/* ═══ responsive ═══ */
@media(max-width:1020px){
  .inno-grid{grid-template-columns:1fr}
  .topbar,.hdr,.ticker,.crumb{padding-left:24px;padding-right:24px}
  .sec,.hero-grid,.rail-grid,.read,.read-wide,.foot,.nl-band{padding-left:24px;padding-right:24px}
  .hdr nav{display:none}
  .menu-toggle{display:block}
  .hero-grid,.rail-grid{grid-template-columns:1fr}
  .grid3,.feed-grid{grid-template-columns:1fr 1fr}
  .nl-band{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .gloss{columns:1}
}
@media(max-width:640px){
  body{font-size:16px}
  .grid3,.grid2,.feed-grid,.foot-grid,.inno-grid,.nl-grid{grid-template-columns:1fr}
  .card-grow .lighten{flex:none}
  .card-grow .lighten img{height:150px !important}
  h1{font-size:30px!important}
  .article-body{font-size:17px}
  .sticky-bar{display:flex}
  body{padding-bottom:56px}
  .nl-inline form{flex-direction:column}
  .table{font-size:13px}
  .table[data-role="table"] th:nth-child(4),.table[data-role="table"] td:nth-child(4){display:none}
}

.thumb169 img{width:100%;aspect-ratio:16/9;height:auto!important;object-fit:cover}
.table th.cn{width:36px}.table th.cbr{width:150px}.table th.cca{width:150px}.table th.csc{width:130px}.table th.cd7{width:80px}.table th.cpu{width:140px}
/* The figure and the unit that qualifies it. On a narrow card the unit is a
   whole clause, so let it drop to its own line rather than squeeze the number
   until "7.62 pesos" breaks across two. */
.statline{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;padding-top:8px;margin-top:auto}
.statline>span:first-child{white-space:nowrap}

/* ═══ motion (Cantera-restrained; fully disabled under reduced motion) ═══ */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .35s ease}
/* scroll reveal (JS adds .rv, then .in when visible) */
.rv{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
/* card + link micro-interactions */
.card{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease}
a.card:hover,button.card:hover,a.bfeat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card-flush .lighten img,.fthumb img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
a.card:hover .lighten img,button.card:hover .lighten img,button.card:hover .fthumb img{transform:scale(1.035)}
.btn{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.btn-primary:hover{transform:translateY(-1px)}
.sec-link,.btn-ghost{transition:transform .2s ease,background .2s ease,color .2s ease}
.sec-link:hover{transform:translateX(2px)}
.tag{transition:border-color .2s ease,color .2s ease,background .2s ease}
.scorecard,.rail-item a.t,.tk a{transition:color .2s ease}
.seg-opt{transition:color .2s ease,box-shadow .2s ease,background .2s ease}
.spost .pb,.fplay .pb{transition:transform .25s ease,background .25s ease}
button.card:hover .pb{transform:scale(1.1);background:color-mix(in srgb,var(--color-accent) 18%,transparent)}
/* nav underline draw */
.hdr nav a{position:relative;padding-bottom:2px}
.hdr nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.hdr nav a:hover::after,.hdr nav a.on::after{transform:scaleX(1)}
.hdr nav a.on{border-bottom:0}
/* hero ken burns */
.hero-grid figure .lighten img{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.055)}}
/* overlay entrance */
.ovl.open{animation:pageIn .18s ease}
.ovl.open .ovl-card{animation:cardIn .26s cubic-bezier(.2,.7,.3,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:none}}
/* sticky bar slide-up */
@media(max-width:640px){.sticky-bar{animation:barUp .45s cubic-bezier(.2,.7,.3,1) .8s both}}
@keyframes barUp{from{transform:translateY(100%)}to{transform:none}}
/* table page swap */
#dbTable tbody{transition:opacity .18s ease}
#dbTable tbody.swap{opacity:.25}
/* subscribe pop */
.pop{animation:pop .3s cubic-bezier(.2,.7,.3,1)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
/* reduced motion: kill everything */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  .ticker-view{overflow-x:auto}
}

/* ═══ MOBILE (frames 5a-5f, 390px spec) ═══ */
.d-short{display:none}
/* 5b full-screen menu sheet */
.msheet{position:fixed;inset:0;z-index:150;background:var(--color-bg);display:none;flex-direction:column;overflow-y:auto}
.msheet.open{display:flex}
.msheet-head{display:flex;align-items:center;gap:14px;padding:12px 20px}
.msheet-x{width:44px;height:44px;display:grid;place-items:center;color:var(--color-neutral-200);background:none;border:0;font-size:18px;cursor:pointer}
.msheet-nav{display:flex;flex-direction:column;padding:14px 20px 4px}
.msheet-nav a{font-size:20px;font-weight:500;color:var(--color-text);text-decoration:none;padding:13px 0;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--color-neutral-800)}
.msheet-nav a:last-child{border-bottom:0}
.msheet-nav a.on{color:var(--color-accent-300)}
.msheet-trust{padding:0 20px 28px}
.msheet-trust .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-300);margin-bottom:10px}
.msheet-trust .links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;margin-bottom:18px}
.msheet-trust .links a{color:var(--color-neutral-300);text-decoration:none;padding:6px 0}
.msheet-trust p{font-size:12px;color:var(--color-neutral-500);margin:0}

@media(max-width:640px){
  .d-long{display:none}.d-short{display:inline}
  .topbar{font-size:10px;padding:7px 20px}
  .wrapx,.topbar,.hdr,.ticker,.sec,.hero-grid,.rail-grid,.read,.read-wide,.crumb,.foot,.nl-band{padding-left:20px;padding-right:20px}
  .hdr{gap:12px}
  .menu-toggle{display:grid;place-items:center;width:44px;height:44px;order:-1}
  .hdr .btn-primary{min-height:40px}
  /* ticker: keeps auto-scrolling on mobile, same as desktop */
  .tape{animation:tickerScroll 38s linear infinite}
  .ticker-view{overflow:hidden;mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  /* 5a hero */
  .hero-grid h1{font-size:28px!important}
  .hero-grid .dek{font-size:16px}
  .hero-grid figure .lighten img{height:210px!important}
  /* Tequila Index as ranked list rows */
  .table[data-role="table"] thead{display:none}
  .table[data-role="table"] tbody tr{display:flex;flex-wrap:wrap;position:relative;padding:12px 64px 12px 30px;background:none;border-bottom:1px solid var(--color-neutral-800)}
  .table[data-role="table"] tbody tr:hover{background:none}
  .table[data-role="table"] td{padding:0;border:0}
  .table[data-role="table"] td:nth-child(1){position:absolute;left:0;top:14px;font-size:12px}
  .table[data-role="table"] td:nth-child(2){flex:0 0 100%;font-size:15px;margin-bottom:3px}
  .table[data-role="table"] td:nth-child(3),.table[data-role="table"] td:nth-child(4),.table[data-role="table"] td:nth-child(7){font-size:12px;margin-right:8px}
  .table[data-role="table"] td:nth-child(7) .tag{font-size:10px;padding:1px 6px}
  .table[data-role="table"] td:nth-child(5){position:absolute;right:0;top:12px;text-align:right}
  .table[data-role="table"] td:nth-child(5) span:first-child{font-size:19px}
  .table[data-role="table"] td:nth-child(5) span:last-child{display:none}
  .table[data-role="table"] td:nth-child(6){position:absolute;right:0;top:36px;text-align:right;font-size:11px}
  /* dossier 5d */
  .dossier-h1,.rail-grid h1{font-size:27px!important}
  .plate .n{font-size:38px}
  /* article 5e */
  .read h1,.rail-grid article h1{font-size:28px!important}
  .article-body{font-size:17px;line-height:1.75}
  .nl-inline form{flex-direction:column}.nl-inline .input{min-height:44px}.nl-inline .btn{width:100%}
  /* 5c database filters: full-width search, pill rows, tap-to-open facet */
  .dbf{margin:14px 0 0}
  .dbf+.dbf{margin:0}
  .dbf #dbSearch{max-width:none!important;width:100%;min-height:44px}
  .dbf .lbl{display:none}
  .fgroup{display:none}
  .fgroup.open{display:block;width:100%;margin:0 0 10px}
  .fgroup.open .seg{display:inline-flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .fgroup.open .seg::-webkit-scrollbar{display:none}
  .fgroup.open .seg-opt{white-space:nowrap}
  .fpills.m-only{display:flex;flex-wrap:wrap;white-space:normal;overflow:visible;margin:12px 0 14px}
  .fpills .fpill{font-size:13px;padding:7px 12px}
  .idxf-clear{display:none}
  /* 5c rows: meta line under name, purity tag on its own line.
     Re-enables the Category cell that the narrower breakpoint above hides,
     because on a card row it carries region and price too. Keyed to the shared
     Index markup now that #homeIndex and #dbTable no longer exist. */
  .table[data-role="table"] td:nth-child(3){display:none}
  .table[data-role="table"] td:nth-child(4){display:block;flex:0 0 100%;font-size:12px;color:var(--color-neutral-400)}
  .table[data-role="table"] td:nth-child(7){flex:0 0 100%;margin-top:4px}
  .seg-opt{min-height:40px}
  .pager button{min-width:44px;min-height:44px}
  /* footer 2-col */
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .foot-grid>div:first-child{grid-column:1/-1}
  /* sticky bar: blurred surface */
  .sticky-bar{display:flex;background:color-mix(in srgb,var(--color-surface) 86%,transparent);backdrop-filter:blur(10px)}
  body.no-sticky .sticky-bar{display:none}
  /* 5f: player overlay as bottom sheet */
  .ovl{place-items:end;padding:0}
  .ovl-card{width:100%;max-height:92vh;overflow-y:auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:10px 16px 22px}
  .ovl-card::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--color-neutral-700);margin:2px auto 10px}
  .ovl.open .ovl-card{animation:sheetUp .32s cubic-bezier(.2,.7,.3,1)}
  .ovl-head .x{width:44px;height:44px}
  .ovl-actions{flex-direction:column;align-items:stretch}
  .ovl-actions .btn{width:100%;min-height:44px}
  .ovl-hint{margin:6px auto 0}
}
@keyframes sheetUp{from{transform:translateY(28%);opacity:.6}to{transform:none;opacity:1}}
@media(min-width:641px){.msheet{display:none!important}}

/* ═══ MOBILE exact-match pass (frames 5a-5f) ═══ */
/* 5a Tequila Index ranked list (mobile-only markup) */
.irow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--color-neutral-800)}
.irow:last-of-type{border-bottom:0}
.irow .rk{font-size:12px;color:var(--color-neutral-500);width:14px;flex:none}
.irow .mid{flex:1;min-width:0}
.irow .nm{display:block;font-weight:500;font-size:15px;color:inherit;text-decoration:none}
.irow .sub{font-size:12px;color:var(--color-neutral-400)}
.irow .sub a{color:var(--color-accent-300);text-decoration:none}
.irow .sub .tag{font-size:10px;padding:1px 6px}
.irow .sc{text-align:right}
.irow .sc .n{font-weight:500;font-size:19px}
.irow .sc .dl{font-size:11px}
.m-note{display:none}
@media(max-width:640px){
  /* 5a section headers: h2 + right link, optional short subhead below */
  .sec-head{flex-wrap:wrap;row-gap:2px}
  .sec-head h2{font-size:22px}
  .sec-head .sec-note{display:none}
  .sec-head .sec-link{margin-left:auto;font-size:12px}
  .m-note{display:block;font-size:13px;color:var(--color-neutral-400);margin:-8px 0 4px}
  /* 5a innovation cards: kicker/title/meta only */
  .home-inno .card-body{display:none}
  span.m-only{display:inline}
}
.hb{display:none}
.m-only{display:none}
.gtb-short{display:none}
.hdr-back{display:none}
.chips-live{display:none}
.sortline{display:none}
.lnk{background:none;border:0;color:var(--color-accent-300);font:inherit;font-size:12px;cursor:pointer;padding:0}
@media(max-width:640px){
  /* header: drawn hamburger, 19px brand, short Brief, back arrow */
  .menu-toggle{display:flex;flex-direction:column;gap:5px;width:44px;height:44px;justify-content:center;align-items:flex-start;order:-1;padding-left:2px}
  .hb{display:block;height:1.5px;background:var(--color-neutral-200)}
  .hb1,.hb2{width:20px}.hb3{width:14px}
  .hdr-brand{font-size:19px}
  /* 5a: full "Get The Brief" text in the mobile header per spec */
  .hdr-back{display:grid;place-items:center;width:44px;height:44px;color:var(--color-neutral-200);text-decoration:none;font-size:17px;order:-2}
  .hdr-back~.menu-toggle{display:none} /* dossier header: back arrow replaces hamburger per 5d */
  /* ticker label */
  .tl-the{display:none}
  .ticker-label{font-size:10px;padding-left:8px}
  /* section scale */
  .sec-head h2,.sec h2{font-size:22px}
  .sec h1{font-size:26px!important}
  .sec-link{font-size:12px}
  /* latest meta interpuncts */
  .rail-item .m{display:block}
  .rail-item .m span+span::before{content:"· "}
  .rail-item .m span{display:inline}
  /* index ranked-list rows: rank | name / meta | score+delta */
  .table[data-role="table"] tbody tr{padding:12px 88px 12px 26px}
  .table[data-role="table"] td:nth-child(1){top:50%;transform:translateY(-50%);width:14px}
  .table[data-role="table"] td:nth-child(2){font-size:15px;margin-bottom:2px}
  .table[data-role="table"] td:nth-child(5){top:calc(50% - 18px)}
  .table[data-role="table"] td:nth-child(5) span:first-child{font-size:19px}
  .table[data-role="table"] td:nth-child(6){top:calc(50% + 6px)}
  /* Index rows on mobile: category · region · $price, purity on its own line.
     The homepage and the database now share one table, so one rule serves both
     (these used to be keyed to #homeIndex and #dbTable). */
  .table[data-role="table"] td:nth-child(3){display:none}
  .table[data-role="table"] td.mcat::after{content:" · " attr(data-r) " · " attr(data-p);color:var(--color-neutral-400)}
  .table[data-role="table"] td:nth-child(7){flex:0 0 100%;margin-top:4px}
  .table[data-role="table"] td:nth-child(7) .tag{font-size:10px;padding:1px 6px}
  /* browse-all block */
  #browseAll{width:100%;min-height:44px;margin-left:0!important}
  /* innovation second card hidden per 5a */
  .m-hide{display:none}
  /* feed play button 44px */
  .fplay .pb{width:44px;height:44px;font-size:14px}
  /* newsletter band */
  .nl-band{padding:28px 20px 30px}
  .nl-band h3{font-size:21px}
  .nl-band .input{min-height:44px}
  /* sticky bar: neutral border per 5a */
  .sticky-bar{border-top:1px solid var(--color-neutral-800)}
  body{padding-bottom:74px}
  /* dossier: photo after score (m-only), rail copy hidden dup */
  .m-only{display:block}
  .d-only{display:none}
  .plate{padding:12px 18px;align-items:flex-start}
  .plate .b{color:var(--color-neutral-300)}
  /* db: sort line + active chips */
  .sortline{display:block;font-size:12px;color:var(--color-neutral-500);margin:0 0 6px}
  .chips-live{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
  .chips-live .tag{cursor:pointer}
  .chips-live .clear{font-size:12px;color:var(--color-neutral-400);margin-left:auto;background:none;border:0;font-family:inherit;cursor:pointer}
  .dbf .btn,.dbf .seg-opt{min-height:40px}
}

/* merged news river items with thumbnails */
.nitem{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:16px 0;text-decoration:none;color:inherit;align-items:start;background:linear-gradient(90deg,var(--color-divider),transparent) no-repeat top/100% 1px}
.nitem .nthumb{border-radius:var(--radius-md);overflow:hidden}
.nitem .nthumb .lighten img{height:104px!important;border-radius:var(--radius-md)}
.nitem .t{font-weight:500;font-size:20px;line-height:1.3;color:var(--color-text)}
.nitem:hover .t{color:var(--color-accent-300)}
.nitem p{margin:6px 0 0;font-size:14px;color:var(--color-neutral-400);max-width:70ch;line-height:1.5}
@media(max-width:640px){
  .nitem{grid-template-columns:96px 1fr;gap:12px}
  .nitem .nthumb .lighten img{height:72px!important}
  .nitem .t{font-size:16px}
  .nitem p{display:none}
}

/* ── methodology: the three pillars ── */
.pillar{display:flex;gap:18px;align-items:flex-start;padding:22px 0;background:linear-gradient(90deg,var(--color-divider),transparent) no-repeat bottom/100% 1px}
.pillar:last-of-type{background:none}
.pillar .pn{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--color-accent);color:var(--color-accent);font-family:var(--font-heading);font-size:17px;display:inline-flex;align-items:center;justify-content:center}
.pillar h2{font-size:22px;margin:0 0 8px}
.pillar p{font-size:16px;line-height:1.7;color:var(--color-neutral-300);max-width:66ch;margin:0 0 10px}
.pillar p:last-child{margin-bottom:0}
@media(max-width:860px){.pillar{gap:12px}.pillar .pn{width:30px;height:30px;font-size:14px}.pillar p{font-size:15px}}

/* Movement column: entry date shown when a score has not moved */
.d-since{color:var(--color-neutral-500);font-variant-numeric:tabular-nums}

/* ── bottle photography ──
   Product shots are portrait (roughly 390x720) where every other image on the
   site is landscape scenery. object-fit:cover would guillotine the bottle, so
   these get contain plus a frame height passed in as --bshot-h. The frame is
   --color-surface, not the cream ground, because the photographs are cut out
   on white and any warmer backing shows as a visible box inside a box. The
   .lighten blend is deliberately not used either: it exists to sit fields and
   barrel rooms on the off-white ground, and it washes a bottle out. */
.bshot{display:flex;align-items:center;justify-content:center;padding:14px;border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.bshot img{width:auto;max-width:100%;height:var(--bshot-h,260px);object-fit:contain;display:block}

/* ── the tasting queue ── */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:22px 18px;margin-top:28px}
.qcard{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit}
.qcard .bshot{transition:box-shadow .2s ease,transform .2s ease}
.qcard:hover .bshot{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.qcard:hover .qname{color:var(--color-accent-300)}
.qmeta{display:flex;flex-direction:column;gap:2px}
.qbrand{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--color-accent-300)}
.qname{font-size:13px;line-height:1.35;color:var(--color-text)}
.qcat{font-size:11px;color:var(--color-neutral-500)}
@media(max-width:860px){.qgrid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:18px 14px}}

/* Houses we hold bottles from and have not scored. Listed, not grouped. */
.qhouses{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 18px}
.qhouse{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 0;text-decoration:none;color:var(--color-text);font-size:14px;border-bottom:1px solid var(--color-divider)}
.qhouse:hover{color:var(--color-accent-300)}
.qhouse .n{font-size:11px;color:var(--color-neutral-500);font-variant-numeric:tabular-nums}

/* Unrated rows in the Index. Deliberately quiet: findable, never competing
   with a score, and never carrying a rank number. */
.unrated{font-size:12px;color:var(--color-neutral-500);border:1px dashed var(--color-neutral-700);border-radius:var(--radius-sm);padding:2px 7px;white-space:nowrap}
.rk-off{color:var(--color-neutral-700)}

/* ── every table that is NOT the Index, on mobile ──
   The rules above position cells by column number for the Index's seven column
   shape. They used to be unscoped, so the brand pages (five columns) and the
   methodology band table (three) inherited them: the bottle name was squeezed
   into a 14px absolute box and the score and purity vanished entirely. Those
   rules are now scoped to [data-role="table"] and everything else stacks into
   a labelled card instead, which works whatever the column count. */
@media(max-width:860px){
  .table:not([data-role="table"]) thead{display:none}
  .table:not([data-role="table"]) tbody tr{display:block;padding:14px 0;background:none;border-bottom:1px solid var(--color-neutral-800)}
  .table:not([data-role="table"]) tbody tr:hover{background:none}
  .table:not([data-role="table"]) td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:3px 0;border:0}
  .table:not([data-role="table"]) td[data-l]::before{content:attr(data-l);flex:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-500)}
  .table:not([data-role="table"]) td:first-child{display:block;font-size:17px;margin-bottom:6px}
  .table[data-role="bands"] tbody tr{padding:12px 0}
  .table[data-role="bands"] td:first-child{font-size:15px;font-weight:500;margin-bottom:2px}
}