/* ======================================================================
   PinAuto v2 editorial template — niche-agnostic, token-driven.
   Ported from Claude Design handoff (2026-05-09).
   Base tokens (primary/secondary/accent/bg/text + 2 fonts) come from the niche.
   ~25 derived tokens (text hierarchy, surfaces, rules, radii, shadows, spacing,
   type scale) are computed from the base via color-mix() in theme.ts.
   Mood-conditional tweaks live under [data-mood="..."] selectors.
====================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}
body{margin:0;font-family:var(--font-body);font-size:var(--t-body);line-height:1.65;color:var(--text);background:var(--surface);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","calt"}
::selection{background:color-mix(in srgb,var(--accent) 65%,var(--bg));color:var(--text-strong)}
img{max-width:100%;height:auto;display:block}

a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--primary) 35%,transparent);transition:text-decoration-color .2s ease}
a:hover{text-decoration-color:currentColor}

:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}

.container{max-width:1200px;margin:0 auto;padding:0 var(--s-4)}
@media(min-width:768px){.container{padding:0 var(--s-6)}}
@media(min-width:1080px){.container{padding:0 var(--s-7)}}
.measure{max-width:var(--measure);margin-left:auto;margin-right:auto}

/* ===== Type ============================================================== */
h1,h2,h3,h4{margin:0;color:var(--text-strong)}
h1,.h1{font-family:var(--font-heading);font-weight:600;font-size:var(--t-h1);line-height:1.05;letter-spacing:-.02em}
h2,.h2{font-family:var(--font-heading);font-weight:600;font-size:var(--t-h2);line-height:1.15;letter-spacing:-.015em}
h3,.h3{font-family:var(--font-body);font-weight:600;font-size:var(--t-h3);line-height:1.3;letter-spacing:-.005em}
h4,.h4{font-family:var(--font-body);font-weight:600;font-size:var(--t-h4);line-height:1.4}
.display{font-family:var(--font-heading);font-weight:600;font-size:var(--t-display);line-height:.95;letter-spacing:-.025em;color:var(--text-strong)}
@media(min-width:880px){h1,.h1{font-size:56px}.display{font-size:84px}h2,.h2{font-size:36px}}
p{margin:0 0 1em;color:var(--text)}
strong{font-weight:700;color:var(--text-strong)}
.caption{font-size:var(--t-caption);color:var(--text-subtle)}
.lede{font-size:19px;line-height:1.55;color:var(--text);max-width:var(--measure)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin:0 0 var(--s-3)}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor}

/* ===== Header ============================================================ */
.site-header{background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-3) 0;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-strong);font-family:var(--font-heading);font-weight:600;font-size:22px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;flex-shrink:0}
.brand:hover{text-decoration:none;color:var(--text-strong)}
.brand-logo{height:32px;max-width:140px;width:auto;object-fit:contain;display:block;border-radius:var(--r-sm)}
.brand-monogram{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-md);background:var(--primary);color:var(--text-on-primary);font-family:var(--font-heading);font-weight:700;font-size:18px}
.brand-monogram svg{width:32px;height:32px;display:block}
.brand-name{white-space:nowrap}
.nav{display:flex;align-items:center;gap:var(--s-5)}
.nav a{color:var(--text);text-decoration:none;font-size:14.5px;font-weight:500}
.nav a:hover{color:var(--primary)}
.nav-toggle{width:44px;height:44px;border:1px solid var(--rule);background:transparent;border-radius:var(--r-md);display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--text);padding:0}
.nav-toggle:hover{border-color:var(--rule-strong)}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;margin:3px 0}

/* ===== Buttons =========================================================== */
.hero-cta,.section-link,.back-link{font-family:var(--font-body)}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-md);font-family:var(--font-body);font-size:14.5px;font-weight:500;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .12s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--text-on-primary)}
.btn-primary:hover{background:color-mix(in srgb,var(--primary) 88%,var(--text));color:var(--text-on-primary);text-decoration:none}
.btn-outline{background:transparent;color:var(--text-strong);border-color:var(--rule-strong)}
.btn-outline:hover{background:color-mix(in srgb,var(--surface) 88%,var(--text));text-decoration:none}
.btn-ghost{background:transparent;color:var(--text);padding:0 12px}
.btn-ghost:hover{background:color-mix(in srgb,var(--surface) 88%,var(--text));text-decoration:none}
.btn-lg{height:52px;padding:0 22px;font-size:15.5px}

/* ===== Hero ============================================================== */
.hero{position:relative;padding:var(--s-7) 0 var(--s-8);overflow:hidden}
@media(min-width:880px){.hero{padding:var(--s-9) 0}}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media(min-width:880px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:var(--s-7);align-items:center}}
.hero-inner h1{font-size:var(--t-display)}
.hero-eyebrow{margin-bottom:var(--s-3)}
.hero-sub{font-size:19px;line-height:1.55;color:var(--text);max-width:var(--measure);margin:var(--s-4) 0 0}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6);font-size:13px;color:var(--text-subtle)}
.hero-figure{margin:0;aspect-ratio:4/5;border-radius:var(--r-3);overflow:hidden;position:relative;box-shadow:var(--shadow-md);background:var(--surface)}
.hero-figure img{width:100%;height:100%;object-fit:cover}
.hero-figure .frame{position:absolute;inset:var(--s-3);border:1px solid color-mix(in srgb,white 45%,transparent);border-radius:calc(var(--r-3) - 4px);pointer-events:none}
.hero-figure figcaption{position:absolute;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);color:#fff;font-size:var(--t-caption);opacity:.92;display:flex;align-items:center;gap:8px}
.hero-cta{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:var(--text-on-primary);padding:14px 28px;border-radius:var(--r-pill);font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;box-shadow:var(--shadow-sm)}
.hero-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--text-on-primary);background:color-mix(in srgb,var(--primary) 92%,black);text-decoration:none}
.hero-cta span{transition:transform .2s ease}
.hero-cta:hover span{transform:translateX(4px)}

/* Pin save pill — floating on top of hero / featured imagery */
.pin-pill{position:absolute;top:var(--s-3);right:var(--s-3);background:#fff;color:#E60023;border-radius:999px;padding:6px 12px 6px 8px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:4px;box-shadow:0 4px 12px rgba(0,0,0,0.18);text-decoration:none;border:0}
.pin-pill:hover{background:#fff;color:#E60023;text-decoration:none}

/* ===== Featured story ==================================================== */
.featured{padding:var(--s-6) 0}
.featured-card{display:grid;grid-template-columns:1fr;gap:var(--s-5);align-items:center;color:inherit;text-decoration:none}
@media(min-width:880px){.featured-card{grid-template-columns:1.1fr 1fr;gap:var(--s-6);padding:var(--s-6);background:var(--surface-raised);border:1px solid var(--rule);border-radius:var(--r-xl);transition:border-color .2s ease,transform .25s ease,box-shadow .25s ease}.featured-card:hover{border-color:var(--rule-strong);transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none;color:inherit}}
.featured-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;max-height:380px;background:var(--surface)}
.featured-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.featured-card:hover .featured-img img{transform:scale(1.04)}
.featured-body h2{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;margin:0 0 var(--s-3)}
.featured-body p{color:var(--text-muted);font-size:1rem;margin:0 0 var(--s-4);line-height:1.6}
.featured-meta{font-size:.78rem;color:var(--primary);text-transform:uppercase;letter-spacing:.14em;font-weight:600}

/* ===== Section heading + magazine grid =================================== */
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--s-4);margin:0 0 var(--s-5);padding-bottom:var(--s-3);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.section-heading .right a,.section-link{color:var(--text-muted);font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.section-heading .right a:hover,.section-link:hover{color:var(--primary)}
.section-link span{transition:transform .2s ease}
.section-link:hover span{transform:translateX(4px)}

.latest{padding:var(--s-7) 0 var(--s-8)}

/* Magazine grid — 1col → 2col → 6-col span system on desktop */
.post-grid,.mag-grid{display:grid;grid-template-columns:1fr;gap:var(--s-6) var(--s-5)}
@media(min-width:720px){.post-grid,.mag-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.post-grid,.mag-grid{grid-template-columns:repeat(6,1fr)}.mag-grid > .span-2,.post-grid > .span-2{grid-column:span 2}.mag-grid > .span-3,.post-grid > .span-3{grid-column:span 3}.mag-grid > .span-4,.post-grid > .span-4{grid-column:span 4}.mag-grid > .span-6,.post-grid > .span-6{grid-column:span 6}}

/* Default span when no explicit span class — keeps simple grids working */
.post-grid > .post-card:not([class*="span-"]){grid-column:span 1}
@media(min-width:1080px){.post-grid > .post-card:not([class*="span-"]){grid-column:span 2}}

/* ===== Post card variants ================================================ */
.post-card{display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none;color:inherit}
.post-card:hover{text-decoration:none;color:inherit}
.post-card-link{display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none;color:inherit}
.post-card-link:hover{text-decoration:none;color:inherit}
.post-card-img{aspect-ratio:4/5;border-radius:var(--r-3);overflow:hidden;background:var(--surface)}
.post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-img-placeholder{background:linear-gradient(135deg,var(--secondary) 0%,var(--accent) 100%);position:relative;display:grid;place-items:center;opacity:1}
.post-card-img-letter{font-family:var(--font-heading);font-weight:700;font-size:clamp(48px,8vw,96px);line-height:1;color:color-mix(in srgb, var(--bg) 92%, white);letter-spacing:-.04em;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.hero-figure-placeholder,.post-hero-placeholder{background:linear-gradient(135deg,var(--secondary) 0%,var(--accent) 100%);position:relative;display:grid;place-items:center;border-radius:var(--r-3);aspect-ratio:4/5;overflow:hidden}
.post-hero-placeholder{aspect-ratio:16/10}
.hero-figure-placeholder .post-card-img-letter,.post-hero-placeholder .post-card-img-letter{font-size:clamp(96px,14vw,180px)}
.post-card-body{padding:0}
.post-card h3{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.012em;color:var(--text-strong);margin:0}
.post-card p,.post-card .excerpt{color:var(--text-muted);font-size:15px;line-height:1.55;max-width:38ch;margin:0}
.post-card .meta,.post-meta-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-subtle)}
.post-card .meta .dot,.post-meta-row .dot{width:3px;height:3px;border-radius:999px;background:currentColor;opacity:.5}
.post-date{color:var(--primary);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.post-card:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--primary)}

.post-card--feature{gap:var(--s-4)}
.post-card--feature .post-card-img{aspect-ratio:16/10;max-height:420px}
.post-card--feature h3{font-size:clamp(28px,2.4vw + 8px,42px);line-height:1.05}
.post-card--text{background:var(--surface-raised);border:1px solid var(--rule);padding:var(--s-5);border-radius:var(--r-3)}
.post-card--text .post-card-img{display:none}
.post-card--horizontal{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s-4);align-items:center}
.post-card--horizontal .post-card-img{aspect-ratio:4/5}

/* tag pill (used on post cards + chip rows) */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--accent-soft);color:var(--text-strong);font-size:12px;font-weight:500;letter-spacing:.02em;text-decoration:none;border:1px solid transparent}
.tag:hover{background:color-mix(in srgb,var(--primary) 18%,var(--bg));text-decoration:none;color:var(--text-strong)}

/* ===== Page header / blog index ========================================== */
.page-header{padding:var(--s-7) 0 var(--s-6);border-bottom:1px solid var(--rule)}
.page-header h1{margin:0 0 var(--s-3)}

/* ===== Filter chip row =================================================== */
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;font-size:13.5px;color:var(--text);background:transparent;border:1px solid var(--rule);text-decoration:none}
.chip:hover{border-color:var(--rule-strong);text-decoration:none;color:var(--text)}
.chip.active{background:var(--text-strong);color:var(--bg);border-color:var(--text-strong)}

/* ===== Post hero ========================================================= */
/* Hero matches the article container width so it sits visually centered with
   the body text underneath, not stretched edge-to-edge. 3:2 ratio keeps more of
   square source images visible than 16:9 (which crops 30%+ top/bottom). */
.post-hero{position:relative;margin:0 auto var(--s-6);padding:0;overflow:hidden;background:var(--surface);aspect-ratio:3/2;max-width:1100px;border-radius:var(--r-3)}
.post-hero img{width:100%;height:100%;object-fit:cover;object-position:center}
.pin-save{position:absolute;top:var(--s-3);right:var(--s-3);background:#fff;color:#E60023;border-radius:999px;padding:8px 14px 8px 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.18);text-decoration:none;border:0}
.pin-save:hover{transform:scale(1.04);background:#fff;color:#E60023;text-decoration:none}

/* Post container: keep the parent .container's max-width + horizontal padding so
   breadcrumbs / header / body never touch the browser edge on any viewport. The
   wide cap accommodates pull-quotes and body images that escape the text column. */
.post-container{padding:var(--s-7) var(--s-4) var(--s-8);max-width:1100px}
@media(min-width:768px){.post-container{padding:var(--s-7) var(--s-6) var(--s-8)}}
@media(min-width:1080px){.post-container{padding:var(--s-8) var(--s-7) var(--s-8)}}
.post-container .breadcrumbs{margin:0 auto var(--s-5)}
.breadcrumbs,.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-subtle);max-width:var(--measure);margin:0 auto var(--s-5)}
.breadcrumbs a,.crumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover,.crumbs a:hover{color:var(--text-strong)}
.breadcrumbs span,.crumbs .sep{margin:0 4px;color:var(--text-faint)}

.post-header{max-width:var(--measure);margin:0 auto var(--s-6);text-align:left}
.post-header h1{font-family:var(--font-heading);font-weight:600;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.1;margin:0 0 var(--s-4);letter-spacing:-.02em;color:var(--text-strong)}
.post-meta{color:var(--text-subtle);font-size:13.5px;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tag-row{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tag-chip{font-family:var(--font-body);font-size:12px;padding:5px 12px;border-radius:999px;background:var(--accent-soft);color:var(--text-strong);text-decoration:none;letter-spacing:.02em;transition:background .15s ease,color .15s ease}
.tag-chip:hover{background:var(--primary);color:var(--text-on-primary);text-decoration:none}

/* ===== Editorial article body ============================================ */
.post-body{font-size:18px;line-height:1.75;color:var(--text)}
.post-body > *{max-width:var(--measure);margin-left:auto;margin-right:auto}
.post-body p{margin:0 0 1.4em}
/* Images escape the narrow text column for Pinterest-first visual impact —
   they go to a wider "media" measure (~960px) on desktop, full width on mobile.
   Caption-style alt text stays in the column below by living inside <p>. */
.post-body p:has(> picture:only-child),
.post-body p:has(> img:only-child){max-width:var(--measure-wide);margin:1.8em auto}
.post-body picture,.post-body p > picture{display:block;width:100%}
.post-body picture img,.post-body p > picture img{width:100%;height:auto;border-radius:var(--r-3);box-shadow:var(--shadow-sm)}
.post-body p:first-of-type::first-letter{font-family:var(--font-heading);font-size:4.4em;font-weight:600;float:left;line-height:.85;margin:.06em .1em 0 -.05em;color:var(--primary)}
.post-body h2{font-family:var(--font-heading);font-weight:600;font-size:clamp(26px,2vw + 12px,34px);margin:2em 0 .6em;letter-spacing:-.012em;color:var(--text-strong)}
.post-body h3{font-family:var(--font-heading);font-weight:600;font-size:clamp(20px,1vw + 12px,24px);margin:1.6em 0 .4em;color:var(--text-strong)}
.post-body a{color:var(--text-strong);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--primary);text-decoration-thickness:2px}
.post-body ul,.post-body ol{padding-left:1.4em;margin:0 0 1.4em}
.post-body li{margin:.4em 0}
.post-body ol{counter-reset:ol;padding-left:0;list-style:none}
.post-body ol > li{counter-increment:ol;position:relative;padding-left:2.2em;margin:.6em 0}
.post-body ol > li::before{content:counter(ol,decimal-leading-zero);position:absolute;left:0;top:.06em;font-family:var(--font-heading);font-weight:600;color:var(--primary);font-size:1.05em}
.post-body hr{border:0;height:1px;background:var(--rule);margin:2.4em 0}

/* Pull-quote escapes the column on desktop */
.post-body blockquote,.post-body .pullquote blockquote{font-family:var(--font-heading);font-style:italic;font-size:clamp(22px,1.4vw + 12px,30px);line-height:1.25;letter-spacing:-.012em;color:var(--text-strong);margin:1.8em 0;padding:0 0 0 1.2em;border-left:2px solid var(--primary);position:relative}
.post-body blockquote::before,.post-body .pullquote blockquote::before{content:"\201C";position:absolute;left:-.05em;top:-.35em;font-size:2.6em;color:var(--primary);line-height:1}
.post-body cite{display:block;font-style:normal;font-family:var(--font-body);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-subtle);margin-top:14px;padding-left:1.2em}
@media(min-width:1080px){.post-body .pullquote{max-width:calc(var(--measure) + 18em);margin-left:-9em}}

/* Image captions */
.post-body figure{margin:2.2em auto;max-width:100%}
@media(min-width:1080px){.post-body figure.full{max-width:calc(var(--measure) + 18em);margin-left:-9em}}
.post-body figure img{width:100%;border-radius:var(--r-3);aspect-ratio:16/10;object-fit:cover;margin:0}
.post-body figcaption{display:flex;gap:var(--s-3);font-size:13.5px;color:var(--text-subtle);margin-top:var(--s-2);padding-left:var(--s-3);border-left:1px solid var(--rule-strong);font-style:italic}
.post-body figcaption .credit{margin-left:auto;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--text-faint)}

/* Recipe / data tables in article body */
.post-body table{width:100%;border-collapse:collapse;margin:2em auto;max-width:var(--measure);font-size:16px}
.post-body th,.post-body td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule)}
.post-body th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle);font-weight:600}
.post-body tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg) 80%,var(--text))}

/* Code */
.post-body pre,.post-body code{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.post-body pre{background:var(--text-strong);color:var(--bg);padding:var(--s-4) var(--s-5);border-radius:var(--r-2);font-size:13.5px;line-height:1.6;overflow-x:auto;margin:2em auto;max-width:var(--measure)}
.post-body :not(pre) > code{background:var(--accent-soft);padding:2px 6px;border-radius:var(--r-1);font-size:.92em;color:var(--text-strong)}

/* Callout */
.callout{max-width:var(--measure);margin:2em auto;padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);background:var(--accent-soft);border-left:3px solid var(--primary);border-radius:0 var(--r-2) var(--r-2) 0;display:grid;grid-template-columns:28px 1fr;gap:var(--s-3)}
.callout .ic{width:24px;height:24px;color:var(--primary);margin-top:2px}
.callout .label{font-family:var(--font-heading);font-style:italic;font-size:18px;font-weight:600;color:var(--text-strong);margin-bottom:4px}
.callout p{margin:0;font-size:16.5px}
.callout ul{margin:8px 0 0 0;padding-left:1.2em;font-size:16.5px}

/* Numbered list-card (for listicles / recipe roundups) */
.list-card{display:grid;grid-template-columns:1fr;gap:var(--s-4);border:1px solid var(--rule);border-radius:var(--r-3);background:var(--surface-raised);margin:var(--s-5) auto;max-width:var(--measure);overflow:hidden}
@media(min-width:720px){.list-card{grid-template-columns:220px 1fr}}
.list-card .post-card-img,.list-card .img{aspect-ratio:4/5}
.list-card .body{padding:var(--s-5)}
@media(min-width:720px){.list-card .body{padding-left:0}}
.list-card .num{font-family:var(--font-heading);font-weight:600;color:var(--primary);font-size:14px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.list-card .num::after{content:"";width:24px;height:1px;background:var(--primary)}
.list-card h3{font-family:var(--font-heading);font-size:26px;line-height:1.15;margin:6px 0 0;color:var(--text-strong)}
.list-card p{margin:8px 0 14px;color:var(--text-muted)}
.list-card .read{font-weight:500;font-size:14px;color:var(--text-strong);display:inline-flex;align-items:center;gap:6px}

/* Affiliates block */
.affiliate-recs,.affiliates{max-width:var(--measure);margin:var(--s-7) auto;padding:var(--s-5);border:1px solid var(--rule);border-radius:var(--r-3);background:var(--surface-raised)}
.affiliate-recs .eyebrow,.affiliates .eyebrow{margin-bottom:var(--s-3)}
.affiliate-disclosure,.affiliates .disclose{font-size:12.5px;color:var(--text-subtle);font-style:italic;display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--surface) 88%,var(--text));padding:4px 10px;border-radius:999px;margin:0 0 var(--s-3)}
.affiliate-recs h4,.affiliates h4{font-family:var(--font-heading);font-size:24px;margin:12px 0 4px;color:var(--text-strong)}
.affiliate-recs ul{list-style:none;margin:0;padding:0}
.affiliate-recs li,.affiliates .item{padding:var(--s-3) 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:64px 1fr auto;gap:var(--s-3);align-items:center}
.affiliate-recs li:first-child,.affiliates .item:first-of-type{border-top:0}
.affiliate-recs a{color:var(--text);text-decoration:none}
.affiliate-recs a strong{display:block;font-size:15px;color:var(--text-strong)}
.affiliate-recs a:hover strong{color:var(--primary)}
.inline-affiliate{color:var(--primary);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.inline-affiliate:hover{text-decoration-style:solid}

/* Pin-this nudge (replaces comments) */
.pin-nudge{margin:var(--s-7) auto;max-width:var(--measure);padding:var(--s-6);background:var(--text-strong);color:var(--bg);border-radius:var(--r-3);display:grid;grid-template-columns:1fr;gap:var(--s-4);align-items:center}
@media(min-width:720px){.pin-nudge{grid-template-columns:140px 1fr auto}}
.pin-nudge .pin-thumb{width:120px;aspect-ratio:2/3;border-radius:var(--r-2);background:linear-gradient(135deg,var(--secondary),var(--primary));overflow:hidden}
.pin-nudge .pin-thumb picture,.pin-nudge .pin-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pin-nudge h3{font-family:var(--font-heading);color:var(--bg);font-size:24px;margin:0}
.pin-nudge p{margin:6px 0 0;color:color-mix(in srgb,var(--bg) 70%,var(--text));font-size:15px}
.btn-pin{background:#E60023;color:#fff;border:0;height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 22px -8px rgba(230,0,35,.55);text-decoration:none}
.btn-pin:hover{background:#c00020;color:#fff;text-decoration:none}

/* Author byline */
.byline{display:flex;align-items:center;gap:var(--s-3)}
.byline .photo{width:44px;height:44px;border-radius:999px;background:linear-gradient(135deg,var(--secondary),var(--primary));flex-shrink:0}
.byline .name{font-weight:600;color:var(--text-strong);font-size:14.5px}
.byline .meta{font-size:13px;color:var(--text-subtle);display:flex;gap:8px;align-items:center}
.byline .meta .dot{width:3px;height:3px;border-radius:999px;background:currentColor;opacity:.5}

.post-footer{max-width:var(--measure);margin:var(--s-7) auto 0;padding:var(--s-5) 0;border-top:1px solid var(--rule)}
.back-link{font-size:14px;color:var(--primary);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.back-link:hover{text-decoration:none}

/* ===== Related =========================================================== */
.related{padding:var(--s-8) 0 var(--s-7);background:color-mix(in srgb,var(--bg) 92%,var(--text));margin-top:var(--s-7)}
.related .eyebrow{margin:0 0 var(--s-5)}
.related-grid{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media(min-width:720px){.related-grid{grid-template-columns:repeat(3,1fr)}}

/* ===== Static / About pages ============================================== */
.static-page{max-width:var(--measure);margin:0 auto;padding:var(--s-7) var(--s-4) var(--s-8)}
.static-body{font-size:1.08rem;line-height:1.75;color:var(--text)}
.static-body h2{margin:2em 0 .6em;font-size:1.5rem;color:var(--text-strong)}
.static-body .lede{font-size:1.3rem;line-height:1.5;color:var(--text-muted);margin:0 0 var(--s-5);font-family:var(--font-heading);font-weight:400}
.static-body .about-topics{padding:var(--s-5);background:var(--surface);border-radius:var(--r-md);font-size:.95rem;color:var(--text-muted)}

/* ===== Empty states ====================================================== */
.empty-state{text-align:center;padding:var(--s-9) var(--s-5);max-width:640px;margin:0 auto}
.empty-state h1{margin:0 0 var(--s-4)}
.empty-state p{font-size:1.1rem;color:var(--text-subtle);margin:0}
.empty-block{padding:var(--s-6) 0}

/* ===== Footer ============================================================ */
.site-footer{border-top:1px solid var(--rule);padding:var(--s-7) 0 var(--s-6);margin-top:var(--s-9);background:color-mix(in srgb,var(--bg) 90%,var(--text));color:var(--text)}
.site-footer .container{max-width:1200px}
.footer-grid{display:grid;gap:var(--s-6);grid-template-columns:1fr;margin-bottom:var(--s-7)}
@media(min-width:880px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand{max-width:44ch}
.footer-logo{height:36px;width:auto;margin-bottom:var(--s-3)}
.footer-tagline{font-size:14.5px;line-height:1.55;color:var(--text-muted);margin:var(--s-3) 0 0}
.footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle);font-weight:600;margin:0 0 var(--s-3)}
.footer-col a{color:var(--text);display:block;padding:4px 0;font-size:14.5px;text-decoration:none}
.footer-col a:hover{color:var(--primary);text-decoration:none}
.footer-bottom{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;font-size:13px;color:var(--text-subtle)}
.footer-bottom p{margin:0;color:inherit}

/* ===== Ad slots ========================================================== */
.hb-slot{text-align:center;margin:0 auto;max-width:1200px;padding:var(--s-3) 0}
.hb-slot:empty{display:none}
.hb-slot-inline{max-width:var(--measure);margin:var(--s-5) auto}

/* ===== Cookie banner ===================================================== */
.cookie-banner{position:fixed;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);background:var(--text-strong);color:var(--bg);padding:var(--s-3) var(--s-4);border-radius:var(--r-3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);box-shadow:var(--shadow-lg);z-index:75;max-width:980px;margin:0 auto;transition:opacity .25s ease,transform .25s ease}
@media(min-width:720px){.cookie-banner{left:var(--s-5);right:var(--s-5);bottom:var(--s-5)}}
.cookie-banner.is-hidden{opacity:0;transform:translateY(20px);pointer-events:none}
.cookie-banner p{margin:0;flex:1 1 260px;font-size:14px;color:color-mix(in srgb,var(--bg) 88%,transparent)}
.cookie-banner p a{color:var(--bg)}
.cookie-actions{display:flex;gap:var(--s-2)}
.cookie-actions button{border:0;padding:10px 18px;border-radius:var(--r-md);cursor:pointer;font-weight:600;font-size:13.5px;transition:background .15s,color .15s}
#cookie-accept{background:var(--bg);color:var(--text-strong)}
#cookie-accept:hover{background:color-mix(in srgb,var(--bg) 88%,var(--text))}
#cookie-decline{background:transparent;color:var(--bg);border:1px solid color-mix(in srgb,var(--bg) 25%,transparent)}
#cookie-decline:hover{background:color-mix(in srgb,var(--bg) 12%,transparent)}

/* ===== Mobile drawer ===================================================== */
.drawer{position:fixed;inset:0;background:var(--bg);z-index:80;display:none;flex-direction:column}
.drawer.is-open{display:flex}
.drawer-header{padding:var(--s-3) var(--s-4);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}
.drawer nav{flex:1;padding:var(--s-5) var(--s-4);display:flex;flex-direction:column;gap:var(--s-1)}
.drawer nav a{font-family:var(--font-heading);font-size:32px;color:var(--text-strong);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--rule)}
.drawer nav a:hover{color:var(--primary);text-decoration:none}
.drawer-feet{padding:var(--s-5) var(--s-4);border-top:1px solid var(--rule);display:flex;gap:var(--s-2)}

/* ===== Floating Pin Save (post page) ===================================== */
.floating-pin{position:fixed;right:var(--s-4);bottom:var(--s-4);z-index:70;display:none}
.floating-pin.is-visible{display:block}

/* ===== Author block (About page) ========================================= */
.author-block{display:grid;grid-template-columns:120px 1fr;gap:var(--s-5);align-items:start;padding:var(--s-5);background:var(--surface);border-radius:var(--r-lg);margin:var(--s-6) 0}
.author-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--surface-raised);border:1px solid var(--rule)}
.author-photo-monogram{display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:2.4rem;font-weight:700;color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.author-name{margin:0 0 var(--s-2);font-size:1.25rem}
.author-bio{margin:0 0 var(--s-3);color:var(--text-muted);font-size:.95rem;line-height:1.55}
.author-expertise{margin:0 0 var(--s-2);font-size:.9rem;color:var(--text-muted)}
.author-sameas{margin:0;font-size:.85rem}
.author-sameas a{color:var(--primary);margin-right:var(--s-2)}

/* ===== Newsletter ======================================================== */
.newsletter-card,.newsletter{max-width:var(--measure);margin:var(--s-7) auto;padding:var(--s-6);background:color-mix(in srgb,var(--bg) 90%,var(--text));border-radius:var(--r-3);display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media(min-width:880px){.newsletter-card,.newsletter{grid-template-columns:1fr 1fr;padding:var(--s-7);align-items:center;max-width:1080px}}
.newsletter-inner{text-align:left}
.newsletter-card .accent,.newsletter .accent{height:6px;width:56px;background:var(--accent);border-radius:var(--r-1);margin-bottom:var(--s-2)}
.newsletter-heading{margin:var(--s-2) 0 var(--s-3);font-family:var(--font-heading);font-size:clamp(24px,1.6vw + 12px,32px);color:var(--text-strong)}
.newsletter-sub{margin:0 0 var(--s-4);color:var(--text-muted);font-size:15px;line-height:1.55;max-width:50ch}
.newsletter-form{display:grid;gap:var(--s-2);grid-template-columns:1fr auto;max-width:460px}
.newsletter-form input[type=email]{height:48px;padding:0 14px;border-radius:var(--r-2);border:1px solid var(--rule-strong);font-family:inherit;font-size:15px;color:var(--text-strong);background:var(--bg);min-width:0}
.newsletter-form input[type=email]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.newsletter-form button{height:48px;padding:0 22px;border-radius:var(--r-2);border:0;background:var(--primary);color:var(--text-on-primary);font-weight:600;font-size:.95rem;cursor:pointer;transition:background .15s ease}
.newsletter-form button:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 88%,black)}
.newsletter-form button:disabled{opacity:.55;cursor:not-allowed}
.newsletter-form .promise{font-size:13px;color:var(--text-subtle);margin:0;display:inline-flex;align-items:center;gap:6px;grid-column:1 / -1}
.newsletter-status{margin-top:var(--s-3);font-size:.9rem;color:var(--text-muted);min-height:1.2em}

/* Internal links */
.post-body a.internal-link{text-decoration-style:dotted;text-underline-offset:2px}

/* ===== Mood-conditional adjustments ====================================== */
[data-mood="minimalist"] .post-card{border-radius:0}
[data-mood="minimalist"] .post-card-img{border-radius:0}
[data-mood="minimalist"] .featured-card{border-radius:0;background:var(--bg)}
[data-mood="minimalist"] .callout{border-radius:0}
[data-mood="magazine"] .post-card{border-radius:var(--r-1)}
[data-mood="magazine"] .post-card-img{border-radius:var(--r-2)}
[data-mood="vibrant"] .post-card-img{border-radius:var(--r-4)}

/* ===== Responsive ======================================================== */
@media(max-width:880px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .hero-figure{aspect-ratio:4/5}
  .post-grid > *,.mag-grid > *,.post-grid > .post-card:not([class*="span-"]){grid-column:auto}
  .related-grid{grid-template-columns:1fr}
  .post-container{padding:var(--s-6) var(--s-4) var(--s-7)}
  .post-body{font-size:17px;line-height:1.7}
  .post-body p:first-of-type::first-letter{font-size:3.2em}
  .post-card--horizontal{grid-template-columns:1fr;gap:var(--s-3)}
  .pin-nudge{padding:var(--s-5)}
  .footer-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .section-heading{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .brand-name{display:none}
  .post-hero{aspect-ratio:4/3;max-height:none}
}

/* ============================================================================
   Structured-content modules · ported from Claude Design handoff 2026-05-17
   All selectors prefixed .mod-* — never collide with article chrome.
   Tokens (--mod-accent, --mod-surface, --mod-rule, --t-metric) live in theme.ts.
   ========================================================================== */
/* Modules always sit inside .post-body — they share its column width and break
   out only where explicitly noted. ----------------------------------------- */
.post-body [class^="mod-"] { margin: var(--s-6) auto; }
.post-body [class^="mod-"]:first-child { margin-top: 0; }
.post-body [class^="mod-"]:last-child  { margin-bottom: 0; }

/* Common bits ---------------------------------------------------------------- */
.mod-eyebrow {
  font-family: var(--font-mono, var(--font-body));
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.mod-eyebrow::before {
  content: ""; width: 20px; height: 1px; background: currentColor;
}
.mod-num {
  font-family: var(--font-mono, var(--font-body));
  font-weight: 600;
  color: var(--mod-accent);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   01 · Item Card  .mod-item
   The workhorse. Single item inside a listicle, comparison, or how-to.
   Holds: number, title, eyebrow, intro, chip row, detail list, steps, swaps, tags.
   Renders cleanly when any optional slot is missing.
   ========================================================================== */

.mod-item {
  background: var(--mod-surface);
  border: 1px solid var(--mod-rule);
  border-radius: var(--r-lg, 12px);
  padding: var(--s-6);
  display: grid; gap: var(--s-4);
  position: relative;
  max-width: var(--measure-wide);
}
@media (min-width: 720px) {
  .mod-item { padding: var(--s-7); }
}

.mod-item__head { display: grid; gap: var(--s-2); }
.mod-item__head .mod-num { color: var(--mod-accent); }
.mod-item__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(22px, 1.8vw + 12px, 30px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--text-strong);
  margin: 0;
}
.mod-item__intro {
  font-size: clamp(15px, 0.3vw + 14px, 17px);
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  max-width: var(--measure);
}

/* Chip row inside an item card or standalone */
.mod-chips {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: center;
  line-height: 1;
}
.mod-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;           /* was: height: 28px; padding: 0 12px */
  line-height: 1;              /* don't inherit body line-height */
  border-radius: var(--r-pill, 999px);
  background: var(--accent-soft);
  color: var(--text-strong);
  font-size: var(--t-caption);
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.mod-chip__k {
  font-family: var(--font-mono, var(--font-body));
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mod-chip__v { font-weight: 600; color: var(--text-strong); }
.mod-chip__k,
.mod-chip__v {
  line-height: 1;              /* belt + braces */
  display: inline-block;
}

/* mood tweaks */
[data-mood="minimalist"] .mod-chip {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  height: 26px;
}
[data-mood="vibrant"] .mod-chip {
  background: color-mix(in oklch, var(--mod-accent) 16%, var(--surface));
}

/* Two-column body inside a recipe-like item (detail + steps) ---------------- */
.mod-item__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 720px) {
  .mod-item__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-6); }
}
/* Force the recipe-card sub-containers to fill their grid cell, and force
   their grid items to stretch. The default justify-items value was resolving
   to a content-size instead of stretch, which collapsed the Steps column text
   to one word per line. width:100% pins the containers; the explicit
   justify-items:stretch keyword unconditionally stretches the inner items
   (including the anonymous item that wraps step text). Safe — global
   box-sizing is border-box. */
.mod-item__body,
.mod-item__group,
.mod-item__detail,
.mod-item__steps,
.mod-item__swaps { width: 100%; min-width: 0; }
.mod-item,
.mod-item__body,
.mod-item__detail,
.mod-item__steps,
.mod-item__detail li,
.mod-item__steps li,
.mod-glance__cell { justify-items: stretch; }
.mod-item__group h4 {
  font-family: var(--font-mono, var(--font-body));
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mod-accent);
  margin: 0 0 var(--s-3) 0;
  font-weight: 600;
}

/* Detail list — works as ingredients, packing items, parts list, attributes */
.mod-item__detail {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
}
.mod-item__detail li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-3);
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: var(--t-body);
  color: var(--text);
  align-items: baseline;
}
.mod-item__detail li:last-child { border-bottom: 0; }
.mod-item__detail .qty {
  font-family: var(--font-mono, var(--font-body));
  font-weight: 600;
  color: var(--text-strong);
  font-size: 14px;
  white-space: nowrap;
}
.mod-item__detail .name { color: var(--text); }
/* When a detail item has no qty, the row collapses to one column */
.mod-item__detail li:only-child,
.mod-item__detail li.is-plain { grid-template-columns: 1fr; }

/* Numbered steps */
.mod-item__steps {
  list-style: none; margin: 0; padding: 0;
  counter-reset: mod-step;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3);
}
/* Flex (not grid) for the step row: the step text is a bare text node, which
   as an anonymous GRID item does not stretch and collapses to one word per
   line. As an anonymous FLEX item it flows and wraps normally. */
.mod-item__steps li {
  counter-increment: mod-step;
  display: flex;
  gap: var(--s-3);
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
}
.mod-item__steps li::before {
  content: counter(mod-step, decimal-leading-zero);
  flex: 0 0 28px;
  font-family: var(--font-mono, var(--font-body));
  font-weight: 700;
  color: var(--mod-accent);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding-top: 1px;
}
.mod-item__steps .step-note {
  display: block;
  margin-top: 4px;
  font-style: italic;
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--text-muted);
}

/* Swaps inline list (item-card optional slot; see also dedicated .mod-swaps) */
.mod-item__swaps {
  list-style: none; margin: 0; padding: var(--s-3) 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 6px;
}
.mod-item__swaps li {
  font-size: 14px; color: var(--text);
  display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: baseline;
}
.mod-item__swaps li::before {
  content: "↔"; color: var(--mod-accent); margin-right: 4px; font-weight: 600;
}

/* Tag row at item foot */
.mod-item__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* Variant: compact (used in "Almost made the cut" and short lists) */
.mod-item.is-compact {
  padding: var(--s-4) var(--s-5);
  gap: var(--s-2);
}
.mod-item.is-compact .mod-item__title { font-size: 18px; }

/* ==========================================================================
   02 · At-a-glance Summary  .mod-glance
   Top-of-item or top-of-section metric strip. 3-5 cells with icon/label/value.
   Visual sibling to .mod-chip-row but with stronger emphasis on numbers.
   ========================================================================== */

.mod-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  /* Explicit stretch — the default align-items was leaving cells at content
     height, so the strip rendered ragged (cells of unequal height). */
  align-items: stretch;
  background: var(--mod-surface);
  border: 1px solid var(--mod-rule);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
}
.mod-glance__cell {
  padding: var(--s-4) var(--s-5);
  /* Flex column (not grid): grid was stretching the label/value/sub rows down
     the full cell height, leaving big gaps. A flex column packs them together
     at the top reliably. justify-content: flex-start is the default. */
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--mod-rule);
  border-bottom: 1px solid var(--mod-rule);
}
.mod-glance__cell:last-child { border-right: 0; }
@media (max-width: 600px) {
  .mod-glance__cell { border-right: 0; }
  .mod-glance__cell:last-child { border-bottom: 0; }
}
@media (min-width: 600px) {
  .mod-glance__cell { border-bottom: 0; }
}
.mod-glance__k {
  font-family: var(--font-mono, var(--font-body));
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mod-glance__v {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(20px, 1.4vw + 10px, 26px);
  letter-spacing: -0.012em;
  color: var(--text-strong);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mod-glance__sub {
  font-size: 12px;
  color: var(--text-subtle);
  line-height: 1.4;
}
.mod-glance--accent .mod-glance__cell:first-child { background: var(--accent-soft); }
[data-mood="minimalist"] .mod-glance { border-radius: 0; }
[data-mood="vibrant"]    .mod-glance__cell:first-child {
  background: color-mix(in oklch, var(--mod-accent) 14%, var(--surface));
}

/* ==========================================================================
   03 · Comparison Table  .mod-compare
   2-3 columns side-by-side, rows of attributes. Works for X-vs-Y articles.
   Mobile: collapses to stacked sections (one column per card).
   ========================================================================== */

.mod-compare {
  max-width: var(--measure-wide);
  border: 1px solid var(--mod-rule);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  background: var(--mod-surface);
}
.mod-compare__head {
  display: grid;
  /* first cell holds attribute label, remaining cells are the contenders */
  grid-template-columns: minmax(120px, 1fr) repeat(var(--cols, 2), minmax(0, 1.4fr));
  background: var(--surface);
  border-bottom: 1px solid var(--mod-rule);
}
.mod-compare__head .col {
  padding: var(--s-4) var(--s-5);
  border-right: 1px solid var(--mod-rule);
}
.mod-compare__head .col:last-child { border-right: 0; }
.mod-compare__head .col h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  color: var(--text-strong);
  letter-spacing: -0.008em;
  margin: 0;
}
.mod-compare__head .col .sub {
  display: block;
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
.mod-compare__head .col.winner h4 {
  display: inline-flex; align-items: center; gap: 8px;
}
.mod-compare__head .col.winner h4::after {
  content: "★ best for most";
  font-family: var(--font-mono, var(--font-body));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mod-accent);
  background: var(--accent-soft);
  padding: 3px 7px;
  border-radius: var(--r-sm, 4px);
}

.mod-compare__row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) repeat(var(--cols, 2), minmax(0, 1.4fr));
  border-top: 1px solid var(--mod-rule);
}
.mod-compare__row .cell {
  padding: var(--s-4) var(--s-5);
  border-right: 1px solid var(--mod-rule);
  font-size: 14.5px;
  color: var(--text);
  display: flex; align-items: center;
}
.mod-compare__row .cell:last-child { border-right: 0; }
.mod-compare__row .cell.attr {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  font-weight: 500;
}
.mod-compare__row:nth-child(even) .cell:not(.attr) {
  background: color-mix(in oklch, var(--surface) 70%, var(--mod-surface));
}

/* mobile: stack as cards */
@media (max-width: 720px) {
  .mod-compare__head,
  .mod-compare__row { grid-template-columns: 1fr; }
  .mod-compare__head .col,
  .mod-compare__row .cell { border-right: 0; border-bottom: 1px solid var(--mod-rule); }
  .mod-compare__row .cell.attr {
    background: var(--accent-soft);
    color: var(--text-strong);
  }
}

/* ==========================================================================
   04 · Swaps / Alternatives Grid  .mod-swaps
   3-col rows: original → swap → tradeoff. Standalone module.
   ========================================================================== */

.mod-swaps {
  max-width: var(--measure-wide);
  border: 1px solid var(--mod-rule);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
}
.mod-swaps__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  background: var(--surface);
  font-family: var(--font-mono, var(--font-body));
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--mod-rule);
}
.mod-swaps__head > div { padding: 10px var(--s-4); border-right: 1px solid var(--mod-rule); }
.mod-swaps__head > div:last-child { border-right: 0; }
.mod-swaps__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  border-top: 1px solid var(--mod-rule);
  background: var(--mod-surface);
}
.mod-swaps__row:first-child { border-top: 0; }
.mod-swaps__row > div {
  padding: var(--s-4);
  border-right: 1px solid var(--mod-rule);
  font-size: 14px;
  color: var(--text);
  display: flex; align-items: center;
}
.mod-swaps__row > div:last-child { border-right: 0; }
.mod-swaps__row .from { font-weight: 500; color: var(--text-strong); }
.mod-swaps__row .to   { font-family: var(--font-mono, var(--font-body)); font-weight: 600; color: var(--mod-accent); font-size: 13.5px; }
.mod-swaps__row .to::before { content: "→"; margin-right: 6px; opacity: .55; font-family: var(--font-body); }
.mod-swaps__row .tradeoff { color: var(--text-muted); font-style: italic; font-family: var(--font-heading); font-size: 14px; }

@media (max-width: 600px) {
  .mod-swaps__head { display: none; }
  .mod-swaps__row { grid-template-columns: 1fr; }
  .mod-swaps__row > div { border-right: 0; border-bottom: 1px dashed var(--rule); padding: 8px var(--s-4); }
  .mod-swaps__row > div:last-child { border-bottom: 0; padding-bottom: var(--s-4); }
  .mod-swaps__row .to::before { content: "Swap with → "; }
  .mod-swaps__row .tradeoff::before { content: "Trade-off · "; color: var(--text-muted); font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; }
}

/* ==========================================================================
   05 · Pro Tip  .mod-tip
   Editor's tip with left rule accent. Niche-agnostic.
   ========================================================================== */

.mod-tip {
  max-width: var(--measure);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  background: var(--accent-soft);
  border-left: 3px solid var(--mod-accent);
  border-radius: 0 var(--r-md, 8px) var(--r-md, 8px) 0;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  align-items: start;
}
.mod-tip__icon {
  width: 24px; height: 24px;
  color: var(--mod-accent);
  display: grid; place-items: center;
  margin-top: 2px;
  flex-shrink: 0;
}
.mod-tip__icon svg { width: 100%; height: 100%; }
.mod-tip__label {
  font-family: var(--font-mono, var(--font-body));
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mod-accent);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}
.mod-tip__body { font-size: 15.5px; line-height: 1.55; color: var(--text); margin: 0; }
.mod-tip__body strong { color: var(--text-strong); }
.mod-tip__byline {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--font-heading);
}
.mod-tip__byline::before { content: "— "; }

[data-mood="minimalist"] .mod-tip {
  background: transparent;
  border-radius: 0;
  border-left-width: 2px;
}
[data-mood="vibrant"] .mod-tip {
  background: color-mix(in oklch, var(--mod-accent) 18%, var(--bg));
  border-left-width: 4px;
}

/* ==========================================================================
   06 · Tag Pill Row  .mod-tags
   Small horizontal tags at the bottom of an item. Reusable everywhere.
   ========================================================================== */

.mod-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-tag {
  display: inline-flex; align-items: center; height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  font-weight: 500;
}
.mod-tag:hover { border-color: var(--rule-strong); color: var(--text-strong); }
.mod-tag::before {
  content: "#";
  color: var(--mod-accent);
  margin-right: 3px;
  font-weight: 600;
}
[data-mood="minimalist"] .mod-tag { border-radius: 0; }

/* ==========================================================================
   07 · Shopping / Packing List  .mod-list
   Collapsible, grouped by category. Print-friendly. Uses <details>.
   ========================================================================== */

.mod-list {
  max-width: var(--measure);
  background: var(--mod-surface);
  border: 1px solid var(--mod-rule);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
}
.mod-list__head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--mod-rule);
  display: flex; align-items: baseline; gap: var(--s-3);
}
.mod-list__head h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0;
}
.mod-list__count {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: auto;
}

.mod-list__group { border-bottom: 1px solid var(--mod-rule); }
.mod-list__group:last-child { border-bottom: 0; }
.mod-list__group > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.mod-list__group > summary::-webkit-details-marker { display: none; }
.mod-list__group > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-left: auto;
  transition: transform .2s;
}
.mod-list__group[open] > summary::after { transform: rotate(45deg); }
.mod-list__group > summary .n {
  font-family: var(--font-mono, var(--font-body));
  font-size: 10.5px;
  color: var(--mod-accent);
  font-weight: 700;
}

.mod-list__items {
  list-style: none; margin: 0;
  padding: 0 var(--s-5) var(--s-3);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
}
.mod-list__items li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px dashed var(--rule);
}
.mod-list__items li:last-child { border-bottom: 0; }
.mod-list__items li::before {
  content: "";
  width: 14px; height: 14px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-sm, 3px);
  margin-top: 3px;
}
.mod-list__items .meta {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11.5px;
  color: var(--text-muted);
}

[data-mood="minimalist"] .mod-list { border-radius: 0; }

/* ==========================================================================
   08 · Inline Pull-Quote  .mod-quote
   Large editorial quote that escapes the text column on desktop.
   ========================================================================== */

.mod-quote {
  max-width: var(--measure-wide);
  padding: var(--s-5) 0 var(--s-5);
  position: relative;
}
.mod-quote blockquote {
  margin: 0;
  padding: 0 0 0 var(--s-5);
  border-left: 2px solid var(--mod-accent);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 1.6vw + 12px, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.mod-quote blockquote p { margin: 0; }
.mod-quote blockquote p + p { margin-top: 0.6em; }
.mod-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--s-3);
  padding-left: var(--s-5);
}
.mod-quote cite::before { content: "— "; }

[data-mood="magazine"] .mod-quote blockquote {
  border-left: 0;
  padding-left: 0;
  text-align: center;
  max-width: 28ch;
  margin: 0 auto;
}
[data-mood="magazine"] .mod-quote cite { padding-left: 0; text-align: center; }
[data-mood="minimalist"] .mod-quote blockquote {
  border-left: 0;
  padding-left: 0;
  font-style: normal;
}
[data-mood="minimalist"] .mod-quote blockquote::before {
  content: "“"; font-size: 1.4em; line-height: 0; color: var(--mod-accent);
  display: inline-block; transform: translateY(0.2em); margin-right: 0.1em;
}

/* ==========================================================================
   09 · Step-by-step Strip  .mod-steps
   3-7 numbered cards in a horizontal row. Each holds a title + optional caption.
   On mobile, becomes a horizontal-scroll snap track for fingertip flicking.
   ========================================================================== */

.mod-steps {
  max-width: var(--measure-wide);
}
.mod-steps__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.mod-steps__head h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--text-strong);
  margin: 0;
}
.mod-steps__head .count {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mod-steps__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--s-3);
}
@media (min-width: 880px) {
  .mod-steps__track {
    grid-auto-columns: 1fr;
    overflow: visible;
  }
}
.mod-step {
  scroll-snap-align: start;
  background: var(--mod-surface);
  border: 1px solid var(--mod-rule);
  border-radius: var(--r-md, 8px);
  padding: var(--s-4);
  display: grid; gap: var(--s-2);
  position: relative;
}
.mod-step__num {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mod-accent);
  font-weight: 700;
}
.mod-step__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  color: var(--text-strong);
  letter-spacing: -0.008em;
  margin: 0;
}
.mod-step__caption {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.mod-step__thumb {
  /* When the writer attaches an optional flux-generated thumbnail */
  aspect-ratio: 4/3;
  border-radius: var(--r-sm, 4px);
  background: color-mix(in oklch, var(--mod-accent) 16%, var(--surface));
  margin-bottom: 6px;
}

/* ==========================================================================
   10 · Stat Grid  .mod-stats
   3-4 numeric facts, big and confident. Optional caption per stat.
   ========================================================================== */

.mod-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border: 1px solid var(--mod-rule);
  border-radius: var(--r-md, 8px);
  background: var(--mod-surface);
  overflow: hidden;
}
.mod-stats__cell {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-right: 1px solid var(--mod-rule);
  border-bottom: 1px solid var(--mod-rule);
  display: grid; gap: 4px;
}
.mod-stats__cell:last-child { border-right: 0; }
@media (min-width: 600px) {
  .mod-stats__cell { border-bottom: 0; }
}
@media (max-width: 600px) {
  .mod-stats__cell { border-right: 0; }
  .mod-stats__cell:last-child { border-bottom: 0; }
}
.mod-stats__v {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-metric);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--mod-accent);
  font-variant-numeric: tabular-nums;
}
.mod-stats__v .unit {
  font-size: 0.42em;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: 0;
  font-family: var(--font-mono, var(--font-body));
  font-weight: 500;
  text-transform: uppercase;
}
.mod-stats__k {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mod-stats__sub { font-size: 12.5px; color: var(--text-subtle); line-height: 1.4; }
.mod-stats__source {
  grid-column: 1/-1;
  padding: 8px var(--s-5);
  font-family: var(--font-mono, var(--font-body));
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  border-top: 1px solid var(--mod-rule);
  background: var(--surface);
}
.mod-stats__source a { color: inherit; }

/* ==========================================================================
   11 · Verdict / Final Word  .mod-verdict
   Bold concluding panel. Two columns: "Best for / Skip if".
   ========================================================================== */

.mod-verdict {
  background: var(--text-strong);
  color: var(--bg);
  border-radius: var(--r-lg, 12px);
  padding: var(--s-6);
  max-width: var(--measure-wide);
  display: grid; gap: var(--s-4);
}
@media (min-width: 720px) { .mod-verdict { padding: var(--s-7); } }
.mod-verdict__eyebrow {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--bg) 65%, var(--text-strong));
}
.mod-verdict__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 2vw + 12px, 34px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--bg);
  margin: 0;
  max-width: 28ch;
}
.mod-verdict__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid color-mix(in oklch, var(--bg) 18%, var(--text-strong));
}
@media (min-width: 600px) {
  .mod-verdict__cols { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .mod-verdict__col + .mod-verdict__col {
    padding-left: var(--s-6);
    border-left: 1px solid color-mix(in oklch, var(--bg) 18%, var(--text-strong));
  }
}
.mod-verdict__k {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mod-accent);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}
.mod-verdict__col p { margin: 0; font-size: 15.5px; line-height: 1.55; color: color-mix(in oklch, var(--bg) 90%, var(--text-strong)); }
.mod-verdict__col p strong { color: var(--bg); }

.mod-verdict__foot {
  display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center;
  padding-top: var(--s-4);
  border-top: 1px solid color-mix(in oklch, var(--bg) 18%, var(--text-strong));
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--bg) 65%, var(--text-strong));
}
.mod-verdict__rating {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--mod-accent);
  font-variant-numeric: tabular-nums;
}
.mod-verdict__rating .max { font-size: 0.65em; color: color-mix(in oklch, var(--bg) 55%, var(--text-strong)); }

[data-mood="minimalist"] .mod-verdict {
  background: var(--surface);
  color: var(--text-strong);
  border: 2px solid var(--text-strong);
  border-radius: 0;
}
[data-mood="minimalist"] .mod-verdict__title { color: var(--text-strong); }
[data-mood="minimalist"] .mod-verdict__col p { color: var(--text); }

/* ==========================================================================
   12 · Almost Made The Cut  .mod-almost
   Dimmed runners-up list. Compact item rows with one-line reason.
   ========================================================================== */

.mod-almost {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-5) 0;
  max-width: var(--measure);
}
.mod-almost__head {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.mod-almost__head h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin: 0;
}
.mod-almost__head .count {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.mod-almost__row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--s-3);
  padding: 10px 0;
  align-items: baseline;
  border-top: 1px dashed var(--rule);
  font-size: 14.5px;
  color: var(--text-muted);
}
.mod-almost__row:first-of-type { border-top: 0; }
.mod-almost__row .n {
  font-family: var(--font-mono, var(--font-body));
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
}
.mod-almost__row .name { color: var(--text); font-weight: 500; }
.mod-almost__row .why {
  font-style: italic;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--text-subtle);
  text-align: right;
}

/* ==========================================================================
   Print rules — every module is print-friendly by default
   Hide pin buttons, drawers, ad slots, nav; show URLs after links.
   ========================================================================== */
@media print {
  [class^="mod-"] { break-inside: avoid; }
  .mod-item, .mod-list, .mod-glance, .mod-stats, .mod-verdict, .mod-compare, .mod-swaps {
    background: transparent !important;
    box-shadow: none !important;
  }
  .mod-list__group[open] > summary::after,
  .mod-list__group:not([open]) > summary::after { display: none; }
  .mod-list__group:not([open]) > * { display: revert; }  /* expand collapsed groups in print */
  .mod-quote blockquote { border-color: #000; color: #000; }
  .mod-verdict { color: #000; border: 1px solid #000; }
  .mod-verdict__title, .mod-verdict__col p, .mod-verdict__col p strong { color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}