/* ═══════════════════════════════════════════════════════
   wine/ — style.css
   Site-specific palette, fonts, and layout.
   Loaded AFTER ../_partials/shared.css
   Shared structural CSS (reset, nav layout, footer grid,
   .reveal) is already applied — DO NOT redefine here.
═══════════════════════════════════════════════════════ */

:root {
  --nav-mob-bg: #1A1208;
  --burg:    #4A0E0E;
  --burg2:   #6B1515;
  --burg3:   #8B2020;
  --gold:    #C9A84C;
  --gold2:   #E8C96A;
  --gold-g:  rgba(201,168,76,.12);
  --parch:   #F5E6D0;
  --parch2:  #EDD8B8;
  --parch3:  #E0C89A;
  --ink:     #1A0808;
  --muted:   rgba(26,8,8,.48);
  --card:    rgba(245,230,208,.88);
  --border:  rgba(201,168,76,.18);
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'Inter', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --parch:  #180808;
    --parch2: #220C0C;
    --ink:    #F5E6D0;
    --muted:  rgba(245,230,208,.45);
    --card:   rgba(34,12,12,.9);
    --border: rgba(201,168,76,.2);
  }
}


body { font-family: var(--serif); background: var(--parch); color: var(--ink); overflow-x: hidden; }



/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 3rem;
  background: rgba(245,230,208,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) { .nav { background: rgba(24,8,8,.94); } }
.nav__logo {
  font-family: var(--serif); font-size: 1.1rem;
  font-weight: 600; letter-spacing: .06em; color: var(--burg);
  display: flex; align-items: center; gap: .5rem;
}
.nav__logo::before { content: '🍷'; font-size: .9rem; }
.nav__links { display: flex; gap: 2rem; list-style: none; }
.nav__links a {
  font-family: var(--sans); font-size: .75rem; font-weight: 400;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
  transition: color .2s;
}
.nav__links a:hover { color: var(--burg); }
.nav__right { display: flex; align-items: center; gap: 1rem; }
.lang-toggle { display: flex; gap: .3rem; }
.lang-toggle button {
  font-family: var(--sans); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; background: transparent;
  border: 1px solid var(--border); color: var(--muted);
  padding: .22rem .6rem; border-radius: 2px; cursor: pointer; transition: all .2s;
}
.lang-toggle button.active, .lang-toggle button:hover {
  border-color: var(--gold); color: var(--gold); background: var(--gold-g);
}
.hamburger { display: none; flex-direction: column; gap: 5px; background: transparent; border: none; cursor: pointer; padding: .4rem; }
.hamburger span { display: block; width: 20px; height: 1px; background: var(--burg); transition: all .3s; }
body.nav-open .hamburger span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }
.nav__drawer {
  display: none; position: fixed; inset: 0;
  background: var(--parch); z-index: 99;
  flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
}
body.nav-open .nav__drawer { display: flex; }
.nav__drawer a { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); }
.nav__drawer a:hover { color: var(--burg); }
@media (max-width: 768px) { .nav { padding: 1rem 1.5rem; } .nav__links { display: none; } .hamburger { display: flex; } }

/* ── HERO ── */
.hero {
  min-height: 92vh; display: grid;
  grid-template-columns: 1fr 1fr; align-items: center;
  padding: 0 8vw; gap: 4rem;
  background: linear-gradient(135deg, var(--burg) 0%, var(--burg2) 100%);
  position: relative; overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; right: -5%; bottom: -10%;
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, rgba(201,168,76,.07) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.hero__left { position: relative; z-index: 1; }
.hero__kicker {
  font-family: var(--sans); font-size: .65rem;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.8rem; opacity: .8;
  display: flex; align-items: center; gap: .8rem;
}
.hero__kicker::before { content: ''; width: 24px; height: 1px; background: var(--gold); }
.hero h1 {
  font-size: clamp(3rem, 6vw, 6rem); font-weight: 300;
  line-height: 1.05; letter-spacing: .02em; color: var(--parch);
  margin-bottom: 1.8rem;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero__lead { font-size: clamp(.88rem, 1.5vw, 1.05rem); color: rgba(245,230,208,.6); line-height: 1.85; max-width: 420px; margin-bottom: 2.5rem; font-weight: 300; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-gold {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .85rem 2rem; background: var(--gold);
  color: var(--burg); border: none; border-radius: 2px;
  cursor: pointer; transition: all .3s;
}
.btn-gold:hover { background: var(--gold2); box-shadow: 0 8px 30px rgba(201,168,76,.3); transform: translateY(-2px); }
.btn-outline-light {
  font-family: var(--sans); font-size: .72rem; font-weight: 300;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .85rem 2rem; background: transparent;
  border: 1px solid rgba(245,230,208,.25); color: rgba(245,230,208,.7);
  border-radius: 2px; cursor: pointer; transition: all .25s;
}
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold); }
.hero__right {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.hstat {
  background: rgba(245,230,208,.06);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 6px; padding: 1.6rem;
}
.hstat__num { font-size: 2.5rem; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: .4rem; }
.hstat__label { font-family: var(--sans); font-size: .72rem; color: rgba(245,230,208,.5); letter-spacing: .06em; line-height: 1.5; }
.hstat--wide { grid-column: 1/-1; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding: 3rem 1.5rem; min-height: auto; } .hero__right { display: none; } }

/* ── SECTION COMMON ── */
.section-eye { font-family: var(--sans); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; opacity: .75; }
.section-title { font-size: clamp(1.8rem, 3.5vw, 3.2rem); font-weight: 300; line-height: 1.15; margin-bottom: .8rem; }
.section-title em { font-style: italic; color: var(--burg); }
@media (prefers-color-scheme: dark) { .section-title em { color: var(--gold); } }
.section-sub { font-family: var(--sans); font-size: .88rem; font-weight: 300; color: var(--muted); line-height: 1.75; }

/* ── TASTING NOTES ── */
.notes-section { padding: 6rem 8vw; }
.notes-section .inner { max-width: 1100px; margin: 0 auto; }
.notes-section .head { margin-bottom: 3rem; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.wcard {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 2rem;
  backdrop-filter: blur(8px); transition: transform .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.wcard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--burg), var(--gold));
}
.wcard:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(74,14,14,.1); }
.wcard__region {
  font-family: var(--sans); font-size: .6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .8rem; opacity: .8;
}
.wcard__name { font-size: 1.2rem; font-weight: 600; line-height: 1.25; margin-bottom: .3rem; }
.wcard__vintage { font-family: var(--sans); font-size: .75rem; color: var(--muted); margin-bottom: 1rem; letter-spacing: .06em; }
.wcard__score { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.score-num { font-size: 2rem; font-weight: 300; color: var(--burg); line-height: 1; }
@media (prefers-color-scheme: dark) { .score-num { color: var(--gold); } }
.score-bar { flex: 1; height: 4px; background: rgba(74,14,14,.1); border-radius: 2px; overflow: hidden; }
.score-fill { height: 100%; background: linear-gradient(to right, var(--burg3), var(--gold)); border-radius: 2px; }
.wcard__notes { font-size: .88rem; font-style: italic; color: var(--muted); line-height: 1.8; margin-bottom: 1.2rem; }
.wcard__chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.wchip { font-family: var(--sans); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .55rem; border: 1px solid var(--border); color: var(--muted); border-radius: 2px; }

/* ── REGIONS ── */
.regions-section { padding: 6rem 8vw; background: var(--parch2); }
@media (prefers-color-scheme: dark) { .regions-section { background: var(--parch2); } }
.regions-section .inner { max-width: 1100px; margin: 0 auto; }
.regions-section .head { text-align: center; margin-bottom: 3rem; }
.regions-section .section-sub { max-width: 500px; margin: 0 auto; }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.regcard {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.8rem; text-align: center;
  transition: transform .3s; backdrop-filter: blur(8px);
}
.regcard:hover { transform: translateY(-3px); }
.regcard__flag { font-size: 2.2rem; margin-bottom: .8rem; display: block; }
.regcard__name { font-size: 1.05rem; font-weight: 600; margin-bottom: .4rem; }
.regcard__count { font-family: var(--sans); font-size: .72rem; color: var(--gold); letter-spacing: .08em; }

/* ── METHODOLOGY ── */
.method-section { padding: 6rem 8vw; }
.method-section .inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.method-text .section-sub { margin-bottom: 1.5rem; }
.method-text p { font-family: var(--sans); font-size: .88rem; font-weight: 300; color: var(--muted); line-height: 1.8; margin-bottom: 1rem; }
.method-score { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; backdrop-filter: blur(8px); }
.method-score h4 { font-size: 1rem; font-weight: 600; margin-bottom: 1.4rem; color: var(--gold); }
.ms-row { display: flex; justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid var(--border); font-family: var(--sans); font-size: .82rem; }
.ms-row:last-child { border-bottom: none; }
.ms-label { color: var(--muted); }
.ms-val { color: var(--ink); font-weight: 500; }
@media (max-width: 768px) { .method-section .inner { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ── FOOTER ── */
footer {
  background: var(--burg); color: var(--parch);
  border-top: 1px solid rgba(201,168,76,.15);
  padding: 4rem 8vw 2.5rem;
}
.ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; max-width: 1100px; margin: 0 auto 3rem; }
.ft-brand .flogo { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--gold); margin-bottom: .8rem; display: flex; align-items: center; gap: .4rem; }
.ft-brand p { font-family: var(--sans); font-size: .8rem; font-weight: 300; color: rgba(245,230,208,.5); line-height: 1.7; max-width: 240px; }
.ft-col h4 { font-family: var(--sans); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; opacity: .6; }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ft-col ul li a { font-family: var(--sans); font-size: .8rem; font-weight: 300; color: rgba(245,230,208,.5); transition: color .2s; }
.ft-col ul li a:hover { color: var(--gold); }
.ft-bot { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid rgba(201,168,76,.12); font-family: var(--sans); font-size: .72rem; color: rgba(245,230,208,.3); }
.ft-bot a { color: var(--gold); opacity: .5; transition: opacity .2s; }
.ft-bot a:hover { opacity: 1; }
@media (max-width: 768px) { .ft-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .ft-brand { grid-column: 1/-1; } .ft-bot { flex-direction: column; gap: .8rem; text-align: center; } }
@media (max-width: 480px) { .ft-grid { grid-template-columns: 1fr; } }
  
/* ── CURRENT BOTTLE ── */
.current-section{padding:5rem 8vw;background:var(--burg);color:var(--parch)}
.current-section .inner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:center}
.bottle-visual{aspect-ratio:1/2;background:linear-gradient(180deg,var(--burg2) 0%,var(--burg3) 60%,rgba(201,168,76,.2) 100%);border-radius:40px 40px 20px 20px;display:flex;align-items:center;justify-content:center;font-size:4rem;max-width:140px;box-shadow:0 20px 60px rgba(0,0,0,.3);border:1px solid rgba(201,168,76,.2)}
.current-section .section-eye{color:var(--gold);opacity:.7}
.current-section .section-title{color:var(--parch)}
.current-section .section-title em{color:var(--gold)}
.cur-meta{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);opacity:.7;margin:1rem 0 .5rem}
.cur-score{font-size:3.5rem;font-weight:300;color:var(--gold);line-height:1;margin-bottom:.5rem}
.cur-score span{font-family:var(--sans);font-size:.75rem;color:rgba(245,230,208,.4);vertical-align:middle;margin-left:.3rem}
.cur-notes{font-size:.92rem;font-style:italic;color:rgba(245,230,208,.65);line-height:1.9;margin-bottom:1.2rem}
.cur-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.cur-chip{font-family:var(--sans);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .6rem;border:1px solid rgba(201,168,76,.25);color:var(--gold);border-radius:2px;opacity:.8}
@media(max-width:700px){.current-section .inner{grid-template-columns:1fr}.bottle-visual{display:none}}

/* ── CELLAR DIARY ── */
.diary-section{padding:5rem 8vw}
.diary-section .inner{max-width:760px;margin:0 auto}
.diary-section .head{margin-bottom:3rem}
.diary-entries{display:flex;flex-direction:column}
.dentry{padding:2.2rem 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:100px 1fr;gap:2rem;align-items:start}
.dentry:last-child{border-bottom:none}
.dentry__date{font-family:var(--sans);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.65;padding-top:.2rem;line-height:1.6}
.dentry__title{font-size:1.1rem;font-weight:600;margin-bottom:.6rem;line-height:1.3}
.dentry__body{font-size:.88rem;font-style:italic;color:var(--muted);line-height:1.9;margin-bottom:.8rem}
.dentry__score{font-family:var(--sans);font-size:.72rem;color:var(--gold);letter-spacing:.08em}
@media(max-width:600px){.dentry{grid-template-columns:1fr}.dentry__date{padding-top:0}}

/* ── NEWSLETTER ── */
.nl-section{padding:5rem 8vw;text-align:center;background:linear-gradient(135deg,rgba(201,168,76,.06) 0%,transparent 60%);border-top:1px solid var(--border)}
.nl-box{max-width:480px;margin:2.5rem auto 0;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;padding:2.2rem}
.nl-form{display:flex;gap:.7rem;margin-top:1rem}
.nl-form input{flex:1;padding:.75rem 1rem;background:rgba(245,230,208,.05);border:1px solid var(--border);border-radius:3px;color:var(--parch);font-family:var(--serif);font-size:.88rem;transition:border-color .2s}
.nl-form input:focus{outline:none;border-color:var(--gold)}
.nl-form input::placeholder{color:rgba(245,230,208,.3)}
.nl-form button{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.75rem 1.2rem;background:var(--gold);color:var(--burg);border:none;border-radius:3px;cursor:pointer;transition:all .25s;white-space:nowrap}
.nl-form button:hover{background:var(--gold2)}
@media(max-width:480px){.nl-form{flex-direction:column}}
#nlOk{display:none;margin-top:.8rem;font-family:var(--serif);font-style:italic;font-size:.88rem;color:var(--gold)}

/* ── THEME TOGGLE BUTTON ───────────────────────────── */
.btn-theme {
  border-color: var(--border, rgba(255,255,255,.1));
  color: var(--text-m, #888);
}
.btn-theme:hover { border-color: var(--accent, #888); color: var(--accent, #fff); }
.nav__ham span { background: var(--gold); }
.nav-open .nav__links { background: var(--parch); border-top: 1px solid var(--border); }

/* ── MANUAL THEME TOGGLE — wine ── */
/* Dark: manual override of light default */
[data-theme="dark"] {
  --parch:  #180808;
  --parch2: #220C0C;
  --ink:    #F5E6D0;
  --muted:  rgba(245,230,208,.45);
  --card:   rgba(34,12,12,.9);
  --border: rgba(201,168,76,.2);
  color-scheme: dark;
}
/* Light: re-assert light values when OS is dark but user toggled light */
[data-theme="light"] {
  --parch:  #F5E6D0;
  --parch2: #EDD8B8;
  --ink:    #1A0808;
  --muted:  rgba(26,8,8,.48);
  --card:   rgba(245,230,208,.88);
  --border: rgba(201,168,76,.18);
  color-scheme: light;
}

/* ── FOOTER colours ── */
.site-footer { background: var(--burg); border-top: 1px solid var(--border); color: var(--parch); }
.site-footer .ft-brand .ft-logo { color: var(--gold); }
.site-footer .ft-col h4 { color: var(--gold); }
.site-footer a { color: rgba(245,230,208,.5); }
.site-footer a:hover { color: var(--parch); }
.site-footer .ft-bot { color: rgba(245,230,208,.4); border-top: 1px solid var(--border); }
