/* Wine Imported, D · Malbec. The one stylesheet the generated site serves:
   design/_base.css plus the <style> of each mockup, deduplicated. The mockups stay
   the visual reference. Colors, type and spacing come only from tokens.css (spec §4). */
@import url('../fonts/fonts.css');
@import url('./tokens.css');

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--ff-text);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--wine);background:var(--bone);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
/* The templates wrap photos in <picture>, which is inline by default and would
   break the width/aspect-ratio rules written for a bare img. */
picture{display:block}
/* width/height attributes map to presentational height, which would beat any CSS
   aspect-ratio box. height:auto lets the aspect-ratio rules below actually apply. */
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
.num,table,dl{font-variant-numeric:tabular-nums lining-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--rose-dk);outline-offset:3px}
.dark :focus-visible{outline-color:var(--rose)}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:50;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 1rem;background:var(--rose);color:var(--wine);font-weight:500}
.skip:focus{top:.75rem}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,.4rem + 1.6vw,2rem)}
.dark{background:var(--wine);color:var(--bone)}
.dark-2{background:var(--wine-2);color:var(--bone)}
.section{padding-block:var(--section)}
.rule-top{border-top:1px solid var(--rule-light)}

/* ---------- type ---------- */
.display,.h2,.h3{font-family:var(--ff-display);font-weight:300;text-wrap:balance}
.display{font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:-.015em}
.h1{font-size:max(3rem,calc(var(--fs-hero) * .9167))}
.h2{font-size:var(--fs-h2);line-height:1;letter-spacing:-.012em}
.h3{font-size:var(--fs-h3);font-weight:400;line-height:1.1}
.display em,.h2 em,.h3 em{font-style:italic;color:var(--rose-dk)}
.dark .display em,.dark .h2 em,.dark-2 .h2 em,.dark .h3 em{color:var(--rose)}
.lead{font-size:var(--fs-lead);line-height:1.6;max-width:44ch;text-wrap:pretty}
.dark .lead,.dark-2 .lead{color:var(--muted-dark)}
.muted{color:var(--muted-light)}
.dark .muted,.dark-2 .muted{color:var(--muted-dark)}
.small{font-size:var(--fs-small);line-height:1.5}
p{text-wrap:pretty}

/* ---------- actions ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.375rem;border:0;border-radius:var(--radius);background:var(--rose);color:var(--wine);font:500 .9375rem/1.2 var(--ff-text);cursor:pointer;transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease}
.btn:hover{background:var(--bone)}
.btn--wine{background:var(--wine);color:var(--bone)}
.btn--wine:hover{background:var(--wine-2);color:var(--bone)}
.link{display:inline-flex;align-items:center;min-height:var(--tap);font-size:.9375rem;font-weight:500;box-shadow:inset 0 -1px 0 currentColor;transition:box-shadow var(--dur-fast) ease,color var(--dur-fast) ease;cursor:pointer}
.link:hover{box-shadow:inset 0 -2px 0 currentColor}
.link--accent{color:var(--rose-dk)}
.dark .link--accent{color:var(--rose)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}

/* ---------- flags (inline SVG symbols) ---------- */
.flag{width:20px;height:14px;flex:none;border-radius:1px;box-shadow:0 0 0 1px var(--rule-dark)}

/* ---------- header ---------- */
.site-header{position:relative;z-index:30;color:var(--bone)}
.site-header--over{position:absolute;inset:0 0 auto 0}
/* On the home the header sits outside the hero, before <main>; nothing above it is
   positioned, so it lies over the top of the hero photo. It is not inside .dark. */
.site-header--over :focus-visible{outline-color:var(--rose)}
.site-header__bar{display:flex;align-items:center;gap:1.5rem;min-height:92px}
.brand{display:inline-flex;align-items:center;gap:.75rem;min-height:var(--tap);font-family:var(--ff-display);font-weight:500;font-size:1.375rem;line-height:1;white-space:nowrap}
.brand img{width:44px;height:44px;filter:invert(1)}
.nav{display:flex;gap:.25rem 1.75rem;margin-left:auto;font-size:.9375rem}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--muted-dark);transition:color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.nav a:hover{color:var(--bone)}
.nav a[aria-current="page"]{color:var(--bone);box-shadow:inset 0 -1px 0 var(--rose)}
.header-tools{display:flex;align-items:center;gap:1rem}
.lang{display:flex;gap:.25rem;font-size:.8125rem;font-weight:500}
.lang a{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);padding:0 .5rem;border-radius:var(--radius);color:var(--muted-dark);transition:color var(--dur-fast) ease}
.lang a:hover{color:var(--bone)}
.lang a[aria-current="true"]{color:var(--bone);box-shadow:inset 0 0 0 1px var(--rule-dark)}
.menu{display:none}
.site-header__bar{position:relative}
.menu summary{list-style:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);cursor:pointer;border-radius:var(--radius)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:22px;height:14px}
.menu__panel{position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:100%;padding:.5rem var(--gutter) 1.5rem;background:var(--wine);border-top:1px solid var(--rule-dark)}
.menu__panel a:not(.btn){display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--rule-dark);font-size:1.0625rem}
.menu__panel .btn{margin-top:1.25rem;width:100%}

/* ---------- page intro (interior pages) ---------- */
.intro__body{padding-block:clamp(2.5rem,1rem + 5vw,6rem) clamp(3rem,1.5rem + 4vw,5.5rem);row-gap:1.75rem;align-items:end}
.intro__title{grid-column:1/9}
.intro__aside{grid-column:9/13;padding-bottom:.5rem}
.intro__aside .actions{margin-top:1.5rem}

/* ---------- strip (recurring wine-2 band) ---------- */
.strip__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.strip__item{display:flex;flex-direction:column;padding:2.5rem 2rem 2.75rem;border-left:1px solid var(--rule-dark);transition:background-color var(--dur-fast) ease}
.strip__item:first-child{border-left:0;padding-left:0}
.strip__item:last-child{padding-right:0}
a.strip__item:hover .strip__name{color:var(--rose)}
.strip__meta{font-size:.875rem;color:var(--rose)}
.strip__name{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-h3);line-height:1.08;margin:.5rem 0 .5rem;transition:color var(--dur-fast) ease}
.strip__text{font-size:.9375rem;line-height:1.5;color:var(--muted-dark);max-width:30ch}
.strip__figure{margin-top:auto;padding-top:1.25rem;font-family:var(--ff-display);font-weight:300;font-size:2.5rem;line-height:1;color:var(--bone);font-variant-numeric:lining-nums}
.strip__figure small{font-size:1.5rem}

/* ---------- section heading row ---------- */
.head{row-gap:1.25rem;align-items:end;margin-bottom:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.head__title{grid-column:1/8}
.head__aside{grid-column:9/13}
/* On the home the aside reads straight under its heading, not across the page. */
@media (min-width:981px){.head--stack .head__title,.head--stack .head__aside{grid-column:1/8}}
.head--stack .head__aside{max-width:44ch}

/* ---------- ledger (spec list, always on bone) ---------- */
.ledger{border-top:1px solid var(--wine)}
.ledger__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem 2rem;padding:1.125rem 0;border-bottom:1px solid var(--rule-light)}
.ledger dt{color:var(--muted-light);font-size:.9375rem;padding-top:.125rem}
.ledger dd{font-size:var(--fs-body);font-weight:500}
.ledger dd span{display:block;font-weight:400;color:var(--muted-light);font-size:.9375rem}

/* ---------- line table (always on bone) ---------- */
.wines{font-size:var(--fs-table)}
.wines th{padding:0 0 .75rem;text-align:left;font-size:.8125rem;font-weight:500;color:var(--muted-light)}
.wines td{padding:1.125rem 1rem 1.125rem 0;border-top:1px solid var(--rule-light);vertical-align:baseline}
.wines tbody tr:last-child td{border-bottom:1px solid var(--rule-light)}
.wines .c-name{width:40%;font-weight:500;font-size:1.0625rem}
.wines .c-vintage{width:12%}
.wines .c-style{color:var(--muted-light)}
.wines .c-srp{width:6.5rem;padding-right:0;text-align:right;font-weight:500;font-size:1.0625rem;color:var(--rose-dk)}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:.5rem}
.field label,.legend{font-size:.9375rem;font-weight:500}
.field .hint{font-size:.875rem;font-weight:400;color:var(--muted-light)}
.input{width:100%;min-height:48px;padding:.625rem .875rem;border:1px solid var(--muted-light);border-radius:var(--radius);background:var(--bone);font-size:var(--fs-body);transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.input:hover{border-color:var(--wine)}
.input:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 1px var(--wine)}
.input:focus-visible{outline:2px solid var(--rose-dk);outline-offset:2px}
select.input{appearance:none;padding-right:2.5rem;background-image:linear-gradient(45deg,transparent 50%,var(--wine) 50%),linear-gradient(135deg,var(--wine) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
textarea.input{min-height:8.5rem;resize:vertical;line-height:1.5}

/* ---------- trade CTA block ---------- */
.trade__grid{row-gap:2rem;align-items:end}
.trade__title{grid-column:1/8}
.trade__body{grid-column:9/13}
.trade__body p{margin-bottom:1.75rem}

/* ---------- trade updates ---------- */
.updates__grid{row-gap:1.5rem;align-items:end;padding-block:clamp(3rem,2rem + 3vw,4.5rem)}
.updates__text{grid-column:1/6}
.updates__text p{margin-top:.5rem;color:var(--muted-light)}
.updates__form{grid-column:7/13;display:grid;grid-template-columns:minmax(0,1fr) 9rem auto;gap:1rem;align-items:end}

/* ---------- footer ---------- */
.site-footer{padding-block:clamp(3.5rem,2.5rem + 3vw,5rem) 2rem;font-size:.9375rem}
.site-footer__grid{row-gap:2.5rem}
.site-footer__brand{grid-column:1/5}
.site-footer__brand .brand{margin-bottom:1rem}
.site-footer__brand p{color:var(--muted-dark);max-width:30ch}
.site-footer__col{grid-column:span 2}
.site-footer__col--wide{grid-column:span 3}
.site-footer h2{font-family:var(--ff-text);font-size:.9375rem;font-weight:500;color:var(--rose);margin-bottom:.5rem}
.site-footer__col p{color:var(--muted-dark);line-height:1.6}
.site-footer__col p b{color:var(--bone);font-weight:500}
.site-footer__col a{display:flex;align-items:center;min-height:var(--tap);color:var(--muted-dark);transition:color var(--dur-fast) ease}
.site-footer__col a:hover{color:var(--bone)}
.site-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 2rem;margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--rule-dark);color:var(--muted-dark);font-size:var(--fs-small)}
.site-footer__legal nav{display:flex;gap:1.5rem}
.site-footer__legal a{display:inline-flex;align-items:center;min-height:var(--tap);box-shadow:inset 0 -1px 0 var(--rule-dark)}
.site-footer__legal a:hover{color:var(--bone)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav,.header-tools>.btn{display:none}
  .menu{display:block}
  .header-tools{margin-left:auto;gap:.5rem}
}
@media (max-width:980px){
  .intro__title,.intro__aside,.head__title,.head__aside,.trade__title,.trade__body,.updates__text,.updates__form{grid-column:1/-1}
  .strip__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip__item:nth-child(odd){border-left:0;padding-left:0}
  .strip__item:nth-child(even){padding-right:0}
  .strip__item:nth-child(n+3){border-top:1px solid var(--rule-dark)}
  .site-footer__brand{grid-column:1/-1}
  .site-footer__col,.site-footer__col--wide{grid-column:span 4}
}
@media (max-width:720px){
  body{font-size:1.0625rem}
  .site-header__bar{min-height:72px;gap:.5rem}
  .brand{font-size:1.1875rem;gap:.5rem}
  .brand img{width:36px;height:36px}
  .lang{gap:0}
  .lang a{padding:0 .375rem}
  .strip__grid{grid-template-columns:1fr}
  .strip__item,.strip__item:nth-child(n){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;padding:1.375rem 0;border-left:0;border-top:1px solid var(--rule-dark)}
  .strip__item:first-child{border-top:0}
  .strip__meta,.strip__name,.strip__text{grid-column:1}
  .strip__name{margin:.25rem 0 .25rem}
  .strip__text{font-size:1rem}
  .strip__figure{grid-column:2;grid-row:1/4;align-self:center;padding-top:0;font-size:2rem;text-align:right}
  .strip__figure small{display:block;font-size:1rem;font-family:var(--ff-text);color:var(--muted-dark)}
  .ledger__row{grid-template-columns:1fr;gap:.25rem}
  .wines thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .wines,.wines tbody{display:block}
  /* Stacked rows: name + vintage on line 1 with the SRP right-aligned beside them,
     style on line 2. The name gets the flexible track so it wraps on word breaks
     instead of collapsing to min-content ("Na / ra / njo"). */
  .wines tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:.75rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--rule-light)}
  .wines tbody tr:last-child{border-bottom:1px solid var(--rule-light)}
  .wines td,.wines tbody tr:last-child td{padding:0;border:0;width:auto}
  .wines .c-name{grid-column:1;grid-row:1;overflow-wrap:normal;line-height:1.3}
  /* nowrap so body's overflow-wrap:break-word can't drop these auto tracks to a
     one-character min-content and let the name track eat the row ("2 / 0 / 2 / 6"). */
  .wines .c-vintage{grid-column:2;grid-row:1;color:var(--muted-light);white-space:nowrap}
  .wines .c-srp{grid-column:3;grid-row:1;width:auto;text-align:right;white-space:nowrap}
  .wines .c-style{grid-column:1/4;grid-row:2;margin-top:.25rem;font-size:.9375rem}
  .updates__form{grid-template-columns:1fr}
  .site-footer__col,.site-footer__col--wide{grid-column:1/-1}
  .site-footer__legal{flex-direction:column;align-items:flex-start}
}

/* ========== home ========== */
.hero{position:relative;display:flex;min-height:max(42rem,min(100svh,52rem));overflow:hidden}
/* The hero photo is 2040px wide (assets/img/manifest.json) and the brief forbids
   showing a photo above its native size. On wider screens it stays centred at its
   real width and its edges fade into the section's wine background. */
.hero__media{position:absolute;inset:0;margin-inline:auto;max-width:2040px}
@media (min-width:2041px){
  .hero__media{mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent)}
}
.hero__media picture{height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--wine) 60%,transparent),transparent 10rem),linear-gradient(90deg,color-mix(in srgb,var(--wine) 95%,transparent) 0%,color-mix(in srgb,var(--wine) 80%,transparent) 40%,color-mix(in srgb,var(--wine) 12%,transparent) 76%)}
.hero__body{position:relative;align-self:flex-end;padding-top:9rem;padding-bottom:clamp(3rem,2rem + 3vw,4.75rem)}
.hero__text{grid-column:1/9}
.hero .lead{margin:1.75rem 0 2.25rem;color:var(--bone);opacity:.9}
/* 17ch is the measure that breaks the headline into three strong lines at desktop
   and keeps it to three at 1024 and 375, without touching the type scale. */
.hero .display{max-width:17ch}

/* 3/2 keeps the harvest photo and the producer text close to the same height, so
   the section reads as two balanced halves instead of a tall photo beside a short
   column with dead space under it. */
.maker{padding-block:var(--section);align-items:center;row-gap:2.5rem}
.maker__photo{grid-column:1/7}
.maker__photo img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 42%}
.maker__photo figcaption{margin-top:.75rem;font-size:.875rem;color:var(--muted-light)}
.maker__text{grid-column:8/13}
.maker__logo{width:132px;height:auto;margin-bottom:2rem;opacity:.9}
.maker__text p{margin:1.5rem 0 1.25rem;max-width:42ch}

.work{padding-block:var(--section);row-gap:2.5rem}
.work__text{grid-column:1/5}
.work__text p{margin-top:1.25rem;color:var(--muted-light);max-width:34ch}
.work__list{grid-column:6/13}

/* Hero proof row: three figure/label pairs on a hairline, figure above label. The
   <dt> comes first in the markup, as <dl> requires; column-reverse lifts the figure. */
.proof{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:clamp(2.25rem,1.5rem + 2vw,3.25rem);padding-top:1.5rem;border-top:1px solid var(--rule-dark);max-width:46rem}
.proof__item{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.5rem;padding:0 clamp(1.25rem,.5rem + 2vw,2.5rem);border-left:1px solid var(--rule-dark)}
.proof__item:first-child{padding-left:0;border-left:0}
.proof dd{font-family:var(--ff-display);font-weight:300;font-size:clamp(1.75rem,1.4rem + 1vw,2.375rem);line-height:1;color:var(--bone);white-space:nowrap;font-variant-numeric:lining-nums}
.proof dd small{font-size:1.25rem}
.proof dt{font-size:.875rem;line-height:1.4;color:var(--muted-dark);max-width:20ch;text-wrap:balance}

/* Talking points: four cells on one wine rule, big Cormorant figure, short text. */
.points{padding-block:var(--section)}
.points__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--wine)}
.points__cell{padding:2rem clamp(1rem,.25rem + 1.6vw,2rem) .25rem;border-left:1px solid var(--rule-light)}
.points__cell:first-child{padding-left:0;border-left:0}
.points__cell:last-child{padding-right:0}
.points__fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem}
.points__num{font-family:var(--ff-display);font-weight:300;font-size:clamp(3rem,2rem + 2.4vw,4.5rem);line-height:.9;letter-spacing:-.01em;color:var(--rose-dk);font-variant-numeric:lining-nums}
.points__unit{font-size:.9375rem;color:var(--muted-light)}
.points__title{margin-top:1.5rem;min-height:2.2em;font-family:var(--ff-display);font-weight:400;font-size:1.625rem;line-height:1.1;text-wrap:balance}
.points__text{margin-top:.75rem;font-size:.9375rem;line-height:1.55;color:var(--muted-light);max-width:30ch}

/* These home headings always break before their italic half, like the mockups' H2s. */
.points .h2 em,.bottles .h2 em,.home .trade__title em{display:block}

/* Bottle band on bone-2: the three photographed lines, each a link to its line. */
.bottles{padding-block:var(--section);background:var(--bone-2)}
.bottles .head__aside p{margin-bottom:.5rem}
.bottles__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,.4rem + 1.6vw,2rem)}
.bottle{display:flex;flex-direction:column}
.bottle__photo img{width:100%;max-width:560px;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%}
.bottle__text{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:end;padding-top:1.25rem;border-bottom:1px solid var(--rule-light);padding-bottom:1.25rem}
.bottle__line{font-family:var(--ff-display);font-weight:400;font-size:var(--fs-h3);line-height:1.08;transition:color var(--dur-fast) ease}
.bottle:hover .bottle__line{color:var(--rose-dk)}
.bottle__wine{grid-column:1;margin-top:.25rem;font-size:.9375rem;color:var(--muted-light)}
.bottle__srp{grid-column:2;grid-row:1/3;text-align:right;font-family:var(--ff-display);font-weight:300;font-size:2.25rem;line-height:1;color:var(--rose-dk);white-space:nowrap}
.bottle__srp small{display:block;margin-bottom:.375rem;font-family:var(--ff-text);font-size:.8125rem;font-weight:500;color:var(--muted-light)}

/* How to start: numbered steps beside the terms ledger. */
.start .work__text{grid-column:1/6}
.start .work__list{grid-column:7/13}
.start .work__text p{max-width:36ch}
.steps{margin:2rem 0 2.25rem;border-top:1px solid var(--rule-light)}
.steps__item{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:1rem;padding:1.125rem 0;border-bottom:1px solid var(--rule-light);font-size:.9375rem;line-height:1.5;color:var(--muted-light)}
.steps__num{font-family:var(--ff-display);font-weight:300;font-size:2.25rem;line-height:.9;color:var(--rose-dk);font-variant-numeric:lining-nums}
.steps b{display:block;margin-bottom:.125rem;font-size:var(--fs-body);font-weight:500;color:var(--wine)}
.start .work__list .link{margin-top:1rem}

/* Phone dock: a slim "Request trade pricing" bar, only with dock.js (html.has-dock)
   and only on phones. It hides over the trade band, the sign-up and the footer. */
.dock{display:none}

/* Below a wide screen the three cards are too narrow for the price beside the name. */
@media (max-width:1180px){
  .bottle__text{grid-template-columns:1fr}
  .bottle__srp{grid-column:1;grid-row:auto;margin-top:.75rem;text-align:left;font-size:1.875rem}
  .bottle__srp small{display:inline;margin:0 .375rem 0 0}
}

@media (max-width:980px){
  .hero__text,.maker__photo,.maker__text,.start .work__text,.start .work__list{grid-column:1/-1}
  /* The text runs full width here, so the wash has to reach further right. */
  .hero__media::after{background:linear-gradient(90deg,color-mix(in srgb,var(--wine) 95%,transparent) 0%,color-mix(in srgb,var(--wine) 86%,transparent) 55%,color-mix(in srgb,var(--wine) 55%,transparent) 100%)}
  .points__title{min-height:0}
  .points__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .points__cell:nth-child(odd){padding-left:0;border-left:0}
  .points__cell:nth-child(even){padding-right:0}
  .points__cell:nth-child(n+3){margin-top:2rem;border-top:1px solid var(--rule-light)}
}
@media (max-width:720px){
  .hero{min-height:44rem}
  .hero__media img{object-position:68% 50%}
  .hero__media::after{background:linear-gradient(180deg,color-mix(in srgb,var(--wine) 70%,transparent) 0%,color-mix(in srgb,var(--wine) 25%,transparent) 26%,color-mix(in srgb,var(--wine) 85%,transparent) 55%,var(--wine) 100%)}
  .hero .lead{margin:1.25rem 0 1.75rem}
  .maker__logo{width:104px;margin-bottom:1.5rem}
  .proof{grid-template-columns:1fr;padding-top:0;margin-top:2rem}
  .proof__item,.proof__item:first-child{flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:1rem;padding:.75rem 0;border-left:0;border-bottom:1px solid var(--rule-dark)}
  .proof dd{font-size:1.75rem;min-width:9.5rem}
  .proof dt{max-width:none}
  .points__grid{grid-template-columns:1fr}
  .points__cell,.points__cell:nth-child(n){display:grid;grid-template-columns:7rem minmax(0,1fr);column-gap:1rem;margin-top:0;padding:1.5rem 0;border-left:0;border-top:1px solid var(--rule-light)}
  .points__cell:first-child{border-top:0}
  .points__fig{grid-row:1/3;flex-direction:column;align-items:flex-start;gap:.375rem}
  .points__num{font-size:2.5rem}
  .points__unit{font-size:.8125rem;line-height:1.3}
  .points__title,.points__text{grid-column:2}
  .points__title{margin-top:0;font-size:1.375rem}
  .bottles__grid{grid-template-columns:1fr;gap:0}
  .bottle{flex-direction:row;align-items:center;gap:1.25rem;padding:1rem 0;border-top:1px solid var(--rule-light)}
  .bottle:last-child{border-bottom:1px solid var(--rule-light)}
  .bottle__photo{flex:0 0 36%}
  .bottle__text{padding:0;border-bottom:0}
  html.has-dock .dock{display:block;position:fixed;inset:auto 0 0 0;z-index:40;padding:.625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom));background:var(--wine);border-top:1px solid var(--rule-dark);transform:translateY(100%);visibility:hidden;transition:transform var(--dur-fast) ease,visibility 0s linear var(--dur-fast)}
  html.has-dock .dock.is-on{transform:none;visibility:visible;transition:transform var(--dur-fast) ease}
  .dock .btn{width:100%}
  .dock :focus-visible{outline-color:var(--rose)}
}

/* ========== producer ========== */
.strip--timeline .strip__figure{order:-1;margin:0 0 1.25rem;padding-top:0;font-size:clamp(2.75rem,2rem + 2vw,3.875rem);color:var(--rose)}
.strip--timeline .strip__name{margin-top:0}

.family{padding-block:var(--section) 0;row-gap:2rem;align-items:end}
.family__photo{grid-column:1/9;max-width:1024px}
.family__photo img{width:100%;height:auto;aspect-ratio:1024/683}
.family__photo figcaption{margin-top:.75rem;font-size:.875rem;color:var(--muted-light)}
.family__text{grid-column:9/13;padding-bottom:2.25rem}
.family__text p{margin-top:1.5rem;max-width:36ch}
/* The site's one moment of motion: the family photo. Without JavaScript the photo
   shows as normal, because the hidden state hangs off html.js. */
.reveal{transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
html.js .reveal{opacity:0;transform:translateY(12px)}
html.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}

.method{padding-block:var(--section)}
.stage{padding-top:clamp(2.5rem,1.5rem + 3vw,4rem);border-top:1px solid var(--wine);row-gap:2rem;align-items:start}
.stage + .stage{margin-top:clamp(3.5rem,2rem + 4vw,6rem)}
.stage__title{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem}
.stage__title p{color:var(--muted-light);font-size:.9375rem}
.stage__photo{grid-column:1/6}
.stage__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.stage__photo figcaption{margin-top:.75rem;font-size:.875rem;color:var(--muted-light)}
.figures{grid-column:7/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule-light)}
.figures > div{padding:1.75rem 1.5rem 2rem 0;border-bottom:1px solid var(--rule-light)}
.figures > div:nth-child(even){padding-left:1.5rem;padding-right:0;border-left:1px solid var(--rule-light)}
.figure__num{display:block;font-family:var(--ff-display);font-weight:300;font-size:clamp(2.5rem,1.6rem + 2.4vw,3.875rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums}
.figure__num small{font-size:.5em;letter-spacing:0}
.figure__label{display:block;margin-top:.75rem;font-size:.9375rem;line-height:1.45;color:var(--muted-light);max-width:24ch}
.stage--cellar .figures{grid-column:1/7;grid-row:2}
.stage--cellar .stage__photo{grid-column:8/13;grid-row:2}
.notes{grid-column:1/7;display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:.25rem}
.notes li{font-size:.9375rem;padding-left:1rem;position:relative}
.notes li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:1px;background:var(--rose-dk)}
.winemaker{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:baseline;margin-top:clamp(3rem,2rem + 3vw,5rem);padding-top:1.5rem;border-top:1px solid var(--rule-light)}
.winemaker b{font-family:var(--ff-display);font-weight:400;font-size:1.875rem}
.winemaker span{color:var(--muted-light)}

@media (max-width:980px){
  .family__photo,.family__text,.stage__photo,.figures,.stage--cellar .figures,.stage--cellar .stage__photo,.notes{grid-column:1/-1;grid-row:auto}
  .family__text{padding-bottom:0}
}
@media (max-width:720px){
  .strip--timeline .strip__item,.strip--timeline .strip__item:nth-child(n){grid-template-columns:5.5rem minmax(0,1fr)}
  .strip--timeline .strip__figure{grid-column:1;grid-row:1/3;align-self:start;text-align:left;font-size:2rem;margin:0}
  .strip--timeline .strip__name,.strip--timeline .strip__text{grid-column:2}
  .figures > div{padding:1.25rem 1rem 1.5rem 0}
  .figures > div:nth-child(even){padding-left:1rem}
  .figure__label{font-size:.875rem}
}

/* ========== portfolio ========== */
.producer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding-block:clamp(2.5rem,1.5rem + 3vw,4rem) clamp(2rem,1rem + 2.5vw,3.5rem)}
.producer-bar img{width:112px;height:auto}
.producer-bar p{max-width:46ch;color:var(--muted-light)}
.producer-bar p b{display:block;color:var(--wine);font-weight:500;font-size:var(--fs-body)}
.producer-bar .link{margin-left:auto}

.lines{padding-bottom:var(--section)}
/* Three columns that all start at the same baseline: name + facts, bottle, table.
   align-items:start stops any one of them stretching to the tallest row, so the
   block is only as tall as its own content and the four blocks keep one rhythm. */
.line{padding-block:clamp(2.5rem,1.5rem + 3vw,4rem);border-top:1px solid var(--wine);row-gap:1.5rem;align-items:start;scroll-margin-top:1rem}
.line__head{grid-column:1/4}
.line__name{font-family:var(--ff-display);font-weight:300;font-size:clamp(2.25rem,1.6rem + 1.6vw,3.25rem);line-height:1;letter-spacing:-.01em}
.line__facts{margin-top:1rem;font-size:.9375rem;line-height:1.55;color:var(--muted-light)}
.line__facts b{color:var(--wine);font-weight:500}
/* Fixed aspect plinth on bone: the bottle is contained inside it, so no neck or
   label is cropped, and the photo is never scaled past its native width. */
.line__photo{grid-column:4/6}
.line__photo img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--bone)}
.line__photo figcaption{margin-top:.5rem;font-size:.8125rem;color:var(--muted-light)}
.line__seal{display:flex;align-items:center;gap:1rem;margin-top:1.75rem}
.line__seal img{width:88px;height:88px}
.line__seal p{font-size:.9375rem;line-height:1.45}
.line__seal b{display:block;font-weight:500}
.line__table{grid-column:6/13}
.srp-note{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-top:1.5rem;border-top:1px solid var(--wine);font-size:.9375rem;color:var(--muted-light)}

@media (max-width:1180px){
  .line__head{grid-column:1/5}
  .line__photo{grid-column:5/7}
  .line__table{grid-column:7/13}
}
@media (max-width:980px){
  .line__head{grid-column:1/8}
  .line__photo{grid-column:9/13}
  .line__table{grid-column:1/-1}
  .producer-bar .link{margin-left:0}
}
@media (max-width:720px){
  .producer-bar img{width:88px}
  .line__photo figcaption{display:none}
  .line__seal img{width:64px;height:64px}
}

/* ========== certifications ========== */
/* The ladder reads top to bottom: step 1 covers 9 of 9 labels, step 2 is inset from
   the left and narrower on purpose, joined by a riser in the gap between them. */
.ladder-sec{padding-block:var(--section)}
.ladder{--rise:clamp(2.5rem,1.5rem + 3vw,4.5rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,.4rem + 1.6vw,2rem)}
.step{position:relative;border-top:1px solid var(--wine)}
.step--base{grid-column:1/11;display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);column-gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);align-items:start;padding-top:2.25rem}
.step--top{grid-column:3/11;margin-top:var(--rise);padding:2.25rem 2.5rem 2.5rem;background:var(--bone-2)}
.step--top::before{content:"";position:absolute;left:0;top:calc(var(--rise) * -1);width:1px;height:var(--rise);background:var(--wine)}
.step__mark{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem}
.step--base .step__mark{display:block}
.step__count{font-family:var(--ff-display);font-weight:300;font-size:clamp(4rem,2.75rem + 3.2vw,6.5rem);line-height:.8;color:var(--rose-dk);font-variant-numeric:lining-nums}
.step__count span{display:block;margin-top:.75rem;font-family:var(--ff-text);font-size:.9375rem;font-weight:500;line-height:1.3;color:var(--wine)}
.step__seal--oia{width:auto;height:152px;margin-top:2rem}
.step__seal--round{width:96px;height:96px}
.step h3{margin-top:0}
.step--top h3{margin-top:2rem}
.step p{margin-top:.875rem;max-width:52ch}
.step__lines{margin-top:2rem;border-top:1px solid var(--rule-light)}
.step__lines li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.25rem 1.5rem;padding:.875rem 0;border-bottom:1px solid var(--rule-light);font-size:.9375rem}
.step__lines b{font-weight:500}
.step__lines span{color:var(--muted-light)}

.ground{padding-bottom:var(--section);row-gap:2rem;align-items:center}
.ground__photo{grid-column:1/8}
.ground__photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ground__photo figcaption{margin-top:.75rem;font-size:.875rem;color:var(--muted-light)}
.ground__text{grid-column:9/13}
.ground__text p{margin-top:1.5rem;max-width:38ch}

@media (max-width:980px){
  .step--base,.step--top,.ground__photo,.ground__text{grid-column:1/-1}
  .step--base{grid-template-columns:minmax(0,1fr);row-gap:1.75rem;padding-bottom:1rem}
  .step--base h3{margin-top:0}
  .step--top{padding:2rem 1.5rem 2.25rem}
  .step--top::before{left:1.5rem}
}
@media (max-width:720px){
  .step__seal--oia{height:120px}
  .step__seal--round{width:80px;height:80px}
  .step__lines li{grid-template-columns:1fr}
}

.strip--facts .strip__figure{order:-1;margin:0 0 1.25rem;padding-top:0;font-size:clamp(2.5rem,2rem + 1.6vw,3.5rem);color:var(--rose)}
.strip--facts .strip__name{margin-top:0}
@media (max-width:720px){
  .strip--facts .strip__item,.strip--facts .strip__item:nth-child(n){grid-template-columns:6.5rem minmax(0,1fr)}
  .strip--facts .strip__figure{grid-column:1;grid-row:1/3;align-self:start;text-align:left;font-size:1.75rem;margin:0}
  .strip--facts .strip__name,.strip--facts .strip__text{grid-column:2}
}

/* ========== distributors ========== */
.inquiry{padding-block:var(--section);row-gap:2.5rem;scroll-margin-top:0}
.inquiry__text{grid-column:1/5;align-self:start;position:sticky;top:2rem}
.inquiry__text p{margin-top:1.25rem;max-width:34ch}
.inquiry__next{margin-top:2rem;border-top:1px solid var(--rule-light)}
.inquiry__next li{padding:.875rem 0;border-bottom:1px solid var(--rule-light);font-size:.9375rem;color:var(--muted-light)}
.inquiry__next b{display:block;color:var(--wine);font-weight:500}
.inquiry__form{grid-column:6/13}

.form{display:grid;gap:2.25rem}
.form fieldset{border:0;min-width:0}
.form__group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}
.form__group .field--full{grid-column:1/-1}
.form__part{padding-top:1.5rem;border-top:1px solid var(--wine)}
.form__part > legend,.form__part-title{float:left;width:100%;margin-bottom:1.25rem;font-family:var(--ff-display);font-size:1.625rem;font-weight:400;line-height:1.1}
.form__part > legend + *{clear:both}
.legend{display:block;margin-bottom:.625rem}
.options{display:flex;flex-wrap:wrap;gap:.625rem}
.opt{position:relative;display:inline-flex;align-items:center;gap:.625rem;min-height:48px;padding:0 1rem 0 .875rem;border:1px solid var(--rule-light);border-radius:var(--radius);font-size:.9375rem;cursor:pointer;transition:border-color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.opt:hover{border-color:var(--wine)}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt__mark{flex:none;width:18px;height:18px;border:1px solid var(--muted-light);background:var(--bone);display:grid;place-items:center;transition:background-color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.opt--radio .opt__mark{border-radius:50%}
.opt--check .opt__mark{border-radius:1px}
.opt:has(input:checked){border-color:var(--wine);background:var(--bone-2)}
.opt:has(input:checked) .opt__mark{border-color:var(--wine);background:var(--wine);box-shadow:inset 0 0 0 3px var(--bone)}
.opt--check:has(input:checked) .opt__mark{box-shadow:inset 0 0 0 3px var(--bone)}
.opt:has(input:focus-visible){outline:2px solid var(--rose-dk);outline-offset:2px}
.optional{font-weight:400;color:var(--muted-light)}
.form__consent{border-top:1px solid var(--rule-light);padding-top:1.5rem}
.form__submit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.form__submit p{font-size:.875rem;color:var(--muted-light);max-width:40ch}
.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.trap input{width:12rem;min-height:48px}

/* error state */
.input[aria-invalid="true"]{border:2px solid var(--rose-dk);padding:calc(.625rem - 1px) calc(.875rem - 1px)}
.field__error{display:flex;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--rose-dk)}
.field__error::before{content:"";flex:none;width:2px;margin:.2em 0;background:var(--rose-dk)}
.form__alert{padding:1.125rem 1.25rem;border:2px solid var(--rose-dk);border-radius:var(--radius);background:var(--bone)}
.form__alert b{display:block;font-weight:500;color:var(--rose-dk)}
.form__alert ul{margin-top:.25rem}
.form__alert a{display:inline-flex;align-items:center;min-height:var(--tap);box-shadow:inset 0 -1px 0 currentColor;font-size:.9375rem}

.sent{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,.4rem + 1.6vw,2rem);row-gap:2rem}
.sent__main{grid-column:6/13;padding-top:1.5rem;border-top:1px solid var(--wine)}
.sent__side{grid-column:1/5}
.sent__main p{margin-top:1.25rem;max-width:48ch}
.sent__main .actions{margin-top:2rem}

@media (max-width:980px){
  .work__text,.work__list,.inquiry__text,.inquiry__form,.sent__main,.sent__side{grid-column:1/-1}
  .inquiry__text{position:static}
}
@media (max-width:720px){
  .form__group{grid-template-columns:1fr}
  .options{display:grid;grid-template-columns:1fr}
}

/* ========== contact ========== */
.reach{padding-block:var(--section);row-gap:3rem;align-items:start}
.person{grid-column:1/5}
.person__name{font-family:var(--ff-display);font-weight:300;font-size:var(--fs-h2);line-height:1}
.person__role{margin-top:.75rem;color:var(--muted-light)}
.person p + p{margin-top:1.5rem;max-width:34ch}
.channels{grid-column:6/13;border-top:1px solid var(--wine)}
.channel{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:.5rem 2rem;align-items:baseline;padding:1.5rem 0 1.625rem;border-bottom:1px solid var(--rule-light)}
.channel dt{font-size:.9375rem;color:var(--muted-light)}
.channel dd{font-family:var(--ff-display);font-weight:300;font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem);line-height:1.15;font-variant-numeric:lining-nums}
.channel dd a{display:inline-flex;align-items:center;min-height:var(--tap);box-shadow:inset 0 -1px 0 var(--rule-light);transition:box-shadow var(--dur-fast) ease,color var(--dur-fast) ease}
.channel dd a:hover{color:var(--rose-dk);box-shadow:inset 0 -1px 0 var(--rose-dk)}
.channel dd small{display:block;margin-top:.375rem;font-family:var(--ff-text);font-size:.9375rem;font-weight:400;color:var(--muted-light)}
.trade-note{grid-column:6/13;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.5rem 1.75rem;background:var(--bone-2)}
.trade-note p{max-width:40ch}
.trade-note b{font-weight:500}

@media (max-width:980px){
  .person,.channels,.trade-note{grid-column:1/-1}
}
@media (max-width:720px){
  .channel{grid-template-columns:1fr;padding:1.125rem 0 1.25rem}
  .channel dd{font-size:1.75rem}
  .channel dd a{font-size:1.5rem}
  .trade-note{padding:1.25rem}
}

/* ========== privacy, terms (no mockup) ========== */
/* A readable measure on bone, aligned with the intro title above it. */
.prose p{max-width:68ch}
.prose p + p{margin-top:1.25rem}