@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Jost:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap");
/* Cleverbase gen1 — shared stylesheet. Tokens come from :root (variant.php). */
/* bethanysewandsew.com: Instrument Serif for headlines — a high-contrast display serif with one
   weight, which is why the trims below set headings to 400 instead of letting the browser fake a
   bold. Jost for the body: a geometric sans in the Futura line, the lettering the fashion trade
   has used on covers for eighty years. DM Mono carries the cost-per-wear figures. */
:root{--font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --warn:#8a4b14} /* rare secondary: reserved */

/* ---------- reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-soft);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark);text-decoration:underline}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);line-height:1.22;color:var(--ink);
  margin:0 0 .5em;font-weight:700}
h1{font-size:2.1rem}h2{font-size:1.6rem}h3{font-size:1.3rem}h4{font-size:1.1rem}
p,ul,ol,blockquote,figure,table{margin:0 0 1.1rem}
blockquote{border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1rem;color:var(--muted);font-style:italic}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- layout ---------- */
.container{max-width:var(--maxwidth);margin:0 auto;padding:0 20px}
.site-main{padding:34px 0 48px}
.layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
@media(max-width:960px){.layout{grid-template-columns:1fr}}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;background:#fff;padding:8px 14px;z-index:1000;border-radius:var(--radius)}

/* ---------- header: composed from independent axes ----------
   header_style (structure) x brand_mark x nav_style x header_device = 875 combinations.
   Header-local tokens (--h-*) let one nav implementation work on both the dark shell and the
   light 'rule' structure, so the axes stay genuinely independent instead of fighting each other. */
.site-header{background:var(--shell);color:var(--shell-ink);
  --h-ink:var(--shell-ink);--h-muted:var(--shell-muted);
  --h-hair:rgba(255,255,255,.15);--h-hover:rgba(255,255,255,.08);--h-line:rgba(255,255,255,.30);
  --h-accent:var(--shell-ink)} /* on the dark shell the accent is too dark for text; borders still use --accent */
.site-header a{color:var(--h-ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:700;font-size:1.4rem;line-height:1.1}
.brand img{max-height:46px;width:auto}
.brand .tagline{display:block;font-family:var(--font-body);font-weight:400;font-size:.72rem;
  color:var(--h-muted);letter-spacing:.02em;margin-top:2px}
.brand a:hover{text-decoration:none}

/* --- axis: header_device (the accent gesture) --- */
.hd-under3{border-bottom:3px solid var(--accent)}
.hd-top5{border-top:5px solid var(--accent)}
.hd-hairline{border-bottom:1px solid var(--h-line)}
.hd-double{border-bottom:1px solid var(--h-line);position:relative}
.hd-double::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--accent)}

/* --- axis: brand_mark --- */
.hm-rule .brand-text{display:inline-block;padding-top:8px;border-top:2px solid var(--accent)}
.hm-initial .bm-initial{font-size:1.32em;line-height:.85;color:var(--h-accent)}
.site-header--rule.hm-initial .bm-initial{color:var(--accent)}
.hm-bracket .bm-br{color:var(--h-accent);font-weight:400;margin:0 .1em;opacity:.75}
.site-header--rule.hm-bracket .bm-br{color:var(--accent);opacity:1}
.hm-dot .bm-dot{display:inline-block;width:.32em;height:.32em;border-radius:50%;
  background:var(--h-accent);margin-left:.2em;vertical-align:.12em}
.site-header--rule.hm-dot .bm-dot{background:var(--accent)}
.hm-stack .brand{flex-direction:column;align-items:flex-start;gap:0}
.hm-stack .tagline{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;margin-top:5px}

/* --- the site signature slot (filled by the site's own gimmick) --- */
.header-mark{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  color:var(--h-muted);text-align:right;line-height:1.45;margin-left:auto}
.header-mark strong{color:var(--h-ink);font-weight:600}
.header-mark a{border-bottom:1px solid var(--h-hair)}
@media(max-width:960px){.header-mark{display:none}}

/* ---------- header structures ---------- */

/* masthead — centred brand over a nav on its own rule. Editorial / journal. */
.site-header--masthead .header-inner{flex-direction:column;justify-content:center;gap:0;padding:20px 0 0;min-height:0}
.site-header--masthead .brand{flex-direction:column;text-align:center;gap:8px;font-size:1.75rem;letter-spacing:.01em}
.site-header--masthead .brand .tagline{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;margin-top:4px}
.site-header--masthead .main-nav{width:100%;margin-top:16px;border-top:1px solid var(--h-hair)}
.site-header--masthead .main-nav ul{justify-content:center;padding:6px 0}
.site-header--masthead .nav-toggle{position:absolute;right:0;top:18px}
.site-header--masthead .container{position:relative}
.site-header--masthead .header-mark{position:absolute;left:0;top:22px;text-align:left;margin-left:0}

/* tiers — a thin utility strip above the main row. Institutional. */
.site-header--tiers .header-utility{background:rgba(0,0,0,.26);border-bottom:1px solid rgba(255,255,255,.10);font-size:.76rem}
.site-header--tiers .header-utility-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px}
.site-header--tiers .hu-kicker{color:var(--h-muted);letter-spacing:.11em;text-transform:uppercase}
.site-header--tiers .hu-mark{color:var(--h-muted);font-family:var(--font-mono);font-size:.72rem}
.site-header--tiers .hu-contact{color:var(--h-muted)}
.site-header--tiers .hu-contact:hover{color:var(--h-ink)}
.site-header--tiers .header-inner{min-height:64px}

/* tile — brand sits in a filled accent block. Product / tool. */
.site-header--tile .brand{background:var(--accent);align-self:stretch;margin:0;padding:0 20px;gap:11px}
.site-header--tile .brand a,.site-header--tile .brand .brand-name{color:#fff}
.site-header--tile .brand .tagline{color:rgba(255,255,255,.82)}
.site-header--tile .header-inner{padding:0;min-height:78px;align-items:stretch}
.site-header--tile .header-inner>.nav-toggle,.site-header--tile .header-inner>.main-nav,
.site-header--tile .header-mark{align-self:center}
.site-header--tile .brand img{max-height:38px}

/* rule — LIGHT header. Reference / manual. */
.site-header--rule{background:var(--bg);color:var(--ink);
  --h-ink:var(--ink);--h-muted:var(--muted);--h-hair:var(--line);
  --h-hover:var(--bg-soft);--h-line:var(--line);--h-accent:var(--accent)}

/* ---------- axis: nav_style ---------- */
.main-nav ul{list-style:none;display:flex;align-items:center;gap:6px;margin:0;padding:0}
.main-nav a{display:block;font-size:.95rem;font-weight:500;color:var(--h-ink);
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.main-nav a:hover{text-decoration:none}

.nv-pill .main-nav a{padding:9px 13px;border-radius:var(--radius)}
.nv-pill .main-nav a:hover{background:var(--h-hover)}
.nv-pill .main-nav .current-menu-item>a,.nv-pill .main-nav .current_page_item>a{background:var(--accent);color:#fff}

.nv-underline .main-nav ul{gap:22px}
.nv-underline .main-nav a{padding:6px 0;border-bottom:2px solid transparent}
.nv-underline .main-nav a:hover{border-bottom-color:var(--h-hair)}
.nv-underline .main-nav .current-menu-item>a,.nv-underline .main-nav .current_page_item>a{border-bottom-color:var(--accent)}

.nv-caps .main-nav ul{gap:20px}
.nv-caps .main-nav a{padding:7px 0;font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.nv-caps .main-nav a:hover{color:var(--h-accent)}
.nv-caps .main-nav .current-menu-item>a,.nv-caps .main-nav .current_page_item>a{color:var(--h-accent);
  box-shadow:inset 0 -2px 0 var(--accent)}

.nv-divider .main-nav ul{gap:0}
.nv-divider .main-nav li+li{border-left:1px solid var(--h-hair)}
.nv-divider .main-nav a{padding:6px 16px;font-size:.9rem}
.nv-divider .main-nav a:hover{color:var(--h-accent)}
.nv-divider .main-nav .current-menu-item>a,.nv-divider .main-nav .current_page_item>a{color:var(--h-accent);font-weight:700}

.nv-boxed .main-nav ul{gap:8px}
.nv-boxed .main-nav a{padding:8px 13px;border:1px solid var(--h-hair);border-radius:var(--radius);font-size:.86rem}
.nv-boxed .main-nav a:hover{border-color:var(--h-line)}
.nv-boxed .main-nav .current-menu-item>a,.nv-boxed .main-nav .current_page_item>a{background:var(--accent);border-color:var(--accent);color:#fff}

.nav-toggle{display:none;background:transparent;border:1px solid var(--h-line);color:var(--h-ink);
  border-radius:var(--radius);padding:8px 11px;font-size:1rem;cursor:pointer;line-height:1}

@media(max-width:768px){
  /* every combination collapses to the same one-column stack + burger */
  .nav-toggle{display:inline-flex}
  .main-nav{display:none;width:100%;order:3}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:2px;padding-bottom:12px}
  .main-nav a{padding:11px 12px}
  .nv-divider .main-nav li+li{border-left:0;border-top:1px solid var(--h-hair)}
  .nv-underline .main-nav a{border-bottom:0}
  .header-inner{flex-wrap:wrap;min-height:0;padding:12px 0}
  .site-header--masthead .header-inner{padding:14px 0}
  .site-header--masthead .brand{font-size:1.35rem}
  .site-header--masthead .nav-toggle{position:static;margin-top:10px}
  .site-header--masthead .main-nav{margin-top:10px}
  .site-header--tiers .header-utility-inner{justify-content:center;gap:10px}
  .site-header--tiers .hu-contact,.site-header--tiers .hu-mark{display:none}
  .site-header--tile .header-inner{align-items:center;padding:10px 0}
  .site-header--tile .brand{padding:10px 14px;align-self:flex-start;border-radius:var(--radius)}
}

/* ---------- post cards / grid ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.section-head h2{margin:0;font-size:1.25rem}
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}}

.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .16s ease,border-color .16s ease}
.card:hover{border-color:#e2ded7;box-shadow:0 6px 20px rgba(15,20,36,.09)}
.card .thumb{display:block;aspect-ratio:16/10;background:var(--bg-soft);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb,.lead .thumb{position:relative}
.thumb-rating{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:.3em;padding:.32em .6em;border-radius:var(--radius);background:rgba(18,18,18,.85);color:#fff;font-size:.85rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.thumb-rating .s{color:#f5b301;font-size:.95em}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .cat{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.card h3{margin:0;font-size:1.16rem;line-height:1.28}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent);text-decoration:none}
.card .excerpt{color:var(--muted);font-size:.94rem;margin:0}
.card .meta{margin-top:auto;padding-top:6px;color:var(--muted);font-size:.8rem}
.card .meta time{display:block}
.meta .card-imdb{color:#b8860b;font-weight:800;font-size:.78rem;margin-right:.45rem;font-variant-numeric:tabular-nums}
.meta .card-film{color:var(--muted);font-weight:600;font-size:.78rem;font-variant-numeric:tabular-nums}

/* featured lead */
.lead{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin:0 0 34px}
.lead .thumb{aspect-ratio:auto;min-height:280px}
.lead .card-body{padding:26px 30px;justify-content:center;gap:12px}
.lead h2{font-size:1.9rem;line-height:1.18;margin:0}
.lead h2 a{color:var(--ink)}
.lead h2 a:hover{color:var(--accent);text-decoration:none}
.lead .excerpt{font-size:1rem;color:var(--muted)}
@media(max-width:760px){.lead{grid-template-columns:1fr}.lead .thumb{min-height:210px}}

/* ---------- FRONT-PAGE LANDING (front-page.php) ---------- */
/* full-width bands: neutralise the container width-clamp on the static front page only */
body.fp-landing .site-main{padding:0}
body.fp-landing .site-main > .container{max-width:none;padding:0}
.fp-wrap{max-width:var(--maxwidth);margin:0 auto;padding:0 24px}
a.btn{display:inline-flex;align-items:center;gap:8px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--accent);
  border:1px solid var(--accent);border-radius:var(--radius);padding:11px 18px;font:inherit;font-weight:600;
  cursor:pointer;transition:background .15s ease,color .15s ease}
.btn-ghost:hover{background:var(--accent);color:#fff;text-decoration:none}
.fp-eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin:0}

/* hero */
.fp-hero{padding:60px 0 54px}
/* Hero style 'banner': full-width dark editorial masthead (flows from the dark header) — alt silhouette to the split hero */
.fp-hero--banner{background:var(--shell);color:var(--shell-ink);padding:64px 0 60px;border-bottom:3px solid var(--accent)}
.fp-hero-banner{max-width:900px;text-align:center}
.fp-hero--banner .fp-eyebrow{color:var(--accent)}
.fp-hero--banner .fp-hero-text h1{color:#fff;font-size:clamp(2.4rem,5vw,3.7rem)}
.fp-hero--banner .fp-sub{color:var(--shell-muted);max-width:62ch;margin-left:auto;margin-right:auto;font-size:1.14rem}
.fp-hero--banner .fp-cta{justify-content:center}
.fp-hero--banner .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.fp-hero--banner .btn-ghost:hover{background:#fff;color:var(--shell)}
/* Hero style 'cover': full-bleed background image + dark gradient overlay + centered text */
.fp-hero--cover{background-size:cover;background-position:center;color:#fff;padding:96px 0 92px;border-bottom:3px solid var(--accent)}
.fp-hero--cover .fp-eyebrow{color:#fff;opacity:.92}
.fp-hero--cover .fp-hero-text h1{color:#fff;font-size:clamp(2.6rem,5.4vw,4rem);text-shadow:0 2px 18px rgba(0,0,0,.45)}
.fp-hero--cover .fp-sub{color:rgba(255,255,255,.9);max-width:60ch;margin-left:auto;margin-right:auto;font-size:1.16rem}
.fp-hero--cover .fp-cta{justify-content:center}
.fp-hero--cover .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.fp-hero--cover .btn-ghost:hover{background:#fff;color:#15111e}
.fp-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.fp-hero-text h1{font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.12;letter-spacing:-.01em;margin:16px 0 0;text-wrap:balance}
.fp-sub{font-size:1.1rem;color:var(--muted);margin:20px 0 0;max-width:52ch}
.fp-cta{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0 0}
.fp-hero-media{position:relative}
.fp-hero-media img{width:100%;aspect-ratio:8/5;object-fit:cover;border-radius:10px;border:1px solid var(--line);
  box-shadow:0 24px 50px -28px rgba(20,32,31,.5)}
.fp-hero-badge{position:absolute;left:-16px;bottom:22px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 15px;display:flex;align-items:center;gap:11px;max-width:232px;
  box-shadow:0 12px 30px -14px rgba(20,32,31,.35)}
.fp-hero-badge svg{width:22px;height:22px;color:var(--accent);flex:none}
.fp-hero-badge b{font-family:var(--font-body);font-size:.83rem;font-weight:700;display:block;color:var(--ink)}
.fp-hero-badge span{font-family:var(--font-body);font-size:.76rem;color:var(--muted)}
@media(max-width:600px){.fp-hero-badge{left:12px;right:12px;bottom:12px;max-width:none}}

/* hero style 'spec': brand-system spec panel (signature) — ink card, mono labels, accent swatch */
.fp-spec{background:var(--shell);color:var(--shell-ink);border-radius:calc(var(--radius) + 3px);
  padding:26px 26px 24px;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(15,20,36,.6)}
.fp-spec::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.fp-spec-head{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.66rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--shell-muted)}
.fp-spec-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px rgba(36,64,255,.28)}
.fp-spec-v{margin-left:auto;color:var(--accent)}
.fp-spec-mark{font-family:var(--font-head);font-weight:700;font-size:2rem;line-height:1;
  letter-spacing:-.02em;color:#fff;margin:16px 0 18px}
.fp-spec-rows{margin:0;display:flex;flex-direction:column}
.fp-spec-row{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.09)}
.fp-spec-row dt{margin:0;font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  letter-spacing:.1em;color:var(--shell-muted)}
.fp-spec-row dd{margin:0;font-family:var(--font-body);font-size:.9rem;font-weight:600;
  color:var(--shell-ink);display:flex;align-items:center;gap:9px}
.fp-spec-rows > .fp-spec-row:first-child dd{font-family:var(--font-mono);font-weight:700;letter-spacing:.02em}
.fp-spec-sw{width:16px;height:16px;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.fp-spec-note{font-family:var(--font-mono);font-size:.72rem;line-height:1.55;color:var(--shell-muted);
  margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.09)}
@media(max-width:900px){.fp-spec{max-width:460px}}

/* hero style 'label': gazetteer / museum object card (signature) — plate photo above a
   catalogue label. The structural devices are real: the number is the entry's post id,
   the rows are verifiable facts about that monument, and the card links to its article. */
.fp-label{background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);
  overflow:hidden;box-shadow:0 26px 54px -30px rgba(15,26,51,.45);position:relative}
.fp-label::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gild);z-index:1}
.fp-label-plate{display:block;margin:0}
.fp-label-plate img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.fp-label-body{padding:20px 22px 22px}
.fp-label-head{display:flex;align-items:baseline;gap:10px;font-family:var(--font-mono);font-size:.66rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fp-label-no{margin-left:auto;color:var(--gild);letter-spacing:.08em}
.fp-label-name{font-family:var(--font-head);font-weight:600;font-size:1.72rem;line-height:1.15;
  margin:10px 0 0;color:var(--ink);letter-spacing:-.01em}
.fp-label-name a{color:inherit;text-decoration:none}
.fp-label-name a:hover{color:var(--accent)}
.fp-label-rows{margin:16px 0 0;display:flex;flex-direction:column}
.fp-label-row{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--line)}
.fp-label-row dt{margin:0;font-family:var(--font-mono);font-size:.64rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fp-label-row dd{margin:0;font-size:.9rem;font-weight:400;color:var(--ink)}
.fp-label-link{display:inline-flex;align-items:center;gap:7px;margin:16px 0 0;font-family:var(--font-mono);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  text-decoration:none;border-bottom:1px solid transparent}
.fp-label-link:hover{border-bottom-color:var(--accent)}
@media(max-width:900px){.fp-label{max-width:480px}}

/* credibility strip */
.fp-cred{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fp-cred-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fp-cred-item{padding:26px 26px 26px 0;display:flex;gap:14px;align-items:flex-start}
.fp-cred-item + .fp-cred-item{padding-left:26px;border-left:1px solid var(--line)}
.fp-cred-item svg{width:26px;height:26px;color:var(--accent);flex:none;margin-top:2px}
.fp-cred-item b{font-family:var(--font-body);font-weight:700;font-size:.97rem;display:block;margin-bottom:3px;color:var(--ink)}
.fp-cred-item span{font-size:.86rem;color:var(--muted);line-height:1.5}

/* articles section (reuses .layout/.lead/.post-grid/.card + Magenet sidebar) */
.fp-articles{padding:58px 0}
.fp-articles .lead h3{font-size:1.8rem;line-height:1.16;margin:0}
.fp-articles .lead h3 a{color:var(--ink)}
.fp-articles .lead h3 a:hover{color:var(--accent);text-decoration:none}

/* topics */
.fp-topics{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0}
.section-head.fp-flat{border:0;margin-bottom:24px;padding:0}
.fp-topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.fp-topic{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;background:var(--bg-soft);
  transition:border-color .16s ease,background .16s ease}
.fp-topic:hover{border-color:var(--accent);background:#f6efe9;text-decoration:none}
.fp-topic .n{font-family:var(--font-head);font-weight:700;font-size:1.08rem;color:var(--ink);display:block}
.fp-topic .c{font-family:var(--font-body);font-size:.8rem;color:var(--muted);margin-top:5px;display:block}

/* tool feature band (dark shell) */
.fp-toolband{background:var(--shell);color:var(--shell-ink);padding:56px 0}
.fp-tool-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.fp-toolband .fp-eyebrow{color:var(--accent)}
.fp-toolband h2{color:var(--shell-ink);font-size:2.1rem;margin:14px 0 0}
.fp-toolband p{color:var(--shell-muted);margin:16px 0 26px;max-width:46ch}
.fp-tool-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:22px 26px}
.fp-tool-card .tl{font-family:var(--font-body);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.fp-tool-card .row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--font-body);font-size:.94rem;color:var(--shell-ink)}
.fp-tool-card .row:last-child{border-bottom:0}
.fp-tool-card .row svg{width:19px;height:19px;color:#e0a56a;flex:none}

/* contact cta */
.fp-contact{padding:64px 0;text-align:center}
.fp-contact .fp-eyebrow{margin-bottom:10px}
.fp-contact h2{font-size:2rem}
.fp-contact p{color:var(--muted);max-width:52ch;margin:14px auto 26px}

/* landing responsive */
@media(max-width:900px){
  .fp-hero-grid,.fp-tool-grid{grid-template-columns:1fr;gap:30px}
  .fp-hero{padding:42px 0 40px}
  .fp-cred-grid{grid-template-columns:1fr 1fr}
  .fp-cred-item + .fp-cred-item{border-left:0}
  .fp-cred-item{padding:22px 20px 22px 0}
  .fp-cred-item:nth-child(n+3){border-top:1px solid var(--line);padding-top:22px}
}
@media(max-width:560px){
  .fp-cred-grid{grid-template-columns:1fr}
  .fp-cred-item:nth-child(n+2){border-top:1px solid var(--line);padding-top:22px}
}

/* ================= FRONT-PAGE BLOCK VARIANTS (per-site silhouette knobs) ================= */
/* Each repeating band has 2-4 structural variants chosen in variant.php so sites in the
   network differ in STRUCTURE, not only colour. Defaults keep the original look. */

/* --- TRUST: cards --- */
.fp-cred--cards{background:transparent;border-top:0;border-bottom:0}
.fp-cred--cards .fp-cred-grid{gap:16px;padding:34px 0}
.fp-cred--cards .fp-cred-item,
.fp-cred--cards .fp-cred-item + .fp-cred-item{flex-direction:column;gap:12px;padding:20px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg);transition:border-color .16s ease,box-shadow .16s ease}
.fp-cred--cards .fp-cred-item:hover{border-color:var(--accent);box-shadow:0 8px 24px -14px rgba(15,20,36,.35)}
.fp-cred--cards .fp-cred-ic{display:inline-flex;padding:9px;border-radius:var(--radius);background:var(--bg-soft)}
/* --- TRUST: ribbon (dark inline values) --- */
.fp-cred--ribbon{background:var(--shell);border-top:0;border-bottom:0;border-top:3px solid var(--accent)}
.fp-cred--ribbon .fp-cred-grid{display:flex;flex-wrap:wrap;gap:12px 28px;padding:20px 24px}
.fp-cred--ribbon .fp-cred-item,
.fp-cred--ribbon .fp-cred-item + .fp-cred-item{padding:0;border:0;align-items:center;gap:10px}
.fp-cred--ribbon .fp-cred-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.fp-cred--ribbon b{color:#fff;font-size:.92rem;display:block}
.fp-cred--ribbon span{display:none}
/* --- TRUST: numbered (mono ordinals) --- */
.fp-cred--numbered .fp-cred-n{font-family:var(--font-mono);font-size:1.35rem;font-weight:700;color:var(--accent);
  flex:none;line-height:1;letter-spacing:-.02em;margin-top:1px}

/* --- TOPICS: pills --- */
.fp-topic-pills{display:flex;flex-wrap:wrap;gap:10px}
.fp-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;background:var(--bg);font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--ink);
  transition:border-color .16s ease,background .16s ease}
.fp-pill:hover{border-color:var(--accent);background:var(--bg-soft);text-decoration:none}
.fp-pill b{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--accent);
  background:var(--bg-soft);border-radius:999px;padding:2px 9px;line-height:1.5}
.fp-pill:hover b{background:var(--bg)}
/* --- TOPICS: index (ranked list) --- */
.fp-topic-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.fp-topic-index li{border-bottom:1px solid var(--line)}
.fp-topic-index a{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:18px;padding:18px 4px;color:var(--ink)}
.fp-topic-index a:hover{text-decoration:none}
.fp-topic-index .ix{font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--muted)}
.fp-topic-index .n{font-family:var(--font-head);font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
.fp-topic-index a:hover .n{color:var(--accent)}
.fp-topic-index .c{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);white-space:nowrap}
.fp-topic-index .ar{color:var(--accent);display:inline-flex;opacity:0;transform:translateX(-5px);transition:.16s ease}
.fp-topic-index a:hover .ar{opacity:1;transform:none}
@media(max-width:560px){.fp-topic-index a{grid-template-columns:auto 1fr auto;gap:12px}.fp-topic-index .ar{display:none}.fp-topic-index .n{font-size:1.12rem}}

/* --- TOOLBAND: centered --- */
.fp-tool-centered{max-width:760px;margin:0 auto;text-align:center}
.fp-tool-centered h2{margin:14px 0 0}
.fp-tool-centered > p{color:var(--shell-muted);margin:16px auto 0;max-width:56ch}
.fp-tool-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 26px}
.fp-tool-chips span{font-family:var(--font-body);font-size:.86rem;color:var(--shell-ink);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 15px}
/* --- TOOLBAND: mock (mini tool preview) --- */
.fp-tool-mock{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:10px;
  padding:22px 24px;position:relative;overflow:hidden}
.fp-tool-mock::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.fp-tool-mock-head{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--shell-muted)}
.fp-tool-mock-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:16px 0 0;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden}
.fp-tool-mock-stats > div{background:var(--shell);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.fp-tool-mock-stats .k{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--shell-muted)}
.fp-tool-mock-stats .v{font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fp-tool-mock-note{font-family:var(--font-mono);font-size:.7rem;color:var(--shell-muted);margin:14px 0 0}

/* --- CONTACT: band (dark) --- */
.fp-contact--band{background:var(--shell);color:var(--shell-ink)}
.fp-contact--band .fp-eyebrow{color:var(--accent)}
.fp-contact--band h2{color:#fff}
.fp-contact--band p{color:var(--shell-muted)}
.fp-contact--band .btn{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.fp-contact--band .btn:hover{background:#fff;color:var(--shell)}
/* --- CONTACT: split --- */
.fp-contact--split{text-align:left}
.fp-contact-split{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.fp-contact-lead h2{margin:12px 0 0}
.fp-contact-lead p{color:var(--muted);max-width:52ch;margin:14px 0 0}
.fp-contact-card{background:var(--shell);color:var(--shell-ink);border-radius:10px;padding:26px 28px;position:relative;overflow:hidden}
.fp-contact-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.fp-contact-card-k{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--shell-muted);display:block}
.fp-contact-mail{display:inline-block;margin:12px 0 8px;font-family:var(--font-head);font-weight:700;font-size:1.3rem;
  color:#fff;overflow-wrap:anywhere}
.fp-contact-mail:hover{color:var(--accent);text-decoration:none}
.fp-contact-card-note{font-size:.82rem;color:var(--shell-muted);display:block}
@media(max-width:760px){.fp-contact-split{grid-template-columns:1fr;gap:24px}}

/* ---------- home magazine sections ---------- */
.cat-section{margin:0 0 38px}
.cat-section:last-child{margin-bottom:0}
.section-head .view-all{font-size:.84rem;font-weight:600;color:var(--accent);white-space:nowrap}
.section-head .view-all:hover{text-decoration:none;color:var(--accent-dark)}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.row-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.row-3{grid-template-columns:1fr}}

/* ---------- single / page ---------- */
.entry{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:34px 40px 40px}
@media(max-width:600px){.entry{padding:22px 20px 26px}}
.entry-header{margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.entry-header .cat{font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.entry-header h1{margin:.35rem 0 .5rem;font-size:2.3rem;line-height:1.15}
@media(max-width:600px){.entry-header h1{font-size:1.7rem}}
.entry-meta{color:var(--muted);font-size:.86rem;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.entry-featured{margin:0 0 24px;border-radius:var(--radius);overflow:hidden}
.entry-content{max-width:var(--measure)}
.entry-content > *{max-width:100%}
.entry-content h2{margin-top:1.7em}
.entry-content h3{margin-top:1.4em}
.entry-content img,.entry-content figure{border-radius:var(--radius)}
.entry-content a{text-decoration:underline;text-underline-offset:2px}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin-bottom:.4rem}
.entry-content table{width:100%;border-collapse:collapse}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.entry-content th{background:var(--bg-soft)}

.page-hero{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:28px 40px;margin:0 0 24px}
.page-hero h1{margin:0;font-size:2.2rem}
@media(max-width:600px){.page-hero{padding:22px 20px}.page-hero h1{font-size:1.7rem}}

.post-tags{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.post-tags a{display:inline-block;border:1px solid var(--line);border-radius:var(--radius);padding:3px 10px;margin:0 6px 6px 0;color:var(--muted)}
.post-tags a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* ---------- sidebar / widgets (Magenet lives here) ---------- */
.sidebar{position:sticky;top:20px;display:flex;flex-direction:column;gap:24px}
.widget{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 20px}
.widget-title{margin:0 0 14px;font-size:1rem;padding-bottom:9px;border-bottom:1px solid var(--line)}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{padding:7px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.widget li:last-child{border-bottom:0}
.widget a{color:var(--ink)}
.widget a:hover{color:var(--accent)}
/* keep Magenet's async container visible even before JS fills it */
.widget .mads-block{min-height:1px}

/* ---------- pagination ---------- */
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin:34px 0 0;justify-content:center}
.pagination .page-numbers{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);font-size:.92rem}
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- footer (dark shell) ---------- */
.site-footer{background:var(--shell);color:var(--shell-muted);margin-top:40px;border-top:3px solid var(--accent)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding:44px 0 34px}
@media(max-width:760px){.footer-top{grid-template-columns:1fr;gap:26px}}
.site-footer h4{color:var(--shell-ink);font-size:1rem;margin:0 0 14px}
.site-footer a{color:var(--shell-muted)}
.site-footer a:hover{color:var(--shell-ink)}
/* Magenet money links: distinct light colour so they stand out from the dark footer text */
.mads-block a,[class*="magenet-monetization"] a,[class^="nw-magenet"] a{color:#fcd34d;text-decoration:underline;text-underline-offset:2px}
.mads-block a:hover,[class*="magenet-monetization"] a:hover,[class^="nw-magenet"] a:hover{color:#fde68a}
/* Full-width landing "Latest guides" (no sidebar — money lives in the footer here, not the sidebar) */
.fp-nosidebar{grid-template-columns:1fr}
.fp-nosidebar .post-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.fp-nosidebar .post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fp-nosidebar .post-grid{grid-template-columns:1fr}}
.footer-about p{margin:0;font-size:.92rem;line-height:1.6}
.footer-menu ul{list-style:none;margin:0;padding:0}
.footer-menu li{padding:5px 0;font-size:.92rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:18px 0;font-size:.84rem;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}

/* ---------- small util ---------- */
.tool-embed{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
/* min-width:0 is required: a search input has an intrinsic min width and flex items default to
   min-width:auto, so without it the input refuses to shrink and shoves the button out of the
   sidebar card. max-width:100% keeps the whole form inside its container at any width. */
.searchform{display:flex;gap:8px;max-width:100%}
.searchform input[type=search]{flex:1 1 0;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;max-width:100%}
.searchform button{flex:0 0 auto}
.btn,.searchform button{background:var(--accent);color:#fff;border:0;border-radius:var(--radius);padding:10px 16px;
  font:inherit;font-weight:600;cursor:pointer;transition:background .15s ease}
.btn:hover,.searchform button:hover{background:var(--accent-dark);text-decoration:none;color:#fff}

/* ---------- home intro band + YMYL medical disclaimer ---------- */
.home-intro{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;margin:0 0 28px}
.home-intro h1{font-size:1.7rem;margin:0 0 .4em}
.home-intro-text{color:var(--muted);max-width:var(--measure);margin:0}
.med-note{margin:18px 0 0;padding:13px 15px;background:var(--bg-soft);
  border-left:3px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;
  font-size:.86rem;line-height:1.55;color:var(--muted);max-width:var(--measure)}
.med-note strong{color:var(--ink)}
.site-footer .med-note{background:transparent;border-left-color:var(--shell-muted);
  color:var(--shell-muted);max-width:none;margin-top:14px;padding:10px 0 10px 14px}
.site-footer .med-note strong{color:var(--shell-ink)}
@media(max-width:600px){.home-intro{padding:18px 16px}.home-intro h1{font-size:1.4rem}}

/* ---------- home landing blocks (front page = posts index, so these live in home.php) ---------- */
.home-hero{display:grid;grid-template-columns:1fr 400px;gap:38px;align-items:start;margin:0 0 22px}
.hh-text h1{font-size:2.25rem;margin:0 0 .45em;text-wrap:balance}
.hh-sub{color:var(--muted);max-width:var(--measure);margin:0 0 1.3rem;font-size:1.04rem}
.hh-cta{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.btn-ghost{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);font-weight:600;font-size:.95rem;background:var(--bg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* the signature: a translation card — jargon on the left, plain English on the right */
.hh-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hh-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 16px;background:var(--shell);color:var(--shell-ink);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase}
.hh-card-n{color:var(--shell-muted)}
.hh-pairs{margin:0;padding:6px 16px}
.hh-pair{padding:13px 0;border-bottom:1px solid var(--line)}
.hh-pair:last-child{border-bottom:0}
.hh-pair dt{font-family:var(--font-mono);font-size:.82rem;font-weight:600;color:var(--accent);
  letter-spacing:.02em;margin:0 0 4px}
.hh-pair dd{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink)}
.hh-card-more{display:block;padding:12px 16px;border-top:1px solid var(--line);background:var(--bg-soft);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.home-med{margin:0 0 24px}

/* credibility strip */
.home-trust{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0 0 30px;padding:0;
  background:var(--shell);border-radius:var(--radius);overflow:hidden}
.home-trust li{flex:1 1 auto;padding:13px 18px;color:var(--shell-ink);font-size:.86rem;font-weight:600;
  border-right:1px solid rgba(255,255,255,.10)}
.home-trust li:last-child{border-right:0;color:var(--shell-muted)}

/* tool band */
.home-toolband{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:center;
  background:var(--shell);color:var(--shell-ink);border-radius:var(--radius);padding:30px 32px;margin:40px 0 0}
.home-toolband h2{color:var(--shell-ink);margin:0 0 .4em;font-size:1.55rem}
.home-toolband p{color:var(--shell-muted);margin:0 0 1.1rem;max-width:52ch}
.htb-kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--shell-muted);margin:0 0 .7em!important}
.htb-points{list-style:none;margin:0;padding:16px 18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);border-radius:var(--radius)}
.htb-points li{position:relative;padding:0 0 0 22px;margin:0 0 10px;font-size:.88rem;color:var(--shell-ink);line-height:1.45}
.htb-points li:last-child{margin-bottom:0}
.htb-points li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* contact band */
.home-contact{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:center;margin:40px 0 0}
.home-contact h2{margin:0 0 .4em;font-size:1.5rem}
.home-contact p{color:var(--muted);margin:0;max-width:56ch}
.hc-kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .7em!important}
.hc-card{background:var(--shell);border-radius:var(--radius);padding:22px 24px}
.hc-card-k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--shell-muted);margin:0 0 .6em!important}
.hc-card-e{font-family:var(--font-head);font-size:1rem;font-weight:700;margin:0 0 .5em!important;
  overflow-wrap:anywhere}
.hc-card-e a{color:var(--shell-ink)}
.hc-card-n{font-size:.8rem;color:var(--shell-muted);margin:0!important}

@media(max-width:900px){
  .home-hero,.home-toolband,.home-contact{grid-template-columns:1fr;gap:24px}
  .hh-text h1{font-size:1.8rem}
  .home-toolband{padding:24px 20px}
}
@media(max-width:600px){
  .home-trust{flex-direction:column}
  .home-trust li{border-right:0;border-bottom:1px solid rgba(255,255,255,.10)}
  .home-trust li:last-child{border-bottom:0}
}


/* ---------- hero card: schedule variant (offset column + label) ---------- */
.hh-pair--sched{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:baseline}
.hh-pair--sched dt{font-family:var(--font-mono);font-size:1.05rem;font-weight:600;color:var(--accent);
  margin:0;text-align:right;font-variant-numeric:tabular-nums}
.hh-pair--sched .hh-wk{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-left:3px}
.hh-pair--sched dd{font-size:.94rem;line-height:1.45}
.home-hero--solo{grid-template-columns:1fr}

/* ---------- Magenet ----------
   DOCUMENT mode on this site: the paid link is appended to the post body on the one sold URL
   (/valentine-s-gifts-with-ccc-for-her-and-him/), not printed into a widget. Keep any widget
   container in the DOM (never display:none — that would hide money the day the slot fills) but
   drop the card chrome so an empty slot does not read as a broken box. */
.widget_magenet_widget .magenet_widget_box{background:none;border:0;padding:0;border-radius:0}
.widget_magenet_widget:has(.mads-block:empty){padding:0;border:0;background:none}
.entry-content .mads-block{margin:26px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.82rem;color:var(--muted)}
.entry-content .mads-block:empty{display:none}

/* One deliberate ghost-button hover (two conflicting rules exist above). */
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--accent);border-color:var(--accent);
  color:#fff;text-decoration:none}

/* ---------- Instrument Serif is a ONE-WEIGHT display face ----------
   The base sets headings to 700, which the browser would fake by smearing the outline. Force 400
   and buy the emphasis back with size and tighter tracking, which is what the face is drawn for. */
h1,h2,h3,h4,h5,h6{font-weight:400;letter-spacing:-.005em}
h1{font-size:2.6rem;line-height:1.1}
h2{font-size:2rem}
h3{font-size:1.5rem}
.card h3,.lead h2,.fp-leader-title{font-weight:400}
.card h3{font-size:1.35rem;line-height:1.2}
.lead h2{font-size:2rem;line-height:1.14}
.fp-hero-text h1{font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.06;letter-spacing:-.012em}
/* small caps-y labels stay in the geometric sans, where weight still works */
.fp-eyebrow,.cat,.widget-title,.section-head h2{font-family:var(--font-body)}
.section-head h2{font-weight:600;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase}
.widget-title{font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.cat{font-weight:600}

/* ============================================================================
   bethanysewandsew.com — the cost-per-wear card (front-page hero signature)
   The trade reports prices; the reader pays costs. Two garments, both priced by
   the wear, and the expensive one wins. Real arithmetic from the tool page —
   the landing cannot advertise a number the calculator does not produce.
   ========================================================================== */
.fp-hero--docket{padding:58px 0 52px;background:var(--bg);border-bottom:1px solid var(--line)}

.cw-card{background:var(--shell);color:var(--shell-ink);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(23,18,26,.75)}
.cw-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 18px;
  background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase}
.cw-head .cw-n{color:var(--shell-muted);letter-spacing:.06em;text-transform:none;font-weight:400;
  font-size:.72rem}

.cw-cols{display:grid;grid-template-columns:1fr 1fr}
.cw-col{padding:20px 18px 22px}
.cw-col + .cw-col{border-left:1px solid rgba(255,255,255,.12)}
.cw-col.is-win{background:rgba(141,26,114,.26);box-shadow:inset 0 3px 0 var(--accent)}
.cw-l{margin:0 0 6px;font-family:var(--font-body);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--shell-muted)}
.cw-p{margin:0;font-family:var(--font-mono);font-size:1.15rem;color:var(--shell-ink);
  font-variant-numeric:tabular-nums}
.cw-w{margin:2px 0 14px;font-family:var(--font-mono);font-size:.72rem;color:var(--shell-muted);
  font-variant-numeric:tabular-nums}
.cw-pw{margin:0;font-family:var(--font-mono);font-size:1.7rem;line-height:1.05;color:#fff;
  font-variant-numeric:tabular-nums}
.cw-pw span{display:block;font-family:var(--font-body);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--shell-muted);margin-top:5px}
.cw-note{margin:0;padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.84rem;line-height:1.5;color:var(--shell-muted)}
.cw-more{display:block;padding:13px 18px;border-top:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.24);font-family:var(--font-body);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--shell-ink)}
.cw-more:hover{background:var(--accent);color:#fff;text-decoration:none}

@media(max-width:900px){.fp-hero--docket .fp-hero-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:420px){.cw-cols{grid-template-columns:1fr}
  .cw-col + .cw-col{border-left:0;border-top:1px solid rgba(255,255,255,.12)}}

/* ============================================================================
   The cost-per-wear calculator (the gimmick page) — [bss_cpw]
   ========================================================================== */
.cpw{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.cpw-knobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;
  padding:22px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.cpw-knob label{display:block;font-family:var(--font-body);font-size:.62rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.cpw-knob input,.cpw-knob select{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--radius);font:inherit;font-size:.95rem;background:var(--bg);color:var(--ink);
  font-variant-numeric:tabular-nums}
.cpw-money{display:flex;gap:6px}
.cpw-money select{width:62px;flex:none;text-align:center}
.cpw-knob .cpw-hint{display:block;margin:6px 0 0;font-size:.74rem;line-height:1.45;color:var(--muted)}

.cpw-out{padding:24px 22px;border-bottom:1px solid var(--line)}
.cpw-lead{margin:0;font-family:var(--font-body);font-size:.64rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.cpw-big{margin:6px 0 16px;font-family:var(--font-mono);font-size:clamp(2.2rem,6vw,3.2rem);
  line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.cpw-figs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 16px;
  padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cpw-figs li{padding:12px 14px;border-left:1px solid var(--line)}
.cpw-figs li:first-child{border-left:0}
.cpw-figs .k{display:block;font-family:var(--font-body);font-size:.6rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.cpw-figs .v{display:block;font-family:var(--font-mono);font-size:1.1rem;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cpw-say{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink);max-width:56ch}

.cpw-vs{padding:22px}
.cpw-vs-h{margin:0 0 14px;font-family:var(--font-body);font-size:.64rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.cpw-vs-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.cpw-col{padding:18px 18px 20px}
.cpw-col + .cpw-col{border-left:1px solid var(--line)}
.cpw-col.is-win{background:var(--bg-soft);box-shadow:inset 0 3px 0 var(--accent)}
.cpw-col .c-l{margin:0;font-family:var(--font-body);font-size:.64rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.cpw-col .c-p{margin:4px 0 2px;font-family:var(--font-mono);font-size:1.35rem;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cpw-col .c-n{margin:0 0 14px;font-size:.8rem;line-height:1.45;color:var(--muted)}
.c-rows{margin:0;display:flex;flex-direction:column}
.c-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;border-top:1px solid var(--line)}
.c-rows dt{margin:0;font-family:var(--font-body);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.c-rows dd{margin:0;font-family:var(--font-mono);font-size:.92rem;color:var(--ink);
  font-variant-numeric:tabular-nums}
.c-rows dd.c-big{font-size:1.2rem;color:var(--accent)}
.cpw-vs-n{margin:14px 2px 0;font-size:.88rem;line-height:1.6;color:var(--muted)}
.cpw-vs-n strong{color:var(--ink);font-family:var(--font-mono)}

.cpw-note{margin:0;padding:16px 22px 20px;background:var(--bg-soft);border-top:1px solid var(--line);
  font-size:.86rem;line-height:1.6;color:var(--muted)}

@media(max-width:560px){
  .cpw-figs{grid-template-columns:1fr}
  .cpw-figs li{border-left:0;border-top:1px solid var(--line)}
  .cpw-figs li:first-child{border-top:0}
  .cpw-vs-grid{grid-template-columns:1fr}
  .cpw-col + .cpw-col{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- site-specific trims ---------- */
.fp-topic-index .c,.card .meta time,.entry-meta time{font-variant-numeric:tabular-nums}
.card:hover{border-color:#ddc9d8;box-shadow:0 6px 18px rgba(23,18,26,.10)}
.fp-pill:hover{border-color:var(--accent)}
@media(max-width:900px){.fp-cred-item + .fp-cred-item{padding-left:0}}
/* Every place the base asks var(--font-head) for a weight Instrument Serif does not have.
   Left unset, the browser synthesises a bold by smearing the outline — on a high-contrast
   display face that reads as a printing fault. */
.brand,.fp-pill,.fp-topic .n,.fp-spec-mark,.fp-label-name,.hh-card .hh-pair dd{font-weight:400}
.brand{font-size:1.5rem;letter-spacing:-.005em}
/* the deep fuchsia is nearly invisible on the near-black ribbon — lift the marker only */
.fp-cred--ribbon .fp-cred-dot{background:#d774bb}
.fp-cred--ribbon{border-top-color:#d774bb}