/* =========================================================================
   VOICES - homepage (revised 15 October 2026)
   -------------------------------------------------------------------------
   Many people shaped this strategy. The chapter is any number of screens
   (.vx-scene), each with a head and one board (.vx-board) of items
   (.vx-item). The board's data-layout sets the arrangement; every layout
   copes with any number of items:

     then-now   two columns side by side (portraits: 1946 and 2026)
     dialogue   the first item large on the left, the rest stacked beside it
     films      an optional lead quote, then the films: one row, or two
                even rows when there are more than six (--vx-cols, set by
                js/home.js); a film not yet on YouTube is .vx-film-pending
     wall       a masonry of columns, for many smaller voices

   One visual language with the rest of the page: navy wall or a dimmed
   photograph, white type, outlined caps for display, a fine white rule that
   draws in above each voice, square white mounts. Portraits are shown in
   greyscale so twenty different photographs read as one set; colour returns
   on hover or focus.

   --vx-fit (set by js/home.js) scales a screen down if its voices don't fit
   the frame. --af-in (0-1, set per item as it arrives) draws its rule.
   Without motion (reduced motion, ?static) everything simply shows.
   ========================================================================= */

.vx-scene { --vx-fit: 1; --vx-gap: clamp(20px, 3.2vh, 40px); }
.af .vx-scene h4 { font-family: var(--lb-text); font-weight: 700; color: inherit; margin: 0; letter-spacing: 0; -webkit-text-stroke: 0; }
.vx-scene .lb-copy { max-width: none; }

/* ---- head ---- */
.vx-head { margin-bottom: calc(clamp(18px, 3.4vh, 40px) * var(--vx-fit)); }
.af .vx-chapter { font-size: calc(clamp(2.6rem, 1rem + 6vw, 6.4rem) * var(--vx-fit)); }
.af .vx-eyebrow { font-size: 1rem; font-weight: 700; line-height: 1.4; }
.af .vx-title { font-size: calc(clamp(1.3rem, 0.9rem + 1.3vw, 2.15rem) * var(--vx-fit)); line-height: 1.15; margin-top: 0.3em; max-width: 30ch; }

/* the line under "Films": what's here, and (with tabs) what to do */
.af .vx-lede { margin: calc(0.55em * var(--vx-fit)) 0 0; font-size: calc(1rem * max(var(--vx-fit), 0.9)); line-height: 1.45; color: rgba(255,255,255,0.88); max-width: 72ch; }

/* ---- items ---- */
.vx-item { position: relative; min-width: 0; margin: 0; }
.vx-item[hidden] { display: none !important; }   /* hidden, or awaiting approval (see js/home.js) */
.vx-pending-tag { margin-bottom: 0.9em !important; }
.vx-board { display: grid; gap: calc(var(--vx-gap) * var(--vx-fit)) clamp(24px, 3.4vw, 64px); align-items: start; }

/* the rule above each voice: drawn in as it arrives */
.vx-quote, .vx-then, .vx-now, .vx-idea { padding-top: calc(1em * var(--vx-fit)); }
.vx-quote::before, .vx-then::before, .vx-now::before, .vx-idea::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #fff;
  transform-origin: left center; transform: scaleX(var(--af-in, 1));
}
.vx-ph::before { height: 0; background: none; border-top: 1px dashed rgba(255,255,255,0.6); }

/* quotes: hanging open-quote, bold, balanced */
.vx-q p { font-weight: 700; line-height: 1.26; text-wrap: balance; text-indent: -0.42em; }
.vx-quote[data-size="l"] .vx-q p { font-size: calc(clamp(1.45rem, 0.55rem + 2.3vw, 2.9rem) * var(--vx-fit)); line-height: 1.16; letter-spacing: -0.01em; }
.vx-quote[data-size="m"] .vx-q p { font-size: max(0.98rem, calc(clamp(1.04rem, 0.86rem + 0.55vw, 1.4rem) * var(--vx-fit))); }
.vx-quote[data-size="s"] .vx-q p { font-size: max(0.92rem, calc(clamp(0.96rem, 0.88rem + 0.3vw, 1.12rem) * var(--vx-fit))); line-height: 1.38; }
.vx-mark + .vx-q p { text-indent: 0 !important; }
/* the opening mark sits on its own line above the quote, never over it:
   with line-height 1 the glyph (Arial) runs from ~0.13em to ~0.4em of the box */
.vx-mark { display: block; font-size: calc(clamp(4rem, 2.4rem + 4.6vw, 7.6rem) * var(--vx-fit)); line-height: 1; height: 0.44em; margin: -0.1em 0 0.12em; overflow: visible; }

.vx-by { display: flex; align-items: center; gap: 12px; margin-top: calc(0.95em * var(--vx-fit)); font-size: calc(0.86rem * max(var(--vx-fit), 0.92)); line-height: 1.42; color: rgba(255,255,255,0.84); }
.vx-by strong { color: #fff; font-weight: 700; }
.vx-by .vx-face { flex: none; width: calc(46px * var(--vx-fit)); height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid #fff; background: var(--lb-navy-deep); }
.vx-quote[data-size="l"] .vx-by .vx-face { width: calc(60px * var(--vx-fit)); }
/* where a voice comes from (a Keele Debate, a Journal idea): a small square tag
   beside the name, in the white-mount language - not another caps eyebrow */
/* tags are labels, not buttons: no box */
.vx-tag { display: inline-block; margin: 0.2em 0 0 0; padding: 0; border: 0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74em !important; font-size: 0.86em; font-weight: 700; line-height: 1.3; color: rgba(255,255,255,0.78); white-space: nowrap; }
.vx-tag { display: block; width: fit-content; margin-top: 0.35em; }

/* greyscale portraits, colour on hover or focus */
.vx-face, .vx-poster, .vx-faces img { filter: grayscale(1) contrast(1.04); transition: filter 0.4s ease, transform 0.6s cubic-bezier(.2,.7,.2,1); }

/* placeholders: dashed, quieter, clearly marked */
.vx-ph .af-ph-tag { margin-bottom: 0.9em !important; }
.vx-ph .vx-q p { font-weight: 400; color: rgba(255,255,255,0.8); text-indent: 0; }
.vx-ph .vx-by { color: rgba(255,255,255,0.7); }

/* ---- 1. then and now ---- */
.vx-board[data-layout="then-now"] { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); column-gap: clamp(28px, 5vw, 96px); }
.vx-year { font-family: var(--lb-display); font-weight: 900; line-height: 1; letter-spacing: 0.01em; font-size: calc(clamp(2.2rem, 1rem + 2.8vw, 3.8rem) * var(--vx-fit)); color: #fff; }
@supports (-webkit-text-stroke: 1px #fff) { .vx-year { color: transparent; -webkit-text-stroke: max(1.25px, 0.022em) #fff; } }
@media (forced-colors: active) { .vx-year { color: CanvasText; -webkit-text-stroke: 0; } }
.vx-then-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.2vw, 36px); align-items: end; margin-top: calc(1em * var(--vx-fit)); }
.vx-mount { display: block; width: calc(clamp(116px, 12vw, 200px) * var(--vx-fit)); aspect-ratio: 4 / 5; border: var(--lb-bw) solid #fff; background: #fff; overflow: hidden; }
.vx-mount img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vx-then .vx-q p { font-size: calc(clamp(1.3rem, 0.75rem + 1.5vw, 2.3rem) * var(--vx-fit)); line-height: 1.18; }
.af .vx-label { font-size: 1rem; font-weight: 700; line-height: 1.4; margin-top: calc(0.9em * var(--vx-fit)); }

/* who took part: one tile per person, filled from the markup by js/home.js */
.vx-faces { list-style: none; padding: 0; margin: calc(1.1em * var(--vx-fit)) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(76px * var(--vx-fit)), 1fr)); gap: calc(16px * var(--vx-fit)) 12px; }
.vx-faces li { margin: 0; min-width: 0; opacity: clamp(0, calc(var(--af-in, 1) * 2.2 - var(--i, 0) * 0.07), 1); }
html.page-home .af .vx-faces a, .vx-fph { display: block; color: #fff; text-decoration: none !important; }
.vx-faces img, .vx-fph-box { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--lb-navy-deep); }
.vx-fph-box { position: relative; border: 1px dashed rgba(255,255,255,0.6); background: none; }
.vx-fph-box::before, .vx-fph-box::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; height: 1px; background: rgba(255,255,255,0.7); transform: translate(-50%, -50%); }
.vx-fph-box::after { transform: translate(-50%, -50%) rotate(90deg); }
.vx-fname { display: block; margin-top: 0.55em; font-size: 0.72rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.vx-fph .vx-fname { font-weight: 400; color: rgba(255,255,255,0.75); }
.vx-faces a .vx-fname { text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; }
html.page-home .af .vx-faces a:hover .vx-fname, html.page-home .af .vx-faces a:focus-visible .vx-fname { text-decoration-color: currentColor; }
.vx-faces a:hover img, .vx-faces a:focus-visible img { filter: none; }

/* the strategy's own line, and everyone named in the Open Strategy Journal */
.af .vx-intro { font-weight: 700; font-size: calc(clamp(1.12rem, 0.85rem + 0.9vw, 1.65rem) * var(--vx-fit)); line-height: 1.28; max-width: 34ch; margin-top: calc(0.55em * var(--vx-fit)); text-wrap: balance; }
.vx-now .vx-label { margin-top: calc(1.4em * var(--vx-fit)); color: rgba(255,255,255,0.82); }
.vx-names { list-style: none; padding: 0; margin: 0.7em 0 0; display: flex; flex-wrap: wrap; gap: 0.2em 1.35em; font-size: calc(0.86rem * max(var(--vx-fit), 0.9)); line-height: 1.6; color: rgba(255,255,255,0.9); }
.vx-names li { margin: 0; white-space: nowrap; }
.vx-names .vx-updated { opacity: 0.7; font-style: italic; }
.af .vx-more { margin-top: calc(1em * var(--vx-fit)); }
/* motion: the names pass through a window, faded at top and bottom */
html.af-on .vx-roll { max-height: calc(30vh * var(--vx-fit)); max-height: calc(30svh * var(--vx-fit)); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
html.af-on .vx-roll > ul { padding: 0.9em 0; will-change: transform; }

/* ideas: the title is the voice (the colleague's own words), then who wrote it */
.af .vx-idea-title { font-size: calc(clamp(1.04rem, 0.88rem + 0.5vw, 1.38rem) * var(--vx-fit)); line-height: 1.24; margin-top: 0; text-wrap: balance; }
.vx-idea[data-size="s"] .vx-idea-title { font-size: max(0.98rem, calc(clamp(1rem, 0.88rem + 0.35vw, 1.2rem) * var(--vx-fit))); }
/* ideas are links to the Open Strategy Journal (new tab): no box, just an explicit
   "Read the idea" cue. The whole item is the hit area (stretched title link);
   one link per idea for screen readers. (Bordered cards with a colour wash were
   tried on 6 Nov and removed.) */
.vx-idea::after { content: "Read the idea \203A" / ""; display: block; margin-top: 0.9em; font-weight: 700; font-size: 0.92rem; color: #fff;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
html.page-home .af .vx-idea-title a { color: #fff; text-decoration: none !important; }
html.page-home .af .vx-idea-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vx-idea:hover::after, .vx-idea:focus-within::after { text-decoration-thickness: 2px; }
html.page-home .af .vx-idea-title a:focus-visible { outline: none; }
html.page-home .af .vx-idea-title a:focus-visible::after { outline: 3px solid #fff; outline-offset: 4px; }
@media (forced-colors: active) { html.page-home .af .vx-idea-title a:focus-visible::after { outline-color: Highlight; } }
.vx-idea .vx-by { margin-top: 0.55em; }
.af .vx-note { font-size: 0.78rem; line-height: 1.45; color: rgba(255,255,255,0.72); }

.vx-foot > .vx-label { margin-top: 0; }

/* ---- 2. dialogue: the first voice large, the others answering beside it ---- */
.vx-board[data-layout="dialogue"] { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 104px); }
.vx-board[data-layout="dialogue"] > .vx-item:first-child { grid-row: 1 / span var(--vx-rest, 3); align-self: center; }
.vx-board[data-layout="dialogue"] > .vx-item + .vx-item .vx-q p { font-size: max(0.98rem, calc(clamp(1rem, 0.86rem + 0.45vw, 1.3rem) * var(--vx-fit))); }
/* over a photograph: a deeper, even shade so every word reads */
.vx-scene .lb-plate { --lb-dim: 0.74; }
.vx-scene.af-photo .lb-copy { text-shadow: 0 1px 12px rgba(var(--lb-scrim), 0.55); }

/* ---- 3. films: the lead quote, then a row of portrait-format films ---- */
.vx-board[data-layout="films"] { grid-template-columns: repeat(var(--vx-cols, 4), minmax(0, 13.5rem)); column-gap: clamp(14px, 1.8vw, 28px); align-items: start; }
.vx-board[data-layout="films"][data-rows="2"] { row-gap: calc(clamp(16px, 3vh, 34px) * var(--vx-fit)); }
.vx-board[data-layout="films"][data-rows="2"] .vx-film-frame { max-height: calc(25vh * var(--vx-fit)); max-height: calc(25svh * var(--vx-fit)); }
.vx-board[data-layout="films"] > .vx-lead { grid-column: 1 / -1; max-width: 52rem; margin-bottom: calc(clamp(6px, 1.6vh, 18px) * var(--vx-fit)); }
.vx-board[data-layout="films"] .vx-lead .vx-q p { font-size: calc(clamp(1.3rem, 0.7rem + 1.6vw, 2.25rem) * var(--vx-fit)); }
html.page-home .af a.vx-film { display: block; color: #fff; text-decoration: none !important; }
.vx-film-frame { position: relative; display: block; aspect-ratio: 3 / 4; max-height: calc(38vh * var(--vx-fit)); max-height: calc(38svh * var(--vx-fit)); border: 6px solid #fff; background: var(--lb-navy-deep); overflow: hidden; }
.vx-film-frame .vx-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.vx-film-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--lb-scrim), 0.55), rgba(var(--lb-scrim), 0.05) 55%); pointer-events: none; }
.vx-play { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); width: clamp(44px, 3.6vw, 62px); aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(var(--lb-scrim), 0.25); transition: transform 0.3s ease, background-color 0.3s ease; }
.vx-play svg { width: 42%; height: 42%; margin-left: 6%; }
.vx-film:hover .vx-poster, .vx-film:focus-visible .vx-poster { filter: none; transform: scale(1.03); }
.vx-film:hover .vx-play, .vx-film:focus-visible .vx-play { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,0.16); }
.vx-film-name { display: block; margin-top: 0.7em; font-weight: 700; font-size: calc(0.92rem * max(var(--vx-fit), 0.9)); line-height: 1.3; }
.vx-film-meta { display: block; margin-top: 0.3em; font-size: 0.82rem; font-weight: 700; line-height: 1.4; color: rgba(255,255,255,0.72); }
html.page-home .af a.vx-film:hover .vx-film-name, html.page-home .af a.vx-film:focus-visible .vx-film-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* a film to follow */
.vx-film.vx-ph .vx-film-frame { border: 1px dashed rgba(255,255,255,0.6); background: none; display: grid; align-content: center; justify-items: center; gap: 14px; }
.vx-film.vx-ph .vx-film-frame::after { display: none; }
.vx-film.vx-ph .af-ph-tag { margin: 0 !important; }
.vx-ph-faces { display: flex; }
.vx-ph-faces img { display: block; width: clamp(34px, 3vw, 46px); height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--lb-navy); border-radius: 50%; margin-left: -8px; }
.vx-ph-faces > span:first-child img { margin-left: 0; }
.vx-film.vx-ph .vx-film-name { font-weight: 400; color: rgba(255,255,255,0.85); }
/* a film that is cut but not yet on YouTube: the portrait, dimmed, with a flag; not a link */
.vx-film-pending .vx-poster, .vx-film-pending:hover .vx-poster { filter: grayscale(1) contrast(1.04) brightness(0.78); transform: none; }
.vx-film-flag { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); margin: 0 !important; white-space: nowrap; background: rgba(var(--lb-scrim), 0.5); border-color: rgba(255,255,255,0.8); }

/* ---- 4. wall: many smaller voices, in columns ---- */
.vx-board[data-layout="wall"] { display: block; columns: 3 15.5rem; column-gap: clamp(28px, 3.2vw, 56px); }
.vx-board[data-layout="wall"] > .vx-item { display: block; break-inside: avoid; margin-bottom: calc(var(--vx-gap) * var(--vx-fit)); }
.vx-foot { margin-top: calc(clamp(4px, 1vh, 12px) * var(--vx-fit)); display: grid; gap: 14px; justify-items: start; }
.vx-foot .af-proto-note { max-width: 60rem; }

/* =========================================================================
   STILL LAYOUT (reduced motion, ?static, no JavaScript)
   ========================================================================= */
html:not(.af-on) .vx-scene { padding: clamp(32px, 6vw, 80px) 0; }
html:not(.af-on) .vx-scene.af-photo { padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 80px); min-height: 0; }
html:not(.af-js) .vx-player { display: none !important; }

/* =========================================================================
   MOTION: each screen fills the frame, clear of the rail, centred in the
   space under the header. Items are brought in by js/home.js.
   ========================================================================= */
html.af-on .vx-scene > .lb-copy {
  position: absolute; left: var(--lb-pad); right: max(var(--lb-pad), var(--af-rail));
  top: calc(var(--bar-h) + (100vh - var(--lb-safe-b) - var(--bar-h)) / 2);
  top: calc(var(--bar-h) + (100svh - var(--bar-h)) / 2);
  transform: translateY(calc(-50% + var(--lb-y, 0px)));
}
html.af-on .vx-head, html.af-on .vx-item, html.af-on .vx-foot { will-change: opacity, transform; }
html.af-on .af .vx-chapter { font-size: calc(min(5.4vw, 10.5vh) * var(--vx-fit)); font-size: calc(min(5.4vw, 10.5svh) * var(--vx-fit)); }
html.af-on .vx-item[data-vx-off] { pointer-events: none !important; }
html.af-on .vx-item[data-vx-off] a { pointer-events: none !important; }
html.af-on .vx-scene:not(.is-active) .vx-faces li { transition: none; }
/* short laptop screens: the prototype note steps aside (it shows in the still layout) */
@media (min-width: 701px) and (max-height: 820px) { html.af-on .vx-foot .af-proto-note { display: none; } }

/* ---- the film player ---- */
.vx-player { width: min(68rem, calc(100vw - 32px)); }
.vx-player-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.vx-player-frame { position: relative; height: min(72vh, 640px); height: min(72svh, 640px); aspect-ratio: 9 / 16; background: #000; border: 6px solid #fff; }
.vx-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.af .vx-player-title { font-family: var(--lb-text); font-weight: 700; -webkit-text-stroke: 0; color: #fff; text-transform: none; letter-spacing: 0; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); margin: 0 0 0.3em; }
.vx-player-by { font-size: 0.9rem; line-height: 1.45; color: rgba(255,255,255,0.82) !important; }
.af .vx-player-h { margin-top: 1.4em; padding-top: 0.8em; border-top: 2px solid #fff; font-size: 1rem; }
.vx-player-tr p { font-size: 0.98rem !important; line-height: 1.6 !important; margin-top: 0.8em !important; }
.vx-player-note { margin-top: 1.3em !important; font-size: 0.8rem !important; color: rgba(255,255,255,0.74); }
html.page-home .af .vx-player-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   TABLETS AND SHORT SCREENS
   ========================================================================= */
@media (max-width: 1099px) and (min-width: 701px) {
  .vx-board[data-layout="wall"] { columns: 3 13rem; }
  .vx-board[data-layout="films"] { grid-template-columns: repeat(var(--vx-cols, 4), minmax(0, 1fr)); }
}

/* =========================================================================
   PHONES: simpler, not a shrunken collage. One voice at a time in the same
   place (the page's own pattern for phones), except the films, which sit
   together as a small grid under their quote.
   ========================================================================= */
@media (max-width: 700px) {
  .vx-board, .vx-board[data-layout] { grid-template-columns: minmax(0, 1fr); columns: auto; }
  .vx-board[data-layout="dialogue"] > .vx-item:first-child { grid-row: auto; }
  .vx-board[data-layout="wall"] { display: grid; }
  .vx-board[data-layout="wall"] > .vx-item { margin-bottom: 0; }
  .vx-board[data-layout="films"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .vx-film-frame { max-height: none; border-width: 4px; }
  .vx-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  .vx-fname { font-size: 0.66rem; }
  .vx-mount { width: 104px; border-width: 8px; }
  .vx-player-grid { grid-template-columns: minmax(0, 1fr); }
  .vx-player-frame { height: auto; width: min(100%, calc(62svh * 9 / 16)); justify-self: center; border-width: 4px; }
}
@media (max-width: 700px) {
  html.af-on .vx-scene > .lb-copy { top: auto; bottom: calc(var(--lb-safe-b) + 40px); right: var(--lb-pad); transform: translateY(var(--lb-y, 0px)); }
  html.af-on .af .vx-chapter { font-size: calc(12vw * var(--vx-fit)); }
  html.af-on .af .vx-title { font-size: calc(1.3rem * var(--vx-fit)); }
  html.af-on .vx-head { margin-bottom: calc(16px * var(--vx-fit)); }
  /* one voice at a time, in the same place */
  html.af-on .vx-board:not([data-phone="stack"]) > .vx-item { grid-area: 1 / 1; align-self: start; }
  html.af-on .vx-quote[data-size="l"] .vx-q p, html.af-on .vx-then .vx-q p { font-size: calc(1.36rem * var(--vx-fit)); }
  html.af-on .vx-quote[data-size="m"] .vx-q p, html.af-on .vx-board[data-layout="dialogue"] > .vx-item + .vx-item .vx-q p { font-size: calc(1.14rem * var(--vx-fit)); line-height: 1.3; }
  html.af-on .vx-quote[data-size="s"] .vx-q p { font-size: calc(1.04rem * var(--vx-fit)); }
  html.af-on .vx-mark { font-size: calc(4rem * var(--vx-fit)); }
  html.af-on .vx-by { font-size: 0.8rem; }
  /* films: a small grid under the quote */
  html.af-on .vx-board[data-layout="films"] { grid-template-columns: repeat(var(--vx-pcols, 3), minmax(0, 1fr)); gap: 14px 10px; }
  html.af-on .vx-board[data-layout="films"][data-rows="2"] .vx-film-frame { max-height: none; }
  html.af-on .vx-film-flag { font-size: 0.5rem; padding: 0.3em 0.4em; letter-spacing: 0.08em; white-space: normal; width: 80%; text-align: center; }
  html.af-on .vx-board[data-layout="films"] .vx-lead .vx-q p { font-size: calc(1.14rem * var(--vx-fit)); line-height: 1.28; }
  html.af-on .vx-board[data-layout="films"] .vx-lead .vx-by .vx-face { display: none; }
  html.af-on .vx-board[data-layout="films"] .vx-film-frame { aspect-ratio: 4 / 5; }
  html.af-on .vx-film-name { font-size: 0.74rem; }
  html.af-on .vx-film-meta { font-size: 0.6rem; letter-spacing: 0.1em; }
  html.af-on .vx-play { width: 36px; }
  html.af-on .vx-film.vx-ph .af-ph-tag { font-size: 0.5rem; padding: 0.3em 0.4em; letter-spacing: 0.08em; }
  html.af-on .vx-ph-faces img { width: 24px; }
  html.af-on .vx-foot .af-proto-note { display: none; }   /* shown in the still layout */
  html.af-on .vx-roll { max-height: calc(26svh * var(--vx-fit)); }
  html.af-on .vx-names { font-size: 0.78rem; }
  html.af-on .af .vx-idea-title { font-size: 1.3rem; }
  html.af-on .vx-foot .vx-note { display: none; }
}

/* short phones (SE-size): films in one row; faces closer together, their
   names kept for screen readers only */
@media (max-width: 700px) and (max-height: 720px) {
  html.af-on .vx-board[data-layout="films"] { grid-template-columns: repeat(var(--vx-cols, 5), minmax(0, 1fr)); gap: 10px 6px; }
  html.af-on .vx-film-frame { border-width: 3px; }
  html.af-on .vx-film-name { font-size: 0.6rem; }
  html.af-on .vx-film-meta, html.af-on .vx-film.vx-ph .af-ph-tag, html.af-on .vx-ph-faces { display: none; }
  html.af-on .vx-faces { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  html.af-on .vx-faces .vx-fname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.af-on .vx-faces li { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .vx-face, .vx-poster, .vx-faces img, .vx-play { transition: none; }
}

/* Films screen: a label above each row (Keele Debates, Alumni). Spanning every
   column, each label starts a new row. */
.vx-board[data-layout="films"] > .vx-row-label { grid-column: 1 / -1; margin: 0 0 calc(-0.4em * var(--vx-fit)); font-size: calc(1rem * max(var(--vx-fit), 0.9)); }
.vx-row-note { font-weight: 400; color: rgba(255,255,255,0.72); }
@media (max-width: 700px) { .vx-row-note { display: block; font-size: 0.85em; } }

/* =========================================================================
   FILMS IN TABS (9 November 2026)
   23 Keele Debates films and 3 alumni films: one panel (.vx-panel) per
   debate, then Alumni. In motion, js/home.js adds a tab strip and shows one
   panel at a time; a panel's films rise in, one after another, the first
   time it opens. In the still layout every panel shows under its heading.
   The tabs speak the page's language: bold white type, no boxes, and the
   fine white rule that draws in under the chosen one.
   ========================================================================= */
.vx-board[data-layout="films-tabs"] { display: block; }
.vx-panel + .vx-panel { margin-top: calc(var(--vx-gap) * 1.4 * var(--vx-fit)); }
.af .vx-panel-h { margin: 0 0 calc(0.85em * var(--vx-fit)); font-size: calc(1rem * max(var(--vx-fit), 0.9)); }
.vx-films { display: grid; grid-template-columns: repeat(5, minmax(0, 13.5rem)); gap: calc(clamp(16px, 3vh, 34px) * var(--vx-fit)) clamp(14px, 1.8vw, 28px); align-items: start; }
.vx-film-hook { display: block; margin-top: 0.3em; font-size: calc(0.84rem * max(var(--vx-fit), 0.9)); line-height: 1.35; color: rgba(255,255,255,0.84); text-wrap: pretty; }
.vx-film-hook + .vx-film-meta { margin-top: 0.45em; }

/* the tab strip */
.vx-tablist { display: flex; gap: 0 clamp(14px, 1.15vw, 32px); margin: 0 0 calc(clamp(16px, 3vh, 32px) * var(--vx-fit)); border-bottom: 1px solid rgba(255,255,255,0.3); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.vx-tablist::-webkit-scrollbar { display: none; }
html.page-home .af .vx-tab {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; margin: 0; padding: 0.35em 0 0.8em; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--lb-text); font-weight: 700; font-size: calc(0.95rem * max(var(--vx-fit), 0.9)); line-height: 1.3; letter-spacing: 0; text-transform: none;
  color: rgba(255,255,255,0.7); white-space: nowrap; cursor: pointer; transition: color 0.25s ease;
}
.vx-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform 0.5s cubic-bezier(.2,.7,.2,1), opacity 0.25s ease; }
html.page-home .af .vx-tab:hover, html.page-home .af .vx-tab[aria-selected="true"] { color: #fff; }
.vx-tab:hover::after { transform: scaleX(1); opacity: 0.35; }
.vx-tab[aria-selected="true"]::after { transform: scaleX(1); opacity: 1; }
html.page-home .af .vx-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (forced-colors: active) {
  .vx-tab::after { background: CanvasText; }
  .vx-tab[aria-selected="true"]::after { background: Highlight; }
}
/* the film count on each tab */
.vx-tab-n { display: inline-block; margin-left: 0.4em; min-width: 1.5em; padding: 0 0.4em; border-radius: 999px; background: rgba(255,255,255,0.16); color: #fff; font-size: 0.78em; line-height: 1.55; text-align: center; vertical-align: 0.08em; transition: background-color 0.25s ease, color 0.25s ease; }
html.page-home .af .vx-tab:hover .vx-tab-n { background: rgba(255,255,255,0.26); }
html.page-home .af .vx-tab[aria-selected="true"] .vx-tab-n { background: #fff; color: #1d1a3b; }
@media (forced-colors: active) { .vx-tab-n { border: 1px solid CanvasText; } }
.vx-tablist.no-count .vx-tab-n { display: none; }
/* "Next: …" beside "Watch the five Keele Debates in full" */
.vx-foot.has-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px clamp(24px, 2.6vw, 40px); }
.vx-next[hidden] { display: none !important; }
.vx-tablist.is-overflow { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
/* in tabs, the tab names the panel: its heading stays for screen readers only */
html.af-on .vx-tabset.has-tabs .vx-panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.af-on .vx-tabset.has-tabs .vx-panel + .vx-panel { margin-top: 0; }
.vx-panel[hidden] { display: none !important; }

/* the first time a panel opens, its films rise in one after another */
@keyframes vx-film-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.vx-panel.is-entering .vx-film { animation: vx-film-in 0.7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 85ms); }
.vx-panel.is-entering .vx-film .vx-poster { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .vx-panel.is-entering .vx-film { animation: none; }
  .vx-tab::after { transition: none; }
}

@media (max-width: 1099px) and (min-width: 701px) {
  .vx-films { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .vx-films { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  html.af-on .vx-films { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  html.af-on .vx-films .vx-film-frame { aspect-ratio: 4 / 5; }
  html.af-on .vx-film-hook { display: none; }
  html.af-on .vx-tablist { gap: 0 20px; margin-left: calc(-1 * var(--lb-pad)); margin-right: calc(-1 * var(--lb-pad)); padding: 0 var(--lb-pad); scroll-padding: 0 var(--lb-pad);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--lb-pad), #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--lb-pad), #000 calc(100% - 36px), transparent 100%); }
  html.page-home .af .vx-tab { font-size: 0.86rem; padding-bottom: 0.7em; }
  .af .vx-lede { font-size: 0.9rem; }
}
@media (max-width: 700px) and (max-height: 720px) {
  html.af-on .vx-films { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 6px; }
}
/* the film's one-line summary in the player, under who it is */
.vx-player-desc { margin-top: 0.75em !important; font-size: 0.98rem !important; line-height: 1.5 !important; color: #fff; max-width: 42ch; }