/* ==========================================================================
   ARTICLE MARKETING NEWS — style.css
   DESIGN-TOKEN LEGEND
   --c-ink #0B0D12 near-black ink | --c-paper #F7F6F2 warm white
   --c-lime #C6FF3D acid lime (the ONE accent: fills, buttons, focus, key data)
   --c-slate #8A93A6 cool slate (borders; muted TEXT uses --muted for AA)
   --bg/--surface/--surface-2/--text/--muted/--line  themed neutrals
   --accent/--on-accent  lime fill + ink text on it | --mark  highlight wash
   --s-1..--s-9   spacing 4,8,12,16,24,32,48,64,96 px
   --r-sm/md/lg/pill  radius 8/16/24/999 px
   --fs-xs..--fs-hero  fluid type scale | --font-display/--font-text/--font-mono
   Fonts: drop up to 3 Latin-subset WOFF2 files in /assets/fonts and add @font-face
   (font-display:swap); preload ONLY the display file. Stacks below fall back safely.
   BEM naming. Dark: [data-theme="dark"] or system when no explicit choice.
   ========================================================================== */
:root{
  --c-ink:#0B0D12;--c-paper:#F7F6F2;--c-lime:#C6FF3D;--c-slate:#8A93A6;
  --bg:#F7F6F2;--surface:#fff;--surface-2:#EDECE5;--text:#0B0D12;--muted:#586071;--line:#D6D5CD;
  --accent:#C6FF3D;--on-accent:#0B0D12;--focus:#0B0D12;--mark:#C6FF3D;--shadow:0 1px 0 rgba(11,13,18,.04);
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --r-sm:8px;--r-md:16px;--r-lg:24px;--r-pill:999px;
  --fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.125rem;--fs-xl:clamp(1.35rem,1.1rem + 1vw,1.75rem);
  --fs-2xl:clamp(1.75rem,1.3rem + 2vw,2.75rem);--fs-3xl:clamp(2.1rem,1.4rem + 3.4vw,4rem);--fs-hero:clamp(2.75rem,1.2rem + 9vw,8rem);
  --font-display:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hdr-h:56px;--nav-h:44px;color-scheme:light;
}
[data-theme="dark"]{--bg:#0B0D12;--surface:#141821;--surface-2:#1B2029;--text:#F7F6F2;--muted:#A3ABBB;--line:#272D3A;--focus:#C6FF3D;--mark:rgba(198,255,61,.2);color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B0D12;--surface:#141821;--surface-2:#1B2029;--text:#F7F6F2;--muted:#A3ABBB;--line:#272D3A;--focus:#C6FF3D;--mark:rgba(198,255,61,.2);color-scheme:dark}}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + var(--nav-h) + 16px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-md)/1.6 var(--font-text);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:var(--text);text-decoration-color:var(--c-slate);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent);background:var(--mark)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:var(--c-ink)}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon--sm{width:16px;height:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:8px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:12px 16px;border-radius:var(--r-sm);font-weight:600}
.skip-link:focus{top:8px}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:16px}
@media(min-width:720px){.wrap{padding-inline:24px}}
.mono{font-family:var(--font-mono)}

/* ---------- BUTTONS / PILLS / TAGS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-pill);border:1px solid var(--text);background:transparent;color:var(--text);font:600 var(--fs-sm)/1 var(--font-text);cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:var(--surface-2)}
.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.btn--sm{min-height:44px;padding:0 14px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);font:500 var(--fs-xs)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:transparent;text-decoration:none;white-space:nowrap}
.tag--lime{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
a.tag:hover{border-color:var(--accent);color:var(--text);background:var(--mark)}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);font:500 var(--fs-sm)/1 var(--font-mono);color:var(--text);text-decoration:none;background:var(--surface);cursor:pointer}
.chip:hover,.chip[aria-pressed="true"],.chip[aria-current="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.label{font:500 var(--fs-xs)/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* ---------- AD SLOTS (fixed height = zero CLS) ---------- */
.ad-slot{display:grid;place-items:center;border:1px dashed var(--line);border-radius:var(--r-md);color:var(--muted);font:var(--fs-xs)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;background:transparent;overflow:hidden;margin-block:var(--s-5)}
.ad-slot-top{height:110px;min-height:110px}
.ad-slot-in-article{height:280px;min-height:280px}
.ad-slot-sidebar{height:250px;min-height:250px}
.ad-slot-bottom{height:110px;min-height:110px}
@media(min-width:720px){.ad-slot-top,.ad-slot-bottom{height:100px;min-height:100px}}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header__row{display:flex;align-items:center;gap:var(--s-3);height:var(--hdr-h)}
.wordmark{display:flex;align-items:center;gap:8px;font:700 1.15rem/1 var(--font-display);letter-spacing:-.03em;text-decoration:none;margin-right:auto}
.wordmark:hover{background:none}
.wordmark__dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--text)}
.wordmark__long{display:none;font:500 var(--fs-xs)/1 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.site-nav{height:var(--nav-h);border-top:1px solid var(--line)}
.site-nav__list{display:flex;gap:4px;list-style:none;margin:0;padding:0;height:100%;align-items:center;overflow-x:auto;scrollbar-width:none}
.site-nav__list::-webkit-scrollbar{display:none}
.site-nav__link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:500 var(--fs-sm)/1 var(--font-text);text-decoration:none;white-space:nowrap;border-radius:var(--r-pill)}
.site-nav__link[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.search-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--muted);font:var(--fs-sm)/1 var(--font-text);cursor:pointer}
.search-pill:hover{border-color:var(--accent);color:var(--text)}
.search-pill__text,.search-pill kbd{display:none}
.search-pill kbd{font:var(--fs-xs)/1 var(--font-mono);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer}
.icon-btn:hover{border-color:var(--accent);background:var(--mark)}
.icon-btn .i-moon{display:none}
[data-theme="dark"] .icon-btn .i-sun{display:none}[data-theme="dark"] .icon-btn .i-moon{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .icon-btn .i-sun{display:none}:root:not([data-theme="light"]) .icon-btn .i-moon{display:block}}
@media(min-width:720px){
  .site-header .wrap{display:flex;align-items:center;gap:var(--s-5);height:var(--hdr-h)}
  .site-header__row{flex:1}
  .site-nav{order:-1;border:0;height:auto;flex:none}
  .site-nav__list{overflow:visible}
  .wordmark{margin-right:0}
  .wordmark__long{display:block}
  .search-pill__text,.search-pill kbd{display:inline}
  .search-pill{min-width:200px}
  .site-header__row{justify-content:flex-end}
  .wordmark{margin-right:auto}
}
.reading-progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--accent);box-shadow:0 0 0 .5px var(--c-ink)}

/* ---------- HERO ---------- */
.hero{padding-block:var(--s-7) var(--s-6)}
.hero__eyebrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-5)}
.hero__title{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.045em;line-height:.92;position:relative;max-width:11ch;padding-bottom:4px}
.hero__title::after{content:"";display:inline-block;width:.07em;height:.78em;margin-left:.06em;background:var(--accent);box-shadow:0 0 0 1px var(--text);vertical-align:-.04em;animation:blink 1.1s steps(1) infinite}
.hero__scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);box-shadow:0 0 12px 1px var(--accent);transform:translateY(0);animation:scan 5s ease-in-out infinite;pointer-events:none}
.hero__sub{max-width:52ch;font-size:var(--fs-lg);color:var(--muted);margin-top:var(--s-5)}
@keyframes blink{50%{opacity:0}}
@keyframes scan{0%,10%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:1}90%,100%{transform:translateY(calc(.9 * var(--hero-h,160px)));opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}.hero__scan{display:none}}
@media(min-width:720px){.site-header__row{display:contents}.site-header .wrap{display:flex;align-items:center;gap:24px}.wordmark{order:0;margin-right:0}.site-nav{order:1;margin-right:auto}.site-header__actions{order:2}}
.site-header__actions{display:flex;gap:8px;align-items:center}
.wordmark__long{white-space:nowrap}
@media(min-width:720px){.wordmark__long{display:none}.search-pill{min-width:44px}.search-pill__text,.search-pill kbd{display:none}.site-nav__link{padding:0 10px}}
@media(min-width:1000px){.search-pill{min-width:180px}.search-pill__text,.search-pill kbd{display:inline}}
@media(min-width:1100px){.wordmark__long{display:block}}
/* @@END-CRITICAL */

/* ---------- FORMAT FINDER ---------- */
.finder{margin-top:var(--s-6);padding:var(--s-5);border:1px solid var(--text);border-radius:var(--r-lg);background:var(--surface);display:grid;gap:var(--s-4)}
.finder__row{display:grid;gap:var(--s-3);grid-template-columns:1fr}
.finder__field{display:grid;gap:6px}
.finder__ctl{min-height:48px;width:100%;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);color:var(--text);font:500 var(--fs-md)/1 var(--font-text)}
.finder__ctl:hover{border-color:var(--accent)}
.finder__result{min-height:176px;border-radius:var(--r-md);background:var(--surface-2);padding:var(--s-4);display:grid;gap:var(--s-3);align-content:start}
.finder__steps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;counter-reset:s}
.finder__steps li{counter-increment:s;padding:6px 10px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font:var(--fs-sm)/1.2 var(--font-mono)}
.finder__steps li::before{content:counter(s) " ";color:var(--muted)}
@media(min-width:720px){.finder__row{grid-template-columns:1fr 1fr 1.4fr auto;align-items:end}.finder__result{min-height:140px}}

/* ---------- BENTO ---------- */
.bento{display:grid;gap:12px;grid-template-columns:1fr}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s;min-width:0}
.tile:hover,.tile:focus-within{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
a.tile:hover{background:var(--surface)}
.tile__num{font:500 var(--fs-xs)/1 var(--font-mono);color:var(--muted);letter-spacing:.08em}
.tile__title{font-size:var(--fs-xl);font-weight:700}
.tile__text{color:var(--muted);font-size:var(--fs-sm)}
.tile__go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:600 var(--fs-sm)/1 var(--font-text)}
.tile--lime{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tile--lime .tile__text,.tile--lime .tile__num,.tile--lime .label{color:var(--c-ink)}
.tile--lime a{color:var(--c-ink)}
.tile--ink{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
.tile--ink .tile__text,.tile--ink .label{color:#B7BECC}
.tile--ink a{color:var(--c-paper)}
.tile--feature .tile__title{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.04em}
.tile__outline{display:grid;gap:6px;margin:0;padding:0;list-style:none;font:var(--fs-sm)/1.3 var(--font-mono)}
.tile__outline li{display:flex;gap:10px;padding:8px 12px;border:1px solid currentColor;border-radius:var(--r-sm);opacity:.9}
.tile__list{list-style:none;margin:0;padding:0;display:grid}
.tile__list li{border-top:1px solid var(--line)}
.tile__list a{display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center;text-decoration:none;font-weight:500}
.tile__list a:hover{background:var(--mark)}
.tile__chips{display:flex;flex-wrap:wrap;gap:8px}
.tile__bullets{margin:0;padding-left:1.1em;display:grid;gap:8px;font-size:var(--fs-sm)}
@media(min-width:600px){.bento{grid-template-columns:repeat(2,1fr)}.col-3,.col-4,.col-6{grid-column:span 2}}
@media(min-width:960px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.row-2{grid-row:span 2}
}

/* ---------- SECTIONS ---------- */
.section{padding-block:var(--s-8)}
.section__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3) var(--s-5);margin-bottom:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--text)}
.section__num{font:500 var(--fs-sm)/1 var(--font-mono);color:var(--muted)}
.section__title{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.04em}
.steps{display:grid;gap:12px;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.class-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.class-grid{grid-template-columns:repeat(4,1fr)}}
.class-card{display:grid;gap:4px;padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);text-decoration:none;min-height:110px;transition:transform .18s,border-color .18s}
.class-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:var(--surface)}
.class-card__n{font:800 var(--fs-3xl)/1 var(--font-display);letter-spacing:-.04em}

/* ---------- FAQ (details/summary) ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);min-height:56px;padding:12px 0;cursor:pointer;font:600 var(--fs-lg)/1.3 var(--font-display);list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";font:400 1.5rem/1 var(--font-mono);width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;flex:none}
.faq__item[open] .faq__q::after{content:"–";background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.faq__a{padding:0 0 var(--s-4);color:var(--muted);max-width:68ch}

/* ---------- FOOTER ---------- */
.site-footer{margin-top:var(--s-8);border-top:1px solid var(--text);padding-block:var(--s-7) var(--s-6);background:var(--surface)}
.site-footer__grid{display:grid;gap:var(--s-6);grid-template-columns:repeat(2,1fr)}
.site-footer__grid>:first-child{grid-column:1/-1}
@media(min-width:720px){.site-footer__grid{grid-template-columns:repeat(3,1fr)}.site-footer__grid>:first-child{grid-column:1/-1}}@media(min-width:1000px){.site-footer__grid{grid-template-columns:1.6fr 1.2fr 1fr 1fr 1.1fr}.site-footer__grid>:first-child{grid-column:auto}}.site-footer__addr{font-style:normal;color:var(--muted);font-size:var(--fs-sm);line-height:1.6;margin-top:var(--s-4)}
.site-footer__list{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid}
.site-footer__list a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:var(--fs-sm)}
.site-footer__list a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px}
.site-footer__legal{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs)}

/* ---------- SEARCH DIALOG ---------- */
.cmdk{width:min(640px,calc(100% - 24px));max-height:min(560px,80vh);margin:12vh auto auto;padding:0;border:1px solid var(--text);border-radius:var(--r-lg);background:var(--surface);color:var(--text);overflow:hidden}
.cmdk::backdrop{background:rgba(11,13,18,.62)}
.cmdk[open]{display:flex;flex-direction:column}
.cmdk__bar{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}
.cmdk__input{flex:1;min-height:56px;border:0;background:transparent;color:var(--text);font:500 var(--fs-lg)/1 var(--font-text);outline:0}
.cmdk__bar:focus-within{box-shadow:inset 0 -2px 0 var(--accent)}
.cmdk__list{list-style:none;margin:0;padding:8px;overflow:auto;flex:1}
.cmdk__item a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 12px;border-radius:var(--r-sm);text-decoration:none}
.cmdk__item[aria-selected="true"] a,.cmdk__item a:hover{background:var(--accent);color:var(--on-accent)}
.cmdk__item[aria-selected="true"] .tag{color:var(--c-ink);border-color:var(--c-ink)}
.cmdk__empty{padding:24px;color:var(--muted);text-align:center}
.cmdk__foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);color:var(--muted);font:var(--fs-xs)/1 var(--font-mono)}

/* ---------- BREADCRUMB / META ---------- */
.crumbs{padding-block:var(--s-4)}
.crumbs__list{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0;padding:0;font:var(--fs-xs)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.crumbs__list li+li::before{content:"/";margin-right:8px}
.crumbs__list a{display:inline-flex;align-items:center;min-height:32px}
.page-title{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.045em;max-width:20ch}
.page-intro{max-width:60ch;margin-top:var(--s-4);font-size:var(--fs-lg);color:var(--muted)}
.meta-row{display:flex;flex-wrap:wrap;gap:8px var(--s-4);margin-top:var(--s-5);font:var(--fs-xs)/1 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.meta-row span{display:inline-flex;align-items:center;gap:6px;min-height:28px}

/* ---------- CATEGORY ---------- */
.filter{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-block:var(--s-4);scrollbar-width:none}
.filter::-webkit-scrollbar{display:none}
.post-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:600px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s;min-height:200px}
.post-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:var(--surface)}
.post-card__title{font:700 var(--fs-xl)/1.15 var(--font-display);letter-spacing:-.02em}
.post-card__meta{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.post-card--pillar{grid-column:1/-1;background:var(--accent);color:var(--on-accent);border-color:var(--accent);min-height:0}
.post-card--pillar .tag{color:var(--c-ink);border-color:var(--c-ink)}
.post-card--pillar .post-card__title{font-size:var(--fs-2xl);letter-spacing:-.035em}
.post-card--pillar:hover{background:var(--accent);box-shadow:0 0 0 2px var(--text)}
.pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-block:var(--s-7)}
.seo-text{max-width:72ch}

/* ---------- ARTICLE LAYOUT ---------- */
.article-layout{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.article-layout{grid-template-columns:minmax(0,1fr) 280px;gap:var(--s-8)}.article-layout__aside{position:sticky;top:calc(var(--hdr-h) + 16px);align-self:start;max-height:calc(100vh - var(--hdr-h) - 32px);overflow:auto}.article-layout__aside .toc{display:block}}
.toc{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.toc__sum{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;cursor:pointer;font:500 var(--fs-xs)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;list-style:none}
.toc__sum::-webkit-details-marker{display:none}
.toc__list{list-style:none;margin:0;padding:0 8px 12px;display:grid;counter-reset:t}
.toc__list a{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-sm);text-decoration:none;font-size:var(--fs-sm);border-left:3px solid transparent}
.toc__list a::before{counter-increment:t;content:counter(t,decimal-leading-zero);font:var(--fs-xs)/1 var(--font-mono);color:var(--muted)}
.toc__list a[aria-current="true"]{background:var(--mark);border-left-color:var(--accent);font-weight:600}
.side-stack{display:grid;gap:var(--s-4)}

/* ---------- CONTENT TYPOGRAPHY (WordPress the_content) ---------- */
.prose{max-width:72ch;font-size:var(--fs-lg);line-height:1.7}
.prose>*+*{margin-top:var(--s-4)}
.prose h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.035em;margin-top:var(--s-8);padding-top:var(--s-4);border-top:1px solid var(--text)}
.prose h2 .num{display:block;font:500 var(--fs-sm)/1 var(--font-mono);color:var(--muted);letter-spacing:.04em;margin-bottom:var(--s-3)}
.prose h3{font-size:var(--fs-xl);font-weight:700;margin-top:var(--s-6)}
.prose h4{font-size:var(--fs-lg);margin-top:var(--s-5)}
.prose ul,.prose ol{padding-left:1.4em;display:grid;gap:8px}
.prose li::marker{color:var(--muted);font-family:var(--font-mono)}
.prose ul li::marker{color:var(--text)}
.prose blockquote{margin-inline:0;padding:var(--s-4) var(--s-5);background:var(--surface-2);border-radius:var(--r-md);font:500 var(--fs-xl)/1.35 var(--font-display)}
.prose blockquote cite{display:block;margin-top:8px;font:var(--fs-xs)/1 var(--font-mono);color:var(--muted);font-style:normal;text-transform:uppercase}
.prose mark{background:var(--mark);color:inherit;padding:0 .15em}
.prose code,.prose kbd{font:.88em var(--font-mono);background:var(--surface-2);padding:.1em .4em;border-radius:6px}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:var(--s-6)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:500 var(--fs-xs)/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.table-wrap table{min-width:520px}
@media(max-width:599px){
  .table--stack{min-width:0!important}
  .table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table--stack tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .table--stack td{display:grid;grid-template-columns:96px 1fr;gap:8px;border:0;padding:6px 14px}
  .table--stack td::before{content:attr(data-label);font:var(--fs-xs)/1.6 var(--font-mono);text-transform:uppercase;color:var(--muted)}
}

/* ---------- CONTENT COMPONENTS ---------- */
.quick-answer{padding:var(--s-5);border-radius:var(--r-lg);background:var(--accent);color:var(--on-accent);border:1px solid var(--c-ink)}
.quick-answer .label{color:var(--c-ink);margin-bottom:var(--s-2)}
.quick-answer p{font:600 var(--fs-xl)/1.3 var(--font-display);letter-spacing:-.02em}
.format-box{border:1.5px solid var(--text);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.format-box__title{display:flex;justify-content:space-between;padding:10px 16px;background:var(--text);color:var(--bg);font:500 var(--fs-xs)/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.format-box__row{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 16px;border-top:1px dashed var(--line);font-size:var(--fs-md);line-height:1.45}
.format-box__row:first-of-type{border-top:0}
.format-box__k{font:500 var(--fs-xs)/1.7 var(--font-mono);text-transform:uppercase;color:var(--muted)}
.format-box__row--end{justify-self:end;text-align:right}
.sample{border:1px solid var(--text);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.sample__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.sample__title{font:700 var(--fs-md)/1.2 var(--font-display);margin-right:auto;min-width:100%}
@media(min-width:720px){.sample__title{min-width:0}}
.sample__badge{min-width:92px;justify-content:center}
.sample__body{position:relative;padding:var(--s-5);font-size:var(--fs-md);line-height:1.75;transition:filter .25s}
.sample__body>*+*{margin-top:var(--s-3)}
.is-practice .sample__body:not(.is-revealed){filter:blur(7px);cursor:pointer;user-select:none}
.sample__hint{display:none;padding:8px 16px;font:var(--fs-xs)/1.4 var(--font-mono);background:var(--mark);border-bottom:1px solid var(--line)}
.is-practice .sample__hint{display:block}
.attempt{padding:var(--s-4);border-top:1px solid var(--line)}
.attempt__area{width:100%;min-height:120px;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);color:var(--text);font:var(--fs-md)/1.6 var(--font-text);resize:vertical}
.attempt__bar{display:flex;justify-content:space-between;align-items:center}
.do-dont{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.do-dont{grid-template-columns:1fr 1fr}}
.do-dont__col{padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.do-dont__col--do{border-color:var(--accent);box-shadow:inset 0 3px 0 var(--accent)}
.do-dont__col--dont{box-shadow:inset 0 3px 0 var(--c-slate)}
.do-dont__title{display:flex;align-items:center;gap:8px;font:700 var(--fs-md)/1 var(--font-mono);text-transform:uppercase;margin-bottom:var(--s-3)}
.do-dont ul{margin:0;padding-left:1.2em;display:grid;gap:8px;font-size:var(--fs-md)}
.examiner-tip{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-md);background:var(--c-ink);color:var(--c-paper)}
.examiner-tip .icon{color:var(--c-lime);width:24px;height:24px}
.examiner-tip .label{color:var(--c-lime)}
.examiner-tip p{font-size:var(--fs-md)}
.checklist{list-style:none;padding:0!important;display:grid;gap:8px}
.checklist li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-md)}
.checklist li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:6px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.also-read{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-5);border:1px solid var(--text);border-radius:var(--r-md);text-decoration:none;background:var(--surface);transition:transform .18s,box-shadow .18s}
.also-read:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--accent);background:var(--surface)}
.also-read__title{font:700 var(--fs-xl)/1.2 var(--font-display)}
.author-box{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.author-box__avatar{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:800 1.2rem/1 var(--font-display);border:1px solid var(--c-ink)}
.related{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:960px){.related{grid-template-columns:repeat(4,1fr)}}
.related .post-card{min-height:150px;padding:var(--s-4)}
.related .post-card__title{font-size:var(--fs-md)}
.prev-next{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:600px){.prev-next{grid-template-columns:1fr 1fr}}
.prev-next a{display:grid;gap:6px;padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;min-height:88px;background:var(--surface)}
.prev-next a:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.prev-next a:last-child{text-align:right}
.examiner{border:1px dashed var(--text);border-radius:var(--r-lg);padding:var(--s-5);background:var(--surface);display:grid;gap:var(--s-3)}
.examiner__row{display:flex;gap:8px}
.examiner__input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg);color:var(--text);font:var(--fs-md) var(--font-text)}
.examiner__input:disabled{opacity:.6;cursor:not-allowed}
.examiner__prompts{display:flex;flex-wrap:wrap;gap:8px}
.examiner__prompts .chip{opacity:.7;cursor:not-allowed;font-family:var(--font-text)}
.examiner__note{font:var(--fs-xs)/1.5 var(--font-mono);color:var(--muted)}

/* ---------- FORMS (page.html) ---------- */
.form{display:grid;gap:var(--s-4);padding:var(--s-5);border:1px solid var(--text);border-radius:var(--r-lg);background:var(--surface)}
.form__field{display:grid;gap:6px}
.form__label{font:500 var(--fs-xs)/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.form__control{min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);color:var(--text);font:var(--fs-md)/1.4 var(--font-text);width:100%}
.form__control:hover{border-color:var(--c-slate)}
.form__control:focus{border-color:var(--focus)}
textarea.form__control{min-height:140px;resize:vertical}
.form__hint{font-size:var(--fs-xs);color:var(--muted)}
.page-layout{display:grid;gap:var(--s-7)}
@media(min-width:960px){.page-layout{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-8)}}
.notfound__code{font:800 clamp(6rem,30vw,16rem)/.85 var(--font-display);letter-spacing:-.06em}
.search-big{display:flex;gap:8px;margin-top:var(--s-5);max-width:640px}
.result-list{list-style:none;padding:0;margin:var(--s-5) 0 0;display:grid;gap:8px;min-height:200px}
.result-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);text-decoration:none;font-weight:500}
.result-list a:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}

/* WP additions: auto section numbers (no extra heading text) */
.prose{counter-reset:amn-sec}
.prose>h2::before{counter-increment:amn-sec;content:counter(amn-sec,decimal-leading-zero);display:block;font:500 var(--fs-sm)/1 var(--font-mono);color:var(--muted);letter-spacing:.04em;margin-bottom:var(--s-3)}
.prose img{height:auto;border-radius:var(--r-md)}
.prose .alignwide,.prose .alignfull{max-width:100%}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);font:500 var(--fs-sm)/1 var(--font-mono);color:var(--text);text-decoration:none;background:var(--surface)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* Footer contrast: beats third-party "footer{color}" rules */
.site-footer{color:var(--text)}
.site-footer .site-footer__list a,.site-footer .wordmark{color:var(--text)}
.site-footer .label{color:var(--muted)}
.prose address{font-style:normal;line-height:1.7}

/* Hero two-column on desktop: copy left, format finder right */
@media(min-width:1000px){.hero>.wrap{display:grid;grid-template-columns:1.1fr 1fr;column-gap:56px;align-items:start}.hero__eyebrow,.hero__title,.hero__sub{grid-column:1}.hero .finder{grid-column:2;grid-row:1/span 3;margin-top:0;align-self:center}.hero .finder__row{grid-template-columns:1fr 1fr}.hero .finder__field:nth-child(3){grid-column:1/-1}.hero .finder .btn{grid-column:1/-1}}
/* Footer: class list in two columns so all columns match height */
.site-footer__list--2{grid-template-columns:1fr 1fr;column-gap:16px;align-content:start}
body,.btn,.tag,.chip,.label{font-feature-settings:"cv11","ss01"}