/* =====================================================================
   Kungfupunk · r4c.css — three "frame breakdown" pages (15 Oct 2026, staging):
     /phantom-blade-zero-state-of-play-breakdown
     /phantom-blade-zero-11-minute-gameplay-trailer-breakdown
     /phantom-blade-zero-year-of-the-snake-trailer-breakdown
   Loaded after style.css, r2.css and seo.css on those pages only. No new colour: credibility keeps r2's jade (words printed
   in the official video are "official"), everything else is ink and rule. No rounded corners. Rhythm comes from frame size:
   a key moment steps out from the main column to the left edge of the page (never under the rail), sequence frames fill the column, short beats
   are 560 px and step left / right when two follow each other. Motion: transform / opacity only, none under reduced motion.
   ===================================================================== */
.r4c-kick { margin: 0 0 10px; font: 500 11.5px/1.4 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- frames ---------- */
.fr { margin: 40px 0 56px; }
.fr__img { position: relative; background: var(--bg-1); }
.fr__img img { display: block; width: 100%; height: auto; }
.fr--col .fr__img, .fr--small .fr__img { -webkit-mask: var(--torn) center / 100% 100% no-repeat; mask: var(--torn) center / 100% 100% no-repeat; }
.fr--small { max-width: 560px; }
.fr--small + .fr--small { margin-left: auto; }
.fr--bleed { position: relative; z-index: 2; margin: 56px 0 64px; }
.fr--bleed .fr__img { background: var(--stage); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.fr--bleed .fr__cap { max-width: 852px; }
.fr--lead { margin-top: 8px; }
@media (min-width: 1200px) {
  /* the key frame steps out to the left edge of the page, never under the rail (one brick set forward) */
  .fr--bleed { --out: max(var(--gutter), (100vw - 1160px) / 2); }
  .fr--bleed .fr__img { margin-left: calc(-1 * var(--out)); width: calc(100% + var(--out)); }
}
@media (min-width: 761px) and (max-width: 1199px) {
  .fr--bleed .fr__img { margin: 0 calc(-1 * var(--gutter)); }
}
@media (max-width: 760px) {
  .fr { margin: 30px 0 40px; }
  .fr--bleed .fr__img, .fr--col .fr__img { margin: 0 calc(-1 * var(--gutter)); }
  .fr--small { max-width: none; }
  .fr--bleed { margin: 40px 0 48px; }
}

/* ---------- caption: time code, then one line per note ---------- */
.fr__cap { margin-top: 10px; max-width: 66ch; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.fr__t { margin: 0 0 4px; }
.fr__at { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink-3); text-decoration: none; }
.fr__tc { padding: 3px 8px 2px; border: 1px solid var(--rule); font: 600 15px/1.3 var(--serif); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .02em; color: var(--ink); transition: border-color .2s ease; }
.fr__tv { font: 500 11px/1.4 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.fr__at:hover .fr__tc, .fr__at:focus-visible .fr__tc { border-color: var(--red-text); }
.fr__n { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr__n li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 12px; align-items: baseline; margin: 0; }
.n__k { font: 600 10.5px/1.6 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
.n--screen .n__k, .n--sub .n__k { color: var(--c-official-text); }
.fr__n q { color: var(--ink); }
.fr__n .src { display: inline; font-size: 13.5px; color: var(--ink-3); }
.fr__n .src .lv { margin-right: 4px; }
.fr__cr { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-4); letter-spacing: .01em; }
@media (max-width: 760px) {
  .fr__cap { font-size: 15px; }
  .fr__n li { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}

/* ---------- section heads carry their time range ---------- */
.r4c-sec h2 .r4c-h__tc { display: block; margin-bottom: 8px; font: 500 12px/1.4 var(--serif); letter-spacing: .18em; color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums; }
.r4c-back { margin: 8px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.rail .toc .tc, .toc-bar .tc { color: var(--ink-4); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* ---------- what this video tells us ---------- */
.r4c-tells h2 { margin-top: 48px; }
.tells { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--rule); max-width: 760px; }
.tells li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 18px; padding: 12px 0 13px; border-bottom: 1px solid var(--rule-soft); margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.tells b { font: 600 11.5px/24px var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tells q { color: var(--ink); }
.tells .src { grid-column: 2; display: block; font-size: 13.5px; color: var(--ink-3); }
.tells .src .lv { margin-right: 4px; }
.r4c-how { max-width: 66ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.r4c-how b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 760px) {
  .tells li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tells .src { grid-column: 1; }
}

/* ---------- the video, loaded only when asked ---------- */
.yt { position: relative; aspect-ratio: 16 / 9; max-width: 852px; background: var(--stage); border: 1px solid var(--rule-soft); overflow: hidden; }
.yt__a { position: absolute; inset: 0; display: block; color: var(--white); text-decoration: none; }
.yt__a img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: opacity .25s ease; }
.yt__btn { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 22px 0 18px; border: 1px solid rgba(var(--white-rgb), .55); background: rgba(var(--bg-rgb), .78); transform: translate(-50%, -50%); transition: transform .25s var(--ease-out), border-color .25s ease; white-space: nowrap; }
.yt__tri { width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--white); }
.yt__lbl { font: 500 12px/1.3 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
.yt__len { font: 500 13px/1.3 var(--serif); color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums; }
.yt__a:hover img, .yt__a:focus-visible img { opacity: .8; }
.yt__a:hover .yt__btn, .yt__a:focus-visible .yt__btn { border-color: var(--white); transform: translate(-50%, -50%) scale(1.03); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .35s ease; }
.yt.is-on iframe { opacity: 1; }
.yt.is-on .yt__a { visibility: hidden; }
.yt__note { max-width: 66ch; margin-top: 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
@media (max-width: 760px) { .yt { margin: 0 calc(-1 * var(--gutter)); border-left: 0; border-right: 0; } .yt__btn { gap: 10px; padding: 0 16px 0 14px; } }

.r4c-credit { max-width: 66ch; margin-top: 40px; font-size: 13px; line-height: 1.5; color: var(--ink-4); }

@media (prefers-reduced-motion: reduce) {
  .yt__a img, .yt__btn, .yt iframe, .fr__tc { transition: none; }
  .yt__a:hover .yt__btn, .yt__a:focus-visible .yt__btn { transform: translate(-50%, -50%); }
}

/* ---------- first screen: title, then the key frame, then the summary ---------- */
.r4c .page-head { margin-bottom: 0; }
.fr--lead { margin: 22px 0 26px; }
.fr--lead + .lede { margin-top: 0; }
.r4c .rail-box a { display: flex; align-items: center; min-height: 44px; padding: 0; }
@media (max-width: 760px) {
  .fr--lead { margin: 14px 0 20px; }
  .fr__cr { font-size: 11.5px; }
}

/* ---------- review 15 Oct: summary under the H1, then the key frame; 44px hit areas for links inside notes ---------- */
.r4c .page-head .lede { margin: 16px 0 0; max-width: 60ch; }
.r4c .lede-more { margin: 0 0 12px; max-width: 64ch; }
.fr__n .n__v a:not(.lv), .tells .t__v a { position: relative; }
.fr__n .n__v a:not(.lv)::after, .tells .t__v a::after { content: ""; position: absolute; left: -4px; right: -4px; top: -12px; bottom: -12px; }