/* ============================================================
   roséne — carefully selected
   Structure: variables → base → nav → hero → sections → mobile
   ============================================================ */

:root{
  --paper:#FAFAF8;
  --ink:#211D26;
  --accent:#7C6B8A;      /* muted plum — used sparingly */
  --lav:#A796B8;         /* dusty lavender */
  --lav-light:#E4DAEF;   /* pale lilac */
  --lilac:#F0EBF5;       /* section gradient tint */
  --line:#E7E3EB;
  --muted:#77707E;
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Jost',sans-serif;font-weight:300;line-height:1.7;font-size:17px;overflow-x:hidden}
h1,h2,h3{font-family:'Marcellus',serif;font-weight:400;line-height:1.12}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.eyebrow{font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Nav ----------
   Transparent over the hero; turns solid + blurred after scrolling
   (.scrolled class added by js/main.js). Logo inverts to white on dark. */
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;color:#F4F1F6;
  transition:background .35s ease,border-color .35s ease,color .35s ease}
nav.scrolled,nav.menu-open{background:rgba(250,250,248,.94);backdrop-filter:blur(12px);border-bottom-color:var(--line);color:var(--ink)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;height:80px;max-width:1240px;margin:0 auto;padding:0 40px}
.logo-img{height:24px;width:auto;display:block}
nav .logo-img{filter:invert(1);transition:filter .35s ease}
nav.scrolled .logo-img,nav.menu-open .logo-img{filter:none}
footer .logo-img{filter:none}
.nav-links{display:flex;gap:44px;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.nav-links a{opacity:.8;transition:opacity .25s;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:currentColor;transition:width .3s}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{width:100%}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
/* Local image first; online placeholder shows until images/hero-bg.jpg exists */
header{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;position:relative;
  background:
    radial-gradient(1200px 700px at 85% 20%, rgba(167,150,184,.4), transparent 60%),
    linear-gradient(rgba(24,21,28,.72),rgba(24,21,28,.84)),
    url('../images/hero-bg.jpg') center/cover;
  color:#F4F1F6;padding:120px 0 80px}
.hero-left{padding-left:max(40px,calc((100vw - 1240px)/2 + 40px))}
.hero-left .eyebrow{color:var(--lav-light)}
header h1{font-size:clamp(48px,7.2vw,96px);margin-bottom:26px}
header h1 em{font-style:italic;color:var(--lav-light)}
header p{font-size:19px;max-width:460px;opacity:.85;margin-bottom:46px}
.btn{display:inline-block;padding:17px 46px;border:1px solid currentColor;font-size:13px;letter-spacing:.28em;text-transform:uppercase;transition:all .3s;background:transparent;cursor:pointer;font-family:'Jost',sans-serif;color:inherit}
.btn:hover{background:#F4F1F6;color:var(--ink);border-color:#F4F1F6}
.btn-dark{border-color:var(--ink);color:var(--ink)}
.btn-dark:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.hero-right{position:relative;height:72vh;min-height:480px;margin-right:max(40px,calc((100vw - 1240px)/2 + 40px))}
.hero-arch{position:absolute;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.45)}
.hero-arch img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.arch-a{border-radius:300px 300px 0 0;width:62%;height:88%;right:22%;top:0;z-index:2}
.arch-b{border-radius:300px 300px 0 0;width:44%;height:58%;right:0;bottom:0;z-index:3;border:6px solid rgba(244,241,246,.12)}
.hero-seal{position:absolute;z-index:4;left:6%;bottom:8%;width:130px;height:130px;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Sections ---------- */
section{padding:130px 0;position:relative}
.section-head{text-align:center;max-width:640px;margin:0 auto 80px}
.section-head h2{font-size:clamp(34px,4.2vw,52px);margin-bottom:18px}
.section-head p{color:var(--muted)}
.watermark{position:absolute;top:60px;left:50%;transform:translateX(-50%);font-family:'Marcellus',serif;font-size:clamp(90px,14vw,190px);color:rgba(124,107,138,.06);pointer-events:none;user-select:none;white-space:nowrap;line-height:1}

/* ---------- Wines ---------- */
#wines{background:linear-gradient(180deg,var(--paper) 0%,var(--lilac) 100%)}
.wine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.wine-card{text-align:center;position:relative}
.wine-card .frame{border-radius:240px 240px 0 0;overflow:hidden;aspect-ratio:3/4.4;margin-bottom:26px;position:relative;transition:box-shadow .4s}
.wine-card:hover .frame{box-shadow:0 30px 60px rgba(33,29,38,.16)}
.wine-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;filter:saturate(.85)}
.wine-card:hover img{transform:scale(1.07)}
.wine-card .frame::after{content:"";position:absolute;inset:14px;border:1px solid rgba(250,250,248,.55);border-radius:226px 226px 0 0;opacity:0;transition:opacity .4s}
.wine-card:hover .frame::after{opacity:1}
.wine-card h3{font-size:23px;margin-bottom:6px}
.wine-card p{font-size:14px;color:var(--muted);letter-spacing:.02em}
.wine-card .notables{margin-top:20px;text-align:left}
.nb{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.nb:first-child{border-top:1px solid var(--line)}
.nb span{font-family:'Marcellus',serif;font-size:14.5px;color:var(--ink);letter-spacing:.02em}
.nb em{font-style:normal;font-size:11.5px;color:var(--accent);letter-spacing:.18em;white-space:nowrap}
.wine-card:hover .nb span{color:var(--accent);transition:color .3s}
.cellar-note{text-align:center;margin-top:56px;font-size:13px;color:var(--muted);letter-spacing:.08em;font-style:italic}

/* ---------- Origins / world map ---------- */
.origins{background:var(--ink);color:#EFEBF2;overflow:hidden}
.origins .eyebrow{color:var(--lav-light)}
.origins .section-head p{color:rgba(239,235,242,.6)}
.map-holder{position:relative;max-width:1100px;margin:0 auto}
.map-holder svg{width:100%;height:auto;display:block}
.land{fill:rgba(228,218,239,.09);stroke:none}
.viz{pointer-events:none}
.country .shape{fill:var(--lav);stroke:rgba(250,250,248,.3);stroke-width:.6;
  transform-box:fill-box;transform-origin:center;
  transition:transform .3s ease,fill .3s ease}
.country.active .shape{transform:scale(var(--s,1.25));fill:var(--lav-light)}
.country .map-label{font-family:'Jost',sans-serif;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;fill:rgba(239,235,242,.55);transition:fill .3s}
.country.active .map-label{fill:#FFFFFF}
.country.home .shape{fill:var(--lav-light)}
.country.home .map-label{fill:var(--lav-light)}
.hits path{fill:transparent;stroke:transparent;stroke-width:9;pointer-events:all;cursor:pointer;outline:none}
.origin-list{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 36px;margin-top:54px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,235,242,.65)}
.origin-list span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lav);margin-right:12px;vertical-align:2px}
.map-hint{text-align:center;margin-top:26px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(239,235,242,.35)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:90px;align-items:center}
.about-photo{border-radius:240px 240px 0 0;overflow:hidden;aspect-ratio:3/3.8;position:relative}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.about-copy h2{font-size:clamp(32px,3.6vw,46px);margin-bottom:24px}
.about-copy>p{color:var(--muted);max-width:460px;margin-bottom:40px}
.value{padding:26px 0;border-bottom:1px solid var(--line);transition:padding-left .3s}
.value:hover{padding-left:14px}
.value:first-of-type{border-top:1px solid var(--line)}
.value h3{font-size:20px;margin-bottom:6px;color:var(--accent)}
.value p{font-size:15px;color:var(--muted)}

/* ---------- Quote ---------- */
.quote{background:linear-gradient(180deg,var(--lilac) 0%,var(--paper) 100%);text-align:center;padding:110px 0}
.quote h2{font-size:clamp(28px,3.4vw,44px);max-width:760px;margin:0 auto;color:var(--ink)}
.quote .eyebrow{margin-bottom:26px}

/* ---------- Contact ---------- */
#contact{padding-top:40px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.contact-info h2{font-size:clamp(34px,4vw,46px);margin-bottom:22px}
.contact-info>p{color:var(--muted);max-width:420px;margin-bottom:44px}
.detail{font-size:15px;color:var(--muted);line-height:2.1}
.detail strong{color:var(--ink);font-weight:500}
form label{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
form input,form textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);padding:10px 0 14px;margin-bottom:34px;font-family:'Jost',sans-serif;font-size:16px;color:var(--ink);outline:none;transition:border-color .3s}
form input:focus,form textarea:focus{border-color:var(--accent)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:60px 0;text-align:center}
footer .logo-img{height:20px;margin:0 auto 18px}
footer p{font-size:13px;color:var(--muted);letter-spacing:.08em}

/* ---------- Mobile ---------- */
@media(max-width:980px){
  .burger{display:flex}
  .nav-links{position:fixed;top:80px;left:0;right:0;background:rgba(250,250,248,.98);color:var(--ink);flex-direction:column;gap:0;padding:10px 0 20px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .35s ease;z-index:-1}
  .nav-links.open{transform:none}
  .nav-links a{padding:16px 40px;opacity:.85}
  .nav-links a::after{display:none}

  header{grid-template-columns:1fr;gap:0;padding:130px 0 70px;min-height:auto}
  .hero-left{padding:0 28px}
  header h1{font-size:clamp(44px,11vw,64px)}
  header p{font-size:17px}
  .hero-right{height:340px;min-height:0;margin:48px 28px 0}
  .arch-b,.hero-seal{display:none}
  .arch-a{position:relative;width:min(78%,300px);height:100%;right:auto;top:auto;margin:0 auto;box-shadow:0 24px 50px rgba(0,0,0,.4)}

  .wrap{padding:0 28px}
  section{padding:80px 0}
  .section-head{margin-bottom:52px}
  .wine-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .wine-card h3{font-size:19px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:56px}
  .about-photo{max-width:340px;margin:0 auto}
  .quote{padding:80px 0}
  .map-hint{display:none}
  .origin-list{gap:10px 24px;font-size:12px}
}
@media(max-width:520px){
  .two-col{grid-template-columns:1fr}
  .wine-grid{gap:14px}
  .wine-card p{display:none}
  footer{padding:44px 0}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}