/* PREVIOUSLY · pv-culture-lobby-v1 (2026-11-11)
   The Culture lobby: Cover -> Wire ticker -> Doors -> Look Forward row, and
   the full-screen worlds. Opt-in only: nothing here applies unless <body>
   carries cl-lobby (set by the Culture producer) and cl-on (set by
   /js/pv-culture-lobby-v1.js once the lobby is built). Uses the page's own
   d3 tokens and fonts; no new fonts, no pill shapes. */

/* While the script builds the lobby, the long sections stay invisible
   (never display:none, so no video frame is forced to load). */
.cl-pending body.cl-lobby main > section.stage,
.cl-pending body.cl-lobby main > .cu-strip { visibility: hidden }

body.cl-lobby.cl-on { --cl-gut: 16px; --cl-ground: var(--ground, #0C121B); --cl-gold: var(--gold, #F2BC68); --cl-ink: var(--ink, #E9EEF3); --cl-muted: var(--muted, #9AA7B4); --cl-rule: rgba(233, 238, 243, .12) }
html:has(body.cl-lobby.cl-locked) { overflow: hidden }
body.cl-lobby.cl-locked { overflow: hidden }

/* ---------------- The Wire ticker ---------------- */
body.cl-on .cl-wire {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--cw, 1360px); margin: 0 auto; padding: 0 var(--cl-gut);
  height: 48px; border-bottom: 1px solid var(--cl-rule);
}
body.cl-on .cl-wire-k {
  flex: none; font-family: var(--font-head); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cl-ground); background: var(--cl-gold); padding: 5px 8px 4px; text-decoration: none;
}
body.cl-on .cl-wire-track { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden }
body.cl-on .cl-wire-item {
  position: absolute; inset: 0; display: flex; align-items: center;
  font-size: 14.5px; line-height: 1.25; color: var(--cl-ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
body.cl-on .cl-wire-item b {
  font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cl-gold); margin-right: 8px; flex: none;
}
body.cl-on .cl-wire-item.is-on { opacity: 1; transform: none; pointer-events: auto }
body.cl-on .cl-wire-item:hover { color: var(--cl-gold) }
body.cl-on .cl-wire-all {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--font-head); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--cl-gold); text-decoration: none;
}
body.cl-on .cl-wire-all svg { width: 16px; height: 16px; display: block }

/* ---------------- The Doors ---------------- */
body.cl-on .cl-doors { max-width: var(--cw, 1360px); margin: 0 auto; padding: 18px var(--cl-gut) 8px }
body.cl-on .cl-doors-h {
  font-family: var(--font-head); font-weight: 400; font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cl-gold); margin: 0 0 12px;
}
body.cl-on .cl-doors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
body.cl-on .cl-door {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #101825;
  color: #fff; text-decoration: none; isolation: isolate;
  opacity: 0; animation: cl-rise .5s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 45ms);
}
body.cl-on .cl-door-img, body.cl-on .cl-door-img img { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
body.cl-on .cl-door-img img { object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1) }
body.cl-on .cl-door::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8, 12, 18, .55) 0%, rgba(8, 12, 18, 0) 30%, rgba(8, 12, 18, .25) 52%, rgba(8, 12, 18, .94) 100%);
}
body.cl-on .cl-door-tx { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 12px }
body.cl-on .cl-door-n {
  font-family: var(--font-head); font-size: 21px; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
body.cl-on .cl-door-h {
  margin-top: auto; font-size: 13.5px; font-weight: 600; line-height: 1.28; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.cl-on .cl-door-c {
  margin-top: 8px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cl-gold);
  border-top: 1px solid rgba(242, 188, 104, .45); padding-top: 7px;
}
body.cl-on .cl-door:hover .cl-door-img img, body.cl-on .cl-door:focus-visible .cl-door-img img { transform: scale(1.05) }
body.cl-on .cl-door:focus-visible { outline: 2px solid var(--cl-gold); outline-offset: 2px }
@keyframes cl-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ---------------- Look Forward + Eats: one compact row ---------------- */
body.cl-on .cl-more {
  max-width: var(--cw, 1360px); margin: 0 auto; padding: 14px var(--cl-gut) 28px;
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
body.cl-on .cl-more > section.cl-mini {
  margin: 0; padding: 12px; border: 1px solid var(--cl-rule); background: #101825; min-width: 0;
}
body.cl-on .cl-mini .stage-head { margin: 0 0 8px; padding: 0; border: 0 }
body.cl-on .cl-mini .stage-head h3 { font-size: 13px; letter-spacing: .26em; color: var(--cl-gold); margin: 0 }
body.cl-on .cl-mini .stage-head h3::after { display: none }
body.cl-on #lookforward.cl-mini .lf-wrap {
  display: grid; grid-template-columns: 132px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: start;
}
body.cl-on #lookforward.cl-mini .lf-frame { grid-row: 1 / span 3; margin: 0; width: 132px; aspect-ratio: 16 / 9; height: auto }
body.cl-on #lookforward.cl-mini .vid-name { font-size: 15px; line-height: 1.25; margin: 0 }
body.cl-on #lookforward.cl-mini .vid-fact { font-size: 11px; margin: 4px 0 0; letter-spacing: .06em }
body.cl-on #lookforward.cl-mini .vid-fact:first-of-type, body.cl-on #lookforward.cl-mini .credit { display: none }
body.cl-on #lookforward.cl-mini .lf-frame iframe { width: 100%; height: 100%; display: block }
body.cl-on #lookforward.cl-mini:has(iframe) .lf-wrap { grid-template-columns: 1fr }
body.cl-on #lookforward.cl-mini:has(iframe) .lf-frame { width: 100%; grid-row: auto }
body.cl-on #eats.cl-mini img { max-height: 120px; object-fit: cover }
body.cl-on #eats.cl-mini p { font-size: 13px; margin: 4px 0 0 }

/* ---------------- A world ---------------- */
.cl-world {
  position: fixed; inset: 0; z-index: 140; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--cl-ground, #0C121B); color: var(--cl-ink, #E9EEF3);
  transition: opacity .24s ease, transform .28s cubic-bezier(.2, .7, .2, 1);
  padding-bottom: calc(96px + env(safe-area-inset-bottom)); /* clear of the floating player */
}
.cl-world.is-entering { opacity: 0; transform: translateY(26px) }
.cl-world.is-leaving { opacity: 0; transform: translateY(18px); pointer-events: none }

.cl-w-hero { position: relative; height: 36vh; min-height: 230px; max-height: 420px; overflow: hidden; background: #101825 }
.cl-w-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.cl-w-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 18, .6) 0%, rgba(8, 12, 18, .1) 35%, rgba(12, 18, 27, .96) 100%) }
.cl-back {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px 8px 6px;
  background: rgba(8, 12, 18, .72); color: #fff; border: 1px solid rgba(255, 255, 255, .22); cursor: pointer;
  font-family: var(--font-head); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.cl-back:hover, .cl-back:focus-visible { border-color: var(--cl-gold, #F2BC68); color: var(--cl-gold, #F2BC68) }
.cl-w-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 var(--cl-gut, 16px) 14px; max-width: var(--cw, 1360px); margin: 0 auto }
.cl-w-k { margin: 0 0 6px; font-family: var(--font-head); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--cl-gold, #F2BC68) }
.cl-w-cap h2 { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: clamp(38px, 11vw, 92px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: #fff }
.cl-w-c { margin: 8px 0 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--cl-muted, #9AA7B4) }

.cl-w-body { max-width: var(--cw, 1360px); margin: 0 auto; padding: 14px 0 0 }

/* the deck: one card at a time, swipe on phones */
.cl-deck-wrap { position: relative }
.cl-deck {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--cl-gut, 16px);
  padding: 0 var(--cl-gut, 16px) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none;
}
.cl-deck::-webkit-scrollbar { display: none }
.cl-deck:focus-visible { outline: 2px solid var(--cl-gold, #F2BC68); outline-offset: -2px }
.cl-card {
  flex: 0 0 88%; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; background: #101825; color: var(--cl-ink, #E9EEF3); text-decoration: none;
  border: 1px solid var(--cl-rule, rgba(233, 238, 243, .12)); min-width: 0;
}
.cl-card:only-child { flex-basis: 100% }
.cl-c-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #0A0F16 }
.cl-c-img > img, .cl-vfac img { width: 100%; height: 100%; object-fit: cover; display: block }
.cl-card--video .cl-c-img { aspect-ratio: 16 / 9 }
.cl-c-tx { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; flex: 1 }
.cl-c-k { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--cl-gold, #F2BC68) }
.cl-c-h { font-family: var(--font-head); font-weight: 400; font-size: 24px; line-height: 1.08; letter-spacing: .01em; color: #fff }
.cl-c-f { font-size: 12px; letter-spacing: .08em; color: var(--cl-muted, #9AA7B4) }
.cl-c-d { font-size: 14.5px; line-height: 1.5; color: var(--cl-muted, #9AA7B4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.cl-c-go { margin-top: auto; padding-top: 4px; font-family: var(--font-head); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cl-gold, #F2BC68) }
a.cl-card:hover .cl-c-h { color: var(--cl-gold, #F2BC68) }
a.cl-card:focus-visible { outline: 2px solid var(--cl-gold, #F2BC68); outline-offset: -2px }

.cl-vfac { position: absolute; inset: 0; padding: 0; border: 0; background: #000; cursor: pointer; display: block; width: 100% }
.cl-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(8, 12, 18, .78); border: 2px solid var(--cl-gold, #F2BC68) }
.cl-play::after { content: ""; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 13px 0 13px 20px; border-color: transparent transparent transparent var(--cl-gold, #F2BC68) }
.cl-vfac:hover .cl-play, .cl-vfac:focus-visible .cl-play { background: var(--cl-gold, #F2BC68) }
.cl-vfac:hover .cl-play::after, .cl-vfac:focus-visible .cl-play::after { border-left-color: #0C121B }
.cl-vframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block }

.cl-deck-nav { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px var(--cl-gut, 16px) 0 }
.cl-arrow {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--cl-ink, #E9EEF3); border: 1px solid var(--cl-rule, rgba(233, 238, 243, .2)); cursor: pointer;
}
.cl-arrow:hover, .cl-arrow:focus-visible { color: var(--cl-gold, #F2BC68); border-color: var(--cl-gold, #F2BC68) }
.cl-pos { min-width: 56px; text-align: center; font-size: 12px; letter-spacing: .2em; color: var(--cl-muted, #9AA7B4); font-variant-numeric: tabular-nums }

.cl-feat { padding: 30px 0 0 }
.cl-feat-h {
  margin: 0 var(--cl-gut, 16px) 4px; font-family: var(--font-head); font-weight: 400; font-size: 13px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--cl-gold, #F2BC68); border-top: 1px solid rgba(242, 188, 104, .4); padding-top: 12px;
}
.cl-feat-d { margin: 0 var(--cl-gut, 16px) 12px; font-size: 14px; line-height: 1.5; color: var(--cl-muted, #9AA7B4) }
.cl-feat-h + .cl-deck-wrap, .cl-feat-h + .cl-feat-node { margin-top: 10px }
.cl-feat-node { padding: 0 var(--cl-gut, 16px) }
.cl-feat-node > section { margin: 0; padding: 0 }

.cl-w-end {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 34px var(--cl-gut, 16px) 8px;
}
.cl-w-end a {
  flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 0 16px;
  font-family: var(--font-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
}
.cl-desk { border: 1px solid var(--cl-gold, #F2BC68); color: var(--cl-gold, #F2BC68) }
.cl-nextw { background: var(--cl-gold, #F2BC68); color: #0C121B }
.cl-nextw svg { width: 18px; height: 18px }
.cl-desk:hover { background: rgba(242, 188, 104, .1) }
.cl-nextw:hover { background: #F7CD88 }

.cl-stash { display: none !important }

/* ---------------- tablet and laptop ---------------- */
@media (min-width: 700px) {
  body.cl-lobby.cl-on { --cl-gut: 28px }
  body.cl-on .cl-doors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
  body.cl-on .cl-more { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
  .cl-card { flex-basis: 72% }
}
@media (min-width: 1100px) {
  body.cl-lobby.cl-on { --cl-gut: 40px }
  body.cl-on .cl-doors-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
  body.cl-on .cl-door { aspect-ratio: 5 / 4 }
  body.cl-on .cl-door-tx { padding: 18px }
  body.cl-on .cl-door-n { font-size: 30px }
  body.cl-on .cl-door-h { font-size: 15.5px }
  body.cl-on .cl-wire { height: 52px }
  body.cl-on .cl-wire-item { font-size: 15.5px }
  .cl-w-hero { height: 44vh; max-height: 480px }
  .cl-back { top: 20px; left: 24px }
  .cl-card { flex-basis: 100%; flex-direction: row; min-height: 0 }
  .cl-card .cl-c-img { flex: 0 0 60%; aspect-ratio: 16 / 10 }
  .cl-card--video .cl-c-img { aspect-ratio: 16 / 9 }
  .cl-c-tx { padding: 34px 36px; gap: 12px; justify-content: center }
  .cl-c-h { font-size: 40px; line-height: 1.04 }
  .cl-c-d { font-size: 16px; -webkit-line-clamp: 5 }
  .cl-c-go { margin-top: 10px }
  .cl-deck-nav { justify-content: flex-end; padding-right: var(--cl-gut) }
  .cl-feat .cl-card { flex-basis: calc((100% - 24px) / 3); flex-direction: column }
  .cl-feat .cl-card .cl-c-img { flex: none }
  .cl-feat .cl-c-tx { padding: 16px 18px 18px }
  .cl-feat .cl-c-h { font-size: 24px }
  .cl-w-end { justify-content: flex-end }
  .cl-w-end a { flex: 0 0 auto; min-width: 260px }
}

/* ---------------- Browse all: the world's full set ----------------
   Under the deck, the world's complete catalog in the same card
   language, as a grid (owner order, James, 2026-11-11: every Culture
   story lives inside its world -- no separate catalog page). */
.cl-all { padding: 30px 0 0 }
.cl-all-h {
  margin: 0 var(--cl-gut, 16px) 4px; font-family: var(--font-head); font-weight: 400; font-size: 13px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--cl-gold, #F2BC68); border-top: 1px solid rgba(242, 188, 104, .4); padding-top: 12px;
}
.cl-all-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px var(--cl-gut, 16px) 0 }
.cl-all-grid .cl-card { flex: none; width: auto }
.cl-all-grid .cl-c-img { aspect-ratio: 1 / 1 }
.cl-all-grid .cl-card--video .cl-c-img { aspect-ratio: 16 / 9 }
.cl-all-grid .cl-c-tx { padding: 10px 12px 12px; gap: 6px }
.cl-all-grid .cl-c-h { font-size: 16.5px; line-height: 1.15 }
.cl-all-grid .cl-c-d { font-size: 13px; -webkit-line-clamp: 2 }
.cl-all-grid .cl-c-go { display: none }
.cl-more-btn {
  display: block; width: calc(100% - 2 * var(--cl-gut, 16px)); margin: 16px var(--cl-gut, 16px) 0; min-height: 52px;
  background: transparent; color: var(--cl-gold, #F2BC68); border: 1px solid var(--cl-gold, #F2BC68); cursor: pointer;
  font-family: var(--font-head); font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
}
.cl-more-btn:hover, .cl-more-btn:focus-visible { background: rgba(242, 188, 104, .1) }
@media (min-width: 700px) {
  .cl-all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
}
@media (min-width: 1100px) {
  .cl-all-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .cl-all-grid .cl-card { flex-direction: column }
  .cl-all-grid .cl-card .cl-c-img { flex: none; aspect-ratio: 1 / 1 }
  .cl-all-grid .cl-card--video .cl-c-img { aspect-ratio: 16 / 9 }
  .cl-all-grid .cl-c-tx { padding: 14px 16px 16px; gap: 8px; justify-content: flex-start }
  .cl-all-grid .cl-c-h { font-size: 19px }
}

@media (prefers-reduced-motion: reduce) {
  body.cl-on .cl-door { animation: none; opacity: 1 }
  body.cl-on .cl-wire-item, .cl-world, body.cl-on .cl-door-img img { transition: none }
}