/* =========================================================
 Components.css — Structure
 ---------------------------------------------------------
 1) Header / Nav (structural; not shortcode-driven)
 2) Footer (structural; not shortcode-driven)
 3) Cards (homepage, path doors; structural)
 4) Blog cards/grid + sidebar (structural)
 5) Hero (structural; shared helper)
 6) Article/content helpers (shortcode-driven)
    - callout, pullquote, media-frame, media-inline, gallery, cols, chips, buttons
 7) Utilities (u-*)
 ========================================================= */

:root{
	/* layout */
	--header-h: 88px;
	--site-gutter: 20px;
	--container: 1180px;   /* default reading width */
	--container-xl: 1480px;/* wider sections like blog landing */
	
	/* cards */
	--card-w: 360px;
}

/* width helpers are defined in base.css to avoid duplication */

/* =========================================================
 Header / Nav (structural; not shortcode-driven)
 ========================================================= */

.site-header{
	position: sticky; top: 0; z-index: 50;
	height: var(--header-h);
	display: block;
	background: color-mix(in oklab, var(--surface) 10%, transparent);
	-webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
	border-bottom: 1px solid var(--border);
	box-shadow: 0 2px 0 rgba(255,255,255,.04), var(--shadow-sm);
	transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .18s ease;
}
.site-header--overlay{ background: transparent; border-bottom-color: transparent; box-shadow:none; }
.site-header.is-scrolled{ background: color-mix(in oklab, var(--surface) 12%, transparent); border-bottom-color: var(--border); box-shadow: 0 2px 0 rgba(255,255,255,.04), var(--shadow-sm); }
.site-header.is-hidden{ transform: translateY(-100%); }
/* 3-zone grid */
.site-header .nav{
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
/* left/center/right */
.brand{ justify-self: start; display:flex; align-items:center; }
.site-header .brand img{ height:36px; display:block; }
.nav-links{ justify-self:center; display:flex; gap:22px; }
.nav-utils{ justify-self:end; display:flex; gap:16px; }

/* links */
.nav-links a{
	position:relative; color: var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px;
	transition: background .15s ease, color .15s ease, box-shadow .2s ease, color .15s ease;
}
.nav-links a:hover{ color:var(--text); background: color-mix(in oklab, var(--brand) 10%, transparent); box-shadow: var(--glow-red); }
.nav-links a:focus-visible{ outline:2px solid color-mix(in oklab, var(--brand) 60%, #fff 40%); outline-offset:2px; box-shadow: var(--glow-red); }
.nav-links a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px; background: color-mix(in oklab, var(--brand) 65%, #fff 35%);
  transform: scaleX(0); transform-origin:left; transition: transform .18s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform: scaleX(1); }
.nav-links a[aria-current="page"]{ color: var(--text); }

/* mobile menu */
.nav-more{ display:none; position:relative; }
.nav-more summary{
	list-style:none; cursor:pointer; border:1px solid var(--border); border-radius:12px; padding:6px 10px; user-select:none;
	display:flex; align-items:center; justify-content:center; gap:6px;
}
.nav-more summary::-webkit-details-marker{ display:none; }
.hamburger{ color:var(--text); font-size:1.1rem; }
.nav-more[open] summary{ background: color-mix(in oklab, var(--brand) 12%, transparent); box-shadow: var(--glow-red); }
.nav-more nav{
	position:absolute; right:0; top:calc(100% + 8px);
	display:flex; flex-direction:column; gap:8px; width:min(90vw, 420px); padding:14px;
	border-radius:14px; border:1px solid var(--border); background:var(--surface); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
}
.nav-more nav a{ padding:12px 10px; border-radius:12px; color:var(--muted); text-decoration:none; font-weight:600; }
.nav-more nav a:hover{ color:var(--text); background: color-mix(in oklab, var(--brand) 10%, transparent); }

@media (max-width: 860px){
	.site-header .nav{ grid-template-columns: auto 1fr; }
	.nav-links{ display:none; }
	.nav-more{ display:flex; justify-self:end; margin-left:auto; }
}

/* theme toggle removed (dark-only) */

/* =========================================================
 Footer
 ========================================================= */

.site-footer{ margin-top:64px; padding:0 0 28px 0; }

.footer-divider{
	height:1px; width:100%;
	background: linear-gradient(to right, transparent, color-mix(in oklab, var(--brand) 35%, transparent), transparent);
	box-shadow: var(--glow-red); opacity:.7; margin:28px 0 32px;
}
.footer-grid{
	display:grid; gap:26px; grid-template-columns: repeat(3, minmax(0,1fr)); align-items:start; margin-bottom:26px;
}
.foot-col h4{ margin:0 0 .6rem 0; font-size:1.05rem; }
.foot-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.foot-col a{
	color:var(--muted); text-decoration:none; border-radius:10px; padding:4px 6px;
	transition: color .15s ease, background .15s ease, box-shadow .2s ease;
}
.foot-col a:hover{ color:var(--text); background: color-mix(in oklab, var(--brand) 10%, transparent); box-shadow: var(--glow-red); }

.footer-bar{
	display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:16px; padding-top:8px;
	border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); margin-top:10px;
}
.footer-bar .brand img{ height:28px; display:block; }
.footer-bar .legal{ color:var(--muted); font-size:.9rem; opacity:.9; }
.footer-bar .to-top{ color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:10px; }
.footer-bar .to-top:hover{ color:var(--text); background: color-mix(in oklab, var(--brand) 10%, transparent); box-shadow: var(--glow-red); }

@media (max-width: 860px){
	.footer-grid{ grid-template-columns:1fr; }
	.footer-bar{ grid-template-columns:1fr; gap:10px; text-align:center; }
	.footer-bar .brand{ justify-self:center; }
	.footer-bar .to-top{ justify-self:center; }
}

/* =========================================================
 Grid utilities + Cards
 ========================================================= */

.grid{ display:grid; gap:22px; justify-content:center; align-items:start; }
.grid.equal{ align-items: stretch; }
.grid.equal .card{ height:100%; }
.cols-2{ grid-template-columns: repeat(2, var(--card-w)); }
.cols-3{ grid-template-columns: repeat(3, var(--card-w)); }


.card{
	position:relative; display:block; box-sizing:border-box; width:var(--card-w);
	background: var(--glass-bg); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
	border:2px solid var(--border); border-radius: var(--radius); padding:22px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.03);
	transition: transform .12s ease, box-shadow .2s ease;
	isolation:isolate;
}
.card:hover{ border-color: color-mix(in oklab, var(--border) 65%, #ffffff 35%); }
.card--floating::after{
	content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; box-shadow: var(--glow-red);
}
.card .kicker{ font-size:.9rem; color:var(--muted); margin-bottom:6px; }
.card .title{ font-weight:700; font-size:1.35rem; margin:0 0 6px 0; display:flex; align-items:center; gap:.5rem }
.card .body{ color:var(--text); opacity:.92; }
.card--tall{ min-height: 200px; }
.principles-grid .card{ min-height: 220px; }
.spacer{ width:var(--card-w); height:0; }

.card:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.18), var(--glow-red); }

/* Subtle per-Path background tints for door cards */
.card.path-accent-everyday{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--glass-bg) 92%, var(--brand) 8%),
    color-mix(in oklab, var(--glass-bg) 96%, var(--brand) 4%)
  );
  border-color: color-mix(in oklab, var(--border) 70%, var(--brand) 30%);
}
.card.path-accent-praxis{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--glass-bg) 92%, var(--brand) 8%),
    color-mix(in oklab, var(--glass-bg) 96%, var(--brand) 4%)
  );
  border-color: color-mix(in oklab, var(--border) 70%, var(--brand) 30%);
}

/* Subtle tints for sub-path promo cards on Esoteric hub */
.promo-card.path-accent-alchemy,
.promo-card.path-accent-astrology,
.promo-card.path-accent-tarot{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--surface-2) 92%, var(--brand) 8%),
    color-mix(in oklab, var(--surface-2) 96%, var(--brand) 4%)
  );
  border-color: color-mix(in oklab, var(--border) 70%, var(--brand) 30%);
}

@media (max-width:1280px){ :root{ --card-w: 320px; } }
@media (max-width:1024px){ :root{ --card-w: 300px; } }
@media (max-width:720px){
	.cols-2,.cols-3{ grid-template-columns:1fr; }
	.card{ width:100%; }
	.spacer{ display:none; }
}

/* News-card pattern */
.card-news{
    position:relative; isolation:isolate;
    background: var(--glass-bg); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
    border-radius: var(--radius); border:2px solid var(--border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.03);
    display:flex; flex-direction:column; height:100%; transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden; /* ensure top corners are rounded even with full-bleed image */
}
.card-news:hover{ border-color: color-mix(in oklab, var(--border) 65%, #ffffff 35%); box-shadow: var(--shadow-sm), var(--glow-red); }
.card-news::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; box-shadow:none; }
.card-news .thumb{
  position:relative; aspect-ratio:16/9; background:#111; overflow:hidden;
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
}
.card-news .thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block;
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}
/* Subtle bottom gradient for future text-on-image */
.card-news .thumb::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48%;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events:none; border-top-left-radius: inherit; border-top-right-radius: inherit;
}
[data-theme="light"] .card-news .thumb::after{
  background: linear-gradient(to top, rgba(0,0,0,.30), rgba(0,0,0,0));
}
.card-news .body{ padding:14px 16px; }
.card-news .kicker{ font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.card-news h4{ margin:.25rem 0 .5rem 0; }
.card-news .date{ color:var(--muted); font-size:.85rem; }

.card-news:hover{ transform: translateY(-2px); }
/* Blog card glow: keep subtle (use outer box-shadow only) */
.card-news:hover::after{ box-shadow: none; }
[data-theme="light"] .card-news:hover::after{ box-shadow: none; }

/* Principles: add a subtle scale-up with lift */
.principles-grid .card:hover{ transform: translateY(-3px) scale(1.02); }

/* small variant */
.card-news--sm .thumb{ aspect-ratio:4/3; }
.card-news--sm .body{ padding:12px 14px; }
.card-news--sm h4{ font-size:1rem; margin:.2rem 0 .4rem; }
.card-news--sm .kicker{ font-size:.75rem; }
.card-news--sm .date{ font-size:.8rem; }

/* =========================================================
 Hero section (structural; shared helper in Shell.swift)
 ========================================================= */

.hero-card{
    position:relative; overflow:hidden; border-radius: var(--radius); border:2px solid var(--border);
    margin:26px auto; max-width: var(--container);
    height:auto;
    aspect-ratio: 1200 / 732;
    box-shadow: var(--shadow-lg), var(--glow-red);
}
.hero-card--slim{
    aspect-ratio: 1200 / 325;
}
.hero-card::before{ content:""; position:absolute; inset:-24px; border-radius:inherit; pointer-events:none; box-shadow: var(--glow-red); z-index:0; }
.hero-card::after{
	content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
	background: radial-gradient(circle at center, rgba(239,35,60,.18) 0%, rgba(239,35,60,0) 75%); z-index:0;
}
.hero-media{ position:absolute; inset:0; z-index:1; }

.hero-media img{
	width:100%; height:100%; object-fit:cover; object-position:center 44%; opacity:.85;
	filter: brightness(1.05) contrast(1.08) saturate(1.05);
	position:absolute; inset:0;
}
.hero-overlay{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65));
  z-index:1;
}
.hero-media video{ }
.hero-card--plain .hero-media img{
  opacity:1;
  filter:none;
  object-fit:contain;
  object-position:center;
}
.hero-body{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; height:100%; padding:28px; gap:8px; }

/* Shorter heroes on small screens for mobile comfort */
@media (max-width: 720px){
  .hero-card{ margin:20px auto; }
  .hero-body{ padding:22px; }
}

/* Post hero text alignment and chip styling (no backgrounds) */
.hero-card .hero-body .kicker{ margin:0; }
.hero-card .hero-body h1{ margin:0; }
.hero-card .hero-body .date{ margin:0; }
.hero-card .hero-body .topic-row{ justify-content:center; margin:0; }
.hero-card .hero-body .chip{
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  color: var(--text);
}
.hero-card .hero-body .chip:hover{
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
}

/* Align article content baseline with sidebar when first element is an image or heading */
.post-body > *:first-child{ margin-top: 0 !important; }

/* Simple rule and spacers */
.rule{ border:0; border-top:1px solid var(--border); margin: 18px 0; }
.spacer{ height: 18px; }
.spacer.is-sm{ height: 10px; }
.spacer.is-md{ height: 18px; }
.spacer.is-lg{ height: 28px; }

/* =========================================================
 Media Frames for post images
 ========================================================= */
.media-frame{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg), var(--glow-red);
  margin: 14px 0; /* breathing room around frames */
}
.media-frame--landscape{ aspect-ratio: 16 / 9; }
.media-frame--portrait{ aspect-ratio: 4 / 5; }
.media-frame > img,
.media-frame > a > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-frame::after{
  content: "";
  position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: var(--glow-red);
}

/* Light theme tuning for frames */
[data-theme="light"] .media-frame{ box-shadow: var(--shadow-lg), var(--glow-ink); }
[data-theme="light"] .media-frame::after{ box-shadow: var(--glow-ink); }

/* =========================================================
 Inline Media (mid-article smaller framed images)
 ========================================================= */
.media-inline{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-md), var(--glow-red);
  display: block;
  max-width: clamp(240px, 42vw, 520px);
  margin: 10px auto; /* centered by default */
}
.media-inline--landscape{ aspect-ratio: 4 / 3; }
.media-inline--portrait{ aspect-ratio: 3 / 4; }
.media-inline > img,
.media-inline > a > img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-inline::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; box-shadow: var(--glow-red); }

/* Align helpers for desktop; center on mobile */
.media-inline.align-right{ float:right; margin: 8px 0 12px 18px; }
.media-inline.align-left { float:left;  margin: 8px 18px 12px 0; }
@media (max-width: 860px){
  .media-inline.align-right,
  .media-inline.align-left{ float:none; margin: 12px auto; }
}

/* Caption support when author uses <figure class="frame-inline"> */
.media-inline figcaption{ font-size:.9rem; color:var(--muted); text-align:center; margin-top:6px; }
[data-theme="light"] .media-inline{ box-shadow: var(--shadow-md), var(--glow-ink); }
[data-theme="light"] .media-inline::after{ box-shadow: var(--glow-ink); }

/* Gallery */
.gallery{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.gallery.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.gallery.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.gallery.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .gallery.cols-4{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px){ .gallery, .gallery.cols-4, .gallery.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .gallery{ grid-template-columns: 1fr; } }

/* Column layout shortcode */
.sc-cols{ display:grid; gap:18px; margin: 12px 0; }
.sc-cols.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.sc-cols.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.sc-cols.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .sc-cols.cols-4{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px){ .sc-cols.cols-3, .sc-cols.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .sc-cols{ grid-template-columns: 1fr; } }

/* =========================================================
 Callouts
 ========================================================= */
.callout{
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 14px 16px;
  margin: 14px 0;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.callout::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; box-shadow: var(--glow-red); }
.callout .title{ font-weight: 800; margin: 0 0 6px 0; letter-spacing: .01em; }
.callout .body{ color: var(--muted); }
.callout.is-tip{ border-color: color-mix(in oklab, var(--brand) 45%, var(--border) 55%); }
.callout.is-warn{ border-color: color-mix(in oklab, orange 45%, var(--border) 55%); }
.callout.is-note{ border-color: color-mix(in oklab, #88a 45%, var(--border) 55%); }
[data-theme="light"] .callout::after{ box-shadow: var(--glow-ink); }

/* =========================================================
 Pullquotes
 ========================================================= */
.pullquote{ margin: 18px auto; max-width: min(820px, 92%); text-align:center; }
.pullquote blockquote{
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(239,35,60,.08), transparent);
  border-radius: 12px;
}
.pullquote figcaption{ margin-top: 6px; color: var(--muted); font-size: .95rem; }
.pullquote.is-left{ text-align:left; }
.pullquote.is-right{ text-align:right; }

/* Post meta row */
.post-meta{ color: var(--muted); font-size:.95rem; margin: 8px 0 16px; text-align:center; }

/* Prev/Next navigation */
.postnav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin: 24px 0 6px; }
.postnav a{ color: var(--text); text-decoration:none; padding:6px 10px; border-radius:10px; border:1px solid var(--border); background: var(--surface-2); box-shadow: var(--shadow-sm); }
.postnav a:hover{ box-shadow: var(--shadow-lg), var(--glow-red); }
.postnav .disabled{ opacity:.4; }

/* Table of contents */
.toc{ border:2px solid var(--border); border-radius: var(--radius); padding:12px 14px; background: var(--surface-2); box-shadow: var(--glow-red); margin: 10px 0 16px; }
.toc::after{ content:""; position:absolute; inset: -2px; border-radius:inherit; pointer-events:none; box-shadow: }
.toc-title{ font-weight:800; letter-spacing:.01em; margin-bottom:8px; }
.toc-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.toc-list .lv-3{ margin-left: 12px; }
.toc-list .lv-4{ margin-left: 24px; }

/* Stat/Metric */
.stat{ display:inline-grid; gap:4px; padding:10px 14px; border-radius:14px; border:1px solid var(--border); background: var(--surface-2); box-shadow: var(--shadow-sm); min-width:120px; text-align:center; }
.stat .value{ font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight:800; letter-spacing:-0.01em; }
.stat .label{ color: var(--muted); font-size:.95rem; }
.stats-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin: 10px 0; }

/* Promo Card */
.promo-card{ display:block; text-decoration:none; color: var(--text); border:2px solid var(--border); border-radius: var(--radius); background: var(--surface-2); box-shadow: var(--shadow-lg); overflow:hidden; }
.promo-card:hover{ box-shadow: var(--shadow-lg), var(--glow-red); }
.promo-card .thumb{ aspect-ratio: 16/9; overflow:hidden; }
.promo-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.promo-card .body{ padding:12px 14px; }
.promo-card .kicker{ color: var(--muted); font-weight:700; font-size:.9rem; margin:0 0 6px 0; letter-spacing:.02em; }
.promo-card h4{ margin:.2rem 0 .2rem 0; font-size:1.1rem; font-weight:800; letter-spacing:-0.01em; }

/* YouTube embed */
.embed{ position:relative; border-radius: var(--radius); border:2px solid var(--border); background: var(--surface-2); box-shadow: var(--shadow-lg), var(--glow-red); overflow:hidden; aspect-ratio: 16/9; }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; }
[data-theme="light"] .embed{ box-shadow: var(--shadow-lg), var(--glow-ink); }

/* Audio player frame */
.audio{ border:2px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding:12px; box-shadow: var(--shadow-lg); }
.audio::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; box-shadow: var(--glow-red); }
.audio figcaption{ margin-top:6px; color: var(--muted); font-size:.95rem; text-align:center; }
[data-theme="light"] .audio::after{ box-shadow: var(--glow-ink); }

/* Generic kicker inline style */
.kicker{ font-weight:800; letter-spacing:.03em; text-transform:uppercase; font-size:.9rem; }

/* =========================================================
 FAQ
 ========================================================= */

.faq{ background:var(--surface-2); border-radius:var(--radius); padding:8px; }
.faq details{ background:var(--surface); border-radius:14px; margin:8px 0; padding:14px 16px; border:1px solid var(--border); }
.faq summary{ cursor:pointer; font-weight:700; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq p{ color:var(--muted); margin:.6rem 0 0; }

/* =========================================================
 Support (icon grid)
 ========================================================= */

/* Not referenced currently; structural utility for future icon grids */
.icon-row{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; }
.icon-row .item{
	flex:0 0 auto; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
	padding:18px 16px; width:120px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.icon-row .item:hover{ background: color-mix(in oklab, var(--brand) 10%, transparent); box-shadow: var(--glow-red); transform: translateY(-3px); }
.icon-row img{ width:44px; height:44px; display:block; margin:0 auto 8px; }
.icon-row p{ margin:0; font-size:.9rem; color:var(--muted); }

/* =========================================================
 Brand glow variants
 ========================================================= */

.brand img{ display:block; height:40px; }
.brand.glow-red img{ filter: drop-shadow(0 0 12px rgba(239,35,60,.7)) drop-shadow(0 0 24px rgba(239,35,60,.45)); }
[data-theme="light"] .brand.glow-red img{ filter: drop-shadow(0 0 12px rgba(0,0,0,.22)) drop-shadow(0 0 24px rgba(0,0,0,.16)); }
/* Not referenced; keep variants handy for future brand accents */
.brand.glow-blue img{ filter: drop-shadow(0 0 12px rgba(56,189,248,.7)) drop-shadow(0 0 24px rgba(56,189,248,.45)); }
.brand.glow-emerald img{ filter: drop-shadow(0 0 12px rgba(16,185,129,.7)) drop-shadow(0 0 24px rgba(16,185,129,.45)); }
.brand.glow-amethyst img{ filter: drop-shadow(0 0 12px rgba(167,139,250,.7)) drop-shadow(0 0 24px rgba(167,139,250,.45)); }
.brand.glow-gold img{ filter: drop-shadow(0 0 12px rgba(253,224,71,.7)) drop-shadow(0 0 24px rgba(253,224,71,.45)); }

/* =========================================================
 Light mode tweaks
 ========================================================= */

[data-theme="light"] .card,
[data-theme="light"] .card-news,
[data-theme="light"] .site-header{ border-color: color-mix(in oklab, var(--border) 88%, var(--brand) 12%); }

[data-theme="light"] .card-news{ background: color-mix(in oklab, var(--surface) 90%, #fff 10%); box-shadow: var(--shadow-sm); }

.card--floating::after{ box-shadow: none; }
[data-theme="light"] .card--floating::after{ box-shadow: none; }
[data-theme="light"] .card--floating:hover::after{
    box-shadow: 0 12px 48px rgba(0,0,0,.22), 0 26px 96px rgba(0,0,0,.32), 0 0 70px rgba(0,0,0,.38);
}
/* Default (dark) hover glow */
.card--floating:hover::after{ box-shadow: var(--glow-red); }

/* Light mode hero polish */
[data-theme="light"] .hero-card{ box-shadow: var(--shadow-lg), var(--glow-ink); }
[data-theme="light"] .hero-card::before{ content:""; position:absolute; inset:-24px; border-radius:inherit; pointer-events:none; box-shadow: var(--glow-ink); z-index:0; }
[data-theme="light"] .hero-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:none; z-index:0; }
[data-theme="light"] .hero-media img{ opacity:1; filter:none; }
[data-theme="light"] .hero-overlay{ display:none; }
[data-theme="light"] .hero-media img{
	opacity:.85; filter: brightness(1.22) contrast(1.25) saturate(1.08) drop-shadow(0 14px 36px rgba(0,0,0,.28)) drop-shadow(0 0 48px rgba(0,0,0,.38));
}
/* Not referenced; reserved for future hero accent panel */
[data-theme="light"] .hero-accent{
	background: color-mix(in oklab, var(--brand) 12%, transparent);
	border: 2px solid color-mix(in oklab, var(--brand) 92%, #fff 8%);
	-webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
	box-shadow: var(--glow-ink), 0 0 66px rgba(239,35,60,.22); opacity:.98;
}
[data-theme="light"] .hero-accent::after{
	background: linear-gradient(to bottom, color-mix(in oklab, var(--brand) 26%, transparent) 0%, transparent 50%); opacity:.9;
}

/* =========================================================
 Article/content helpers (shortcode-driven)
 - Applies within .post-body and shortcode outputs
 ========================================================= */

.post-content img{
	max-width:100%; height:auto; display:block; margin:1.25rem auto;
	border-radius:14px; background:var(--surface); box-shadow: var(--shadow-sm);
	border:1px solid var(--border);
}
[data-theme="light"] .post-content img{ box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.post-content a > img{ box-shadow: var(--shadow-sm); border:0; }

.post-content figure{ margin:1.5rem 0; text-align:center; }
.post-content figcaption{ color:var(--muted); font-size:.95rem; margin-top:.5rem; }

.post-content .img-left{ float:left; margin:.5rem 1rem .75rem 0; }
.post-content .img-right{ float:right; margin:.5rem 0 .75rem 1rem; }
.post-content .img-center{ margin-left:auto; margin-right:auto; float:none; }
.post-content h1,.post-content h2,.post-content h3,
.post-content p,.post-content ul,.post-content ol{ clear:both; }

/* size utilities */
.post-content .w-33{ width:min(33%, 420px); }
.post-content .w-50{ width:min(50%, 560px); }
.post-content .w-66{ width:min(66%, 760px); }
.post-content .w-75{ width:min(75%, 880px); }
.post-content .w-100{ width:100%; }

/* wide “bleed” images */
@media (min-width: 960px){
	.post-content .img-bleed{
		width:min(1200px, 100vw); max-width:100vw;
		margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
		border-radius:0;
	}
}

/* cap super tall images on desktop */
@media (min-width: 900px){
	.post-body img{ max-height:78vh; }
}

/* topic chips */
.topic-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 1.25rem; }
.chip{
	display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem;
	border-radius:999px; font-size:.9rem; border:1px solid var(--border);
	background:var(--surface-2); color:var(--text);
}
.chip--brand{
	/* Emphasize local brand for Path‑tinted cards */
	border-color: color-mix(in oklab, var(--brand) 55%, var(--border) 45%);
	color: color-mix(in oklab, var(--brand) 78%, #fff 22%);
	background: color-mix(in oklab, var(--surface-2) 85%, var(--brand) 15%);
}
.chip:hover{ background: color-mix(in oklab, var(--brand) 10%, transparent); box-shadow: var(--glow-red); }
.chip:focus-visible{ outline:2px solid color-mix(in oklab, var(--brand) 60%, #fff 40%); outline-offset:2px; box-shadow: var(--glow-red); }

/* small icon for cards */
.card .icon{ font-size:1.25rem; margin-right:.5rem; display:inline-block }
/* merged into earlier .card .title rule */
.chip .dot{ width:.55rem; height:.55rem; border-radius:50%; box-shadow:0 0 10px currentColor; }

/* Segmented control (Apple-inspired) */
.filter-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 10px 0 16px; }
.seg{
  display:inline-flex; align-items:center; gap:0; padding:4px; border-radius:12px;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.seg-btn{
  appearance:none; -webkit-appearance:none; background:transparent; border:0; cursor:pointer; user-select:none;
  padding:8px 12px; border-radius:10px; color:var(--muted); font-weight:600; text-decoration:none;
}
.seg-btn:hover{ color:var(--text); background: color-mix(in oklab, var(--brand) 8%, transparent); }
.seg-btn.is-active{
  background: color-mix(in oklab, var(--surface) 75%, #fff 25%);
  color: var(--text);
  box-shadow: 0 1px 8px rgba(0,0,0,.10), var(--glow-red);
}
.seg-btn:focus-visible{ outline:3px solid color-mix(in oklab, var(--brand) 50%, #fff 50%); outline-offset:2px; }

/* Button styles (for CTAs) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; font-weight:700; border-radius:12px; padding:.7rem 1.1rem; transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease; }
.btn--primary{ background: color-mix(in oklab, var(--brand) 22%, #fff 78%); color:#111; border:1px solid color-mix(in oklab, var(--brand) 40%, rgba(10,15,20,.18) 60%); box-shadow: 0 2px 10px rgba(0,0,0,.08), var(--glow-red); }
.btn--primary:hover{ background: color-mix(in oklab, var(--brand) 30%, #fff 70%); box-shadow: 0 4px 18px rgba(0,0,0,.14), 0 0 22px rgba(239,35,60,.45); }
.btn--ghost{ background: transparent; color: var(--text); border:1px solid color-mix(in oklab, var(--border) 65%, var(--text) 35%); }
.btn--ghost:hover{ background: color-mix(in oklab, var(--brand) 10%, transparent); box-shadow: 0 4px 18px rgba(0,0,0,.12), 0 0 18px rgba(239,35,60,.35); }
.btn--link{ background:transparent; border:0; color: var(--text); padding:.2rem 0; box-shadow:none; }
.btn--link:hover{ text-decoration: underline; box-shadow:none; background:transparent; }
.btn:focus-visible{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 50%, #fff 50%), 0 0 30px rgba(239,35,60,.35); }
.cta-row{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.btn--sm{ padding:.5rem .8rem; font-size:.95rem; border-radius:10px; }
.btn--lg{ padding: .9rem 1.3rem; font-size: 1.05rem; }
.sf-icon{ display:inline-block; vertical-align:middle; margin-right:.4rem; }
.btn .sf-icon{ margin-right:.5rem; position:relative; top:0.5px; }
.title .sf-icon{ position:relative; top:0.5px; }
.btn + .btn {margin-left: 1rem;} /* only adds margin if another button is before it */

/* More… popover */
.more{ position:relative; }
.more .popover{
  display:none; position:absolute; right:0; top:calc(100% + 8px);
  width: min(320px, calc(100vw - (2 * var(--page-pad-x))));
  max-height:420px; overflow:auto;
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius:14px; background: var(--surface); box-shadow: var(--shadow-lg);
  padding:14px; z-index: 45;
}
.more.is-open .popover{ display:block; }
.popover h4{ margin:4px 4px 10px; font-size:1rem; }
.pop-list{ display:grid; gap:8px; }
.check{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px 10px; border-radius:10px; }
.check:hover{ background: color-mix(in oklab, var(--brand) 10%, transparent); }
.check input{ width:16px; height:16px; }
.check .count{ color:var(--muted); font-size:.85rem; }
.pop-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:12px; }

/* =========================================================
 Blog layout (sidebar + grids)
 ========================================================= */

/* visual style for sidebar (grid placement handled by shell layout in base.css) */
.sidebar{
	position:relative;
	background: var(--glass-bg); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
	border:2px solid var(--border); border-radius: var(--radius);
	padding:16px 22px; box-shadow: var(--shadow-lg);
}
.sidebar::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; box-shadow: var(--glow-red); }

/* sidebar widgets */
.widget{ margin-bottom:18px; }
.widget h4{ margin:0 0 .5rem 0; font-size:1rem; letter-spacing:.02em; }
.widget ul{ list-style:none; padding:0; margin:0; display:grid; gap:.25rem; }
.widget a{
	display:block; color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:10px;
}
.widget a:hover{ color:var(--text); background: color-mix(in oklab, var(--brand) 10%, transparent); box-shadow: var(--glow-red); }

/* blog index grid when a sidebar is present (drop to 2-up/1-up responsively) */
.blog-grid{
	display:grid; gap:22px;
	grid-template-columns: repeat(3, minmax(260px, 1fr));
	align-items: stretch;
}
@media (max-width: 1200px){
	.blog-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 600px){
	.blog-grid{ grid-template-columns: 1fr; }
}

/* related row under an article */
.related-row{
    margin-top:28px; display:grid; gap:22px; grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 1000px){
    .related-row{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* =========================================================
 Article typography -text helpers
 ========================================================= */

/* Header bits above the body */
article header{ margin: 6px 0 12px; }
article header .date{ color: var(--muted); font-size: .95rem; margin-top: .25rem; }
article header p a{ color: var(--muted); text-decoration: none; }
article header p a:hover{ color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Comfortable reading defaults */
.post-body{
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.72;
  letter-spacing: .005em;
  color: color-mix(in oklab, var(--text) 92%, #000 8%);
}
.post-body > p:first-of-type{
  font-size: clamp(1.06rem, 1.6vw, 1.18rem);
  line-height: 1.75;
  color: color-mix(in oklab, var(--text) 88%, #000 12%);
}
.post-body p{ margin: 0 0 1.05rem; }

/* Headings with subtle weight and spacing */
.post-body h2{
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 1.6rem 0 .6rem;
  color: color-mix(in oklab, var(--brand) 86%, #fff 14%);
}
.post-body h3{
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 750;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 1.25rem 0 .5rem;	
  color: color-mix(in oklab, var(--brand) 68%, #fff 32%);
}
.post-body h4{
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1rem 0 .35rem;
}

/* 🌈 Rainbow Colors (safe as tags) */
Red, .Red        { color: crimson; }
Orange, .Orange  { color: darkorange; }
Yellow, .Yellow  { color: goldenrod; }
Green, .Green    { color: seagreen; }
Blue, .Blue      { color: royalblue; }
Indigo, .Indigo  { color: indigo; }
Violet, .Violet  { color: violet; }

/* Bonus extras */
Pink, .Pink      { color: hotpink; }
Cyan, .Cyan      { color: darkcyan; }
Gold, .Gold      { color: gold; }
Silver, .Silver  { color: silver; }
White, .White    { color: white; }
Black, .Black    { color: black; }

/* ✨ Bold (use span class, or <strong> if semantic) */
.B1 { font-weight: 800; }
.BRed   { font-weight: 800; color: crimson; }
.BBlue  { font-weight: 800; color: royalblue; }
.BGreen { font-weight: 800; color: seagreen; }

/* 🔦 Highlights (tags are fine, since Markdown keeps them) */
Highlight, .Highlight {
	background: yellow;
	color: black;
	padding: 0 0.2em;
	border-radius: 0.2em;
}
Glow, .Glow {
	background: linear-gradient(90deg, gold, orange);
	color: black;
	padding: 0 0.25em;
	border-radius: 0.3em;
}

GlowR, .GlowR {
	background: linear-gradient(90deg, pink, red);
	color: black;
	padding: 0 0.25em;
	border-radius: 0.3em;
}


SoftHighlight, .SoftHighlight {
	background: rgba(255,255,0,0.3);
	padding: 0 0.2em;
	border-radius: 0.2em;
}

.BrushBlue {
	position: relative;
	display: inline-block;
	padding-bottom: 0.3em; /* room for brush */
}

.BrushBlue::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 0.6em;
	background: url('data:image/svg+xml;utf8,
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 40" preserveAspectRatio="none">
	<path d="M5 25 C 50 10, 150 40, 215 20"
	stroke="blue"
	stroke-width="12"
	stroke-linecap="round"
	stroke-linejoin="round"
	fill="none"/>
	</svg>
  ') no-repeat center bottom;
  background-size: 100% 100%;
  pointer-events: none;
}

/* 🔥 Funky Underlines */
.UL1 {
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: deeppink;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.UL2 {
	text-decoration-line: underline;
	text-decoration-style: double;
	text-decoration-color: teal;
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}

.UL3 {
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: limegreen;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.UL4 {
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: darkred;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 🌀 Pre-baked combos (classes only) */
.BR1 { font-weight: 800; color: crimson; }   /* Bold Red */
.BR2 { font-weight: 800; color: royalblue; } /* Bold Blue */
.BR3 { font-weight: 800; color: seagreen; }  /* Bold Green */

/* Links with modern underline */
.post-body a{
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--brand) 65%, #fff 35%);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.post-body a:hover{
  text-decoration-color: color-mix(in oklab, var(--brand) 85%, #fff 15%);
}

/* Lists */
.post-body ul, .post-body ol{ padding-left: 1.25rem; margin: .1rem 0 1.05rem; }
.post-body li{ margin: .35rem 0; }

/* Blockquotes */
.post-body blockquote{
  margin: 1.1rem 0; padding: .9rem 1rem .9rem 1.05rem;
  background: color-mix(in oklab, var(--surface-2) 92%, transparent);
  border-left: 3px solid color-mix(in oklab, var(--brand) 80%, #fff 20%);
  border-radius: 12px;
  color: color-mix(in oklab, var(--text) 86%, #000 14%);
}
.post-body blockquote p{ margin: 0; }

/* Code */
.post-body code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; background: color-mix(in oklab, var(--surface) 80%, transparent); padding: .1rem .35rem; border-radius: 6px; }
.post-body pre{ background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; overflow:auto; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.post-body pre code{ background: transparent; padding: 0; font-size: .95rem; display:block; }

/* Horizontal rule */
.post-body hr{
  height: 1px; border: 0; margin: 1.4rem 0;
  background: linear-gradient(to right, transparent, color-mix(in oklab, var(--brand) 35%, transparent), transparent);
}

/* Figures and captions (align with existing post-content styles) */
.post-body figure{ margin: 1.5rem 0; text-align: center; }
.post-body figcaption{ color: var(--muted); font-size: .95rem; margin-top: .5rem; }

/* Light mode tweaks for readability */
[data-theme="light"] .post-body{
  color: color-mix(in oklab, var(--text) 96%, #000 4%);
}
[data-theme="light"] .post-body h2{
  color: color-mix(in oklab, var(--brand) 78%, #000 22%);
}
[data-theme="light"] .post-body h3{
  color: color-mix(in oklab, var(--brand) 62%, #000 38%);
}
[data-theme="light"] .post-body blockquote{
  background: color-mix(in oklab, #fff 86%, var(--surface) 14%);
  border-left-color: color-mix(in oklab, var(--brand) 70%, #000 30%);
}

/* Auto drop cap: first paragraph of the post body */
.post-body > p:first-of-type::first-letter{
  float: left;
  font-size: clamp(3rem, 6vw, 4.4rem);
  line-height: .86;
  padding-right: .18rem;
  margin-top: .1rem;
  font-weight: 800;
  color: color-mix(in oklab, var(--brand) 74%, #fff 26%);
}

/* Opt-out helpers */
.post-body.no-dropcap > p:first-of-type::first-letter{ float:none; font-size:inherit; line-height:inherit; padding:0; margin:0; color:inherit; }
.no-brand-headings .post-body h2{ color: inherit; }

/* Colored heading utilities */
.u-heading-brand{ color: color-mix(in oklab, var(--brand) 86%, #fff 14%); }
.u-heading-emerald{ color: #10b981; }
.u-heading-amethyst{ color: #a78bfa; }
.u-heading-sky{ color: #38bdf8; }

/* Gradient text utility */
.u-gradient-text{
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 70%, #fff 30%), #a78bfa 50%, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* Pull quote */
.pull-quote{
  position: relative;
  margin: 1.4rem 0; padding: 1.1rem 1.2rem 1.1rem 1.2rem;
  border-radius: 14px; background: color-mix(in oklab, var(--surface-2) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.5; font-weight: 700;
}
.pull-quote::before{
  content: "\201C"; position:absolute; left:12px; top:6px; font-size:2.4rem; line-height:1; color: color-mix(in oklab, var(--brand) 80%, #fff 20%);
}
.pull-quote cite{ display:block; margin-top:.6rem; font-size:.95rem; color:var(--muted); font-style: normal; }

/* Callouts (admonitions) */
.callout{
  margin: 1rem 0; padding: .85rem 1rem; border-radius: 12px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
}
.callout strong{ display:block; margin-bottom:.25rem; letter-spacing:.01em; }
.callout.is-info{ border-left: 3px solid #38bdf8; }
.callout.is-warn{ border-left: 3px solid #f59e0b; }
.callout.is-success{ border-left: 3px solid #10b981; }
.callout.is-danger{ border-left: 3px solid #ef4444; }

/* Tables */
.post-body table{ width:100%; border-collapse: collapse; margin: 1rem 0; font-size: .98rem; }
.post-body th, .post-body td{ border:1px solid color-mix(in oklab, var(--border) 80%, transparent); padding:.55rem .6rem; text-align:left; }
.post-body thead th{ background: color-mix(in oklab, var(--surface-2) 92%, transparent); }

/* Highlights & keys */
.post-body mark{ background: color-mix(in oklab, var(--brand) 25%, #fff 75%); color:#111; border-radius: 4px; padding: .05rem .25rem; }
.post-body kbd{ background: color-mix(in oklab, var(--surface) 85%, #000 15%); border:1px solid var(--border); border-bottom-color: color-mix(in oklab, var(--border) 40%, #000 60%); border-radius:6px; padding:.08rem .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em; box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }



/* Row: wraps and scrolls nicely on small screens */
.topic-row{
	display:flex;
	flex-wrap:wrap;
	gap:.75rem;
	margin:.5rem 0 1rem;
	padding:.25rem 0;
	overflow-x:auto;           /* graceful on very small screens */
	-webkit-overflow-scrolling: touch;
}
.topic-row::-webkit-scrollbar{ display:none; } /* optional, hide scrollbar */

/* Base pill */
.chip{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	white-space:nowrap;
	padding:.55rem 1.1rem;
	border-radius:9999px;
	border:1.5px solid color-mix(in oklab, var(--border) 85%, var(--text) 15%);
	background: color-mix(in oklab, var(--surface) 92%, transparent);
	color: color-mix(in oklab, var(--text) 92%, #000 8%);
	text-decoration:none;
	font-weight:600;
	letter-spacing:.01em;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .02s ease;
	box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Hover/focus */
.chip:hover{
	background: color-mix(in oklab, var(--surface) 85%, var(--brand) 15%);
	border-color: color-mix(in oklab, var(--border) 60%, var(--brand) 40%);
}
.chip:focus-visible{
	outline: 3px solid color-mix(in oklab, var(--brand) 50%, #fff 50%);
	outline-offset: 2px;
}

/* Active (filled) */
.chip.is-active{
	background: color-mix(in oklab, var(--surface) 65%, #fff 35%);
	border-color: color-mix(in oklab, var(--border) 35%, var(--text) 65%);
	color: var(--text);
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* “All” pill gets a subtle stronger border when not active */
.chip--all:not(.is-active){
	border-color: color-mix(in oklab, var(--border) 70%, var(--text) 30%);
}

/* Light mode polish */
[data-theme="light"] .chip{
	background:#fff;
	border-color: rgba(10,15,20,.16);
	color:#111;
	box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
[data-theme="light"] .chip--brand{
	border-color: color-mix(in oklab, var(--brand) 60%, rgba(10,15,20,.16) 40%);
	background: color-mix(in oklab, #fff 85%, var(--brand) 15%);
	color:#111;
}
[data-theme="light"] .chip:hover{
	background: color-mix(in oklab, #fff 85%, var(--brand) 15%);
	border-color: color-mix(in oklab, rgba(10,15,20,.16) 40%, var(--brand) 60%);
}
[data-theme="light"] .chip.is-active{
	background: color-mix(in oklab, #fff 70%, var(--brand) 6%);
	border-color: rgba(10,15,20,.28);
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* Reduce size a bit on tight screens */
@media (max-width: 560px){
	.chip{ padding:.5rem .9rem; font-weight:600; }
}

/* =========================================================
 Cookie banner
 ========================================================= */
.cookie-banner{
  display:none; position:fixed; left:var(--site-gutter); right:var(--site-gutter); bottom:var(--site-gutter);
  z-index:60; gap:14px; align-items:center; justify-content:space-between;
  background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 14px;
  box-shadow: var(--shadow-lg);
}
.cookie-banner .cookie-text{ margin:0; color:var(--muted); }
.cookie-banner .cookie-accept{ white-space:nowrap; }