/* Guides, reel and 404: article styles on top of /home.css (same palette, Bagel Fat One + Nunito, header and footer). */
:root{
  /* older names still used by the reel and 404 pages, mapped to the home palette */
  --cream:var(--ground); --cream-deep:var(--hero); --terracotta:var(--warm); --terracotta-deep:var(--warm-text);
  --teal:var(--ink); --teal-soft:var(--accent); --sage:var(--leaf); --clay:var(--warm-text); --sunshine:#FFD45C;
  --ink-soft:var(--soft); --muted:var(--soft); --paper-line:#E4D6BE;
}
.eyebrow{display:inline-block;font-weight:900;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:2px solid var(--accent);border-radius:999px;padding:5px 14px;margin-bottom:16px}

/* hub */
.hub-head{padding-block:56px 36px;max-width:760px}
.hub-head h1{font-size:clamp(2.6rem,6vw,4.6rem);margin-bottom:16px}
.hub-head p{color:var(--soft);font-size:1.15rem}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px;padding-bottom:88px}
.guide-card{background:var(--card);border:var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;box-shadow:7px 7px 0 var(--ink);transition:transform .2s ease}
.guide-card:hover{transform:translate(-3px,-3px)}
.guide-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#EFE7D8;padding:16px;border-bottom:var(--line)}
.guide-card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.guide-card .tag{font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.guide-card h2{font-size:1.4rem;line-height:1.1}
.guide-card p{color:var(--soft);font-size:.98rem;line-height:1.45}
.guide-card .more{margin-top:auto;font-weight:900;color:var(--ink);border-bottom:2.5px solid var(--warm);align-self:flex-start;padding-bottom:2px}

/* article */
.article-head{padding-block:48px 28px;max-width:820px;margin:0 auto}
.article-head h1{font-size:clamp(2.3rem,5vw,3.8rem);margin-bottom:16px}
.article-head .dek{font-size:1.2rem;color:var(--soft)}
.meta{margin-top:16px;font-size:.9rem;color:var(--soft);font-weight:800}
.hero-img{max-width:560px;margin:0 auto 44px;background:#EFE7D8;border:var(--line);border-radius:22px;padding:22px;box-shadow:8px 8px 0 var(--ink)}
.hero-img img{width:100%;max-height:560px;object-fit:contain;border-radius:4px;box-shadow:0 0 0 6px #fff}
article.prose{max-width:740px;margin:0 auto;padding-bottom:40px;font-size:1.06rem;line-height:1.7}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:48px 0 14px}
.prose h3{font-size:1.3rem;margin:28px 0 8px;color:var(--warm-text)}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 1.3em}
.prose li{margin-bottom:8px}
.prose a{color:var(--ink);font-weight:800;text-decoration-color:var(--warm);text-decoration-thickness:2.5px;text-underline-offset:3px}
.callout{background:var(--hero);border:var(--line);border-radius:16px;padding:18px 22px;margin:26px 0}
.callout.safety{background:var(--leaf)}
.callout p:last-child{margin-bottom:0}
.vivi-tip{display:flex;gap:16px;align-items:center;background:var(--card);border:2.5px dashed var(--accent);border-radius:18px;padding:16px 20px;margin:28px 0}
.vivi-tip img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;background:var(--hero)}
.vivi-tip p{margin:0;font-size:1rem}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:18px 0 26px}
.swatch{border-radius:14px;overflow:hidden;border:var(--line);background:var(--card);font-size:.85rem;font-weight:800}
.swatch i{display:block;height:64px;border-bottom:var(--line)}
.swatch span{display:block;padding:8px 10px;line-height:1.3}
.swatch small{display:block;font-weight:700;color:var(--soft)}

.checklist{list-style:none;margin-left:0!important}
.checklist li{padding-left:32px;position:relative}
.checklist li::before{content:"✓";position:absolute;left:4px;color:var(--accent);font-weight:900}

.table-scroll{overflow-x:auto;margin:18px 0 26px;border:var(--line);border-radius:14px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.98rem}
th,td{text-align:left;padding:12px 14px;border-bottom:1.5px solid #E4D6BE;vertical-align:top}
th{font-family:var(--display);font-weight:400;color:var(--ink);background:var(--hero)}
tr:last-child td{border-bottom:0}

.sources{font-size:.9rem;color:var(--soft);border-top:var(--line);margin-top:48px;padding-top:20px}
.sources h2{font-size:1.2rem;margin:0 0 10px}
.sources li{margin-bottom:6px;overflow-wrap:anywhere}
.sources a{font-weight:700}

.next{max-width:1040px;margin:0 auto;padding:30px 0 88px}
.next h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:22px}

@media (max-width:600px){.vivi-tip{flex-direction:column;text-align:center}.hero-img{padding:14px}}