/* ============================================================
   5 WELLS WINES
   Tokens sampled from the client's own front label:
   accent #E93546 (the red "5"), iron #645B5B (the waterwheel).
   ============================================================ */
:root{
  --canvas:#F2F1ED;
  --canvas-deep:#E6E4DE;
  --panel:#FBFAF7;
  --text-primary:#15161A;
  --text-secondary:#5B5D63;
  --iron:#645B5B;
  --accent:#E93546;
  --accent-deep:#C21B2E;
  --accent-muted:rgba(233,53,70,.14);
  --hero-text:#F5F4F0;
  --line:rgba(21,22,26,.14);
  --line-strong:rgba(21,22,26,.34);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --dsp:'Archivo',system-ui,sans-serif;
  --bod:'Newsreader',Georgia,serif;
  --mno:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--bod);font-weight:300;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--dsp);font-weight:700;margin:0;letter-spacing:-.02em;line-height:1.02}
p{margin:0}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--accent-deep);color:#fff;
  padding:11px 16px;border-radius:4px;font-family:var(--mno);font-size:12px;text-decoration:none;transition:top .25s var(--ease)}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:2px}

/* ---------- the fixed environment layer: one place, slowly drifting ---------- */
.env{
  position:fixed;inset:-6%;pointer-events:none;z-index:0;
  background:
    radial-gradient(62% 46% at 18% 8%,rgba(100,91,91,.085),transparent 62%),
    radial-gradient(54% 42% at 86% 72%,rgba(233,53,70,.05),transparent 66%),
    radial-gradient(80% 60% at 50% 110%,rgba(100,91,91,.06),transparent 70%);
  animation:envdrift 96s var(--ease) infinite alternate;animation-delay:-27s;
  will-change:transform;
}
@keyframes envdrift{to{transform:translate3d(0,-2.2%,0) scale(1.07)}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:18px clamp(18px,4vw,44px);
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(242,241,237,.88);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
/* Its own scrim while it sits over the photography: a bright midday sky will
   not carry light type on its own. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(8,9,14,.62) 0%,rgba(8,9,14,.24) 62%,rgba(8,9,14,0) 100%);
  transition:opacity .5s var(--ease)}
.nav.over::before{opacity:1}
.nav.solid::before{opacity:0}
/* THE WORDMARK, set the way the bottle label sets it: the 5 in the label red,
   raised like a superscript, tucked to the left of the W and overlapping it.
   Everything is in em so one component works at nav size and at hero size. */
.wm{display:inline-block;white-space:nowrap;line-height:1;font-family:var(--dsp);letter-spacing:-.03em}
.wm .n{font-weight:700;font-size:.82em;color:var(--accent);display:inline-block;
  vertical-align:.46em;position:relative;z-index:2}
.wm .t{font-weight:500;color:var(--text-primary);display:inline-block;
  margin-left:-.18em;position:relative;z-index:1}

.brand{display:inline-block;text-decoration:none;line-height:1;white-space:nowrap;
  font-family:var(--dsp);font-size:23px;letter-spacing:-.03em}
.brand .n{font-weight:700;font-size:.82em;color:var(--accent);display:inline-block;
  vertical-align:.46em;position:relative;z-index:2}
.brand .t{font-weight:500;color:var(--text-primary);display:inline-block;
  margin-left:-.18em;position:relative;z-index:1}
.nav.over .brand .t,.nav.over .nav-links a{color:#FFF;text-shadow:0 1px 2px rgba(5,5,10,.9),0 2px 14px rgba(5,5,10,.7)}
.nav.over .nav-links .navcta{border-bottom-color:rgba(255,255,255,.55)}
.nav-links{display:flex;gap:clamp(14px,2.2vw,30px);align-items:center}
.nav-links a{font-family:var(--mno);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--text-secondary);transition:color .3s var(--ease)}
.nav-links a:hover{color:var(--accent-deep)}
.nav-links .navcta{color:var(--accent-deep);border-bottom:1px solid var(--accent-muted);padding-bottom:2px}
@media (max-width:760px){.nav-links a:not(.navcta){display:none}}

/* ---------- the signature: the cable and the waterwheel ---------- */
/* Hangs BELOW the nav bar: at the top of the page the wheel and the wordmark
   both live in the left margin and would otherwise sit on top of each other. */
.rig{
  position:fixed;left:clamp(6px,1.6vw,24px);top:88px;bottom:0;width:58px;z-index:40;
  pointer-events:none;color:var(--text-primary);
}
.rig .wheel{width:42px;height:79px;margin:0 0 0 6px;display:block;opacity:.94}
.rig.on-dark .wheel{opacity:.86}
.rig .wheel .spin{transform-origin:32px 71px}
.rig .cable{position:absolute;left:26px;top:70px;bottom:40px;width:2px;overflow:hidden}
.rig .cable i{display:block;width:100%;height:100%;background:linear-gradient(180deg,currentColor,rgba(21,22,26,0));
  transform:scaleY(var(--gp,0));transform-origin:top;}
.rig.on-dark .cable i{background:linear-gradient(180deg,var(--iron),rgba(100,91,91,.25))}
.rig .ticks{position:absolute;left:0;top:70px;bottom:40px;margin:0;padding:0;list-style:none}
.rig .ticks li{
  position:absolute;left:22px;display:flex;align-items:center;gap:8px;
  font-family:var(--mno);font-size:9.5px;letter-spacing:.16em;color:var(--text-secondary);
  opacity:0;transition:opacity .6s var(--ease),color .5s var(--ease);white-space:nowrap;
}
.rig .ticks li::before{content:"";width:11px;height:1px;background:currentColor;flex:none}
.rig .ticks li.lit{opacity:1;color:var(--accent-deep)}
/* the cable has to stay readable where the page goes dark */
.rig{transition:color .6s var(--ease)}
.rig.on-dark{color:#FFFFFF}
.rig.on-dark .ticks li{color:rgba(242,241,237,.6)}
.rig.on-dark .ticks li.lit{color:#F0737F}
@media (max-width:1180px),(max-height:620px){.rig{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:860vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0B0C10}
.still{position:absolute;inset:0;will-change:transform;transform:scale(1.03)}
.still img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  opacity:0;transition:opacity .7s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-ready .still{opacity:0;transition:opacity .7s var(--ease)}

/* legibility layer 1: the global base scrim, always on */
/* Tuned against the real photography: bright midday sky at the top and lit
   vine rows at the bottom, so both ends get their own falloff. */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 130% 104% at 58% 50%,rgba(10,10,18,0) 44%,rgba(10,10,18,.40) 100%),
    linear-gradient(180deg,rgba(10,10,18,.46) 0%,rgba(10,10,18,0) 26%);
}

.bands{position:absolute;inset:0}
.band{
  position:absolute;left:0;right:0;opacity:0;color:var(--hero-text);
  text-shadow:var(--tshadow);padding:0 clamp(20px,6vw,90px);
  /* isolation is load-bearing: without it the band makes no stacking context at
     opacity 1, so the ::before scrim below escapes to the stage and paints
     BEHIND the photograph. The scrim then does nothing at exactly the moment
     the text is fully visible. The worst-pixel audit caught this at 1.05:1. */
  isolation:isolate;
}
.band .btn{text-shadow:none}
/* legibility layer 2: the per-band scrim, riding the band's own --k.
   Two layers rather than one. The radial alone left the corners of the text box
   sitting on the bright hazy horizon, which the worst-pixel audit caught at
   1.07:1. The linear band underneath dims the whole caption lane evenly; the
   radial still adds the depth. It dies out well before the frame edges, so the
   corners of the photograph stay live. */
.band::before{
  content:"";position:absolute;inset:-16% -10%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:
    radial-gradient(ellipse 58% 78% at 22% 50%,
      rgba(5,5,10,var(--sa,.5)) 0%,rgba(5,5,10,calc(var(--sa,.5)*.68)) 46%,rgba(5,5,10,0) 80%);
}
/* Pushed down off the hazy horizon band into the mid-tone valley. */
.b1{top:31%}.b2{top:33%}.b3{top:33%}.b4{top:33%}.b5{top:23%}
.band .line{
  font-family:var(--dsp);font-weight:700;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(24px,2.7vw,39px);max-width:13ch;margin:0;text-align:left;
}
.band .w{display:inline-block}
.band .c{display:inline-block}

/* entrance: drift-down (band 1, echoes fog settling) */
.band[data-fx="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* entrance: blur-to-sharp (band 2, echoes haze clearing) */
.blurpair{position:relative;display:block}
.blurpair .soft{filter:blur(11px);opacity:calc(1 - var(--k,0));position:absolute;inset:0}
.blurpair .sharp{opacity:var(--k,0)}
/* entrance: grid snap-align (band 3, echoes rows resolving) */
.band[data-fx="grid"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
/* entrance: scatter (band 4, echoes wind) */
.band[data-fx="scatter"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc)) * var(--jx,0px)),calc((1 - var(--kc)) * var(--jy,0px)))
            rotate(calc((1 - var(--kc)) * var(--jr,0deg)));
}
/* entrance: word rise into a staged settle (band 5, echoes arrival) */
.band[data-fx="settle"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 24px));
}
.settle-mark{display:flex;justify-content:flex-start;margin-bottom:16px;opacity:var(--k,0)}
.settle-mark svg{width:32px;height:60px;color:var(--hero-text);opacity:.88}
.band .sub{
  --ks:clamp(0,(var(--k,0) - .48)*4,1);
  opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 16px));
  font-family:var(--bod);font-weight:300;font-size:clamp(15px,1.5vw,19px);line-height:1.55;
  max-width:24ch;margin:20px 0 0;text-align:left;color:rgba(245,244,240,.93);
}
.band .cta-row{
  --kb:clamp(0,(var(--k,0) - .7)*5,1);
  opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 16px));
  display:flex;justify-content:flex-start;margin-top:28px;
}
.hero-static{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 26px;color:var(--hero-text);text-shadow:var(--tshadow);
  isolation:isolate}
/* Its own scrim, for the same reason the bands have one: cover-cropped to a
   phone the bright building lands directly behind the subline. */
.hero-static::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 116% 46% at 50% 48%,rgba(5,5,10,.74) 0%,rgba(5,5,10,.52) 52%,rgba(5,5,10,0) 80%),
    linear-gradient(180deg,rgba(5,5,10,.42) 0%,rgba(5,5,10,0) 36%)}
.hero-static h1{font-size:clamp(31px,8.2vw,56px);letter-spacing:-.035em;line-height:1.05;max-width:16ch}
.hero-static p{font-family:var(--bod);font-weight:300;font-size:clamp(15px,4vw,18px);
  max-width:38ch;margin:18px auto 0;color:rgba(245,244,240,.93)}
.hero-static .btn{margin-top:26px;text-shadow:none}

.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;opacity:var(--cue,1);
  font-family:var(--mno);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(245,244,240,.7);display:flex;flex-direction:column;align-items:center;gap:9px}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(245,244,240,.75),transparent);
  animation:cuedrop 2.8s var(--ease) infinite;animation-delay:-.7s}
@keyframes cuedrop{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
.loadring{position:absolute;right:26px;bottom:26px;width:34px;height:34px;color:rgba(245,244,240,.72);
  opacity:0;transition:opacity .4s var(--ease);z-index:6}
.loadring.on{opacity:1}
.loadring circle{transform:rotate(-90deg);transform-origin:24px 24px;transition:stroke-dashoffset .12s linear}
@media (max-height:560px){.cue{display:none}}

/* ============================================================
   THE PAGE BELOW
   ============================================================ */
main{position:relative;z-index:2;background:var(--canvas)}
.sec{position:relative;padding:clamp(80px,11vw,150px) clamp(20px,5vw,48px)}
.wrap{max-width:1120px;margin:0 auto}
.kicker{font-family:var(--mno);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.kicker::after{content:"";height:1px;background:var(--line);flex:1;
  transform:scaleX(0);transform-origin:left;transition:transform 1.15s var(--ease) .12s}
.sec.in .kicker::after{transform:scaleX(1)}
.h2{font-size:clamp(28px,4.4vw,54px);letter-spacing:-.032em;line-height:1.05;max-width:17ch}
.lede{font-size:clamp(16px,1.6vw,19.5px);line-height:1.68;color:var(--text-secondary);max-width:60ch;margin-top:20px}
.lede + .lede{margin-top:16px}

/* entrance choreography: stagger set in JS via --d, retired after the run */
.sec .rise{opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease) var(--d,0s),transform .85s var(--ease) var(--d,0s)}
.sec.in .rise{opacity:1;transform:none}

/* S1 the idea: a centred statement, nothing else on the page */
#idea{text-align:center;padding-top:clamp(96px,14vw,180px)}
#idea .kicker{justify-content:center}
#idea .kicker::after{display:none}
#idea .h2{max-width:22ch;margin:0 auto;font-size:clamp(30px,5.2vw,64px)}
#idea .lede{margin:30px auto 0;text-align:left;max-width:54ch}
#idea .drawn{display:block;margin:44px auto 0;width:min(360px,72vw);height:2px;background:var(--line-strong);
  transform:scaleX(0);transform-origin:center;transition:transform 1.4s var(--ease) .3s}
#idea.in .drawn{transform:scaleX(1)}

/* S2 the site: text and image, stat row beneath */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,66px);align-items:center}
/* a tall portrait dwarfs its text column, sothat pair aligns at the top instead */
.split.top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:34px}}
.shot{position:relative;overflow:hidden;border-radius:2px;background:var(--canvas-deep)}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transform:scale(1.05);transition:transform 1.6s var(--ease)}
/* a portrait photograph keeps its own shape instead of being cropped to landscape */
.shot.tall img{aspect-ratio:auto;height:auto}
.sec.in .shot img{transform:scale(1)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(21,22,26,.12));}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(40px,6vw,70px)}
.stats div{background:var(--canvas);padding:22px 18px}
.stats dt{font-family:var(--dsp);font-weight:700;font-size:clamp(22px,2.8vw,34px);letter-spacing:-.03em}
.stats dd{margin:6px 0 0;font-family:var(--mno);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-secondary);line-height:1.5}
@media (max-width:720px){.stats{grid-template-columns:1fr 1fr}}

/* S3 the soil: the one interactive moment */
#soil{background:var(--canvas-deep)}
.coreGrid{display:grid;grid-template-columns:210px 1fr;gap:clamp(30px,5vw,70px);align-items:center;margin-top:44px}
@media (max-width:820px){.coreGrid{grid-template-columns:1fr;gap:34px}}
.coreStack{position:relative;height:340px;display:flex;align-items:flex-end;justify-content:center}
/* Graduated like a real core tube, so it reads as an instrument rather than an
   empty grey box before anyone touches it. */
.tube{position:relative;width:104px;height:100%;border:1px solid var(--line-strong);border-radius:3px;
  overflow:hidden;
  background:
    repeating-linear-gradient(180deg,rgba(21,22,26,.16) 0 1px,transparent 1px 38px),
    linear-gradient(90deg,rgba(21,22,26,.07),rgba(21,22,26,.01) 32%,rgba(21,22,26,.06))}
/* stops just shy of the bottom, so the top of the core is already showing */
.coreCol{position:absolute;left:0;right:0;bottom:0;height:100%;
  transform:translateY(calc((1 - var(--hp,0)) * 94%));will-change:transform}
.coreCol span{display:block;width:100%}
.l1{height:14%;background:#4A3F35}
.l2{height:40%;background:#C9B896}
.l3{height:34%;background:#8D8C86}
.l4{height:12%;background:#E7E3D8;position:relative}
.l4::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:16px;transform:translate(-50%,-50%) rotate(-12deg);
  border:2px solid var(--accent-deep);border-radius:50% 50% 44% 44%;opacity:calc(var(--hp,0)*var(--hp,0))}
.tubeMask{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(230,228,222,.95) 0%,rgba(230,228,222,0) 16%)}
.holdBtn{margin-top:20px;width:100%;font-family:var(--mno);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;background:none;border:1px solid var(--line-strong);color:var(--text-primary);
  padding:13px 10px;border-radius:3px;cursor:pointer;transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
  touch-action:none;-webkit-user-select:none;user-select:none}
.holdBtn:hover{border-color:var(--accent-deep);color:var(--accent-deep)}
.holdBtn.done{border-color:var(--accent-deep);background:var(--accent-muted);color:var(--accent-deep)}
.layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
/* The reward is the accent bar drawing down and the label lighting, never the
   body text fading. Description copy stays at full contrast at all times. */
.layers li{padding:16px 0 16px 20px;border-top:1px solid var(--line);position:relative;
  --lk:clamp(0,(var(--hp,0) - var(--lt,0))*7,1);
  transform:translateX(calc((1 - var(--lk)) * 8px));transition:transform .12s linear}
.layers li::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:2px;
  background:var(--accent);transform:scaleY(var(--lk));transform-origin:top}
.layers li:last-child{border-bottom:1px solid var(--line)}
.layers .lb{font-family:var(--mno);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-deep);display:block;margin-bottom:5px;
  opacity:calc(.5 + .5*var(--lk))}
.layers .lt{font-size:17px;line-height:1.5;color:var(--text-primary)}
.coreEnd{margin-top:26px;font-family:var(--dsp);font-weight:500;font-size:clamp(17px,2vw,23px);
  letter-spacing:-.02em;opacity:var(--hp,0);transition:opacity .3s var(--ease)}

/* S4 the farming: image left, text right */
.split.rev .shot{order:-1}
@media (max-width:900px){.split.rev .shot{order:0}}
.clones{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;align-items:baseline}
.clones span{font-family:var(--mno);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);padding:7px 12px;border-radius:99px;color:var(--text-secondary)}
.clones span.hd{border:0;padding-left:0;color:var(--accent-deep)}

/* S5 the wines: three label plates, identical treatment */
.lineup{margin:clamp(36px,4.5vw,54px) auto 0;max-width:min(408px,80vw);position:relative}
.lineup img{width:100%;height:auto;border-radius:2px;
  transform:scale(1.03);transition:transform 1.6s var(--ease)}
.sec.in .lineup img{transform:scale(1)}
.sig{margin-top:26px;font-family:var(--mno);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-secondary)}
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);margin-top:clamp(40px,5vw,56px)}
@media (max-width:900px){.plates{grid-template-columns:1fr;max-width:430px;margin-inline:auto}}
.plate{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;min-height:100%;position:relative;overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.plate:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 14px 40px rgba(21,22,26,.07)}
.plate .pm{color:var(--iron);opacity:.5;margin-bottom:26px}
.plate .pm svg{width:25px;height:47px}
.plate .pnum{font-family:var(--dsp);font-weight:700;font-size:30px;color:var(--accent);
  letter-spacing:-.04em;line-height:1;display:block;margin-bottom:2px}
.plate h3{font-size:clamp(21px,2.3vw,27px);letter-spacing:-.03em;line-height:1.08;font-weight:500}
.plate .papp{font-family:var(--mno);font-size:10px;letter-spacing:.2em;color:var(--text-secondary);
  margin-top:12px;line-height:1.9}
.plate .pnote{margin-top:20px;font-size:16px;line-height:1.62;color:var(--text-secondary);flex:1}
.plate .pspec{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mno);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep)}

/* S6 proof: quotes */
#proof{background:var(--text-primary);color:#F2F1ED}
#proof .kicker{color:#E9707C}
#proof .kicker::after{background:rgba(242,241,237,.2)}
#proof .h2{color:#F2F1ED;max-width:20ch}
#proof .lede{color:rgba(242,241,237,.62)}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);margin-top:56px}
@media (max-width:880px){.quotes{grid-template-columns:1fr;gap:38px}}
.quotes blockquote{margin:0;padding-left:24px;border-left:2px solid var(--accent);position:relative}
.quotes q{font-family:var(--bod);font-weight:300;font-style:italic;font-size:clamp(17px,1.9vw,22px);
  line-height:1.56;quotes:none;color:rgba(242,241,237,.94)}
.quotes q::before,.quotes q::after{content:""}
.quotes cite{display:block;margin-top:18px;font-family:var(--mno);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;font-style:normal;color:rgba(242,241,237,.55);line-height:1.8}
.buyers{margin-top:clamp(44px,6vw,72px);padding-top:28px;border-top:1px solid rgba(242,241,237,.16)}
.buyers p{font-family:var(--mno);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,241,237,.5);margin-bottom:18px}
.buyers ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.buyers li{font-family:var(--dsp);font-weight:500;font-size:clamp(14px,1.5vw,18px);
  color:rgba(242,241,237,.82);letter-spacing:-.01em}

/* S7 faq */
.faq{margin-top:48px;border-top:1px solid var(--line)}
.faq .qa{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(20px,4vw,54px);
  padding:clamp(22px,2.8vw,32px) 0;border-bottom:1px solid var(--line)}
@media (max-width:820px){.faq .qa{grid-template-columns:1fr;gap:10px}}
.faq dt{font-family:var(--dsp);font-weight:500;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.02em;line-height:1.3}
.faq dd{margin:0;color:var(--text-secondary);font-size:16.5px;line-height:1.64}

/* S8 join */
#join{text-align:center;background:var(--canvas-deep);position:relative;overflow:hidden}
#join .kicker{justify-content:center}
#join .kicker::after{display:none}
#join .h2{margin:0 auto;font-size:clamp(32px,5.6vw,68px)}
#join .lede{margin:22px auto 0;text-align:center;max-width:46ch}
.jform{display:flex;gap:10px;max-width:520px;margin:40px auto 0;flex-wrap:wrap}
.jform label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.jform input{flex:1 1 240px;min-width:0;background:var(--canvas);border:1px solid var(--line-strong);
  border-radius:3px;padding:15px 17px;font-family:var(--bod);font-weight:300;font-size:16.5px;color:var(--text-primary);
  transition:border-color .35s var(--ease)}
.jform input::placeholder{color:rgba(91,93,99,.62)}
.jform input:focus{border-color:var(--accent-deep);outline:none;box-shadow:0 0 0 3px var(--accent-muted)}
.jform input[aria-invalid="true"]{border-color:var(--accent-deep)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--accent-deep);color:#fff;
  border:1px solid var(--accent-deep);border-radius:3px;padding:15px 26px;cursor:pointer;
  font-family:var(--mno);font-size:11px;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{background:#A81527;transform:translateY(-1px);box-shadow:0 10px 26px rgba(194,27,46,.25)}
.btn.ghost{background:transparent;color:var(--hero-text);border-color:rgba(245,244,240,.5)}
.btn.ghost:hover{background:rgba(245,244,240,.12);box-shadow:none}
.fnote{margin:18px auto 0;min-height:22px;font-family:var(--mno);font-size:11px;letter-spacing:.1em;
  color:var(--accent-deep);opacity:0;transition:opacity .4s var(--ease)}
.fnote.on{opacity:1}
.jdone{display:none;margin:40px auto 0;max-width:44ch}
.jdone.on{display:block}
.jdone p{font-family:var(--dsp);font-weight:500;font-size:clamp(19px,2.4vw,26px);letter-spacing:-.02em}
form.hid{display:none}

/* footer */
footer{background:var(--text-primary);color:rgba(242,241,237,.72);padding:clamp(54px,7vw,84px) clamp(20px,5vw,48px) 40px}
.frow{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
footer .brand .t{color:#F2F1ED}
.fnav{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
footer a{font-family:var(--mno);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:rgba(242,241,237,.62);transition:color .3s var(--ease)}
footer a:hover{color:var(--accent)}
.fmeta{margin-top:44px;padding-top:24px;border-top:1px solid rgba(242,241,237,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mno);font-size:10.5px;letter-spacing:.1em;color:rgba(242,241,237,.42);line-height:1.9}

/* one living element per section, at whisper level */
.glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(118px);opacity:0}
.sec.in .glow{animation:breathe 11s ease-in-out infinite;animation-delay:-3.4s}
@keyframes breathe{0%,100%{opacity:.06;transform:scale(1)}50%{opacity:.13;transform:scale(1.08)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .holdBtn{min-height:44px}
  .nav-links a{min-height:44px;display:inline-flex;align-items:center}
}

/* ============================================================
   THE FIVE STATIC-HERO GATES.
   These five conditions must match the GATES array in JS exactly.
   ============================================================ */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:100svh}
  .bands{display:none}
  .hero-static{display:flex;background:url('hero-ending.jpg') 50% 50%/cover no-repeat}
  .still{transform:scale(1.02) !important}
  .cue{display:none}
  .loadring{display:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important}
  html{scroll-behavior:auto}
  .sec .rise{opacity:1;transform:none}
  .sec .kicker::after,#idea .drawn{transform:scaleX(1)}
  .shot img{transform:scale(1)}
  .rig .cable i{transform:scaleY(1)}
}

/* ============================================================
   INNER PAGES
   Shared by vineyard, winemaking, our story, join us, purchase.
   The landing page keeps the scroll hero; every other page opens
   on a compact photographic header instead.
   ============================================================ */
.pagehero{position:relative;min-height:min(64svh,680px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;background:#0B0C10}
.pagehero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pagehero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,9,14,.62) 0%,rgba(8,9,14,.14) 40%,rgba(8,9,14,.78) 100%)}
.pagehero .wrap{width:100%;padding-bottom:clamp(38px,5.5vw,68px);padding-top:clamp(96px,12vw,140px)}
.pagehero .kicker{color:#F0737F}
.pagehero .kicker::after{background:rgba(242,241,237,.3);transform:scaleX(1)}
.pagehero h1{font-size:clamp(34px,6.2vw,74px);letter-spacing:-.035em;line-height:1.02;color:#FFF;
  text-shadow:var(--tshadow);max-width:15ch}
.pagehero .plede{margin-top:20px;max-width:54ch;color:rgba(245,244,240,.94);
  font-size:clamp(16px,1.7vw,20px);line-height:1.62;text-shadow:0 2px 14px rgba(5,5,10,.8)}

.prose{max-width:66ch}
.prose p{margin-top:20px;font-size:17.5px;line-height:1.72;color:var(--text-secondary)}
.prose p:first-child{margin-top:0}
.prose p b{color:var(--text-primary);font-weight:400}

/* labelled fact rows */
.spec{margin-top:clamp(36px,5vw,58px);border-top:1px solid var(--line)}
.spec .row{display:grid;grid-template-columns:210px 1fr;gap:clamp(16px,3vw,44px);
  padding:19px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec dt{font-family:var(--mno);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-deep);margin:0}
.spec dd{margin:0;font-size:17px;line-height:1.62}
@media (max-width:720px){.spec .row{grid-template-columns:1fr;gap:7px}}

/* numbered steps */
.steps{counter-reset:st;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps li{list-style:none;background:var(--canvas);padding:clamp(22px,3vw,34px);
  display:grid;grid-template-columns:70px 1fr;gap:clamp(14px,2.4vw,30px);align-items:start}
.steps li::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  font-family:var(--dsp);font-weight:700;font-size:27px;color:var(--accent);letter-spacing:-.04em;line-height:1}
.steps h3{font-size:clamp(19px,2.1vw,24px);letter-spacing:-.022em;font-weight:500}
.steps p{margin-top:11px;color:var(--text-secondary);font-size:16.5px;line-height:1.66;max-width:58ch}
@media (max-width:640px){.steps li{grid-template-columns:1fr;gap:10px}}

/* three supporting cards */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(40px,5vw,58px)}
@media (max-width:880px){.pillars{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.pillar{background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:clamp(22px,2.6vw,32px);transition:border-color .5s var(--ease),transform .5s var(--ease)}
.pillar:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.pillar .pk{font-family:var(--mno);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep)}
.pillar h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.022em;font-weight:500;margin-top:13px}
.pillar p{margin-top:12px;color:var(--text-secondary);font-size:16px;line-height:1.64}

/* the story timeline */
.tl{margin-top:clamp(40px,5vw,60px);border-left:2px solid var(--line);
  padding-left:clamp(24px,3.4vw,40px);list-style:none}
.tl .ev{position:relative;padding-bottom:clamp(32px,4.4vw,50px)}
.tl .ev:last-child{padding-bottom:0}
.tl .ev::before{content:"";position:absolute;left:calc((clamp(24px,3.4vw,40px) + 6px) * -1);top:7px;
  width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--canvas)}
.tl .yr{font-family:var(--mno);font-size:11px;letter-spacing:.18em;color:var(--accent-deep)}
.tl h3{font-size:clamp(19px,2.1vw,24px);letter-spacing:-.022em;font-weight:500;margin-top:9px}
.tl p{margin-top:11px;color:var(--text-secondary);font-size:16.5px;line-height:1.66;max-width:58ch}

/* the purchase list */
.buylist{margin-top:clamp(40px,5vw,58px);border-top:1px solid var(--line)}
.buyrow{display:grid;grid-template-columns:132px 1fr auto;gap:clamp(20px,3.4vw,48px);
  padding:clamp(26px,3.2vw,38px) 0;border-bottom:1px solid var(--line);align-items:center}
.bshot{width:100%;border-radius:2px;overflow:hidden;background:var(--canvas-deep)}
.bshot img{width:100%;height:auto;display:block}
.buyrow h3{font-size:clamp(19px,2.2vw,26px);letter-spacing:-.025em;font-weight:500}
.buyrow .meta{font-family:var(--mno);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);margin-top:9px;line-height:1.85}
.buyrow .note{margin-top:13px;color:var(--text-secondary);font-size:16px;line-height:1.62;max-width:48ch}
.buyrow .buy{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.buyrow .price{font-family:var(--mno);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-deep)}
@media (max-width:860px){
  .buyrow{grid-template-columns:104px 1fr;row-gap:18px}
  .buyrow .buy{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
}

/* the shared closing band */
.ctaband{background:var(--canvas-deep);text-align:center}
.ctaband .kicker{justify-content:center}
.ctaband .kicker::after{display:none}
.ctaband .h2{margin:0 auto}
.ctaband .lede{margin:20px auto 0;text-align:center}
.ctaband .btn{margin-top:32px}

/* the current page, marked in the nav */
.nav-links a[aria-current="page"]{color:var(--accent-deep)}
.nav.over .nav-links a[aria-current="page"]{color:#FFF;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}

/* the caption column starts clear of the cable on wide screens */
@media (min-width:1181px){.band{padding-left:clamp(110px,8vw,118px)}}

/* the estate statement, set larger than body copy because it is the page voice */
.statement{margin-top:24px}
.statement p{font-size:clamp(18px,2.1vw,24px);line-height:1.6;color:var(--text-primary);max-width:60ch;margin:0}
#site .drawn,#statement .drawn{display:block;margin:44px 0 0;width:min(300px,60vw);height:2px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .3s}
#site.in .drawn,#statement.in .drawn{transform:scaleX(1)}

/* the block map: a working document, shown large enough to actually read */
.mapfig{margin:clamp(36px,4.5vw,56px) 0 0}
.mapfig img{width:100%;height:auto;border:1px solid var(--line);border-radius:2px;background:var(--canvas-deep)}
.mapfig figcaption{margin-top:14px;font-family:var(--mno);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary);line-height:1.8}

/* the settle band carries the wordmark itself, so it gets its own entrance */
.band .wmline{--kc:clamp(0,var(--k,0)*2.4,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 26px));margin:0}
.band .wmline .wm{font-size:clamp(40px,5.4vw,78px)}
.band .wmline .wm .t{color:var(--hero-text)}
.hero-static .wm{font-size:clamp(38px,10vw,62px)}
.hero-static .wm .t{color:#FFF}

/* a caption under a section photograph */
/* a captioned figure: the panel tint and the gradient belong to the picture,
   not to the caption underneath it */
figure.shot{margin:0;background:transparent;overflow:visible}
figure.shot::after{content:none}
figure.shot img{border-radius:2px;background:var(--canvas-deep)}
.shot figcaption{margin-top:14px;font-family:var(--mno);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);line-height:1.8;max-width:46ch}

/* a pair of photographs side by side, each keeping its own shape */
.pair{display:grid;grid-template-columns:1.33fr 1fr;gap:clamp(16px,2.6vw,30px);
  align-items:start;margin-top:clamp(36px,4.5vw,56px)}
.pair figure{margin:0}
.pair img{width:100%;height:auto;display:block;border-radius:2px;background:var(--canvas-deep)}
.pair figcaption{margin-top:12px;font-family:var(--mno);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);line-height:1.7}
@media (max-width:760px){.pair{grid-template-columns:1fr;gap:28px}}

/* ============================================================
   THE ORIGIN HEADER
   A full width photograph opening the page, with the mark and
   wordmark set over it. The heading lives below the photo, not on it.
   ============================================================ */
.originhero{position:relative;width:100%;overflow:hidden;background:#0B0C10;
  height:min(70svh,700px);isolation:isolate}
.originhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;z-index:-2}
.originhero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,14,.46) 0%,rgba(8,9,14,.04) 30%,rgba(8,9,14,.14) 100%)}
.originhero .wrap{height:100%;display:flex;align-items:flex-start;
  padding-top:clamp(96px,13vw,148px)}
.lockup{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);
  color:#FFF;text-shadow:0 2px 18px rgba(5,5,10,.6)}
.lockup .mark{width:clamp(38px,4.4vw,58px);height:auto;color:rgba(255,255,255,.94);
  filter:drop-shadow(0 2px 12px rgba(5,5,10,.55))}
.lockup .wm{font-size:clamp(34px,5vw,62px)}
.lockup .wm .t{color:#FFF}
@media (max-width:720px){.originhero{height:min(58svh,460px)}}

/* the origin story sits under the photograph */
#origin h1{font-family:var(--dsp);font-weight:700}
/* the origin story: heading centred, body running the full content width */
.origin-title{text-align:center;max-width:none}
/* the story runs the full width in two columns, so it spans the page
   without the line length becoming unreadable */
.origin-body{max-width:none;margin-top:30px;columns:2;column-gap:clamp(34px,4.5vw,68px)}
.origin-body p{max-width:none;break-inside:avoid;margin-top:0;margin-bottom:20px}
@media (max-width:860px){.origin-body{columns:1}.origin-body p{margin-bottom:18px}}

/* A page that opens with words rather than a photographic header still has
   to clear the fixed nav bar, which a photo header handled with its own
   padding. */
.sec.opener{padding-top:clamp(128px,14vw,182px)}
.sec.opener h1{font-size:clamp(30px,4.4vw,56px)}

/* THE TIMELINE ROW: the run of events, with the planting photographs beside it */
.tlrow{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,3.4vw,46px);align-items:start}
.tlshots{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(40px,5vw,60px)}
.tlshots figure{margin:0}
.tlshots img{width:100%;height:auto;display:block;border-radius:2px;background:var(--canvas-deep)}
.tlshots figcaption{margin-top:12px;font-family:var(--mno);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary);line-height:1.6}
@media (max-width:900px){.tlrow{grid-template-columns:1fr}
  .tlshots{flex-direction:row}
  .tlshots figure{flex:1 1 0;min-width:0}}
@media (max-width:560px){.tlshots{flex-direction:column}}

/* THE FIVE WELLS: the five sources the name draws on, set evenly across the page */
.fivewells{list-style:none;margin:clamp(32px,4vw,48px) 0 clamp(34px,4.4vw,52px);padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fivewells li{background:var(--canvas);padding:clamp(22px,2.6vw,30px) 10px clamp(20px,2.4vw,28px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
/* a waterwheel over each well, on a line running down to the word */
.fivewells .wheel{position:relative;display:block;width:clamp(26px,2.6vw,32px);
  height:clamp(26px,2.6vw,32px);color:var(--iron);opacity:.82}
.fivewells .wheel svg{width:100%;height:100%;display:block}
.fivewells .wheel::after{content:"";position:absolute;left:50%;top:100%;
  width:1px;height:clamp(16px,1.9vw,22px);transform:translateX(-50%);
  background:linear-gradient(180deg,var(--iron),rgba(100,91,91,.3))}
.fivewells .w{margin-top:calc(clamp(16px,1.9vw,22px) + 9px);
  font-family:var(--dsp);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(16px,1.7vw,20px);color:var(--text-primary);line-height:1.2}

@media (max-width:640px){.fivewells{grid-template-columns:1fr 1fr}}
@media (max-width:360px){.fivewells{grid-template-columns:1fr}}

/* THE SOIL ROW: the description and its two pieces of evidence, all level */
.soilrow{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(20px,2.8vw,38px);align-items:start}
/* the two rock photographs tile down the right-hand column */
.soilstack{display:flex;flex-direction:column;gap:clamp(20px,2.8vw,38px)}
.soilrow figure{margin:0}
.soilrow img{width:100%;height:auto;display:block;border-radius:2px;background:var(--canvas-deep)}
.soilrow figcaption{margin-top:12px;font-family:var(--mno);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary);line-height:1.7}
@media (max-width:1000px){.soilrow{grid-template-columns:1fr}
  .soilstack{flex-direction:row}
  .soilstack figure{flex:1 1 0;min-width:0}}
@media (max-width:620px){.soilstack{flex-direction:column}}

/* THE HEADER AERIAL
   A short aerial behind a page header. The frame starts black, the clip fades
   up out of it, runs once and rests on its last frame. The still underneath is
   the fallback: phones, reduced motion, and any load that fails or stalls. */
.pagehero .pvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;z-index:-2;opacity:0;transition:opacity 1.7s var(--ease)}
.pagehero.vid-ready .pvid{opacity:1}
/* A PHOTOGRAPHIC HEADER THAT OPENS OUT OF BLACK
   Same idea as the aerial, for a still: the frame is black from the first
   paint and the photograph fades up once it has actually decoded, so it
   never pops in half-loaded. site.js adds .photo-in; the noscript rule in
   the page is the floor if the script never runs. */
.photo-fade{background:#000}
.photo-fade>img{opacity:0;transition:opacity 1.6s var(--ease)}
.photo-fade.photo-in>img{opacity:1}
@media (prefers-reduced-motion:reduce){
  .photo-fade>img{transition:none}
}

/* The black frame is declared here rather than scripted, so it is already
   there on the first paint: site.js runs at the end of the body, and a
   scripted blackout would flash the photograph first. This query is the exact
   inverse of the gate in site.js. The script removes .vid-film if the clip
   fails or stalls, and the photograph fades back in. */
.pagehero img{transition:opacity .45s var(--ease)}
@media (min-width:721px) and (prefers-reduced-motion:no-preference){
  .pagehero.vid-film{background:#000}
  .pagehero.vid-film img{opacity:0}
}

/* "Wines" sits after the mark in the same face and weight as "Wells",
   with normal spacing rather than the overlap the W gets. */
.wm .after{font-weight:500;color:var(--text-primary);display:inline-block;margin-left:.2em}
.band .wmline .wm .after{color:var(--hero-text)}
.lockup .wm .after,.nav.over .brand .after{color:#FFF}

/* STAY CONNECTED: label, field and button on one line */
.subrow{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,16px);
  flex-wrap:wrap;margin:clamp(22px,3vw,32px) auto 0;max-width:640px}
.subrow label{font-family:var(--mno);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);flex:none}
.subrow input{flex:1 1 240px;min-width:0;font-family:var(--bod);font-size:16px;
  padding:14px 16px;color:var(--text-primary);background:var(--panel);
  border:1px solid var(--line-strong);border-radius:2px;
  transition:border-color .4s var(--ease)}
.subrow input::placeholder{color:var(--text-secondary);opacity:.7}
.subrow input:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px;border-color:var(--accent-deep)}
.subrow input[aria-invalid="true"]{border-color:var(--accent-deep)}
.subrow .btn{flex:none}
@media (max-width:560px){.subrow input{flex:1 1 100%}.subrow .btn{width:100%;justify-content:center}}

/* the contact block in the footer */
.fcontact{margin-top:clamp(26px,3.4vw,38px);display:flex;flex-direction:column;
  gap:0;align-items:flex-start}
.fcontact p{margin:0;font-family:var(--mno);font-size:11px;letter-spacing:.1em;
  color:rgba(242,241,237,.62);line-height:1.8}
.fcontact .fname{color:rgba(242,241,237,.92);letter-spacing:.14em;text-transform:uppercase}
.fcontact a{display:inline-block;color:rgba(242,241,237,.62);text-decoration:none;
  border-bottom:1px solid rgba(242,241,237,.26);padding-bottom:1px;
  transition:color .4s var(--ease),border-color .4s var(--ease)}
.fcontact a:hover{color:#FFF;border-bottom-color:rgba(255,255,255,.7)}
.subnote{margin:clamp(14px,1.8vw,20px) auto 0;max-width:52ch;text-align:center;font-family:var(--bod);
  font-weight:300;font-size:16.5px;line-height:1.62;color:var(--text-secondary)}

/* THE NAV LOCKUP: the mark, then Wines, then the appellation beneath it */
.brand{line-height:1.05}
.brand .bmark{display:block;white-space:nowrap}
.brand .bmark .after{font-weight:500;display:inline-block;margin-left:.24em;color:var(--text-primary)}
.nav.over .brand .bmark .after{color:#FFF}
.brand .bsub{display:block;margin-top:3px;font-family:var(--mno);
  font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-secondary);white-space:nowrap}
.nav.over .brand .bsub{color:rgba(255,255,255,.72)}
@media (max-width:620px){.brand .bsub{display:none}}