/* Self-hosted webfonts (tools/fetch-fonts.mjs) — the CSP forbids remote fonts. */
@font-face{font-family:'Chivo';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/chivo-400-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:'Chivo';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/chivo-400-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:'Chivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/chivo-700-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:'Chivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/chivo-700-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:'Chivo';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/chivo-900-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:'Chivo';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/chivo-900-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:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-mono-400-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:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-mono-400-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:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-mono-700-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:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-mono-700-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;}

/* white-elephant-gift-ideas.com — party chaos zine */
:root{
  --canvas:#fffdf6; --paper:#ffffff;
  --ink:#221e2e; --muted:#635d72;
  --blue:#4f46e5; --blue-deep:#3f38c9;
  --red:#ff5a5f; --yellow:#ffc700; --green:#12b886;
  --green-ink:#0b7a5b;
  --r:12px;
  --shadow:4px 4px 0 var(--ink);
  --shadow-pop:6px 6px 0 var(--ink);
  --font-display:'Chivo','Arial Black',sans-serif;
  --font-mono:'Space Mono','Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:var(--font-display);font-weight:400;font-size:16px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block;border-radius:8px}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-deep)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:1.2rem}
.hl{background:var(--yellow);padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.section{padding:76px 0}
.mono{font-family:var(--font-mono)}
.eyebrow{display:block;font-family:var(--font-mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ---------- marquee + nav ---------- */
.marquee{background:var(--yellow);border-bottom:2px solid var(--ink);overflow:hidden;white-space:nowrap;max-width:100%}
.marquee-track{display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:.8rem;letter-spacing:.12em;padding:8px 0;animation:crawl 18s linear infinite;will-change:transform}
@keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.topbar{background:var(--paper);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:100}
.topbar-in{max-width:1140px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:20px;position:relative}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);margin-right:auto;font-weight:900;font-size:1.25rem;letter-spacing:-.02em}
.logo:hover{color:var(--ink)}
.logo svg{flex:none}
.nav-links{display:flex;gap:22px;list-style:none;align-items:center}
.nav-links a{font-family:var(--font-mono);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:4px 2px}
.nav-links a:hover{background:var(--yellow)}
.nav-links a[aria-current="page"]{background:var(--ink);color:var(--paper);padding:4px 8px}

.btn{display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;padding:12px 22px;border-radius:8px;border:2px solid var(--ink);cursor:pointer;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-pop)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep);color:#fff}
.btn-plain{background:var(--paper);color:var(--ink)}
.btn-plain:hover{background:var(--yellow);color:var(--ink)}
/* Steal-swap: the label crossfades on hover/focus. Decoration only — the
   accessible name stays "View on Amazon" (label-b is aria-hidden). */
.steal{position:relative}
.steal .label-a,.steal .label-b{transition:opacity .15s}
.steal .label-b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}
.steal:hover .label-a,.steal:focus-visible .label-a{opacity:0}
.steal:hover .label-b,.steal:focus-visible .label-b{opacity:1}

/* ---------- collage hero ---------- */
.hero{position:relative;padding:88px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;position:relative;z-index:1}
.hero h1{margin-top:12px}
.hero-lede{color:var(--muted);font-size:1.12rem;max-width:46ch;margin:20px 0 30px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.collage{position:relative;min-height:420px}
.snap{position:absolute;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 10px 14px}
.snap svg{width:100%;height:auto;display:block;border-radius:8px}
.snap figcaption{font-family:var(--font-mono);font-size:.75rem;font-weight:700;padding-top:8px;text-align:center}
.snap-a{width:54%;top:0;left:2%;transform:rotate(-5deg)}
.snap-b{width:50%;top:24%;right:0;transform:rotate(4deg);z-index:2}
.snap-c{width:46%;bottom:0;left:14%;transform:rotate(-2deg)}
.confetti-bit{position:absolute;z-index:0;animation:fall 9s linear infinite;opacity:.85}
@keyframes fall{0%{transform:translateY(-8vh) rotate(0)}100%{transform:translateY(105vh) rotate(340deg)}}

/* ---------- fun grid ---------- */
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:36px;flex-wrap:wrap}
.section-head h2{margin-top:10px}
.section-head p{color:var(--muted);max-width:520px;margin-top:8px}
.fun-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fun-grid-2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;color:var(--ink);display:flex;flex-direction:column;gap:10px;transition:transform .25s ease,box-shadow .25s ease}
.card:nth-child(3n+1){transform:rotate(-1deg)}
.card:nth-child(3n){transform:rotate(1.2deg)}
.card:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:var(--shadow-pop);color:var(--ink);z-index:2}
.card p{color:var(--muted);font-size:.95rem}
.card-wide{grid-column:span 2}
.card-lead{font-size:1.5rem}
.stickr{display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;padding:3px 12px;align-self:flex-start}
.stickr-red{background:var(--red);color:#221e2e}
.stickr-yellow{background:var(--yellow);color:#221e2e}
.stickr-green{background:var(--green);color:#221e2e}
.stickr-blue{background:var(--blue);color:#fff}
a.stickr:hover{background:var(--yellow);color:#221e2e}
.card .btn{margin-top:auto;text-align:center}
.meta{font-family:var(--font-mono);font-size:.75rem;color:var(--muted)}

/* ---------- article ---------- */
.page-hero{padding:68px 0 24px;text-align:center}
.page-hero h1{margin-top:12px}
.page-hero p{color:var(--muted);max-width:58ch;margin:16px auto 0;font-size:1.08rem}
.article{max-width:820px;margin:0 auto;padding:44px 22px 88px}
.article-header h1{font-size:clamp(2rem,4.4vw,3rem);margin-top:12px}
.byline{display:flex;align-items:center;gap:12px;margin-top:20px;font-family:var(--font-mono);color:var(--muted);font-size:.85rem}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--red);border:2px solid var(--ink);color:#221e2e;display:flex;align-items:center;justify-content:center;font-weight:900;flex:none}
.article h2{margin:46px 0 14px}
.article h3{margin:28px 0 10px}
.article p{margin:15px 0}
.article ul,.article ol{margin:15px 0 15px 26px}
.article li{margin:8px 0}
.article img{margin:26px 0;border:2px solid var(--ink);box-shadow:var(--shadow)}
.callout{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;margin:30px 0}
.callout h4{font-family:var(--font-mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#d92b30;margin-bottom:8px}
.callout p{margin:8px 0;font-size:.96rem}
.faq details{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:16px 20px;margin:12px 0;box-shadow:var(--shadow)}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin-top:10px;color:var(--muted)}
.toc{border:2px dashed var(--ink);border-radius:var(--r);padding:18px 24px;margin:26px 0}
.toc strong{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
.toc ol{margin:10px 0 0 22px;font-family:var(--font-mono);font-size:.9rem}

/* ---------- misc ---------- */
.prose{max-width:740px;margin:0 auto}
.prose p{margin:15px 0}
.prose h2{margin:38px 0 12px}
.prose ul,.prose ol{margin:15px 0 15px 26px}
.prose li{margin:8px 0}
.author-hero{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.avatar-xl{width:112px;height:112px;font-size:2.2rem;border-radius:24px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#d6d1e6;margin-top:80px;padding:52px 0 30px}
footer .logo{color:#fff}
footer .logo:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot-grid h4{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:13px}
.foot-grid ul{list-style:none}
.foot-grid li{margin:9px 0}
.foot-grid a{color:#d6d1e6;font-size:.93rem}
.foot-grid a:hover{color:#fff;text-decoration:underline}
.disclosure{color:#b7b0cb;font-size:.85rem;margin-top:14px;max-width:44ch}
.disclosure a{color:#d6d1e6;text-decoration:underline}
.copyright{text-align:center;color:#b7b0cb;font-family:var(--font-mono);font-size:.78rem;margin-top:40px;padding-top:20px;border-top:1px solid rgba(214,209,230,.25)}

/* ---------- reveal ---------- */
/* opacity-only so card tilt transforms stay intact */
.reveal{opacity:0;transition:opacity .55s ease}
.reveal.in{opacity:1}

/* ── port additions: engine classes the sketch never had ───────────────── */

/* Shared-view containers map onto the site's own .wrap. */
.container{max-width:1140px;margin:0 auto;padding:0 22px}
.container-narrow,.wrap-narrow{max-width:820px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--yellow);color:var(--ink);
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:12px 20px;border:2px solid var(--ink);border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0;color:var(--ink)}

/* Breadcrumbs (every non-home route). */
.breadcrumb{margin:0 0 18px}
.breadcrumb-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-family:var(--font-mono);
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.breadcrumb-list li+li::before{content:"/";margin-right:8px;color:var(--red)}
.breadcrumb-list a{color:var(--muted)}
.breadcrumb-list a:hover{color:var(--blue)}
.breadcrumb-list [aria-current="page"]{color:var(--ink)}
.page-hero .breadcrumb-list{justify-content:center}
.page-hero-search{display:flex;justify-content:center;margin-top:22px}

/* Article chrome. */
.article-header .stickr{margin-bottom:14px}
.standfirst{font-size:1.15rem;color:var(--muted);margin-top:16px;max-width:60ch}
.article-cover{width:100%;height:auto;margin:28px 0 8px;border:2px solid var(--ink);box-shadow:var(--shadow);border-radius:var(--r)}
.disclaimer{background:var(--paper);border:2px solid var(--ink);border-left:8px solid var(--yellow);
  border-radius:var(--r);box-shadow:var(--shadow);padding:16px 22px;margin:28px 0}
.disclaimer p{margin:0;color:var(--muted);font-size:.95rem}
.toc a{font-weight:700}
.toc a[aria-current="true"]{background:var(--yellow);color:var(--ink)}
.article-body h2,.article-body h3,.article-body h4{scroll-margin-top:110px}
.article-body table{width:100%;border-collapse:collapse;margin:26px 0;font-size:.95rem;
  border:2px solid var(--ink);background:var(--paper)}
.article-body th,.article-body td{border:2px solid var(--ink);padding:10px 12px;text-align:left}
.article-body th{background:var(--yellow);font-family:var(--font-mono);font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase}
.article-body figure{margin:26px 0}
.article-body figcaption{font-family:var(--font-mono);color:var(--muted);font-size:.78rem;text-align:center;margin-top:8px}
.article-body blockquote{background:var(--paper);border:2px solid var(--ink);border-left:8px solid var(--blue);
  border-radius:var(--r);box-shadow:var(--shadow);padding:16px 22px;margin:26px 0}
.article-body blockquote p{margin:0}
.article-body code{font-family:var(--font-mono);background:var(--canvas);border:2px solid var(--ink);border-radius:6px;padding:1px 6px;font-size:.88em}
.table-scroll{overflow-x:auto;margin:26px 0}
.table-scroll table{margin:0}
.related{margin-top:56px;border-top:2px solid var(--ink);padding-top:32px}
.related .card{margin-top:0}

/* Prose used by the shared legal/author views. */
.prose h1{font-size:clamp(2rem,4.4vw,3rem)}
.prose h3{margin:26px 0 10px}
.legal-updated{font-family:var(--font-mono);color:var(--muted);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}

/* Author profile (shared view). */
.author-head__avatar img{border:2px solid var(--ink);border-radius:24px;background:var(--paper);box-shadow:var(--shadow)}
.author-head__eyebrow{font-family:var(--font-mono);color:var(--blue);opacity:1}
.author-head__role{font-family:var(--font-mono);font-size:.9rem;color:var(--muted)}
.author-approach li{background:var(--paper);border:2px solid var(--ink);border-left:8px solid var(--green);
  border-radius:var(--r);box-shadow:var(--shadow)}
.author-approach p{color:var(--muted);opacity:1}
.author-posts a{color:var(--blue)}
.author-posts li{border-bottom:2px solid rgba(34,30,46,.12)}
.author-posts .meta{opacity:1;color:var(--muted)}

/* Listings and empty states. */
.card-img{width:100%;height:auto;border:2px solid var(--ink);border-radius:8px}
.card-title{font-size:1.25rem}
.empty,.results-count{font-family:var(--font-mono);color:var(--muted);font-size:.95rem}
.explain{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:44px 40px}
.explain h2{margin:10px 0 6px}
.explain p{color:var(--muted);max-width:70ch;margin:14px 0}
.contact-card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);
  padding:28px 32px;margin:0 auto 32px;max-width:740px}
.contact-card p{color:var(--muted)}
.contact-email{font-family:var(--font-mono);font-size:1.25rem;font-weight:700;color:var(--blue);margin:8px 0}

/* Products page. */
.prod-disclosure{display:flex;gap:.6rem;align-items:flex-start;background:var(--paper);
  border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 18px;
  margin-bottom:28px;color:var(--muted)}
.prod-disclosure p{margin:0;font-size:.92rem}
.prod-disclosure svg{flex:none;margin-top:4px}
.prod-jumpnav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.prod-cat{margin-bottom:44px}
.prod-cat h2{margin-bottom:20px}
.prod-card-title{font-size:1.1rem}
.prod-card-blurb{color:var(--muted);font-size:.92rem}
.prod-card-seen{font-family:var(--font-mono);font-size:.75rem;color:var(--muted)}
.prod-card-meta{display:flex;flex-wrap:wrap;gap:.4rem;font-family:var(--font-mono);font-size:.78rem;
  font-weight:700;color:var(--green-ink);margin:0}
.prod-card-cta{margin-top:auto;text-align:center}
.prod-card-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--canvas);
  border:2px solid var(--ink);border-radius:8px}
.prod-card-illus{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  background:var(--canvas);border:2px solid var(--ink);border-radius:8px}
.prod-card-illus svg{width:64px;height:64px}

/* In-article Amazon cards: the shared CSS mixes from currentColor; the sticker
   language needs the hard border and offset shadow back. */
.amz-card{border:2px solid var(--ink)!important;border-radius:var(--r)!important;box-shadow:var(--shadow)!important;background:var(--paper)}
.amz-card .amz-media{background:color-mix(in srgb,var(--amz-accent) 10%,var(--canvas))}
.amz-card .amz-badge{font-family:var(--font-mono);background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.amz-card .amz-meta{font-family:var(--font-mono);color:var(--green-ink)}

/* On-site search form. */
.sfind-in{background:var(--paper)!important;border:2px solid var(--ink)!important;border-radius:8px!important;
  font-family:var(--font-display)!important;color:var(--ink)!important}
.sfind-go{background:var(--blue)!important;color:#fff!important;border:2px solid var(--ink)!important;
  border-radius:8px!important;font-family:var(--font-mono)!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:.04em!important;box-shadow:var(--shadow)}
.sfind-go:hover{background:var(--blue-deep)!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cookie banner. */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;display:flex;gap:16px;
  align-items:center;flex-wrap:wrap;justify-content:center;background:var(--paper);
  border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow-pop);padding:16px 22px}
.cookie-banner p{color:var(--muted);font-size:.92rem;margin:0}
.cookie-banner[hidden]{display:none}

/* ---------- responsive ---------- */
@media(max-width:940px){
  .fun-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .collage{min-height:340px;margin-top:10px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .fun-grid,.fun-grid-2{grid-template-columns:1fr}
  .card-wide{grid-column:span 1}
  .topbar-in{flex-wrap:wrap;padding:10px 16px;gap:12px}
  /* both nav links stay visible on mobile; Products CTA never hides */
  .nav-links{gap:8px;margin-left:auto}
  .nav-links a:not(.nav-cta){font-size:.78rem}
  .nav-cta{padding:7px 11px;font-size:.72rem}
  .topbar-in .logo{font-size:.98rem;gap:7px}
  .topbar-in .logo svg{width:26px;height:26px}
  .explain{padding:32px 22px}
  .article-body table{font-size:.88rem}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1}
  .marquee-track{animation:none}
  .confetti-bit{animation:none;opacity:.4}
  html{scroll-behavior:auto}
}

/* ── Layout fix: tablet collage collision ─────────────────────────────────
   Appended at the end of the file because the base `.collage` rule and the
   940px block above would otherwise win on source order.

   Below 940px the hero drops to one column, so the collage stretched to the
   full container while its min-height shrank to 340px. The three `.snap`
   cards are sized in % of that box, so they grew wide and short and their
   captions collided. Holding the collage at roughly its desktop box keeps
   the scatter exactly as designed. */
@media(max-width:940px){
  .collage{max-width:500px;min-height:420px;margin:10px auto 0}
}

/* -- cross-page transitions + cookie entrance (progressive enhancement) -- */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
.cookie-banner:not([hidden]){animation:cookie-in .5s cubic-bezier(.22,.9,.36,1) both}
@keyframes cookie-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cookie-banner:not([hidden]){animation:none}}