/* House of Amrut — styles
   Palette and type carried over from the original site. */
:root {
  --onyx: #080808;
  --velvet: #0b1b15;
  --champagne: #e6c280;
  --gold: #c5a059;
  --muted-gold: #8a733e;
  --line: rgba(197, 160, 89, 0.15);
  --line-strong: rgba(197, 160, 89, 0.45);
  --text: rgba(230, 194, 128, 0.72);
  --text-dim: rgba(230, 194, 128, 0.55);

  --f-head: "Cinzel", serif;
  --f-display: "Cormorant Garamond", serif;
  --f-body: "Inter", system-ui, sans-serif;

  --track: 0.2em;
  --track-sm: 0.14em;
  --wrap: 1280px;
  --pad: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--onyx); color: var(--champagne);
  font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Film grain over everything — keeps the blacks from feeling flat */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { color: #fff; background: rgba(197, 160, 89, .25); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--onyx); }
::-webkit-scrollbar-thumb { background: rgba(197, 160, 89, .25); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--gold); color: var(--onyx); font: 11px var(--f-head); letter-spacing: var(--track); text-transform: uppercase; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 820px; }
.center { text-align: center; }

/* ---------- Type ---------- */
.eyebrow, .label, .chip, .btn, .nav-link, .fine.heading, .h-tile, .step {
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: var(--track);
}
.eyebrow { font-size: 11px; color: var(--muted-gold); margin-bottom: 24px; }
.label { font-size: 10px; color: var(--muted-gold); margin-bottom: 8px; display: block; }
.h-display, .h-hero, .h-section, .h-item, .h-menu, .h-modal {
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: var(--track); color: var(--champagne);
}
.h-display { font-size: clamp(44px, 9vw, 104px); line-height: 1; text-shadow: 0 0 40px rgba(197, 160, 89, .35); }
.h-display--sm { font-size: clamp(36px, 7vw, 76px); }
.h-hero { font-size: clamp(34px, 7vw, 76px); line-height: 1.05; text-shadow: 0 0 40px rgba(197, 160, 89, .35); }
.h-section { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.2; }
.h-item { font-size: 15px; line-height: 1.4; }
.h-menu { font-size: clamp(16px, 2vw, 20px); color: var(--gold); }
.h-modal { font-size: 24px; line-height: 1.2; margin: 8px 0 20px; }
.h-tile { font-size: clamp(20px, 2.4vw, 30px); color: var(--champagne); display: block; }
.lede { font: italic 400 clamp(20px, 2.4vw, 26px)/1.4 var(--f-display); color: rgba(230, 194, 128, .85); }
.body-lg { font-size: 18px; line-height: 1.75; color: var(--text); }
.body { color: var(--text); line-height: 1.75; max-width: 30em; margin-bottom: 32px; }
.dim { color: var(--text-dim); }

.rule { display: block; width: 96px; height: 1px; background: rgba(197, 160, 89, .5); margin: 32px auto; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(197, 160, 89, .4), transparent); }
.divider.short { width: 128px; margin: 40px auto; }

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 36px; font-size: 11px; color: var(--gold); border: 1px solid var(--line-strong);
  transition: background .5s, color .5s, box-shadow .5s;
}
.btn:hover { background: var(--gold); color: var(--onyx); box-shadow: 0 0 24px rgba(197, 160, 89, .18); }
.btn-sm { padding: 10px 20px; font-size: 10px; }
.btn-solid { background: var(--gold); color: var(--onyx); border-color: var(--gold); }
.btn-solid:hover { box-shadow: 0 0 28px rgba(197, 160, 89, .3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.center { justify-content: center; margin-bottom: 48px; }
.chip { font-size: 10px; padding: 10px 18px; border: 1px solid rgba(197, 160, 89, .2); color: var(--muted-gold); transition: color .3s, border-color .3s, background .3s; }
.chip:hover { color: var(--gold); }
.chip.is-on { border-color: var(--gold); color: var(--champagne); background: rgba(197, 160, 89, .1); }

/* ---------- Header ---------- */
.rails { position: fixed; inset: 0 24px; z-index: 40; pointer-events: none; display: none; justify-content: space-between; }
.rails span { width: 1px; background: linear-gradient(transparent, rgba(197, 160, 89, .25), transparent); }
@media (min-width: 1024px) { .rails { display: flex; } }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .5s, border-color .5s; border-bottom: 1px solid transparent; }
.site-header.is-solid { background: rgba(8, 8, 8, .9); backdrop-filter: blur(8px); border-color: var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo img { height: 56px; width: auto; }
.nav { display: none; gap: 36px; }
.nav-link { font-size: 10px; color: var(--muted-gold); position: relative; padding: 6px 0; transition: color .3s; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--gold); transition: width .5s var(--ease); }
.nav-link:hover, .nav-link.is-active { color: var(--gold); }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
.nav-cta { display: none; }
.menu-btn { color: var(--gold); padding: 8px; margin-right: -8px; }
@media (min-width: 1024px) {
  .nav { display: flex; } .nav-cta { display: inline-flex; } .menu-btn { display: none; }
  .logo img { height: 64px; }
}
.mobile-menu { position: fixed; inset: 0; z-index: 100; background: rgba(8, 8, 8, .97); display: flex; align-items: center; justify-content: center; }
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.mobile-menu nav a:not(.btn) { font: 18px var(--f-head); text-transform: uppercase; letter-spacing: var(--track); color: var(--champagne); }
.mobile-menu .btn { margin-top: 16px; }
.menu-close { position: absolute; top: 24px; right: 20px; color: var(--gold); padding: 8px; }

/* ---------- Imagery: the shade treatment ----------
   Every photo sits in shadow: low exposure, muted colour, warm cast,
   a vignette and grain. On hover it warms a little, like a candle moving closer. */
.shade { position: relative; margin: 0; overflow: hidden; background: var(--onyx); }
.shade img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.58) saturate(.72) contrast(1.1) sepia(.18); transition: filter 1.4s var(--ease), transform 1.6s var(--ease); }
.shade::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 45%, transparent 35%, rgba(8, 8, 8, .55) 75%, rgba(8, 8, 8, .92) 100%); }
a:hover .shade img, .shade:hover img { filter: brightness(.74) saturate(.85) contrast(1.08) sepia(.12); transform: scale(1.03); }
.js .shade img { opacity: 0; transition: opacity 1.8s var(--ease), filter 1.4s var(--ease), transform 1.6s var(--ease); }
.js .shade.is-seen img { opacity: 1; }

.framed { aspect-ratio: 4 / 5; }
.framed.wide { aspect-ratio: 4 / 3; }
.framed::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(197, 160, 89, .2); z-index: 2; pointer-events: none; }

/* ---------- Sections ---------- */
.band { padding: clamp(88px, 11vw, 144px) 0; border-top: 1px solid rgba(197, 160, 89, .1); position: relative; }
.band.flush { padding: 0; }
.section-head { text-align: center; margin-bottom: 64px; }
.section-head .sub { color: var(--text-dim); max-width: 36em; margin: 24px auto 0; }
.est { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
.diamond { width: 5px; height: 5px; background: var(--muted-gold); transform: rotate(45deg); }

/* Hero (home) */
.home-hero { position: relative; height: 100svh; min-height: 640px; display: grid; place-items: start center; overflow: hidden; }
.hero-media, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(rgba(8,8,8,.6), transparent 40%, rgba(8,8,8,.75)),
  radial-gradient(135% 120% at 50% 48%, transparent 50%, rgba(8,8,8,.6) 100%); }
.hero-copy { position: relative; z-index: 2; text-align: center; padding: 80px var(--pad) 0; }
/* Sit the title in the upper part of the frame, above the glass and bottle */
.home-hero .hero-copy { padding-top: clamp(92px, 12.5vh, 150px); transition: opacity 1.8s var(--ease), filter 1.8s var(--ease); }
.home-hero .eyebrow { margin-bottom: 14px; }
.home-hero .h-display { font-size: clamp(38px, 6.4vw, 84px); margin-bottom: 14px; }
/* Hero lines: set in Marcellus, the logo's face. Shown one at a time, in step with the pour.
   Without script, with reduced motion, or if the video can't play, both lines show together. */
.hero-lines { display: grid; margin: 4px 0 30px; font-family: "Marcellus", var(--f-head); font-size: clamp(32px, 5.4vw, 70px); line-height: 1.12; letter-spacing: .03em; color: var(--champagne); text-shadow: 0 2px 24px rgba(8,8,8,.75); }
.hero-line { display: block; }
.js .hero-copy.is-timed .hero-line { grid-area: 1 / 1; }
.js .hero-copy.is-timed .hero-timed { opacity: 0; filter: blur(3px); pointer-events: none; transition: opacity 1.4s cubic-bezier(.45,0,.25,1), filter 1.4s cubic-bezier(.45,0,.25,1), background .5s, color .5s, box-shadow .5s; }
.js .hero-copy.is-timed .hero-timed.is-on { opacity: 1; filter: blur(0); pointer-events: auto; }
.js .hero-copy.is-timed > .hero-timed { animation: none; } /* hand control from the load animation to the video */
.home-hero .btn { padding: 13px 30px; }
/* Closing frame. The scene dims and the logo drifts in from slightly larger, holds on the final
   frame, then keeps drifting forward as it fades and the scene goes to black. The video restarts
   under the black and fades back up, so the loop has no hard cut. */
.hero-endframe { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px, 4vh, 40px); padding: 0 var(--pad); pointer-events: none;
  opacity: 0; transform: scale(1.14); }
.endframe-inner { position: relative; }
.hero-endframe img { position: relative; display: block; width: min(780px, 88vw, 92vh); height: auto; }
.endframe-btn { position: absolute; left: 50%; top: calc(100% + clamp(20px, 4vh, 36px)); transform: translateX(-50%); white-space: nowrap; }
/* The button arrives a beat after the logo, beneath it */
.endframe-btn { opacity: 0; transition: opacity 1.2s cubic-bezier(.45,0,.25,1), background .5s, color .5s, box-shadow .5s; }
.home-hero.is-end .endframe-btn { opacity: 1; pointer-events: auto; transition: opacity 2s cubic-bezier(.45,0,.25,1) 1.8s, background .5s, color .5s, box-shadow .5s; }
.home-hero.is-out .endframe-btn { pointer-events: none; }
/* Without the timed sequence (no script, reduced motion, video can't play) the button sits under the lines */
.js .hero-copy.is-timed .hero-static-btn { display: none; }
/* a faint warm light behind the logo so the gold reads against the darkened scene */
.hero-endframe::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(900px, 120vw); aspect-ratio: 16 / 9; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(230,194,128,.12), rgba(230,194,128,.04) 55%, transparent 100%); }
.home-hero.is-end .hero-endframe { opacity: 1; transform: scale(1);
  transition: opacity 3.2s cubic-bezier(.45,0,.25,1), transform 7s cubic-bezier(.2,.6,.2,1); }
.home-hero.is-out .hero-endframe { opacity: 0; transform: scale(.94);
  transition: opacity 2.8s cubic-bezier(.45,0,.25,1), transform 3.4s cubic-bezier(.45,0,.55,1); }
.home-hero.is-reset .hero-endframe { transition: none; }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--onyx); opacity: 0; transition: opacity 2.4s cubic-bezier(.45,0,.25,1); }
.home-hero.is-end .hero-media::before { opacity: .86; transition: opacity 3.4s cubic-bezier(.45,0,.25,1); }
.home-hero.is-out .hero-media::before { opacity: 1; transition: opacity 2.8s cubic-bezier(.45,0,.25,1); }
/* Once the bottle is set down, the title withdraws into the dark */
.home-hero .hero-copy.is-gone { opacity: 0; filter: blur(6px); pointer-events: none; }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; font: 9px var(--f-head); letter-spacing: var(--track); text-transform: uppercase; color: rgba(138, 115, 62, .7); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-cue::after { content: ""; width: 1px; height: 40px; background: linear-gradient(rgba(197,160,89,.5), transparent); }
/* the one page-load sequence: the house name surfaces from the dark */
.js .hero-load > * { opacity: 0; animation: surface 1.6s var(--ease) forwards; }
.js .hero-load > :nth-child(2) { animation-delay: .25s; filter: blur(6px); animation-name: surface-blur; animation-duration: 2.2s; }
.js .hero-load > :nth-child(3) { animation-delay: .9s; }
.js .hero-load > :nth-child(4) { animation-delay: 1.1s; }
.js .hero-load > :nth-child(5) { animation-delay: 1.4s; }
@keyframes surface { to { opacity: 1; } }
@keyframes surface-blur { to { opacity: 1; filter: blur(0); } }

/* Page heroes */
.page-hero { position: relative; height: 72svh; min-height: 520px; display: grid; place-items: center; overflow: hidden; }
.hero-img { position: absolute; inset: 0; }
.hero-img img { filter: brightness(.42) saturate(.7) contrast(1.1) sepia(.2); }
.hero-img::after { background: linear-gradient(to top, var(--onyx), rgba(8,8,8,.25) 50%, rgba(8,8,8,.55)), radial-gradient(120% 95% at 50% 45%, transparent 40%, rgba(8,8,8,.8) 100%); }
.page-hero .rule { margin-bottom: 0; }
.page-hero .lede { margin-top: 24px; }

/* Cells (grids with hairlines) */
.cells { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cell { background: var(--onyx); padding: 56px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cell p:not(.eyebrow):not(.step) { color: var(--text-dim); line-height: 1.7; max-width: 22em; margin-top: 16px; }
.cell.left { text-align: left; align-items: flex-start; }
.cell-icon { margin-bottom: 28px; opacity: .9; }
.step { font-size: 12px; color: var(--muted-gold); margin-bottom: 16px; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.table-cell { padding: 48px 24px; }
.table-cell .eyebrow { margin-bottom: 16px; }
.pair { font-size: 12px; letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--muted-gold) !important; }
.pair span { display: block; font-family: var(--f-head); text-transform: none; letter-spacing: .04em; font-size: 14px; color: var(--gold); margin-top: 6px; }
@media (max-width: 520px) { .table-cell { padding: 36px 14px; } .h-item { font-size: 13px; } }

/* Split media (home) */
.split-media { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .split-media { grid-template-columns: 1fr 1fr; } .media-tile + .media-tile { border-left: 1px solid var(--line); } }
.media-tile { position: relative; display: block; height: 70vh; min-height: 420px; }
.media-tile .shade { position: absolute; inset: 0; }
.tile-copy { position: absolute; left: 40px; bottom: 40px; z-index: 2; }
.tile-copy .eyebrow { display: block; font-size: 10px; margin-bottom: 12px; }
.quote { margin: 0 auto; padding: 88px var(--pad); text-align: center; max-width: 900px; font: italic 400 clamp(24px, 3vw, 32px)/1.5 var(--f-display); color: rgba(230, 194, 128, .85); }
.quote::before { content: "“"; } .quote::after { content: "”"; }

/* ---------- The candle: the signature moment ---------- */
.candle { position: relative; min-height: 88svh; display: grid; place-items: center; overflow: hidden; border-top: 1px solid rgba(197,160,89,.1); --x: 50%; --y: 55%; --r: 34vmax; }
.candle-media, .candle-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.candle-dark { filter: brightness(.16) saturate(.4) sepia(.3); }
.candle-lit {
  filter: brightness(.95) saturate(.9) sepia(.15) contrast(1.05);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0,0,0,.55) 35%, transparent 70%);
          mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0,0,0,.55) 35%, transparent 70%);
}
.candle-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(8,8,8,.15), rgba(8,8,8,.75)); }
.candle-copy { position: relative; z-index: 2; text-align: center; padding: 120px var(--pad); max-width: 720px; }
.candle-copy .lede { margin: 24px 0 44px; }
.candle-copy .h-section { text-shadow: 0 2px 24px rgba(8,8,8,.9); }

.cta-band { background: radial-gradient(circle at 50% 0, rgba(11, 27, 21, .6), transparent 60%); padding: clamp(120px, 14vw, 176px) 0; }
.cta-band .lede { margin: 32px 0 48px; }

/* Two-column */
.two-col { display: grid; gap: 64px; align-items: center; }
.two-col.top { align-items: start; }
.two-col > * { min-width: 0; }
@media (min-width: 1024px) {
  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col.reverse > :first-child { order: 1; }
  .two-col.reverse > :last-child { order: 2; }
}
.two-col .h-section { margin-bottom: 32px; }
.prose p { color: var(--text); line-height: 1.75; margin-bottom: 20px; max-width: 34em; }

.split { display: grid; }
.split-img { height: 60vh; min-height: 380px; }
.split-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 72px var(--pad); }
.split-copy .h-section { margin-bottom: 24px; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } .split-img { height: 80vh; } .split-copy { padding: 0 56px; } }

/* Gallery */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery-tile { position: relative; margin: 0; aspect-ratio: 3 / 4; }
.gallery-tile .shade { position: absolute; inset: 0; }
.gallery-tile figcaption { position: absolute; left: 16px; bottom: 16px; z-index: 2; font: 10px var(--f-head); letter-spacing: var(--track); text-transform: uppercase; color: var(--champagne); }
.gallery-tile[hidden] { display: none; }

/* ---------- Tasting room menu ---------- */
.price-key { text-align: center; color: var(--text-dim); font-size: 13px; margin: -24px 0 56px; }
.menu-panel[hidden] { display: none; }
.menu-section { margin-bottom: 64px; }
.menu-head { text-align: center; margin-bottom: 24px; }
.menu-note { color: var(--text-dim); font-size: 14px; max-width: 40em; margin: 10px auto 0; line-height: 1.7; }
.prices, .col-heads > div { display: flex; gap: 14px; font-variant-numeric: tabular-nums; }
.col-heads { display: grid; padding: 0 0 8px; font: 10px var(--f-head); letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--muted-gold); }
.col-heads > div { justify-content: flex-end; padding: 0 32px; }
.col-heads .dup { display: none; }
.col-heads span, .price { width: 52px; text-align: right; flex: none; }
.menu-grid { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 900px) {
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .menu-grid.single { grid-template-columns: 1fr; }
  .col-heads { grid-template-columns: 1fr 1fr; }
  .col-heads .dup { display: flex; }
}
.menu-item { background: var(--onyx); padding: 28px 32px; transition: background .5s; box-shadow: inset -1px -1px 0 var(--line); }
.menu-item:hover { background: rgba(11, 27, 21, .4); }
.item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.item-top .h-item { font-size: clamp(14px, 1.5vw, 17px); }
.prices { font-family: var(--f-body); font-size: 15px; color: var(--gold); white-space: nowrap; }
.price-na { color: rgba(138, 115, 62, .5); }
.price-word { font: 10px var(--f-head); letter-spacing: var(--track); text-transform: uppercase; color: var(--gold); }
.item-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; }
.item-meta p { color: var(--text-dim); font-size: 14px; }
.item-meta span { font-size: 12px; color: var(--muted-gold); white-space: nowrap; }
@media (max-width: 600px) { .menu-item { padding: 24px 20px; } .col-heads > div { padding: 0 20px; } .col-heads span, .price { width: 40px; } .item-top { flex-direction: column; gap: 8px; } .prices { align-self: flex-end; } }
.menu-download { margin-top: 24px; }

/* ---------- Library ---------- */
.lib-tools { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
@media (min-width: 1024px) { .lib-tools { flex-direction: row; justify-content: space-between; align-items: center; } }
.search { flex: 1; max-width: 440px; }
.search input, .field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(197, 160, 89, .28); padding: 12px 2px;
  color: var(--champagne); font: 14px var(--f-body); border-radius: 0; transition: border-color .3s; -webkit-appearance: none; appearance: none;
}
.search input::placeholder, .field ::placeholder { color: rgba(138, 115, 62, .7); }
.search input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.bottles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 1024px) { .bottles { grid-template-columns: repeat(4, 1fr); } }
.bottle[hidden] { display: none; }
.bottle-btn { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; text-align: left; background: rgba(11, 27, 21, .6); border: 1px solid var(--line); transition: border-color .5s; }
.bottle-btn img { width: 100%; height: 100%; object-fit: cover; opacity: .82; filter: saturate(.85) brightness(.95); transition: opacity .6s, filter .6s; }
.bottle-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,8,.92), rgba(8,8,8,.15) 50%, transparent); }
.bottle-btn:hover, .bottle-btn:focus-visible { border-color: rgba(197, 160, 89, .45); }
.bottle-btn:hover img, .bottle-btn:focus-visible img { opacity: 1; filter: saturate(1) brightness(1.05); }
.bottle-locked { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(197,160,89,.12), rgba(11,27,21,.7) 70%); color: var(--muted-gold); }
.bottle-locked .ic { margin-bottom: 40px; transition: color .5s; }
.bottle-locked .bottle-copy .h-item { color: rgba(230,194,128,.75); }
.bottle-locked:hover .ic { color: var(--gold); }
/* Library sits a step brighter than the rest of the house: the bottles are the point here */
.page-library .shade img { filter: brightness(.72) saturate(.85) contrast(1.06) sepia(.12); }
.page-library .hero-img img { filter: brightness(.6) saturate(.82) contrast(1.06) sepia(.14); }
.page-library .hero-img::after { background: linear-gradient(to top, var(--onyx), rgba(8,8,8,.1) 50%, rgba(8,8,8,.4)), radial-gradient(120% 95% at 50% 45%, transparent 45%, rgba(8,8,8,.7) 100%); }
.expedition { background: radial-gradient(60% 70% at 50% 50%, rgba(197,160,89,.1), transparent 70%), radial-gradient(circle at 50% 0, rgba(11,27,21,.7), transparent 60%); }
.expedition .lede { margin: 28px 0 24px; }
.expedition .body-lg { max-width: 34em; margin: 0 auto; }
.exp-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin: 36px 0 44px; font: 11px var(--f-head); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted-gold); }
.bottle-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.bottle-copy .h-item { font-size: 13px; }
.bottle-year { font-size: 12px; color: var(--muted-gold); letter-spacing: .06em; }
.empty { text-align: center; color: var(--text-dim); padding: 48px 0; }
.by-appt { display: flex; align-items: center; gap: 12px; font: 10px var(--f-head); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted-gold); }

.bottle-modal { padding: 0; border: 1px solid rgba(197, 160, 89, .3); background: var(--velvet); color: var(--champagne); max-width: 760px; width: calc(100% - 32px); max-height: calc(100svh - 32px); }
.bottle-modal::backdrop { background: rgba(8, 8, 8, .85); backdrop-filter: blur(4px); }
.modal-inner { display: grid; }
@media (min-width: 640px) { .modal-inner { grid-template-columns: 1fr 1fr; } }
.modal-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.modal-body { padding: 32px; position: relative; }
.modal-close { position: absolute; top: 16px; right: 16px; color: var(--muted-gold); padding: 6px; }
.modal-close:hover { color: var(--gold); }
.modal-body .body { margin-bottom: 24px; }
.radar { width: 100%; max-width: 240px; display: block; margin: 8px auto 0; color: var(--gold); overflow: visible; }

/* ---------- Contact ---------- */
.info { display: flex; flex-direction: column; gap: 28px; }
.info li { display: flex; gap: 16px; color: rgba(230, 194, 128, .82); font-size: 14px; }
.info .ic { color: var(--muted-gold); flex: none; margin-top: 2px; }
.map { margin-top: 40px; aspect-ratio: 16 / 10; border: 1px solid var(--line); overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) sepia(.3) contrast(.9); }
.form { display: flex; flex-direction: column; gap: 28px; }
.row { display: grid; gap: 28px; }
@media (min-width: 640px) { .row { grid-template-columns: 1fr 1fr; } }
.field { display: block; border: 0; margin: 0; padding: 0; min-width: 0; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted-gold) 50%), linear-gradient(135deg, var(--muted-gold) 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--onyx); }
.field textarea { resize: vertical; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid .dates { border-color: #c4705a; }
.dates { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; border-bottom: 1px solid transparent; }
.dates::-webkit-scrollbar { display: none; }
.date { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px; border: 1px solid rgba(197, 160, 89, .2); color: var(--muted-gold); font: 10px var(--f-head); letter-spacing: var(--track-sm); text-transform: uppercase; transition: all .3s; }
.date strong { font: 400 18px var(--f-head); letter-spacing: .05em; color: var(--champagne); }
.date:hover { color: var(--gold); }
.date[aria-pressed="true"] { border-color: var(--gold); background: rgba(197, 160, 89, .1); color: var(--champagne); }
.form-msg { font-size: 14px; color: var(--champagne); min-height: 0; }
.form-msg.is-error { color: #e3a08a; }
.form .btn { align-self: flex-start; }
.form .btn[disabled] { opacity: .5; cursor: wait; }
@media (max-width: 640px) { .form .btn { align-self: stretch; } }

.faqs { border: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq:last-child { border-bottom: 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq-ic { color: var(--muted-gold); transition: transform .4s var(--ease); flex: none; }
.faq[open] .faq-ic { transform: rotate(45deg); }
.faq p { padding: 0 24px 24px; color: var(--text-dim); font-size: 14px; line-height: 1.75; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 80px 0 40px; }
.footer-grid { display: grid; gap: 48px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 2fr 1fr; } }
.footer-blurb { margin-top: 20px; font-size: 14px; color: rgba(138, 115, 62, .85); line-height: 1.7; max-width: 22em; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.footer-links a, .footer-line { font-size: 14px; color: rgba(230, 194, 128, .7); transition: color .3s; }
.footer-links a:hover, a.footer-line:hover { color: var(--gold); }
.footer-line { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.footer-line .ic { flex: none; margin-top: 3px; }
.site-footer .divider { margin: 56px 0 24px; }
.footer-base { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
@media (min-width: 640px) { .footer-base { flex-direction: row; justify-content: space-between; text-align: left; } }
.fine { font-size: 11px; letter-spacing: var(--track-sm); text-transform: uppercase; color: rgba(138, 115, 62, .7); }
.fine.dim { font-size: 9px; color: rgba(138, 115, 62, .4); margin-top: 4px; }
.fine.heading { font-size: 10px; color: rgba(138, 115, 62, .5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .hero-load > * { opacity: 1; filter: none; }
}
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }