@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Space Grotesk', sans-serif; background: var(--sf-bg); color: var(--sf-ink); }
a { color: inherit; }
img { max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; }


/* ===================================================================
   AFTERBURN-LIGHT DESIGN SYSTEM
   Tokens + reusable components for the Silkies Fitness theme.
   =================================================================== */

:root {
  --sf-bg: #FFF8F5;
  --sf-surface: #FFFFFF;
  --sf-surface-2: #FFEDE0;
  --sf-ink: #160004;
  --sf-muted: #8A4020;
  --sf-line: #FDDCC8;
  --sf-neon: #FF6B35;
  --sf-neon-edge: #D84010;
  --sf-accent2: #4D9FFF;
  --sf-accent2-edge: #1A6FDB;
  --sf-accent3: #E040FB;
  --sf-accent3-edge: #B000D0;
  --sf-r: 14px;
  --sf-gap: 24px;
}

/* ---- Utility -------------------------------------------------- */
.sf-mono { font-family: 'Space Mono', monospace; }

/* ---- 1600px wide-section override ----------------------------- */
/* Add .sf-w1600 to any alignfull section to expand alignwide     */
/* children to 1600px. Also hard-caps .alignwide inner blocks     */
/* since layout:default parents skip the constrained max-width.   */
.sf-w1600 {
  --wp--style--global--wide-size: 1600px;
}
.sf-w1600 .wp-block-group.alignwide,
.sf-w1600 .wp-block-query.alignwide {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ---- MARQUEE -------------------------------------------------- */
.sf-marquee {
  background: var(--sf-neon);
  color: var(--sf-ink);
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--sf-neon-edge);
}
.sf-marquee .sf-track {
  display: inline-flex;
  gap: 40px;
  padding: 9px 0;
  animation: sf-scroll 55s linear infinite;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
@keyframes sf-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sf-marquee .sf-track { animation: none; }
}

/* ---- SECTION / CATEGORY HEAD ---------------------------------- */
.sf-cat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.sf-cat-head h2 {
  font-size: 15px;
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  position: relative;
  padding-bottom: 6px;
}
.sf-cat-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 4px;
  background: var(--sf-accent2);
  border-radius: 2px;
}
.sf-cat-head .sf-rule { flex: 1; height: 1px; background: var(--sf-line); }
.sf-cat-head a {
  font-size: 12px;
  color: var(--sf-ink);
  font-family: 'Space Mono', monospace;
  border-bottom: 2px solid var(--sf-accent2);
  padding-bottom: 2px;
}

/* ---- HERO (dark split masthead) ------------------------------- */
.sf-hero {
  background: var(--sf-ink);
  border-bottom: none;
  padding: 0;
  position: relative;
  overflow: hidden;
}
/* Lime haze drifts softly behind the hero — subtle animated depth */
.sf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 25% 45%, rgba(255,107,53,.09) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 78% 70%, rgba(255,107,53,.05) 0%, transparent 60%);
  animation: sf-hero-haze 11s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes sf-hero-haze {
  0%   { opacity: .5;  transform: scale(1)    translate(0,0); }
  50%  { opacity: 1;   transform: scale(1.12) translate(4%,-3%); }
  100% { opacity: .65; transform: scale(.96)  translate(-3%,5%); }
}
.sf-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 56px 0;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}
.sf-hero-left { flex: 1; min-width: 260px; }
.sf-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--sf-neon);
  margin-bottom: 14px;
  display: block;
}
.sf-hero h1 {
  font-size: clamp(42px, 6.5vw, 74px);
  line-height: .92;
  letter-spacing: -.03em;
  font-weight: 700;
  color: #fff;
  max-width: 13ch;
  margin: 0;
}
/* Base mark — layout/radius only; colour comes from .sf-m1 / .sf-m2 */
.sf-hero h1 mark {
  padding: 0 .12em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Alternating highlight: the two marks pulse offset from each other */
.sf-hero h1 .sf-m1 {
  background: var(--sf-neon);
  color: var(--sf-ink);
  animation: sf-mark-alt 5s ease-in-out infinite;
}
.sf-hero h1 .sf-m2 {
  background: var(--sf-neon);
  color: var(--sf-ink);
  animation: sf-mark-alt 5s ease-in-out infinite 2.5s;
}
@keyframes sf-mark-alt {
  0%, 100% { background: var(--sf-neon);           color: var(--sf-ink); }
  50%       { background: rgba(255,107,53,.18);      color: rgba(255,255,255,.9); }
}
.sf-hero-right {
  flex-shrink: 0;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sf-hero-sub {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,.62);
  font-family: 'Space Grotesk', sans-serif;
  margin: 0;
}
.sf-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sf-hero-actions .sf-btn-lime {
  background: var(--sf-neon);
  color: var(--sf-ink);
  border: 1px solid var(--sf-neon-edge);
  padding: 12px 24px;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform .2s;
  display: inline-block;
}
.sf-hero-actions .sf-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.28);
  padding: 12px 24px;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform .2s, background .2s, border-color .2s;
  display: inline-block;
}
.sf-hero-actions a:hover { transform: translateY(-2px); }
.sf-hero-actions .sf-btn-ghost:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.45);
}
@media (max-width: 760px) {
  .sf-hero-inner { flex-direction: column; gap: 28px; padding: 40px 0; }
  .sf-hero-right { max-width: none; width: 100%; }
}

/* ---- NEWS CARD (title inlaid over image) ---------------------- */
.sf-ncard {
  position: relative;
  border-radius: var(--sf-r);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  border: 1px solid var(--sf-line);
}
.sf-ncard .sf-img {
  position: absolute;
  inset: 0;
  background: var(--sf-surface-2);
  background-size: cover;
  background-position: center;
  transition: transform .4s;
}
.sf-ncard:hover .sf-img { transform: scale(1.05); }
.sf-ncard .sf-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%);
}
.sf-ncard .sf-content { position: relative; z-index: 2; padding: 22px; }
.sf-ncard .sf-tag {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  background: var(--sf-neon);
  color: var(--sf-ink);
  padding: 4px 9px;
  border-radius: 5px;
  margin-bottom: 11px;
}
.sf-ncard h3 {
  color: #fff;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.16;
  font-size: 20px;
}
.sf-ncard p { color: rgba(255,255,255,.78); font-size: 14px; margin-top: 8px; max-width: 42ch; }
.sf-ncard .sf-meta {
  color: rgba(255,255,255,.6);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  margin-top: 12px;
}
.sf-ncard.sf-lg h3 { font-size: 34px; }
.sf-ncard.sf-md h3 { font-size: 24px; }

/* ---- MOSAIC GRIDS (dynamic wp:post-template) ------------------
   These classes are applied to a core wp:post-template, which renders
   as <ul class="wp-block-post-template"> with one <li class="wp-block-post">
   per post. Because every item in a post-template is structurally
   identical, mixed tile sizes come from :nth-child rules on the <li>
   items rather than per-tile classNames. The override of the core
   is-layout-grid display below is intentional — we drive the grid
   ourselves so the nth-child spans take effect.
   ------------------------------------------------------------------ */

/* Each <li> is a transparent positioning cell; the inner cover fills it. */
.sf-mosaic.wp-block-post-template,
.sf-mosaic-feat.wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sf-mosaic > li,
.sf-mosaic-feat > li {
  margin: 0;
  min-width: 0;
  display: flex;
}
/* Stretch the cover tile to fill its grid cell. */
.sf-mosaic > li > .sf-ncard,
.sf-mosaic-feat > li > .sf-ncard {
  flex: 1;
  width: 100%;
  height: 100%;
}

/* ---- CATEGORY MOSAIC (varied sizes) ---------------------------
   3 posts per row: first tile spans 2 columns (the "wide" lead),
   the other two are single-column. Falls back gracefully for <3.   */
.sf-mosaic {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: var(--sf-gap);
}
.sf-mosaic > li:nth-child(3n + 1) { grid-column: span 2; }
@media (max-width: 760px) {
  .sf-mosaic { grid-template-columns: 1fr 1fr; }
  .sf-mosaic > li:nth-child(3n + 1) { grid-column: span 2; }
}
@media (max-width: 520px) {
  .sf-mosaic { grid-template-columns: 1fr; }
  .sf-mosaic > li:nth-child(3n + 1) { grid-column: 1; }
}

/* ---- FEATURED MOSAIC (hero-scale news grid) -------------------
   4 newest posts: tile 1 large (2 cols x 2 rows), tile 2 wide across
   the top-right, tiles 3 & 4 fill the bottom-right pair.            */
.sf-mosaic-feat {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 230px;
  gap: var(--sf-gap);
}
.sf-mosaic-feat > li:nth-child(1) { grid-column: 1; grid-row: span 2; }
.sf-mosaic-feat > li:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.sf-mosaic-feat > li:nth-child(3) { grid-column: 2; grid-row: 2; }
.sf-mosaic-feat > li:nth-child(4) { grid-column: 3; grid-row: 2; }
@media (max-width: 820px) {
  .sf-mosaic-feat { grid-template-columns: 1fr 1fr; }
  .sf-mosaic-feat > li:nth-child(1),
  .sf-mosaic-feat > li:nth-child(2) { grid-column: 1 / span 2; grid-row: auto; }
  .sf-mosaic-feat > li:nth-child(3),
  .sf-mosaic-feat > li:nth-child(4) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 520px) {
  .sf-mosaic-feat { grid-template-columns: 1fr; }
  .sf-mosaic-feat > li { grid-column: 1 !important; grid-row: auto !important; }
}

/* ---- NEWS CARD as core wp:cover -------------------------------
   When .sf-ncard is on a wp:cover (useFeaturedImage), the featured
   image is .wp-block-cover__image-background and the dark gradient is
   the cover's own dim overlay (.has-background-dim). The title/terms/
   excerpt live in .wp-block-cover__inner-container, which we treat as
   the .sf-content layer. We restyle these so the cover reads like the
   mockup's inlaid news tile.                                         */
.sf-ncard.wp-block-cover {
  min-height: 230px;
  padding: 0;
  align-items: stretch;
  justify-content: flex-end;
}
.sf-ncard.wp-block-cover .wp-block-cover__image-background {
  transition: transform .4s;
}
.sf-ncard.wp-block-cover:hover .wp-block-cover__image-background { transform: scale(1.05); }
/* Replace the cover's flat dim with our bottom-up scrim. */
.sf-ncard.wp-block-cover .wp-block-cover__background {
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%) !important;
  opacity: 1 !important;
}
.sf-ncard.wp-block-cover > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box; /* include the 22px padding in the 100% width so the
                             content doesn't overflow the card and clip on the left */
  padding: 22px;
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
/* Post-title inside the cover. */
.sf-ncard.wp-block-cover .wp-block-post-title {
  color: #fff;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.16;
  font-size: 20px;
  margin: 0;
}
.sf-ncard.wp-block-cover .wp-block-post-title a { color: #fff; text-decoration: none; }
.sf-ncard.wp-block-cover .wp-block-post-excerpt {
  color: rgba(255,255,255,.78);
  font-size: 14px;
  margin-top: 8px;
  max-width: 46ch;
}
.sf-ncard.wp-block-cover .wp-block-post-excerpt p { margin: 0; }
.sf-ncard.wp-block-cover .wp-block-post-excerpt__more-link { display: none; }
/* Category chip rendered by wp:post-terms. */
.sf-ncard.wp-block-cover .sf-tag,
.sf-ncard.wp-block-cover .wp-block-post-terms.sf-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  background: var(--sf-neon);
  color: var(--sf-ink);
  padding: 4px 9px;
  border-radius: 5px;
  margin-bottom: 11px;
}
.sf-ncard.wp-block-cover .sf-tag a { color: var(--sf-ink); text-decoration: none; }
.sf-ncard.wp-block-cover .sf-tag .wp-block-post-terms__separator { display: none; }
/* Large lead tiles get a bigger headline; excerpts only show on the
   lead tiles (featured mosaic tile 1, category mosaic tile 1) so the
   small tiles stay clean. The post-template is uniform, so this is
   driven by :nth-child rather than per-tile markup. */
.sf-mosaic-feat > li:nth-child(1) .wp-block-post-title { font-size: clamp(24px, 3.4vw, 34px); }
.sf-mosaic > li:nth-child(3n + 1) .wp-block-post-title { font-size: 24px; }
.sf-mosaic-feat > li:not(:nth-child(1)) .wp-block-post-excerpt,
.sf-mosaic > li:not(:nth-child(3n + 1)) .wp-block-post-excerpt { display: none; }
/* Fallback tint when a post has no featured image. */
.sf-ncard.wp-block-cover:not(.has-background-dim)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2a1208, #0e0604);
  z-index: 0;
}

/* ---- SOCIAL FOLLOW STRIP -------------------------------------- */
.sf-follow-section { background: var(--sf-surface-2); }
.sf-follow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sf-gap);
}
/* Square dark cards — base style */
.sf-fcard {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--sf-r);
  background: var(--sf-ink);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  justify-content: center;
  text-decoration: none;
}
.sf-fcard:hover {
  border-color: var(--sf-neon-edge);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
}
/* Per-platform tinted dark backgrounds */
.sf-fcard-yt  { background: #180a00; }
.sf-fcard-ig  { background: #150011; }
.sf-fcard-tt  { background: #000c15; }
.sf-fcard-fb  { background: #000e26; }
.sf-fcard .sf-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  display: grid;
  place-items: center;
}
.sf-fcard .sf-ic svg { width: 22px; height: 22px; fill: var(--sf-neon); display: block; }
.sf-fcard .sf-h { font-weight: 700; font-size: 18px; color: #fff; }
.sf-fcard .sf-c {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,.50);
}
@media (max-width: 760px) { .sf-follow { grid-template-columns: repeat(2, 1fr); } }

/* ---- CATEGORY CARDS (numbered) -------------------------------- */
.sf-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sf-cat {
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r);
  padding: 22px 18px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
}
.sf-cat:hover {
  border-color: var(--sf-neon-edge);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.sf-cat .sf-n { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--sf-muted); }
.sf-cat .sf-t { font-size: 18px; font-weight: 600; margin-top: 10px; letter-spacing: -.01em; }
.sf-cat .sf-bar {
  margin-top: 14px;
  height: 4px;
  width: 26px;
  background: var(--sf-line);
  border-radius: 2px;
  transition: width .25s, background .25s;
}
.sf-cat:hover .sf-bar { width: 48px; background: var(--sf-neon); }
@media (max-width: 760px) { .sf-cats { grid-template-columns: repeat(2, 1fr); } }

/* ---- FEATURED (lime hero block + side minis) ------------------ */
.sf-featured { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sf-gap); }
.sf-feat-main {
  position: relative;
  border-radius: var(--sf-r);
  overflow: hidden;
  border: 1px solid var(--sf-neon-edge);
  background: var(--sf-neon);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
}
.sf-feat-main .sf-tag {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--sf-ink);
  color: #fff;
  padding: 5px 11px;
  border-radius: 6px;
  margin-bottom: 16px;
  align-self: flex-start;
}
.sf-feat-main h3 {
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 700;
  max-width: 17ch;
  color: var(--sf-ink);
}
.sf-feat-main .sf-meta { margin-top: 16px; font-family: 'Space Mono', monospace; font-size: 12px; color: #3a3f12; }
.sf-feat-side { display: flex; flex-direction: column; gap: 14px; }
.sf-mini {
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r);
  padding: 22px;
  transition: border-color .2s, box-shadow .2s;
  cursor: pointer;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sf-mini:hover { border-color: var(--sf-neon-edge); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.sf-mini .sf-tag2 {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--sf-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: inline-block;
  border-left: 3px solid var(--sf-accent2);
  padding-left: 8px;
}
.sf-mini h4 { font-size: 19px; font-weight: 600; margin-top: 10px; letter-spacing: -.01em; line-height: 1.2; }
@media (max-width: 760px) {
  .sf-featured { grid-template-columns: 1fr; }
  .sf-feat-main { min-height: 300px; }
}

/* ---- POST GRID (thumbnail cards) ------------------------------ */
.sf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sf-gap); }
.sf-card {
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r);
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
}
.sf-card:hover {
  border-color: var(--sf-neon-edge);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.07);
}
.sf-card .sf-thumb {
  height: 170px;
  background: var(--sf-surface-2);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.sf-card .sf-thumb::after {
  content: "";
  position: absolute;
  left: -20%;
  bottom: -40%;
  width: 60%;
  height: 120%;
  background: var(--sf-neon);
  opacity: .5;
  transform: rotate(18deg);
}
.sf-card .sf-body { padding: 20px; }
.sf-card .sf-tag2 {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--sf-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: inline-block;
  border-left: 3px solid var(--sf-accent2);
  padding-left: 8px;
}
.sf-card h3 { font-size: 19px; font-weight: 600; margin-top: 10px; letter-spacing: -.01em; line-height: 1.22; }
.sf-card .sf-meta { margin-top: 14px; font-family: 'Space Mono', monospace; font-size: 11px; color: var(--sf-muted); }
@media (max-width: 760px) { .sf-grid { grid-template-columns: 1fr; } }

/* ---- CTA BAND ------------------------------------------------- */
/* Full-width dark band with a lime spotlight that follows the cursor.
   The JS (in the newsletter wp:html block) sets --sf-spot-x/y on
   mousemove; the radial gradient renders the glow at that position.  */
.sf-cta-band {
  background:
    radial-gradient(circle at var(--sf-spot-x,50%) var(--sf-spot-y,-20%), rgba(255,107,53,.22) 0%, transparent 55%),
    var(--sf-ink);
  --sf-spot-x: 50%;
  --sf-spot-y: -20%;
  color: #fff;
  padding: 64px clamp(24px, 5vw, 80px);
}
/* Inner flex row: constrains content to 1600px max, centred. */
.sf-cta-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.sf-cta-band h2 { font-size: 32px; letter-spacing: -.02em; font-weight: 700; max-width: 16ch; color: #fff; }
.sf-cta-band h2 mark { background: var(--sf-neon); color: var(--sf-ink); padding: 0 .1em; border-radius: 4px; }
.sf-cta-band form { display: flex; gap: 10px; }
.sf-cta-band input {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  padding: 14px 18px;
  border: none;
  border-radius: 999px;
  width: 260px;
}
.sf-cta-band button {
  font-weight: 700;
  font-size: 14px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--sf-neon);
  color: var(--sf-ink);
  border: none;
  cursor: pointer;
}

/* ---- BUTTONS (core block overrides) --------------------------- */
/* Lime-primary: the default fill button treatment. */
.wp-block-button .wp-block-button__link {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--sf-accent3);
  color: var(--sf-ink);
  border: 1px solid var(--sf-accent3-edge);
  transition: transform .2s, background .2s, border-color .2s;
}
.wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); }
/* Ink-ghost: outline variant via .is-style-outline or .sf-ghost. */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.sf-ghost .wp-block-button__link {
  background: transparent;
  color: var(--sf-ink);
  border: 1px solid var(--sf-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.sf-ghost .wp-block-button__link:hover {
  background: var(--sf-ink);
  color: #fff;
  transform: translateY(-2px);
}

/* ---- SINGLE POST ---------------------------------------------- */
/* Lime-highlight treatment for in-content H2 headings. */
.sf-single .entry-content h2,
.sf-single h2.wp-block-heading {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  background: var(--sf-neon);
  color: var(--sf-ink);
  padding: 2px .25em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Mono meta bar above the article body (date · read time · category). */
.sf-meta-bar {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sf-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--sf-line);
  border-bottom: 1px solid var(--sf-line);
}
.sf-meta-bar .sf-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.sf-meta-bar .sf-meta-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-neon);
}

/* ---- SINGLE POST HEADER + CHROME (Afterburn-Light) ------------
   Light header band, category chip, meta bar wiring for the single
   template (build-single-template.mjs). No grey band, no pink/blue. */

/* Outer main owns no padding; each section is self-constraining. */
.sf-single-main { margin-top: 0; }

/* Light post header — off-white, constrained inner column. */
.sf-post-head {
  background: var(--sf-surface);
  border-bottom: 1px solid var(--sf-line);
}
.sf-post-head-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  box-sizing: border-box;
}
/* Standalone category chip (post-terms with .sf-tag, not inside a cover). */
.sf-post-head .sf-tag,
.sf-post-head .wp-block-post-terms.sf-tag {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--sf-neon);
  color: var(--sf-ink);
  padding: 5px 11px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.sf-post-head .sf-tag a { color: var(--sf-ink); text-decoration: none; }
.sf-post-head .sf-tag .wp-block-post-terms__separator { display: none; }
/* H1 title — large, ink. */
.sf-post-head .wp-block-post-title {
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.04;
  letter-spacing: -.025em;
  font-weight: 700;
  color: var(--sf-ink);
  margin: 0 0 22px;
}
.sf-post-head .wp-block-post-title a { color: var(--sf-ink); text-decoration: none; }

/* Meta bar inside the single header — reuse .sf-meta-bar look, wire up
   the post-date + author + read time as .sf-meta-item dot rows. */
.sf-post-head .sf-meta-bar { margin: 0; }
.sf-post-head .sf-meta-bar .wp-block-post-date,
.sf-post-head .sf-meta-bar .wp-block-post-date a,
.sf-post-head .sf-meta-bar .wp-block-post-author,
.sf-post-head .sf-meta-bar .wp-block-post-author__name,
.sf-post-head .sf-meta-bar .wp-block-post-author__name a {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sf-muted);
  text-decoration: none;
}
.sf-post-head .sf-meta-bar .wp-block-post-author {
  display: inline-flex;
  align-items: center;
}
.sf-post-head .sf-meta-bar .wp-block-post-author__avatar { display: none; }
/* Lime dot before each meta block (date / author / read time). */
.sf-post-head .sf-meta-bar > * { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.sf-post-head .sf-meta-bar > *::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-neon);
  flex-shrink: 0;
}

/* Featured image — wide, rounded. */
.sf-single-feat {
  max-width: 1080px;
  margin: 32px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
}
.sf-single-feat img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--sf-r);
  display: block;
}

/* Content column — single, readable measure. */
.sf-single {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  box-sizing: border-box;
}
.sf-single .wp-block-post-content > *:first-child { margin-top: 0; }
.sf-single .wp-block-post-content p {
  font-size: 1.075rem;
  line-height: 1.8;
  color: var(--sf-ink);
}
.sf-single .wp-block-post-content a {
  color: var(--sf-ink);
  text-decoration: underline;
  text-decoration-color: var(--sf-neon-edge);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.sf-single .wp-block-post-content a:hover { color: var(--sf-neon-edge); }
.sf-single .wp-block-post-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--sf-ink);
  margin-top: 1.8em;
  margin-bottom: .5em;
}
.sf-single .wp-block-post-content img { max-width: 100%; height: auto; border-radius: var(--sf-r); }
.sf-single .wp-block-post-content blockquote {
  border-left: 4px solid var(--sf-neon);
  padding-left: .9em;
  color: var(--sf-muted);
  margin: 1.4em 0;
}
/* H2-wrapper blockquotes (pipeline wraps H2 in blockquote): strip the
   quote rule so the lime-highlight H2 reads clean. */
.sf-single .wp-block-post-content blockquote:has(h2) {
  border-left: none;
  padding-left: 0;
  color: inherit;
  margin: 2em 0 .6em;
}

/* Table of contents (pipeline-generated markup) — Afterburn-Light. */
.sf-single .table-of-contents {
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-line);
  border-left: 4px solid var(--sf-neon);
  border-radius: var(--sf-r);
  padding: 22px 24px;
  margin: 0 0 2.4em;
  box-sizing: border-box;
}
.sf-single .table-of-contents > p {
  font-family: 'Space Mono', monospace;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sf-ink);
  margin: 0 0 14px;
}
.sf-single .table-of-contents ul { list-style: none; margin: 0; padding-left: 0; }
.sf-single .table-of-contents ul ul { padding-left: 1.2em; margin-top: 6px; }
.sf-single .table-of-contents li { margin-bottom: 9px; }
.sf-single .table-of-contents li:last-child { margin-bottom: 0; }
.sf-single .table-of-contents a {
  color: var(--sf-ink);
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .92rem;
  line-height: 1.5;
}
.sf-single .table-of-contents a:hover { text-decoration: underline; text-decoration-color: var(--sf-neon-edge); text-underline-offset: 3px; }

/* ---- SINGLE POST CHROME: share row, author card, post nav ------ */
.sf-single-chrome { max-width: 760px; margin: 0 auto; padding: 0 24px 56px; box-sizing: border-box; }

/* Share row */
.sf-share-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--sf-line);
  border-bottom: 1px solid var(--sf-line);
  margin-bottom: 36px;
}
.sf-share-label {
  font-family: 'Space Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sf-muted);
}
.sf-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--sf-line);
  border-radius: 8px;
  color: var(--sf-ink);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 700;
  font-family: 'Space Mono', monospace;
  background: var(--sf-surface);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  line-height: 1;
}
.sf-share-btn:hover { border-color: var(--sf-neon-edge); background: var(--sf-neon); color: var(--sf-ink); }

/* Author card */
.sf-author-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r);
  padding: 22px;
  margin-bottom: 36px;
}
.sf-author-card .wp-block-post-author { display: flex; align-items: center; gap: 16px; }
.sf-author-card .wp-block-post-author__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--sf-neon);
  object-fit: cover;
}
.sf-author-card .wp-block-post-author__name,
.sf-author-card .wp-block-post-author__name a {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--sf-ink);
  text-decoration: none;
}
.sf-author-card .wp-block-post-author__bio {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--sf-muted);
  margin-top: 4px;
}
.sf-author-socials { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.sf-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sf-ink);
  color: #fff;
  text-decoration: none;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.sf-social-btn svg { width: 15px; height: 15px; fill: var(--sf-neon); display: block; pointer-events: none; }
.sf-social-btn:hover { background: var(--sf-neon-edge); transform: translateY(-2px); }
.sf-social-btn:hover svg { fill: var(--sf-ink); }

/* Prev / next post navigation */
.sf-post-nav .wp-block-post-navigation-link {
  font-family: 'Space Mono', monospace;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sf-post-nav .wp-block-post-navigation-link a { color: var(--sf-ink); text-decoration: none; }
.sf-post-nav .wp-block-post-navigation-link a:hover { color: var(--sf-neon-edge); }
.sf-post-nav { border-top: 1px solid var(--sf-line); padding-top: 24px; }

@media (max-width: 640px) {
  .sf-post-head-inner { padding: 40px 16px 28px; }
  .sf-single-feat, .sf-single, .sf-single-chrome { padding-left: 16px; padding-right: 16px; }
  .sf-author-card { flex-wrap: wrap; }
  .sf-author-socials { margin-left: 0; }
}

/* ---- SITE CHROME: HEADER / NAV (Afterburn-Light) --------------
   Sticky light nav reproducing mockups/A-afterburn-news.html: logo
   (ink wordmark + lime dot accent), nav links, a social icon row and
   a dark "Subscribe" pill. Applied to the twentytwentyfive//header
   template part via .sf-nav and friends. */
.sf-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 245, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sf-line);
}
/* Logo wordmark + lime dot — replaces the retired pink site-title. */
.sf-logo,
.sf-logo.wp-block-site-title {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  margin: 0;
}
.sf-logo a { color: var(--sf-ink); text-decoration: none; }
.sf-logo::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sf-accent3);
  box-shadow: 0 0 0 3px var(--sf-accent3-edge);
  flex-shrink: 0;
}
/* Primary navigation links — bolder, larger, ink on hover. */
.sf-nav-links.wp-block-navigation {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sf-nav-links .wp-block-navigation-item__content { color: var(--sf-muted); transition: color .2s; }
.sf-nav-links .wp-block-navigation-item__content:hover { color: var(--sf-ink); }
.sf-nav-links a { color: var(--sf-muted); }
.sf-nav-links a:hover { color: var(--sf-ink); }
/* Right cluster: socials + subscribe pill. */
.sf-nav-right { display: flex; align-items: center; gap: 16px; }
/* Bordered square social glyphs (header style). */
.sf-soc { display: flex; gap: 8px; align-items: center; }
.sf-soc a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--sf-line);
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--sf-ink);
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.sf-soc a svg { width: 16px; height: 16px; fill: var(--sf-ink); display: block; pointer-events: none; }
.sf-soc a:hover { background: var(--sf-neon); border-color: var(--sf-neon-edge); transform: translateY(-2px); }
/* Dark "Subscribe" pill. */
.sf-subscribe a,
.sf-subscribe .wp-block-button__link {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: var(--sf-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: transform .2s, background .2s;
}
.sf-subscribe a:hover,
.sf-subscribe .wp-block-button__link:hover { transform: translateY(-2px); background: var(--sf-accent3); color: var(--sf-ink); }
@media (max-width: 900px) { .sf-nav-links { display: none; } }
@media (max-width: 560px) { .sf-nav .sf-soc { display: none; } }

/* ---- SITE CHROME: FOOTER (Afterburn-Light) --------------------
   Light footer reproducing the mockup: muted copyright/disclosure on
   the left, neon-on-ink social glyph row on the right. Replaces the
   retired inline-pink footer paragraph. Reuses .sf-social-btn (defined
   in the author-card block above) for the round ink/neon glyphs. */
.sf-footer { border-top: 1px solid var(--sf-line); }
.sf-footer-copy {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  color: var(--sf-muted);
  margin: 0;
}
.sf-footer-disclosure {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  color: var(--sf-muted);
  margin: 0;
}
.sf-footer-soc { display: flex; gap: 8px; align-items: center; }

/* ---- BIG MIXED MOSAIC (fresh-off-the-rack, 9 posts) -----------
   3-column grid. Tile 1 spans 2 cols × 2 rows (hero tile). Tiles 2
   and 3 auto-place into col 3 rows 1–2. Tiles 4–9 fill rows 3–4 in
   a standard 3-col layout.                                          */
.sf-mosaic-big {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: var(--sf-gap);
}
.sf-mosaic-big > li { margin: 0; min-width: 0; display: flex; }
.sf-mosaic-big > li > .sf-ncard { flex: 1; width: 100%; height: 100%; }
.sf-mosaic-big > li:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.sf-mosaic-big > li:nth-child(1) .wp-block-post-title {
  font-size: clamp(26px, 3.2vw, 36px);
}
.sf-mosaic-big > li:not(:nth-child(1)) .wp-block-post-excerpt { display: none; }
/* Centre the category chip horizontally within each tile */
.sf-mosaic-big .wp-block-post-terms.sf-tag,
.sf-mosaic-big .sf-tag {
  align-self: center;
}
@media (max-width: 820px) {
  .sf-mosaic-big { grid-template-columns: 1fr 1fr; }
  .sf-mosaic-big > li:nth-child(1) { grid-column: 1 / span 2; grid-row: auto; }
}
@media (max-width: 520px) {
  .sf-mosaic-big { grid-template-columns: 1fr; }
  .sf-mosaic-big > li:nth-child(1) { grid-column: 1; }
}

/* ---- CATEGORY BROWSE PILLS ------------------------------------ */
.sf-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--sf-line);
  /* Align pills to wide-content width like the mosaic above */
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left: auto;
  margin-right: auto;
}
.sf-cat-pills a {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 16px;
  border: 1px solid var(--sf-line);
  border-radius: 999px;
  color: var(--sf-ink);
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
  white-space: nowrap;
}
.sf-cat-pills a:hover {
  background: var(--sf-accent3);
  border-color: var(--sf-accent3-edge);
  transform: translateY(-2px);
}

/* ---- REDUCED MOTION ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sf-hero::before,
  .sf-hero h1 .sf-m1,
  .sf-hero h1 .sf-m2 { animation: none; }
  .sf-hero h1 .sf-m1,
  .sf-hero h1 .sf-m2 { background: var(--sf-neon); color: var(--sf-ink); }
}