/* Self-hosted fonts (SIL OFL), offline-safe */
@font-face{ font-family:'Rye'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/rye-400.woff2') format('woff2'); }
@font-face{ font-family:'Courier Prime'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/courier-prime-400.woff2') format('woff2'); }
@font-face{ font-family:'Courier Prime'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/courier-prime-700.woff2') format('woff2'); }
@font-face{ font-family:'Libre Franklin'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/libre-franklin-var.woff2') format('woff2'); }

:root{
  --felt:#14312a; --felt-2:#0d211c; --felt-3:#1d443a;
  /* Text-field boundary. --felt-3 on the field fill is 1.55:1 and the fill on
     the page felt is 1.2:1, so a resting field had no visible edge at all;
     WCAG 1.4.11 asks 3:1. This is the lightest felt: 4.0:1 on --felt-2 and
     3.4:1 on --felt. Inputs only; the decorative --felt-3 lines stay put. */
  --felt-line:#5a8574;
  --brass:#c9a44c; --brass-2:#e6cc8a;
  --cream:#f1e7d3; --cream-dim:#b9ac91;
  --oxblood:#a1453d; --oxblood-2:#7c332d;
  /* Oxblood AS TEXT on the felts measures 2.3-2.7:1, under even the 3:1
     large-text floor, on exactly the numbers a low-vision reader must not
     misread: the over-pour, the wrong order, the replace-it. This token is
     the same voice at 4.9-5.9:1 on both felts. Backgrounds keep --oxblood;
     text on felt takes --oxblood-text. */
  --oxblood-text:#d4837b;
  --paper:#f6efdf; --ink:#26231c; --ink-dim:#6b6353;

  /* shared/oot-home.css is colourless by design; this is the Ledger's map. */
  --oot-accent:var(--brass);
  --oot-line:var(--felt-3);
  --oot-ink:var(--cream);
  --oot-dim:var(--cream-dim);
  --oot-raise:var(--felt-2);
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--felt); min-height:100vh; color:var(--cream);
  font-family:'Libre Franklin', system-ui, sans-serif; overscroll-behavior-y:none; }
/* felt grain: one inline feTurbulence tile, fixed so it doesn't swim on scroll */
body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:0.5;
  background-color:var(--felt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wrap{ max-width:820px; margin:0 auto; padding:32px 16px 48px;
  padding-top:calc(32px + env(safe-area-inset-top)); }
.font-display{ font-family:'Rye','Georgia',serif; }
.font-tix{ font-family:'Courier Prime','Courier New',monospace; }
.eyebrow{ letter-spacing:0.22em; text-transform:uppercase; font-size:0.66rem; color:var(--brass); font-weight:600; }
/* eyebrows promoted to h2/h3 keep the exact same face: the heading is
   for the accessibility tree, not the eye */
h2.eyebrow,h3.eyebrow{ margin:0; }
.dim{ color:var(--cream-dim); }
.brass2{ color:var(--brass-2); }
.small{ font-size:0.8rem; }
.tiny{ font-size:0.72rem; }
.bold{ font-weight:700; }
.italic{ font-style:italic; }
.tc{ text-align:center; }
.lh{ line-height:1.55; }

.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.between{ justify-content:space-between; }
.center{ justify-content:center; }
.col{ display:flex; flex-direction:column; gap:16px; }
.col-sm{ display:flex; flex-direction:column; gap:8px; }
.push{ margin-left:auto; }
.mt1{ margin-top:6px; } .mt2{ margin-top:12px; } .mt3{ margin-top:20px; }
.mb1{ margin-bottom:6px; } .mb2{ margin-bottom:12px; } .mb3{ margin-bottom:20px; }

header.masthead{ text-align:center; margin-bottom:24px; }
header.masthead h1{ font-family:'Rye','Georgia',serif; font-weight:400;
  font-size:clamp(1.7rem, 5vw, 2.6rem); color:var(--brass-2); line-height:1.15; margin-top:8px;
  text-shadow:0 1px 0 rgba(0,0,0,0.4); }
.mast-orn{ color:var(--brass); margin-top:2px; line-height:0; }
.orn{ color:var(--brass); line-height:0; display:inline-block; }
.glass-ic{ color:var(--brass); flex-shrink:0; }
#view{ animation:view-in .22s ease-out; }
@keyframes view-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.rules{ margin-top:16px; border-top:3px double var(--brass); }
.rules::after{ content:''; display:block; margin-top:3px; border-top:1px solid var(--brass); }

nav.tabs{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.clusters{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
.cl-btn{ font-family:'Rye','Georgia',serif; font-size:0.92rem; letter-spacing:0.06em;
  color:var(--cream-dim); background:transparent; border:none; border-bottom:2px solid transparent;
  padding:8px 14px 6px; cursor:pointer; transition:all .15s; }
.cl-btn:hover{ color:var(--brass-2); }
.cl-btn.active{ color:var(--brass-2); border-bottom-color:var(--brass); }
.subtabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; justify-content:center; flex-wrap:wrap; }
/* sub-navs rendered inside a view (Practice, Tools, Shots, Zero Proof) reuse
   nav.tabs: they must stay a horizontal row, not inherit the masthead column */
#view nav.tabs{ flex-direction:row; flex-wrap:wrap; gap:8px; }
.tab-btn{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
  color:var(--cream-dim); background:transparent; border:1px solid var(--felt-3);
  border-radius:4px; padding:8px 12px; cursor:pointer; white-space:nowrap; transition:all .15s; font-family:inherit; }
.tab-btn:hover{ color:var(--brass-2); border-color:var(--brass); }
.tab-btn.active{ background:var(--brass); color:var(--ink); border-color:var(--brass); }

/* bottom nav (mobile) */
#bnav{ display:none; }
#sheet{ display:none; }
@media (max-width: 639px){
  nav.tabs .clusters{ display:none; }
  /* 48px, not 32px: the suite's return chip rests at the top-left of every
     wing, a 44px disc at x 10 to 54, y 10 to 54 on a phone, and at 32px the
     h1's line box began at y 40 with the T of The under the disc. 48px puts
     the line box at y 56. The standalone Ledger has no chip and keeps 32px. */
  .wrap{ padding-bottom:96px; padding-top:calc(48px + env(safe-area-inset-top)); }
  #bnav{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
    background:var(--felt-2); border-top:2px solid var(--brass);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    /* The bar's buttons are built by script; reserving the full height keeps
       the empty bar from growing when they land (that growth was the wing's
       whole Lighthouse layout-shift score). 60px = 48px buttons + padding. */
    min-height:calc(60px + env(safe-area-inset-bottom)); }
  .bnav-btn{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:transparent; border:none; color:var(--cream-dim); cursor:pointer;
    /* 0.58rem was 9px uppercase for the only navigation a phone has; the word
       is the whole button now, so it is set at a size a thumb can read */
    font-family:inherit; font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
    padding:6px 2px; min-height:48px; }
  .bnav-btn.active{ color:var(--brass-2); }
  #sheet.open{ display:block; position:fixed; inset:0; z-index:55; }
  .sheet-back{ position:absolute; inset:0; background:rgba(0,0,0,0.55); }
  .sheet-panel{ position:absolute; left:0; right:0; bottom:0; background:var(--felt-2);
    border-top:2px solid var(--brass); border-radius:10px 10px 0 0;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:8px; }
  .sheet-btn{ width:100%; text-align:center; background:var(--felt); border:1px solid var(--felt-3);
    color:var(--cream); border-radius:4px; padding:13px; font-size:0.9rem; font-weight:600;
    letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:inherit; }
  .sheet-btn.active{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
}

/* print-cards sheet (on screen) */
#print-sheet{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px,100%),1fr)); gap:14px; align-items:start; }
#print-sheet .ticket{ max-width:none; animation:none; }
#print-sheet .print-bar{ grid-column:1/-1; }

/* search overlay */
#search-ol{ display:none; }
#search-ol.open{ display:block; position:fixed; inset:0; z-index:70; }
.search-back{ position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.search-panel{ position:absolute; left:50%; top:10vh; transform:translateX(-50%);
  width:min(560px, calc(100vw - 24px)); background:var(--felt-2); border:1px solid var(--brass);
  border-radius:6px; padding:14px; box-shadow:0 10px 40px rgba(0,0,0,0.5);
  display:flex; flex-direction:column; gap:10px; }
.search-results{ max-height:min(55vh, 420px); overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.search-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; color:var(--cream); border-radius:4px;
  padding:9px 10px; font-size:0.88rem; cursor:pointer; font-family:inherit; }
.search-row:hover, .search-row.sel{ background:var(--felt-3); border-color:var(--brass); }

.panel{ background:var(--felt-2); border:1px solid var(--felt-3); border-radius:6px; }
.p3{ padding:14px; } .p4{ padding:18px; } .p5{ padding:22px; }
.panel.click{ cursor:pointer; transition:border-color .15s; text-align:left; color:var(--cream); font-family:inherit; width:100%; }
.panel.click:hover{ border-color:var(--brass); }

.ticket{ background:var(--paper); color:var(--ink); border-radius:2px; position:relative;
  box-shadow:0 3px 10px rgba(0,0,0,0.35); max-width:400px; width:100%;
  background-image:repeating-linear-gradient(0deg, rgba(38,35,28,0.025) 0 1px, transparent 1px 3px);
  animation:ticket-print .35s ease-out; }
@keyframes ticket-print{ from{ transform:translateY(-8px); clip-path:inset(0 0 92% 0); opacity:0.4; }
  to{ transform:translateY(0); clip-path:inset(0 0 0 0); opacity:1; } }
.tix-glass{ position:absolute; top:10px; right:10px; color:var(--ink-dim); opacity:0.85; }
.ticket::before, .ticket::after{ content:''; position:absolute; left:0; right:0; height:7px;
  background-image:radial-gradient(circle at 7px 0px, var(--felt-2) 4px, transparent 4.5px);
  background-size:14px 7px; background-repeat:repeat-x; }
.ticket::before{ top:0; }
.ticket::after{ bottom:0; transform:scaleY(-1); }
.ticket-inner{ padding:18px 16px 16px; font-family:'Courier Prime','Courier New',monospace; font-size:0.86rem; }
.tix-rule{ border-top:1px dashed var(--ink-dim); margin:8px 0; }
.tix-label{ font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim); }
.tix-name{ font-weight:700; font-size:1rem; letter-spacing:0.04em; margin-top:4px; }
.tix-note{ font-style:italic; color:var(--ink-dim); }
.spec-line{ display:flex; gap:8px; }

.btn{ border-radius:4px; padding:9px 16px; font-weight:600; font-size:0.82rem; cursor:pointer;
  border:1px solid transparent; transition:all .15s; font-family:inherit; }
.btn-brass{ background:var(--brass); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.25); }
.btn-brass:hover{ background:var(--brass-2); }
.btn-ghost{ background:transparent; color:var(--cream); border-color:var(--felt-3); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-2); }
.btn-ox{ background:var(--oxblood); color:var(--cream); }
.btn-ox:hover{ background:var(--oxblood-2); }
.self-end{ align-self:flex-end; }
a.btn{ text-decoration:none; display:inline-block; }
a.chip{ text-decoration:none; }

.chip{ font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  padding:3px 8px; border-radius:3px; border:1px solid var(--felt-3); color:var(--cream-dim);
  display:inline-block; }
.chip.brass{ border-color:var(--brass); color:var(--brass); }
button.chip{ cursor:pointer; background:transparent; transition:all .15s; font-family:inherit; }
button.chip:hover{ border-color:var(--brass); color:var(--brass-2); }
button.chip.on{ background:var(--brass); color:var(--ink); border-color:var(--brass); }

.input{ background:var(--felt-2); border:1px solid var(--felt-line); color:var(--cream);
  border-radius:4px; padding:10px 12px; font-size:0.9rem; width:100%; font-family:inherit; }
.input::placeholder{ color:var(--cream-dim); opacity:0.7; }
/* No outline:none here: .input:focus outranks the universal :focus-visible
   ring below, so it was switching the ring off for every text field. The
   brass border is the bonus, the ring is the indicator. */
.input:focus{ border-color:var(--brass); }

.drink-head{ width:100%; text-align:left; background:transparent; border:none; color:var(--cream);
  cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:inherit; font-size:0.92rem; }
.drink-body{ padding:0 16px 16px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.plusminus{ margin-left:auto; color:var(--brass); font-size:1rem; }

.opt-btn{ display:block; width:100%; text-align:left; background:var(--felt-2);
  border:1px solid var(--felt-3); color:var(--cream); border-radius:4px;
  padding:11px 14px; font-size:0.9rem; cursor:pointer; transition:all .12s; font-family:inherit; }
.opt-btn:hover:not(:disabled){ border-color:var(--brass); }
.opt-btn.correct{ background:#1e4d33; border-color:#4f9e6c; color:#d8f3e0; animation:pulse-ok .3s ease-out; }
.opt-btn.wrong{ background:#4a2320; border-color:var(--oxblood); color:#f3d9d5; animation:pulse-no .3s ease-out; }
@keyframes pulse-ok{ 40%{ transform:scale(1.015); } }
@keyframes pulse-no{ 25%{ transform:translateX(-3px); } 65%{ transform:translateX(3px); } }
.opt-btn:disabled{ cursor:default; opacity:0.92; }
.opt-btn.picked{ border-color:var(--brass); background:var(--felt-3); }
.opt-btn.missedline{ border:1px dashed var(--brass); color:var(--brass-2); }
.explain{ font-size:0.85rem; padding:12px; border-radius:4px; background:var(--felt-3); color:var(--cream-dim); line-height:1.5; }

.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stat-num{ font-family:'Courier Prime',monospace; font-size:1.7rem; font-weight:700; color:var(--brass-2); line-height:1; }
.card-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }

.accordion-btn{ width:100%; text-align:left; background:transparent; border:none; color:var(--cream);
  cursor:pointer; padding:14px 4px; display:flex; justify-content:space-between; align-items:center;
  font-weight:600; font-size:0.95rem; font-family:inherit; gap:10px; }
.accordion-btn:hover{ color:var(--brass-2); }
.accordion-btn.open{ border-bottom:1px solid var(--felt-3); }
.accordion-body{ padding:16px 4px; display:flex; flex-direction:column; gap:12px; }

.hist-row{ display:flex; justify-content:space-between; font-size:0.85rem; padding:5px 0;
  border-bottom:1px solid var(--felt-3); color:var(--cream-dim); }
.hist-row:last-child{ border-bottom:none; }

footer.foot{ text-align:center; margin-top:40px; font-size:0.72rem; color:var(--cream-dim); }
footer.foot a{ color:var(--cream-dim); text-decoration:underline; text-underline-offset:2px; }
footer.foot a:hover{ color:var(--brass-2); }

.sw-toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:stretch; max-width:calc(100vw - 24px);
  background:var(--brass); color:var(--ink); border:1px solid var(--brass-2); border-radius:4px;
  font-family:inherit; font-size:0.85rem; overflow:hidden;
  /* above the bottom bar (50), under the sheet (55): the toast must never
     sit on a sheet row */
  z-index:52;
  box-shadow:0 4px 14px rgba(0,0,0,0.45); }
/* two controls in one plate: refresh, and put it away; each a 44px target */
.sw-toast button{ background:transparent; border:none; color:inherit; font:inherit; cursor:pointer;
  min-height:44px; padding:10px 16px; text-align:left; }
.sw-toast .sw-toast-no{ border-left:1px solid var(--brass-2); font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; font-weight:600; white-space:nowrap; }
.sw-toast .font-display{ letter-spacing:0.03em; }
.sw-toast button:hover{ background:var(--brass-2); }
/* the toast is appended to body after #sheet; while a cluster sheet is open
   it is gone, not merely underneath */
#sheet.open ~ .sw-toast{ display:none; }

/* "The Story" lore panel */
details.story{ max-width:400px; width:100%; border-left:2px solid var(--brass); padding-left:12px; }
details.story summary{ cursor:pointer; list-style:none; font-size:0.72rem; letter-spacing:0.18em;
  text-transform:uppercase; font-weight:600; color:var(--brass); padding:2px 0; }
details.story summary::-webkit-details-marker{ display:none; }
details.story summary:hover{ color:var(--brass-2); }
details.story .story-orn{ font-size:0.85rem; letter-spacing:0; }
details.story[open] summary{ margin-bottom:6px; }
.story-body{ font-size:0.85rem; line-height:1.6; color:var(--cream-dim); font-style:italic; }

/* glossary */
.gloss-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px,100%),1fr)); gap:14px 22px; }

/* practice stopwatch */
.btn.running{ background:var(--oxblood); color:var(--cream); border-color:var(--oxblood);
  font-family:'Courier Prime',monospace; min-width:118px; }

/* technique plates */
.plate-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(250px,100%),1fr)); gap:18px; }
.plate{ margin:0; border:1px solid var(--felt-3); border-radius:4px; padding:14px;
  display:flex; flex-direction:column; gap:8px; background:var(--felt-2); }
.plate svg{ width:100%; height:auto; max-height:170px; color:var(--brass); }
.plate:hover{ border-color:var(--brass); }
.plate:hover svg{ color:var(--brass-2); }

/* bar manager's note (riff critique) */
.mgr-note{ position:relative; max-width:440px; width:100%; background:var(--paper); color:var(--ink);
  border-radius:2px; padding:16px 18px; box-shadow:0 3px 10px rgba(0,0,0,0.35);
  display:flex; flex-direction:column; gap:8px;
  background-image:linear-gradient(rgba(161,69,61,0.05) 1px, transparent 1px); background-size:100% 1.55em; }
.mgr-note .small{ color:var(--ink); }
.mgr-note .lh{ color:#44403a; }
.mgr-seal{ position:absolute; top:10px; right:12px; width:34px; height:34px; border-radius:50%;
  background:var(--oxblood); color:var(--paper); display:flex; align-items:center; justify-content:center;
  font-size:1rem; box-shadow:inset 0 0 0 2px var(--oxblood-2), 0 1px 3px rgba(0,0,0,0.3);
  transform:rotate(-8deg); }


/* visually hidden but still reachable by screen readers and focus */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* skip link: the first tab stop on the page, off-canvas until it takes focus.
   Centred, not top-left: the suite's return chip sits at 10px,10px in every
   wing and a left:8px link would cover it while focused. */
.skip{ position:absolute; left:50%; transform:translateX(-50%); top:-60px; z-index:80; background:var(--brass); color:var(--ink);
  border:1px solid var(--brass-2); border-radius:4px; padding:10px 16px; font-size:0.85rem; font-weight:600;
  text-decoration:none; transition:top .15s; }
.skip:focus{ top:8px; }

*:focus-visible{ outline:2px solid var(--brass-2); outline-offset:2px; }

@media (max-width: 639px){
  .sw-toast{ bottom:calc(78px + env(safe-area-inset-bottom)); }
  .btn{ min-height:44px; }
  .input{ min-height:44px; }
  /* the filter chips were the one control left at ~29px; 0.72rem is the
     .tab-btn size, still small caps, readable on a phone behind a bar */
  button.chip, a.chip{ min-height:44px; padding:10px 12px; font-size:0.72rem; }
  a.chip{ display:inline-flex; align-items:center; }
  .drink-head{ padding:15px 14px; min-height:48px; }
  .accordion-btn{ min-height:48px; }
  .opt-btn{ padding:13px 14px; min-height:46px; }
}


.opt-mark{ font-weight:700; }

/* Windows High Contrast strips every background, and this design system signals
   state with nothing but colour swaps, so without this block the correct
   answer, the owned shelf bottles and the active tab all vanish. */
@media (forced-colors: active){
  .opt-btn.correct, .opt-btn.wrong,
  button.chip.on, .tab-btn.active, .cl-btn.active,
  .sheet-btn.active, .bnav-btn.active{
    outline:2px solid CanvasText; outline-offset:-2px;
  }
  .btn-brass, .btn-ox{ border:1px solid CanvasText; }
  .input:focus-visible{ outline:2px solid Highlight; outline-offset:2px; }
  .ticket{ border:1px solid CanvasText; }
}

@media (max-width: 639px){
  /* the primary in-view navigation was a ~32px target while every other
     control already had a 44px minimum */
  .tab-btn{ min-height:44px; padding:11px 12px; }
}
/* desktop floor only: the phone block above sets 44px, and an un-mediated
   rule here would win on source order and pull it back down */
@media (min-width: 640px){ button.chip, a.chip{ min-height:26px; } }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---- the pinned film, Coffee & Tea only ----
   A thumbnail until it is tapped, so nothing reaches YouTube for a lesson the
   reader never opened. An img rather than a background-image because an img
   gives a real error event to hang the offline state on, and this codebase has
   no inline on* handlers anywhere. */
.vid-card{ margin:10px 0 14px; border:1px solid var(--line,rgba(201,162,39,.18)); border-radius:4px; overflow:hidden }
.vid-frame{ position:relative; width:100%; aspect-ratio:16/9; background:rgba(0,0,0,.28) }
.vid-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.vid-thumb{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
  background:none; cursor:pointer; display:grid; place-items:center }
.vid-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.vid-play{ position:relative; width:54px; height:38px; border-radius:8px; display:grid;
  place-items:center; background:rgba(20,32,28,.78); color:var(--brass-2,#e8c56a); font-size:15px }
.vid-thumb:hover .vid-play,.vid-thumb:focus-visible .vid-play{ background:var(--brass,#c9a227); color:#14201c }
.vid-off{ position:absolute; inset:0; padding:14px; display:grid; align-content:center }
.vid-meta{ padding:12px 14px }