/* ───────────────────────────────────────────────────────────────────
   Uva Cellars — journal / pillar-article styles
   Loaded ALONGSIDE watch.css, which already provides the design tokens,
   top nav, mobile drawer and site footer. This file only adds the
   long-form article layout (header, prose, pull-quotes, FAQ, related).
   ─────────────────────────────────────────────────────────────────── */

/* Article shell */
.article{max-width:1180px;margin:0 auto;padding:150px 40px 0}
.article-head{max-width:780px;margin:0 auto 8px;text-align:center}
.article-head .eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);margin-bottom:22px}
.article-head h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(36px,5.2vw,62px);line-height:1.05;letter-spacing:-0.015em;margin-bottom:26px;text-wrap:balance}
.article-head .standfirst{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(20px,2.4vw,25px);line-height:1.5;color:var(--ink-soft);max-width:60ch;margin:0 auto;text-wrap:pretty}
.article-meta{display:flex;justify-content:center;gap:22px;margin-top:30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-softer)}
.article-meta span{display:inline-flex;align-items:center;gap:9px}
.article-rule{max-width:680px;margin:48px auto 0;border:0;border-top:1px solid var(--rule)}

/* Body prose — comfortable single measure */
.prose{max-width:680px;margin:0 auto;padding-top:6px}
.prose > p{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:21px;line-height:1.78;color:var(--ink);margin:0 0 1.15em;text-wrap:pretty}
.prose > p:first-of-type{margin-top:40px}
.prose .lead-cap::first-letter{font-size:1.05em;color:var(--ink)}
.prose h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(27px,3.4vw,34px);line-height:1.12;letter-spacing:-0.01em;color:var(--ink);margin:1.9em 0 .55em}
.prose h2:first-child{margin-top:0}
.prose strong{font-weight:400;color:var(--ink)}
.prose em{font-style:italic}
.prose a:not(.btn){color:var(--brass);border-bottom:1px solid color-mix(in oklab, var(--brass) 40%, transparent);transition:border-color .25s ease}
.prose a:not(.btn):hover{border-color:var(--brass)}

/* Pull-quote */
.prose blockquote{margin:1.7em 0;padding:6px 0 6px 30px;border-left:2px solid var(--brass)}
.prose blockquote p{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(22px,2.8vw,27px);line-height:1.4;color:var(--ink);margin:0;text-wrap:pretty}

/* Inline figure / numbers callout */
.callout{margin:1.7em 0;padding:26px 30px;background:var(--paper-2);border:1px solid var(--rule);border-radius:3px}
.callout p{font-family:'Inter',sans-serif;font-weight:300;font-size:15px;line-height:1.7;color:var(--ink-soft);margin:0}
.callout strong{color:var(--brass);font-weight:500}

/* FAQ */
.faq{max-width:680px;margin:88px auto 0;border-top:1px solid var(--rule);padding-top:54px}
.faq h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(27px,3.4vw,34px);letter-spacing:-0.01em;margin-bottom:34px}
.faq-item{padding:24px 0;border-bottom:1px solid var(--rule)}
.faq-item:first-of-type{border-top:1px solid var(--rule)}
.faq-q{font-family:'Inter',sans-serif;font-weight:400;font-size:16px;letter-spacing:.01em;color:var(--ink);margin-bottom:12px}
.faq-a{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:19px;line-height:1.6;color:var(--ink-soft);margin:0;text-wrap:pretty}

/* Closing CTA */
.article-cta{max-width:680px;margin:64px auto 0;text-align:center;padding:54px 30px 0;border-top:1px solid var(--rule)}
.article-cta p{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:23px;line-height:1.45;color:var(--ink);margin-bottom:26px;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--noir);background:var(--brass);padding:15px 28px;transition:background .25s ease}
.btn:hover{background:#d8a766}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Related / further reading */
.related{max-width:1180px;margin:96px auto 0;padding:0 40px}
.related h4{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-softer);text-align:center;margin-bottom:30px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto}
.related-card{display:block;border:1px solid var(--rule-2);padding:34px 32px;transition:border-color .3s ease,background .3s ease}
.related-card:hover{border-color:var(--ink-soft);background:var(--paper-2)}
.related-card .rk{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:14px}
.related-card .rt{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:25px;line-height:1.22;color:var(--ink);letter-spacing:-0.01em;text-wrap:pretty}
.related-card .rt::after{content:" →";font-family:'Inter',sans-serif;font-size:15px;color:var(--ink-softer);transition:color .25s ease}
.related-card:hover .rt::after{color:var(--brass)}

@media (max-width:768px){
  .article{padding:118px 22px 0}
  .prose > p{font-size:19px}
  .related{padding:0 22px}
  .related-grid{grid-template-columns:1fr;gap:16px}
  .faq{margin-top:60px}
}

/* ─── Journal index (the /journal hub) ──────────────────────────────── */
.jindex{max-width:1280px;margin:0 auto;padding:150px 40px 0}
.jindex-head{max-width:780px;margin:0 auto 46px;text-align:center}
.jindex-head .eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);margin-bottom:20px}
.jindex-head h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(38px,5vw,60px);line-height:1.05;letter-spacing:-0.015em;margin-bottom:22px;text-wrap:balance}
.jindex-head p{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(19px,2.3vw,23px);line-height:1.5;color:var(--ink-soft);max-width:54ch;margin:0 auto;text-wrap:pretty}
.jindex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.j-card{display:block;border:1px solid var(--rule-2);padding:36px 32px 40px;transition:background .3s ease,border-color .3s ease}
.j-card:hover{background:var(--paper-2);border-color:var(--ink-soft)}
.j-card .jc-k{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:16px}
.j-card .jc-t{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:26px;line-height:1.18;color:var(--ink);letter-spacing:-0.01em;margin-bottom:14px;text-wrap:pretty}
.j-card .jc-x{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:17px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.j-card .jc-more{display:inline-block;margin-top:18px;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-softer);transition:color .25s ease}
.j-card:hover .jc-more{color:var(--brass)}

@media (max-width:980px){ .jindex-grid{grid-template-columns:1fr 1fr} }
@media (max-width:768px){
  .jindex{padding:118px 22px 0}
  .jindex-grid{grid-template-columns:1fr}
}