/* =============================================================================
   FOLIO styles — one universal section, two modes. Tokens.css only.
   data-mode="spotlight" (ink, client filter) | "dossier" (cream, chapters)
============================================================================= */

.fo {
  --fo-bleed: 1.08;
  position: relative; overflow: hidden; container-type: inline-size;
  padding: var(--space-9) var(--margin-inline);
  background: var(--fo-bg); color: var(--fo-fg);
}
.fo[data-mode="spotlight"] {
  --fo-bg: var(--color-ink); --fo-fg: var(--color-text-inverse);
  --fo-word: var(--color-accent); --fo-line: var(--color-border-inverse);
  --fo-script: var(--color-accent); --fo-num: var(--color-accent);
  --fo-ph-bg: var(--color-accent-soft);
  --fo-pill-fg: var(--color-text-inverse); --fo-pill-on-bg: var(--color-accent); --fo-pill-on-fg: var(--color-ink);
}
.fo[data-mode="dossier"] {
  --fo-bg: var(--color-bg); --fo-fg: var(--color-ink);
  --fo-word: var(--color-ink); --fo-line: var(--color-border);
  --fo-script: var(--color-ink); --fo-num: var(--color-accent-strong);
  --fo-ph-bg: var(--color-accent-soft);
}

/* ---------- shared: kicker, name, meta, cards, slots ---------- */
.fo__kicker { font-family: var(--font-script); line-height: 1; transform: rotate(-3deg); display: inline-block; color: var(--fo-script); }
.fo__wrap, .fo-wrap { overflow: hidden; }
.fo__name, .fo-ch__name {
  display: inline-block; margin: 0; font-family: var(--font-display); text-transform: uppercase;
  line-height: .82; white-space: nowrap; color: var(--fo-word); will-change: font-size;
}
@keyframes fo-in { from { transform: translateY(var(--space-5)); } to { transform: none; } }
.fo__name.is-in { animation: fo-in .5s cubic-bezier(.2,.7,.3,1); }

.fo__cat, .fo-ch__cat {
  display: inline-flex; align-items: center; padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill); border: var(--border-width) solid var(--fo-line); color: var(--fo-fg);
  font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}

.fo-stats { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.fo-stat { display: flex; flex-direction: column; }
.fo-stat__n { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-stat); line-height: 1; color: var(--fo-num); }
.fo-stat__l { font-family: var(--font-sans); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--fo-fg); opacity: .62; }

.fo-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fo-tag { font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--fo-fg); opacity: .82;
          padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: var(--border-width) solid var(--fo-line); }

/* viral highlight */
.fo-viral { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);
            border-radius: var(--radius-md); border: var(--border-width) dashed var(--color-accent);
            background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.fo-viral__badge { align-self: flex-start; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700;
                   text-transform: uppercase; letter-spacing: .08em; color: var(--color-ink);
                   background: var(--color-accent); padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); }
.fo-viral__line { margin: 0; color: var(--fo-fg); max-width: 52ch; }
.fo-bubbles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fo-bub { font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: 1.4; font-style: italic;
          background: var(--color-surface-dark); color: var(--color-text-inverse);
          padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border-bottom-left-radius: var(--radius-sm); max-width: 34ch; }

/* card */
.fo-card { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; transition: transform .14s ease; }
.fo-card:hover { transform: translateY(-3px); }
/* spotlight hover — mirrors the Yuma video block: dim+blur the rail, pop the hovered tile */
.fo-ch__rail .fo-card, .fo-airail .fo-card {
  transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .22s ease, filter .22s ease, box-shadow .22s ease;
}
.fo-ch__rail.is-focusing .fo-card, .fo-airail.is-focusing .fo-card {
  opacity: .36; filter: blur(3px) brightness(.5) saturate(.85);
}
.fo-ch__rail.is-focusing .fo-card.is-active, .fo-airail.is-focusing .fo-card.is-active {
  position: relative; opacity: 1; filter: none; z-index: 3;
  transform: translateY(-4px) scale(1.04);
}
.fo-ch__rail.is-focusing .fo-card.is-active .fo-card__media,
.fo-airail.is-focusing .fo-card.is-active .fo-card__media {
  box-shadow: 8px 8px 0 0 var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
  .fo-ch__rail.is-focusing .fo-card.is-active, .fo-airail.is-focusing .fo-card.is-active { transform: none; }
}
.fo-card__media { position: relative; overflow: hidden; border-radius: var(--radius-md);
                  border: var(--border-width) solid var(--fo-line); background: var(--color-ink); }
.fo-card--v .fo-card__media, .fo-card--story .fo-card__media { aspect-ratio: 9 / 16; }
.fo-card--post .fo-card__media, .fo-card--ba .fo-card__media { aspect-ratio: 4 / 5; }
/* periodic sheen — a glossy diagonal light sweep that signals "hover me / it's live" */
.fo-card__media::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
  transform: translateX(-200%) skewX(-12deg);
  animation: fo-sheen 12s linear infinite;
}
@keyframes fo-sheen {
  0%   { transform: translateX(-200%) skewX(-12deg); }
  18%  { transform: translateX(320%) skewX(-12deg); }
  100% { transform: translateX(320%) skewX(-12deg); }
}
.fo-airail__item:nth-child(2) .fo-card__media::after, .fo-ch__rail .fo-card:nth-child(2) .fo-card__media::after { animation-delay: .5s; }
.fo-airail__item:nth-child(3) .fo-card__media::after, .fo-ch__rail .fo-card:nth-child(3) .fo-card__media::after { animation-delay: 1s; }
.fo-airail__item:nth-child(4) .fo-card__media::after, .fo-ch__rail .fo-card:nth-child(4) .fo-card__media::after { animation-delay: 1.5s; }
.fo-airail__item:nth-child(5) .fo-card__media::after, .fo-ch__rail .fo-card:nth-child(5) .fo-card__media::after { animation-delay: 2s; }
.fo-airail__item:nth-child(n+6) .fo-card__media::after, .fo-ch__rail .fo-card:nth-child(n+6) .fo-card__media::after { animation-delay: 2.5s; }
.fo-airail.is-focusing .fo-card__media::after, .fo-ch__rail.is-focusing .fo-card__media::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fo-card__media::after { animation: none; display: none; } }
.fo-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fo-badge { position: absolute; left: var(--space-2); top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1);
            padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
            background: color-mix(in srgb, var(--color-ink) 66%, transparent); color: var(--color-text-inverse);
            font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fo-play { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent var(--color-accent); display: inline-block; }
.fo-cap { color: var(--fo-fg); opacity: .68; }
.fo-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
         background-color: var(--fo-ph-bg);
         background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-ink) 7%, transparent) 0 1.5px, transparent 1.5px 13px); }
.fo-ph__mark { width: var(--space-7); height: var(--space-7); border-radius: var(--radius-sm);
               border: var(--border-width) solid color-mix(in srgb, var(--color-ink) 30%, transparent);
               background: linear-gradient(135deg, transparent 46%, color-mix(in srgb, var(--color-ink) 30%, transparent) 46% 54%, transparent 54%); }
.fo-ph__hint { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.fo-ph--ba { flex-direction: row; gap: 0; background-image: none; }
.fo-ba { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: var(--space-2); }
.fo-ba--a { background-color: var(--fo-ph-bg); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-ink) 7%, transparent) 0 1.5px, transparent 1.5px 13px); }
.fo-ba--b { background: var(--color-accent); }
.fo-ba__t { background: color-mix(in srgb, var(--color-ink) 80%, transparent); color: var(--color-text-inverse); padding: 2px var(--space-2); border-radius: var(--radius-pill); }
.fo-ba__line { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--border-width); background: var(--color-ink); transform: translateX(-50%); }
.fo-ba__knob { position: absolute; top: 50%; left: 50%; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-pill);
               background: var(--color-surface); border: var(--border-width) solid var(--color-ink); transform: translate(-50%,-50%); }

/* =========================================================================
   SPOTLIGHT mode
========================================================================= */
.fo__inner { display: flex; flex-direction: column; gap: var(--space-7); }
.fo__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.fo__barkicker { font-size: var(--fs-title-l); }
.fo__pills { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.fo-pill { appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0;
           font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: 700;
           padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
           border: var(--border-width) solid var(--fo-line); background: transparent; color: var(--fo-pill-fg);
           transition: transform .12s, background .12s, color .12s, border-color .12s; }
.fo-pill:hover { border-color: var(--fo-word); }
.fo-pill:active { transform: translateY(1px); }
.fo-pill.is-on { background: var(--fo-pill-on-bg); color: var(--fo-pill-on-fg); border-color: var(--fo-pill-on-bg); }

.fo__head { display: flex; flex-direction: column; gap: var(--space-4); }
.fo__name { font-size: clamp(56px, 14cqw, 240px); }
.fo__meta { display: flex; flex-direction: column; gap: var(--space-5); max-width: 70ch; }

.fo__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); align-items: start; }
@container (max-width: 1180px) { .fo__grid { grid-template-columns: repeat(4, 1fr); } }
@container (max-width: 900px)  { .fo__grid { grid-template-columns: repeat(3, 1fr); } }
@container (max-width: 600px)  { .fo__grid { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   DOSSIER mode
========================================================================= */
.fo__dossier-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-8); }
.fo__dossier-title { margin: 0; font-family: var(--font-display); text-transform: uppercase; line-height: .82;
                     font-size: clamp(56px, 11cqw, 152px); color: var(--color-ink); padding-bottom: var(--space-6); }
.fo__dossier-lead { max-width: 42ch; color: var(--color-text-muted); }
.fo__chapters { display: flex; flex-direction: column; gap: var(--space-9); }

.fo-ch { display: flex; flex-direction: column; gap: var(--space-5);
         background: var(--color-ink); color: var(--color-text-inverse);
         border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-8);
         --fo-fg: var(--color-text-inverse); --fo-line: var(--color-border-inverse);
         --fo-num: var(--color-accent); --fo-word: var(--color-text-inverse); }
.fo-ch__name { color: var(--color-text-inverse); }
.fo-ch__cat { border-color: var(--color-border-inverse); color: var(--color-text-inverse); }
.fo-ch__scope { color: var(--color-text-inverse); opacity: .82; }
.fo-ch__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-6); }
.fo-ch__idx { font-family: var(--font-serif); font-style: italic; font-weight: 300; line-height: .7;
              font-size: clamp(72px, 9cqw, 132px); color: var(--fo-num); }
.fo-ch__title { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fo-ch__name { font-size: clamp(32px, 6cqw, 96px); --fo-bleed: 0.97; }
.fo-ch__scope { margin: 0; max-width: 56ch; }
.fo-ch__rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); align-items: start; }
@container (max-width: 1100px) { .fo-ch__rail { grid-template-columns: repeat(4, 1fr); } }
@container (max-width: 760px)  { .fo-ch__rail { grid-template-columns: repeat(3, 1fr); } }

/* case-story carousel — mirrors Yuma's cz1 (viewer + clickable cover rail), cream context */
.fo-cz2 { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: var(--space-7); align-items: start; }
.fo-cz2__stage { display: flex; align-items: center; gap: var(--space-3); }
.fo-cz2__viewer { position: relative; flex: 1 1 auto; min-width: 0; max-width: 380px; aspect-ratio: 4 / 5;
                  border-radius: var(--radius-md); overflow: hidden; border: var(--border-width) solid var(--color-ink);
                  box-shadow: var(--shadow-card); background: #000; touch-action: pan-y; user-select: none;
                  transition: aspect-ratio .3s ease; }
.fo-cz2__viewer.is-video { cursor: pointer; }
.fo-cz2__viewer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.fo-cz2__track { display: flex; height: 100%; transition: transform .34s cubic-bezier(.2,.7,.3,1); }
.fo-cz2__slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; display: block; }
.fo-cz2__slide--v { object-fit: contain; }
.fo-cz2__nav { flex: none; width: var(--space-7); height: var(--space-7); border: none; cursor: pointer;
               border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-ink);
               font-size: var(--fs-title-m); line-height: 1; display: flex; align-items: center; justify-content: center;
               box-shadow: var(--shadow-card-sm); transition: background .14s ease, transform .12s ease, box-shadow .12s ease; }
.fo-cz2__nav:hover  { background: var(--color-accent-strong); }
.fo-cz2__nav:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--color-ink); }
.fo-cz2__count { position: absolute; top: var(--space-3); right: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-caption);
                 font-weight: 700; color: var(--color-text-inverse); background: color-mix(in srgb, var(--color-ink) 55%, transparent);
                 padding: 2px var(--space-2); border-radius: var(--radius-pill); }
.fo-cz2__dots { position: absolute; bottom: var(--space-3); left: 0; right: 0; display: flex; justify-content: center; gap: var(--space-1); pointer-events: none; }
.fo-cz2__pp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
              opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.fo-cz2__pp.show.paused { opacity: 1; background: color-mix(in srgb, var(--color-ink) 32%, transparent); }
.fo-cz2__viewer:hover .fo-cz2__pp.show:not(.paused) { opacity: 1; }
.fo-cz2__ppico { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 5px;
                 background: color-mix(in srgb, var(--color-ink) 58%, transparent);
                 backdrop-filter: blur(2px); transition: transform .12s ease, background .14s ease; }
.fo-cz2__viewer:hover .fo-cz2__ppico { transform: scale(1.06); background: var(--color-accent); }
.fo-cz2__pp:not(.paused) .fo-cz2__ppico::before,
.fo-cz2__pp:not(.paused) .fo-cz2__ppico::after { content: ''; width: 5px; height: 20px; border-radius: 1px; background: #fff; }
.fo-cz2__viewer:hover .fo-cz2__pp:not(.paused) .fo-cz2__ppico::before, .fo-cz2__viewer:hover .fo-cz2__pp:not(.paused) .fo-cz2__ppico::after { background: var(--color-ink); }
.fo-cz2__pp.paused .fo-cz2__ppico::before { content: ''; width: 0; height: 0; border-style: solid;
              border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; transform: translateX(2px); }
.fo-cz2__viewer:hover .fo-cz2__pp.paused .fo-cz2__ppico::before { border-left-color: var(--color-ink); }
.fo-cz2__pp.paused .fo-cz2__ppico::after { content: none; }
.fo-cz2__dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--color-text-inverse) 45%, transparent); }
.fo-cz2__dot.on { background: var(--color-accent); }
.fo-cz2__rail { display: flex; flex-wrap: wrap; gap: var(--space-2); align-content: flex-start; }
.fo-cz2__cov { position: relative; padding: 0; border: 2px solid color-mix(in srgb, var(--color-text-inverse) 16%, transparent); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
               background: var(--color-ink); width: var(--space-9); aspect-ratio: 4 / 5; transition: border-color .15s ease, transform .12s ease; }
.fo-cz2__cov:hover { transform: translateY(-2px); }
.fo-cz2__covmedia { width: 100%; height: 100%; object-fit: cover; display: block; }
.fo-cz2__cov.on { border-color: var(--color-accent); }
.fo-cz2__covtag { position: absolute; top: 3px; left: 3px; font-family: var(--font-sans); font-size: 9px; font-weight: 700;
                  letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink); background: var(--color-accent);
                  padding: 1px 5px; border-radius: var(--radius-pill); pointer-events: none; }
@container (max-width: 760px) {
  .fo-cz2 { grid-template-columns: 1fr; }
  .fo-cz2__stage { justify-content: center; }
}

/* Beauty AI — inbound DMs (recreated, not screenshots) + horizontal AI-video rail */
.fo-req { display: flex; flex-direction: column; gap: var(--space-5); }
.fo-req__head { display: flex; flex-direction: column; gap: var(--space-3); }
.fo-req__kicker { font-family: var(--font-script); transform: rotate(-3deg); display: inline-block; align-self: flex-start;
                  white-space: nowrap; font-size: var(--fs-title-l); line-height: 1.1; color: var(--color-accent); padding-bottom: var(--space-2); }
.fo-req__lead { margin: 0; max-width: 54ch; color: var(--color-text-inverse); opacity: .82; }
.fo-req__grid { columns: 3 230px; column-gap: var(--space-4); }
.fo-dm { break-inside: avoid; margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5);
         background: var(--color-surface-dark); border-radius: var(--radius-md); border-top-left-radius: var(--radius-sm);
         position: relative; }
.fo-dm::before { content: ''; position: absolute; left: 0; top: var(--space-5); bottom: var(--space-5); width: 3px;
                 background: color-mix(in srgb, var(--color-accent) 70%, transparent); border-radius: 3px; }
.fo-dm__text { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.5; color: var(--color-text-inverse); text-wrap: pretty; }
.fo-dm__meta { margin-top: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 700;
               letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent); }
@container (max-width: 760px) { .fo-req__grid { columns: 1; } }

.fo-airail-wrap { display: flex; flex-direction: column; gap: var(--space-5); }
.fo-airail { display: flex; gap: var(--space-4); overflow-x: auto; padding: 16px 20px 18px 4px;
             scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
             scrollbar-width: none; -ms-overflow-style: none; }
.fo-airail::-webkit-scrollbar { display: none; }
.fo-airail__item { flex: 0 0 auto; width: clamp(150px, 21vw, 196px); scroll-snap-align: start; }
.fo-airail__item .fo-card__media { background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 26%, var(--color-ink)) 0%, var(--color-ink) 60%); }

.fo-ch--flag { background: var(--color-ink); color: var(--color-text-inverse); border: none;
               border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-8);
               --fo-fg: var(--color-text-inverse); --fo-line: var(--color-border-inverse); --fo-num: var(--color-accent); }
.fo-ch--flag .fo-ch__name { color: var(--color-text-inverse); }
.fo-ch--flag .fo-ch__cat { border-color: var(--color-border-inverse); color: var(--color-text-inverse); }
.fo-ch--flag .fo-ch__scope { color: var(--color-text-inverse); opacity: .82; }

/* featured Before/After slider (inside the ink flagship chapter) */
.fo-feat { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-8); align-items: center; }
.fo-baw__frame { --pct: 50; position: relative; width: 100%; max-width: 320px; aspect-ratio: 1170 / 2532;
                 border-radius: var(--radius-md); overflow: hidden; border: var(--border-width) solid var(--color-border-inverse);
                 background: #000; touch-action: none; user-select: none; cursor: ew-resize; }
.fo-baw__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.fo-baw__after { z-index: 0; }
.fo-baw__before { z-index: 1; clip-path: inset(0 calc((100 - var(--pct)) * 1%) 0 0); }
.fo-baw__handle { position: absolute; top: 0; bottom: 0; left: calc(var(--pct) * 1%); z-index: 3; width: 0; outline: none; }
.fo-baw__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--color-accent); }
.fo-baw__knob { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
                width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill);
                background: var(--color-accent); color: var(--color-ink); border: 2px solid var(--color-ink);
                display: flex; align-items: center; justify-content: center; font-family: var(--font-sans);
                font-weight: 700; font-size: var(--fs-body); letter-spacing: -1px; cursor: ew-resize; box-shadow: var(--shadow-card-sm); }
.fo-baw__handle:focus-visible .fo-baw__knob { outline: 2px solid var(--color-text-inverse); outline-offset: 3px; }
.fo-baw__tag { position: absolute; bottom: var(--space-3); z-index: 2; padding: var(--space-1) var(--space-3);
               border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-ink) 72%, transparent);
               color: var(--color-text-inverse); backdrop-filter: blur(2px); }
.fo-baw__tag--b { left: var(--space-3); }
.fo-baw__tag--a { right: var(--space-3); }
.fo-feat__side { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.fo-feat__kicker { font-family: var(--font-script); transform: rotate(-3deg); font-size: var(--fs-title-l); color: var(--color-accent); white-space: nowrap; line-height: 1.1; padding-bottom: var(--space-3); }
.fo-feat__lead { margin: 0; color: var(--color-text-inverse); opacity: .82; max-width: 34ch; font-size: var(--fs-lead); }
.fo-feat__hint { color: var(--color-text-inverse); opacity: .55; white-space: nowrap; }
.fo-feat__sep { width: var(--space-8); height: var(--border-width); background: var(--color-border-inverse); margin: var(--space-3) 0 var(--space-1); }
.fo-feat__scope { margin: 0; color: var(--color-text-inverse); opacity: .82; max-width: 42ch; font-size: var(--fs-lead); }
@container (max-width: 760px) { .fo-feat { grid-template-columns: 1fr; gap: var(--space-5); } .fo-baw__frame { margin-inline: auto; } }

@media (prefers-reduced-motion: reduce) { .fo__name.is-in { animation: none; } }