/* Broken Compass art direction.
   Layered over style.css. Dark cinematic hero, kinetic type, scroll reveals,
   the Evidence Signature, a custom cursor and a live compass. Everything here
   is progressive: with no JS or reduced motion the base style.css still stands.*/

:root{
  --night:#0b1a13;      /* deep dark green, not black */
  --night-2:#12261b;
  --bone:#efe7d6;
  --bone-soft:#c9c3b2;
}

/* ================= CURTAIN: intro + page transitions ================= */
#curtain{position:fixed;inset:0;z-index:9998;background:var(--night);
  display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;
  animation:curtainfail .8s 4s forwards}
@keyframes curtainfail{to{opacity:0;visibility:hidden}}
#curtain.gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility .7s}
#curtain.cover{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease}
.curtain-c{display:flex;flex-direction:column;align-items:center;gap:20px}
.curtain-n{color:var(--amber);letter-spacing:.34em;font-size:.72rem}
.cn-needle{transform-origin:60px 60px}

/* hide the native cursor only once ours is live */
body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  border-radius:50%;mix-blend-mode:difference;will-change:transform}
.cursor-dot{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.7);margin:-17px 0 0 -17px;
  transition:width .25s,height .25s,margin .25s,background .25s}
body.cursor-hot .cursor-ring{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(255,255,255,.08)}

/* ---- scroll reveal: CSS transition based, so it never depends on rAF ---- */
html.anim [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
html.anim [data-reveal].in{opacity:1;transform:none}
html.anim [data-reveal-x]{opacity:0;transform:translateX(30px)}
html.anim [data-hi]{opacity:0;transform:translateY(20px)}

/* ================= ANATOMY OF A SIGNATURE ================= */
.anatomy.band-dark{padding:0}
.anatomy-inner{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:84px 0 64px}
/* a soft pool of wine light behind the mark so the stage has a centre */
.anatomy-stage::before{content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(107,31,42,.28), rgba(209,122,58,.05) 55%, transparent 72%);
  pointer-events:none}
.anatomy-chart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(max-width:820px){.anatomy-chart{display:none}}
.anatomy-head{max-width:54ch}
.anatomy-head h2{margin:.2em 0 .3em}
.anatomy-stage{position:relative;align-self:center;width:min(92vw,820px);aspect-ratio:16/11;
  display:flex;align-items:center;justify-content:center;will-change:transform}
.anatomy-sig{width:min(46vw,360px);height:min(46vw,360px)}
.callout{position:absolute;width:230px}
.callout .co-k{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.callout .co-v{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--bone);margin:3px 0 6px}
.callout p{margin:0;font-size:.85rem;color:var(--bone-soft);line-height:1.45}
.callout[data-dir="l"]{text-align:right}
/* leader lines are drawn by the .anatomy-chart svg, landing on the mark */
.c-so2{top:0;right:2%}
.c-farm{top:20%;left:2%}
.c-needle{bottom:8%;right:0}
.c-weight{bottom:22%;left:0}

/* ---- kinetic split type ---- */
.wln{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.wln-i{display:inline-block;will-change:transform}

/* ================= CINEMATIC HERO ================= */
/* was a hard 100svh, which on a laptop pushed the headline and the buttons off
   the fold. It now asks for a comfortable height and caps itself, so the whole
   hero including the call to action fits on a smaller screen. */
.hero-cine{position:relative;min-height:min(88svh,760px);display:flex;align-items:flex-end;
  background:var(--night);color:var(--bone);overflow:hidden;
  border-bottom:1px solid rgba(239,231,214,.12)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero-cine::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 70% 20%,transparent 40%,rgba(10,13,11,.55) 100%),
             linear-gradient(180deg,rgba(10,13,11,.45) 0%,transparent 26%,transparent 60%,rgba(10,13,11,.9) 100%)}
/* the top padding was clearing a fixed 120px under the header and left a dead
   band of green above the orange kicker. It now scales with the viewport. */
.hero-cine .wrap{position:relative;z-index:3;width:100%;
  padding-top:clamp(78px,11vh,120px);
  padding-bottom:clamp(120px,18vh,210px)}
/* a scrim so the copy never has to fight the moving contour lines behind it */
.hero-cine .wrap::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-6%;bottom:-6%;left:-50vw;right:28%;
  background:linear-gradient(90deg,rgba(7,18,13,.94) 0%,rgba(7,18,13,.88) 62%,rgba(7,18,13,0) 100%)}
@media(max-width:760px){.hero-cine .wrap::before{right:-10%;
  background:linear-gradient(90deg,rgba(7,18,13,.92),rgba(7,18,13,.86) 70%,rgba(7,18,13,.55))}}
.hero-cine .kicker{font-family:var(--mono);font-size:clamp(.9rem,1.5vw,1.12rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:20px;
  max-width:none;font-weight:600}
/* the headline scaled on width alone, so a wide but short laptop screen got a
   7rem headline and the hero ran off the bottom. It now also answers to the
   height of the window, which is what actually runs out. */
.hero-cine h1{font-size:clamp(2.4rem,min(9vw,10.5vh),7.4rem);line-height:.98;letter-spacing:-.02em;
  color:var(--bone);max-width:14ch;margin:0 0 26px;text-wrap:balance}
.hero-cine .sub{max-width:46ch;color:var(--bone-soft);font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.5}
.hero-cine .cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-cine .btn.ghost{color:var(--bone);border-color:rgba(239,231,214,.4)}
.hero-cine .btn.ghost:hover{background:rgba(239,231,214,.08)}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-soft);display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue .ln{width:1px;height:42px;background:linear-gradient(var(--amber),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* the broken compass, floating in the hero */
.compass{position:absolute;z-index:2;right:6%;top:34%;width:min(38vw,440px);aspect-ratio:1;
  opacity:.9;pointer-events:none}
.compass .rose{animation:spin 90s linear infinite}
.compass .needle{transform-origin:50% 50%;animation:wander 12s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wander{0%{transform:rotate(-18deg)}25%{transform:rotate(24deg)}50%{transform:rotate(-8deg)}75%{transform:rotate(40deg)}100%{transform:rotate(-18deg)}}
@media(max-width:760px){.compass{top:auto;bottom:20%;right:50%;transform:translateX(50%);width:64vw;opacity:.5}}

/* ---- the wordmark: Broken Compass Wine ----
   Wine was drifting off on its own. Pulled in tight against Compass, set a
   size larger so the italic reads as part of the mark rather than a suffix,
   and nudged onto the baseline so the whole thing sits as one lockup. */
.brand{letter-spacing:-.012em}
/* Wine sits on the shared baseline with Broken Compass. The old top:.035em
   nudge dropped it to about the depth of the p descender, which read as
   misaligned rather than deliberate. Larger type on the same baseline is the
   effect we want. */
.wordmark-wine{font-style:italic;color:var(--amber);font-weight:400;
  font-size:1.18em;line-height:1;letter-spacing:-.015em;
  margin-left:-.16em;vertical-align:baseline}
footer.site .wordmark-wine{color:#e9b98a}

/* ---- a rank of real bottles drifting along the hero floor ---- */
.hero-rank{position:absolute;left:0;right:0;bottom:0;height:min(24vh,200px);z-index:2;
  pointer-events:none;overflow:hidden;padding:0 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* the shade over the bottles eases in from nothing at the top. It used to open
   at 55% opacity on its very first pixel, which drew a hard line across them */
.hero-rank::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    transparent 0%, rgba(10,22,16,.18) 22%, rgba(9,21,15,.45) 55%,
    rgba(8,21,16,.78) 82%, rgba(8,21,16,.92) 100%)}
/* No padding on the track: the loop works by running two identical sets and
   sliding exactly 50%, and side padding is not part of that half, so it made
   the strip jump every lap. Padding lives on the container instead. */
/* Spacing is margin on each bottle, not flex gap. With gap there are 27 gaps
   across 28 bottles, so half the track is one set plus half a gap and the loop
   jumped 19px every lap. As a margin the spacing belongs to the bottle, both
   sets are identical, and translating exactly 50% is seamless. */
/* The shelf ran out on a wide screen. Two sets of 14 bottles come to about
   1330px, so on anything wider the track was narrower than the viewport and a
   bare stretch of floor appeared before the loop came round. Each set is now
   at least a full viewport wide and spreads its bottles across that width, so
   the two halves stay identical, the 50% slide stays seamless, and there is
   always a bottle on screen however wide the window. */
.rank-track{display:flex;align-items:flex-end;height:100%;
  width:max-content;animation:rank 60s linear infinite;will-change:transform}
.rank-set{display:flex;align-items:flex-end;height:100%;
  flex:0 0 auto;min-width:100%;justify-content:space-around}
.rank-track img{height:100%;width:auto;object-fit:contain;object-position:bottom;
  margin-right:clamp(18px,3vw,42px);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.55)) brightness(.92);opacity:.85}
/* bottles stand up straight. The old nth-child rotations read as wonky
   rather than casual, and a rotated bottle next to an upright one looks
   like a mistake rather than a shelf. */
@keyframes rank{to{transform:translateX(-50%)}}
@media(max-width:760px){.hero-rank{height:150px;opacity:.75}}

/* ---- glou glou ticker, the fun bit ---- */
.glou{background:var(--amber);color:#2a1408;overflow:hidden;white-space:nowrap;
  padding:11px 0;border-block:1px solid rgba(42,20,8,.25)}
.glou-track{display:inline-block;animation:glou 38s linear infinite;will-change:transform}
.glou span{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.9vw,1.45rem);
  padding:0 20px;letter-spacing:.01em}
.glou .dot{font-style:normal;opacity:.5}
@keyframes glou{to{transform:translateX(-50%)}}

/* ---- transparent header over the hero ---- */
/* Fail safe: the default is always the readable one, dark text on the cream
   bar. Only when JS has confirmed we are at the top of the hero do we go
   transparent with bone text. If anything goes wrong, the words stay legible. */
body.home-hero header.top{transition:background .4s,border-color .4s}
html.js:not(.scrolled) body.home-hero header.top{
  background:transparent !important;backdrop-filter:none !important;
  border-color:transparent !important}
html.js:not(.scrolled) body.home-hero header.top .brand,
html.js:not(.scrolled) body.home-hero header.top nav.main a,
html.js:not(.scrolled) body.home-hero header.top .basket-link{color:var(--bone);transition:color .4s}
html.js:not(.scrolled) body.home-hero header.top .navtoggle span{background:var(--bone)}
/* a soft shade under the bar so bone type never sits on bare pale map */
html.js:not(.scrolled) body.home-hero header.top::before{content:"";position:absolute;
  inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(6,16,11,.72),rgba(6,16,11,.28) 70%,transparent)}
body.home-hero .promo{background:var(--night-2);color:var(--amber-soft)}

/* ================= DARK NARRATIVE BAND ================= */
/* not a flat green void: a warm amber breath top right, wine seeping in at the
   bottom left, so the bands read as lit chart paper rather than paint */
.band-dark{
  background:
    radial-gradient(55% 70% at 88% 6%, rgba(209,122,58,.08), transparent 62%),
    radial-gradient(70% 85% at 4% 100%, rgba(107,31,42,.22), transparent 58%),
    linear-gradient(180deg, #0d2016 0%, var(--night) 40%, #081510 100%);
  /* 96px top and bottom left a lot of empty green above the heading */
  color:var(--bone);padding:clamp(58px,7vh,78px) 0;position:relative;overflow:hidden}
.band-dark h2{color:var(--bone)}
.band-dark .muted{color:var(--bone-soft)}
.band-dark .smallcaps{color:var(--amber)}
/* heading in one tidy line above the boxes: kicker, then the title, no wrap
   until the viewport genuinely cannot hold it */
.band-head{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:6px}
.band-head .band-title{font-size:clamp(1.35rem,2.6vw,2.1rem);max-width:none;
  margin:0;white-space:nowrap}
@media (max-width:760px){.band-head .band-title{white-space:normal}}
.evidence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;
  background:rgba(239,231,214,.12);border:1px solid rgba(239,231,214,.12);margin-top:36px}
.evidence-grid.five{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.evidence-grid.five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.evidence-grid.five{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.evidence-grid.five{grid-template-columns:1fr}}
.evidence-grid.five .cell{padding:26px 20px;min-height:180px}

/* the featured shelf holds exactly five, so on a wide screen it sits as one
   odd numbered row rather than four and an orphan */
@media (min-width:1100px){.grid.p.featured{grid-template-columns:repeat(5,1fr)}}
.evidence-grid .cell{background:var(--night);padding:30px 26px;min-height:200px;display:flex;flex-direction:column;gap:12px}
.evidence-grid .cell .big{font-family:var(--mono);font-size:clamp(2rem,4vw,3.2rem);color:var(--bone);line-height:1}
.evidence-grid .cell .big .u{font-size:.9rem;color:var(--amber);letter-spacing:.04em}
.evidence-grid .cell p{color:var(--bone-soft);font-size:.92rem;margin:0}
.evidence-grid .cell .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}

/* ---- a band with wine footage behind it (the pump over) ---- */
/* The footage should be visible, not buried. The scrim is heavy only where the
   type sits (the left) and clears away fast across the frame, so you can
   actually see what is going on in the clip. */
.band-video{position:relative;isolation:isolate}
.band-video .band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;opacity:.62;filter:saturate(.98) contrast(1.04)}
.band-video::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* a tighter, softer pool of shade under the type only */
    radial-gradient(120% 95% at 0% 50%,rgba(7,17,12,.92) 0%,rgba(7,17,12,.72) 34%,rgba(7,17,12,.18) 62%,transparent 78%),
    linear-gradient(180deg,var(--night) 0%,rgba(9,20,14,.06) 18%,rgba(9,20,14,.08) 82%,var(--night) 100%)}
/* and a shadow on the type itself, invisible on dark ground but it saves the
   words when a bright frame drifts underneath */
.band-video .wrap{text-shadow:0 1px 18px rgba(5,14,10,.85),0 1px 3px rgba(5,14,10,.6)}
@media(max-width:760px){
  .band-video .band-bg{opacity:.5}
  .band-video::after{background:linear-gradient(180deg,var(--night),rgba(9,20,14,.58) 22%,rgba(9,20,14,.58) 78%,var(--night))}
}

/* page headers carrying footage */
.pagehead{padding:clamp(110px,17vh,190px) 0 clamp(64px,10vh,110px);
  border-bottom:1px solid rgba(239,231,214,.12)}
.pagehead h1{color:var(--bone);max-width:16ch;margin:.12em 0 .3em;
  font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.015em}
.pagehead .smallcaps{color:var(--amber)}
.pagehead .ph-sub{max-width:52ch;color:var(--bone-soft);font-size:clamp(1rem,1.4vw,1.14rem)}
/* the swirl is a pale, bright clip: knock it back and pull it towards the
   house palette so it does not fight the green */
/* bright clips (gold pour, vineyard sky) blow out behind the type, so they get
   knocked back further and given a deeper pool of shade under the words */
.pagehead .band-bg[poster*="pour"],
.pagehead .band-bg[poster*="vineyard"]{opacity:.38;filter:saturate(.82) contrast(1.04) brightness(.86)}
.pagehead:has(.band-bg[poster*="pour"])::after,
.pagehead:has(.band-bg[poster*="vineyard"])::after{
  background:
    radial-gradient(125% 100% at 0% 50%,rgba(7,17,12,.95) 0%,rgba(7,17,12,.84) 38%,rgba(7,17,12,.30) 66%,transparent 82%),
    linear-gradient(180deg,var(--night) 0%,rgba(9,20,14,.14) 18%,rgba(9,20,14,.16) 82%,var(--night) 100%)}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid rgba(239,231,214,.14);padding:18px 0;margin-top:8px}
.marquee .track{display:inline-block;animation:marq 34s linear infinite}
.marquee span{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--bone);opacity:.55;padding:0 28px}
.marquee span b{color:var(--amber);font-weight:400}
@keyframes marq{to{transform:translateX(-50%)}}

/* ================= EVIDENCE SIGNATURE ================= */
canvas.sig{display:block}
.card .shot{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 50% 30%,#16281d,#0a1610),var(--night)}
.card .shot canvas.sig{width:78%;height:78%;margin:auto;position:absolute;inset:0}
.card .shot .tierbadge{backdrop-filter:blur(3px)}
.pdp .bigshot{background:radial-gradient(120% 120% at 50% 35%,#183024,#09140e);border-color:rgba(239,231,214,.12);position:relative;overflow:hidden}
.pdp .bigshot canvas.sig{width:80%;height:80%}
.pdp .bigshot .cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-soft)}

/* Standard tier badges */
/* never abbreviate the tier: the label is the claim, it has to read in full */
/* the bottle shot was covering this. It sits above the image now, and wraps to
   two lines rather than running under the glass, so "Low intervention" reads
   as a stacked label beside the bottle instead of vanishing behind it. */
.card .shot .tier{z-index:2;max-width:calc(100% - 18px)}
.card .tierbadge{display:inline-block;white-space:normal;max-width:8.5em;
  line-height:1.25;text-align:left;
  font-size:.55rem;letter-spacing:.06em;padding:3px 7px;
  white-space:nowrap;display:inline-block}
.tierbadge.std-natural{background:var(--green);color:#f0efe6}
.tierbadge.std-zero-zero{background:#1d4d3a;color:#eadfc8;border:1px solid rgba(239,231,214,.35)}
.tierbadge.std-low-intervention{background:#3d5347;color:#e6dfd0}
.tierbadge.std-sustainable{background:#54614a;color:#e9e4d6}
.tierbadge.std-classic{background:#e7e0d2;color:var(--ink-soft)}

/* hover lift on the dark shots */
.card:hover .shot canvas.sig{transform:scale(1.04);transition:transform .5s ease}
.card .shot canvas.sig{transition:transform .5s ease}

/* ---- real bottle shots, signature becomes a corner medallion ---- */
.shot .bottle-img{position:absolute;inset:0;margin:auto;max-width:62%;max-height:86%;
  object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));
  transition:transform .5s ease}
.card:hover .shot .bottle-img{transform:translateY(-4px) scale(1.03)}
.sig-medallion{position:absolute;right:9px;bottom:9px;width:64px;height:64px;
  border-radius:50%;background:rgba(10,22,15,.78);border:1px solid rgba(239,231,214,.18);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.sig-medallion canvas.sig{width:52px !important;height:52px;position:static;margin:0}
.card:hover .sig-medallion canvas.sig{transform:none}
.sig-medallion.lg{width:96px;height:96px;right:14px;bottom:44px}
.sig-medallion.lg canvas.sig{width:78px !important;height:78px}
.pdp .bigshot.has-bottle .bottle-img{max-width:56%;max-height:80%}

/* ---- refined section rhythm ---- */
.section.tint{background:var(--paper-2)}

@media(max-width:760px){
  .hero-cine .wrap{padding-top:96px}
  .hero-cine h1{font-size:clamp(2.6rem,12vw,4rem)}
  .band-dark{padding:64px 0}
  .cursor-dot,.cursor-ring{display:none}

  .anatomy-inner{padding:76px 0 54px;min-height:0;gap:28px}
  .anatomy-stage{flex-direction:column;aspect-ratio:auto;width:100%;gap:26px}
  .anatomy-sig{width:66vw;height:66vw}
  .callout{position:static;width:auto;text-align:left !important;border-left:2px solid rgba(209,122,58,.6);padding-left:14px}
  .callout::before{display:none}
  html.js .anatomy .callout{opacity:1}
}

/* ================= THE WINE GETS ONTO THE PAPERWORK ================= */
:root{--claret:#6b1f2a}

/* Wine stain rings removed (Kris, 16 Aug): they read as random circles rather
   than glass marks. The bottles, the scroll glass and the ticker carry the
   wine on this site. Do not reinstate without a better idea. */
.section.tint,.prose{position:relative}

/* the scroll glass: fills with wine as you read, click for the top */
.scroll-glass{position:fixed;right:22px;bottom:22px;z-index:60;background:none;border:0;
  cursor:pointer;color:var(--ink-soft);opacity:0;transform:translateY(8px);
  transition:opacity .4s,transform .4s,color .2s;padding:4px}
html.scrolled .scroll-glass{opacity:.85;transform:none}
.scroll-glass:hover{color:var(--ink);opacity:1}
.band-dark ~ .scroll-glass{color:var(--bone-soft)}
.glass-wine{fill:var(--claret);transition:y .15s linear}
.scroll-glass:hover .glass-wine{fill:#7d2634}
@media(max-width:760px){.scroll-glass{right:12px;bottom:12px}}

/* the basket is a six bottle case */
.basket-link{display:flex;align-items:center;gap:8px}
.case-mini{display:grid;grid-template-columns:repeat(3,8px);gap:3px;padding:4px;
  border:1.4px solid currentColor;border-radius:2px;opacity:.9}
.case-mini .slot{width:8px;height:8px;border-radius:50%;border:1px solid currentColor;
  opacity:.4;transition:all .25s}
.case-mini .slot.full{opacity:1;background:var(--claret);border-color:var(--claret);
  box-shadow:inset 0 0 0 1.5px rgba(239,231,214,.55)}
.basket-count{background:none;color:inherit;min-width:0;font-family:var(--mono);font-weight:700}
body.home-hero header.top .case-mini .slot.full{background:var(--amber);border-color:var(--amber)}

/* ================= WHAT'S FOR DINNER ================= */
/* amber, and set in the same serif italic as the Wine in the wordmark */
.dinner-btn{background:var(--amber);border:1px solid var(--amber);border-radius:99px;
  padding:7px 17px;font-family:var(--serif);font-style:italic;font-size:1rem;
  letter-spacing:.005em;color:#fff;cursor:pointer;white-space:nowrap;
  transition:filter .2s,transform .08s}
.dinner-btn:hover{filter:brightness(1.08)}
.dinner-btn:active{transform:translateY(1px)}
html.js:not(.scrolled) body.home-hero .dinner-btn{color:#fff}
@media(max-width:860px){.dinner-btn{padding:6px 13px;font-size:.9rem}}

.dinner{position:fixed;inset:0;z-index:9997;display:flex;align-items:flex-start;
  justify-content:center;padding:6vh 18px 18px;overflow-y:auto;
  background:rgba(6,16,11,.72);backdrop-filter:blur(6px);
  animation:dinnerin .25s ease}
.dinner[hidden]{display:none}
@keyframes dinnerin{from{opacity:0}to{opacity:1}}
.dinner-sheet{position:relative;width:min(760px,100%);background:var(--night);
  border:1px solid rgba(239,231,214,.16);border-radius:4px;padding:34px 34px 36px;
  color:var(--bone);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.dinner-sheet h2{color:var(--bone);margin:.15em 0 .3em}
.dinner-sheet .smallcaps{color:var(--amber)}
.dinner-sheet .muted{color:var(--bone-soft)}
.dinner-intro{max-width:52ch;font-size:.95rem}
.dinner-close{position:absolute;top:10px;right:14px;background:none;border:0;
  color:var(--bone-soft);font-size:1.9rem;line-height:1;cursor:pointer;padding:4px 8px}
.dinner-close:hover{color:var(--bone)}
.dinner-form{display:flex;gap:10px;margin:18px 0 12px;flex-wrap:wrap}
.dinner-form input{flex:1;min-width:220px;padding:13px 15px;font:inherit;
  background:rgba(239,231,214,.06);border:1px solid rgba(239,231,214,.22);
  border-radius:3px;color:var(--bone)}
.dinner-form input::placeholder{color:rgba(239,231,214,.4)}
.dinner-form input:focus{outline:none;border-color:var(--amber)}
.dinner-suggest{display:flex;flex-wrap:wrap;gap:7px}
.dinner-suggest .chip{background:none;border:1px solid rgba(239,231,214,.22);
  color:var(--bone-soft);cursor:pointer;font:inherit;font-size:.76rem;
  padding:5px 11px;border-radius:99px}
.dinner-suggest .chip:hover{border-color:var(--amber);color:var(--bone)}
.dinner-out{margin-top:22px}
.dinner-read{font-family:var(--serif);font-size:1.2rem;line-height:1.4;color:var(--bone);
  margin:0 0 16px}
.dinner-note{margin-top:16px;font-size:.9rem;color:var(--bone-soft);
  border-top:1px solid rgba(239,231,214,.14);padding-top:14px}
.dinner-pick{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:start;
  padding:15px 0;border-top:1px solid rgba(239,231,214,.14)}
.dinner-pick img{width:64px;height:96px;object-fit:contain;object-position:center}
.dinner-pick .pk-name{font-family:var(--serif);font-size:1.08rem;color:var(--bone)}
.dinner-pick .pk-meta{font-size:.78rem;color:var(--bone-soft);margin:2px 0 6px}
.dinner-pick .pk-why{font-size:.9rem;color:#ded6c4;margin:0}
.dinner-pick .pk-right{text-align:right;white-space:nowrap}
.dinner-pick .pk-price{font-family:var(--mono);font-weight:600}
.dinner-conf{display:inline-block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:3px 7px;border-radius:2px;background:var(--green);color:#f0efe6;margin-bottom:6px}
/* the wait reads as a line of the sommelier's own voice, breathing */
.dinner-thinking{font-family:var(--serif);font-style:italic;font-size:1.15rem;
  color:var(--bone);animation:cellarpulse 1.6s ease-in-out infinite}
@keyframes cellarpulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .dinner-thinking{animation:none;opacity:.85}
}
.dinner-err{color:#e9a27a;font-size:.95rem}
/* always on, quietly, in the corner of the sheet */
.dinner-cloud{position:absolute;right:16px;bottom:10px;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(239,231,214,.38);pointer-events:none}
@media(max-width:600px){
  .dinner{padding:0}
  .dinner-sheet{min-height:100svh;border:0;border-radius:0;padding:26px 20px}
  .dinner-pick{grid-template-columns:48px 1fr;gap:12px}
  .dinner-pick img{width:48px;height:72px}
  .dinner-pick .pk-right{grid-column:2;text-align:left}
}

/* cursor turns claret over a bottle */
body.cursor-hot .cursor-ring{border-color:rgba(213,90,110,.9)}

/* pour-in on the add button, a tiny celebration */
@keyframes pour{0%{transform:scale(1)}40%{transform:scale(1.28) rotate(-6deg)}100%{transform:scale(1)}}
.case-mini .slot.pop{animation:pour .45s ease}

/* respect reduced motion fully */
@media(prefers-reduced-motion:reduce){
  .compass .rose,.compass .needle,.scrollcue .ln,.marquee .track{animation:none}
  html.anim [data-reveal],html.anim [data-reveal-x],html.anim [data-hi]{opacity:1;transform:none}
  html.js .anatomy .callout{opacity:1}
  #curtain{animation:curtainfail .01s forwards}
  .case-mini .slot.pop{animation:none}
  .rank-track,.glou-track{animation:none}
}