/* ============================================================
   HILL TOP WINERY — Journal (blog) shared styles
   Michelin-editorial: dark Primal chrome, warm bone reading.
   ============================================================ */
:root{
  --offblack:#0f0d0b;--stone:#1c1a17;--stone-2:#26221d;--slate:#141210;
  --bone:#e8ddd0;--bone-deep:#d8c8b4;--bone-soft:#f1eae0;--paper-bg:#f4efe6;
  --amber:#c98a3f;--amber-deep:#b5762f;--ember:#e3a552;--wine:#4a1f2a;
  --ink:#16130f;--ink-soft:#5a5244;--ink-dim:#857c6c;--paper:#efe6da;--paper-soft:#c0b6a6;--paper-dim:#8d8273;
  --maxw:1200px;--measure:68ch;--gut:clamp(20px,5vw,72px);--r:3px;
  --ff-display:"Fraunces",Georgia,serif;--ff-serif:"Cormorant Garamond","Fraunces",Georgia,serif;--ff-util:"Saira Condensed","Arial Narrow",sans-serif;
  --shadow-deep:0 40px 80px -40px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--offblack);color:var(--paper);font-family:var(--ff-serif);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:400;line-height:1.06;letter-spacing:-.01em}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--ff-util);font-size:.76rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--amber)}
.eyebrow.on-light{color:var(--amber-deep)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 4px rgba(201,138,63,.16),0 0 12px 2px rgba(227,165,82,.75)}
.eyebrow.center{justify-content:center}
em{font-style:italic;color:var(--ember)}

/* buttons */
.btn{--bbg:var(--amber-deep);--bfg:#1a1209;--bbd:transparent;display:inline-flex;align-items:center;gap:.6em;justify-content:center;
  font-family:var(--ff-util);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.84rem;padding:.95em 1.7em;border-radius:var(--r);
  background:var(--bbg);color:var(--bfg);border:1px solid var(--bbd);cursor:pointer;text-decoration:none;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
  box-shadow:0 1px 0 rgba(255,220,170,.35) inset,0 10px 24px -12px rgba(0,0,0,.6)}
.btn:hover{transform:translateY(-2px);background:var(--amber)}
.btn .arr{transition:transform .25s ease}.btn:hover .arr{transform:translateX(4px)}
.btn--ghost{--bbg:transparent;--bfg:var(--paper);--bbd:rgba(232,221,208,.34);box-shadow:none}
.btn--ghost:hover{--bbg:rgba(232,221,208,.07);border-color:rgba(232,221,208,.6)}
.btn--ink{--bbg:var(--ink);--bfg:var(--bone-soft)}
.btn--big{padding:1.1em 2.2em;font-size:.92rem}

/* shared header */
header.site{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gut);background:rgba(12,10,8,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(232,221,208,.08)}
header.site .brand img{height:clamp(36px,4.4vw,46px);width:auto;display:block}
.brand img{filter:brightness(0) invert(1)}
header.site .nav-right{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px)}
.nav-link{font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--paper-soft);text-decoration:none}
.nav-link:hover{color:var(--bone)}
@media(max-width:640px){.nav-link.hide-sm{display:none}}

/* ===== blog index ===== */
.j-hero{padding:clamp(54px,9vh,104px) 0 clamp(30px,5vh,46px);text-align:center;border-bottom:1px solid rgba(232,221,208,.1)}
.j-hero h1{font-size:clamp(2.8rem,7vw,5.4rem);font-weight:300;margin-top:16px;color:var(--bone-soft)}
.j-hero p{margin:18px auto 0;max-width:60ch;color:var(--paper-soft);font-size:1.18rem;line-height:1.55}
.j-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.j-cat{font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:600;color:var(--paper-soft);
  text-decoration:none;padding:.6em 1.2em;border:1px solid rgba(232,221,208,.18);border-radius:100px;transition:.22s ease}
.j-cat:hover,.j-cat.is-on{background:var(--amber-deep);color:#1a1209;border-color:var(--amber-deep)}

.j-section{padding:clamp(44px,7vh,84px) 0}
.j-section + .j-section{border-top:1px solid rgba(232,221,208,.07)}
.j-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3.4vh,38px)}
.j-sec-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:400}
.j-sec-head a{font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--amber);text-decoration:none;white-space:nowrap}

/* featured */
.j-feature{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(40px,6vh,72px)}
.j-feature .media{border-radius:12px;overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow-deep)}
.j-feature .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.j-feature a:hover .media img{transform:scale(1.04)}
.j-feature .cat{color:var(--amber);font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;font-weight:600}
.j-feature h3{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:400;line-height:1.04;margin-top:12px}
.j-feature .ex{margin-top:16px;color:var(--paper-soft);font-size:1.14rem;line-height:1.55;max-width:46ch}
.j-feature .by{margin-top:18px;font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--paper-dim)}
.j-feature .by b{color:var(--ember);font-weight:600}
.j-feature a{text-decoration:none;display:contents}

/* card grid */
.j-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.j-card{display:flex;flex-direction:column;text-decoration:none;background:linear-gradient(168deg,#181410,#100d0b);
  border:1px solid rgba(232,221,208,.08);border-radius:12px;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.j-card:hover{transform:translateY(-5px);border-color:rgba(224,160,78,.4);box-shadow:0 30px 56px -34px rgba(0,0,0,.85)}
.j-card .media{aspect-ratio:3/2;overflow:hidden;background:var(--stone-2)}
.j-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.j-card:hover .media img{transform:scale(1.05)}
.j-card .body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.j-card .cat{color:var(--amber);font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;font-weight:600}
.j-card h3{font-size:1.32rem;line-height:1.14;margin-top:9px;color:var(--bone-soft)}
.j-card .ex{margin-top:10px;color:var(--paper-soft);font-size:1rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.j-card .by{margin-top:auto;padding-top:16px;font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--paper-dim)}
.j-card .by b{color:var(--ember);font-weight:600}

/* writers strip */
.j-writers{background:var(--slate);border-top:1px solid rgba(232,221,208,.08);border-bottom:1px solid rgba(232,221,208,.08)}
.j-writers .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(24px,3vh,34px)}
.j-writer{text-align:left}
.j-writer .mono{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--ff-display);font-style:italic;font-size:1.4rem;color:var(--ember);
  background:radial-gradient(circle at 38% 32%,rgba(227,165,82,.16),transparent 66%);border:1px solid rgba(224,160,78,.3);margin-bottom:14px}
.j-writer h4{font-family:var(--ff-display);font-size:1.2rem}
.j-writer .role{font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:var(--amber);margin-top:4px}
.j-writer p{margin-top:9px;color:var(--paper-soft);font-size:.98rem;line-height:1.5}

/* ===== article ===== */
.a-hero{position:relative;min-height:62svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--offblack)}
.a-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.a-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,8,.5) 0%,transparent 34%,rgba(12,10,8,.78) 100%);z-index:1}
.a-hero .inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(40px,6vh,72px)}
.a-hero .cat{font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;font-weight:600;color:var(--ember)}
.a-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:300;color:var(--bone-soft);margin-top:14px;max-width:20ch;
  text-shadow:0 2px 26px rgba(0,0,0,.55)}
.a-hero .meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--paper-soft)}
.a-hero .meta b{color:var(--ember);font-weight:600}
.a-hero .meta .sep{width:5px;height:5px;border-radius:50%;background:rgba(232,221,208,.35)}

.a-body{background:var(--paper-bg);color:var(--ink)}
.a-wrap{max-width:740px;margin-inline:auto;padding:clamp(46px,7vh,88px) var(--gut)}
.a-lead{font-family:var(--ff-serif);font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.5;color:var(--ink);font-weight:500}
.a-wrap h2{font-family:var(--ff-display);font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:400;margin:clamp(34px,5vh,56px) 0 0;color:var(--ink)}
.a-wrap h3{font-family:var(--ff-display);font-size:1.4rem;font-weight:500;margin:28px 0 0;color:var(--ink)}
.a-wrap p{margin:16px 0 0;font-size:1.16rem;line-height:1.7;color:#2b2519}
.a-wrap p a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:2px}
.a-wrap ul,.a-wrap ol{margin:16px 0 0;padding-left:1.2em;font-size:1.16rem;line-height:1.6;color:#2b2519}
.a-wrap li{margin-top:8px}
.a-wrap li::marker{color:var(--amber-deep)}
.a-fig{margin:clamp(30px,4.5vh,48px) 0 0}
.a-fig img{width:100%;border-radius:10px;box-shadow:0 30px 60px -38px rgba(0,0,0,.5)}
.a-fig figcaption{margin-top:10px;font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--ink-dim);text-align:center}
.a-pull{margin:clamp(34px,5vh,52px) 0 0;padding:6px 0 6px 26px;border-left:3px solid var(--amber-deep);
  font-family:var(--ff-display);font-style:italic;font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;color:var(--ink)}
.a-divider{margin:clamp(40px,6vh,64px) 0 0;text-align:center;color:var(--amber-deep);letter-spacing:1.2em;font-size:.8rem}

/* FAQ */
.a-faq{margin-top:clamp(40px,6vh,64px);border-top:1px solid rgba(22,19,15,.14);padding-top:clamp(28px,4vh,40px)}
.a-faq h2{margin-top:0}
.a-faq details{border-bottom:1px solid rgba(22,19,15,.12);padding:18px 0}
.a-faq summary{cursor:pointer;font-family:var(--ff-display);font-size:1.24rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.a-faq summary::-webkit-details-marker{display:none}
.a-faq summary::after{content:"+";color:var(--amber-deep);font-size:1.5rem;line-height:1;transition:transform .2s ease}
.a-faq details[open] summary::after{transform:rotate(45deg)}
.a-faq details p{margin-top:12px}

/* author box */
.a-author{margin-top:clamp(36px,5vh,52px);display:flex;gap:20px;align-items:flex-start;background:#ece4d6;border:1px solid rgba(22,19,15,.08);border-radius:12px;padding:clamp(22px,3vw,30px)}
.a-author .mono{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-family:var(--ff-display);font-style:italic;font-size:1.6rem;color:var(--amber-deep);background:radial-gradient(circle at 38% 32%,rgba(201,138,63,.18),transparent 66%);border:1px solid rgba(181,118,47,.4)}
.a-author .role{font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:var(--amber-deep)}
.a-author h4{font-family:var(--ff-display);font-size:1.4rem;margin-top:3px;color:var(--ink)}
.a-author p{margin-top:8px;font-size:1.02rem;line-height:1.5;color:var(--ink-soft)}
.a-author .ai{margin-top:8px;font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;color:var(--ink-dim)}

/* visit CTA */
.a-cta{position:relative;overflow:hidden;background:var(--offblack);color:var(--paper);text-align:center;padding:clamp(48px,8vh,92px) var(--gut)}
.a-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;z-index:0}
.a-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 40%,rgba(201,138,63,.12),transparent 70%),rgba(12,10,8,.5);z-index:1}
.a-cta .in{position:relative;z-index:2;max-width:60ch;margin-inline:auto}
.a-cta h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:300;color:var(--bone-soft)}
.a-cta h2 em{color:var(--ember)}
.a-cta p{margin-top:14px;color:var(--paper-soft);font-size:1.12rem}
.a-cta .row{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* related */
.a-related{background:var(--offblack);padding:0 0 clamp(54px,8vh,92px)}

/* footer */
.ftr{background:var(--offblack);border-top:1px solid rgba(232,221,208,.1);padding:clamp(40px,6vh,64px) 0}
.ftr-row{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between}
.ftr a{color:var(--paper-soft);text-decoration:none;font-family:var(--ff-util);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem}
.ftr a:hover{color:var(--ember)}
.ftr .tel b{color:var(--ember)}

@media (max-width:900px){
  .j-feature{grid-template-columns:1fr}
  .j-grid{grid-template-columns:1fr 1fr}
  .j-writers .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:17px}
  .j-grid{grid-template-columns:1fr}
  .j-writers .grid{grid-template-columns:1fr}
  .a-author{flex-direction:column}
}

/* In the News (press wall) */
.j-press{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.j-press-card{display:flex;flex-direction:column;padding:26px;border:1px solid rgba(232,221,208,.14);border-radius:8px;background:rgba(232,221,208,.02);transition:border-color .2s ease,transform .2s ease;text-decoration:none}
.j-press-card:hover{border-color:rgba(224,160,78,.55);transform:translateY(-3px)}
.j-press-card .pub{font-family:"Saira Condensed",sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:#e0a04e;margin-bottom:12px}
.j-press-card .quote{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.18rem;line-height:1.5;color:#f1eae0;margin:0 0 16px}
.j-press-card .src{margin-top:auto;font-size:.82rem;color:#b0a596}
.j-press-note{color:#8d8273;font-size:.82rem;margin-top:16px;font-style:italic}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}