/* ==========================================================================
   EVENT VIDEO PRODUCTION
   Page-specific styles for /v6-2/event-video-production/.

   Loaded after style.css, sprint.css, lockdown.css and photography.css,
   and only by this page. The split hero, the tier cards and their six
   rows, the add-on rows, the how-it-works diagram, the Calendar Lockdown
   card and the two-step enquiry all come from those files. This file adds
   what is new here:

     01  the hero reel (four films, thumbnails as selectors)
     03  the camera rigs drawn in each level card's head
     the level cards' tag and fit lines, the add-on table's wide rows,
     the builder's camera stepper and first-event tick, the five steps

   Every selector is scoped to markup only this page has. No em dashes in
   generated text; every figure on the page is a hook the script writes.
   ========================================================================== */

/* ---- 01 hero: the reel ----
   sprint.css draws the frame 16:9 and full width; photography.css turned
   it 3:2 and centred it. Video is 16:9 and takes its column. The stage is
   the photo loop's frame (.hero__visual__shot crossfade + push-in, driven
   by video.js module 0), with a play button and a caption over it; the
   four thumbnails under it are the selectors. */
#main .hero--video .hero__visual { width: 100%; max-width: none; }
#main .hero--video .hero__center--split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); }
#main .hero--video .hero__visual__frame { aspect-ratio: 16 / 9; }
#main .hero--video .hero__copy .sub--second { margin-top: 0.8rem; font-size: clamp(0.95rem, 1.25vw, 1.08rem); }
.reel { display: grid; gap: 0.6rem; }
.reel__stage { background: var(--ink); border-color: rgba(8, 8, 7, 0.35); }
.reel__stage::after {
  /* a soft foot so the caption reads on any frame */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, rgba(8, 8, 7, 0.62), rgba(8, 8, 7, 0)); pointer-events: none;
}
.reel__play {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 0.5rem;
  background: none; border: 0; padding: 0; cursor: pointer; color: #fff; font: inherit;
}
.reel__play__ring {
  position: relative;
  width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.85); background: rgba(8, 8, 7, 0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: 1.25rem; padding-left: 0.25rem; transition: transform 300ms ease, background 300ms ease;
}
.reel__play:hover .reel__play__ring, .reel__play:focus-visible .reel__play__ring { transform: scale(1.06); background: var(--accent); border-color: var(--accent); color: var(--ink); }
.reel__play:focus-visible { outline: none; }
.reel__play__label { font-size: 0.62rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.9); }
/* the caption sits in its own dark chip, so it reads on an orange-lit
   frame as well as a dark one (Trevor, 2026-09-14) */
.reel__cap { position: absolute; z-index: 3; left: 0.9rem; bottom: 0.9rem; max-width: calc(100% - 1.8rem); display: grid; gap: 0.15rem; color: #fff; pointer-events: none; padding: 0.5rem 0.7rem; background: rgba(8, 8, 7, 0.82); border-radius: 4px; }
/* white on the dark foot, with a shadow so it reads on a bright frame too
   (Trevor, 2026-09-14: the text on the reel must be easy to read) */
/* three classes: `:root .mono` is (0,2,0) and painted the title orange */
.reel .reel__cap.mono, .reel .reel__cap.mono b { color: #fff; }
.reel__cap b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; line-height: 1.25; }
.reel .reel__cap.mono span { font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); }
.reel__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.reel__thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 3px; border: 1px solid rgba(8, 8, 7, 0.18); background: var(--paper, #F9F8F4); padding: 0; cursor: pointer;
  transition: box-shadow 500ms ease;
}
/* Trevor, 2026-09-22: the resting frames must not show the dotted page through them. The
   button is solid paper and only the picture fades, so the unselected ones read pale. */
.reel__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; transition: opacity 500ms ease; }
/* the thumbnails are the frames alone (Trevor, 2026-09-14: no graphics on
   them): the client name stays for screen readers, the orange chip and the
   progress bar are gone; the active one is simply the bright one */
.reel__thumb .mono { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reel__thumb:hover img { opacity: 0.9; }
.reel__thumb.is-on img { opacity: 1; }
.reel__thumb.is-on { box-shadow: 0 0 0 2px var(--accent); }
.reel__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  #main .hero--video .hero__center--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .reel__thumbs { gap: 0.4rem; }
  .reel__thumbs { gap: 0.4rem; }
  .reel__play__ring { width: 3.4rem; height: 3.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__thumb.is-on::after { animation: none; width: 100%; }
  .reel__thumb, .reel__thumb img { transition: none; }
}

/* ---- 02 trusted by: one line of copy under the heading ---- */
.brands--led .brands__lede { max-width: 62ch; color: var(--dim); line-height: 1.55; margin: -0.2rem 0 1.4rem; font-size: 0.98rem; }

/* ---- 03 filming the event is only the beginning ----
   style.css's .bsplit / .bdiag (the Monthly bottleneck arrangement) and
   .tform / [data-litlist] (the scroll-lit list). The diagram is an inline
   SVG drawn in the page's colours. */
.whydiag { padding: 0; }
.whydiag__svg { display: block; width: 100%; height: auto; font-family: var(--font-mono); }
.whydiag__wires { color: rgba(8, 8, 7, 0.45); }
.whydiag__hubring { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 4; }
.whydiag__hubfill { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.whydiag__hubk { fill: var(--accent-label); font-size: 9px; letter-spacing: 0.14em; font-weight: 700; }
.whydiag__hubt { fill: var(--ink); font-family: var(--font-disp); font-size: 15px; letter-spacing: -0.01em; }
.whydiag__node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.whydiag__nk { fill: var(--accent-label); font-size: 8.5px; letter-spacing: 0.1em; font-weight: 700; }
.whydiag__nt { fill: var(--ink); font-family: var(--font-body); font-size: 11.5px; }
.whydiag__foot { fill: var(--dim); font-size: 9px; letter-spacing: 0.14em; font-weight: 700; }
.why__sig { margin-top: 1.2rem; color: var(--dim); line-height: 1.55; font-size: 1.02rem; max-width: 46ch; }

/* ---- 03 the production levels: a camera rig in each card's head ----
   Pure CSS. A camera is a box with a lens ring and a viewfinder; the
   recorder is a labelled block; the switcher a wider block with two
   inputs; the signal three arcs. The three rigs read as one, two, and
   two plus broadcast before a word of the card is read. */
.rig {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  height: 2.6rem;
  margin: 0.6rem 0 0.4rem;
  color: var(--ink);
}
.rig__cam {
  position: relative;
  width: 2.1rem; height: 1.45rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.rig__cam::before {
  /* the lens */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.62rem; height: 0.62rem;
  transform: translate(-50%, -50%);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px var(--accent);
}
.rig__cam::after {
  /* the viewfinder */
  content: "";
  position: absolute;
  right: -1.5px; top: -0.5rem;
  width: 0.8rem; height: 0.42rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: var(--paper);
}
.rig__rec, .rig__sw {
  height: 1.05rem;
  padding: 0 0.4rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--ink);
}
.rig__rec::before { content: ""; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--accent); }
.rig__sw { width: 2.3rem; padding: 0; justify-content: center; gap: 0.25rem; }
.rig__sw::before, .rig__sw::after { content: ""; width: 0.5rem; height: 0.42rem; border: 1.5px solid currentColor; border-radius: 1px; }
.rig__sw::after { background: var(--accent); border-color: var(--accent); }
.rig__sig {
  position: relative;
  width: 1.4rem; height: 1.4rem;
  align-self: center;
  margin-left: 0.1rem;
}
.rig__sig::before, .rig__sig::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  border: 1.5px solid currentColor;
  border-color: currentColor currentColor transparent transparent;
  border-radius: 0 100% 0 0;
}
.rig__sig::before { width: 0.6rem; height: 0.6rem; }
.rig__sig::after { width: 1.15rem; height: 1.15rem; opacity: 0.55; }
/* the "before you leave" line on every card is a fit line, not a quiet limitation */
.lvls .tier .tier__bonusval { color: var(--dim); }
/* the upgrade block uses the gift row without the orange rule */
.lvls .tier__gift--up { border-top-color: var(--line); }
.tiers .tier .tier__gift--up .tier__gift__tag { color: var(--dim); }
.tier__gift__sub b { color: var(--ink); font-weight: 600; }

/* ---- 09 the level cards: the tag line and the fit line ---- */
.tier__tag { font-family: var(--font-disp); font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.005em; color: var(--accent-label); }
.tier__fit { font-size: 0.9rem; line-height: 1.45; color: var(--dim); margin-bottom: 0.3rem; }
.lvls .tier__benefits { gap: 0.45rem; }

/* ---- 10 need more?: a row whose figure is one sentence spans both columns ---- */
.addons__price--wide { grid-column: 2 / span 2; text-align: right; white-space: normal; }
.addons__row .addons__price--wide + .addons__price { display: none; }
.addons__what span span[data-price], .addons__what span span[data-calc], .addons__what span span[data-bundle] { color: var(--ink); font-weight: 600; }

/* ---- 08 after the event: the second heading inside the section ---- */
.chead--sub { margin-top: clamp(3rem, 6vw, 5rem); }

/* ---- the builder's camera stepper row (inside the pkgcfg dialog) ---- */
.build__cams { flex-wrap: wrap; }
.build__cams .pkgcfg__addon__main--static { display: grid; grid-template-columns: minmax(0, 1fr); }
.build__cams__ctrl { display: flex; align-items: center; gap: 0.8rem; flex: none; }
.build__cams__ctrl .pkgcfg__addon__qty [data-cams-count] { min-width: 1.6rem; font-size: 0.95rem; font-weight: 700; }
.build__cams__note { flex-basis: 100%; margin: 0.35rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 0.7rem; }
.build__cams__note[hidden] { display: none; }
.build__cams__large { flex-basis: 100%; margin: 0.35rem 0 0; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.84rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.build__cams__large[hidden] { display: none; }
.build__cams.is-large .pkgcfg__addon__price { color: var(--accent-label); }
.pkgcfg__addon__price .k { display: block; color: var(--dim); font-size: 0.62rem; }
/* the builder's plain-words explanation, one line under the name */
.pkgcfg__addon.is-hinted { flex-wrap: wrap; }
.pkgcfg__addon__hint { flex-basis: 100%; margin: 0.2rem 0 0.15rem 1.9rem; font-size: 0.84rem; line-height: 1.45; color: var(--ink); }
.pkgcfg__addon__hint[hidden] { display: none; }
.pkgcfg__addon__why { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.76rem; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; margin-top: 0.15rem; justify-self: start; }
.pkgcfg__addon__why:hover { color: var(--ink); }
.pkgcfg__addon.is-waiting .pkgcfg__addon__price { color: var(--dim); }
.pkgcfg__addon--station .pkgcfg__addon__main--static { display: grid; grid-template-columns: minmax(0, 1fr); }
.pkgcfg__chip__price { white-space: nowrap; }
/* the first-event tick in the snapshot */
.pkgcfg__first { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.7rem; align-items: start; padding: 0.7rem 0 0.1rem; border-top: 1px solid var(--accent); cursor: pointer; font-size: 0.86rem; line-height: 1.4; color: var(--dim); }
.pkgcfg__first[hidden] { display: none; }
.pkgcfg__first input { width: 18px; height: 18px; margin: 0.1rem 0 0; accent-color: var(--accent); }
.pkgcfg__first > span { display: grid; gap: 0.15rem; }
.pkgcfg__first b { color: var(--accent-label); font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.pkgcfg__flags { margin: 0; color: var(--dim); font-size: 0.66rem; line-height: 1.5; font-family: var(--font-mono); letter-spacing: 0.04em; }
.pkgcfg__flags[hidden] { display: none; }
.pkgcfg__snap__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.pkgcfg__snap__list li .v { flex: none; font-family: var(--font-mono); font-size: 0.68rem; color: var(--dim); white-space: nowrap; }
/* the project's known trap: an author display rule beats the hidden attribute */
.pkgcfg__snap__fig[hidden], .pkgcfg__snap__multi[hidden], .pkgcfg__snap__bonus[hidden] { display: none; }

/* ---- 09 how we work: five steps, and the turnaround note ---- */
.howflow--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(0.8rem, 1.8vw, 1.6rem); }
.howflow--five .howflow__step h3 { font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.howflow--five .howflow__step p { font-size: 0.9rem; }
@media (max-width: 1100px) and (min-width: 901px) {
  .howflow--five { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem clamp(1rem, 2.4vw, 2.2rem); }
  .howflow--five .howflow__step:nth-child(3)::before, .howflow--five .howflow__step:nth-child(3)::after { display: none; }
}
/* photography.css's two- and one-column rules lose to the five-column rule
   above on source order, so they are restated (2026-09-19: the five steps
   were 448px wide on a 343px phone column, and pushed the page sideways) */
@media (max-width: 900px) {
  .howflow--five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem clamp(1rem, 2.4vw, 2.2rem); }
  .howflow--five .howflow__step:nth-child(2)::before, .howflow--five .howflow__step:nth-child(2)::after, .howflow--five .howflow__step:nth-child(4)::before, .howflow--five .howflow__step:nth-child(4)::after { display: none; }
}
@media (max-width: 520px) {
  .howflow--five { grid-template-columns: minmax(0, 1fr); gap: 1.8rem 0; }
}
@media (max-width: 900px) {
  .howflow--five .howflow__step:nth-child(4)::before, .howflow--five .howflow__step:nth-child(4)::after { display: none; }
}
.turn { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.6vw, 2rem); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius, 4px); background: var(--paper); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem clamp(1.5rem, 3vw, 3rem); align-items: center; }
.turn__k { color: var(--accent-label); }
.turn h3 { font-family: var(--font-disp); font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0.3rem 0 0.5rem; }
.turn p { margin: 0; color: var(--dim); line-height: 1.55; font-size: 0.95rem; }
.turn__line { font-family: var(--font-disp); font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.2; }
.turn__line b { font-weight: 400; color: var(--ink); }
@media (max-width: 760px) { .turn { grid-template-columns: minmax(0, 1fr); } }

/* ---- 10 calendar: two exits ---- */
.bridge__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; margin-top: 1.4rem; }
.bridge__ctas .bridge__cta { margin-top: 0; }

/* ---- our work: the fold shows two full rows (eight), not photography's four ----
   photography.css hides li:nth-child(n + 5) behind the fold; video.js hides
   the tiles past data-visible inline, so the stylesheet only has to stop
   hiding the second row. */
#work [data-fold]:not(.is-open) .portstrip > li:nth-child(n + 5) { display: grid; }

/* ---- the form: step-2 questions the production type does not need ---- */
[data-when][hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
}

/* ---- 04 what we film: five slideshows (2026-09-14, night) ----
   Each tile is a [data-photo-loop] box of .hero__visual__shot frames.
   photography.css's `.shotcat img` rule sets its own transition, so the
   crossfade and the push-in are restated here at higher specificity. */
.shotcat .shotcat__frame { position: absolute; inset: 0; }
.shotcat .shotcat__frame .hero__visual__shot { opacity: 0; transform: scale(1); transition: opacity 1400ms ease, transform 0ms linear 1400ms; }
.shotcat .shotcat__frame .hero__visual__shot.is-on { opacity: 1; transform: scale(1.06); transition: opacity 1400ms ease, transform 7600ms linear; }
.shotcat:hover .shotcat__frame img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .shotcat .shotcat__frame .hero__visual__shot, .shotcat .shotcat__frame .hero__visual__shot.is-on { transition: none; transform: none; }
}

/* ---- 10 after the event: three mockups (2026-09-14, night) ----
   A LinkedIn post, a player window with chapters, a phone story. Each
   carries a real film that plays muted in view (video.js 0d). Nothing in
   the frames is a word: the lines are repeating gradients. */
/* Neater (Trevor, 2026-09-15): the three sit on one stage of equal height,
   each device centred in its column, heads and captions centred too, so
   the row reads as one figure rather than three loose cards. */
.mocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.2rem); align-items: start; margin-top: 1.2rem; }
/* subgrid rows: every head, stage and caption on the same line across the three */
.mock { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 1rem; text-align: center; justify-items: center; align-items: start; }
.mock .mock__device { align-self: center; }
#uses .spread__cap { text-align: center; }
.mock__head { display: grid; gap: 0.25rem; justify-items: center; }
.mock__head .mock__n { color: var(--accent-label); }
.mock__head h3 { font-family: var(--font-disp); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.12; text-transform: uppercase; letter-spacing: -0.01em; }
.mock__head p { color: var(--dim); font-size: 0.92rem; line-height: 1.45; max-width: 28ch; }
.mock__cap { color: var(--dim); font-size: calc(var(--mono-size, 0.75rem) - 1px); }
/* the stage: one height for all three; the post and the window fill the
   width, the phone takes the height */
.mock__device { width: 100%; height: 100%; min-height: 17rem; display: grid; place-items: center; }
.mock__device--post { height: auto; }
.mock__device--phone .mock__phone { height: 100%; width: auto; aspect-ratio: 9 / 16; }
.mock__device--phone .mock__video--tall { height: 100%; aspect-ratio: auto; }
/* the player window fills its column and the stage's height on desktop
   (Trevor, 2026-09-15: symmetrical with the post beside it), the video
   area taking whatever height the window has */
@media (min-width: 641px) {
  .mock__device--player .mock__window { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .mock__device--player .mock__player { min-height: 0; }
  .mock__device--player .mock__video { height: 100%; aspect-ratio: auto; }
}
.mock__lines { display: block; height: 0; }
.mock__lines--1 { height: 6px; background: repeating-linear-gradient(to right, rgba(8, 8, 7, 0.22) 0 38%, transparent 38% 42%, rgba(8, 8, 7, 0.22) 42% 100%); border-radius: 3px; }
.mock__lines--2 { height: 18px; background: repeating-linear-gradient(to bottom, rgba(8, 8, 7, 0.28) 0 5px, transparent 5px 12px); }
.mock__lines--light { background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0 5px, transparent 5px 12px); }
.mock__video { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; }
.mock__video img, .mock__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
/* the embed is only shown while it is the one playing (.is-live) and only
   after YouTube's start-up chrome has faded; the poster stands over it
   otherwise, so no paused overlay is ever seen. No zoom (Trevor, 2026-09-15) */
.mock__video iframe { pointer-events: none; opacity: 0; transition: opacity 500ms ease; }
.mock__video img { position: absolute; z-index: 1; transition: opacity 500ms ease; }
.mock__video.is-live iframe { opacity: 1; }
.mock__video.is-live img { opacity: 0; }
/* the phone: a 16:9 embed filling a 9:16 frame, then the same 40% */
.mock__video--tall { aspect-ratio: 9 / 16; }
.mock__video--tall iframe { width: 316%; left: -108%; }
/* the one playing is the bright one */
.mock { transition: opacity 500ms ease; }
.mocks.has-live .mock:not(.is-live) { opacity: 0.72; }
/* 01 the post */
.mock__post { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 28px -20px rgba(8, 8, 7, 0.45); }
.mock__post__who { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.8rem 0.9rem; }
.mock__avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent); }
.mock__post__who .mock__lines--2 { width: 55%; }
.mock__post__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.9rem; }
.mock__post__foot .mock__lines--1 { width: 45%; }
.mock__reacts { display: inline-flex; gap: 0.4rem; }
.mock__reacts i { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: rgba(8, 8, 7, 0.22); }
.mock__reacts i:first-child { background: var(--accent); }
/* 02 the player window */
.mock__window { width: 100%; background: var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 28px -20px rgba(8, 8, 7, 0.55); }
.mock__window__bar { display: flex; gap: 0.35rem; padding: 0.55rem 0.7rem; background: #2E2E2A; }
.mock__window__bar i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.mock__player { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.mock__chapters { list-style: none; margin: 0; padding: 0.6rem; display: grid; gap: 0.45rem; align-content: start; background: #1F1F1D; }
.mock__chapters li { display: grid; gap: 0.25rem; padding: 0.45rem 0.5rem; border-radius: 4px; }
.mock__chapters li.is-on { background: rgba(255, 255, 255, 0.08); box-shadow: inset 2px 0 0 var(--accent); }
.mock__chapters .mono { color: rgba(255, 255, 255, 0.8); font-size: 0.56rem; letter-spacing: 0.08em; }
.mock__chapters .mock__lines--1 { background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.35) 0 60%, transparent 60% 100%); }
/* 03 the phone */
.mock__phone { position: relative; width: min(100%, 15rem); background: var(--ink); border: 3px solid var(--ink); border-radius: 1.4rem; overflow: hidden; box-shadow: 0 14px 28px -20px rgba(8, 8, 7, 0.55); display: grid; }
.mock__phone__bars { position: absolute; z-index: 2; top: 0.55rem; left: 0.7rem; right: 0.7rem; display: flex; gap: 0.3rem; }
.mock__phone__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.mock__phone__bars i.is-on { background: #fff; }
.mock__phone__foot { position: absolute; z-index: 2; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; }
.mock__phone__foot .mock__lines--2 { width: 70%; }
@media (max-width: 1000px) {
  .mocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mocks { grid-template-columns: minmax(0, 1fr); }
  .mock__player { grid-template-columns: minmax(0, 1fr); }
  .mock__chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the lede without its collage: one centred column */
.afterlede--centre { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.afterlede--centre .afterlede__copy { max-width: 40rem; }
@media (max-width: 640px) {
  .mock { grid-row: auto; grid-template-rows: auto auto auto; }
  .mock__device { height: auto; }
  .mock__device--phone .mock__phone { height: auto; width: min(100%, 15rem); }
  .mock__device--phone .mock__video--tall { height: auto; aspect-ratio: 9 / 16; }
}

/* headroom on the level cards (Trevor, 2026-09-15: "too squashed"): more
   padding at the top, and the flag sits on the top edge with room above */
.lvls .tier { padding-top: clamp(1.8rem, 3vw, 2.4rem); }
.lvls .tier .tier__flag { top: 0; transform: translateY(-50%); }

/* ---- 03 the why diagram: the ladder (2026-09-15; HTML since 3.5.0, 2026-09-20) ----
   Concept D drawn in HTML instead of an inline SVG: on phones and on a
   13-inch laptop the SVG's labels scaled to 4 to 9px (Trevor: "small and
   unreadable text on smaller-sized desktops and/or mobile"). Now the type
   is real text at real sizes at every width. The list is column-reverse,
   so 04 sits at the top and 01 on the rung nearest the ground, and the
   dashed rail runs behind the numbers. */
.wlad { margin: 0; }
.wladlist {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.8rem;
}
.wladlist::before {
  content: "";
  position: absolute;
  left: calc(1.2rem - 1px);
  top: 0;
  bottom: -0.6rem;
  border-left: 1.5px dashed var(--ink);
}
.wladlist__rung {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.9rem;
  align-items: center;
}
.wladlist__n {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
}
.wladlist__rung--first .wladlist__n { background: var(--accent); color: var(--ink); }
.wladlist__card {
  position: relative;
  padding: 0.85rem 1.1rem 0.9rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
}
/* the short line from the number to the card, as on the drawing */
.wladlist__card::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 50%;
  width: 0.9rem;
  border-top: 1.5px solid var(--ink);
}
.wladlist__rung--first .wladlist__card { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); border-color: var(--accent); }
.wladlist__k { display: block; color: var(--accent-label); font-size: 0.72rem; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 0.25rem; }
.wladlist p { font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.4; color: var(--ink); margin: 0 0 0.35rem; }
.wladlist__step { display: block; color: var(--dim); font-size: 0.68rem; letter-spacing: 0.1em; font-weight: 700; }
.wladlist__ground { margin-top: 1rem; padding: 1rem 0 0; border-top: 1.5px solid var(--ink); }
.wladlist__ground .wladlist__k { margin-bottom: 0.3rem; }
.wladlist__ground p { font-family: var(--font-disp); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.15; margin: 0 0 0.4rem; color: var(--ink); }
@media (max-width: 640px) {
  .wladlist__rung { grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0 0.7rem; }
  .wladlist__n { width: 2.1rem; height: 2.1rem; font-size: 0.7rem; }
  .wladlist::before { left: calc(1.05rem - 1px); }
  .wladlist__card { padding: 0.75rem 0.85rem 0.8rem; }
  .wladlist__card::before { left: -0.7rem; width: 0.7rem; }
}
}