/* Bright Smile Dental Studio, sample site. Hand-written, never minified (APPROACH.md §7). */

/* ---------- Tokens ---------- */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Source Serif 4 since 2026-09-27 (Instrument Serif read cramped at phone size): latin, regular only,
   optical size kept at 20 to 60 so each heading size gets its own spacing. */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F4EFE7;
  --ink: #17181A;
  --mid: #6B6560;
  --accent: #0E4B4A;
  --pearl: #E9E4DA;
  --paper-deep: #EDE6DA;
  --mid-deep: #5F5953;
  --wash: rgb(14 75 74 / 0.12);
  --radius: 12px;
  --pill: 999px;
  --gap: 24px;
  --gutter: 16px;
  --wide: 1200px;
  --bar: 64px;
  --t-0: 0.9375rem;
  --t-1: 1.0625rem;
  --t-eye: 0.8125rem;
  --t-2: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --t-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --t-price: 1.5rem;
  --t-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
  --t-num: clamp(28px, 4vw, 44px);
  --header: 72px;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --face: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-lava: cubic-bezier(0.33, 0, 0.11, 1);
  --stage: #07302E;
  /* Paper grain: fractal noise at about 4 percent, one small tile, no request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0 0.1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; --bar: 0px; }
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body, h1, h2, h3, p, ul, dl, dd, figure, blockquote, address { margin: 0; }

ul { padding: 0; list-style: none; }

img, picture, svg { display: block; max-width: 100%; }

img { height: auto; }

address { font-style: normal; }

/* ---------- Type ---------- */

body {
  /* Warm paper, a shade deeper at the two edges, with grain over it. Scrolls with the page. */
  background:
    var(--grain),
    linear-gradient(90deg, var(--paper-deep), rgb(244 239 231 / 0) 22%, rgb(244 239 231 / 0) 78%, var(--paper-deep)),
    var(--paper);
  color: var(--ink);
  font-family: var(--face);
  font-size: var(--t-1);
  line-height: 1.5;
  font-weight: 400;
  padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
}

/* Display in the serif (Sinocare v1's register), body in the sans. */
h1, h2, blockquote, .card-quote, .num, .sign {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
}

h1, h2 { line-height: 1.04; text-wrap: balance; }

h1 { font-size: var(--t-h1); }

h2 { font-size: var(--t-h2); }

/* The small register above each heading: the accent on every screen. */
.eyebrow {
  margin-bottom: 14px;
  color: var(--accent);
  font-size: var(--t-eye);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h3 { font-size: var(--t-1); font-weight: 600; line-height: 1.3; }

a { color: inherit; }

.price, .pill, .timings { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0 20px;
  border-radius: var(--pill);
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 600 var(--t-1) / 1 var(--face);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn:hover { background: var(--pearl); }

.btn.wa { background: var(--accent); border-color: var(--accent); color: var(--paper); }

.btn.wa:hover { background: var(--ink); border-color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Bar (phone and tablet only) ---------- */

#bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgb(244 239 231 / 0.94);
  border-top: 1px solid var(--pearl);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

#bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--pill);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

#bar .wa { background: var(--accent); border-color: var(--accent); color: var(--paper); }

@media (min-width: 1024px) {
  #bar { display: none; }
}

/* ---------- Sections ---------- */

main > section {
  padding-block: clamp(72px, 10vw, 144px);
  padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2));
}

main > section > h2 { margin-bottom: clamp(32px, 5vw, 56px); }

picture img { border-radius: var(--radius); background: var(--pearl); }

/* Pearl bands (Screens 3 and 7) break the paper; secondary text darkens to stay above AA. */
.band { --mid: var(--mid-deep); background: var(--grain), var(--pearl); }

.band .btn:hover { background: var(--paper); }

figcaption { margin-top: 12px; color: var(--mid); }

/* 1. The room */

main > .room { padding: 0; }

.room-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: max(560px, calc(100svh - var(--bar)));
  overflow: hidden;
}

.room-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px var(--gutter) 48px;
  background: linear-gradient(to bottom, rgb(244 239 231 / 0.85), rgb(244 239 231 / 0));
}

.name {
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding-top: 8px;
  text-wrap: balance;
}

.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-0);
  line-height: 1;
  white-space: nowrap;
}

.room-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.room-text {
  position: relative;
  z-index: 2;
  padding: 96px var(--gutter) 24px;
  background: linear-gradient(to top, var(--paper) 62%, rgb(244 239 231 / 0));
}

.room-text h1 { max-width: 14ch; }

.room-text .actions { margin-top: 24px; }

.tel { display: none; }

.glyph { width: 1em; height: 1em; }

/* The numeral band: figures in the serif over small captions, hairlines between. */
.band-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2));
  background: var(--grain), var(--paper-deep);
  border-block: 1px solid var(--wash);
}

.band-strip li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 16px;
}

@media (max-width: 767px) {
  .band-strip li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--wash); }

  .band-strip li:nth-child(n+3) { border-top: 1px solid var(--wash); }
}

.num { display: flex; align-items: center; height: 1em; color: var(--accent); font-size: var(--t-num); line-height: 1; }

.rupee { position: relative; top: -0.3em; margin-right: 2px; font: 400 0.6em var(--face); }

.num .glyph { width: 0.85em; height: 0.85em; }

.cap, .card-label {
  color: var(--mid);
  font-size: var(--t-eye);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .band-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .band-strip li { padding: 28px 24px; }

  .band-strip li:first-child { padding-left: 0; }

  .band-strip li + li { border-left: 1px solid var(--wash); }
}

/* From 1024 the header is fixed: name, phone, hours. Phones keep the bottom bar. */
@media (min-width: 1024px) {
  html { scroll-padding-top: var(--header); }

  .room-stage {
    display: grid;
    grid-template-columns: 1fr 2fr;
    min-height: clamp(600px, calc(100svh - 128px), 860px);
  }

  .room-top {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10;
    align-items: center;
    height: var(--header);
    padding: 0 var(--gutter);
    background: rgb(244 239 231 / 0.9);
    border-bottom: 1px solid var(--wash);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .name { padding: 0; margin-right: auto; }

  .tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    min-width: 48px;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
  }

  .tel span { font-size: var(--t-0); font-variant-numeric: tabular-nums; }

  .pill { background: var(--pearl); }

  .room-image { position: relative; grid-area: 1 / 2; }

  .room-text {
    grid-area: 1 / 1;
    align-self: end;
    padding: var(--header) var(--gutter) 48px;
    background: none;
  }

  .room-text h1 { font-size: clamp(2.5rem, 3.9vw, 4rem); }

  .room-text .actions { margin-top: 32px; }
}

/* 2. The dentist */

.dentist { display: grid; gap: 32px; }

.dentist-text h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }

/* Credentials: two cells, a hairline above each. */
.creds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  color: var(--mid);
  font-size: var(--t-0);
}

.creds li { padding-top: 10px; border-top: 1px solid var(--wash); }

.dentist blockquote {
  margin-top: 28px;
  font-size: var(--t-2);
  line-height: 1.2;
  text-wrap: pretty;
}

.sign { margin-top: 20px; color: var(--accent); font-size: var(--t-2); }

@media (min-width: 768px) {
  .dentist {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }

  .dentist-image { grid-column: 1 / span 5; }

  .dentist-text { grid-column: 7 / span 6; }
}

/* 3. What brings you in: five photo cards */

.hurt { text-align: center; }

.hurt h2 { margin-inline: auto; }

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 0;
  border: 1px solid var(--wash);
  border-radius: calc(var(--radius) + 6px);
  background: var(--paper);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
  color: var(--ink);
  text-decoration: none;
  transition: transform 200ms var(--ease-out), border-color 200ms ease;
}

.card picture img { background: var(--paper); }

/* The patient's words in the serif, the region as a small tag with an arrow under them. */
.card-text { display: flex; flex-direction: column; flex: 1; padding: 14px 8px 0; }

.card-quote { flex: 1; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); line-height: 1.12; }

.card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
}

.card-label::after {
  content: "";
  flex: none;
  width: 18px;
  height: 10px;
  background: var(--accent);
  -webkit-mask: var(--arrow) no-repeat center / contain;
  mask: var(--arrow) no-repeat center / contain;
}

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); border-color: var(--accent); }
}

.card:active { transform: translateY(-2px); border-color: var(--accent); }

.card:focus-visible { border-radius: calc(var(--radius) + 6px); }

/* Five in two columns leaves one over: the last card runs the full width, photo beside label. */
.cards .card:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  align-items: center;
  padding-bottom: 8px;
}

@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }

  .cards .card:last-child {
    grid-column: auto;
    display: flex;
    padding-bottom: 0;
    align-items: stretch;
  }
}

.fallback { margin-top: 18px; }

.fallback a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--mid);
  text-underline-offset: 4px;
}

/* 4. What it costs */

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }

@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gap); }
}

@media (min-width: 1024px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tile { position: relative; display: flex; flex-direction: column; }

/* The price leads each tile, the name and the time sit under it. */
.tile picture { margin-bottom: 12px; }

.tile .price { order: 1; }

.tile h3 { order: 2; font-size: var(--t-0); }

.tile .time { order: 3; font-size: var(--t-0); }

.tile img { width: 100%; outline: 1px solid var(--wash); outline-offset: -1px; }

.tile-open { text-decoration: none; }

.tile-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.tile:hover img { filter: brightness(0.97); }

.price { color: var(--accent); font-weight: 600; }

.tile .price { color: var(--mid); font-size: var(--t-0); font-weight: 400; }

.tile .price data {
  color: var(--accent);
  font-size: var(--t-price);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The consultation leads: full width on a phone, two by two from 768. */
.tile.lead { grid-column: 1 / -1; }

.tile.lead img { aspect-ratio: 4 / 3; object-fit: cover; }

.tile.lead h3 { font-size: var(--t-1); }

.tile.lead .price data { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.02em; }

@media (min-width: 768px) {
  .tile.lead { grid-column: span 2; grid-row: span 2; }

  .tile.lead img { aspect-ratio: 1; }
}

.time { color: var(--mid); }

/* The closing line takes the grid's last cell, so the lead tile leaves no hole. */
.tiles .cost-line {
  align-self: center;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  text-wrap: pretty;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tiles .cost-line { grid-column: 1 / -1; }
}

/* 5. Your first visit */

.visit .frames {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 16px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.visit .frames::-webkit-scrollbar { display: none; }

.visit figure { scroll-snap-align: start; }

.visit figcaption::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: 10px;
  background: var(--accent);
}

@media (min-width: 768px) {
  .visit .frames {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

/* 6. The studio: LAVA's process sequence on a deep green stage (the motion is under Motion). Still, it is the
   three rooms and the tray as four frames, two by two from 768; the six floating tiles exist only in the motion. */
.studio { --mid: rgb(244 239 231 / 0.8); background: var(--grain), var(--stage); color: var(--paper); }

.seq { display: grid; gap: 28px; }

.stage, .pan, .drift { display: contents; }

.spacer, .bit { display: none; }

.panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 768px) {
  .seq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px var(--gap); }
}

/* 7. Find us */

.find { display: grid; gap: 32px; }

.find address p + p { color: var(--mid); }

.timings {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 24px;
  margin-top: 24px;
}

.timings dt { color: var(--mid); }

.find .actions { margin-top: 32px; }

@media (min-width: 768px) {
  .find {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }

  .find .map { grid-column: 1 / span 7; }

  .find-text { grid-column: 9 / span 4; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .find .map { grid-column: 1 / span 6; }

  .find-text { grid-column: 7 / span 6; }
}

/* Footer */

footer {
  display: grid;
  gap: 8px;
  padding: 40px max(var(--gutter), calc((100% - var(--wide)) / 2)) 48px;
  border-top: 1px solid var(--pearl);
  color: var(--mid);
  font-size: var(--t-0);
}

footer summary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

footer details p { max-width: 60ch; }

/* ---------- Sheet ---------- */

#sheet {
  overscroll-behavior: contain;
  width: 100%;
  max-width: 100%;
  max-height: 88svh;
  margin: auto 0 0;
  padding: 28px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
}

#sheet[open] { animation: sheet-in 320ms var(--ease-out); }

#sheet::backdrop { background: rgb(23 24 26 / 0.4); }

#sheet h2 { font-size: var(--t-2); line-height: 1.1; }

.sheet-note { margin-top: 4px; color: var(--mid); }

.sheet-note:empty { display: none; }

.sheet-first { margin-top: 16px; }

.sheet-tiles { display: grid; gap: 16px; margin-block: 24px; }

.sheet-tiles li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.sheet-tiles img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--pearl);
}

.sheet-tiles li > div {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  align-items: baseline;
}

.sheet-tiles h3, .sheet-tiles .line { flex-basis: 100%; }

.sheet-tiles .line { margin-top: 2px; color: var(--mid); font-size: var(--t-0); }

.sheet-tiles.one li { grid-template-columns: 160px minmax(0, 1fr); align-items: end; }

#sheet .btn { width: 100%; }

/* The one button stays in reach while the tiles scroll under it. */
#sheet .btn.wa {
  position: sticky;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 0 0 8px var(--paper);
}

.sheet-close { margin-top: 8px; border-color: transparent; }

.sheet-close:hover { background: var(--pearl); }

@media (min-width: 768px) {
  #sheet {
    width: min(640px, calc(100% - 64px));
    margin: auto;
    padding: 36px 36px 32px;
    border-radius: var(--radius);
  }

  #sheet[open] { animation-name: panel-in; }

  .sheet-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

  .sheet-tiles.one { grid-template-columns: 1fr; }
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes panel-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@supports (animation-timeline: scroll()) {
  .room-image img {
    animation: settle linear both;
    animation-timeline: scroll(root);
    animation-range: 0 400px;
  }
}

@supports (animation-timeline: view()) {
  .tile img,
  .card img,
  .visit img,
  .map img {
    animation: fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

/* LAVA's motion (recipes 2, 3, 5 and 9 in inspiration/motion-recipes.md) at half its pace: the H1 word by word,
   the dentist's portrait opening from its centre, screens sliding over the one before, and Screen 6's rooms. */
@media (prefers-reduced-motion: no-preference) {
  .word { animation: word-in 1.5s var(--ease-lava) both; animation-delay: calc(var(--i) * 0.15s); }
}

@supports (animation-timeline: view()) {
  .dentist-image img {
    animation: iris var(--ease-lava) both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) and (timeline-scope: none) {
    /* Overlay: the screen before holds still through its last view while the next rides up over it. The
       held screen moves down under the next one, so that one is at least a screen tall. */
    #dentist, #visit {
      animation: hold linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    #hurt, #studio, #find { position: relative; z-index: 1; box-shadow: 0 -24px 64px rgb(23 24 26 / 0.18); }

    #hurt { display: grid; align-content: center; min-height: 100vh; }

    /* Find us slides over the held stage (the drift's last 100svh), so it is at least a screen tall: shorter,
       the stage's foot stays stuck below it over the footer. */
    #find { margin-top: -100svh; min-height: 100svh; align-content: center; }

    /* The sequence. A sticky stage holds a row of rooms, each a full-screen photograph scaled and letterboxed
       into a panel; the spacer under it gives the pan one screen of scroll per room after the first. */
    main > .studio { padding: 0; }

    .seq { display: block; timeline-scope: --pan, --take; --step: 75vw; --lead: 12.5vw; --s0: 0.725; --c0: 10%; }

    .stage { display: block; position: sticky; top: 0; height: 100svh; overflow: clip; }

    .pan {
      display: flex;
      width: max-content;
      height: 100%;
      padding-left: var(--lead);
      animation: pan linear both;
      animation-timeline: --pan;
      animation-range: contain 0% contain 100%;
    }

    .panel { position: relative; flex: 0 0 var(--step); min-width: 0; height: 100%; }

    .panel picture {
      position: relative;
      width: 100vw;
      max-width: none;
      height: 100%;
      margin-left: calc(var(--lead) * -1);
      transform: scale(var(--s0));
      clip-path: inset(var(--c0) 0);
    }

    .panel img { height: 100%; aspect-ratio: auto; border-radius: 0; }

    .seq figcaption {
      display: inline-block;
      padding: 6px 12px;
      border-radius: var(--pill);
      background: var(--stage);
      color: var(--paper);
      font-size: var(--t-0);
    }

    /* Under the visible strip, level with its left edge. */
    .panel figcaption {
      position: absolute;
      left: calc((var(--step) - 100vw * var(--s0)) / 2);
      top: calc(50% + (50% - var(--c0)) * var(--s0) + 14px);
      margin: 0;
    }

    .spacer { display: block; height: calc(var(--n) * 100vh); view-timeline-name: --pan; }

    /* Takeover, over the drift's first 50vh: the last room opens to the full stage and fades into the plain green, and the
       room before it steps aside. */
    .panel:last-child picture,
    .panel:last-child picture::after,
    .panel:last-child figcaption,
    .panel:nth-last-child(2) {
      animation: take var(--ease-lava) both;
      animation-timeline: --take;
      animation-range: cover 0% cover 50vh;
    }

    .panel:last-child picture::after { content: ""; position: absolute; inset: 0; background: var(--stage); animation-name: veil; }

    .panel:last-child figcaption { animation-name: fade-out; animation-range: cover 0% cover 20vh; }

    .panel:nth-last-child(2) { animation-name: aside; }

    /* The drift: the tray and six price tiles on a twelve-column grid; alternate ones travel as they cross the
       screen, so they pass each other over the backdrop. */
    .drift {
      display: grid;
      position: relative;
      z-index: 1;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 10svh var(--gap);
      align-items: start;
      padding: 50svh var(--gutter) 100svh;
      view-timeline-name: --take;
    }

    .bit { display: block; }

    .drift picture { overflow: clip; border-radius: var(--radius); box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); }

    .drift img { border-radius: 0; }

    .drift > :nth-child(even) {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .drift > :nth-child(1) { grid-column: 2 / span 4; }
    .drift > :nth-child(2) { grid-column: 8 / span 2; }
    .drift > :nth-child(3) { grid-column: 4 / span 3; }
    .drift > :nth-child(4) { grid-column: 10 / span 2; }
    .drift > :nth-child(5) { grid-column: 1 / span 3; }
    .drift > :nth-child(6) { grid-column: 6 / span 2; }
    .drift > :nth-child(7) { grid-column: 9 / span 3; }
    .drift > :nth-child(n+8) { grid-column: span 3; }

    @media (min-width: 960px) {
      .drift img {
        scale: 1.1;
        animation: inner linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
    }

    /* Phones: each room fills the screen, the landscape file cover-cropped to its centre third. */
    @media (max-width: 767px) {
      .seq { --step: 100vw; --lead: 0px; --s0: 1; --c0: 0%; }

      .panel figcaption { top: auto; bottom: calc(var(--bar) + 20px); left: var(--gutter); }

      .drift { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6svh 12px; }

      .drift > :nth-child(1) { grid-column: 1 / span 4; }
      .drift > :nth-child(2) { grid-column: 5 / span 2; }
      .drift > :nth-child(3) { grid-column: 2 / span 3; }
      .drift > :nth-child(4) { grid-column: 5 / span 2; }
      .drift > :nth-child(5) { grid-column: 1 / span 2; }
      .drift > :nth-child(6) { grid-column: 4 / span 3; }
      .drift > :nth-child(7) { grid-column: 2 / span 3; }
    }
  }
}

/* Without scroll-driven animation, js/motion.js adds .fade to <html> and .in to each image as
   it arrives. Without JavaScript neither class is set and every image simply shows. */
@supports not (animation-timeline: view()) {
  .fade :is(.dentist-image, .tile, .card, figure, .map) img {
    opacity: 0;
    transition: opacity 300ms var(--ease-out);
  }

  .fade :is(.dentist-image, .tile, .card, figure, .map) img.in { opacity: 1; }
}

@keyframes settle {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes word-in { from { opacity: 0; } }

@keyframes iris {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); transform: scale(0.5); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; }
}

@keyframes hold { to { transform: translateY(min(100%, 100vh)); } }

@keyframes pan { to { transform: translateX(calc((1 - var(--n)) * var(--step))); } }

@keyframes take {
  from { transform: scale(var(--s0)); clip-path: inset(var(--c0) 0); }
  to { transform: scale(1.1); clip-path: inset(0 0); }
}

@keyframes veil { from { opacity: 0; } to { opacity: 1; } }

@keyframes fade-out { to { opacity: 0; } }

@keyframes aside { to { transform: translateX(-20vw); } }

@keyframes rise { from { transform: translateY(25svh); } to { transform: translateY(-25svh); } }

@keyframes inner { from { translate: 0 10%; } to { translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; }
}