/* Copied from lab/stories/v7-one-world/v7.css by tools/port-film.mjs. Edit that file, then run the port again. */
/* V7 One world. One full screen canvas carries one world and one camera; the words lie over it,
   one caption per step, each fact beside its caption; small tags are held to points in the world.
   Type follows the live captions (site/css/home.css, .pov-cap): Georgia headings, Arial sentences at
   18 px, furniture at 14 px, the smallest size the site uses. Colours: paper, ink, one grey for
   furniture, one blue for IRIS.
   No CSS transitions or animations: every change on screen comes from the story's clocks, so a
   recording is exact. */
.v7-stage {
  --blue: #1f4fd8;
  --grey: #5c5f63;
  --mx: clamp(1.25rem, 4.5%, 4.5rem);
  --my: 7svh;
}

/* Tag names such as TIC-101 never break at their hyphen. */
.nb {
  white-space: nowrap;
}

/* ---- Caption type, as .pov-cap ---- */
.v7-cap h1,
.v7-cap h2,
.v7-cap .v7-list {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* The page's heading is the opening's words (opening.js), set as a step heading. */
.v7-cap h1 {
  font-size: 2.5rem;
  line-height: 1.1;
}
.v7-cap h2 {
  font-size: 2.5rem;
  line-height: 1.1;
}
.v7-cap p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.45;
}
.v7-cap .v7-say {
  margin-top: 0.625rem;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.v7-cap .v7-lead {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.45;
  letter-spacing: 0;
  max-width: 34rem;
}
.v7-cap .v7-kicker {
  margin-bottom: 0.625rem;
  font-size: 1rem;
  color: var(--blue);
}
.v7-cap .v7-list {
  padding: 0;
  list-style: none;
  font-size: 2.125rem;
  line-height: 1.18;
}
.v7-cap .v7-points {
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
  line-height: 1.4;
}
.v7-cap .v7-points li + li {
  margin-top: 0.3rem;
}
/* The one button of the close, as large as the question above it asks for. */
.v7-cap .v7-demo {
  margin-top: 1.75rem;
  min-height: 4rem;
  padding: 1rem 2.25rem;
  font-size: 1.5rem;
}

/* ---- Facts: a figure, its line, and its source; or the box that keeps its place ---- */
.v7-facts {
  display: flex;
  gap: 1rem 2.25rem;
}
.v7-fact {
  flex: 1 1 0;
  min-width: 0;
  max-width: 19rem;
}
.v7-cap .v7-fact-v {
  font-family: var(--serif);
  font-size: 2.75rem;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.v7-cap .v7-fact-quote .v7-fact-v {
  font-size: 1.375rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.v7-fact-quote {
  max-width: 28rem;
}
.v7-cap .v7-fact-t {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.v7-cap .v7-fact-s {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--grey);
  text-wrap: pretty;
}
.v7-fact-ph {
  padding: 0.625rem 0.75rem;
  border: 1.5px dashed var(--blue);
  background: var(--paper);
}
.v7-cap .v7-fact-pht {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--blue);
}

/* ---- Tags held to points in the world ---- */
.v7-pin {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.v7-tag {
  padding: 0.25rem 0.5rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-size: 0.875rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v7-tag p {
  margin: 0;
}
.v7-tag-n {
  color: var(--grey);
}
.v7-tag-v {
  font-size: 1.0625rem;
}
.v7-tag-iris {
  border-color: var(--blue);
  color: var(--blue);
}
.v7-mark {
  font-size: 0.9375rem;
}
.v7-trip {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
/* The generic alarm, drawn in black. */
.v7-alarm {
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v7-clock,
.v7-year {
  padding: 0.125rem 0.375rem;
  background: var(--paper);
  color: var(--grey);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v7-year {
  font-size: 1rem;
  color: var(--ink);
}
/* A layer of the plant, with a dial that turns on its own clock. */
.v7-layer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.v7-dial {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}
.v7-dial circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.v7-dial line {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}
/* IRIS's advisory, in her blue. */
.v7-card {
  width: 17rem;
  padding: 0.75rem 0.875rem;
  background: var(--paper);
  border: 1.5px solid var(--blue);
  font-size: 0.9375rem;
  line-height: 1.38;
  font-variant-numeric: tabular-nums;
}
.v7-card p {
  margin: 0;
}
.v7-card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--blue);
  color: var(--blue);
  font-size: 0.875rem;
}
.v7-card-lead {
  margin-top: 0.5rem !important;
  font-weight: 700;
}
.v7-card-move {
  margin-top: 0.375rem !important;
  color: var(--blue);
}
.v7-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.v7-wires line {
  stroke: var(--ink);
  stroke-width: 1;
}
.v7-wires circle {
  fill: var(--ink);
}
.v7-wires .blue {
  stroke: var(--blue);
  fill: var(--blue);
}

/* ---- Without script: the still, then every caption in order ---- */
html:not(.js) [data-needs-script] {
  display: none;
}
html:not(.js) .v7-stage {
  display: grid;
  gap: 2.5rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}
html:not(.js) .v7-still {
  display: block;
  width: 100%;
  height: auto;
}
html:not(.js) .v7-words {
  margin-bottom: 1.25rem;
}

/* ---- The copy of every caption and fact a screen reader reads, in order (build-page.mjs): hidden
   from sight, as the film's own captions are hidden from assistive technology ---- */
.v7-read {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- With script: the stage holds the screen while the track scrolls past ---- */
/* The header lies over the top of the stage, as on the live Home page. Over the film it rides at the
   top of the screen and steps aside on the way down (site/css/site.css, DECISIONS.md section 24h). */
.js .v7-top {
  position: relative;
  z-index: 3;
  background: var(--paper);
}
.js .v7-track {
  position: relative;
  height: calc(var(--screens, 10) * 100svh);
  margin-top: -3.75rem;
}
.js .v7-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}
.js .v7-canvas,
.js .v7-still,
.js .v7-pins {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.js .v7-pins {
  pointer-events: none;
}
.js .v7-still {
  object-fit: cover;
  object-position: 45% 55%;
  visibility: hidden;
}
.js .v7-stage[data-webgl="no"] .v7-still {
  visibility: visible;
}
.js .v7-stage[data-webgl="no"] .v7-canvas,
.js .v7-stage[data-webgl="no"] .v7-pins {
  display: none;
}
/* The poster, the opening's end frame as a still (opening.js): with reduced motion the top of the
   page, and while the film loads, only when it loads slowly. film-boot.js holds it back for the
   first 1.5 s (v7-wait), so a film whose first live frame comes sooner shows the night and the
   words, then that frame fading up from black (v7.js), and the poster's close up never cuts to the
   opening's wide first frame. A slower film holds the poster, and its first live frame fades up
   over it (data-under). */
.js .v7-stage[data-opening="poster"] .v7-still,
.js .v7-stage[data-opening="live"][data-under="poster"] .v7-still {
  visibility: visible;
}
.js.v7-wait .v7-stage[data-opening="poster"] .v7-still {
  visibility: hidden;
}
.js .v7-stage[data-opening="poster"] .v7-canvas,
.js .v7-stage[data-opening="poster"] .v7-pins {
  visibility: hidden;
}
.js .v7-cap {
  position: absolute;
  left: var(--mx);
  bottom: var(--my);
  max-width: 34rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* The opening's words: seen from the first paint, before any script has run, and held still. */
.js .v7-cap-open {
  max-width: 46rem;
  opacity: 1;
  visibility: visible;
}
/* At night (the poster, then the opening's live frames) the words are white on the picture, the
   stage under it is black. As the morning of the hand off is half up they turn, in one change of
   400 ms (v7.js, --open-box from 0 to 1), into the day's caption: ink on a paper plate, as every
   caption after them, so the first words never change style twice. The plate comes up over the whole
   change; the words go from white to ink in its middle part, so they stay clear of the plate. */
.js .v7-cap.v7-cap-open > h1 {
  --open-ink: clamp(0, (var(--open-box, 1) - 0.3) / 0.4, 1);
  color: rgb(calc(255 - 255 * var(--open-ink)) calc(255 - 255 * var(--open-ink)) calc(255 - 255 * var(--open-ink)));
  background: rgb(255 255 255 / var(--open-box, 1));
}
.js .v7-stage:is([data-opening="poster"], [data-opening="live"]) {
  background: var(--ink);
}
.js .v7-stage[data-opening="poster"] {
  --open-box: 0;
}
/* The year marker is a counter set small in the top right corner of the frame, like a timestamp, never
   held to the section and never a tag with a box (Ken, November 5, 2026): white on the opening's night
   picture, fading with the night (v7.js, f.held), back in ink by day after the hand off. By day it
   stands on the margin's edge, clear of the header above it and of a caption at the top below it. */
.js .v7-stage .v7-year {
  left: auto;
  right: var(--mx);
  top: 4rem;
  padding: 0;
  background: none;
}
.js .v7-stage:is([data-opening="poster"], [data-opening="live"]) .v7-year {
  top: 4.5rem;
  padding: 0.125rem 0.375rem;
  color: var(--paper);
}
.js .v7-cap-wide {
  max-width: 42rem;
}
.js .v7-cap-close {
  max-width: 40rem;
}
/* The film's last picture is What we do's opening drawing on paper (Ken, November 3, 2026, item 3).
   Once the closing words are whole, paper rises over the plant and the drawing comes up on it, by
   the scroll (site/js/film-boot.js, block 6). The frame has the size of that page's opening frame
   (.wd-hero-frame) and the same crop, centred in the screen; the page's opening frame and this one
   share a view transition name while it shows (site/css/site.css), so See what we do carries the
   drawing into its place on that page in 400 ms. Until the end is near the drawing is not laid out, so
   it loads only then. */
.js .v7-handoff {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}
.js .v7-handoff.is-near {
  display: block;
}
.v7-handoff-frame {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100%, 96rem);
  height: min(62.5svw, 88svh);
  overflow: hidden;
}
.v7-handoff-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  transform: scale(1.03);
  transform-origin: 46% 56%;
}
@media (max-width: 47.99rem) {
  .v7-handoff-frame {
    height: 75svw;
  }
}
/* A heading and, beside it, its facts: a lower third. */
.js .v7-cap-row {
  right: var(--mx);
  max-width: none;
  display: flex;
  align-items: flex-end;
  gap: 2.5rem;
}
.js .v7-cap-row .v7-words {
  flex: 0 1 26rem;
}
.js .v7-cap-row .v7-facts {
  flex: 0 1 40rem;
}
/* Over the picture, words knock it out behind them, as on a drawing sheet. */
.js .v7-cap h1,
.js .v7-cap h2,
.js .v7-cap .v7-say,
.js .v7-cap .v7-kicker,
.js .v7-cap .v7-list li,
.js .v7-cap .v7-points li,
.js .v7-cap .v7-fact {
  width: fit-content;
  padding: 0.375rem 0.625rem 0.5rem;
  background: var(--paper);
}
.js .v7-cap .v7-say,
.js .v7-cap .v7-kicker {
  padding-top: 0.25rem;
}
/* The kicker's space below it is paper too, so no line of the picture runs between it and the heading. */
.js .v7-cap .v7-kicker {
  margin-bottom: 0;
  padding-bottom: 0.875rem;
}
.js .v7-cap .v7-words > :is(h2, p),
.js .v7-cap > h1 {
  margin-left: -0.625rem;
}
.js .v7-cap .v7-words > * + * {
  margin-top: 0;
}
.js .v7-cap .v7-list li,
.js .v7-cap .v7-points li {
  margin-left: -0.625rem;
}
.js .v7-cap .v7-points li {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
}
.js .v7-cap .v7-points li + li {
  margin-top: 0;
}
.js .v7-cap .v7-fact-ph {
  padding: 0.625rem 0.75rem;
}
.js .v7-cap .v7-fact,
.js .v7-cap .v7-say,
.js .v7-cap li {
  opacity: 0;
  visibility: hidden;
}
.js .v7-cap .v7-demo {
  margin-left: 0;
}

/* ---- Phone and tablet: a heading and its facts are not set side by side, where a tablet's width
   would squeeze both, but as on the phone: the heading at the foot, its facts at the top, the
   picture between them. A tablet keeps the laptop's type and its facts in a row ---- */
@media (max-width: 63.99rem) {
  .js .v7-cap.v7-cap-row {
    inset: 0;
    display: block;
  }
  .js .v7-cap-row .v7-words {
    position: absolute;
    left: var(--mx);
    right: var(--mx);
    bottom: var(--my);
    max-width: 34rem;
  }
  .js .v7-cap-row .v7-facts {
    position: absolute;
    left: var(--mx);
    right: var(--mx);
    /* Clear of the header when it comes back on the way up (3.75rem, site/css/site.css), with the
       1rem the facts stood off the top before (DECISIONS.md section 24h). */
    top: 4.75rem;
  }
}
@media (max-width: 47.99rem) {
  /* The phone's header is 3.5rem. */
  .js .v7-cap-row .v7-facts {
    top: 4.5rem;
  }
}

/* ---- Phone: the scene fills the portrait screen ---- */
@media (max-width: 47.99rem) {
  .v7-stage {
    --mx: 1rem;
    --my: 1.25rem;
  }
  .js .v7-track {
    margin-top: -3.5rem;
  }
  .v7-cap h1,
  .v7-cap h2 {
    font-size: 1.75rem;
    line-height: 1.15;
  }
  .v7-cap p,
  .v7-cap .v7-points {
    font-size: 1rem;
  }
  .v7-cap .v7-say {
    font-size: 1.375rem;
  }
  .v7-cap .v7-lead {
    font-size: 1rem;
  }
  .v7-cap .v7-list {
    font-size: 1.5rem;
  }
  .v7-facts {
    flex-direction: column;
    gap: 0.625rem;
  }
  .v7-fact {
    max-width: none;
  }
  .v7-cap .v7-fact-v {
    font-size: 1.875rem;
  }
  .v7-cap .v7-fact-quote .v7-fact-v {
    font-size: 1.125rem;
  }
  .v7-cap .v7-fact-t {
    margin-top: 0.25rem;
  }
  .v7-cap .v7-fact-s {
    margin-top: 0.125rem;
  }
  .v7-cap .v7-demo {
    margin-top: 1.25rem;
    min-height: 3.5rem;
    padding: 0.875rem 1.75rem;
    font-size: 1.25rem;
  }
  .v7-tag,
  .v7-clock,
  .v7-year {
    font-size: 0.875rem;
  }
  .v7-tag-v {
    font-size: 0.9375rem;
  }
  .v7-alarm {
    font-size: 0.9375rem;
    padding: 0.375rem 0.5rem;
  }
  .v7-card {
    width: 14rem;
    font-size: 0.875rem;
  }
  .js .v7-cap {
    right: var(--mx);
    max-width: none;
  }
  .js .v7-cap-row .v7-words {
    max-width: none;
  }
  .js .v7-cap .v7-fact {
    width: auto;
  }
  /* The poster keeps the lit desk and the man at it in the portrait screen. */
  .js .v7-still {
    object-position: 67% 50%;
  }
}

/* ---- On the site: the header's phone menu and the booking section after the film ---- */
/* The open phone menu lies over the film. It reaches the edges of the screen, as on the Home
   page before it: the shell's side padding would let the film show in a strip on either side. */
.js .v7-top .masthead-panel {
  left: -1.25rem;
  right: -1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (max-width: 22rem) {
  .js .v7-top .masthead-panel {
    left: -1rem;
    right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
/* The site's booking section (partials/booking.html) comes after the film, 4rem below it. */
.v7-booking .booking-section {
  margin-top: 4rem;
}