/* The interface's text: Akzidenz-Grotesk Pro, light, regular and medium. */
@font-face { font-family: "AG Pro"; src: url("../fonts/AkzidenzGroteskPro-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "AG Pro"; src: url("../fonts/AkzidenzGroteskPro-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "AG Pro"; src: url("../fonts/AkzidenzGroteskPro-Md.otf") format("opentype"); font-weight: 500; font-display: swap; }

@font-face { font-family: "Porsche Next"; src: url("../fonts/porsche-next-latin-regular.woff2") format("woff2"); font-weight: 100 450; font-display: block; }
@font-face { font-family: "Porsche Next"; src: url("../fonts/porsche-next-latin-semi-bold.woff2") format("woff2"); font-weight: 451 900; font-display: block; }
@font-face {
  font-family: "Akzidenz-Grotesk Pro";
  src: url("../fonts/AkzidenzGroteskPro-BoldCn.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* (the text's own vw: as vw up to a 1440 wide window, then growing at half the rate (a 2560 screen: 17 px text at 1440
     becomes 23.6, not 30 as in plain vw, nor 17 as when it stopped at 1440), and no more than at 3200 wide. The text, its
     spacing and the text blocks are sized in it; the films, cards and pictures go on scaling in plain vw) */
  --u: min(1vw, calc(7.2px + 0.5vw), 23.2px);
  /* Porsche's racing yellow, the one accent */
  --yellow: #f2b705;
  /* dark type on the film's pale studio */
  --line: rgba(0, 0, 0, 0.14);
  --muted: #696c72; /* (solid, so every label is the same grey whatever is behind it) */
  /* (the studio's grey, round the film until it shows) */
  --bg: #d3d7dd;
  --text: #121315;
  color-scheme: light;
}

html, body {
  margin: 0;
  overscroll-behavior-y: none;
  scrollbar-width: none; /* (no scrollbar: on the page's own scroller, which is the html element) */
}
html::-webkit-scrollbar { display: none; }

body {
  background: #fff;
  font-family: "Porsche Next", "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior-y: none; /* (no bounce past the ends of the page: at the end it would show white under the full-screen card) */
  /* Scrolling plays the film first (js/main.js); once it has ended, the page
     scrolls on to what follows it. No scrollbar. */
  scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }

/* the film's screen: the window's height, the film and the title on it */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  touch-action: none;
}

.film, .roof {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Title, in the film's px (see index.html); sized and placed by script. */
.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

.stage text {
  font-family: "Porsche Next", "Arial Narrow", sans-serif;
  font-weight: 700;
  fill: var(--text);
  text-transform: uppercase;
}

/* One reveal layer keeps the name and wordmark on exactly the same timeline. */
.stage .title-reveal {
  opacity: 0;
  filter: blur(var(--reveal-blur, 3px));
  transition: opacity 0.4s cubic-bezier(0.2, 0, 0.7, 1), filter 0.4s cubic-bezier(0.2, 0, 0.7, 1);
}
.stage.is-ready .title-reveal {
  opacity: 1;
  filter: blur(calc(var(--reveal-blur, 3px) * var(--hero-reveal-progress, 0)));
}
.stage .title-main { fill: var(--text); }
.stage .title-sub { font-family: "Porsche Next", sans-serif; font-weight: 400; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- The car's figures (last screen) ---------- */

/* Type straight on the scene, the width of the window; no cards, no rounded
   corners, yellow the one accent. One headline figure, a short numbered list
   beside it, a speed scale across the bottom, and the small print under it. */
.specs-panel {
  --shown: 0;
  --pad: max(22px, 2.4vw);
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  font-family: "Porsche Next", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  opacity: var(--shown);
  -webkit-font-smoothing: antialiased;
}
.specs-panel p, .specs-panel dl, .specs-panel dd { margin: 0; padding: 0; }
.specs-panel.is-on button { pointer-events: auto; }
.specs-top { transform: translateY(calc((1 - var(--shown)) * -14px)); }
.specs-bottom { transform: translateY(calc((1 - var(--shown)) * 14px)); }

.specs-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(var(--pad) * 0.85) var(--pad) 0;
  background: linear-gradient(rgba(236, 238, 241, 0.5), transparent);
}

/* the headline: one big figure */
.specs-eyebrow { display: flex; align-items: center; gap: 14px; font-weight: 500; font-size: max(13.5px, 1.0417vw); letter-spacing: 0.01em; } /* (15px at 1440 wide) */
.specs-eyebrow span { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.specs-eyebrow span::before { content: ""; width: 6px; height: 6px; background: var(--yellow); }
.specs-eyebrow::after { content: ""; width: 6px; height: 6px; background: var(--yellow); }
.specs-hero-figure {
  margin-top: max(4px, 0.6vw) !important;
  font-weight: 300; font-size: max(64px, 7.4vw); line-height: 0.9; letter-spacing: -0.045em;
}
.specs-hero-figure.is-name { font-size: max(56px, 6vw); line-height: 0.95; letter-spacing: -0.035em; white-space: nowrap; }
.specs-hero-figure.is-name + .specs-hero-label { margin-top: 12px !important; }
.specs-hero-figure span { margin-left: 0.08em; font-size: 0.32em; font-weight: 400; letter-spacing: 0; color: var(--yellow); }
.specs-hero-label { margin-top: 6px !important; font-size: max(11px, 0.8vw); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* beside it: a short numbered list, right-aligned */
.specs-list { width: max(240px, 22vw); }
.specs-list > div { display: flex; justify-content: space-between; align-items: baseline; padding: max(8px, 0.75vw) 0; border-bottom: 1px solid var(--line); }
.specs-list > div:first-child { padding-top: 0; } /* (its first figure level with the name's first line) */
.specs-list dt { display: flex; gap: 12px; font-size: max(11px, 0.8vw); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.specs-list dt span { color: var(--yellow); letter-spacing: 0.04em; }
.specs-list dd { font-weight: 300; font-size: max(22px, 1.9vw); line-height: 1; letter-spacing: -0.02em; }
.specs-list dd span { margin-left: 5px; font-size: 0.42em; font-weight: 400; letter-spacing: 0; color: var(--muted); }

.specs-bottom {
  padding: 0 var(--pad) calc(var(--pad) * 1.5);
  background: linear-gradient(transparent, rgba(236, 238, 241, 0.6) 45%);
}

/* the top speed, as a gauge: an arc that fills to it, the figure inside */
.specs-bottom { display: flex; align-items: flex-end; gap: max(24px, 3vw); }
.gauge { flex: 0 0 auto; width: max(230px, 19vw); margin-bottom: calc(var(--pad) * -0.3); } /* (its figure on the details' baseline) */
.gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge-track { fill: none; stroke: rgba(0, 0, 0, 0.14); stroke-width: 2; }
.gauge-fill { fill: none; stroke: var(--yellow); stroke-linecap: round; }
.gauge-fill { stroke-width: 2.5; }
.gauge-tick { stroke: rgba(0, 0, 0, 0.28); stroke-width: 1; }
.gauge-figure { font-family: "Porsche Next", sans-serif; font-weight: 300; font-size: 66px; letter-spacing: -2.5px; fill: var(--text); }
/* (these two at the panel's own sizes, whatever size the gauge is drawn at: --unscale, js/panel.js) */
.gauge-unit { font-family: "Porsche Next", sans-serif; font-size: calc(max(11px, 0.8vw) * var(--unscale, 1)); fill: var(--muted); letter-spacing: 0.04em; }
.gauge-label { font-family: "Porsche Next", sans-serif; font-size: calc(10px * var(--unscale, 1)); letter-spacing: 0.15em; fill: var(--muted); }
.gauge-end { font-family: "Porsche Next", sans-serif; font-size: 10px; fill: var(--muted); }
/* beside it: the times, and the small print */
.specs-foot { flex: 1; display: flex; align-items: center; gap: max(20px, 2.4vw); min-width: 0; }

/* the small print, and the button */
.specs-details { flex: 1; display: flex; flex-wrap: nowrap; justify-content: center; gap: max(40px, 4.8vw); min-width: 0; }
/* (a touch left of centre: the gauge's box is wider than what shows of it, so the gaps either side look the same) */
.specs-panel .specs-details { padding: 0 1.3vw 0 0; }
.specs-details dt { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.specs-details dd { margin-top: 4px; font-size: max(12px, 0.9vw); white-space: nowrap; }

.specs-action {
  flex: 0 0 auto; margin-left: auto;
  display: flex; gap: max(24px, 2.4vw); justify-content: space-between; align-items: center;
  padding: max(13px, 1vw) max(18px, 1.4vw);
  border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 0;
  background: rgba(255, 255, 255, 0.22); color: var(--text);
  font: 500 max(12px, 0.9vw)/1 "AG Pro", sans-serif; letter-spacing: 0.02em; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s;
}
.specs-action span { font-size: 1.15em; }
.specs-actions { flex: 0 0 auto; display: flex; }
.specs-action:hover { background: rgba(255, 255, 255, 0.42); border-color: rgba(0, 0, 0, 0.85); }
.specs-action:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.specs-panel .count, .gauge-figure { font-variant-numeric: tabular-nums; } /* (so the figures don't jitter as they count up, js/panel.js) */


/* (sizes: a floor for small windows, then in proportion to the window's width with no ceiling, so a large monitor shows the
   same page as at 1440, only bigger) */

/* ---------- After the film ---------- */

/* White, two columns: a bold heading at the top left, the paragraph beside it. */
.about {
  /* One gap, --g, three times: the hero's bottom edge to the top of the title's letters, the end of the title's longest line
     to the paragraph, and the paragraph's last line to the carousel's first card (which sits 40px below this section). The
     title and the paragraph column keep their widths, centred as a pair. Porsche Next, measured: the letters' top 0.1145em
     below a line-height 1 line's top, the baseline 0.875em. */
  --g: max(56px, calc(6 * var(--u)));
  --h2: max(18px, calc(1.5278 * var(--u))); /* (the title's size: 22px at 1440) */
  --pf: max(15px, calc(1.1806 * var(--u))); /* (the paragraph's: 17px at 1440) */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--g);
  padding: calc(var(--g) - (0.125 + 0.1145) * var(--h2)) 32px calc(var(--g) - (1.325 - 0.875) * var(--pf) - 40px);
  background: #fff;
  color: var(--text);
  font-family: "Porsche Next", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.about h2 {
  margin: 0;
  font-weight: 500;
  font-size: var(--h2); /* (22px at 1440 wide) */
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.about p {
  margin: 0;
  max-width: 62ch;
  font-weight: 400;
  font-size: var(--pf); /* (17px at 1440 wide) */
  line-height: 1.65;
}
.about p + p { margin-top: 1.1em; }
.about h2 { flex: none; width: max-content; } /* (as wide as its longest line: the gap after it is measured from there) */
.about > div { flex: none; width: calc(37.2 * var(--u)); } /* (the paragraphs' width, as before: 536px at 1440) */
/* A test (index.html: ?grid, ?grid=lines): the text after the hero on a 12-column grid as wide as the carousel's cards, its
   gutter the cards' own gap, so the text lines up with the cards below. The title on columns 2–5, the paragraphs on 6–11. (Now the layout; the class kept its test name.) */
html.grid-test .about {
  /* (up to 1440 wide: the card's width and gap (.highlights --card-w, --gap), so the text lines up with the cards; wider, the
     grid grows at the text's own rate (--u), keeping the text's proportions as at 1440) */
  --gw: min(calc(100vw - 2 * max(16px, 7.15vw)), calc(75vh * 1260 / 612), calc(85.7 * var(--u)));
  --gut: max(12px, calc(1.4 * var(--u)));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  padding-left: calc((100vw - var(--gw)) / 2); padding-right: calc((100vw - var(--gw)) / 2);
  position: relative;
}
html.grid-test .about h2 { grid-column: 2 / 6; width: auto; } /* (columns 2–5: its first line reaches into 5, so the gap before the paragraph is short) */
html.grid-test .about > div { grid-column: 6 / 12; width: auto; }
html.grid-lines .about::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc((100vw - var(--gw)) / 2); right: calc((100vw - var(--gw)) / 2);
  background: repeating-linear-gradient(to right, rgba(255, 0, 60, 0.07) 0 calc((var(--gw) - 11 * var(--gut)) / 12), transparent 0 calc((var(--gw) - 11 * var(--gut)) / 12 + var(--gut)));
  pointer-events: none;
}
@media (max-width: 700px) { .about, html.grid-test .about { display: block; padding-left: 24px; padding-right: 24px; } .about h2 { width: auto; margin-bottom: 16px; } .about > div { width: auto; } html.grid-lines .about::before { display: none; } }

/* ---------- Highlights ---------- */

/* After Apple's "Comece pelos destaques". Cards 86% of the window wide (7.15vw margins), 20px between, the next one
   showing at the edge. The section is as tall as the scrolling it takes (set by js/gallery.js); inside it the stage
   pins to the middle of the window, and the scroll moves the row of cards sideways, then enlarges the last card. */
.highlights {
  /* (the card: the window's width less the margins, but never taller than 75% of the window, an ultrawide monitor's included;
     the margins then grow so it stays in the middle) */
  --card-w: min(calc(100vw - 2 * max(16px, 7.15vw)), calc(75vh * 1260 / 612));
  --pad: calc((100vw - var(--card-w)) / 2);
  --gap: max(12px, 1.4vw);
  --vpad: max(24px, 3vw);
  position: relative;
  overflow: clip; /* (both ways: the full-screen card never spills over the next section as it scrolls away) */
  background: #fff;
  color: var(--text);
  font-family: "Porsche Next", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.stage-pin {
  position: sticky; top: max(0px, calc((100vh - var(--stage-h, 640px)) / 2));
  height: var(--stage-h, 640px);
  display: flex; align-items: center;
  /* (a bottom margin as deep as the space below it in the window: the stage then lets go of the window exactly when the section's
     bottom reaches the window's, so the full-screen card and its panel move up as one, never cut shorter in place first) */
  margin-bottom: max(0px, calc((100vh - var(--stage-h)) / 2));
}
.gallery-track { display: flex; gap: var(--gap); padding: 0 var(--pad); width: max-content; will-change: transform; }
.card {
  position: relative; flex: 0 0 auto;
  width: var(--card-w); aspect-ratio: 1260 / 612; min-height: 360px;
  border-radius: max(16px, 1.94vw); overflow: hidden;
  background: #e8e8ed;
}
.card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-text {
  position: relative; margin: 0 auto; max-width: 56%;
  padding-top: max(24px, calc(3 * var(--u)));
  text-align: center;
  font-weight: 500; font-size: max(18px, calc(1.5278 * var(--u))); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--text);
}
.card.dark { background: #000; }
/* the last card: a picture over a canvas that plays the film (js/gallery.js sizes both to the part of the card shown) */
.film-card .film-canvas, .film-card .film-still, .film-card .film-loop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* (panel 2, looping, over the film's last frame once the text panel is in: it cuts in over that frame, and out again) */
.film-card .film-loop { opacity: 0; pointer-events: none; }
.film-card .film-loop.is-on { opacity: 1; }
/* (its source video, never shown itself: its frames are drawn into the canvas above, the same way the film's are, so both
   go through the same colour path; a video element shown directly is colour-managed differently and looked brighter) */
.film-card .film-loop-src, .film-card .film-trans-src { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.card.dark .card-text { color: #fff; }
/* (a film with light and dark parts: a soft fade at the top keeps the white caption readable) */
.card.scrim::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%; z-index: 1; background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); pointer-events: none; }
.card.scrim .card-text { z-index: 2; }
/* (the light studio films: the caption in the page's own dark, on a soft light fade at the top) */
.card.scrim-light::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%; z-index: 1; background: linear-gradient(rgba(255, 255, 255, 0.55), transparent); pointer-events: none; }
.card.scrim-light .card-text { z-index: 2; }

/* the text panel that slides in over the last film at the end (js/gallery.js): a third of the window, white, its words set
   like the white section's after the hero */
.film-panel {
  /* (inside the pinned stage, covering the window while it is pinned: the browser scrolls it with the film, never a frame behind) */
  position: absolute; top: calc((var(--stage-h) - 100vh) / 2); right: 0; z-index: 3;
  box-sizing: border-box; width: max(33.333vw, 320px); height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 max(24px, calc(4.3 * var(--u)));
  background: #fff; color: var(--text);
  font-family: "Porsche Next", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
  transform: translate3d(100%, 0, 0); visibility: hidden; will-change: transform;
}
.film-panel h2 { margin: 0 0 max(28px, calc(2.8 * var(--u))); font-weight: 500; font-size: max(18px, calc(1.5278 * var(--u))); line-height: 1.25; letter-spacing: -0.01em; }
.film-panel p { margin: 0; max-width: 34ch; font-weight: 400; font-size: max(15px, calc(1.1806 * var(--u))); line-height: 1.35; }
.film-panel p + p { margin-top: 1.35em; }

/* the two sections after the highlights (js/sections.js): pinned to the window while their film and text panel play; a white
   gap before each (between the highlights and the first, and between the two — the same as the gap above the carousel) */
.feature { position: relative; background: #000; margin-top: max(24px, calc(4.3 * var(--u))); } /* (the gap: the same as the panel's inner margin, text to edge) */
.feature-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.feature-film { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.feature-panel {
  position: absolute; top: 0; z-index: 2;
  box-sizing: border-box; width: max(33.333vw, 320px); height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 max(24px, calc(4.3 * var(--u)));
  background: #fff; color: var(--text);
  font-family: "Porsche Next", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
  visibility: hidden; will-change: transform;
}
.feature[data-side="left"] .feature-panel { left: 0; transform: translate3d(-100%, 0, 0); }
.feature[data-side="right"] .feature-panel { right: 0; transform: translate3d(100%, 0, 0); }
.feature-panel h2 { margin: 0 0 max(28px, calc(2.8 * var(--u))); font-weight: 500; font-size: max(18px, calc(1.5278 * var(--u))); line-height: 1.25; letter-spacing: -0.01em; }
.feature-panel p { margin: 0; max-width: 34ch; font-weight: 400; font-size: max(15px, calc(1.1806 * var(--u))); line-height: 1.35; }
.feature-panel p + p { margin-top: 1.35em; }

/* the end (js/outro.js): the picture fills the window, pinned while the credit fades in; the same gap before it as between the
   sections above */
.outro { position: relative; margin-top: max(24px, calc(4.3 * var(--u))); height: 180vh; background: #fff; }
.outro-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.outro-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outro-credit {
  position: absolute; left: 50%; top: 9%; transform: translateX(-50%); z-index: 1;
  font-family: "Porsche Next", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
  font-size: max(16px, calc(1.3889 * var(--u))); font-weight: 400; color: var(--text); text-decoration: none; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.outro-credit strong { font-weight: 600; }
.outro-credit.is-on { pointer-events: auto; }

/* the loading screen (js/loader.js): black, the wordmark small in white, a thin bar — a dim track and the white part loaded */
html.is-loading, html.is-loading body { overflow: hidden; }
/* (while the hero film plays or isn't at its end, the page doesn't scroll, momentum included: js/main.js syncLock) */
html.film-lock, html.film-lock body { overflow: hidden; }
.loader {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: max(30px, calc(2.083 * var(--u)));
  transition: opacity 0.6s ease;
}
.loader.is-done { opacity: 0; pointer-events: none; }
.loader-logo { /* (its box cropped to the letters (index.html viewBox), so the gap below it is the gap the eye sees; as wide as before) */ width: max(92.31px, calc(7.981 * var(--u))); height: auto; fill: #fff; display: block; }
.loader-bar { position: relative; width: max(140px, calc(12.5 * var(--u))); height: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.loader-enter {
  --cap-top: 0.1145; --cap-h: 0.7605; /* (Porsche Next at line-height 1: the letters' top below the line's top, and their height to the baseline) */
  /* (in the column with the logo and the bar, the three centred together; the line box trimmed to the capitals' height
     (--cap-top, --cap-h: measured in the face), so the gap the eye sees, bar to letters, is the loader's gap, as logo to bar) */
  margin: 0; white-space: nowrap; text-align: center;
  line-height: 1; height: calc(var(--cap-h) * 1em); overflow: visible;
  position: relative; top: calc(var(--cap-top) * -1em);
  font-family: "Porsche Next", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
  font-size: max(13px, calc(0.9028 * var(--u))); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8);
  opacity: 0; transition: opacity 0.6s ease;
}
.loader.is-ready { cursor: pointer; }
.loader.is-ready .loader-enter { opacity: 1; }
.loader-fill { position: absolute; inset: 0; background: #fff; transform-origin: left center; transform: scaleX(0); }

/* ---------- Phones (portrait, down to the iPhone SE's 375 × 667) ---------- */
@media (max-width: 700px) {
  .about { padding-left: 24px; padding-right: 24px; padding-top: 48px; }
  .about h2 { font-size: 21px; }
  .about h2 br { display: none; } /* (the title wraps by itself in the narrow column) */
  .about p { font-size: 15px; line-height: 1.6; }
  /* (the captions use the card's width: two lines at most, not four) */
  .card-text { max-width: 86%; font-size: 16px; padding-top: 22px; }
  /* (the text panels: a sheet rising from the bottom, the window's width and as tall as its words (js/gallery.js, js/sections.js);
     a third of a phone's width would leave a sliver of film beside them) */
  .film-panel, .feature-panel { left: 0; right: auto; width: 100vw; height: auto; justify-content: flex-start; padding: 32px 24px 40px; }
  .film-panel { top: auto; bottom: calc((var(--stage-h) - 100vh) / 2); transform: translate3d(0, 100%, 0); }
  .feature-panel { top: auto; bottom: 0; }
  .feature[data-side] .feature-panel { left: 0; right: auto; transform: translate3d(0, 100%, 0); }
  .film-panel h2, .feature-panel h2 { font-size: 20px; margin-bottom: 16px; }
  .film-panel p, .feature-panel p { font-size: 15px; line-height: 1.45; max-width: none; }
  .film-panel p + p, .feature-panel p + p { margin-top: 0.9em; }
  .feature, .outro { margin-top: 24px; }
  .outro-credit { top: 7%; font-size: 15px; }
}