/* Foundation */
:root { color-scheme:dark; --bg:#08151e; --panel:#132225; --line:#304448; --muted:#afbfbd; --text:#f5f3ea; --gold:#e7c886; --overlay-glass-filter:blur(18px) brightness(.65) saturate(120%); --collection-card-scale:.855; --collection-type-scale:.9; }
html { scrollbar-gutter:stable; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; isolation:isolate; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.5; cursor:default; caret-color:transparent; }
/* The collection is an app interface; the search field remains selectable. */
header,main { -webkit-user-select:none; user-select:none; }
/* Oversized layers drift without exposing their edges or repainting gradients. */
body::before,body::after { content:""; position:fixed; inset:-8vmax; z-index:-2; pointer-events:none; will-change:transform,opacity; }
body::before { background:radial-gradient(ellipse at 0% 8%,#1244498a 0,transparent 58%),radial-gradient(ellipse at 100% 68%,#1b315b66 0,transparent 65%),linear-gradient(135deg,#091e23 0%,#0a1b27 48%,#080f21 100%); animation:gradient-drift 28s ease-in-out infinite alternate; }
body::after { background:radial-gradient(ellipse at 5% 12%,#1b335c70 0,transparent 60%),radial-gradient(ellipse at 95% 75%,#16415c55 0,transparent 66%),linear-gradient(145deg,#0a1730 0%,#10192f 52%,#071827 100%); opacity:var(--scroll-tone,0); animation:gradient-drift 36s ease-in-out -18s infinite alternate-reverse,gradient-tone 32s ease-in-out -8s infinite alternate; }
body.background-paused::before,body.background-paused::after { animation-play-state:paused; }
@keyframes gradient-drift {
  0% { transform:translate3d(-2.5%,-1%,0) scale(1.03) rotate(-1.3deg); }
  50% { transform:translate3d(2%,2%,0) scale(1.08) rotate(.8deg); }
  100% { transform:translate3d(1%,-2%,0) scale(1.04) rotate(1.4deg); }
}
@keyframes gradient-tone {
  0% { opacity:calc(.12 + var(--scroll-tone,0)*.58); }
  50% { opacity:calc(.42 + var(--scroll-tone,0)*.5); }
  100% { opacity:calc(.22 + var(--scroll-tone,0)*.64); }
}
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a,select { touch-action:manipulation; }
button,a,select { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.empty[hidden],button[hidden],.filter-badge[hidden],.active-filter-summary[hidden] { display:none; }

/* Header and collection */
header { max-width:1440px; margin:auto; padding:16px 56px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:20px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; min-height:44px; font-size:14px; letter-spacing:.13em; font-weight:600; }
.brand-title { line-height:1.2; }
.monogram { flex:0 0 36px; width:36px; height:40px; display:grid; place-items:center; border:1px solid #7c775e; color:var(--gold); font:30px Georgia,serif; border-radius:16px 16px 3px 3px; }
.source { font-size:14px; color:var(--muted); }
main { max-width:1440px; margin:auto; padding:22px 56px 0; }
.eyebrow { font-size:.875rem; font-weight:600; letter-spacing:.2em; color:var(--gold); margin:0 0 8px; }

/* Search and filters. On desktop the panel retains the existing inline layout. */
.tools { display:flex; flex-wrap:wrap; column-gap:18px; row-gap:0; }
.search { flex:1; flex-basis:42%; display:flex; align-items:center; gap:14px; border:1px solid #486063; border-radius:7px; padding:0 18px; background:transparent; min-width:0; cursor:text; }
.search-field { position:relative; flex:1; min-width:0; }
.search-field input { display:block; }
#search-hint { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); color:#b4c5c5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
#search-hint[hidden] { display:none; }
.search.is-suggesting #search::placeholder { color:transparent; }
.search:focus-within #search-hint { display:none; }
.search.is-suggesting:focus-within #search::placeholder,
#search:focus::placeholder { color:#b4c5c566; opacity:1; }
#search { cursor:text; caret-color:var(--text); -webkit-user-select:text; user-select:text; }
#search:focus,#search:focus-visible { outline:none; box-shadow:none; }
.search:focus-within { border-color:#91b5b8; }
.search svg { width:23px; flex-shrink:0; color:var(--gold); }
input { border:0; background:transparent; color:var(--text); width:100%; padding:14px 0; min-width:0; outline:none; }
input::placeholder { color:#b4c5c5; }
input::-webkit-search-cancel-button { display:none; }
#clear { border:0; background:none; color:var(--muted); font-size:26px; padding:0 6px; }
.filter-panel { display:contents; }
.hotel-control { min-width:180px; flex:0 1 210px; border:1px solid var(--line); border-radius:7px; padding:6px 14px; background:transparent; }
.hotel-control label { display:block; font-size:.875rem; line-height:1.2; color:var(--muted); letter-spacing:.1em; }
.hotel-control select { width:100%; border:0; background:transparent; color:var(--text); color-scheme:dark; line-height:1.35; padding:1px 20px 1px 0; }
/* Native popup options need their own surface when the closed field is clear. */
.hotel-control select option { background:var(--panel); color:var(--text); }
.hotel-control select:focus { outline:none; box-shadow:none; }
.hotel-control select:focus-visible { box-shadow:inset 0 -1px 0 #91b5b8; }
/* Progressive enhancement keeps the native control and its keyboard behavior. */
@supports (appearance:base-select) and selector(select::picker(select)) {
  .hotel-control select,
  .hotel-control select::picker(select) { appearance:base-select; }
  .hotel-control select { display:flex; align-items:center; gap:8px; padding-inline-end:0; }
  .hotel-control select:hover,.hotel-control select:focus { background:transparent; }
  .hotel-control select::picker-icon { color:var(--muted); font-size:12px; }
  .hotel-control select:open::picker-icon { rotate:180deg; }
  .hotel-control select::picker(select) {
    background:#08151ee6; color:var(--text); font:inherit;
    border:1px solid #cde8ec45; border-radius:12px; padding:5px;
    margin-block:8px; max-block-size:min(340px,60dvh);
    box-shadow:0 16px 40px #020b1073; scrollbar-width:thin;
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .hotel-control select::picker(select) {
      background:transparent;
      -webkit-backdrop-filter:var(--overlay-glass-filter);
      backdrop-filter:var(--overlay-glass-filter);
    }
  }
  .hotel-control select option {
    display:flex; align-items:center; gap:12px; min-height:44px;
    padding:9px 12px; border:0; border-radius:7px;
    background:transparent; color:var(--text); font:inherit; cursor:pointer;
  }
  .hotel-control select option:hover,.hotel-control select option:focus { background:#d9f4ff1a; outline:none; }
  .hotel-control select option:checked { background:#e7c8861f; color:var(--gold); }
  .hotel-control select option::checkmark { order:1; margin-inline-start:auto; color:var(--gold); }
  @media(prefers-reduced-transparency:reduce), (forced-colors:active) {
    .hotel-control select::picker(select) { background:var(--panel); -webkit-backdrop-filter:none; backdrop-filter:none; }
  }
}
.filter-row { flex:0 0 100%; display:flex; justify-content:space-between; align-items:center; gap:16px; margin:14px 0 18px; }
.filters { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:7px; }
.filter { flex:0 0 auto; white-space:nowrap; border:1px solid var(--line); border-radius:50px; color:#b8beb6; background:transparent; padding:6px 14px; font-size:14px; }
.filter[aria-pressed=true] { background:var(--gold); border-color:var(--gold); color:#1b211c; }
.filter:hover { border-color:var(--gold); }
.count { flex-shrink:0; font-size:14px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.filter-toggle,.compact-count,.filter-panel-label,.filter-panel-actions { display:none; }
.filter-toggle { align-items:center; gap:8px; min-height:44px; padding:10px 12px; border:1px solid #486063; border-radius:7px; background:transparent; color:var(--text); font-size:.875rem; }
.filter-toggle > svg { width:18px; height:18px; flex-shrink:0; color:var(--gold); }
.filter-toggle > .filter-chevron { width:14px; height:14px; transition:transform .2s; }
.filter-toggle[aria-expanded=true] .filter-chevron { transform:rotate(180deg); }
.filter-badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:50%; background:var(--gold); color:#192018; font-size:12px; }
.show-results { width:100%; min-height:44px; padding:10px 18px; border:1px solid var(--gold); border-radius:7px; background:var(--gold); color:#192018; font-size:.875rem; }
.active-filter-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-4px 0 16px; }
.active-filter-summary p { color:var(--muted); font-size:.875rem; margin:0; overflow-wrap:anywhere; }
.reset-filters { border:1px solid #5a7375; color:var(--text); background:transparent; border-radius:6px; min-height:44px; padding:8px 14px; font-size:.875rem; white-space:nowrap; }
.reset-filters:hover { border-color:var(--gold); }

/* Cards: the shared glass surface with the Rankings viewer's fine outline. */
/* Geometry is 5% smaller than before; type keeps its previous scale.
   Real layout dimensions keep filtering, shared transitions and hit areas aligned. */
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:calc(100% * var(--collection-card-scale)); margin-inline:auto; gap:calc(22px * var(--collection-card-scale)); }
.grid.is-reordering .card { pointer-events:none; }
.card {
  --card-radius:calc(22px * var(--collection-card-scale));
  --card-art-height:184px;
  --card-intro-duration:1s;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  appearance:none; -webkit-appearance:none;
  position:relative; background:transparent;
  border:0; border-radius:var(--card-radius); overflow:visible;
  text-align:left; color:var(--text); padding:0;
  transition:transform .2s;
}
.card-face {
  position:relative; display:flex; flex-direction:column; flex:1; min-width:0;
  border-radius:inherit; background:#08151ee6; pointer-events:none;
  box-shadow:0 12px 28px -16px #020912a6;
}
/* Draw on the moving face so the outline follows the 3D tilt without
   changing the card's layout, title wrapping or black outer shadow. */
.card-face::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border:1px solid #cde8ec38; border-radius:inherit;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .card-face {
    background:transparent;
    -webkit-backdrop-filter:var(--overlay-glass-filter);
    backdrop-filter:var(--overlay-glass-filter);
  }
}
.card-face > .art {
  flex-shrink:0; width:100%; z-index:1;
  border-radius:var(--card-radius) var(--card-radius) 0 0; overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 78%);
}
.card-face > .art::after { content:""; position:absolute; inset:auto calc(22px * var(--collection-card-scale)) 0; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,#d2eefc24,transparent); }
.card-face > .art svg { filter:drop-shadow(0 2px 2px #0005) drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 16%,transparent)); }
.card-face > .card-content { position:relative; z-index:1; border-radius:0 0 var(--card-radius) var(--card-radius); background:transparent; }
.card .number { color:#c0ccca; }
.card .ingredients-summary,.card .card-bottom { color:#c0cecd; }
.card .ingredients-summary { margin-bottom:calc(20px * var(--collection-card-scale)); }
.card .card-bottom { margin-top:auto; border-top-color:#d4e7e71c; }
.card .view { color:#f1f4ed; }
.card-effects { display:none; pointer-events:none; }
@media (hover:hover) and (pointer:fine) {
  .card:hover { z-index:1; transform:translateY(-3px); }
  .card:hover > .card-face { box-shadow:0 16px 32px -16px #000000bd,0 0 24px 2px #00000045; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .card-face { transition:transform 230ms cubic-bezier(.2,.75,.25,1); }
  .card.is-pointer-lit > .card-face { transition-duration:100ms; }
  .card-face > .card-effects { display:block; position:absolute; inset:0; z-index:2; border-radius:inherit; opacity:0; transition:opacity 180ms ease; }
  .card.is-pointer-lit > .card-face > .card-effects { opacity:1; }
  .card-halo { position:absolute; inset:0; border-radius:inherit; opacity:.25; box-shadow:0 0 20px 2px #0000004d; }
  .card.is-pointer-lit .card-halo { animation:card-halo-breathe 3.8s ease-in-out var(--card-intro-duration) infinite both; }
  .card-sheen { position:absolute; inset:0; border-radius:inherit; overflow:hidden; }
  /* Two fixed studio lights: a feathered key reflection and a quiet cool fill.
     Their finite falloff gives the glass volume while preserving the copy. */
  .card-sheen::before,.card-sheen::after {
    content:""; position:absolute; inset:-50%;
    transition:transform 100ms cubic-bezier(.2,.75,.25,1),opacity 140ms ease;
  }
  .card-sheen::before {
    background:linear-gradient(90deg,#dbeaff00 22%,#dbeaff05 31%,#e5efff16 39%,#f6f3e734 46%,#fff8eb47 50%,#f4f7ff2a 55%,#dae9ff12 63%,#d9eaff04 70%,#d9eaff00 79%);
    -webkit-mask-image:linear-gradient(180deg,transparent 5%,#0006 20%,#000e 35%,#000 46%,#000d 57%,#0006 72%,transparent 90%);
    mask-image:linear-gradient(180deg,transparent 5%,#0006 20%,#000e 35%,#000 46%,#000d 57%,#0006 72%,transparent 90%);
    opacity:var(--sheen-strength,.74);
    transform:translate3d(var(--sheen-x,0%),var(--sheen-y,0%),0) rotate(var(--sheen-angle,-27deg));
  }
  .card-sheen::after {
    background:linear-gradient(90deg,transparent 14%,#94c7df03 31%,#d5ecff12 47%,#dfede70a 58%,transparent 79%);
    -webkit-mask-image:linear-gradient(180deg,transparent 14%,#000 42%,#000b 64%,transparent 87%);
    mask-image:linear-gradient(180deg,transparent 14%,#000 42%,#000b 64%,transparent 87%);
    opacity:calc(var(--sheen-strength,.74)*.62);
    transform:translate3d(calc(var(--sheen-x,0%)*-.32 - 9%),calc(var(--sheen-y,0%)*.45 - 12%),0) rotate(calc(var(--sheen-angle,-27deg) + 66deg));
  }
}
@keyframes card-halo-breathe { 0%,100% { opacity:.25; } 50% { opacity:.7; } }

/* Canonical glass sizes and card content */
.art { height:190px; padding-bottom:28px; position:relative; display:flex; align-items:center; justify-content:center; background:var(--art-bg); }
.art svg { height:112px; width:112px; color:var(--accent); stroke-width:1; filter:drop-shadow(0 6px 12px #0002); }
.art svg.rocks { width:124px; height:132px; }
.art svg.wine,.art svg.flute { width:105px; height:140px; }
.art svg.coupe { width:122px; height:142px; }
.card .art { height:calc(var(--card-art-height) * var(--collection-card-scale)); padding-bottom:calc(28px * var(--collection-card-scale)); }
.card .art svg { width:calc(112px * var(--collection-card-scale)); height:calc(112px * var(--collection-card-scale)); }
.card .art svg.rocks { width:calc(124px * var(--collection-card-scale)); height:calc(132px * var(--collection-card-scale)); }
.card .art svg.wine,.card .art svg.flute { width:calc(105px * var(--collection-card-scale)); height:calc(140px * var(--collection-card-scale)); }
.card .art svg.coupe { width:calc(122px * var(--collection-card-scale)); height:calc(142px * var(--collection-card-scale)); }
.number { position:absolute; left:calc(20px * var(--collection-card-scale)); top:calc(14px * var(--collection-card-scale)); color:#aab4a5; font:italic calc(16px * var(--collection-type-scale)) Georgia,serif; }
.unspecified { font:italic 80px Georgia,serif; color:var(--accent); }
.card .unspecified { font-size:calc(80px * var(--collection-type-scale)); }
.card-content { padding:calc(22px * var(--collection-card-scale)); display:flex; flex-direction:column; flex:1; }
.base { font-size:calc(.875rem * var(--collection-type-scale)); color:var(--accent); letter-spacing:.16em; text-transform:uppercase; margin:0 0 calc(7px * var(--collection-card-scale)); }
.card h2 { font:normal calc(27px * var(--collection-type-scale)) Georgia,serif; margin:0 0 calc(9px * var(--collection-card-scale)); letter-spacing:-.02em; overflow-wrap:anywhere; }
.ingredients-summary { color:var(--muted); font-size:calc(14px * var(--collection-type-scale)); margin:0; min-height:calc(42px * var(--collection-card-scale)); }
.card-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:calc(16px * var(--collection-card-scale)); margin-top:calc(20px * var(--collection-card-scale)); font-size:calc(13px * var(--collection-type-scale)); color:var(--muted); gap:calc(8px * var(--collection-card-scale)); }
.view { color:#e6e7da; font-size:calc(14px * var(--collection-type-scale)); }
footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); margin-top:42px; padding:22px 0 28px; color:#9aaead; font-size:.8125rem; letter-spacing:.08em; }
footer b { padding:0 8px; color:var(--gold); }
.empty { text-align:center; padding:55px 20px; color:var(--muted); }
.empty h2 { color:var(--text); font:32px Georgia,serif; }
.reset { background:var(--gold); border:0; padding:12px 22px; border-radius:6px; color:#192018; }

/* Recipe dialogs and preparation */
dialog { width:min(850px,calc(100% - 32px)); max-height:90dvh; border:1px solid #5f665b; border-radius:14px; padding:0; background:var(--panel); color:var(--text); overflow:auto; }
dialog::backdrop { background:#030907bf; backdrop-filter:blur(6px); }
.close { position:absolute; top:14px; right:14px; z-index:1; width:42px; height:42px; display:grid; place-items:center; padding:0; border:0; border-radius:0; background:transparent; color:#fff; -webkit-user-select:none; user-select:none; caret-color:transparent; }
.close > svg { width:24px; height:24px; pointer-events:none; }
.recipe-surface { border:1px solid #cde8ec38; border-radius:22px; box-shadow:0 24px 80px #02091180,inset 0 1px 0 #f3fbff1a; }
#recipe[open],#bottle-viewer[open] { display:flex; flex-direction:column; overflow:hidden; }
.dialog-toolbar { position:relative; height:0; min-height:0; flex-shrink:0; z-index:3; pointer-events:none; }
/* Leave room between the close button and the dialog's scrollbar. */
.dialog-toolbar .close { right:32px; pointer-events:auto; }
.dialog-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; width:100%; }
.detail-top {
  --header-glow-position:50% 72px;
  position:relative; display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; padding:28px 64px 30px;
  background:radial-gradient(ellipse 310px 225px at var(--header-glow-position),color-mix(in srgb,var(--accent) 19%,transparent),color-mix(in srgb,var(--accent) 6%,transparent) 42%,transparent 80%),linear-gradient(180deg,#e0f5ff08,transparent 85%);
}
.detail-top::after { content:""; position:absolute; inset:auto 32px 0; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,#d2eefc20,transparent); }
.detail-top .art { height:auto; min-height:0; padding:0; background:transparent; }
.detail-top .art svg { height:140px; width:140px; flex-shrink:0; filter:drop-shadow(0 2px 2px #0005) drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 18%,transparent)); }
.detail-top .art svg.rocks { width:145px; height:157px; }
.detail-top .art svg.wine { width:123px; height:164px; }
.detail-top .art svg.flute { width:120px; height:160px; }
.detail-top .art svg.coupe { width:145px; height:169px; }
.detail-heading { min-width:0; max-width:100%; padding:0; }
.detail-heading h2 { font:38px/1.15 Georgia,serif; margin:0; overflow-wrap:anywhere; }
/* The title receives navigation focus but is not an interactive control. */
#recipe-title:focus { outline:none; }
.detail-content { padding:28px 32px 32px; }
.recipe-columns { display:grid; grid-template-columns:1fr 1.6fr; gap:35px; }
.recipe-columns h3,.recipe-details h3 { font-size:.875rem; letter-spacing:.16em; color:var(--gold); margin:0 0 14px; }
.recipe-ingredients h3,.recipe-details h3 { margin-bottom:8px; }
.ingredient-list { margin:0 0 26px; }
.ingredient-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.75fr); align-items:start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.ingredient-row:first-child { padding-top:0; }
.ingredient-row dt { font-size:1rem; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.ingredient-row dt small { display:block; margin-top:5px; color:var(--muted); font-size:.875rem; font-weight:400; line-height:1.5; }
.ingredient-row dd { margin:0; text-align:right; color:var(--gold); font-size:.9375rem; line-height:1.6; }
.ingredient-row--garnish dt { font-style:italic; }
ol { padding-left:24px; margin:0; }
ol li { padding:0 0 14px 5px; }
ol li::marker { color:var(--gold); }
.method li { white-space:pre-line; line-height:1.65; padding-bottom:19px; }
.method li ul { padding:12px 0 0 20px; }
.method li ul li { padding-bottom:4px; }
.pro-tips { border-top:1px solid var(--line); margin-top:28px; padding:24px 0 0; }
.pro-tips h3 { font-size:.875rem; letter-spacing:.16em; color:var(--gold); }
.pro-tips p { white-space:pre-line; line-height:1.7; color:#c9cdbf; }
.recipe-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:center; text-align:center; gap:20px 28px; border-top:1px solid var(--line); margin-top:28px; padding-top:24px; }
.recipe-details p { margin:0; color:var(--muted); line-height:1.7; }
.glass-note { font-size:14px; }

/* Bottle reference images */
.bottle-shelf { margin:28px 0 30px; padding:0 0 25px; border-bottom:1px solid var(--line); }
.bottle-shelf-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.bottle-shelf-heading h3 { margin:0; font-size:.875rem; letter-spacing:.16em; color:var(--gold); }
.bottle-shelf-heading p { margin:0; color:var(--muted); font-size:.875rem; }
.bottle-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.bottle-card { display:flex; flex-direction:column; align-items:center; min-width:0; border:1px solid #344e50; border-radius:9px; background:linear-gradient(160deg,#1b3538,#14272b); color:var(--text); padding:16px 10px 15px; text-align:center; transition:border-color .2s,background .2s; }
.bottle-card:hover { border-color:#b8a773; background:#203a3c; }
.bottle-photo { display:flex; justify-content:center; align-items:center; width:100%; height:190px; overflow:hidden; margin-bottom:15px; }
.bottle-photo img { display:block; height:100%; width:auto; max-width:none; flex-shrink:0; object-fit:contain; }
.bottle-ingredient { font-size:.875rem; color:var(--gold); margin-bottom:4px; line-height:1.4; }
.bottle-name { font-size:16px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.bottle-detail { font-size:.875rem; color:var(--muted); line-height:1.5; margin-top:5px; max-width:180px; }
.bottle-viewer { width:min(570px,calc(100% - 28px)); background:#08151ee6; padding:0; max-height:94dvh; }
.bottle-viewer::backdrop { background:#030d12d9; backdrop-filter:blur(5px); }
.bottle-viewer-content { padding:32px 24px 24px; }
.bottle-viewer-photo { height:min(58dvh,570px); width:100%; min-width:0; display:flex; align-items:center; justify-content:center; overflow:hidden; margin:15px 0 20px; }
/* Fit the complete image within both dimensions, including square fruit photos. */
.bottle-viewer-photo img { display:block; width:100%; height:100%; min-width:0; max-width:100%; max-height:100%; object-fit:contain; object-position:center; }
.bottle-viewer-caption { text-align:center; }
.bottle-viewer-caption h2 { font:30px Georgia,serif; margin:0 0 8px; }
.bottle-viewer-caption p { font-size:14px; color:var(--muted); margin:0; }

/* Ambient background: transforms and opacity only, no animated filters. */
.ambient-field { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; contain:strict; opacity:0; transition:opacity 900ms ease; }
.ambient-field.is-ready { opacity:1; }
.ambient-layer { position:absolute; inset:0; transition:transform 480ms cubic-bezier(.2,.65,.3,1); }
.ambient-far { transform:translate3d(calc(var(--ambient-x,0px)*.35),calc(var(--ambient-scroll,0px)*.3 + var(--ambient-y,0px)*.35),0); }
.ambient-near { transform:translate3d(var(--ambient-x,0px),calc(var(--ambient-scroll,0px) + var(--ambient-y,0px)),0); }
.ambient-particle { position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); color:var(--tint); border-radius:50%; background:radial-gradient(circle at 40% 35%,#fff7e0 0%,currentColor 42%,transparent 100%); box-shadow:0 0 6px color-mix(in srgb,currentColor 55%,transparent); opacity:var(--alpha); animation:ambient-drift var(--duration) var(--delay) ease-in-out infinite alternate; }
.ambient-far .ambient-particle { background:none; box-shadow:none; }
/* Crossfade two static textures rather than animating a blur filter. Both
   appearances stay centred on the same drifting particle, with their own pace. */
.ambient-far .ambient-particle::before,.ambient-far .ambient-particle::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  animation:ambient-depth-soft var(--focus-duration,20s) var(--focus-delay,0s) ease-in-out infinite;
}
.ambient-far .ambient-particle::before {
  background:radial-gradient(circle,currentColor 0%,color-mix(in srgb,currentColor 45%,transparent) 30%,transparent 72%);
}
.ambient-far .ambient-particle::after {
  background:radial-gradient(circle,#fff7e0 0 .7px,currentColor 1.1px 2px,color-mix(in srgb,currentColor 32%,transparent) 3.5px,transparent 10px);
  animation-name:ambient-depth-sharp;
}
.ambient-field.is-paused .ambient-particle,
.ambient-field.is-paused .ambient-particle::before,
.ambient-field.is-paused .ambient-particle::after { animation-play-state:paused; }
.ambient-field.is-paused .ambient-layer { transition:none; }
@keyframes ambient-depth-soft {
  0%,100% { opacity:.45; transform:scale(1.08); }
  44%,56% { opacity:0; transform:scale(.55); }
}
@keyframes ambient-depth-sharp {
  0%,100% { opacity:0; transform:scale(.55); }
  44%,56% { opacity:.95; transform:scale(var(--focus-scale,1.2)); }
}
/* Soft, alternating bends share the existing transform/opacity animation. */
@keyframes ambient-drift {
  0% { transform:translate3d(calc(var(--sway)*-.4),calc(var(--rise,60px)*.3),0); opacity:calc(var(--alpha)*.65); }
  24% { transform:translate3d(calc(var(--sway)*.1 + var(--bend,0px)*.7),calc(var(--rise,60px)*.1),0); }
  50% { transform:translate3d(calc(var(--sway)*.5 - var(--bend,0px)*.45),calc(var(--rise,60px)*-.24),0); opacity:var(--alpha); }
  76% { transform:translate3d(calc(var(--sway)*.75 + var(--bend,0px)*.4),calc(var(--rise,60px)*-.47),0); }
  100% { transform:translate3d(var(--sway),calc(var(--rise,60px)*-.7),0); opacity:calc(var(--alpha)*.78); }
}

/* Responsive adjustments: one block per breakpoint. */
@media(min-width:1024px) {
  /* Share the available width evenly, keeping all ingredient labels intact. */
  .filters { justify-content:space-between; gap:clamp(4px,calc(1vw - 7px),8px); }
  .filter { padding-inline:clamp(5px,calc(3vw - 26px),18px); }
}
@media(min-width:1200px) {
  /* Use the existing side gutters for a fifth card. Expanding the previous
     four-column width by 5/4 plus a quarter-gap preserves each card's size. */
  .grid {
    --five-column-width:calc(125% * var(--collection-card-scale) + 5.5px * var(--collection-card-scale));
    width:var(--five-column-width);
    margin-inline:calc((100% - var(--five-column-width)) / 2);
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}
@media(min-width:1450px) {
  .art { height:220px; }
  .card { --card-art-height:213px; }
}
@media(max-width:950px) {
  header { padding:14px 28px; }
  main { padding:20px 28px 0; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .tools { row-gap:12px; }
  .search { flex-basis:100%; }
  .hotel-control { flex:1; }
  .filter-row { margin-top:0; }
}
@media(max-width:600px) {
  header { padding:12px 20px; flex-wrap:wrap; gap:10px; }
  .brand { font-size:.875rem; letter-spacing:.06em; gap:10px; }
  .source { font-size:.875rem; }
  .source span { display:none; }
  .monogram { flex-basis:32px; width:32px; height:36px; font-size:27px; }
  main { padding:18px 20px 0; }
  .tools { gap:10px; margin-bottom:14px; align-items:center; }
  #search { padding-block:12px; }
  .search { flex-basis:100%; }
  .filter-toggle { display:inline-flex; order:1; }
  .compact-count { display:block; order:1; margin-left:auto; color:var(--muted); font-size:.875rem; white-space:nowrap; }
  .filter-panel { display:block; order:2; width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:transparent; }
  .filter-panel:not(.is-open) { display:none; }
  .hotel-control { display:flex; align-items:center; gap:12px; padding:10px; min-width:0; min-height:44px; }
  .hotel-control + .hotel-control { margin-top:8px; }
  .hotel-control label { flex:0 0 92px; }
  .hotel-control select { min-width:0; font-size:14px; }
  .filter-panel-label { display:block; margin:14px 0 8px; color:var(--gold); font-size:.875rem; letter-spacing:.12em; }
  .filter-row { display:block; margin:0; }
  .filters { gap:7px; }
  .filter { font-size:.875rem; min-height:44px; padding:7px 13px; }
  .count { display:none; }
  .filter-panel-actions { display:block; margin-top:14px; }
  .active-filter-summary { align-items:flex-start; margin:-2px 0 14px; }
  .active-filter-summary p { line-height:1.6; }
  /* Two compact cards share the available mobile width. */
  .grid { width:95%; gap:calc(12px * var(--collection-card-scale)); grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card { --card-radius:calc(16px * var(--collection-card-scale)); --card-art-height:86px; min-width:0; }
  .art { height:170px; }
  .card .art { padding:calc(6px * var(--collection-card-scale)); }
  .card .art svg,.card .art svg.rocks,.card .art svg.wine,.card .art svg.flute,.card .art svg.coupe { width:calc(66px * var(--collection-card-scale)); height:calc(76px * var(--collection-card-scale)); }
  .card .number { left:calc(10px * var(--collection-card-scale)); top:calc(8px * var(--collection-card-scale)); font-size:calc(11px * var(--collection-type-scale)); }
  .card .unspecified { font-size:calc(44px * var(--collection-type-scale)); line-height:1; }
  .card-content { padding:calc(12px * var(--collection-card-scale)) calc(11px * var(--collection-card-scale)) calc(10px * var(--collection-card-scale)); }
  .card .base { font-size:calc(10px * var(--collection-type-scale)); line-height:1.3; letter-spacing:.12em; margin-bottom:calc(5px * var(--collection-card-scale)); }
  .card h2 { font-size:calc(clamp(18px,4.8vw,22px) * var(--collection-type-scale)); line-height:1.2; min-height:0; margin-bottom:calc(10px * var(--collection-card-scale)); overflow-wrap:anywhere; text-wrap:balance; }
  .card .ingredients-summary { display:none; }
  .card .card-bottom { gap:calc(6px * var(--collection-card-scale)); padding-top:calc(8px * var(--collection-card-scale)); font-size:calc(11px * var(--collection-type-scale)); line-height:1.3; }
  .card-bottom > span:first-child { min-width:0; overflow-wrap:anywhere; }
  .card .view { display:grid; place-items:center; flex:0 0 calc(22px * var(--collection-card-scale)); width:calc(22px * var(--collection-card-scale)); height:calc(22px * var(--collection-card-scale)); border:1px solid #cde8ec2b; border-radius:50%; font-size:calc(16px * var(--collection-type-scale)); line-height:1; }
  .card .view-label { display:none; }
  footer { flex-direction:column; gap:7px; margin-top:28px; }
  .detail-content { padding:12px 24px 28px; }
  .recipe-columns { grid-template-columns:1fr; gap:20px; }
  .recipe-ingredients { border-bottom:0; padding-bottom:0; }
  .recipe-ingredients .ingredient-list { margin-bottom:0; }
  .ingredient-row { padding:9px 0; }
  .method li { padding-bottom:14px; }
  .recipe-details { grid-template-columns:1fr; gap:18px; }
  .bottle-shelf { margin-bottom:25px; padding-bottom:24px; }
  .bottle-shelf-heading { align-items:flex-start; flex-direction:column; gap:5px; }
  .bottle-row { gap:8px; }
  .bottle-card { padding:12px 5px 11px; }
  .bottle-photo { height:135px; margin-bottom:12px; }
  .bottle-name { font-size:14px; }
  .bottle-detail { line-height:1.4; }
  .bottle-viewer-content { padding:26px 18px 22px; }
  .bottle-viewer-photo { height:54dvh; }
  .ambient-field.is-ready { opacity:.85; }
  .ambient-particle { box-shadow:0 0 4px color-mix(in srgb,currentColor 55%,transparent); }
  .ambient-far .ambient-particle { box-shadow:none; }
}
@media(max-width:380px) {
  .active-filter-summary { flex-direction:column; gap:8px; }
}
@media(max-width:360px) {
  .bottle-row { gap:6px; }
  .bottle-photo { height:115px; }
  .bottle-card { padding-inline:4px; }
}
@media(max-height:500px) and (orientation:landscape) {
  .bottle-viewer:not([open]) { display:none; }
  .bottle-viewer-content { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; padding:20px 28px; }
  .bottle-viewer-photo { height:68dvh; margin:0; }
  .bottle-viewer-caption { padding-right:18px; }
}

/* Approved compact recipe layout: references share the ingredient rows. */
.recipe-surface.recipe--compact-bottles { max-height:94dvh; --reference-image-width:52px; --reference-image-height:74px; --reference-column-width:var(--reference-image-width); }
.recipe-surface.recipe--compact-bottles.recipe--image-options { --reference-column-width:calc(var(--reference-image-width)*var(--reference-count,2) + (var(--reference-count,2) - 1)*6px); }
.recipe-surface.recipe--compact-bottles .detail-top {
  --header-glow-position:50% 40px;
  flex-direction:row; justify-content:center; gap:12px; padding:16px 84px;
}
.recipe-surface.recipe--compact-bottles .detail-top .art svg { width:48px; height:68px; }
.recipe-surface.recipe--compact-bottles .detail-heading h2 { font-size:32px; }
.recipe-surface.recipe--compact-bottles .detail-content { padding:16px 28px 20px; }
.recipe-surface.recipe--compact-bottles .recipe-columns { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:28px; }
.recipe-surface.recipe--compact-bottles .recipe-columns h3,
.recipe-surface.recipe--compact-bottles .recipe-details h3 { font-size:.8125rem; margin-bottom:6px; }
.recipe-surface.recipe--compact-bottles .ingredient-list { margin-bottom:0; }
.recipe-surface.recipe--compact-bottles .ingredient-row { grid-template-columns:minmax(0,1fr) max-content; gap:12px; padding:8px 0; }
.recipe-surface.recipe--compact-bottles .ingredient-row:first-child { padding-top:0; }
.recipe-surface.recipe--compact-bottles .ingredient-row dt { font-size:.9375rem; line-height:1.4; }
.recipe-surface.recipe--compact-bottles .ingredient-row dd { font-size:.9375rem; line-height:1.4; align-self:center; }
.recipe-surface.recipe--compact-bottles .ingredient-row--bottle dt { display:flex; align-items:center; gap:10px; }
.recipe-surface.recipe--compact-bottles .ingredient-row--bottle dt > .bottle-reference { margin-inline-end:calc(var(--reference-column-width) - var(--reference-image-width)); }
.recipe-surface.recipe--compact-bottles .ingredient-row--text dt { padding-inline-start:calc(var(--reference-column-width) + 10px); }
.ingredient-reference-options { display:flex; gap:6px; flex:0 0 var(--reference-column-width,110px); }
/* Every image group occupies the same column as a single reference. */
.ingredient-option-stack {
  --stack-count:2;
  display:block; position:relative; height:var(--reference-image-height);
  width:var(--reference-image-width); flex-basis:var(--reference-image-width);
  overflow:visible; z-index:1;
}
.ingredient-option-fan {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  pointer-events:none;
}
.ingredient-option-fan[popover] {
  position:fixed; inset:auto; left:var(--stack-anchor-x); top:var(--stack-anchor-y);
  width:var(--reference-image-width); height:var(--reference-image-height);
  margin:0; padding:0; border:0; overflow:visible; background:transparent; color:inherit;
}
.ingredient-option-fan::backdrop { background:transparent; pointer-events:none; }
.ingredient-option-fan::before {
  content:""; position:absolute; left:var(--stack-hit-left,-8px); right:var(--stack-hit-right,-8px);
  top:var(--stack-hit-top,-8px); bottom:var(--stack-hit-bottom,-8px);
  pointer-events:none;
}
.ingredient-option-fan > .bottle-reference {
  position:absolute; left:0; top:0; margin:0; z-index:calc(var(--stack-count) - var(--stack-layer));
  pointer-events:auto;
  box-shadow:0 2px 5px #020b104d;
  transform:translate(var(--stack-peek-x),var(--stack-peek-y)) rotate(var(--stack-closed-angle)) scale(var(--stack-closed-scale));
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .18s;
}
.ingredient-option-fan > .bottle-reference:not(:first-of-type) {
  border-color:#c6ddd84d;
}
.ingredient-option-stack.is-expanded { z-index:8; }
.ingredient-option-stack.is-expanded > .ingredient-option-fan::before { pointer-events:auto; }
.ingredient-option-stack.is-expanded > .ingredient-option-fan > .bottle-reference {
  transform:translate(var(--stack-card-open-x,0px),var(--stack-card-open-y,0px)) rotate(0deg) scale(var(--stack-open-scale,1));
  border-color:#d6c58b70; box-shadow:0 7px 18px #020b1073;
}
.ingredient-option-fan > .bottle-reference:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.stack-option-count {
  position:absolute; right:-4px; bottom:-3px; z-index:calc(var(--stack-count) + 1);
  display:grid; place-items:center; width:17px; height:17px;
  border:1px solid #d6c58b75; border-radius:50%; background:#18353b;
  color:var(--gold); font-size:10px; line-height:1; font-weight:600;
  pointer-events:none; transition:opacity .16s;
}
.ingredient-option-stack.is-expanded > .stack-option-count { opacity:0; }
.recipe-surface.recipe--compact-bottles .ingredient-copy { min-width:0; }
.recipe-surface.recipe--compact-bottles .ingredient-bottle-info { margin-top:3px; font-size:.8125rem; line-height:1.35; }
.ingredient-bottle-brand { display:block; font-weight:400; color:#d8e4df; }
.ingredient-bottle-hint { margin:0 0 8px; color:var(--muted); font-size:.8125rem; line-height:1.4; }
.bottle-reference {
  flex:0 0 52px; width:52px; height:74px; padding:4px;
  border:1px solid #cde8ec24; border-radius:8px;
  /* The same tint for every reference, over an opaque base so rear cards
     cannot show through. Their photos can still peek outside the front. */
  background:linear-gradient(145deg,#d9f4ff0a,#1b353855),var(--bg);
  color:var(--text); transition:border-color .18s;
}
.bottle-reference:hover { border-color:#b8a773; }
.bottle-reference .bottle-photo { height:100%; margin:0; }
.bottle-reference .bottle-photo img { max-width:100%; }
.bottle-reference .bottle-photo--full-height img { max-width:none; }
.bottle-reference .garnish-photo img, .bottle-reference .ingredient-photo img { width:100%; height:100%; object-fit:contain; }
/* Preserve the full uploaded photographs; clip their transparent side margins. */
.recipe-surface:is(.recipe--image-options,.recipe--stacked-bottles) .bottle-reference .bottle-photo:not(.garnish-photo):not(.ingredient-photo) img { max-width:none; }
.recipe-surface.recipe--compact-bottles .method { font-size:.9375rem; }
.recipe-surface.recipe--compact-bottles .method li { line-height:1.5; padding-bottom:8px; }
.recipe-surface.recipe--compact-bottles .method li:last-child { padding-bottom:0; }
.recipe-surface.recipe--compact-bottles .recipe-details { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; margin-top:16px; padding-top:12px; }
.recipe-surface.recipe--compact-bottles .recipe-details p { font-size:.875rem; line-height:1.4; }
@media(max-width:600px) {
  .recipe-surface.recipe--compact-bottles { --reference-image-width:44px; --reference-image-height:64px; }
  .recipe-surface.recipe--compact-bottles .detail-content { padding:12px 20px 16px; }
  .recipe-surface.recipe--compact-bottles .recipe-columns { grid-template-columns:minmax(0,1fr); gap:14px; }
  .recipe-surface.recipe--compact-bottles .ingredient-row { gap:10px; padding:6px 0; }
  .recipe-surface.recipe--compact-bottles .ingredient-row:first-child { padding-top:0; }
  .bottle-reference { flex-basis:44px; width:44px; height:64px; }
  .recipe-surface.recipe--compact-bottles .method li { line-height:1.45; padding-bottom:6px; }
}

/* Recipe browser: one readable surface, with neighbouring names as controls. */
#recipe {
  inset:0; margin:0; width:100vw; max-width:none; height:100dvh; max-height:none;
  padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
  overflow:hidden; overscroll-behavior:none;
}
#recipe[open] { display:block; }
.recipe-carousel {
  display:flex; flex-direction:column; width:100%; height:100%;
  padding:max(22px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom));
}
.recipe-stage {
  --recipe-width:min(850px,calc(100vw - 240px));
  position:relative; flex:1; min-height:0; width:100%; overflow:hidden; isolation:isolate;
  touch-action:pan-y pinch-zoom; -webkit-user-select:none; user-select:none;
}
.recipe-stage .recipe-surface {
  position:absolute; top:50%; left:50%; width:var(--recipe-width); max-height:100%;
  background:#08151ee6;
  transform:translate(-50%,-50%); transform-origin:center;
}
.recipe-panel { display:flex; flex-direction:column; overflow:hidden; z-index:2; }
.recipe-stage .recipe-panel.recipe--compact-bottles { max-height:100%; }
.recipe-panel > .dialog-scroll { flex:1 1 auto; min-height:0; }
/* Touch arbitration stops at the nearest scroll container, including clipped
   photo slots. Reserve horizontal swipes on each surface, keeping vertical
   reading and pinch zoom native throughout the recipe. */
.recipe-panel,.recipe-panel > .dialog-scroll,.recipe-panel .bottle-photo { touch-action:pan-y pinch-zoom; }
.recipe-peek {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:clamp(80px,calc((100vw - var(--recipe-width))/2 - 32px),190px);
  opacity:.9; transition:opacity .16s;
}
#recipe-previous-preview { right:calc(50% + var(--recipe-width)/2 + 16px); }
#recipe-next-preview { left:calc(50% + var(--recipe-width)/2 + 16px); }
.recipe-peek[hidden],.recipe-navigation[hidden] { display:none; }
.recipe-peek-select {
  display:block; width:100%; min-height:80px; padding:12px 0; border:0;
  background:transparent; color:var(--text); text-shadow:0 2px 14px #020911;
  text-align:left; cursor:pointer;
}
#recipe-previous-preview .recipe-peek-select { text-align:right; }
.recipe-peek-select > span { display:block; }
.recipe-peek-select small { display:block; margin-bottom:10px; font-size:11px; letter-spacing:.16em; color:var(--gold); }
.recipe-peek-select strong { display:block; font:clamp(18px,1.8vw,24px)/1.25 Georgia,serif; overflow-wrap:anywhere; transition:color .16s; }
.recipe-peek-select:hover strong,.recipe-peek-select:focus-visible strong { color:var(--gold); }
.recipe-peek-select:focus-visible { outline:2px solid var(--gold); outline-offset:4px; border-radius:8px; }
.recipe-stage.is-dragging .recipe-peek,.recipe-stage.is-settling .recipe-peek { opacity:0; pointer-events:none; }
.recipe-stage.has-neighbours .detail-top,.recipe-stage.has-neighbours .detail-content { cursor:grab; }
.recipe-stage.is-dragging .recipe-surface,.recipe-stage.is-dragging .recipe-surface * { cursor:grabbing!important; }
.recipe-stage.is-dragging .recipe-surface,.recipe-stage.is-settling .recipe-surface { will-change:transform,opacity; }
.recipe-stage.is-settling .recipe-surface {
  transition:transform var(--recipe-transition-duration,280ms) cubic-bezier(.22,.7,.25,1),
    opacity var(--recipe-transition-duration,280ms) ease;
}
.recipe-navigation {
  position:relative; z-index:3; display:flex; align-items:center; gap:14px;
  width:max-content; max-width:calc(100% - 32px); flex:0 0 auto;
  margin:14px auto 0; padding:7px 9px; border:0;
  background:transparent; box-shadow:none;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  /* Both viewers and their moving surfaces share the picker's glass. */
  #recipe::backdrop,#bottle-viewer::backdrop {
    background:transparent;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .recipe-stage .recipe-surface,#recipe > .motion-plane,
  #bottle-viewer,#bottle-viewer > .motion-plane {
    background:transparent;
    -webkit-backdrop-filter:var(--overlay-glass-filter);
    backdrop-filter:var(--overlay-glass-filter);
  }
}
.recipe-navigation-button {
  display:grid; place-items:center; width:44px; height:44px; padding:0; flex:0 0 auto;
  border:0; border-radius:50%; color:var(--gold); background:transparent;
  transition:color .18s,opacity .18s;
}
.recipe-navigation-button svg { width:20px; height:20px; pointer-events:none; }
.recipe-navigation-button[aria-disabled=true] { opacity:.28; cursor:default; }
.recipe-navigation-button:not([aria-disabled=true]):hover { color:var(--text); }
.recipe-position { min-width:0; width:72px; text-align:center; line-height:1.3; white-space:nowrap; }
.recipe-position > span { display:block; font-size:14px; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:950px) {
  .recipe-stage { --recipe-width:calc(100vw - 144px); }
  .recipe-peek { display:none; }
}
@media(max-width:760px) {
  .recipe-surface .recipe-columns { grid-template-columns:minmax(0,1fr); gap:20px; }
  .recipe-surface.recipe--compact-bottles .recipe-columns { gap:14px; }
}
@media(max-width:600px) {
  /* One compact mobile header for every recipe. */
  .recipe-surface .detail-top,
  .recipe-surface.recipe--compact-bottles .detail-top {
    --header-glow-position:36px 32px;
    display:grid; grid-template-columns:32px minmax(0,1fr);
    align-items:center; justify-content:start; gap:10px;
    text-align:left; padding:12px 58px 12px 18px;
  }
  .recipe-surface .detail-top::after { left:18px; right:18px; }
  .recipe-surface .detail-top .art {
    display:grid; place-items:center; width:32px; height:40px;
    justify-self:start; align-self:center;
  }
  .recipe-surface .detail-top .art svg,
  .recipe-surface.recipe--compact-bottles .detail-top .art svg { width:32px; height:40px; }
  .recipe-surface .detail-top .unspecified { font-size:24px; line-height:1; }
  .recipe-surface .detail-heading { width:100%; }
  .recipe-surface .detail-heading h2,
  .recipe-surface.recipe--compact-bottles .detail-heading h2 {
    font-size:clamp(18px,5.4vw,24px); line-height:1.2;
    overflow-wrap:normal; word-break:normal; text-wrap:balance;
  }
  .recipe-panel > .dialog-toolbar .close { top:10px; right:10px; width:44px; height:44px; }
  .recipe-carousel { padding:max(12px,env(safe-area-inset-top)) 0 max(10px,env(safe-area-inset-bottom)); }
  .recipe-stage { --recipe-width:calc(100vw - 48px); }
  .recipe-stage .recipe-surface { border-radius:20px; }
  .recipe-navigation { gap:8px; padding:5px 7px; margin-top:10px; }
}
@media(max-height:500px) and (orientation:landscape) {
  .recipe-carousel { padding:10px 0 8px; }
  .recipe-navigation { margin-top:7px; padding:3px 7px; }
  .recipe-navigation-button { width:38px; height:38px; }
}

/* System accessibility preferences */
@media(prefers-reduced-transparency:reduce), (forced-colors:active) {
  .card-face { background:var(--panel); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .card-face > .art { background:var(--art-bg); }
  .card-face > .card-content { background:transparent; }
  .recipe-stage .recipe-surface,#recipe > .motion-plane,
  #bottle-viewer,#bottle-viewer > .motion-plane { background:var(--panel); -webkit-backdrop-filter:none; backdrop-filter:none; }
  #recipe::backdrop,#bottle-viewer::backdrop { background:#030907bf; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media(forced-colors:active) {
  .recipe-stage .recipe-surface,#bottle-viewer { filter:none!important; background:Canvas; color:CanvasText; }
}
@media(prefers-reduced-motion:reduce) {
  * { transition:none!important; }
  body::before,body::after { inset:0; animation:none; transform:none; will-change:auto; }
  body::after { opacity:0; transition:none; }
  .ambient-field { display:none; }
  .bottle-card { transition:none; }
  .card:hover { transform:none; }
}