/* ============================================================
   WILD HORSE — global stylesheet
   shared across every page
   ============================================================ */

:root{
  --ink:#0b0d12;
  --ink-2:#12151d;
  --ink-3:#1a1e29;
  --bone:#e8dec4;
  --bone-2:#bdb39a;
  --gold:#c9a24a;
  --gold-2:#9a7a32;
  --rust:#9b3a2a;
  --mist:rgba(232,222,196,.55);
  --line:rgba(232,222,196,.18);
  --serif:"Cormorant Garamond","Times New Roman",ui-serif,serif;
  --sans:"Inter","Helvetica Neue",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --cn:"PingFang SC","Microsoft YaHei",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
}
body{
  min-height:100vh;
  background:
    radial-gradient(1400px 800px at 70% -10%,rgba(155,58,42,.18),transparent 60%),
    radial-gradient(1100px 700px at 10% 110%,rgba(201,162,74,.10),transparent 60%),
    var(--ink);
  overflow-x:hidden;
}

/* film grain overlay */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0,rgba(0,0,0,.03) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay;opacity:.6;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}

/* ============ TYPOGRAPHY ============ */
.serif{font-family:var(--serif);font-weight:400}
.cn{font-family:var(--cn)}
.kicker{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
.kicker::before{content:"◆ ";color:var(--gold);font-size:8px;vertical-align:middle}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1;color:var(--bone)}
h1{font-size:clamp(48px,9vw,140px);letter-spacing:-.02em}
h2{font-size:clamp(36px,6vw,84px);letter-spacing:-.01em}
h3{font-size:clamp(24px,3vw,40px)}
p{line-height:1.75;color:var(--bone-2);font-size:15px;max-width:62ch}
.lead{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:1.5;color:var(--bone)}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 38px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--mist);
  mix-blend-mode:normal;
}
.nav.scrolled{
  background:rgba(11,13,18,.75);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.nav .brand{display:flex;align-items:center;gap:14px;color:var(--bone);font-weight:600;letter-spacing:.22em}
.nav .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}
.nav .links{display:flex;gap:30px}
.nav .links a{position:relative;padding:8px 0;color:var(--mist);transition:color .35s}
.nav .links a:hover,.nav .links a.active{color:var(--bone)}
.nav .links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)
}
.nav .lang{color:var(--gold);font-weight:600}
.menu-btn{display:none;background:none;border:1px solid var(--line);padding:10px 14px;color:var(--bone);font-size:10px;letter-spacing:.25em}

@media (max-width:880px){
  .nav{padding:16px 18px}
  .nav .links{
    position:fixed;top:60px;left:0;right:0;
    flex-direction:column;gap:0;padding:20px;
    background:rgba(11,13,18,.95);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .nav .links.open{transform:translateY(0)}
  .nav .links a{padding:18px 0;border-bottom:1px solid var(--line);font-size:13px}
  .menu-btn{display:block}
}

/* ============ CUSTOM CURSOR ============ */
.cursor{
  position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--gold);pointer-events:none;z-index:80;
  transform:translate(-50%,-50%);
  mix-blend-mode:exclusion;
  transition:width .25s,height .25s,border-color .25s,opacity .3s;
}
.cursor::after{
  content:"";position:absolute;top:50%;left:50%;width:4px;height:4px;
  background:var(--gold);border-radius:50%;transform:translate(-50%,-50%)
}
@media (hover:none),(max-width:880px){.cursor{display:none}html,body{cursor:auto}}

/* ============ CONTAINERS ============ */
.wrap{max-width:1320px;margin:0 auto;padding:0 38px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 38px}
section{position:relative;padding:120px 0}
@media (max-width:720px){
  .wrap,.wrap-narrow{padding:0 20px}
  section{padding:80px 0}
}

/* ============ SHARED HERO ============ */
.hero{
  position:relative;height:100vh;min-height:600px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero .pixi-stage{position:absolute;inset:0;z-index:1}
.hero .pixi-stage canvas{width:100%;height:100%;display:block}
.hero .vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(900px 600px at 50% 50%,transparent 0%,rgba(0,0,0,.3) 60%,rgba(11,13,18,.85) 100%),
    linear-gradient(180deg,rgba(11,13,18,.5) 0%,transparent 30%,transparent 70%,rgba(11,13,18,.85) 100%);
}
.hero .hero-content{
  position:relative;z-index:3;text-align:center;
  padding:0 24px;
}
.hero .hero-content .kicker{display:block;margin-bottom:24px}
.hero .hero-content h1{margin-bottom:18px;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.hero .hero-content .sub{
  font-family:var(--serif);font-size:clamp(18px,1.8vw,24px);
  color:var(--bone-2);max-width:560px;margin:0 auto;line-height:1.5
}

/* small hero for subpages */
.hero.small{height:72vh;min-height:520px}
.hero.small h1{font-size:clamp(48px,7vw,100px)}

/* hero HUD (sub-text) */
.hero-hud{
  position:absolute;left:38px;right:38px;bottom:36px;z-index:4;
  display:flex;justify-content:space-between;align-items:flex-end;
  font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--mist);
}
.hero-hud .scroll-cue{display:flex;align-items:center;gap:10px}
.hero-hud .scroll-cue::before{content:"";width:1px;height:32px;background:var(--gold);animation:dropline 2.4s ease-in-out infinite}
@keyframes dropline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:720px){.hero-hud{left:18px;right:18px;bottom:18px;font-size:9px}}

/* ============ SECTION HEADERS ============ */
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;margin-bottom:60px;
}
.section-head .left{max-width:680px}
.section-head .num{
  font-family:var(--serif);font-size:14px;color:var(--gold);
  border-top:1px solid var(--gold);padding-top:8px;width:60px;
  font-variant-numeric:tabular-nums
}
@media (max-width:720px){.section-head{flex-direction:column;align-items:flex-start}}

/* ============ INTRO BLOCK ============ */
.intro{
  display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start;
}
.intro .label{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
  border-top:1px solid var(--gold);padding-top:14px}
.intro p{font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.5;color:var(--bone)}
.intro p + p{margin-top:24px}
@media (max-width:880px){.intro{grid-template-columns:1fr;gap:30px}}

/* ============ FEATURE / BENTO GRID ============ */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.bento .card{
  position:relative;border:1px solid var(--line);background:rgba(255,255,255,.015);
  padding:38px;overflow:hidden;transition:border-color .4s,transform .4s;
}
.bento .card:hover{border-color:var(--gold);transform:translateY(-4px)}
.bento .card .num{font-family:var(--serif);font-size:11px;color:var(--gold);letter-spacing:.3em}
.bento .card h3{margin:14px 0 16px}
.bento .card p{font-size:14px}
.bento .span-4{grid-column:span 4}
.bento .span-6{grid-column:span 6}
.bento .span-8{grid-column:span 8}
.bento .span-12{grid-column:span 12}
.bento .tall{min-height:380px;display:flex;flex-direction:column;justify-content:space-between}
@media (max-width:880px){.bento{grid-template-columns:1fr}.bento [class*="span-"]{grid-column:1/-1}}

/* ============ WINE CARD ============ */
.wine-list{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wine-row{
  display:grid;grid-template-columns:80px 2fr 2fr 1fr 80px;
  gap:30px;align-items:center;
  padding:42px 24px;background:var(--ink);
  transition:background .4s;cursor:pointer;
}
.wine-row:hover{background:var(--ink-2)}
.wine-row .idx{font-family:var(--serif);font-size:14px;color:var(--gold);font-variant-numeric:tabular-nums}
.wine-row .name{font-family:var(--serif);font-size:clamp(24px,3vw,38px);color:var(--bone)}
.wine-row .name small{display:block;font-size:11px;letter-spacing:.3em;color:var(--mist);text-transform:uppercase;margin-top:6px;font-family:var(--sans)}
.wine-row .desc{font-size:13px;color:var(--bone-2);line-height:1.6}
.wine-row .meta{font-size:11px;letter-spacing:.2em;color:var(--mist);text-transform:uppercase;text-align:right}
.wine-row .arrow{font-size:24px;color:var(--gold);text-align:right;transition:transform .35s}
.wine-row:hover .arrow{transform:translateX(8px)}
@media (max-width:880px){
  .wine-row{grid-template-columns:1fr;gap:14px;padding:30px 18px}
  .wine-row .meta,.wine-row .arrow{text-align:left}
}

/* ============ FEATURED WINE BLOCK ============ */
.wine-feature{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  padding:80px 0;border-top:1px solid var(--line);
}
.wine-feature:first-of-type{border-top:none}
.wine-feature.flip{direction:rtl}
.wine-feature.flip > *{direction:ltr}
.wine-feature .visual{
  position:relative;aspect-ratio:4/5;
  background:var(--ink-2);border:1px solid var(--line);
  overflow:hidden;
}
.wine-feature .visual canvas{width:100%;height:100%;display:block}
.wine-feature .visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side,transparent 60%,rgba(11,13,18,.85) 100%)
}
/* When the visual frame holds a bottle photo, just show the whole image. */
.wine-feature .visual:has(.bottle-shot){
  aspect-ratio:auto;
  background:transparent;
  border:none;
  overflow:visible;
  display:block;
}
.wine-feature .visual:has(.bottle-shot)::after{display:none}
.wine-feature .visual .bottle-shot{
  display:block;
  width:100%;
}
.wine-feature .visual .bottle-shot img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
.wine-feature .copy h2{margin-bottom:18px}
.wine-feature .copy .vintage{font-family:var(--serif);color:var(--gold);font-size:18px;margin-bottom:8px;letter-spacing:.1em}
.wine-feature .copy .lead{margin:24px 0}
.wine-feature .specs{
  display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;
  margin-top:32px;padding-top:32px;border-top:1px solid var(--line);
}
.wine-feature .specs dt{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.wine-feature .specs dd{font-family:var(--serif);font-size:18px;color:var(--bone)}
@media (max-width:880px){
  .wine-feature{grid-template-columns:1fr;gap:40px}
  .wine-feature.flip{direction:ltr}
}

/* ============ QUOTE / PULL ============ */
.pull{
  text-align:center;padding:140px 0;position:relative;
}
.pull::before,.pull::after{content:"";position:absolute;left:50%;width:1px;height:60px;background:var(--gold)}
.pull::before{top:30px;transform:translateX(-50%)}
.pull::after{bottom:30px;transform:translateX(-50%)}
.pull blockquote{
  font-family:var(--serif);font-size:clamp(28px,4.5vw,58px);line-height:1.25;
  color:var(--bone);max-width:920px;margin:0 auto;
}
.pull cite{display:block;margin-top:30px;font-size:11px;letter-spacing:.4em;color:var(--gold);text-transform:uppercase;font-style:normal}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--line);
  padding:80px 0 40px;background:var(--ink-2);
  position:relative;
}
footer .grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;
}
footer h4{font-family:var(--sans);font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer ul a{font-size:13px;color:var(--bone-2);transition:color .3s}
footer ul a:hover{color:var(--bone)}
footer .brand-block .mark{font-family:var(--serif);font-size:42px;color:var(--bone);margin-bottom:14px}
footer .brand-block p{font-size:13px;max-width:340px}
footer .legal{
  margin-top:60px;padding-top:30px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mist)
}
@media (max-width:880px){
  footer .grid{grid-template-columns:1fr;gap:40px}
  footer .legal{flex-direction:column;gap:14px}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 32px;border:1px solid var(--gold);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone);
  background:transparent;cursor:none;transition:all .35s;
  position:relative;overflow:hidden;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateX(-101%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateX(0)}
.btn .arrow{font-size:14px}

/* ============ FORMS ============ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.field{position:relative}
.field.full{grid-column:1/-1}
.field label{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  color:var(--bone);font-family:var(--serif);font-size:18px;padding:8px 0;
  outline:none;transition:border-color .35s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
.field textarea{min-height:120px;resize:vertical;font-family:var(--sans);font-size:14px}
@media (max-width:720px){.form{grid-template-columns:1fr}}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}

/* ============ MARQUEE ============ */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:24px 0;
}
.marquee .track{display:flex;gap:80px;white-space:nowrap;
  animation:scroll-x 45s linear infinite;font-family:var(--serif);font-size:48px;color:var(--bone)}
.marquee .track span{display:flex;align-items:center;gap:80px}
.marquee .track .star{color:var(--gold);font-size:28px}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ TIMELINE ============ */
.timeline{position:relative;padding-left:60px}
.timeline::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:1px;background:var(--line)}
.timeline .row{position:relative;padding-bottom:60px}
.timeline .row::before{
  content:"";position:absolute;left:-46px;top:8px;width:13px;height:13px;
  border-radius:50%;background:var(--ink);border:1px solid var(--gold)
}
.timeline .yr{font-family:var(--serif);color:var(--gold);font-size:14px;letter-spacing:.2em;margin-bottom:8px}
.timeline h3{margin-bottom:12px;font-size:26px}
.timeline p{font-size:14px}
@media (max-width:720px){.timeline{padding-left:40px}.timeline::before{left:10px}.timeline .row::before{left:-36px}}

/* ============ JOURNAL CARDS ============ */
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.journal-grid article{
  border-top:1px solid var(--gold);padding-top:24px;
}
.journal-grid .date{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mist);margin-bottom:14px}
.journal-grid h3{font-size:24px;margin-bottom:16px;line-height:1.2}
.journal-grid p{font-size:13px;margin-bottom:18px}
.journal-grid .more{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.journal-grid .more::after{content:" →"}
@media (max-width:880px){.journal-grid{grid-template-columns:1fr}}

/* ============ MAP / VISIT ============ */
.visit{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.visit .info dl{display:grid;grid-template-columns:140px 1fr;gap:20px 30px;margin-top:30px}
.visit .info dt{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);padding-top:4px}
.visit .info dd{font-family:var(--serif);font-size:18px;color:var(--bone)}
.visit .map{
  aspect-ratio:1/1;border:1px solid var(--line);position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(45deg,rgba(201,162,74,.05) 0,rgba(201,162,74,.05) 1px,transparent 1px,transparent 14px),
    radial-gradient(circle at 50% 60%,rgba(155,58,42,.25),transparent 50%),
    var(--ink-2);
}
.visit .map::after{
  content:"";position:absolute;left:50%;top:60%;width:14px;height:14px;
  background:var(--gold);border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 8px rgba(201,162,74,.2),0 0 0 24px rgba(201,162,74,.08),0 0 60px var(--gold);
  animation:ping 3s ease-out infinite
}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(201,162,74,.6),0 0 0 0 rgba(201,162,74,.3),0 0 60px var(--gold)}100%{box-shadow:0 0 0 30px rgba(201,162,74,0),0 0 0 60px rgba(201,162,74,0),0 0 60px var(--gold)}}
@media (max-width:880px){.visit{grid-template-columns:1fr}}

/* ============ LOADER ============ */
.loader{position:fixed;inset:0;background:var(--ink);display:flex;
  align-items:center;justify-content:center;z-index:100;transition:opacity .8s .2s}
.loader.hide{opacity:0;pointer-events:none}
.loader .bar{width:240px;height:1px;background:rgba(232,222,196,.15);position:relative;overflow:hidden}
.loader .bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.loader .txt{position:absolute;bottom:calc(50% - 50px);font-size:10px;letter-spacing:.5em;color:var(--mist)}
.loader .mark{position:absolute;top:calc(50% - 80px);font-family:var(--serif);font-size:32px;color:var(--bone);letter-spacing:.05em}

/* ============ JOURNAL ARTICLE MODAL ============ */
.journal-card-click{cursor:none}
.journal-grid article{cursor:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s}
.journal-grid article:hover{transform:translateY(-4px);border-color:rgba(201,162,74,.4)}

.article-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-start;justify-content:center;
  padding:60px 24px;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
  overflow-y:auto;
}
.article-modal.open{opacity:1;pointer-events:auto}
.article-modal .backdrop{
  position:fixed;inset:0;
  background:rgba(5,7,11,.88);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
}
.article-modal .sheet{
  position:relative;z-index:2;
  max-width:740px;width:100%;
  background:linear-gradient(180deg,#131620 0%,#0d1017 100%);
  border:1px solid rgba(201,162,74,.25);
  box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(232,222,196,.04);
  padding:70px 72px 90px;
  transform:translateY(30px) scale(.98);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.article-modal.open .sheet{transform:translateY(0) scale(1)}
.article-modal .close{
  position:absolute;top:24px;right:26px;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);color:var(--bone);
  font-family:var(--sans);font-size:11px;letter-spacing:.15em;
  cursor:none;transition:all .3s;border-radius:50%;
}
.article-modal .close:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg)}
.article-modal .date{
  font-family:var(--sans);font-size:10px;letter-spacing:.35em;
  text-transform:uppercase;color:var(--gold);margin-bottom:20px;
}
.article-modal h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,44px);
  line-height:1.15;color:var(--bone);margin-bottom:36px;
  letter-spacing:-.01em;
}
.article-modal .body{
  font-family:var(--serif);font-size:19px;line-height:1.75;
  color:rgba(232,222,196,.88);
}
.article-modal .body p{margin:0 0 22px}
.article-modal .body p:first-child::first-letter{
  font-size:58px;float:left;line-height:.85;padding:6px 10px 0 0;
  color:var(--gold);font-weight:500;
}
.article-modal .body em{font-style:italic;color:var(--bone)}
.article-modal .signoff{
  margin-top:44px;padding-top:28px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:11px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--gold);
}
body.modal-lock{overflow:hidden}
@media (max-width:720px){
  .article-modal{padding:30px 14px}
  .article-modal .sheet{padding:56px 28px 60px}
  .article-modal h2{font-size:28px;margin-bottom:24px}
  .article-modal .body{font-size:17px;line-height:1.72}
  .article-modal .body p:first-child::first-letter{font-size:46px}
}

/* Hidden article store — must never render in page */
#journal-articles{display:none}

/* ============================================================
   IMAGE INTEGRATIONS — posters, cards, timeline, ambient
   ============================================================ */

/* Hero still poster, sits behind the pixi-stage as a fallback. */
.hero .hero-poster{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  /* darken so hero type stays legible even without the vignette */
  filter:saturate(.9) brightness(.75);
}
.hero .hero-poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,13,18,.35) 0%,rgba(11,13,18,.15) 40%,rgba(11,13,18,.75) 100%);
}

/* Pillar / people cards with a top image. Overrides the default tall card. */
.bento .card.has-media{
  padding:0;display:flex;flex-direction:column;overflow:hidden;
}
.bento .card.has-media .media{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.bento .card.has-media .media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;
  filter:saturate(.92) contrast(1.02);
}
.bento .card.has-media:hover .media img{transform:scale(1.04)}
.bento .card.has-media .body{padding:28px 32px 32px;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.bento .card.has-media.tall{min-height:0}
.bento .card.has-media.tall .media{aspect-ratio:4/5}

/* Stat cards with a dim background image (terroir numbers). */
.stat-card{
  position:relative;overflow:hidden;isolation:isolate;
}
.stat-card .stat-bg{
  position:absolute;inset:0;z-index:-1;
  background-size:cover;background-position:center;
  opacity:.22;filter:saturate(.75) contrast(1.05);
  transition:opacity .6s,transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.stat-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,18,.4) 0%,rgba(11,13,18,.8) 100%);
}
.stat-card:hover .stat-bg{opacity:.35;transform:scale(1.04)}

/* Timeline rows with a small image thumbnail to the right of the copy. */
.timeline .row.has-media{
  display:grid;grid-template-columns:1fr 260px;gap:40px;align-items:start;
}
.timeline .row.has-media .media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-2);
}
.timeline .row.has-media .media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;
  filter:saturate(.92);
}
.timeline .row.has-media:hover .media img{transform:scale(1.04)}
@media (max-width:880px){
  .timeline .row.has-media{grid-template-columns:1fr;gap:18px}
  .timeline .row.has-media .media{aspect-ratio:16/10;max-width:100%}
}

/* Intro block atmospheric side image. */
.intro.has-media{grid-template-columns:1fr 1.6fr .9fr;gap:60px;align-items:center}
.intro.has-media .media{
  position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);
  background:var(--ink-2);
}
.intro.has-media .media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9);
}
@media (max-width:880px){
  .intro.has-media{grid-template-columns:1fr;gap:30px}
  .intro.has-media .media{aspect-ratio:16/10;max-width:420px}
}

/* Pull-quote sections with a dim photographic background. */
.pull.has-bg{isolation:isolate;overflow:hidden}
.pull.has-bg .pull-bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  filter:saturate(.85) brightness(.55);
}
.pull.has-bg::before{
  /* existing gold accent ::before from base .pull — keep it. */
}
.pull.has-bg .pull-bg::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(80% 60% at 50% 50%,rgba(11,13,18,.35),rgba(11,13,18,.85) 85%),
    linear-gradient(180deg,rgba(11,13,18,.5),rgba(11,13,18,.5));
}

/* Generic section with a dim full-bleed background image (CTA, serving note, etc). */
.has-bg-section{position:relative;overflow:hidden;isolation:isolate}
.has-bg-section .section-bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  filter:saturate(.85) brightness(.55);
}
.has-bg-section .section-bg::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,18,.45) 0%,rgba(11,13,18,.82) 100%);
}

/* Wine feature ambient image (shown alongside, not replacing, the bottle). */
.wine-ambient{
  margin-top:24px;position:relative;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3;
}
.wine-ambient img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9);transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.wine-ambient:hover img{transform:scale(1.03)}

/* Journal grid cards with top image. */
.journal-grid article.has-media{padding-top:0;border-top:none}
.journal-grid article.has-media .media{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  margin-bottom:20px;border-top:1px solid var(--gold);
}
.journal-grid article.has-media .media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;
  filter:saturate(.92);
}
.journal-grid article.has-media:hover .media img{transform:scale(1.04)}

/* Archive (wine-list) rows get an optional thumbnail on the left. */
.wine-row.has-media{
  grid-template-columns:80px 110px 2fr 2fr 1fr 80px;
}
.wine-row .row-media{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-2);
}
.wine-row .row-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.wine-row:hover .row-media img{transform:scale(1.06)}
@media (max-width:880px){
  .wine-row.has-media{grid-template-columns:1fr}
  .wine-row .row-media{aspect-ratio:16/10;max-width:240px}
}

/* Marquee: subtle horse image behind the scrolling track. */
.marquee.has-bg{position:relative;isolation:isolate}
.marquee.has-bg .marquee-bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  opacity:.22;filter:saturate(.8) brightness(.8);
}
.marquee.has-bg::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,13,18,.95) 0%,rgba(11,13,18,.55) 50%,rgba(11,13,18,.95) 100%);
}

/* Visit map — replace the abstract pattern with the hand-drawn map image when available. */
.visit .map.has-image{background:var(--ink-2)}
.visit .map.has-image .map-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.85);
}
.visit .map.has-image::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(closest-side,transparent 50%,rgba(11,13,18,.6) 100%);
}