/*
Theme Name: Albatross Ridge
Theme URI: https://albatrossridge.com
Author: Eight Clap Labs
Author URI: https://eightclaplabs.com
Description: Custom theme for Albatross Ridge. Classic theme, Commerce7 Frontend V2.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0.2
Requires PHP: 7.4
License: Proprietary
Text Domain: albatross-ridge
*/


/* ============================================================
   ALBATROSS RIDGE — light build
   Paper is limestone, not cream. Ink is a blue-black, not soot.
   No accent colour: the photography is the only colour here.
   Two dark moments only — the sailplane story and the Wine Club.
   ============================================================ */
:root{
  --bg:#EDEBE6; --bg-soft:#E5E2DB;
  --fg:#151A1F; --muted:#6C7278; --muted-2:#8D9298;
  --hair:rgba(21,26,31,.16); --hair-soft:rgba(21,26,31,.075);
  /* silver: the family material — Hawley Bowlus built sailplanes and the Spirit of St. Louis.
     Used on rules and ornament only, never on small text, where it would fail contrast. */
  --silver:#A9ADB0; --silver-lt:#CFD2D3; --silver-dk:#7C8184;
  --sheen:linear-gradient(90deg,var(--silver-dk),var(--silver-lt) 42%,var(--silver) 58%,var(--silver-dk));
  --display:"Instrument Serif",Georgia,serif;
  --ui:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,5vw,80px);
  --art-gap:clamp(92px,11vw,168px);
  --pre-gap:clamp(46px,6.5vh,68px); --gap:clamp(64px,11vh,150px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
.inverse{
  --bg:#0F1317; --bg-soft:#151B21;
  --fg:#E9E6DF; --muted:#8E959B; --muted-2:#6A7178;
  --hair:rgba(233,230,223,.17); --hair-soft:rgba(233,230,223,.08);
  --silver:#B6BABD; --silver-lt:#E2E4E5; --silver-dk:#878C90;
  background:var(--bg); color:var(--fg);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--ui);font-weight:300;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--fg);outline-offset:5px}

.eyebrow{font-size:10px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.display{font-family:var(--display);font-weight:400;line-height:.99;letter-spacing:-.012em}
.d-xl{font-size:clamp(2.6rem,7.4vw,6.6rem)}
.d-lg{font-size:clamp(2.2rem,5.4vw,4.6rem)}
.d-md{font-size:clamp(1.7rem,3.4vw,2.9rem)}
.lede{font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.82;color:var(--muted);max-width:52ch}
.italic{font-style:italic}


/* ---------- silver foil artwork, lifted from the Old Vines label ---------- */
.hills-art path{fill:url(#foilgrad)}

/* Five ridge lines, drawn as overlapping layers on the label. The nearest
   drifts furthest. It breathes rather than scrolls, so there is no seam —
   and each line already bleeds ~8.7 units past both edges, which is what
   stops the travel from ever exposing an end. */
.hills-art{display:block;width:100%;height:auto;overflow:visible}
/* --p runs +1 (still below the fold) -> 0 (dead centre) -> -1 (scrolled past).
   Horizontal only. Neighbouring ridges travel opposite ways, so the five lines
   slide apart into a shuffled stack, close into the true drawing exactly as it
   centres, then part again on the way out. Idle drift lives on the inner group
   so the two motions compose instead of fighting. */
.hills-art .s0{transform:translateX(calc(var(--p,0) * -40px))}
.hills-art .s1{transform:translateX(calc(var(--p,0) *  34px))}
.hills-art .s2{transform:translateX(calc(var(--p,0) * -26px))}
.hills-art .s3{transform:translateX(calc(var(--p,0) *  36px))}
.hills-art .s4{transform:translateX(calc(var(--p,0) * -46px))}
.hills-art g{will-change:transform}
.hills-art .r0{animation:roll0 41s var(--ease) infinite alternate}
.hills-art .r1{animation:roll1 34s var(--ease) infinite alternate}
.hills-art .r2{animation:roll2 28s var(--ease) infinite alternate}
.hills-art .r3{animation:roll3 23s var(--ease) infinite alternate}
.hills-art .r4{animation:roll4 19s var(--ease) infinite alternate}
@keyframes roll0{from{transform:translateX(-1.4px)}to{transform:translateX(1.6px)}}
@keyframes roll1{from{transform:translateX(2.2px)}to{transform:translateX(-2.4px)}}
@keyframes roll2{from{transform:translateX(-3.2px)}to{transform:translateX(3.4px)}}
@keyframes roll3{from{transform:translateX(4.4px)}to{transform:translateX(-4.2px)}}
@keyframes roll4{from{transform:translateX(-5.8px)}to{transform:translateX(6.0px)}}

.hills-band{width:min(100%,1060px);margin:0 auto var(--art-gap)}

/* preloader */
#pre{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;transition:opacity .9s var(--ease),visibility .9s}
#pre.gone{opacity:0;visibility:hidden}
#pre .mark{width:122px;height:51px;color:var(--fg);opacity:.92}
.pre-track{width:min(300px,58vw);height:1px;background:var(--hair);position:relative;margin-top:var(--pre-gap)}
.pre-bird{display:block;width:104px;height:auto;margin-top:var(--pre-gap)}
.pre-bird .foil{fill:var(--silver)}
.pre-bird .paper{fill:var(--bg)}
.pre-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--fg)}
.pre-num{position:absolute;top:100%;left:0;right:0;height:var(--pre-gap);display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.3em;color:var(--muted)}

/* nav — light type while it floats over the hero, ink once it lands on paper */
.nav{--fg:#F4F1EB;--bg:#0F1317;--hair:rgba(244,241,235,.32);
  position:fixed;top:0;left:0;right:0;z-index:100;color:var(--fg);
  display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),padding .5s var(--ease),color .5s var(--ease),border-color .5s}
.nav.stuck{--fg:#151A1F;--bg:#EDEBE6;--hair:rgba(21,26,31,.2);
  background:rgba(237,235,230,.97);
  padding:14px var(--pad);border-bottom-color:rgba(21,26,31,.1)}
/* Drawer open: the menu paints the whole screen limestone, so the nav has to
   switch to ink even when it hasn't scrolled yet — otherwise the wordmark,
   burger and Commerce7 utils are white-on-light and vanish. */
body.lock .nav{--fg:#151A1F;--hair:rgba(21,26,31,.2)}
.nav-set{display:flex;align-items:center;gap:34px}
.nav-set a{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;opacity:.74;transition:opacity .3s}
.nav-set a:hover{opacity:1}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mark{display:block;fill:currentColor;color:inherit}
.nav-mark{display:block}
.nav-mark .mark{width:88px;height:37px}
.nav-cta{display:inline-block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  border:1px solid var(--silver);padding:11px 20px;transition:background .35s,color .35s,border-color .35s}
.nav-cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{display:block;width:22px;height:1px;background:currentColor;transition:transform .35s var(--ease),opacity .25s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#drawer{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;
  justify-content:center;gap:6px;padding:0 var(--pad);opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s}
#drawer.open{opacity:1;visibility:visible}
#drawer a{font-family:var(--display);font-size:clamp(2rem,9vw,3rem);line-height:1.35;
  border-bottom:1px solid var(--hair-soft);padding:14px 0}

[data-r]{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-r].in{opacity:1;transform:none}
[data-r][data-d="1"]{transition-delay:.12s}
[data-r][data-d="2"]{transition-delay:.24s}
[data-r][data-d="3"]{transition-delay:.36s}

.sec{padding:var(--gap) var(--pad);position:relative}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:44px}
.sec-head .rule{flex:1;height:1px;background:var(--sheen);opacity:.9}
.glider{width:clamp(88px,9.5vw,132px);aspect-ratio:159/113;height:auto;fill:var(--silver);opacity:.9}
.mountains{display:block;width:min(520px,68vw);aspect-ratio:1000/415;height:auto;
  margin:0 auto clamp(26px,4vw,44px);fill:var(--silver);opacity:.6}
.name-glider{margin:0 auto clamp(30px,4vw,46px)}
.wrap{max-width:1360px;margin:0 auto}

/* hero — the image dissolves into the paper rather than butting against it */
.hero{position:relative;height:100svh;min-height:0;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;color:#F4F1EB}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:drift 26s ease-out forwards}
@keyframes drift{to{transform:scale(1)}}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(12,16,20,.46) 0%, rgba(12,16,20,.04) 26%, rgba(12,16,20,.30) 56%,
  rgba(12,16,20,.60) 78%, rgba(163,164,158,.55) 93%, #EDEBE6 100%)}
.hero-body{position:relative;z-index:2;padding:0 var(--pad) clamp(78px,13vh,150px)}
.hero-body .eyebrow{color:rgba(244,241,235,.78);margin-bottom:24px}
.hero h1{max-width:17ch}
.hero h1 .italic{color:rgba(244,241,235,.72)}

/* the estate line, now on paper directly under the hero */
.datum{border-bottom:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;padding:18px var(--pad) 20px}
.datum span{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2)}
.scroll-cue{display:flex;align-items:center;gap:10px}
.scroll-cue i{display:block;width:36px;height:1px;background:var(--muted-2);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.3);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}

.state{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);align-items:end}

/* Sized by ratio, not viewport height. svh goes stale across an orientation
   flip on iOS, which left these boxes holding their landscape height and
   cropping the photo to a wide strip on the way back to portrait. */
.plate{position:relative;width:100%;aspect-ratio:2/1;min-height:240px;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover}
.plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(12,16,20,.55))}
.plate-cap{position:absolute;left:var(--pad);bottom:34px;z-index:2;font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(244,241,235,.82)}

.fogsec{background:var(--bg);padding:var(--gap) 0}
/* Sits directly under the number grid; without this its own top padding lands
   on top of the previous section's bottom padding and doubles the gap. */
.fogsec--tight{padding-top:0}
.fogsec .inner{padding:0 var(--pad);max-width:1360px;margin:0 auto}

.quote{font-family:var(--display);font-size:clamp(1.35rem,2.5vw,2.15rem);line-height:1.34;font-style:italic;max-width:36ch}
.quote cite{display:block;margin-top:20px;font-family:var(--ui);font-style:normal;font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2)}

/* Row-major: pairs read left-to-right — Pinot Noir / Chardonnay,
   Rosé / Beyond the Ridge — then Member Only Wines spans both
   columns as a plain full-width row (same styling as the rest; only its
   hairlines run uninterrupted across the whole grid). */
.index{display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(30px,6vw,90px);border-top:1px solid var(--hair)}
.index .row-wide{grid-column:1/-1;border-top:1px solid var(--hair);
  grid-template-columns:auto auto;justify-content:center;
  padding-top:clamp(14px,2vw,20px);padding-bottom:clamp(14px,2vw,20px)} /* shorter than the other rows */
.index .row-wide h3{color:var(--silver)} /* silvered out, same family as the nav's LOG IN */
.go-lock{display:inline-flex;align-items:center;gap:5px}
.go-lock svg{width:11px;height:11px;fill:currentColor;flex-shrink:0}
/* the pair directly above the wide row drops its per-column bottom hairlines
   so the wide row's full-width top rule is the only line there */
.index .row:nth-last-child(2),.index .row:nth-last-child(3){border-bottom:0}
/* Two columns hold all the way down; the serif scales so it
   keeps long labels like "Member Only Wines" on one line in a ~165px column. Only genuinely tiny screens fall
   back to a single column. */
@media(max-width:700px){
  .index{column-gap:clamp(16px,4.5vw,40px)}
  .row{padding:clamp(18px,4.2vw,30px) 0}
  .row h3{font-size:clamp(1rem,4.4vw,1.5rem)}
  .row .go{font-size:9px;letter-spacing:.22em}
  .row:hover{padding-left:0}
}
@media(max-width:340px){
  .index{grid-template-columns:1fr}
  /* single column: the row before the wide members row gets its divider back */
  .index .row:nth-last-child(3){border-bottom:1px solid var(--hair)}
}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;
  padding:clamp(24px,3.4vw,40px) 0;border-bottom:1px solid var(--hair);transition:padding-left .5s var(--ease)}
.row:hover{padding-left:18px}
.row h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.7vw,3.1rem);line-height:1;letter-spacing:-.01em}
.row .go{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .4s}
.row:hover .go{color:var(--fg)}

.feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:center;background:var(--bg-soft)}
.feature-img{padding:clamp(40px,6vw,80px);display:flex;justify-content:center}
.feature-img img{max-height:62svh;width:auto;object-fit:contain;filter:drop-shadow(0 28px 48px rgba(21,26,31,.26))}
.feature-body{padding:clamp(32px,5vw,80px) clamp(32px,5vw,80px) clamp(32px,5vw,80px) 0}
.note{margin:26px 0 34px;color:var(--muted);line-height:1.85;max-width:46ch;font-size:.95rem}

.figures{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.fig{padding:clamp(30px,4vw,54px) clamp(20px,4.5vw,42px);border-right:1px solid var(--hair)}
.figures>.fig:first-child{padding-left:0}
.fig:last-child{border-right:0}
.fig b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,4rem);line-height:1;letter-spacing:-.02em}
.fig span{display:block;margin-top:16px;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted-2);line-height:2;max-width:24ch}

.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,30px)}
.room{display:flex;flex-direction:column;gap:12px}
.room-img{position:relative;overflow:hidden;aspect-ratio:4/5;margin-bottom:12px}
.room-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.room:hover .room-img img{transform:scale(1.05)}
.room h4{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.1}
.room p{color:var(--muted);font-size:.92rem;line-height:1.75}
.room .go{margin-top:auto;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  padding-top:20px;border-top:1px solid var(--hair);transition:color .4s}
.room:hover .go{color:var(--fg)}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,24px)}
.card{position:relative;overflow:hidden;aspect-ratio:3/4;display:block}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover img{transform:scale(1.05)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(12,16,20,.8))}
.card .cap{position:absolute;left:clamp(18px,2vw,30px);bottom:clamp(18px,2vw,30px);z-index:2;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:#F4F1EB}

.alloc{position:relative;padding:calc(var(--gap) * 1.15) var(--pad);overflow:hidden}
.alloc-bg{position:absolute;inset:0;z-index:0}
.alloc-bg img{width:100%;height:100%;object-fit:cover}
.alloc-bg::after{content:"";position:absolute;inset:0;background:rgba(12,16,20,.8)}
.alloc .wrap{position:relative;z-index:2}
.form{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px;max-width:560px}
.form input{flex:1;min-width:220px;background:transparent;border:0;border-bottom:1px solid var(--silver);
  color:var(--fg);font-family:var(--ui);font-size:.95rem;font-weight:300;padding:14px 2px;transition:border-color .4s}
.form input::placeholder{color:var(--muted-2);letter-spacing:.06em}
.form input:focus{outline:0;border-bottom-color:var(--fg)}
.form button{font-size:10px;letter-spacing:.28em;text-transform:uppercase;border:1px solid var(--silver);
  padding:14px 30px;transition:background .35s,color .35s,border-color .35s}
.form button:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

.statement{padding:calc(var(--gap) * .85) var(--pad);text-align:center}
.statement .display{max-width:28ch;margin:0 auto}
.creed{font-style:italic;color:var(--muted)}

.band{border-top:1px solid var(--hair);background:var(--bg-soft);padding:clamp(44px,6vw,84px) var(--pad)}
.band-in{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,80px);align-items:center}
.band .form{margin-top:0}

footer{border-top:1px solid var(--hair);padding:var(--pad);background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(28px,4vw,60px);max-width:1360px;margin:0 auto}
.foot-grid .mark{width:112px;height:47px;margin-bottom:22px}
.foot-grid h5{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);font-weight:400;margin-bottom:18px}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-grid li a{font-size:.9rem;color:var(--muted);transition:color .3s}
.foot-grid li a:hover{color:var(--fg)}
.foot-note{max-width:1360px;margin:clamp(40px,6vw,72px) auto 0;padding-top:26px;border-top:1px solid var(--hair-soft);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}

@media(max-width:1000px){.plate{aspect-ratio:3/2}}
@media(max-width:700px){.plate{aspect-ratio:4/5}}
@media(orientation:landscape) and (max-height:560px){
  .d-xl{font-size:clamp(1.9rem,4.6vw,3rem)}
  .plate{aspect-ratio:21/9}
  .hero-body{padding-bottom:clamp(44px,9vh,80px)}
  .feature-img img{max-height:70svh}
}
@media(max-width:900px){.band-in{grid-template-columns:1fr}}
@media(max-width:1000px){
  .nav-set.desk{display:none}
  .burger{display:flex}
  .state{grid-template-columns:1fr;align-items:start}
  .feature{grid-template-columns:1fr}
  .feature-body{padding:0 clamp(28px,6vw,60px) clamp(48px,8vw,80px)}
  .feature-img img{max-height:46svh}
  .figures{grid-template-columns:1fr 1fr}
  .fig{border-bottom:1px solid var(--hair)}
  .figures>.fig:nth-child(odd){padding-left:0}
  .fig:nth-child(2){border-right:0}
  .fig:nth-child(3),.fig:nth-child(4){border-bottom:0}
  .rooms{grid-template-columns:1fr}
  .room-img{aspect-ratio:16/10}
}
@media(max-width:640px){
  .trio{grid-template-columns:1fr;gap:14px}
  .card{aspect-ratio:4/3}
  .foot-grid{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr;gap:9px}
  .row .go{justify-self:start}
  .datum span.hide-s{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-r]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
/* ---------- sticky shop bar ---------- */
/* Sits under the hero, then pins beneath the header. --navh is measured in JS so
   it keeps its place when the header shrinks on scroll. */
.shopbar{position:sticky;top:var(--navh,80px);z-index:60;background:var(--bg);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.shopbar-toggle{display:flex;align-items:center;gap:clamp(12px,2.4vw,26px);width:100%;
  padding:clamp(14px,2vw,20px) var(--pad);cursor:pointer}
.shopbar .ln{flex:1;height:1px;background:var(--sheen);opacity:.85}
.shopbar .lbl{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;transition:color .3s}
.shopbar .chev{width:8px;height:8px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .35s var(--ease),border-color .3s;flex:none}
.shopbar-toggle:hover .lbl{color:var(--fg)}
.shopbar-toggle:hover .chev{border-color:var(--fg)}
.shopbar-toggle[aria-expanded="true"] .lbl{color:var(--fg)}
.shopbar-toggle[aria-expanded="true"] .chev{transform:rotate(225deg) translateY(-2px)}
.shopbar-panel{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.shopbar-panel.open{max-height:560px}
.shopbar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);
  border-top:1px solid var(--hair)}
.shopbar-grid a{background:var(--bg);padding:clamp(18px,2.6vw,28px) clamp(16px,2.4vw,26px);
  display:flex;flex-direction:column;gap:8px;transition:background .35s}
.shopbar-grid a:hover{background:var(--bg-soft)}
.shopbar-grid b{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.8vw,1.4rem);
  line-height:1.1;letter-spacing:-.01em}
.shopbar-grid span{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2)}
/* Member Only Wines — deliberately set apart: full-width band in muted silver,
   because these work differently (login required) from the four shoppable tiles */
.shopbar-members{display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--silver,#A9ADB0);color:var(--ink,#151A1F);
  padding:clamp(16px,2.2vw,24px) var(--pad);border-top:1px solid var(--hair);
  transition:filter .35s}
.shopbar-members:hover{filter:brightness(1.06)}
.shopbar-members b{font-family:var(--display);font-weight:400;
  font-size:clamp(1.05rem,1.8vw,1.4rem);line-height:1.1;letter-spacing:-.01em}
.shopbar-members .mem-tag{display:inline-flex;align-items:center;gap:6px;
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:rgba(21,26,31,.62)}
.shopbar-members .mem-lock{width:9px;height:11px;flex:none}
@media(max-width:760px){
  .shopbar-grid{grid-template-columns:1fr 1fr}
  .shopbar-panel.open{max-height:640px}
}


/* ==========================================================================
   Commerce7 V2 — map their variables onto our tokens.
   Loaded AFTER commerce7.css (see functions.php) so these win.
   Product, collection, club, cart, profile and checkout inherit the design.
   ========================================================================== */
:root{
  --c7-page-width:1360px;
  --c7-page-width-checkout:920px;

  --c7-font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --c7-font-size:16px;
  --c7-font-size-sub:13px;
  --c7-body-text-color:#151A1F;
  --c7-alt-text-color:#6C7278;

  --c7-heading-font-family:"Instrument Serif",Georgia,serif;
  --c7-heading-text-color:#151A1F;
  --c7-heading-font-weight:400;

  --c7-primary-color:#151A1F;
  --c7-primary-color-text:#EDEBE6;
  --c7-primary-color-dark:#000000;
  --c7-primary-color-focus:#3A4249;
  --c7-link-color:#151A1F;

  --c7-bg:#FFFFFF;
  --c7-bg-alt:#F7F6F3;
  --c7-border-color:rgba(21,26,31,.16);
  --c7-border-radius:0;
  --c7-loading-bg:#E5E2DB;

  --c7-modal-border-radius:0;
  --c7-modal-shadow:0 30px 80px rgba(12,16,20,.28);
  --c7-overlay-bg:rgba(12,16,20,.72);
  --c7-progress-bar:#151A1F;

  --c7-pill-bg:#E5E2DB;
  --c7-pill-text-color:#151A1F;

  --c7-field-bg:transparent;
  --c7-field-border-radius:0;
  --c7-field-border-color:rgba(21,26,31,.28);
  --c7-field-focus-color:#151A1F;
  --c7-field-option-selected-color:#151A1F;
}

/* The supplied bottle shot is 120x400. Cap it at native size so it stays sharp
   rather than being upscaled into mush by the 62svh rule above. Raise this once a
   full-resolution original replaces it. */
.feature-img img{max-height:min(62svh,400px)}
@media(max-width:1000px){.feature-img img{max-height:min(46svh,400px)}}

.ecl-badge{margin-left:auto;line-height:0}
.ecl-badge img{width:auto;height:34px;opacity:.55;filter:grayscale(.35);
  transition:opacity .35s var(--ease),filter .35s var(--ease)}
.ecl-badge:hover img{opacity:.95;filter:none}
@media(max-width:640px){
  .foot-note{flex-wrap:wrap;gap:12px}
  .ecl-badge{margin-left:0;width:100%}
  .ecl-badge img{height:30px}
}

/* Nav refinements: the wordmark is absolutely centred so the unequal sides can't
   push it off axis; links step up a size; the commerce utils shrink and hold the
   far right edge. */
/* Three-column grid: the side tracks are equal, so the link groups sit at an
   identical distance either side of the logo instead of hugging their edges. */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav-mark{justify-self:center;margin:0 clamp(30px,4vw,70px)}
.nav > .nav-set:first-of-type{justify-self:end}
.nav > .nav-set:last-of-type{justify-self:start}
.nav .nav-set a{font-size:13px;letter-spacing:.24em}
.nav .nav-cta{font-size:12px}
@media(max-width:1240px){.nav .nav-set a{font-size:11px}}

/* Commerce7's account + cart — smaller than the links, far right. */
/* login stacked over the cart, pinned to the right edge outside the grid */
/* top:0/bottom:0 + justify-content:center centers vertically with no transform,
   so Commerce7's fixed-position cart flyout keeps the real viewport as its anchor. */
.c7-utils{position:absolute;right:var(--pad);top:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:8px;gap:1px}
#c7-account{margin:0 0 0 1ch}
@media(max-width:1000px){.c7-utils{justify-content:center;padding-top:0}}
.c7-utils a{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg);opacity:.66;transition:opacity .3s;white-space:nowrap}
.c7-utils a:hover{opacity:1}
.c7-utils svg{width:15px;height:15px;display:block}
#c7-account,#c7-cart{line-height:1}
@media(max-width:1000px){
  .burger{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%)}
  .c7-utils{flex-direction:row;align-items:center;gap:14px;
    right:calc(var(--pad) + 56px)}
}

.band .form-done{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.band .form-err{margin-top:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.ar-modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(12,16,20,.55);padding:24px}
.ar-modal[hidden]{display:none}
.ar-modal-panel{position:relative;background:#EDEBE6;border:1px solid rgba(21,26,31,.16);
  max-width:440px;width:100%;padding:clamp(32px,5vw,52px) clamp(26px,4vw,44px);text-align:center;
  color:#151A1F}
.ar-modal-bird{display:block;width:150px;height:auto;margin:0 auto 18px;
  --bird-foil:#A9ADB0;--bird-paper:#EDEBE6}
.ar-modal-panel h3{font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.01em;margin-bottom:12px}
.ar-modal-panel p{color:#6C7278;font-size:.95rem;line-height:1.7}
.ar-modal-x{position:absolute;top:8px;right:12px;font-size:24px;line-height:1;padding:8px;
  color:#6C7278;cursor:pointer;transition:color .3s}
.ar-modal-x:hover{color:#151A1F}

/* the albatross, larger — the small cut read as a watermark */
.bird-art,
.page-template-page-tasting-rooms .bird-art,
.page-template-page-vineyard .bird-art,
.page-template-page-wines .bird-art,
.page-template-page-gatherings .bird-art{width:clamp(275px,34vw,425px)}
/* load screen: charcoal wordmark, bird at wordmark scale */
.pre-bird{width:min(273px,66vw)}
#pre .mark{color:var(--muted)}

/* CTA rows read as two orphans at opposite edges — left-justify the pair so the
   action sits with the sentence that earns it. */
.cta-row{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2.5vw,28px)}

/* Commerce7 pages have no hero under the nav, so the transparent top state
   leaves bone links on bone. Force the solid voice. */
.page-template-page-commerce7 .nav{--fg:#151A1F;--hair:rgba(21,26,31,.16);background:#EDEBE6}

/* Commerce7-rendered typography: pull their headings into the site's serif voice
   and give the content the page's rhythm. */
.c7-content #c7-content h1{font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:-.015em;
  margin-bottom:clamp(22px,3vw,38px)}
.c7-content #c7-content h1::after{content:"";display:block;height:1px;
  margin-top:clamp(14px,2vw,22px);
  background:linear-gradient(90deg,var(--silver),rgba(169,173,176,.1))}
/* the site's button voice — outline, tracked caps — everywhere except checkout */
.page-template-page-commerce7 #c7-content button{
  background:transparent;border:1px solid var(--fg);color:var(--fg);
  padding:12px 24px;border-radius:0;
  transition:background .3s,color .3s}
.page-template-page-commerce7 #c7-content button:hover{
  background:var(--fg);color:#EDEBE6}

/* Commerce7's Proceed to Checkout control renders as a plain <a>, so our button-
   only outline rule above never reaches it — and with nothing nearby declaring an
   explicit light colour, it inherits our page's ambient dark ink onto Commerce7's
   own black background, making it unreadable. Target it directly by its href
   (confirmed from the browser's status-bar link preview) rather than guessing at
   Commerce7's internal class names, and force contrast regardless of the cascade. */
a[href*="/checkout"]{
  background:var(--fg) !important;color:#EDEBE6 !important;
  border:1px solid var(--fg) !important;
}
a[href*="/checkout"]:hover{background:transparent !important;color:var(--fg) !important}

/* Confirmed via inspecting the actual DOM: Commerce7's price + quantity live
   together in .c7-order-item__pricing, a flex row with no gap set — that's the
   real cause of the cramped top row, distinct from the separately-styled
   subtotal/total summary component below it. */
.c7-order-item__pricing{gap:20px}

/* The cart drawer's quantity control also sits flush against the panel's right
   edge — scoped to #c7-cart only, so it can't affect inputs anywhere else. */
#c7-cart input,
#c7-cart select{margin-right:20px}
.c7-content #c7-content h2,
.c7-content #c7-content h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.c7-content #c7-content button{letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.c7-content #c7-content input[type=number],
.c7-content #c7-content select{font-size:14px;text-transform:none;letter-spacing:0}

/* the albatross is referenced from the sprite; feed it our two tones */
.pre-bird,.bird-art{--bird-foil:var(--silver);--bird-paper:var(--bg)}

/* Commerce7 renders into this. Their product photography ships on baked-in white,
   so the commerce content sits in a white panel — images dissolve into it instead
   of floating in white rectangles on bone. Page chrome stays on bone. */
.c7-content{max-width:1360px;margin:clamp(10px,2vw,24px) auto var(--gap);padding:0 var(--pad)}
.c7-content > #c7-content{
  /* the page colour pours into the panel instead of stopping at a seam */
  background:linear-gradient(180deg,#EDEBE6 0,#F6F4F0 140px,#FFFFFF 300px);
  border:1px solid var(--hair);border-top:0;
  padding:clamp(30px,4.5vw,68px) clamp(22px,3.5vw,56px) clamp(22px,3.5vw,56px)}
body.c7-checkout .c7-content{margin-top:clamp(24px,4vw,48px)}
body.c7-checkout .c7-content > #c7-content{border:0;padding:clamp(18px,3vw,44px)}
@media(max-width:640px){
  .c7-content{padding:0}
  .c7-content > #c7-content{border-left:0;border-right:0;padding:18px var(--pad)}
}

/* ============================================================
   ACCESSIBILITY PANEL
   Opt-in display preferences, saved per device. This is an
   additive convenience layer, not a substitute for the site's
   default contrast/markup — it only changes what a visitor sees
   after they choose to open it and toggle something.
   ============================================================ */
.a11y-btn{position:fixed;bottom:6%;right:16px;z-index:9000;
  width:48px;height:48px;border-radius:50%;background:var(--bg-soft);color:var(--muted);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--hair);
  box-shadow:0 2px 8px rgba(21,26,31,.12);cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.a11y-btn:hover,.a11y-btn:focus-visible{background:var(--fg);color:var(--bg);
  box-shadow:0 6px 20px rgba(21,26,31,.25);transform:scale(1.06)}
.a11y-btn svg{width:24px;height:24px;fill:currentColor}
.a11y-panel{position:fixed;bottom:6%;right:16px;transform:translateX(12px);
  width:280px;max-width:calc(100vw - 32px);background:var(--bg);border:1px solid var(--hair);
  box-shadow:0 20px 60px rgba(21,26,31,.3);border-radius:4px;padding:22px;z-index:9001;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.a11y-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}
.a11y-panel h4{font-family:var(--display);font-size:1.3rem;margin-bottom:4px}
.a11y-panel .a11y-sub{font-size:.78rem;color:var(--muted);margin-bottom:18px;line-height:1.5}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--hair)}
.a11y-row:first-of-type{border-top:0}
.a11y-row span{font-size:.85rem}
.a11y-steps{display:flex;gap:4px}
.a11y-steps button{width:28px;height:28px;border:1px solid var(--hair);background:transparent;color:var(--fg);
  font-family:var(--ui);font-size:.8rem;cursor:pointer;transition:background .25s,color .25s}
.a11y-steps button.active,.a11y-steps button:hover{background:var(--fg);color:var(--bg)}
.a11y-toggle{width:38px;height:22px;border-radius:11px;background:var(--hair);position:relative;border:0;cursor:pointer;transition:background .25s;flex-shrink:0}
.a11y-toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--bg);transition:transform .25s var(--ease)}
.a11y-toggle.active{background:var(--fg)}
.a11y-toggle.active::after{transform:translateX(16px);background:var(--bg)}
.a11y-reset{display:block;width:100%;margin-top:16px;padding:10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid var(--silver);background:transparent;color:var(--fg);cursor:pointer;transition:background .3s,color .3s}
.a11y-reset:hover{background:var(--fg);color:var(--bg)}
@media(max-width:480px){.a11y-btn,.a11y-panel{right:10px}}

/* ---- applied states, driven by classes on <html> ---- */
html.a11y-text-lg{font-size:112.5%}
html.a11y-text-xl{font-size:125%}
html.a11y-spacing body{line-height:1.9;letter-spacing:.01em}
html.a11y-spacing p,html.a11y-spacing .lede{word-spacing:.06em}
html.a11y-underline a{text-decoration:underline}
/* this is the toggle-triggered version of the contrast fix: swapping the
   same tokens the default palette uses, but only once a visitor opts in */
html.a11y-contrast{--bg:#FFFFFF;--bg-soft:#FFFFFF;--fg:#000000;--muted:#000000;--muted-2:#000000;
  --hair:#000000;--hair-soft:#000000;--silver:#000000;--silver-lt:#000000;--silver-dk:#000000}
html.a11y-reduce-motion *,html.a11y-reduce-motion *::before,html.a11y-reduce-motion *::after{
  animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
html.a11y-reduce-motion [data-r]{opacity:1!important;transform:none!important}

/* ---- skip-to-content link: invisible until keyboard focus reaches it ---- */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:10000}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;
  padding:12px 22px;background:var(--fg);color:var(--bg);font-family:var(--ui);
  font-size:.85rem;letter-spacing:.02em;text-decoration:none;border-radius:2px;
  box-shadow:0 6px 20px rgba(21,26,31,.3)}