:root{
  --paper: #faf7f1;
  --paper-deep: #efe6d8;
  --ink: #18140f;
  --ink-70: rgba(24,20,15,0.7);
  --ink-45: rgba(24,20,15,0.45);
  --ink-15: rgba(24,20,15,0.15);
  --bordeaux: #7d2c3a;
  --bordeaux-deep: #56202b;
  --bordeaux-10: rgba(125,44,58,0.1);
  --serif: 'Fraunces', serif;
  --sans: 'Manrope', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100%;
}

body{ overflow-x:hidden; }

button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul{ list-style:none; }

/* ---------- BACKDROP STAGE ---------- */
.stage{
  position:fixed; inset:0; z-index:0;
  width:100vw; height:100vh;
  pointer-events:none;
}
.stage__panel-a{ fill:var(--paper-deep); }
.stage__panel-b{ fill:var(--bordeaux-10); }
.stage__thread{ fill:none; stroke:var(--bordeaux); stroke-width:1.5; stroke-linecap:round; opacity:0.55; }

/* ---------- TOPBAR ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:2.2rem clamp(1.5rem, 5vw, 4rem);
}
.topbar__mark{
  font-family:var(--serif); font-weight:560; font-size:1.05rem;
  letter-spacing:0.14em;
}
.bag-toggle{
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  border:1px solid var(--ink-15); border-radius:30px;
  padding:0.55rem 1.1rem;
  transition:border-color .3s ease;
}
.bag-toggle[hidden]{ display:none; }

.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-link{
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-70); transition:color .25s ease;
}
.nav-link:hover{ color:var(--bordeaux); }
.bag-toggle:hover{ border-color:var(--bordeaux); }
.bag-toggle__count{
  min-width:18px; height:18px; padding:0 4px;
  border-radius:50%; background:var(--bordeaux); color:var(--paper);
  font-size:0.66rem; display:flex; align-items:center; justify-content:center;
}

/* ---------- SCENES ---------- */
main{ position:relative; z-index:2; }
.scene{
  min-height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:8rem clamp(1.5rem, 6vw, 5rem) 5rem;
}
.scene[hidden]{ display:none; }

/* ---------- WELCOME ---------- */
.welcome{ max-width:640px; text-align:center; }
.welcome__kicker{
  font-size:0.72rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--bordeaux); margin-bottom:1.75rem;
}
.welcome__title{
  font-family:var(--serif); font-weight:450; font-size:clamp(2.6rem, 7vw, 4.6rem);
  line-height:1.08; letter-spacing:-0.01em; margin-bottom:1.75rem;
}
.welcome__title em{ font-style:italic; color:var(--bordeaux); font-weight:400; }
.welcome__lede{
  font-size:1.05rem; line-height:1.65; color:var(--ink-70);
  max-width:440px; margin:0 auto 2.75rem;
}

.btn-text{
  display:block; margin:1.75rem auto 0;
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-45); border-bottom:1px solid var(--ink-15); padding-bottom:3px;
  transition:color .3s ease, border-color .3s ease;
}
.btn-text:hover{ color:var(--bordeaux); border-color:var(--bordeaux); }

.btn{
  font-family:var(--sans); font-weight:600;
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  padding:1.05rem 2.75rem;
  border-radius:2px;
}
.btn--primary{
  background:var(--ink); color:var(--paper);
  transition:background .35s ease, transform .25s ease;
}
.btn--primary:hover{ background:var(--bordeaux); transform:translateY(-1px); }
.btn--ghost{
  border:1px solid var(--ink-15); color:var(--ink-70);
  transition:border-color .3s ease, color .3s ease;
}
.btn--ghost:hover{ border-color:var(--bordeaux); color:var(--bordeaux); }
.btn--block{ width:100%; text-align:center; }
.btn:disabled{ opacity:0.35; pointer-events:none; }

/* ---------- QUIZ ---------- */
.quiz{ max-width:700px; width:100%; text-align:center; }
.quiz__rail{
  display:flex; gap:0.5rem; justify-content:center; margin-bottom:3rem;
}
.quiz__rail-seg{
  width:36px; height:2px; background:var(--ink-15); border-radius:2px; overflow:hidden;
}
.quiz__rail-fill{ height:100%; width:0%; background:var(--bordeaux); }

.quiz__kicker{
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--bordeaux); margin-bottom:1.25rem; display:block;
}
.quiz__prompt{
  font-family:var(--serif); font-weight:450;
  font-size:clamp(1.7rem, 4.4vw, 2.6rem); line-height:1.18;
  margin-bottom:0.6rem;
}
.quiz__sub{
  font-style:italic; font-family:var(--serif); font-weight:400;
  color:var(--ink-45); font-size:1rem; margin-bottom:3rem;
}
.quiz__options{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:1rem;
}
.quiz__option{
  border:1px solid var(--ink-15);
  padding:1.35rem 1.5rem;
  font-size:0.95rem; font-weight:500;
  text-align:left;
  border-radius:2px;
  transition:border-color .3s ease, background .3s ease, transform .2s ease;
}
.quiz__option:hover{
  border-color:var(--bordeaux);
  background:var(--bordeaux-10);
  transform:translateY(-2px);
}
.quiz__option.is-selected{
  border-color:var(--bordeaux); background:var(--bordeaux-10); color:var(--bordeaux-deep);
}
.quiz__back{
  margin-top:2.75rem;
  font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-45);
}
.quiz__back:hover{ color:var(--bordeaux); }

/* ---------- LOADING ---------- */
.loading{ text-align:center; }
.loading__ring{ width:96px; height:96px; transform:rotate(-90deg); margin-bottom:1.75rem; }
.loading__ring-track{ fill:none; stroke:var(--ink-15); stroke-width:1.5; }
.loading__ring-fill{
  fill:none; stroke:var(--bordeaux); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:276.5; stroke-dashoffset:276.5;
}
.loading__text{
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--ink-70);
}

/* ---------- RESULTS ---------- */
.results{ max-width:1180px; width:100%; }
.results__head{ text-align:center; margin-bottom:4.5rem; }
.results__kicker{
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--bordeaux); display:block; margin-bottom:1rem;
}
.results__head h2{
  font-family:var(--serif); font-weight:450; font-size:clamp(2rem, 4.6vw, 3rem);
}
.results__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2.25rem;
  margin-bottom:3.5rem;
}
.result-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:2.5rem 1.5rem 2rem;
  border:1px solid var(--ink-15);
}
.result-card__rank{
  font-size:0.68rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--bordeaux); margin-bottom:1.75rem;
}
.result-card__bottle{ height:170px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:1.75rem; }
.result-card__bottle img{ max-height:170px; max-width:130px; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(24,20,15,0.12)); }
.result-card__brand{
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-45);
  margin-bottom:0.35rem;
}
.result-card__name{ font-family:var(--serif); font-weight:500; font-size:1.55rem; margin-bottom:0.6rem; }
.result-card__family{ font-family:var(--serif); font-style:italic; color:var(--bordeaux); font-size:0.95rem; margin-bottom:1rem; }
.result-card__blurb{ font-size:0.85rem; line-height:1.6; color:var(--ink-70); margin-bottom:1.75rem; }
.results__foot{ text-align:center; }

/* ---------- SHOP ALL ---------- */
.shop{ max-width:1220px; width:100%; }
.shop__head{ text-align:center; margin-bottom:1rem; }
.shop__head h2{ font-family:var(--serif); font-weight:450; font-size:clamp(2rem, 4.6vw, 3rem); margin-bottom:2rem; }
.shop__controls{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.shop__search{
  width:100%; max-width:440px;
  background:transparent; border:1px solid var(--ink-15); border-radius:2px;
  font-family:var(--sans); font-size:0.95rem; color:var(--ink);
  padding:0.85rem 1.15rem;
}
.shop__search:focus{ outline:none; border-color:var(--bordeaux); }
.shop__search::placeholder{ color:var(--ink-45); }
.shop__filters{ display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; }
.shop__filter{
  border:1px solid var(--ink-15); border-radius:20px;
  padding:0.5rem 1.15rem; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-70); transition:all .25s ease;
}
.shop__filter:hover{ border-color:var(--bordeaux); color:var(--bordeaux); }
.shop__filter.is-active{ border-color:var(--bordeaux); background:var(--bordeaux-10); color:var(--bordeaux-deep); }

.shop__count{ text-align:center; font-size:0.78rem; color:var(--ink-45); margin:2.25rem 0 1.5rem; }
.shop__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:1.5rem;
}
.shop-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:2rem 1.25rem 1.5rem; border:1px solid var(--ink-15);
  transition:border-color .3s ease, transform .25s ease;
}
.shop-card:hover{ border-color:var(--bordeaux); transform:translateY(-3px); }
.shop-card__bottle{ height:130px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:1.25rem; }
.shop-card__bottle img{ max-height:130px; max-width:100px; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(24,20,15,0.12)); }
.shop-card__brand{ font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-45); margin-bottom:0.3rem; }
.shop-card__name{ font-family:var(--serif); font-weight:500; font-size:1.1rem; margin-bottom:0.3rem; }
.shop-card__family{ font-family:var(--serif); font-style:italic; color:var(--bordeaux); font-size:0.8rem; margin-bottom:0.7rem; }
.shop-card__price{ font-size:0.82rem; color:var(--ink-70); }
.shop__empty{ text-align:center; color:var(--ink-45); font-family:var(--serif); font-style:italic; margin-top:3rem; }

/* ---------- DETAIL / CHECKOUT OVERLAY ---------- */
.overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--paper);
  overflow-y:auto;
  padding:7rem clamp(1.5rem, 6vw, 5rem) 5rem;
  display:flex; justify-content:center;
}
.overlay[hidden]{ display:none; }
.overlay__close{
  position:fixed; top:2.2rem; right:clamp(1.5rem, 5vw, 4rem); z-index:201;
  font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-45); border-bottom:1px solid var(--ink-15); padding:0.3rem 0.1rem 2px;
  background:var(--paper);
}
.overlay__close:hover{ color:var(--bordeaux); border-color:var(--bordeaux); }
.overlay__panel{ max-width:820px; width:100%; }

.detail{ display:grid; grid-template-columns:280px 1fr; gap:3.5rem; align-items:start; }
.detail__bottle{ display:flex; justify-content:center; }
.detail__bottle img{ max-width:100%; max-height:340px; object-fit:contain; filter:drop-shadow(0 24px 28px rgba(24,20,15,0.14)); }
.detail__eyebrow{ font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-45); display:block; margin-bottom:0.6rem; }
.detail__title{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4vw,2.7rem); margin-bottom:0.4rem; }
.detail__family{ font-family:var(--serif); font-style:italic; color:var(--bordeaux); font-size:1.1rem; margin-bottom:1.5rem; }
.detail__desc{ color:var(--ink-70); line-height:1.75; margin-bottom:2rem; max-width:52ch; }

.notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2.25rem; }
.notes h4{
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--bordeaux);
  border-bottom:1px solid var(--ink-15); padding-bottom:0.7rem; margin-bottom:0.85rem;
}
.notes li{ font-family:var(--serif); font-size:1rem; color:var(--ink-70); margin-bottom:0.45rem; }

.meta-row{ display:flex; flex-wrap:wrap; gap:2rem; border-top:1px solid var(--ink-15); padding-top:1.75rem; margin-bottom:1.75rem; }
.meta-row div span{ display:block; }
.meta-row .meta-label{ font-size:0.65rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-45); margin-bottom:0.35rem; }
.meta-row .meta-value{ font-family:var(--serif); font-size:1.1rem; }

.size-row{ display:flex; flex-wrap:wrap; gap:0.85rem; margin-bottom:1.75rem; }
.size-pill{
  border:1px solid var(--ink-15); padding:0.75rem 1.15rem;
  font-size:0.85rem; border-radius:2px; transition:all .25s ease;
}
.size-pill:hover{ border-color:var(--bordeaux); }
.size-pill.is-selected{ border-color:var(--bordeaux); background:var(--bordeaux-10); color:var(--bordeaux-deep); }
.size-pill b{ color:var(--bordeaux); }

.detail__add.is-added{ background:transparent; color:var(--bordeaux); border:1px solid var(--bordeaux); }

/* ---------- BAG DRAWER ---------- */
.scrim{
  position:fixed; inset:0; z-index:210; background:rgba(24,20,15,0.35);
}
.scrim[hidden]{ display:none; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:220;
  width:min(420px, 92vw);
  background:var(--paper);
  border-left:1px solid var(--ink-15);
  display:flex; flex-direction:column;
  padding:2.5rem 2.25rem;
}
.drawer[hidden]{ display:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.drawer__head h2{ font-family:var(--serif); font-weight:500; font-size:1.4rem; }
.overlay__close--drawer{ position:static; }
.drawer__items{ flex:1; overflow-y:auto; }
.drawer-item{ display:flex; gap:1rem; align-items:center; padding:1.15rem 0; border-bottom:1px solid var(--ink-15); }
.drawer-item__bottle{ width:36px; height:60px; object-fit:contain; flex-shrink:0; }
.drawer-item__info{ flex:1; }
.drawer-item__name{ font-family:var(--serif); font-size:1.05rem; }
.drawer-item__meta{ font-size:0.78rem; color:var(--ink-45); margin-top:0.15rem; }
.drawer-item__price{ font-family:var(--serif); color:var(--bordeaux); white-space:nowrap; }
.drawer-item__remove{ font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-45); margin-top:0.4rem; }
.drawer-item__remove:hover{ color:var(--bordeaux); }
.drawer-empty{ text-align:center; color:var(--ink-45); font-family:var(--serif); font-style:italic; margin-top:3rem; }
.drawer__foot{ border-top:1px solid var(--ink-15); padding-top:1.5rem; }
.drawer__subtotal{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--serif); font-size:1.25rem; margin-bottom:1.25rem; }
.drawer__subtotal span:last-child{ color:var(--bordeaux); }

/* ---------- CHECKOUT ---------- */
.checkout-summary{ border-top:1px solid var(--ink-15); border-bottom:1px solid var(--ink-15); padding:1.5rem 0; margin:2rem 0; }
.checkout-summary-row{ display:flex; justify-content:space-between; font-size:0.92rem; color:var(--ink-70); margin-bottom:0.6rem; }
.checkout-total{ font-family:var(--serif); font-size:1.3rem; color:var(--bordeaux); margin-top:0.75rem; }
.checkout-form{ display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; margin-bottom:2.25rem; }
.checkout-form .full{ grid-column:1 / -1; }
.checkout-form label{ display:block; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-45); margin-bottom:0.5rem; }
.checkout-form input{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--ink-15);
  font-family:var(--sans); font-size:0.98rem; padding:0.5rem 0; color:var(--ink);
}
.checkout-form input:focus{ outline:none; border-color:var(--bordeaux); }
.checkout-confirm{ text-align:center; padding:3rem 0; }
.checkout-confirm__mark{
  width:60px; height:60px; border:1px solid var(--bordeaux); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.75rem;
  font-family:var(--serif); font-size:1.6rem; color:var(--bordeaux);
}
.checkout-confirm h2{ font-family:var(--serif); font-weight:500; font-size:2rem; margin-bottom:0.75rem; }
.checkout-confirm p{ color:var(--ink-70); margin-bottom:0.4rem; }
.checkout-confirm .order-no{ font-family:var(--serif); font-style:italic; color:var(--bordeaux); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .results__grid{ grid-template-columns:1fr; max-width:400px; margin-inline:auto; }
  .detail{ grid-template-columns:1fr; }
  .detail__bottle img{ max-height:220px; }
  .nav-links{ gap:1.25rem; }
}
@media (max-width:640px){
  .notes{ grid-template-columns:1fr; }
  .checkout-form{ grid-template-columns:1fr; }
  .quiz__options{ grid-template-columns:1fr; }

  .topbar{ padding:1.5rem 1.25rem; flex-wrap:wrap; row-gap:0.75rem; }
  .topbar__mark{ font-size:0.92rem; }
  .bag-toggle{ padding:0.5rem 0.9rem; }
  .nav-links{ order:3; width:100%; justify-content:center; gap:1.5rem; }

  .shop__grid{ grid-template-columns:repeat(2, 1fr); gap:1rem; }
  .shop-card{ padding:1.5rem 0.85rem 1.25rem; }
  .shop-card__bottle{ height:100px; }
  .shop-card__bottle img{ max-height:100px; max-width:80px; }

  .scene{ padding:6.5rem 1.25rem 3.5rem; }
  .welcome__lede{ margin-bottom:2.25rem; }
  .btn{ padding:1rem 2.25rem; }

  .quiz__rail{ margin-bottom:2.25rem; }
  .quiz__rail-seg{ width:26px; }
  .quiz__prompt{ margin-bottom:0.5rem; }
  .quiz__sub{ margin-bottom:2.25rem; }

  .results__head{ margin-bottom:3rem; }
  .result-card{ padding:2rem 1.25rem 1.75rem; }

  .overlay{ padding:6rem 1.25rem 3.5rem; }
  .overlay__close{ top:1.5rem; right:1.25rem; }
  .drawer{ padding:2rem 1.5rem; }

  /* the corner panels are tuned for a 1600x1000 canvas; on tall narrow
     screens they crop in unpredictably, so ease them back to keep the
     option list and body copy reading clearly against plain paper. */
  .stage__panel-a{ opacity:0.6; }
  .stage__panel-b{ opacity:0.45; }
}