@charset "UTF-8";
/* ==========================================================================
   Porcelina Wines — Terroir
   Direction 04. The vineyards are the argument.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Jost:wght@200;300;400;500&display=swap');

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Brand — #0c248c is Porcelina's existing blue, taken from the live site */
  --blue:#0c248c;
  --blue-mid:#3348a8;
  --blue-soft:#5d6bd2;

  --ink:#16203c;
  --ink-2:#48506a;
  --ink-3:#7b8199;

  --ground:#f7f8fb;
  --card:#ffffff;
  --rule:#e0e3ec;
  --rule-soft:#eef0f5;
  --tbc:#a07a2c;

  --measure:56ch;
  --pad:clamp(1.25rem, 4vw, 2.875rem);
  --gap:clamp(1.5rem, 3vw, 2.25rem);

  --serif:'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --nav-h:64px;

  /* Splash / header — ported from the live site, whose root font-size is
     clamp(12px,1.5vw,14px). Their rem values are expressed here in the
     equivalent pixels so this site's own type scale is left alone. */
  --hdr-h:clamp(108px, 8.9vw, 132px);
  --hdr-h-sm:70px;
  --display:'Cinzel', Georgia, serif;
}

/* --------------------------------------------------------------------------
   Page shell
   The layout is edge-to-edge by design. Past about 1500px that stops reading
   as generous and starts reading as stretched: the photographs become the
   whole screen and the text is marooned in the middle of it. The page is
   capped and centred instead, which is what actually makes the images smaller
   and the words bigger on a large monitor.
   -------------------------------------------------------------------------- */
:root{ --shell:1500px }
.ph__in,
main#main,
.ftr__in{ max-width:var(--shell); margin-left:auto; margin-right:auto }
@media (min-width:1560px){
  main#main{ border-left:1px solid var(--rule); border-right:1px solid var(--rule) }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
  overflow-y:scroll;scrollbar-gutter:stable;
  /* Every size below is set in rem, so the root carries the whole type scale.
     16px up to about 1200px wide, easing to 18px past about 1900px: the page
     was pinned to a 16px root and read as fine print on a large display. */
  font-size:clamp(16px, 0.29vw + 12.5px, 18px);
}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:clamp(14px,0.18vw + 12.4px,17px);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
img,picture,video,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{border:none;background:none;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 20px;z-index:3000;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:0}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.serif{font-family:var(--serif)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.06;color:var(--ink)}
h1{font-size:clamp(2.25rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.125rem)}
h3{font-size:clamp(1.35rem,2.1vw,1.75rem)}
h4{font-size:clamp(1.15rem,1.5vw,1.375rem);font-weight:400}
em.accent{font-style:italic;color:var(--blue-mid)}

.lbl{
  display:block;font-family:var(--sans);font-weight:400;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
}
.lbl--blue{color:var(--blue-mid)}
/* An eyebrow sits directly above the heading it introduces, and every margin
   on the page is reset, so the two were touching wherever one was not spaced
   by hand. One rule covers the lot; the few local rules that already open a
   larger gap still win, since adjacent margins collapse to the larger. */
h1,h2,h3,h4{margin-top:0}
.lbl + h1,.lbl + h2,.lbl + h3,.lbl + h4{margin-top:.75rem}

.body{font-size:.875rem;line-height:1.75;color:var(--ink-2);max-width:var(--measure)}
.body + .body{margin-top:1em}
.lead{font-size:.95rem;line-height:1.72;color:var(--ink-2);max-width:60ch}

.tbc{color:var(--tbc);font-style:italic}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.pad{padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:clamp(2.5rem,5vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.rule-t{border-top:1px solid var(--rule)}
.rule-b{border-bottom:1px solid var(--rule)}
.bg-card{background:var(--card)}
.bg-ground{background:var(--ground)}
.center{text-align:center}
.stack > * + *{margin-top:1rem}

.grid{display:grid;gap:0}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Separators between grid cells. These were inline styles on the elements,
   which meant no media query could reach them: the four Craft steps stayed
   four columns on a phone, one word per line. As classes they can flip from
   vertical rules to horizontal ones when the grid stacks. */
.rule-l{border-left:1px solid var(--rule)}
.rule-bb{border-bottom:1px solid var(--rule)}

@media (max-width:860px){
  .g-3,.g-4{grid-template-columns:1fr}
  .g-3>*+*,.g-4>*+*{border-top:1px solid var(--rule)}
  .g-3>.rule-l,.g-4>.rule-l{border-left:0}
  .g-3>.rule-bb,.g-4>.rule-bb{border-bottom:0}
}
@media (max-width:620px){
  .g-2{grid-template-columns:1fr}
  .g-2>*+*{border-top:1px solid var(--rule)}
  .g-2>.rule-l{border-left:0}
  .g-2>.rule-bb{border-bottom:0}
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;background:var(--blue);color:#fff;
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  padding:1rem 2.125rem;text-align:center;transition:background .18s ease;
}
.btn:hover,.btn:focus{background:#0a1d73}
.btn--ghost{background:transparent;color:var(--blue);border:1px solid #b9c0dd}
.btn--ghost:hover,.btn--ghost:focus{background:transparent;border-color:var(--blue)}
.btn--light{background:#fff;color:var(--blue)}
.btn--light:hover{background:#f0f2f8}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

.link-arrow{
  display:inline-block;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-mid);border-bottom:1px solid #b9c0dd;padding-bottom:3px;transition:.18s;
}
.link-arrow:hover,.link-arrow:focus{color:var(--blue);border-color:var(--blue)}
.link-arrow--muted{color:var(--ink-3);border-color:var(--rule)}

/* --------------------------------------------------------------------------
   Sound toggle (lives in the fullscreen menu)
   -------------------------------------------------------------------------- */
.sound{
  width:34px;height:34px;border:1px solid var(--rule);display:grid;place-items:center;color:var(--ink-3);
  transition:.18s;flex:none;margin:14px auto 0;background:#fff;
}
.sound:hover{border-color:var(--ink-3);color:var(--ink)}
.sound svg{width:15px;height:15px}
.sound .on{display:none}
.sound[aria-pressed="true"] .on{display:block}
.sound[aria-pressed="true"] .off{display:none}
.sound[aria-pressed="true"]{color:var(--blue);border-color:#b9c0dd}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.crumb{background:var(--card);border-bottom:1px solid var(--rule);padding-top:.85rem;padding-bottom:.85rem}
.crumb ol{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.crumb li::after{content:"/";margin-left:.5rem;color:var(--rule)}
.crumb li:last-child::after{content:""}
.crumb li[aria-current]{color:var(--ink)}

/* --------------------------------------------------------------------------
   Hero variants
   -------------------------------------------------------------------------- */
/* padding-top only left the closing line sitting on the bottom rule. */
.hero-c{background:var(--card);border-bottom:1px solid var(--rule);padding-top:clamp(2.5rem,5vw,3.75rem);padding-bottom:clamp(2rem,4vw,3rem);text-align:center}
.hero-c .eye{width:38px;margin:0 auto 1.25rem}
.hero-c h1,.hero-c__h{margin-top:.75rem}
.hero-c__h{font-size:clamp(2rem,4vw,2.9rem)}
.hero-c .lead{margin:1.125rem auto 0}

.hero-img{
  position:relative;display:flex;align-items:flex-end;color:#fff;
  width:100%;aspect-ratio:12/5;min-height:clamp(280px,44vw,440px);
}
.hero-img__bg{position:absolute;inset:0;background-size:cover;background-position:center 44%}
.hero-img__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,20,50,.34) 0%,rgba(12,20,50,.06) 38%,rgba(12,20,50,.84) 100%)}
.hero-img__in{position:relative;width:100%;padding-top:2rem;padding-bottom:2.125rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.hero-img h1{color:#fff;margin-top:.75rem}
.hero-img .lbl{color:rgba(255,255,255,.86)}
.hero-img .pin{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid rgba(255,255,255,.5);padding:.5rem .875rem;white-space:nowrap}

.hero-side{
  position:relative;display:flex;align-items:center;color:#fff;
  /* 8/3 against the 1500px shell is about 562px tall. Taller than the original
     360px band, which showed barely a third of each photograph, but trimmed
     back from 12/5 because 625px was more banner than the pages wanted. */
  width:100%;aspect-ratio:3200/1083;min-height:clamp(262px,36.1vw,361px); /* two 5% cuts from 8/3, Oct 2026 */
}
.hero-side__bg{position:absolute;inset:0;background-size:cover;background-position:center center}
.hero-side__veil{position:absolute;inset:0;background:linear-gradient(96deg,rgba(12,20,50,.92) 0%,rgba(12,20,50,.68) 52%,rgba(12,20,50,.26) 100%)}
.hero-side__in{position:relative;max-width:640px;padding-top:2.75rem;padding-bottom:2.75rem}
.hero-side h1{color:#fff;margin-top:.75rem}
.hero-side .lbl{color:rgba(255,255,255,.86)}
.hero-side p{color:rgba(255,255,255,.92);font-size:.9rem;line-height:1.72;margin-top:1rem;max-width:48ch}

/* --------------------------------------------------------------------------
   Section-cut + AVA bar
   -------------------------------------------------------------------------- */
.cut{margin-top:clamp(1.75rem,4vw,2.75rem)}
/* The drawing is 1180x268. It used to be stretched to whatever height a
   viewport-based clamp produced, which on a wide screen squashed it to little
   over half its proper height. It now scales on its own ratio. */
.cut svg{width:100%;height:auto;display:block;aspect-ratio:1180/268}
.cutwrap{position:relative}
/* At its true proportions the drawing is only ~85px tall on a phone, which
   makes the site labels unreadable. There it keeps a legible width and the
   strip scrolls sideways instead, with an arrow to say so. */
.cut-hint{display:none}
@media (max-width:760px){
  .cut{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cut::-webkit-scrollbar{display:none}
  .cut svg{min-width:900px}
  .cut-hint{
    display:flex;align-items:center;justify-content:center;
    position:absolute;right:.6rem;top:28%;width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(22,32,60,.2);
    color:var(--blue);pointer-events:none;z-index:3;
    animation:cuthint 1.7s ease-in-out infinite;
  }
  .cut-hint svg{width:15px;height:15px;display:block;min-width:0}
  /* Once the strip has been scrolled the arrow has done its job. */
  .cutwrap--seen .cut-hint{animation:none;opacity:0;transition:opacity .45s ease}
}
@keyframes cuthint{
  0%,100%{opacity:.3;transform:translate(0,-50%)}
  50%{opacity:1;transform:translate(6px,-50%)}
}
@media (prefers-reduced-motion:reduce){
  .cut-hint{animation:none;opacity:.92;transform:translateY(-50%)}
}
.avabar{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);background:var(--card)}
.avabar div{padding:.8rem 1rem;text-align:center;border-right:1px solid var(--rule-soft);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.avabar div:last-child{border-right:0}
.avabar b{color:var(--ink);font-weight:400}
@media (max-width:700px){.avabar{grid-template-columns:1fr}.avabar div{border-right:0;border-bottom:1px solid var(--rule-soft)}}

/* --------------------------------------------------------------------------
   The 2025 release list
   Names the wines without pretending to a spec sheet, since the vintage has
   no notes, counts or bottle shots yet.
   -------------------------------------------------------------------------- */
.rel{margin-top:1.5rem;border-top:1px solid var(--rule)}
.rel li{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.72rem 0;border-bottom:1px solid var(--rule-soft);
}
.rel b{font-family:var(--serif);font-weight:400;font-size:1.12rem}
.rel a{text-decoration:none}
.rel a:hover b{color:var(--blue-mid)}
.rel__ava{font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-left:auto;text-align:right}
.rel__badge{
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-mid);
  border:1px solid #b9c0dd;padding:.16rem .5rem;flex:none;
}
.rel--new b{color:var(--blue)}
.rel__facts{margin-top:1.4rem}
.rel .marker{flex:none}
@media (max-width:620px){
  .rel__ava{margin-left:0;width:100%;text-align:left}
}
.rel-strip .lead{max-width:62ch;margin-top:.75rem}
@media (min-width:1200px){ .rel__ava{font-size:.68rem} .rel__badge{font-size:.62rem} }

/* A bottle render that does not exist yet keeps the slot's shape. */
.bottle-soon{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.6rem;
  height:100%;color:var(--ink-3);
}
.bottle-soon i{
  display:block;width:54px;height:150px;border:1px dashed #c2c8db;border-radius:3px 3px 6px 6px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(222,227,240,.45) 100%);
}
.bottle-soon em{font-style:normal;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase}
.wine-feature__bot .bottle-soon i{width:104px;height:330px}

/* The vintage write-up, folded away so it does not bury the wines. */
.vint{margin-top:1.25rem;border-top:1px solid var(--rule);padding-top:.9rem}
.vint summary{
  cursor:pointer;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-mid);
  list-style:none;
}
.vint summary::-webkit-details-marker{display:none}
.vint summary::after{content:' \002B';font-size:.9rem;letter-spacing:0}
.vint[open] summary::after{content:' \2212'}
.vint p{margin-top:.8rem;max-width:68ch}
@media (min-width:1200px){ .vint summary{font-size:.68rem} }

/* A site whose photograph has not been shot yet. The veil alone over nothing
   leaves white text on white, so the panel carries the brand blue instead. */
.hero-img__bg--none{background:linear-gradient(170deg,#16205a 0%,var(--blue) 58%,#2b3a86 100%)}
.site-card--soon .site-card__ph{background-color:#e6e9f2}

/* A figure taken from published sources rather than from the grower. It reads
   as a caveat, not as a footnote to be missed. */
.prov{
  display:inline-block;margin-left:.5rem;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tbc);border:1px solid #d8c79c;border-radius:99px;padding:.1rem .45rem;
  vertical-align:.1em;white-space:nowrap;
}
@media (min-width:1200px){ .prov{font-size:.58rem} }

/* marker device */
.marker{display:inline-flex;align-items:center;gap:.45rem;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.marker i{width:6px;height:6px;border-radius:50%;background:var(--blue);display:block;flex:none}
.marker--off i{background:#fff;border:1px solid #9aa2bd}
.marker--soon{color:var(--ink-3)}
.marker--soon i{background:#c6cbdb}

/* --------------------------------------------------------------------------
   Site cards
   -------------------------------------------------------------------------- */
.sites{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--card);border-bottom:1px solid var(--rule)}
.site-card{border-right:1px solid var(--rule);padding-bottom:1.6rem;display:flex;flex-direction:column}
.site-card:last-child{border-right:0}
.site-card--soon{background:#fbfcfe}
.site-card__ph{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--rule-soft)}
.site-card__in{padding:1.25rem 1.5rem 0;display:flex;flex-direction:column;flex:1}
.site-card h3{margin-top:.5rem;font-size:1.3rem;font-weight:400}
.site-card__ava{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:.3rem}
.site-card p{font-size:.8rem;line-height:1.62;color:var(--ink-2);margin-top:.8rem}
.site-card .link-arrow{margin-top:auto;padding-top:1rem;align-self:flex-start}
@media (max-width:1050px){.sites{grid-template-columns:repeat(2,1fr)}.site-card:nth-child(2n){border-right:0}.site-card:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media (max-width:620px){.sites{grid-template-columns:1fr}.site-card{border-right:0;border-bottom:1px solid var(--rule)}}

/* data table */
.data{margin-top:1rem;border-top:1px solid var(--ink)}
.data__r{display:flex;justify-content:space-between;gap:1.25rem;border-bottom:1px solid var(--rule);padding:.65rem 0;font-size:.78rem}
.data__r dt{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.data__r dd{margin:0;text-align:right;color:var(--ink)}
.data--tight .data__r{padding:.45rem 0;border-bottom:1px solid var(--rule-soft)}

/* --------------------------------------------------------------------------
   Wine cards
   -------------------------------------------------------------------------- */
.wines-row{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));margin-top:1.75rem}
/* --cols is set inline per row, from the number of wines in that row, so a
   five-wine vintage is a row of five rather than four plus an orphan. The
   narrow-screen rules below override grid-template-columns directly, which
   still beats an inline custom property. */
.wines-grp+.wines-grp{margin-top:clamp(2.25rem,3.6vw,3.25rem)}
.wines-grp__h{display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;margin-top:1.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule)}
/* These two are section dividers, not fine print: the vintage reads at a size
   that carries the row below it, and the note sits on --ink-2 rather than
   --ink-3, which was under 4:1 against the ground and hard to read. */
.wines-grp__h span{font-size:.95rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink);font-weight:500}
/* The year itself carries two points more than the words around it. calc
   rather than an em factor, so it stays exactly two points at every step of
   the root type scale. */
.wines-grp__h span b{font-weight:inherit;font-size:calc(1em + 2px)}
.wines-grp__h em{font-style:normal;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.wines-grp .wines-row{margin-top:1.25rem}
.wine-card{border-right:1px solid var(--rule);padding:0 1.5rem;display:flex;flex-direction:column}
.wine-card:first-child{padding-left:0}
.wine-card:last-child{border-right:0;padding-right:0}
.wine-card__bot{height:266px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:1rem}
/* 266px is 190px plus 40%. The source renders are 320x1024, so this is
   still well inside their native resolution. */
.wine-card__bot img{max-height:266px;width:auto;filter:drop-shadow(0 14px 19px rgba(22,32,60,.17))}
.wine-card h3{font-size:1.2rem;font-weight:400;margin-top:.4rem}
.wine-card p{font-size:.78rem;line-height:1.58;color:var(--ink-2);margin-top:.6rem}
.wine-card__spec{display:flex;justify-content:space-between;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:auto;padding-top:.7rem;border-top:1px solid var(--rule-soft)}
.wine-card__from{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-mid)}
@media (max-width:1050px){
  .wines-row{grid-template-columns:repeat(2,1fr);gap:2rem 0}
  .wine-card{padding:0 1.25rem}
  .wine-card:nth-child(2n){border-right:0;padding-right:0}
  .wine-card:nth-child(2n+1){padding-left:0}
}
@media (max-width:560px){.wines-row{grid-template-columns:1fr}.wine-card{border-right:0;padding:0}}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;border-bottom:1px solid var(--ink);padding-bottom:.8rem;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   Team photograph
   -------------------------------------------------------------------------- */
/* The photograph is portrait. It is shown whole rather than cropped into a
   landscape band, with its height capped so the section keeps a sane depth:
   the width then follows from the image's own proportions. */
.teamshot{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(1.75rem,4vw,3.5rem);margin-top:1.5rem}
.teamshot__im{display:block;height:clamp(360px,44vw,620px);width:auto;max-width:100%}
.teamshot__cap{margin-top:1.4rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:2;max-width:34em}
@media (max-width:860px){
  .teamshot{grid-template-columns:1fr;gap:1.75rem}
  .teamshot__im{height:auto;width:100%;max-width:440px;margin:0 auto}
}

/* --------------------------------------------------------------------------
   Split bands
   -------------------------------------------------------------------------- */
.band{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border-top:1px solid var(--rule)}
.band__im{background-size:cover;background-position:center;background-color:var(--rule-soft);min-height:440px}
.band__tx{padding:clamp(2rem,4vw,3.5rem) var(--pad);display:flex;flex-direction:column;justify-content:center}
.band__tx h2 + .body{margin-top:.9rem}
.band--rev .band__im{order:2}
@media (max-width:860px){.band{grid-template-columns:1fr}.band--rev .band__im{order:0}}

.steps{display:flex;gap:2rem;margin-top:1.6rem;border-top:1px solid var(--rule);padding-top:1.125rem;flex-wrap:wrap}
.steps div{flex:1;min-width:120px}
.steps b{display:block;font-family:var(--serif);font-weight:400;font-size:1.2rem;margin-top:.25rem}

.pull{
  font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);
  line-height:1.32;color:var(--blue-mid);margin-top:1.75rem;padding-left:1.25rem;
  border-left:1px solid #b9c0dd;max-width:44ch;
}

/* --------------------------------------------------------------------------
   Vineyard page
   -------------------------------------------------------------------------- */
.v-split{display:grid;grid-template-columns:1.5fr 1fr;background:var(--card);border-bottom:1px solid var(--rule)}
.v-split__l{padding:clamp(2rem,4vw,3.25rem) var(--pad);border-right:1px solid var(--rule)}
.v-split__r{padding:clamp(2rem,4vw,3.25rem) var(--pad)}
/* Margins are reset globally, so the eyebrow, the heading and the first
   paragraph in this column were stacked with no air between them. The
   eyebrow gap matches the one the data list opens with on the right. */
.v-split__l > .lbl:first-child{margin-bottom:1rem}
.v-split__l > h2{margin-bottom:1.4rem}
@media (max-width:900px){.v-split{grid-template-columns:1fr}.v-split__l{border-right:0;border-bottom:1px solid var(--rule)}}

.mapwrap{display:grid;grid-template-columns:1fr 1.35fr;background:var(--ground);border-bottom:1px solid var(--rule)}
.mapwrap__tx{padding:clamp(2rem,3.5vw,2.875rem) var(--pad);border-right:1px solid var(--rule)}
.mapwrap__fig{padding:clamp(1.5rem,3vw,2.125rem) var(--pad);display:flex;align-items:center;justify-content:center}
.mapwrap__fig svg{width:100%;max-width:440px;height:auto}
@media (max-width:900px){.mapwrap{grid-template-columns:1fr}.mapwrap__tx{border-right:0;border-bottom:1px solid var(--rule)}}
.maplist{margin-top:1.5rem}
.maplist li{display:flex;align-items:center;gap:.55rem;padding:.55rem 0;border-bottom:1px solid var(--rule-soft);font-size:.78rem;color:var(--ink-2)}
.maplist li i{width:6px;height:6px;border-radius:50%;background:var(--blue);display:block;flex:none}
.maplist li.off i{background:#fff;border:1px solid #9aa2bd}
.maplist li[aria-current]{color:var(--ink)}
.maplist li[aria-current] i{background:var(--blue);box-shadow:0 0 0 4px rgba(12,36,140,.14)}
.maplist li span:last-child{margin-left:auto;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:right}

.wine-feature{display:grid;grid-template-columns:.85fr 1.15fr;background:var(--card);border-bottom:1px solid var(--rule)}
.wine-feature__bot{padding:clamp(2rem,4vw,3.25rem);min-height:680px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--rule);background:radial-gradient(58% 50% at 50% 58%, #eef0f6 0%, rgba(255,255,255,0) 74%)}
.wine-feature__bot img{max-height:600px;width:auto;filter:drop-shadow(0 22px 30px rgba(22,32,60,.19))}
.wine-feature__tx{padding:clamp(2rem,4vw,3rem) var(--pad);display:flex;flex-direction:column;justify-content:center}
@media (max-width:860px){.wine-feature{grid-template-columns:1fr}.wine-feature__bot{border-right:0;border-bottom:1px solid var(--rule)}}
.quick{display:flex;margin-top:1.5rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.quick div{flex:1;min-width:110px;padding:.9rem 0;border-right:1px solid var(--rule-soft)}
.quick div:last-child{border-right:0}
.quick div+div{padding-left:1.1rem}
.quick b{display:block;font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-top:.2rem}

.also{background:#eff1f7;border-bottom:1px solid var(--rule);padding-top:1.25rem;padding-bottom:1.25rem;font-size:.8rem;color:var(--ink-2)}
.also b{font-weight:400;color:var(--ink)}

.nextprev{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border-bottom:1px solid var(--rule)}
.nextprev a{padding:1.5rem var(--pad);display:block;transition:background .18s}
.nextprev a:hover{background:var(--ground)}
.nextprev a:first-child{border-right:1px solid var(--rule)}
.nextprev a:last-child{text-align:right}
.nextprev h4{margin-top:.6rem}
@media (max-width:640px){.nextprev{grid-template-columns:1fr}.nextprev a:first-child{border-right:0;border-bottom:1px solid var(--rule)}.nextprev a:last-child{text-align:left}}

/* --------------------------------------------------------------------------
   Wine page
   -------------------------------------------------------------------------- */
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--ground);border-bottom:1px solid var(--rule)}
.specs__col{padding:clamp(1.75rem,3vw,2.625rem) var(--pad);border-right:1px solid var(--rule)}
.specs__col:last-child{border-right:0}
@media (max-width:900px){.specs{grid-template-columns:1fr}.specs__col{border-right:0;border-bottom:1px solid var(--rule)}.specs__col:last-child{border-bottom:0}}
.note-s{margin-top:1.125rem;font-size:.72rem;line-height:1.65;color:var(--ink-3);max-width:38ch}

.taglist{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem}
.taglist span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule);padding:.4rem .7rem;border-radius:99px;background:var(--ground)}

/* --------------------------------------------------------------------------
   Join page
   -------------------------------------------------------------------------- */
.terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--card);border-bottom:1px solid var(--rule)}
.terms div{padding:1.5rem var(--pad);border-right:1px solid var(--rule)}
.terms div:last-child{border-right:0}
.terms b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-top:.35rem}
.terms small{display:block;font-size:.72rem;color:var(--ink-2);margin-top:.5rem;line-height:1.55}
@media (max-width:1000px){.terms{grid-template-columns:repeat(2,1fr)}.terms div:nth-child(2n){border-right:0}.terms div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media (max-width:560px){.terms{grid-template-columns:1fr}.terms div{border-right:0;border-bottom:1px solid var(--rule)}}

.track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1.75rem;position:relative}
.track::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--rule)}
.track__s{position:relative;padding-right:1.5rem}
.track__s i{display:block;width:9px;height:9px;border-radius:50%;background:var(--blue);position:relative;z-index:2;margin-bottom:.9rem}
.track__s--future i{background:var(--ground);border:1px solid #9aa2bd}
.track__s b{display:block;font-family:var(--serif);font-weight:400;font-size:1.15rem}
.track__s span{display:block;font-size:.75rem;color:var(--ink-2);margin-top:.35rem;line-height:1.6}
.track__s .now{display:inline-block;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-mid);border:1px solid #b9c0dd;padding:.15rem .5rem;margin-bottom:.5rem}
@media (max-width:860px){
  .track{grid-template-columns:1fr;gap:1.5rem}
  .track::before{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .track__s{padding-left:1.5rem;padding-right:0}
  /* Stacked, the dot has to line up with the milestone it marks. Pinned to the
     top of the item it sat level with whatever came first, which is the "Now"
     badge on the current step and the title on every other one. Drawn off the
     title instead, it centres on that line wherever the title falls. */
  .track__s i{display:none}
  .track__s b{position:relative}
  .track__s b::before{content:"";position:absolute;left:-1.5rem;top:.55em;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--blue);z-index:2}
  .track__s--future b::before{background:var(--ground);border:1px solid #9aa2bd}
}

.formwrap{display:grid;grid-template-columns:1.05fr .95fr;background:var(--card);border-bottom:1px solid var(--rule)}
.formwrap__l{padding:clamp(2rem,4vw,3rem) var(--pad);border-right:1px solid var(--rule)}
.formwrap__r{padding:clamp(2rem,4vw,3rem) var(--pad);background:var(--ground)}
@media (max-width:900px){.formwrap{grid-template-columns:1fr}.formwrap__l{border-right:0;border-bottom:1px solid var(--rule)}}
.fields{margin-top:1.5rem;max-width:440px}
.fi{margin-bottom:1.125rem}
.fi label{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.45rem}
.fi input,.fi select{
  width:100%;height:44px;padding:0 .875rem;border:1px solid #ccd2e2;background:var(--card);
  border-radius:0;font-size:.875rem;transition:border-color .18s;
}
.fi input:focus,.fi select:focus{outline:none;border-color:var(--blue)}
.two{display:flex;gap:1rem;flex-wrap:wrap}
.two .fi{flex:1;min-width:150px}
.check{display:flex;align-items:flex-start;gap:.7rem;margin-top:.75rem;font-size:.8rem;color:var(--ink-2);line-height:1.6;max-width:46ch}
.check input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--blue)}
.check .muted{color:var(--ink-3)}
.formnote{font-size:.72rem;line-height:1.6;color:var(--ink-3);margin-top:1rem;max-width:44ch}

.qa{padding:1.125rem 0;border-bottom:1px solid var(--rule-soft)}
.qa:last-child{border-bottom:0}
.qa b{display:block;font-size:.85rem;font-weight:400}
.qa p{font-size:.78rem;line-height:1.65;color:var(--ink-2);margin-top:.4rem;max-width:48ch}

/* --------------------------------------------------------------------------
   Allocation strip + footer
   -------------------------------------------------------------------------- */
.allo{background:#eff1f7;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
.allo p{font-size:.82rem;line-height:1.72;color:var(--ink-2);max-width:52ch;margin-top:.6rem}

.ftr{background:var(--card);border-top:1px solid var(--rule);padding-top:2rem;padding-bottom:2rem}
.ftr__in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.ftr__links{display:flex;gap:1.5rem;flex-wrap:wrap}
.ftr__links a:hover{color:var(--ink)}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* ==========================================================================
   Age verification — ported from the live Porcelina site
   Markup, dimensions, colours and copy preserved.
   Added: role="dialog", labelled heading, focus trap, Enter-to-submit button.
   ========================================================================== */
#age-verify{
  position:fixed;display:none;top:0;bottom:0;left:0;width:100%;
  background:rgba(0,0,0,0.85);z-index:2000;opacity:0;transition:opacity .3s ease;
}
html.age-verify-active{overflow:hidden}
html.age-verify-active #age-verify{display:block}
#age-verify.visible{opacity:1}

#age-verify .avcanvas{
  position:absolute;box-sizing:border-box;left:50%;top:3vh;bottom:3vh;
  width:94%;max-width:600px;background:#fff;border:solid 2px #0c248c;
  transform:translateX(-50%);padding:3rem 2.5rem;text-align:center;text-wrap:balance;
  overflow:hidden;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;
}
#age-verify .avcontent{font-family:'EB Garamond',Georgia,serif;font-size:1.2rem;color:#333;width:100%}
#age-verify .avcontent header{position:relative;display:block;margin:0 0 1.5rem 0}
#age-verify .avcontent header .avwelcome{font-size:1.5rem;font-weight:500;letter-spacing:0.05em;color:#000;margin:0 0 1rem 0}
#age-verify .avcontent header img{display:block;width:100%;max-width:300px;margin:0 auto}
#age-verify .avcontent p{margin:1rem 0;line-height:1.6}
#age-verify .avcontent p a{color:#0c248c;text-decoration:underline}
#age-verify .avcontent p a:hover{opacity:0.8}
#age-verify .avbdate{position:relative;display:block;white-space:nowrap;width:94%;max-width:400px;margin:2rem auto;text-align:center}
#age-verify .avbdate input{
  width:28%;margin:0 0.5rem;padding:0.75rem 0.5rem;text-align:center;font-size:16px;
  font-family:Jost,sans-serif;border:solid 1px rgba(12,36,140,0.3);background:#fff;color:#333;
  border-radius:4px;transition:border-color 0.2s;
}
#age-verify .avbdate input:focus{outline:none;border-color:#0c248c}
#age-verify .avbdate input::placeholder{color:rgba(51,51,51,0.4);opacity:1}
#age-verify .avmessage{color:#d32f2f;font-style:italic;font-size:1rem;margin:1rem 0 0 0;min-height:1.5em}
#age-verify .aventer{
  margin-top:.5rem;background:#0c248c;color:#fff;font-family:Jost,sans-serif;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:.9rem 2rem;
}
#age-verify .aventer:hover{background:#0a1d73}
@media (max-width:560px){
  #age-verify .avcanvas{padding:2rem 1.25rem}
  #age-verify .avcontent{font-size:1.05rem}
}


/* ==========================================================================
   Splash — the site's opening panel, ported from the live site.
   Live source: #page-header, #panel-hero, #mainmenu in assets/css/main.css.
   Font Awesome Pro glyphs are replaced with inline SVG of the same shapes.
   ========================================================================== */

/* -------------------------------------------------------------- header -- */
.ph{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  height:var(--hdr-h);transition:height .4s ease;
}
.ph__in{position:relative;width:94%;height:100%;margin:0 auto;display:flow-root}
.ph__btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:100;
  color:var(--blue);border:2px solid var(--blue);border-radius:50%;
  width:2.55em;height:2.55em;font-size:1.05rem;display:grid;place-items:center;
  background:transparent;transition:background .2s,color .2s;
}
.ph__btn svg{width:1.05em;height:1.05em;display:block}
.ph__btn:hover,.ph__btn:focus{background:var(--blue);color:#fff}
.ph__btn--menu{left:.25vw}
.ph__btn--acquire{right:.25vw}
.ph__logo{
  position:relative;display:block;height:calc(100% - 2.25rem);width:50%;max-width:400px;
  /* The bottom margin is the point: without it the wordmark sits exactly on the
     header's lower edge, which is also the top edge of the page banner, and
     "WILLAMETTE" reads as cut off by the photograph. */
  margin:1rem auto 1.25rem;transition:all .4s ease;
}
.ph__logo img{display:block;width:100%;height:100%;object-fit:contain;transition:all .4s ease}

/* Shrunk state: the wordmark is clipped to its top half, so "PORCELINA"
   alone rides the scrolled header. Same trick as the live site. */
html.scrolled-header .ph{height:var(--hdr-h-sm)}
html.scrolled-header .ph__logo{max-width:300px;margin:.75rem auto 0;height:calc(100% - 1rem)}
html.scrolled-header .ph__logo img{height:calc(100% + 2.5rem);clip-path:inset(0 0 50% 0)}

.ph-spacer{height:var(--hdr-h)}

/* menu open state */
html.menu-open{overflow:hidden}
html.menu-open .ph__btn--menu{background:var(--blue);color:#fff}

/* -------------------------------------------------------------- splash -- */
.splash{position:relative;display:block;background:#fff}
.splash__canvas{
  position:relative;height:calc(100vh - var(--hdr-h));min-height:520px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:1rem;
}
.splash__ill{
  display:block;width:80%;max-width:600px;flex:1 1 auto;min-height:0;margin:0 auto;
}
.splash__ill img{display:block;width:100%;height:100%;object-fit:contain}
.splash__title{
  width:90%;max-width:800px;text-align:center;white-space:nowrap;
  padding-top:1rem;height:196px;flex:none;
}
.splash__pre{
  font-family:var(--sans);font-size:min(15.4px,2.85vw);font-weight:400;line-height:1.25;
  letter-spacing:.2ch;text-transform:uppercase;color:#333;margin:0;
}
.splash__h{
  font-family:var(--display);font-weight:400;color:var(--blue-soft);
  font-size:min(38.5px,5.2vw);line-height:1.05;margin:.5rem 0 0;
}
.splash__arrow{
  position:relative;display:block;height:clamp(35px,5vw,56px);width:96px;margin:1rem auto 0;
  animation:bob 1.5s ease-in-out infinite;
}
.splash__arrow a{
  position:absolute;display:block;width:100%;height:100%;opacity:.8;
  background:center no-repeat;background-size:contain;
}
.splash__arrow a:hover{opacity:1}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@media (prefers-reduced-motion: reduce){.splash__arrow{animation:none}}

@media (max-width:700px){
  .splash__canvas{min-height:460px}
  .splash__title{height:150px;white-space:normal}
  .splash__pre{font-size:11.5px}
  .splash__h{font-size:min(30px,7.4vw)}
}

/* -------------------------------------------------------------- menu ---- */
.mm{
  position:fixed;inset:0;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  z-index:900;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
html.menu-open .mm{opacity:1;visibility:visible}
.mm__canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;padding:0 24px}
.mm li{text-align:center;font-size:4.5vh;line-height:1.65;white-space:nowrap}
.mm li a{
  display:inline-block;font-family:var(--display);font-weight:400;color:var(--blue-soft);
  transition:color .18s;
}
.mm li a:hover,.mm li a:focus{color:var(--blue)}
.mm li a[aria-current="page"]{color:var(--blue)}
.mm__ig{padding-top:1em}
.mm__ig a svg{width:.62em;height:.62em;display:block;margin:0 auto}
.mm__ig .sound{margin-top:18px}
@media (max-height:620px){.mm li{font-size:26px;line-height:1.5}}

/* --------------------------------------------------------------------------
   Desktop type
   The root scale above lifts everything a little. These are the specific
   sizes that were still too small to read comfortably at arm's length.
   -------------------------------------------------------------------------- */
@media (min-width:1200px){
  .body{font-size:.95rem;line-height:1.78}
  .lead{font-size:1.05rem;line-height:1.7}
  .site-card p{font-size:.86rem;line-height:1.66}
  .site-card h3{font-size:1.4rem}
  .site-card__ava{font-size:.66rem}
  .wine-card p{font-size:.85rem;line-height:1.62}
  .wine-card h3{font-size:1.3rem}
  .data__r{font-size:.85rem}
  .data__r dt{font-size:.66rem}
  .hero-side p{font-size:.98rem}
  .maplist li{font-size:.85rem}
  .qa b{font-size:.92rem}
  .qa p{font-size:.85rem}
  .allo p{font-size:.9rem}
  .also{font-size:.88rem}
  .check{font-size:.86rem}
  .track__s span{font-size:.82rem}
  .terms small{font-size:.78rem}
  .note-s{font-size:.78rem}
  .formnote{font-size:.78rem}
  .lbl{font-size:.66rem}
  .crumb ol{font-size:.66rem}
  .avabar div{font-size:.66rem}
  .marker{font-size:.66rem}
  .wine-card__spec{font-size:.66rem}
  .ftr__in{font-size:.66rem}
  .taglist span{font-size:.68rem}
}

/* A 12/5 banner is right on a wide screen and far too tall once the page is
   one column, where the same ratio would eat most of a phone screen. */
@media (max-width:760px){
  /* aspect-ratio is dropped rather than changed: with a min-height still in
     play the ratio was resolving the WIDTH instead of the height, giving a
     450px band inside a 390px screen. Plain heights here, no ratio. */
  .hero-side,.hero-img{aspect-ratio:auto;width:100%;min-height:clamp(260px,56vw,340px)}
  .hero-side{min-height:clamp(235px,50.5vw,307px)}
  .hero-side__in{padding-top:2.3rem;padding-bottom:2.3rem}
  .band__im{min-height:260px}
  .wine-feature__bot{min-height:0;padding:clamp(1.5rem,6vw,2.25rem)}
  .wine-feature__bot img{max-height:420px}
}

/* Background video strips (old-site footage) */
.vband{position:relative;height:clamp(260px,48vw,560px);overflow:hidden;background:var(--rule-soft);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.vband__v,.band__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.band__im--video{position:relative;overflow:hidden}

/* Phones: the top bar does not change when the page scrolls. It keeps its
   full height, the wordmark keeps both lines, and the buttons stay put. */
@media (max-width:760px){
  .ph,.ph__logo,.ph__logo img{transition:none}
  html.scrolled-header .ph{height:var(--hdr-h)}
  html.scrolled-header .ph__logo{height:calc(var(--hdr-h) - 2.25rem);margin:1rem auto 1.25rem;max-width:400px}
  html.scrolled-header .ph__logo img{height:100%;clip-path:none}
}

/* Phones: text one point larger (16px root to 17.33px; every size is in rem)
   and the lightest grey darkened from 3.9:1 to 5.4:1 contrast on white. */
@media (max-width:760px){
  html{font-size:17.33px}
  body{font-size:15.33px}
  :root{--ink-3:#646a82}
}

/* Story team + photos: two landscapes stacked, then the blending portrait, then the team portrait */
.storyteam{margin-top:clamp(3rem,6vw,4.5rem)}
.storyteam h2{margin-top:.6rem}
.storyteam .teamshot__cap{margin-top:1rem}
.storygal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.89fr) minmax(0,1fr);gap:clamp(.75rem,1.4vw,1.25rem);max-width:1320px;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.storygal figure{margin:0;overflow:hidden;background:var(--ground)}
.storygal img{display:block;width:100%;height:100%;object-fit:cover}
.storygal__a{grid-column:1;grid-row:1;aspect-ratio:3/2}
.storygal__c{grid-column:1;grid-row:2;aspect-ratio:3/2}
.storygal__b{grid-column:2;grid-row:1 / span 2}
.storygal__b img{object-position:50% 40%}
.storygal__d{grid-column:3;grid-row:1 / span 2}
.storygal__d img{object-position:50% 45%}
.storygal .reveal:nth-child(2){transition-delay:.1s}
.storygal .reveal:nth-child(3){transition-delay:.2s}
.storygal .reveal:nth-child(4){transition-delay:.3s}
@media (max-width:1000px){
  .storygal{grid-template-columns:minmax(0,1fr) minmax(0,.89fr)}
  .storygal__d{grid-column:1 / span 2;grid-row:3;aspect-ratio:auto;max-width:560px;width:100%}
  .storygal__d img{height:auto}
}
@media (max-width:760px){
  .storygal{grid-template-columns:1fr}
  .storygal__a,.storygal__b,.storygal__c,.storygal__d{grid-column:1;grid-row:auto}
  .storygal__b{aspect-ratio:2/3}
  .storygal__d{max-width:none}
}