/* Rossi Wines · built around the family's own label: its dark green ground, gold foil, the cream ROSSI and the short red
   rule, with the colour of the wine itself for the pour.
   1 tokens and base  2 the label pieces (frame, foil, boxes)  3 header  4 sections, top to bottom  5 form  6 phones */

/* ---------- 1. tokens and base ---------- */
:root{
  --ink:#1B2321; --label:#252D2C; --label-2:#2D3634; --line:rgba(198,164,94,.42);
  --gold:#C6A45E; --gold-hi:#EBD69C; --gold-lo:#8C6A33; --gold-ink:#8A6A2E;
  --cream:#F2ECE1; --cream-2:#D9D1C2; --paper:#EFE7D7; --paper-ink:#232A28;
  --wine:#5A1021; --wine-hi:#7A1730; --wine-deep:#22050C; --red:#B0272F;
  --f-serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --f-sans:Montserrat,"Segoe UI",Arial,sans-serif;
  --gutter:clamp(18px,4.5vw,56px);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--cream);font:500 1.22rem/1.62 var(--f-serif);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
.demo-bar{position:relative;z-index:60;margin:0;padding:.55rem var(--gutter);background:#121816;color:var(--cream-2);font:500 .72rem/1.5 var(--f-sans);letter-spacing:.04em;text-align:center}
.demo-bar a{color:var(--gold-hi)}
.eyebrow{margin:0 0 1rem;font:500 .74rem/1.4 var(--f-sans);letter-spacing:.32em;text-transform:uppercase}
.gold{color:var(--gold)}
@supports (-webkit-background-clip:text){
  .gold{background:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold) 30%,var(--gold-hi) 48%,var(--gold) 62%,var(--gold-lo) 100%);
    background-size:220% 100%;background-position:var(--sheen,40%) 0;-webkit-background-clip:text;background-clip:text;color:transparent}
}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8rem 1.7rem;border:1px solid var(--gold);background:transparent;color:var(--cream);
  font:600 .74rem/1 var(--f-sans);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px var(--line);transition:background .3s,color .3s,box-shadow .3s}
.btn:hover{background:var(--gold);color:var(--ink);box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 4px var(--ink)}
.btn-quiet{border-color:var(--line);box-shadow:none;color:var(--cream-2)}
.hp{position:absolute;left:-9999px}

/* ---------- 2. the label pieces ---------- */
/* the double gold line with a small square stepped into each corner, as on the label */
.frame{position:absolute;inset:clamp(12px,2.2vw,28px);pointer-events:none;border:1px solid var(--gold)}
.frame::before{content:"";position:absolute;inset:4px;border:1px solid var(--line)}
.frame .c{position:absolute;width:15px;height:15px;border:1px solid var(--gold);background:var(--frame-bg,var(--label))}
.frame .tl{left:-8px;top:-8px}.frame .tr{right:-8px;top:-8px}.frame .bl{left:-8px;bottom:-8px}.frame .br{right:-8px;bottom:-8px}
.frame .c::after{content:"";position:absolute;inset:3px;border:1px solid var(--line)}
/* foil: light from where the pointer is (or a slow sweep on its own) glances off the gold and the cream */
.foil{position:relative;margin:0}
.foil-shine{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:overlay;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,247,222,.95),rgba(255,247,222,.25) 16%,transparent 34%)}
.red-rule{display:block;width:min(220px,60%);height:5px;margin:1.1rem auto;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 40%,transparent 40%,transparent 43%,var(--red) 43%,var(--red) 57%,transparent 57%,transparent 60%,var(--line) 60%,var(--line) 88%,transparent) 0 50%/100% 1px no-repeat,
    linear-gradient(90deg,transparent 43%,var(--red) 43%,var(--red) 57%,transparent 57%) 0 50%/100% 3px no-repeat}
.boxed,.hero-box{display:inline-block;margin:0;padding:3px;border:1px solid var(--gold)}
.hero-box span{display:block;padding:.62em 1.4em .56em;border:1px solid var(--line);font:500 clamp(.92rem,1.6vw,1.12rem)/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cream)}

/* ---------- 3. header ---------- */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px;padding:0 var(--gutter);
  background:rgba(27,35,33,0);transition:background .4s,box-shadow .4s}
.top.is-solid{background:rgba(27,35,33,.94);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.top-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.top-brand img{width:34px;height:auto}
.top-brand span{font:600 .78rem/1 var(--f-sans);letter-spacing:.34em;text-transform:uppercase;color:var(--cream)}
.top-nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.top-nav a{font:500 .7rem/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--cream-2);padding:.6rem 0}
.top-nav a:hover{color:var(--gold-hi)}
.top-nav .top-cta{padding:.7rem 1rem;border:1px solid var(--line);color:var(--cream)}
.top-menu{display:none}

/* ---------- 4. sections ---------- */
/* the front label */
.hero{position:relative;isolation:isolate;display:grid;place-items:center;min-height:calc(100svh - 64px - 2.1rem);margin-top:-64px;padding:calc(64px + 3rem) var(--gutter) 4.5rem;
  background:radial-gradient(ellipse 70% 60% at 50% 38%,#33403D 0%,var(--label) 45%,var(--ink) 100%);text-align:center;overflow:hidden}
.hero::before,.chapter::before,.reserve::before,.gate-card::before,.card-face::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.07;pointer-events:none}
.hero .frame{--frame-bg:#1E2624;inset:calc(64px + clamp(10px,2vw,22px)) clamp(12px,2.2vw,28px) clamp(12px,2.2vw,28px)}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;max-width:44rem}
.hero-lockup{width:clamp(250px,40vw,500px)}
.hero-lockup img{width:100%}
.hero-intro{margin:1.6rem 0 1rem;font:500 clamp(.7rem,1.2vw,.86rem)/1.4 var(--f-sans);letter-spacing:.3em;text-transform:uppercase}
.hero-ava{margin:0;font:500 clamp(.68rem,1.1vw,.8rem)/1.75 var(--f-sans);letter-spacing:.28em;text-transform:uppercase}
.hero-now{margin:1.2rem 0 0;font:600 clamp(1.6rem,3.4vw,2.6rem)/1 var(--f-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.hero-cta{margin:1.8rem 0 0}
.hero-msg{margin:.9rem 0 0;font:italic 500 1.12rem/1.4 var(--f-serif);color:var(--cream-2)}
.hero-down{position:absolute;left:50%;bottom:clamp(22px,4vw,44px);width:44px;height:44px;margin-left:-22px;display:grid;place-items:center}
.hero-down i{width:1px;height:28px;background:linear-gradient(var(--gold),transparent);animation:drip 2.6s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* the announcement, in their words */
.chapter{position:relative;isolation:isolate;padding:clamp(5rem,12vw,9rem) var(--gutter);background:var(--ink);text-align:center}
.chapter-in{max-width:38rem;margin:0 auto}
.chapter-h{margin:0 0 1.6rem;font:italic 500 clamp(2.4rem,5.4vw,4rem)/1.05 var(--f-serif);color:var(--cream);text-wrap:balance}
.chapter p{margin:0 0 1.1em;color:var(--cream-2)}
.chapter .sig{margin-top:1.8rem;font-style:italic;font-size:1.5rem;color:var(--gold)}

/* the bottle (bottle.js): it turns from the front label to the back as you scroll, then tips and pours. Without the
   script, or with reduced motion, the section is a plain stack: the copy, both labels side by side, the 250 on wine. */
.scene{position:relative;isolation:isolate;background:var(--ink)}
.scene-bg,.scene-shadow,.scene-gl,.scene-pour,.notes{display:none}
.scene-copy{max-width:38rem;margin:0 auto;padding:clamp(5rem,10vw,7rem) var(--gutter) 2.6rem;text-align:center}
.scene-h{margin:0 0 1rem;font:500 clamp(2.6rem,5vw,4.2rem)/1 var(--f-serif);color:var(--cream)}
.scene-copy p{color:var(--cream-2)}
.labels{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.4rem,4vw,3rem);padding:0 var(--gutter) clamp(5rem,10vw,7rem)}
.scene-line{margin:-.2rem 0 1.1rem;font:600 .7rem/1.6 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi)}
.scene-line span{white-space:nowrap}
.scene-line i{margin:0 .7em;font-style:normal;color:var(--red)}
.labels .card-face{position:relative;inset:auto;width:min(520px,100%);aspect-ratio:640/416}
/* the label faces: the real front label, and a back label in its colours (charcoal, grey lines, the red of its 2025).
   Sizes are in container units, so the back label is the same at any width (labels.mjs photographs it for the bottle). */
.card-face{position:absolute;inset:0;isolation:isolate;container-type:inline-size;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse at 50% 40%,#474C4F,#3B4043 62%,#33373A);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4)}
.card-front img{width:100%;height:100%;object-fit:cover}
.card-back{--gold:#8E9396;--line:rgba(142,147,150,.45);--frame-bg:#3B4043;padding:4.4cqw 7cqw;color:#EEEEEC}
.card-back .frame{inset:2.6cqw}
.cb-bird{width:11cqw;height:auto;margin:0 0 1.2cqw}
.cb-name{margin:0;font:600 6.2cqw/1 var(--f-serif);letter-spacing:.2em;text-transform:uppercase}
.cb-text{margin:2.2cqw 0 0;max-width:80cqw;font:italic 500 4.3cqw/1.36 var(--f-serif);color:#E4E4E1;text-wrap:balance}
.cb-ava{margin:2.4cqw 0 0;font:500 2.35cqw/1.7 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:#C3C7C9}
.cb-ava span{margin:0 .4em;color:#8E9396}
.cb-rule{display:block;width:8cqw;height:.45cqw;margin:2.2cqw auto 0;background:#E0262B}
.cb-ltd{margin:2cqw 0 0;font:600 2.65cqw/1.4 var(--f-sans);letter-spacing:.18em;text-transform:uppercase}
.cb-ltd span{margin:0 .4em;color:#E0262B}
.scene-250{position:relative;isolation:isolate;padding:clamp(6rem,14vw,9rem) var(--gutter);text-align:center;
  background:linear-gradient(180deg,var(--wine-hi) 0%,var(--wine) 16%,#3A0815 55%,var(--wine-deep) 100%)}
.scene-250>*{margin-inline:auto}
.pour-num{margin:0;font:500 clamp(8rem,26vw,20rem)/.85 var(--f-serif);font-variant-numeric:lining-nums;letter-spacing:-.02em;color:rgba(242,236,225,.06);-webkit-text-stroke:1.4px rgba(242,236,225,.72)}
.pour-h{margin:1.2rem auto 0;max-width:22ch;font:italic 500 clamp(1.8rem,3.6vw,2.8rem)/1.15 var(--f-serif);color:var(--cream);text-wrap:balance}
.pour-quote{margin:2.2rem auto 0;max-width:32rem}
.pour-quote p{margin:0;font:500 .78rem/1.9 var(--f-sans);letter-spacing:.26em;text-transform:uppercase;color:#F0CFC9}

/* live: one tall section, the stage held still while you scroll through it */
.scene.is-live{height:540vh}
.is-live .scene-stick{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.is-live .scene-bg{display:block;position:absolute;inset:0;
  background:radial-gradient(circle at var(--lx,60%) var(--ly,50%),rgba(198,164,94,.2),rgba(198,164,94,.06) 26%,transparent 52%),
    radial-gradient(ellipse 90% 60% at 50% 112%,#25312E,transparent 70%),var(--ink)}
.is-live .scene-shadow{display:block;position:absolute;left:0;top:0;width:var(--sw,200px);height:calc(var(--sw,200px) * .2);border-radius:50%;opacity:var(--so,1);
  transform:translate3d(var(--sx,-999px),var(--sy,0px),0) translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,0,0,.82),rgba(0,0,0,.4) 50%,transparent)}
.is-live .scene-gl,.is-live .scene-pour{display:block;position:absolute;inset:0;width:100%;height:100%}
.is-live .scene-pour{touch-action:pan-y}
.is-live .labels{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.is-live .scene-copy{position:absolute;left:var(--gutter);top:50%;width:min(30rem,34vw);margin:0;padding:0;text-align:left;transform:translateY(-50%);opacity:var(--co,1)}
.is-live .notes{display:block;margin:0;padding:0;list-style:none}
.note{position:absolute;left:0;top:0;width:clamp(12rem,17vw,15rem);opacity:var(--o,0);transform:translate3d(var(--nx,0px),var(--ny,0px),0);
  font:italic 500 1.08rem/1.45 var(--f-serif);color:var(--cream-2);pointer-events:none}
.note b{display:block;margin-bottom:.35rem;font:600 .64rem/1.4 var(--f-sans);font-style:normal;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.is-live .scene-250{position:absolute;left:0;right:0;top:var(--t250,50%);bottom:0;display:grid;place-content:center;padding:1rem var(--gutter) 2rem;background:none;opacity:var(--o250,0);pointer-events:none}
.is-live .pour-num{font-size:clamp(6rem,17vw,13rem)}
.is-live .pour-h{margin-top:.8rem}
.is-live .pour-quote{margin-top:1.4rem;opacity:var(--oq,0)}
@media not all and (min-width:901px) and (min-aspect-ratio:21/20){
  .is-live .scene-copy{left:var(--gutter);right:var(--gutter);top:calc(58px + 1.4rem);width:auto;transform:none;text-align:center}
  .is-live .scene-copy p:not(.eyebrow):not(.scene-line){font-size:1.04rem;line-height:1.55}
  .is-live .scene-h{font-size:2.5rem}
  .note{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(1.6rem + env(safe-area-inset-bottom,0px));width:auto;transform:none;text-align:center;font-size:1.02rem}
  .is-live .pour-num{font-size:clamp(5rem,30vw,8rem)}
  .is-live .pour-h{font-size:1.6rem}
  .is-live .pour-quote p{font-size:.68rem;letter-spacing:.2em}
}

/* the family, on the cream of a back label */
.family{position:relative;isolation:isolate;padding:clamp(5rem,11vw,8rem) var(--gutter);background:var(--paper);color:var(--paper-ink);box-shadow:inset 0 3px 0 var(--gold-ink),inset 0 5px 0 var(--paper),inset 0 6px 0 var(--gold)}
.family::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.12;mix-blend-mode:multiply;pointer-events:none}
.family-in{max-width:1080px;margin:0 auto}
.family-head{max-width:36rem;margin:0 auto clamp(3rem,7vw,5rem);text-align:center}
.family .eyebrow{color:var(--gold-ink)}
.family-h{margin:0 0 1rem;font:500 clamp(2.4rem,5vw,3.8rem)/1.05 var(--f-serif);text-wrap:balance}
.family-head p{color:#4A4F4C}
/* the tree: one gold line down the middle, each generation hanging off it */
.tree{position:relative;margin:0;padding:0;list-style:none;display:grid;gap:clamp(2.4rem,5vw,3.6rem)}
.tree::before{content:"";position:absolute;left:50%;top:40px;bottom:40px;width:1px;background:linear-gradient(var(--gold-ink),var(--gold) 50%,var(--gold-ink));opacity:.7}
.gen{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);grid-template-areas:"n cameo text" "name cameo text" "years cameo text";align-items:center;column-gap:clamp(1.2rem,3vw,2.6rem)}
.gen:nth-child(even){grid-template-areas:"text cameo n" "text cameo name" "text cameo years"}
.gen .cameo{grid-area:cameo;justify-self:center;width:120px;aspect-ratio:1/1.2;margin:0;padding:5px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 0 1px var(--gold-ink),0 0 0 5px var(--paper),0 0 0 6px var(--gold),0 14px 28px -12px rgba(35,42,40,.5)}
.gen .cameo img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:sepia(.25) contrast(1.05)}
.cameo-bird{display:grid;place-items:center;background:var(--label)!important}
.cameo-bird img{width:70%!important;height:auto!important;border-radius:0!important;filter:none!important}
.gen-n{grid-area:n;align-self:end;margin:0;font:500 .66rem/1.4 var(--f-sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink)}
.gen h3{grid-area:name;margin:.2rem 0;font:600 clamp(1.6rem,2.6vw,2rem)/1.1 var(--f-serif)}
.gen-years{grid-area:years;align-self:start;margin:0;font-style:italic;color:#5B5F5B}
.gen-text{grid-area:text;margin:0;max-width:26rem;color:#3A403D}
.gen:nth-child(odd) :is(.gen-n,h3,.gen-years){text-align:right}
.gen:nth-child(even) .gen-text{justify-self:end;text-align:right}
.album{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.4rem);margin-top:clamp(4rem,8vw,6rem)}
.snap{margin:0;padding:10px 10px 34px;background:#FBF8F1;box-shadow:0 1px 2px rgba(0,0,0,.12),0 18px 34px -16px rgba(35,42,40,.45);transform:rotate(var(--r,0deg))}
.snap img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.2) contrast(1.04)}
/* the people behind the wine business, kept apart from the family's generations */
.people{max-width:46rem;margin:clamp(3.5rem,7vw,5rem) auto 0;padding-top:clamp(2rem,4vw,2.8rem);border-top:1px solid rgba(138,106,46,.35);text-align:center}
.people-h{margin:0 0 1.3rem;font:500 .74rem/1.4 var(--f-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.people-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.8rem;margin:0;padding:0;list-style:none}
.people-list li{font:500 clamp(1.4rem,2.4vw,1.8rem)/1.2 var(--f-serif);color:var(--paper-ink)}
.people-list small{display:block;margin-top:.4rem;font:500 .62rem/1.4 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:#6B6F6B}

/* the farm */
.farm{position:relative;background:var(--ink)}
.farm-band{position:relative;height:clamp(320px,72vh,760px);margin:0;overflow:hidden}
.farm-band img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;transform:translate3d(0,var(--drift,0px),0);will-change:transform}
.farm-band::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,var(--ink))}
.farm-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);max-width:1180px;margin:-5rem auto 0;padding:0 var(--gutter) clamp(5rem,10vw,8rem);position:relative}
.farm-h{margin:0 0 1.2rem;font:500 clamp(2.4rem,4.6vw,3.6rem)/1.05 var(--f-serif)}
.farm-text p{color:var(--cream-2)}
.farm-text .farm-note{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--line);font-style:italic}
.farm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;align-items:start}
.ph{margin:0}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;outline:1px solid var(--line);outline-offset:6px}
.ph-tall{grid-row:span 2}
.ph-tall img{aspect-ratio:3/4.4}
.ph figcaption{margin-top:1rem;font:500 .64rem/1.5 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

/* reserve */
.reserve{position:relative;isolation:isolate;overflow-x:clip;padding:clamp(5rem,11vw,8rem) var(--gutter);background:radial-gradient(ellipse at 50% 20%,#33403D,var(--label) 60%,var(--ink))}
.reserve .frame{--frame-bg:#1F2826;inset:clamp(14px,2.4vw,32px)}
.reserve-in{max-width:66rem;margin:0 auto}
.reserve-head{max-width:40rem;margin:0 auto;text-align:center}
.reserve-bird{width:72px;margin:0 auto 1.2rem}
.reserve-h{margin:0 0 1rem;font:500 clamp(2.4rem,5vw,3.6rem)/1 var(--f-serif)}
.reserve-head p{color:var(--cream-2)}
.reserve-alt a{color:var(--gold-hi)}

/* contact: partnerships, press, anything else */
.contact{position:relative;padding:clamp(5rem,10vw,7rem) var(--gutter);background:var(--ink)}
.contact-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:start;max-width:66rem;margin:0 auto}
.contact-h{margin:0 0 1rem;font:500 clamp(2.4rem,5vw,3.6rem)/1 var(--f-serif)}
.contact-head p{color:var(--cream-2)}
.contact-alt{margin-top:1.4rem;line-height:1.9}
.contact-alt a{color:var(--gold-hi)}
.contact .res-done{margin-top:0}

/* the footer */
.foot{padding:clamp(4rem,8vw,6rem) var(--gutter) 3rem;text-align:center;background:var(--ink);border-top:1px solid var(--line)}
.foot-lockup{width:200px;margin:0 auto 1.6rem}
.foot-line{margin:0 0 1.2rem;font:500 .66rem/1.8 var(--f-sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.foot-line i{display:inline-block;width:4px;height:4px;margin:0 .9em;vertical-align:middle;background:var(--red);transform:rotate(45deg)}
.foot-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;margin:0 0 1.6rem}
.foot-contact a{font-size:1.15rem;color:var(--cream)}
.foot-fine{max-width:44rem;margin:.4rem auto 0;font:400 .72rem/1.6 var(--f-sans);color:#8E978F}

/* the door: 21 or older */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--gutter);background:rgba(17,22,21,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gate-card{position:relative;isolation:isolate;width:min(460px,100%);padding:3.2rem 2.4rem 2.8rem;text-align:center;background:radial-gradient(ellipse at 50% 30%,#34413E,var(--label) 70%);box-shadow:0 40px 90px -30px #000}
.gate-card .frame{inset:12px}
.gate-bird{width:84px;margin:0 auto 1.2rem}
.gate-h{margin:0 0 .6rem;font:500 2rem/1.1 var(--f-serif)}
.gate-q{margin:0 0 1.6rem;color:var(--cream-2)}
.gate-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin:0}
html.gated{overflow:hidden}

/* things settle in as they come into view (only when the script runs) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
.js .rv.in{opacity:1;transform:none}

/* ---------- 5. the reservation form ---------- */
.res-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem}
.fld{display:grid;gap:.4rem;min-width:0;margin:0;padding:0;border:0}
.fld-wide{grid-column:1/-1}
.fld>span,.fld legend{font:500 .66rem/1.4 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.fld small{letter-spacing:.08em;text-transform:none;color:var(--cream-2)}
.fld input,.fld select,.fld textarea{width:100%;min-height:46px;padding:.5rem 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--cream);font:500 1.2rem/1.4 var(--f-serif)}
.fld select{appearance:none;-webkit-appearance:none;background:linear-gradient(45deg,transparent 50%,var(--gold) 50%) right 6px center/7px 7px no-repeat,linear-gradient(-45deg,transparent 50%,var(--gold) 50%) right 0 center/7px 7px no-repeat}
.fld select option{background:var(--label);color:var(--cream)}
.fld textarea{resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--gold-hi);box-shadow:0 1px 0 var(--gold-hi)}
.fld-pick{display:flex;flex-wrap:wrap;gap:.6rem 2rem}
.fld-pick legend{width:100%;margin-bottom:.4rem}
.fld-pick label,.fld-check{display:flex;align-items:center;gap:.7rem;min-height:44px;font-size:1.15rem;cursor:pointer}
.fld-pick input,.fld-check input{width:20px;height:20px;margin:0;accent-color:var(--gold)}
.res-end{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:.4rem}
.res-note{margin:0;font-style:italic;color:var(--cream-2)}
.res-done{margin-top:3rem;padding:2.4rem;text-align:center;border:1px solid var(--line)}
/* the label beside the form: it fills in as you type, and the seal goes on when the reservation is sent */
.res-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,18rem);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:3rem}
.res-wrap.is-done{grid-template-columns:minmax(0,18rem);justify-content:center}
.tag{position:sticky;top:96px;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:4/5;padding:2rem 1.5rem;text-align:center;
  background:radial-gradient(ellipse at 50% 35%,#34413E,var(--label) 70%);box-shadow:0 30px 60px -28px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);transform:rotate(1.4deg)}
.tag::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.07;pointer-events:none}
.tag .frame{inset:10px}
.tag-top{margin:0;font:500 .62rem/1.4 var(--f-sans);letter-spacing:.3em;text-transform:uppercase}
.tag-name{margin:.8rem 0 0;max-width:100%;font:italic 500 2.1rem/1.08 var(--f-serif);color:var(--cream);overflow-wrap:anywhere;text-wrap:balance}
.tag-name.is-empty{color:rgba(217,209,194,.38)}
.tag .red-rule{width:70%;margin:1rem auto .9rem}
.tag-what{margin:0;font:500 .6rem/1.7 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;white-space:pre-wrap}
.tag-pick{margin:.45rem 0 0;font:italic 500 1rem/1.4 var(--f-serif);color:var(--cream-2)}
/* the seal: gold foil with the family's bird pressed into it */
.seal{position:absolute;right:-30px;bottom:-30px;display:none;width:116px;aspect-ratio:1;transform:rotate(-12deg);pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.seal-disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 32% 26%,#FBEFC6,#E9D396 16%,var(--gold) 44%,#9C7838 78%,#6B4F22);
  -webkit-mask:radial-gradient(circle,#000 0 52px,transparent 52.5px),repeating-conic-gradient(#000 0 4deg,transparent 4deg 7.5deg);
  mask:radial-gradient(circle,#000 0 52px,transparent 52.5px),repeating-conic-gradient(#000 0 4deg,transparent 4deg 7.5deg)}
.seal-disc::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,251,234,.8) 50%,transparent 62%) 130% 0/260% 100% no-repeat}
.seal-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seal-ring circle{fill:none;stroke:rgba(94,68,22,.55);stroke-width:.8}
.seal-ring text{font:600 7.4px var(--f-sans);letter-spacing:.04em;fill:#5A4116}
.seal-bird{position:absolute;inset:30%;filter:drop-shadow(0 .7px 0 rgba(255,246,220,.75)) drop-shadow(0 -.7px 0 rgba(86,60,18,.55))}
.seal-bird i{position:absolute;inset:0;background:linear-gradient(140deg,#7C5B25,#D9BC78 45%,#8E6B30);
  -webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.tag.is-sealed{animation:press .45s .38s ease-out both}
.tag.is-sealed .seal{display:block;animation:stamp .75s cubic-bezier(.2,.85,.3,1.2) .1s both}
.tag.is-sealed .seal-disc::after{animation:sweep 1.5s .85s ease-in-out both}
@keyframes stamp{0%{opacity:0;transform:scale(2.3) rotate(-38deg)}55%{opacity:1;transform:scale(.93) rotate(-9deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
@keyframes press{0%,100%{transform:rotate(1.4deg)}40%{transform:rotate(1.4deg) translateY(4px) scale(.992)}}
@keyframes sweep{from{background-position:130% 0}to{background-position:-40% 0}}
.res-done h3{margin:0 0 .6rem;font:italic 500 2.2rem/1 var(--f-serif)}
.res-done p{margin:0;color:var(--cream-2)}

/* ---------- 6. phones and small windows ---------- */
@media (max-width:900px){
  .farm-in{grid-template-columns:minmax(0,1fr);margin-top:-3rem}
}
@media (max-width:760px){
  .top{height:58px}
  .top-menu{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--line);background:transparent;color:var(--cream);font:600 .68rem/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer}
  .top-nav{position:absolute;left:0;right:0;top:100%;display:grid;gap:0;padding:.4rem var(--gutter) 1.2rem;background:rgba(27,35,33,.98);border-bottom:1px solid var(--line);
    visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .top.is-open .top-nav{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
  .top.is-open{background:rgba(27,35,33,.98)}
  .top-nav a{padding:1.05rem 0;border-bottom:1px solid rgba(198,164,94,.18);font-size:.76rem}
  .top-nav .top-cta{margin-top:.8rem;text-align:center;border:1px solid var(--line)}
  .hero{margin-top:-58px;padding-top:calc(58px + 3.2rem);min-height:calc(100svh - 58px - 2.6rem)}
  .hero .frame{inset:calc(58px + 10px) 12px 12px}
  .gen,.gen:nth-child(even){grid-template-columns:96px minmax(0,1fr);grid-template-areas:"cameo n" "cameo name" "cameo years" "cameo text";column-gap:1.2rem;align-items:start}
  .gen .cameo{width:96px;align-self:start}
  .gen:nth-child(odd) :is(.gen-n,h3,.gen-years),.gen:nth-child(even) .gen-text{text-align:left;justify-self:start}
  .gen-text{margin-top:.6rem}
  .tree::before{left:48px}
  .album{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}
  .farm-grid{grid-template-columns:minmax(0,1fr)}
  .ph-tall{grid-row:auto}
  .ph-tall img{aspect-ratio:4/3}
  .res-form{grid-template-columns:minmax(0,1fr)}
  .res-wrap,.res-wrap.is-done{grid-template-columns:minmax(0,1fr)}
  .tag{order:-1;position:relative;top:auto;width:min(17rem,74vw);margin:0 auto .6rem}
  .hero-intro{letter-spacing:.18em;font-size:.64rem}
  .contact-in{grid-template-columns:minmax(0,1fr)}
  .scene-line i{display:none}
  .scene-line span{display:block}
}
@media (prefers-reduced-motion:reduce){
  .hero-down i{animation:none}
  .tag.is-sealed,.tag.is-sealed .seal,.tag.is-sealed .seal-disc::after{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
}