/* Magic Mushrooms Seattle — Shared Article Styles */
/* Palette: Deep indigo + warm earth. Trustworthy, evidence-based, accessible. */

@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/inter-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:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-serif-display-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}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --n50:#faf9f7;--n100:#f5f3f0;--n200:#e8e4df;--n300:#d4cfc8;
  --n400:#a39e96;--n500:#736e66;--n600:#565249;--n700:#3d3a33;
  --n800:#2a2722;--n900:#1a1815;
  --pri:#3b2d80;--pri-l:#4f3da6;--pri-d:#2a1f5e;
  --acc:#c4956a;--acc-l:#d4ac85;
  --bg:#fefdfb
}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;color:var(--n800);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}

/* Nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;transition:all .4s;background:rgba(254,253,251,.95);backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav-logo{font-family:'DM Serif Display',serif;font-size:1.25rem;font-weight:400;color:var(--n800);text-decoration:none;letter-spacing:-.02em}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{color:var(--n600);text-decoration:none;font-size:.875rem;font-weight:500;letter-spacing:.02em;transition:color .3s}
.nav-links a:hover{color:var(--n900)}
.nav-links a.active{color:var(--n900);font-weight:600}
.nav-cta{background:var(--pri);color:#fff !important;padding:.5rem 1.25rem;border-radius:6px;font-weight:600}

/* Article Hero */
.article-hero{padding:8rem 4rem 4rem;max-width:820px;margin:0 auto}
.article-breadcrumb{font-size:.75rem;color:var(--n400);margin-bottom:1.5rem;letter-spacing:.02em}
.article-breadcrumb a{color:var(--n500);text-decoration:none}
.article-breadcrumb a:hover{color:var(--pri)}
.article-hero h1{font-family:'DM Serif Display',serif;font-size:clamp(2rem,4vw,3rem);font-weight:400;color:var(--n900);line-height:1.12;letter-spacing:-.03em;margin-bottom:1rem}
.article-meta{font-size:.8rem;color:var(--n400);margin-bottom:2rem;display:flex;gap:1.5rem;flex-wrap:wrap}
.article-meta span{display:flex;align-items:center;gap:.35rem}
.article-definition{background:var(--n50);border-left:3px solid var(--pri);padding:1.5rem 2rem;border-radius:0 8px 8px 0;font-size:.95rem;line-height:1.75;color:var(--n700);margin-bottom:0}
.article-definition strong{color:var(--n900)}

/* Table of Contents */
.article-toc{background:var(--n50);border:1px solid var(--n200);border-radius:8px;padding:1.25rem 2rem;margin:0 auto 2.5rem;max-width:820px;box-sizing:border-box}
.article-toc strong{font-size:.8rem;font-weight:600;color:var(--n500);text-transform:uppercase;letter-spacing:.06em}
.article-toc ul{list-style:none;margin:.75rem 0 0;padding:0;columns:2;column-gap:2rem}
.article-toc li{margin-bottom:.4rem;font-size:.88rem;line-height:1.5;break-inside:avoid}
.article-toc a{color:var(--n600);text-decoration:none;transition:color .2s}
.article-toc a:hover{color:var(--pri)}
@media(max-width:768px){.article-toc ul{columns:1}}

/* Article Body */
.article-body{max-width:820px;margin:0 auto;padding:3rem 4rem 6rem}
.article-body p{font-size:1.02rem;line-height:1.85;color:var(--n700);margin-bottom:1.25rem}
.article-body h2{font-family:'DM Serif Display',serif;font-size:1.75rem;font-weight:400;color:var(--n900);margin-top:3.5rem;margin-bottom:1.25rem;letter-spacing:-.02em;line-height:1.2;padding-top:2rem;border-top:1px solid var(--n200)}
.article-body h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.article-body h3{font-size:1.15rem;font-weight:600;color:var(--n800);margin-top:2.25rem;margin-bottom:.75rem;line-height:1.3}
.article-body a{color:var(--pri);text-decoration:underline;text-decoration-color:rgba(59,45,128,.3);text-underline-offset:2px;transition:text-decoration-color .2s}
.article-body a:hover{text-decoration-color:var(--pri)}
.article-body ul,.article-body ol{margin:1rem 0 1.5rem 1.5rem;color:var(--n700)}
.article-body li{margin-bottom:.6rem;font-size:.95rem;line-height:1.7}
.article-body li strong{color:var(--n800)}
.article-body strong{color:var(--n800)}
.article-body blockquote{border-left:3px solid var(--pri);padding:1rem 1.5rem;background:var(--n50);border-radius:0 8px 8px 0;margin:1.5rem 0;font-style:italic;color:var(--n600)}
.article-body img{display:block;max-width:100%;height:auto;border-radius:8px;margin:2rem 0}

/* Tables */
.article-body table{width:100%;border-collapse:collapse;margin:1.5rem 0 2rem;font-size:.88rem}
.article-body thead th{background:var(--n900);color:#fff;padding:.75rem 1rem;text-align:left;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.article-body tbody td{padding:.65rem 1rem;border-bottom:1px solid var(--n200);color:var(--n700);vertical-align:top}
.article-body tbody tr:hover{background:var(--n50)}
.article-body tbody td:first-child{font-weight:600;color:var(--n800);white-space:nowrap}

/* Quick Reference Box */
.quick-ref{background:var(--n50);border:1px solid var(--n200);border-radius:12px;padding:2rem 2.5rem;margin:2rem 0 2.5rem}
.quick-ref h3{font-family:'DM Serif Display',serif;font-size:1.2rem;font-weight:400;color:var(--n900);margin-top:0;margin-bottom:1rem}
.quick-ref ul{margin:0 0 0 1.25rem}
.quick-ref li{margin-bottom:.5rem;font-size:.92rem;line-height:1.65}

/* Image Placeholders */
.img-placeholder{position:relative;width:100%;border-radius:12px;overflow:hidden;margin:2rem 0;border:2px dashed var(--n300);background:var(--n50);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:280px;transition:border-color .3s}
.img-placeholder:hover{border-color:var(--pri)}
.img-placeholder-icon{width:48px;height:48px;border-radius:50%;background:var(--n200);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.img-placeholder-icon svg{color:var(--n400);width:24px;height:24px}
.img-placeholder-label{font-size:.85rem;font-weight:600;color:var(--n600);margin-bottom:.25rem}
.img-placeholder-desc{font-size:.75rem;color:var(--n400);max-width:320px;line-height:1.5}
.img-placeholder-spec{position:absolute;top:.75rem;right:.75rem;background:var(--n200);padding:.2rem .6rem;border-radius:4px;font-size:.65rem;font-weight:600;color:var(--n500);letter-spacing:.03em}
.img-placeholder img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.img-placeholder.has-image{border:none;min-height:auto}
.img-placeholder.has-image .img-placeholder-icon,
.img-placeholder.has-image .img-placeholder-label,
.img-placeholder.has-image .img-placeholder-desc,
.img-placeholder.has-image .img-placeholder-spec{display:none}
.img-placeholder.hero-img{min-height:400px;margin:2.5rem 0}

/* FAQ — Accordion */
.faq-section{margin-top:3rem}
.faq-item{border:1px solid var(--n200);border-radius:8px;margin-bottom:.75rem;overflow:hidden}
.faq-item summary{padding:1.25rem 1.5rem;font-size:1.05rem;font-weight:600;color:var(--n900);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:background .2s}
.faq-item summary:hover{background:var(--n50)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.4rem;font-weight:300;color:var(--n400);transition:transform .2s}
.faq-item[open] summary::after{content:'\2212'}
.faq-item .faq-answer{padding:0 1.5rem 1.25rem;font-size:.95rem;line-height:1.8;color:var(--n700)}

/* CTA Banner */
.article-cta{background:linear-gradient(135deg,var(--pri) 0%,var(--pri-d) 100%);padding:3.5rem 4rem;margin:0;color:#fff;text-align:center}
.article-cta-inner{max-width:700px;margin:0 auto}
.article-cta h2{font-family:'DM Serif Display',serif;font-size:1.75rem;font-weight:400;margin-bottom:1rem;color:#fff;border:none;padding:0}
.article-cta p{color:rgba(255,255,255,.75);font-size:1rem;line-height:1.7;margin-bottom:1.5rem}
.article-cta-btn{display:inline-block;background:#fff;color:var(--pri);padding:.75rem 2rem;border-radius:8px;font-weight:600;font-size:.95rem;text-decoration:none;transition:all .3s}
.article-cta-btn:hover{background:var(--n100);transform:translateY(-1px)}

/* Footer */
footer{padding:2.5rem 4rem;text-align:center;color:var(--n400);font-size:.78rem;border-top:1px solid var(--n100)}
footer a{color:var(--n500);text-decoration:none}

/* Responsive */
@media(max-width:768px){
  .article-hero{padding:6rem 1.5rem 2.5rem}
  .article-body{padding:2rem 1.5rem 4rem}
  .article-cta{padding:3rem 1.5rem}
  .article-body h2{font-size:1.5rem}
  .article-body table{font-size:.8rem}
  .article-body thead th{padding:.5rem .6rem}
  .article-body tbody td{padding:.5rem .6rem}
  .nav-links{display:none}
  .img-placeholder{min-height:200px}
  .img-placeholder.hero-img{min-height:260px}
  .quick-ref{padding:1.5rem}
}