/* Chou Force — section media (FUP 2026-10-13). Loads after site.css.
   Replaces the abstract glyph cards (.cf-art) with real visuals in equal 4:3 frames, plus the
   Octalysis Prime trailer embed. Theme CSS (tokens.css / site.css) is untouched so the WordPress
   theme can adopt this file as-is. */

.cf-shot { position: relative; margin: 0 auto; width: min(100%, 520px); }
.cf-shot::before {
  content: ""; position: absolute; inset: 8% -6% -4% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, var(--cf-cyan)) 26%, transparent), transparent 75%);
  filter: blur(8px);
}
.cf-shot__frame {
  position: relative; z-index: 1; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--cf-r-lg);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--accent, var(--cf-cyan)) 40%, var(--cf-line-soft));
  box-shadow: var(--cf-shadow-lift), 0 0 0 6px color-mix(in srgb, var(--accent, var(--cf-cyan)) 9%, transparent);
}
.cf-shot__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-shot figcaption {
  position: relative; z-index: 1; margin-top: 14px; padding-inline: 6px;
  font-size: .875rem; line-height: 1.5; color: var(--cf-muted); text-align: center;
}

/* Octalysis Prime trailer, placed at the end of its own section (FUP whole-section-topic match). */
.cf-front__video { margin-top: clamp(36px, 5vw, 56px); }
.cf-video {
  width: min(100%, 760px); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--cf-r-lg); overflow: hidden;
  background: #000; border: 1px solid color-mix(in srgb, var(--accent, var(--cf-cyan)) 40%, var(--cf-line-soft));
  box-shadow: var(--cf-shadow-lift);
}
.cf-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.cf-video__cap { margin: 14px auto 0; text-align: center; font-size: .875rem; color: var(--cf-muted); }

@media (max-width: 860px) {
  .cf-shot { width: min(100%, 460px); margin-inline: 0; }
  .cf-shot::before { inset: 6% 0 -2% 0; } /* keep the glow inside the 16px phone gutter (no sideways scroll) */
  /* Phones: every section reads heading -> copy -> image. The theme put the art first in even sections and
     last in odd ones; with real images that showed a picture before its own heading. */
  .cf-front .cf-front__art, .cf-front--flip .cf-front__art { order: 2; }
  .cf-front__grid { row-gap: 40px; }
}

/* Footer column labels (SCP render fix 2026-10-13): `.cf h2` (0,1,1) in site.css outranks `.cf-foot__h` (0,1,0),
   so the labels rendered at section-heading size (~40px). Restore the intended small eyebrow label.
   Port to the theme by fixing the selector in site.css. */
.cf-foot .cf-foot__h { font-size: .8125rem; font-weight: 600; line-height: 1.4; letter-spacing: .14em; color: var(--cf-faint); margin: 0 0 14px; }
/* Hero H1 (SCP S1 follow-up 2026-10-13): balance the lines so "here." is not left alone on line 3 at 1440px. */
.cf-hero__title { text-wrap: balance; }

/* Effects: WCP §30 kit (/assets/css/fx.css + /assets/js/fx.js), Chou Force picks 2026-10-13.
   hero = one light sweep after load · portrait = a spark tracing the octagon frame · section images = levitate
   tilt on hover · buttons = magnetic lean · hero proof numbers = count up once. All off for reduced motion. */
.cf-hero { --fx-sweep: rgba(170, 226, 255, .2); }   /* dark hero: .11 was invisible in testing, .55 (yukaichou's photo hero) glares */
.cf-shot__frame { --fx-tilt-shadow: var(--cf-shadow-lift), 0 0 0 6px color-mix(in srgb, var(--accent, var(--cf-cyan)) 14%, transparent),
  0 22px 46px color-mix(in srgb, var(--accent, var(--cf-cyan)) 24%, transparent); }