/* FAMILY OFFICE WINE CLUB
   ------------------------------------------------------------------
   The register. This page is laid out as a private-client schedule
   rather than a wine brochure, because that is how the audience reads:
   holdings, allocations, what is held and since when.

   Deliberately NOT the Fine Wine Club house style (Cormorant/Jost,
   cream + bordeaux + gold). No gold anywhere on this site.
   ------------------------------------------------------------------ */

:root{
  /* vine and wine, desaturated into an institutional register */
  --ink:      #11201C;   /* green-black — the ground */
  --ink-2:    #0A1613;   /* deeper, for the hero */
  --ink-3:    #1B2C27;   /* raised surfaces on dark */
  --paper:    #EDEAE3;   /* cool bone. NOT a warm cream */
  --paper-2:  #E3DFD6;
  --claret:   #7A2233;   /* the only accent, rationed */
  --claret-2: #93303F;
  --sage:     #9AA896;   /* secondary text on dark */
  --stone:    #5E645F;   /* secondary text on light. Measured, not picked:
                            #6E7470 looked right but scored 3.98 against the
                            paper, under the 4.5 AA floor, and it carries
                            every piece of secondary copy on the light
                            sections. This is 5.05. */

  --rule:        rgba(17,32,28,.16);
  --rule-dark:   rgba(237,234,227,.18);

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ui:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.2,.7,.3,1);
  --maxw: 1240px;
  --gut:  clamp(20px, 5vw, 64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--display); font-weight:400;
  font-size:clamp(16.5px,1.02vw,18px); line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* Serif display, set tight. The type is the design here. */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;
  letter-spacing:-.021em;margin:0}
.d1{font-size:clamp(2.9rem,7.4vw,6.1rem)}
.d2{font-size:clamp(2.1rem,4.3vw,3.5rem);line-height:1.08}
.d3{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.18;letter-spacing:-.015em}
.lede{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.56;max-width:56ch;
  color:var(--stone)}
p{margin:0 0 1em;max-width:68ch}
.measure{max-width:60ch}

/* Small type is Archivo. Sentence case — no tracked-out caps labels. */
.meta{font-family:var(--ui);font-size:.8rem;letter-spacing:.005em;
  color:var(--stone);font-weight:500}
.num{font-family:var(--ui);font-variant-numeric:tabular-nums lining-nums;
  font-weight:500;letter-spacing:-.01em}

/* ---------------------------------------------------------- chrome */
.bar{position:fixed;inset:0 0 auto;z-index:60;color:var(--paper);
  transition:background .5s var(--ease),color .5s var(--ease),
             border-color .5s var(--ease);
  border-bottom:1px solid transparent}
.bar.is-stuck{background:var(--paper);color:var(--ink);
  border-bottom-color:var(--rule)}
.bar__in{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:18px}
.mark{font-family:var(--display);font-size:1.06rem;letter-spacing:-.015em;
  text-decoration:none;line-height:1.1}
.mark em{font-style:italic}
.nav{display:flex;gap:30px;align-items:center;font-family:var(--ui);
  font-size:.84rem;font-weight:500}
.nav a{text-decoration:none;opacity:.78;transition:opacity .25s}
.nav a:hover,.nav a:focus-visible{opacity:1}

.btn{display:inline-block;font-family:var(--ui);font-size:.84rem;
  font-weight:600;letter-spacing:.005em;text-decoration:none;
  padding:11px 20px;border:1px solid currentColor;background:none;
  color:inherit;cursor:pointer;transition:background .3s var(--ease),
  color .3s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--claret);border-color:var(--claret);
  color:var(--paper)}
.btn--solid{background:var(--claret);border-color:var(--claret);color:var(--paper)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--claret-2);
  border-color:var(--claret-2)}
.burger{display:none;width:40px;height:34px;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:inherit}
.burger i{display:block;width:21px;height:1px;background:currentColor;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:21px;
  height:1px;background:currentColor}
.burger i::before{top:-6px}.burger i::after{top:6px}

/* ----------------------------------------------------------- hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--ink-2);color:var(--paper);overflow:clip}
/* 82% vertical, not centre. The bottle stands low in the frame (y .321-.951)
   and the hero only ever shows a ~.76 slice of the height, so centring cut the
   base off at every desktop size. Measured: at 82% the capsule and the base
   both survive from 1440x800 up to 1920x1080. Costs a little sky, which the
   headline sits over anyway. */
.hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;
  background-position:62% var(--hero-y,82%);background-repeat:no-repeat}

.hero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(10,22,19,.93) 0%,rgba(10,22,19,.70) 42%,
                  rgba(10,22,19,.12) 78%),
  linear-gradient(0deg,rgba(10,22,19,.86) 0%,rgba(10,22,19,0) 46%)}

.hero__in{position:relative;z-index:2;width:100%;
  padding-block:clamp(120px,17vh,190px) clamp(28px,5vh,44px)}
.hero h1{max-width:15ch}
/* Both lines flush left. An indent on the second line was read as a stray
   space rather than as a typographic device — if it has to be explained, it
   is not working. */
.hero h1 .l2{display:block}
.hero .lede{color:rgba(237,234,227,.80);margin-top:clamp(22px,3vh,34px)}
.hero__act{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,4vh,40px)}

/* the partner rail — specific to this page: two houses, named */
.rail{margin-top:clamp(40px,7vh,74px);padding-top:20px;
  border-top:1px solid var(--rule-dark);display:flex;flex-wrap:wrap;
  align-items:baseline;gap:10px 22px;font-family:var(--ui);font-size:.84rem;
  color:rgba(237,234,227,.72)}
.rail b{font-weight:600;color:var(--paper)}
.rail .x{opacity:.5}

/* This block MUST stay below every .hero rule above. A media query has no
   extra weight: at equal specificity the later rule wins, so placed higher
   up it was silently overridden by .hero__in, .hero h1 and .rail. */
/* PORTRAIT: the picture and the words STACK — they do not overlap.
   Overlaying this hero on a phone put the headline and the standfirst straight
   across the bottle and its label. Scrims only traded one problem for the
   other: enough darkening to read the type is enough to bury the label.
   So in portrait the image gets its own panel with nothing on it, and the copy
   sits underneath on the solid ground. Nothing is covered, and nothing has to
   be dimmed to compensate. */
@media (max-aspect-ratio:1/1){
  .hero{display:block;min-height:0;background:var(--ink-2)}
  .hero__bg{position:relative;inset:auto;width:100%;
    aspect-ratio:5/4;max-height:62svh;
    /* a far wider slice of the frame is visible here than in the overlaid
       version, so the per-image --hero-x keeps the whole dressed table in */
    background-position:var(--hero-x,90%) center}
  /* only enough gradient to keep the fixed header legible over the top */
  .hero__bg::after{background:
    linear-gradient(180deg,rgba(10,22,19,.74) 0%,rgba(10,22,19,.28) 12%,
                    rgba(10,22,19,0) 26%)}
  .hero__in{padding-block:clamp(26px,4.5vh,38px) clamp(32px,5vh,46px)}
  .hero h1{max-width:none}
}

/* --------------------------------------------------------- sections */
.sec{padding-block:clamp(76px,11vw,144px)}
/* Two adjacent sections stacked their full padding — 144 + 144 + a 16px
   hint margin came to ~304px of void before "After the first case."
   The experiences rail is full-bleed and ends on a single line, so it
   needs far less tail than a normal section. */
.sec + .sec{padding-top:clamp(44px,6vw,80px)}
#experiences{padding-bottom:clamp(30px,3.5vw,48px)}
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--dark .lede,.sec--dark .meta,
.join .lede,.join .meta{color:var(--sage)}
.sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(44px,6vw,76px)}
.sec__head p{margin:0}

/* two houses */
.houses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,72px)}
.house{border-top:1px solid var(--rule);padding-top:22px}
.sec--dark .house{border-top-color:var(--rule-dark)}
.house h3{margin-bottom:4px}
.house .role{font-family:var(--ui);font-size:.84rem;font-weight:500;
  color:var(--claret);margin-bottom:14px}
.sec--dark .house .role{color:#C9798A}

/* the schedule of holdings — the structural idea of the page */
.sched{border-top:1px solid var(--rule)}
.sec--dark .sched{border-top-color:var(--rule-dark)}
/* Three columns, so the figure is a column of the schedule rather than an
   orphan sitting under the note. */
/* Every track is FIXED or proportional — none is `auto`. Each .hold is its own
   grid container, so an `auto` column sizes to that row's own content: the
   figure ran from 73px ("1996") to 225px ("Stags Leap District"), which pushed
   the note column to a different position on all five rows. A schedule whose
   columns do not line up is not a schedule. */
.hold{display:grid;
  grid-template-columns:clamp(132px,15vw,196px) minmax(0,1fr) minmax(0,1.2fr)
                        clamp(104px,14vw,240px);
  gap:clamp(20px,4vw,56px);padding-block:clamp(26px,3.4vw,44px);
  border-bottom:1px solid var(--rule);align-items:start}
.sec--dark .hold{border-bottom-color:var(--rule-dark)}
.hold__img{aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.hold__img img{width:100%;height:100%;object-fit:cover}
.hold__name{display:flex;flex-direction:column;gap:7px}
.hold__place{font-family:var(--ui);font-size:.86rem;color:var(--stone)}
.sec--dark .hold__place{color:var(--sage)}
.hold__held{font-family:var(--ui);font-size:.78rem;color:var(--claret);
  font-weight:500}
.sec--dark .hold__held{color:#C9798A}
.hold__note{margin:0;color:var(--stone);max-width:52ch}
.sec--dark .hold__note{color:var(--sage)}
.hold__fig{text-align:right;margin:0;min-width:7.5ch}
.hold__fig b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.02em;line-height:1.1}
.hold__fig span{font-family:var(--ui);font-size:.74rem;color:var(--stone)}
.sec--dark .hold__fig span{color:var(--sage)}

/* estate imagery, full-bleed band */
/* margin:0 is load-bearing — <figure> carries a browser default of
   `1em 40px`, which was quietly insetting this full-bleed band. */
.band{position:relative;margin:0;height:clamp(300px,46vw,560px);
  background:var(--ink-2);background-size:cover;background-position:center;
  overflow:clip}
.band figcaption{position:absolute;left:0;bottom:0;padding:14px 20px;
  background:var(--ink);color:var(--paper);font-family:var(--ui);
  font-size:.78rem;letter-spacing:.005em}

/* the allocation — one big figure, everything else quiet */
.alloc{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(30px,6vw,86px);align-items:start}
.alloc__fig{line-height:.86}
.alloc__fig .cur{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.8rem);
  vertical-align:top;position:relative;top:.42em;letter-spacing:0}
.alloc__fig .n{font-family:var(--display);font-weight:300;
  font-size:clamp(4.6rem,13vw,10rem);letter-spacing:-.045em}
.alloc__fig .per{display:block;font-family:var(--ui);font-size:.86rem;
  color:var(--sage);margin-top:14px}
.alloc__list{border-top:1px solid var(--rule-dark);margin:0;padding:0}
.alloc__list div{display:grid;grid-template-columns:minmax(120px,.42fr) 1fr;
  gap:clamp(14px,3vw,40px);padding-block:18px;
  border-bottom:1px solid var(--rule-dark)}
.alloc__list dt{font-family:var(--ui);font-size:.88rem;font-weight:600}
.alloc__list dd{margin:0;color:var(--sage);max-width:52ch}
.alloc__note{margin-top:22px;color:var(--sage);font-size:.95rem;max-width:56ch}

/* wines — an image-led rail. Real bottle photography, so the bottle leads.
   Deliberately the light counterpart to the dark experiences rail below: tall
   cut-outs on the paper ground rather than landscape images on ink. */
/* The five cards fill the width EXACTLY — `19.2%` each left 4% of the rail's
   own background showing as a grey strip on the right. The calc divides the
   full width by five and allows for the four 1px gaps, so there is no tail;
   below ~1044px the 208px minimum takes over and it scrolls instead. */
.wine-rail{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(208px,calc((100% - 4px) / 5));
  gap:1px;background:var(--rule);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  border-block:1px solid var(--rule)}
.wine-rail::-webkit-scrollbar{height:2px}
.wine-rail::-webkit-scrollbar-thumb{background:var(--stone)}
.w{scroll-snap-align:start;background:var(--paper);display:flex;
  flex-direction:column;gap:9px;
  padding:clamp(26px,3vw,38px) clamp(18px,2vw,26px) clamp(24px,2.6vw,32px)}
.w__img{height:clamp(176px,21vw,284px);display:flex;align-items:flex-end;
  justify-content:center;margin-bottom:clamp(10px,1.4vw,18px)}
.w__img img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.w h3{letter-spacing:-.02em}
.w__origin{font-family:var(--ui);font-size:.78rem;color:var(--stone)}
.w p{margin:0;color:var(--stone);font-size:.94rem}

/* experiences — a rail you push through, not another grid of cards */
.exp{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,25.5%);
  gap:1px;background:var(--rule-dark);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;border-block:1px solid var(--rule-dark)}
.exp::-webkit-scrollbar{height:2px}
.exp::-webkit-scrollbar-thumb{background:var(--sage)}
/* colour is load-bearing: these dark cards sit inside a LIGHT section, so
   anything without an explicit colour inherits the dark body ink and
   disappears. The h3 did exactly that. */
.exp__i{scroll-snap-align:start;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;gap:10px;min-height:270px;
  padding:clamp(24px,3vw,34px)}
.exp__i:has(.exp__img){padding-top:0}
.exp__img{margin:0 calc(-1 * clamp(24px,3vw,34px)) clamp(14px,1.6vw,20px);
  aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.exp__img img{width:100%;height:100%;object-fit:cover}
.exp__i .estate{font-family:var(--ui);font-size:.76rem;color:#C9798A;font-weight:500}
.exp__i h3{font-size:1.22rem;letter-spacing:-.015em}
.exp__i .when{font-family:var(--ui);font-size:.78rem;color:var(--sage)}
.exp__i p{margin:6px 0 0;color:var(--sage);font-size:.95rem;max-width:40ch}
.exp__i.is-past{background:var(--ink-3)}
/* this hint sits on the light section, not inside the dark rail — sage is
   the on-dark secondary and fails here */
.exp__hint{font-family:var(--ui);font-size:.78rem;color:var(--stone);
  margin-top:16px}
/* "Scroll for all five" is a lie once all five fit, which they do above
   ~1100px — so the wines hint only appears when the rail really does scroll. */
.wine-hint{display:none}
@media (max-width:1100px){.wine-hint{display:block}}

/* beyond the allocation */
.beyond{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.beyond > div{background:var(--paper);padding:clamp(22px,2.6vw,32px)}
.beyond h3{font-size:1.18rem;margin-bottom:8px;letter-spacing:-.015em}
.beyond p{margin:0;color:var(--stone);font-size:.96rem}

/* ----------------------------------------------------------- join */
.join{background:var(--ink);color:var(--paper)}
.join__grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,6vw,90px);align-items:start}
.form{display:grid;gap:18px;max-width:460px}
.f{display:grid;gap:7px}
.f label{font-family:var(--ui);font-size:.82rem;font-weight:500}
.f input,.f select{font-family:var(--ui);font-size:.94rem;color:var(--paper);
  background:transparent;border:0;border-bottom:1px solid var(--rule-dark);
  padding:10px 0;border-radius:0}
.f input:focus,.f select:focus{outline:0;border-bottom-color:var(--paper)}
.f select option{background:var(--ink);color:var(--paper)}
.hp{position:absolute;left:-9999px}
.form .btn{justify-self:start;margin-top:4px}
.form__note{font-family:var(--ui);font-size:.78rem;color:var(--sage);margin:0}
.done{border:1px solid var(--rule-dark);padding:26px}
.done h3{margin-bottom:8px}
.done p{color:var(--sage);margin:0}

/* ---------------------------------------------------------- footer */
.foot{background:var(--ink);color:var(--sage);
  border-top:1px solid var(--rule-dark);padding-block:40px;
  font-family:var(--ui);font-size:.8rem}
.foot__in{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.foot a{color:var(--paper);text-decoration:none}

/* --------------------------------------------------------- motion */
/* One orchestrated moment: the hero settles on load. Nothing else moves
   on scroll. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .anim{opacity:0;animation:rise .9s var(--ease) forwards}
.hero .anim:nth-child(1){animation-delay:.10s}
.hero .anim:nth-child(2){animation-delay:.20s}
.hero .anim:nth-child(3){animation-delay:.30s}
.hero .anim:nth-child(4){animation-delay:.40s}

:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--claret-2);outline-offset:3px}
.sec--dark :where(a,button,input,select):focus-visible,
.join :where(a,button,input,select):focus-visible{outline-color:var(--paper)}

/* ------------------------------------------------------ responsive */
@media (max-width:980px){
  .sec__head,.houses,.alloc,.join__grid{grid-template-columns:1fr}
  .alloc__fig{display:flex;align-items:baseline;gap:14px}
  .alloc__fig .per{margin:0}
  .beyond{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hold{grid-template-columns:1fr;gap:14px}
  .hold__img{aspect-ratio:16/7}
  .hold__fig{text-align:left;display:flex;align-items:baseline;gap:10px;
    min-width:0}
}
@media (max-width:760px){
  .nav{position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);
    flex-direction:column;justify-content:center;gap:26px;font-size:1.2rem;
    transform:translateY(-100%);transition:transform .5s var(--ease)}
  .nav.is-open{transform:none}
  .burger{display:flex}
  .bar.menu-open{color:var(--paper)}
  .hero h1 .l2{padding-left:0}
  .beyond{grid-template-columns:1fr}
  .exp{grid-auto-columns:minmax(230px,80%)}
  .wine-rail{grid-auto-columns:minmax(200px,66%)}
  /* the 120px label track leaves too little for the value on a phone */
  .alloc__list div{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hero .anim{opacity:1;animation:none}
}