/* ============================================================================
   Drinqly article design system — "The Cellar Book"
   Reference implementation: public/articles/untappd-for-wine.html
   Written spec + component rules: DESIGN_articles.md (repo root)
   Every article links this file: <link rel="stylesheet" href="/articles/articles.css">
   No per-article <style> blocks except a tiny, commented page-specific override.
   ========================================================================== */

/* Self-hosted fonts (was Google Fonts) — variable, font-display:swap, latin + latin-ext */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/dmsans-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/dmsans-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 900;font-display:swap;src:url('/fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/fraunces-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#1a0f10; --surface:#251618; --surface-2:#301c1f;
  --gold:#c24a52; --gold-text:#cf5b62; --gold-soft:rgba(194,74,82,.14);
  --cream:#f3e9e6; --muted:#b49b98; --line:rgba(194,74,82,.18); --ink:#0d0708;
  --maxw:720px; --wide:960px; --hero:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--cream);
  font-family:"DM Sans",-apple-system,system-ui,sans-serif;
  font-size:19px;line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--gold-text);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- measure + breakout helpers ------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* .wide steps out past the 720 text column to ~960, centred on the viewport */
.wide{position:relative;left:50%;transform:translateX(-50%);width:min(var(--wide),92vw)}
/* .fullbleed spans the whole viewport width */
.fullbleed{position:relative;left:50%;transform:translateX(-50%);width:100vw}

h1,h2,h3{font-family:"Fraunces",Georgia,serif;color:var(--cream);font-weight:400}
h1{font-size:clamp(38px,6.4vw,68px);line-height:1.02;letter-spacing:-.02em;margin:0 0 22px}
h2{font-size:clamp(28px,4.6vw,40px);line-height:1.08;letter-spacing:-.012em;margin:0 0 16px}
h3{font-size:21px;font-weight:500;margin:32px 0 8px}
p{margin:0 0 20px}
section{margin:48px 0}

/* ---- spot-art: illustration accents (icons only — never hero/thumbnail) --- */
.h2-spot{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.h2-spot img{width:40px;height:40px;object-fit:contain;flex:none}
.h2-spot h2{margin:0}
@media(max-width:620px){ .h2-spot img{width:34px;height:34px} }

nav.crumb{font-size:13px;color:var(--muted);letter-spacing:.02em;padding:26px 0 0}
nav.crumb a{color:var(--muted)}
nav.crumb span{color:var(--gold-text)}

/* ---- HERO: full-width, no box, oversized display type ---------- */
header.post{padding:36px 0 46px;border-bottom:1px solid var(--line);margin-bottom:46px}
.hero-inner{max-width:var(--hero);margin:0 auto;padding:0 22px;display:grid;grid-template-columns:1fr;gap:38px;align-items:end}
@media(min-width:900px){ .hero-inner{grid-template-columns:1.12fr .88fr;gap:56px} }
.kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:28px}
.dek{font-size:clamp(20px,2.6vw,24px);color:var(--muted);margin:0 0 30px;font-family:"Fraunces",Georgia,serif;font-style:italic;line-height:1.42;max-width:32ch}
.byline{font-size:12px;letter-spacing:.02em;color:var(--muted);line-height:1.6;max-width:52ch}
.byline .cred{display:block;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);font-weight:600;margin-bottom:6px}
.dateline{margin-top:16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dateline b{color:var(--cream);font-weight:600}
.hero-rule{width:64px;height:1px;background:var(--gold);margin:22px 0 0}

/* ---- imagery system: duotone figures + placeholder slots ------- */
figure.fig{margin:0}
.fig img{display:block;width:100%;height:auto}
/* opt-in duotone for mismatched stock; well-shot photos run natural */
.fig.duo img{filter:url(#duo)}
/* empty slot: a quiet, dark, editorial frame — NOT a bright gradient.
   A real <img> replaces this and gets toned by filter:url(#duo). */
.ph{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
    background:
      repeating-linear-gradient(135deg,rgba(194,74,82,.045) 0 1px,transparent 1px 10px),
      radial-gradient(130% 120% at 50% 0%,#301c1f 0%,#1c1013 72%);
    border:1px solid var(--line)}
.ph span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:12px 14px;opacity:.85}
figcaption{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:14px;color:var(--muted);margin-top:11px;line-height:1.4}
.fullbleed figcaption{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding:0 22px}

/* ---- QUICK ANSWER: set-off epigraph, no box ------------------- */
.quick-answer{margin:0 0 40px;padding:4px 0 4px 26px;border-left:2px solid var(--gold)}
.quick-answer .label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:14px}
.quick-answer p{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(21px,2.9vw,26px);line-height:1.42;color:var(--cream)}
.quick-answer p b{font-weight:600}

/* ---- GET APP: hairline band, no fill ------------------------- */
.getapp{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:0 0 46px}
.getapp p{margin:0;font-size:17px;color:var(--cream);font-family:"Fraunces",Georgia,serif;font-style:italic}
.getapp a.appstore{display:inline-block;background:var(--gold);color:#fff;font-weight:700;padding:12px 24px;border-radius:999px;font-size:15px;white-space:nowrap}
.getapp a.appstore:hover{text-decoration:none;filter:brightness(1.06)}

/* ---- lead paragraph drop cap --------------------------------- */
.lead::first-letter{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;color:var(--gold-text);float:left;font-size:4.9em;line-height:.72;padding:8px 14px 0 0}

/* ---- oversized pull quote ------------------------------------ */
.pull{margin:52px 0;padding:0;border:0}
.pull::before{content:"";display:block;width:52px;height:2px;background:var(--gold);margin-bottom:26px}
.pull p{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(28px,4.7vw,38px);line-height:1.24;letter-spacing:-.01em;color:var(--cream);margin:0}
.pull .g{color:var(--gold-text)}

/* ---- versus columns (normalized from .wins/.vs cards) --------
   Two headed columns divided by a hairline; no card, no background.
   At <=560px they stack, divided by a horizontal hairline. */
.cols{display:grid;grid-template-columns:1fr 1fr;margin:36px 0}
.cols > div{padding:0 30px}
.cols > div:first-child{padding-left:0;border-right:1px solid var(--line)}
.cols > div:last-child{padding-right:0}
.cols h4{font-family:"DM Sans",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin:0 0 16px}
.cols .ch{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:20px;color:var(--cream);line-height:1.15;margin:2px 0 14px}
.cols ul{margin:0;padding:0;list-style:none}
.cols li{position:relative;padding:8px 0 8px 18px;color:var(--cream);font-size:16px}
.cols li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
@media(max-width:560px){
  .cols{grid-template-columns:1fr}
  .cols > div{padding:0}
  .cols > div:first-child{border-right:0;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px}
}

/* ---- callout margin-note (normalized from .tip/.ask cards) ----
   One treatment for every aside. NOT a card. At 390px it stays a
   left-ruled indented block (just a touch less indent), never full-bleed. */
.tip,.ask{margin:32px 0;padding:2px 0 2px 24px;border-left:2px solid var(--gold);max-width:640px}
.tip .label,.ask .label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:8px}
.tip p,.ask p{margin:0;color:var(--cream);font-size:16px}
@media(max-width:560px){ .tip,.ask{padding-left:18px} }

/* ---- TABLE: reference instrument, borderless, steps wide ----- */
.table-wrap{overflow-x:auto;margin:44px 0}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
caption{caption-side:top;text-align:left;padding:0 0 20px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:21px;color:var(--cream)}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1.5px solid var(--gold)}
thead th.col-drinqly{color:var(--gold-text)}
tbody th{color:var(--cream);font-weight:500}
tbody td{color:var(--muted)}
td.yes{color:var(--cream)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.col-drinqly{border-left:1px solid var(--line)}
td.col-drinqly.yes{color:var(--gold-text);font-weight:600}
td.col-drinqly.yes::before{content:"\2713\00a0\00a0";color:var(--gold)}

/* ---- interactive chooser: margin note, text toggles ---------- */
.widget{margin:44px 0;padding:2px 0 2px 24px;border-left:2px solid var(--gold);max-width:580px}
.widget .label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:8px}
.widget h3{margin:0 0 16px;font-size:22px;font-weight:500}
.toggle{display:flex;gap:20px;margin:6px 0 6px;flex-wrap:wrap}
.toggle button{background:none;color:var(--muted);border:0;border-bottom:1.5px solid transparent;border-radius:0;padding:4px 0;font:inherit;font-size:16px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:8px}
.toggle button:hover{color:var(--cream);border-bottom-color:var(--line)}
.toggle button.on{color:var(--gold-text);border-bottom-color:var(--gold);font-weight:600}
/* spot-art: optional icon before a toggle label */
.toggle button img{width:22px;height:22px;object-fit:contain;opacity:.8;flex:none}
.toggle button.on img{opacity:1}
/* Toggle subtitle variant (see DESIGN_articles.md): an optional one-line
   qualifier under a toggle label. Use only when the label alone is ambiguous. */
.toggle button small{display:block;margin-top:3px;font-size:13px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--muted)}
.verdict{margin-top:16px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:19px;color:var(--cream);line-height:1.45;min-height:1.45em}
.verdict .g{color:var(--gold-text);font-style:normal}
.widget p{font-size:15px;color:var(--muted);margin:14px 0 0;font-style:normal}

/* ---- FAQ ----------------------------------------------------- */
details{border-bottom:1px solid var(--line);padding:6px 0}
details summary{cursor:pointer;list-style:none;padding:16px 0;font-family:"Fraunces",Georgia,serif;font-size:20px;color:var(--cream);display:flex;justify-content:space-between;gap:12px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--gold-text);font-size:24px;line-height:1}
details[open] summary::after{content:"\2013"}
details .a{padding:0 0 18px;color:var(--muted);font-size:17px}

/* ---- spot-art: footer/masthead motif strip -------------------- */
.motif-strip{display:flex;align-items:center;justify-content:center;gap:32px;padding:0;margin:56px 0 0}
.motif-strip img{width:32px;height:32px;object-fit:contain;opacity:.7;filter:saturate(.75)}
@media(max-width:620px){ .motif-strip{gap:22px} .motif-strip img{width:26px;height:26px} }

/* ---- CTA: hairline band, download Drinqly -------------------- */
.cta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 0;text-align:center;margin:56px 0 0}
.cta .tagline{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:16px}
.cta h2{font-size:clamp(30px,5.2vw,46px);margin:0 0 12px}
.cta .sub{font-size:16px;color:var(--muted);margin:0 auto 26px;max-width:40ch;font-family:"Fraunces",Georgia,serif;font-style:italic}
.cta a.btn{display:inline-block;background:var(--gold);color:#fff;font-weight:700;padding:15px 34px;border-radius:999px;font-size:16px}
.cta a.btn:hover{text-decoration:none;filter:brightness(1.06)}
.cta .more{display:block;margin-top:18px;font-size:14px;letter-spacing:.02em;color:var(--muted)}

/* ---- related + footer ---------------------------------------- */
.related{border-top:1px solid var(--line);padding-top:28px;margin-top:56px}
.related .label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:12px}
.related a{display:block;font-family:"Fraunces",Georgia,serif;font-size:19px;color:var(--cream);margin:12px 0}
.related a:hover{color:var(--gold-text);text-decoration:none}

footer.post{border-top:1px solid var(--line);margin-top:52px;padding:28px 0 60px;font-size:13px;color:var(--muted)}
@media(max-width:560px){ body{font-size:17px} .quick-answer p{font-size:20px} .lead::first-letter{font-size:4.2em} }