/* ==========================================================================
   Tutoring: Bassel's tutoring room
   The room sits on a full marigold field. On wide screens with motion it
   stays put behind the hero and the story while the camera walks the wall
   (room.js); otherwise the same pieces form a still composition: the poster,
   the labels as links, and one still per story beat.
   Overrides of the shared system live here only (BRIEF §2.1).
   ========================================================================== */

.film {
  --bg: var(--marigold);
  --ink: var(--ink-fixed);
  --ink-muted: color-mix(in srgb, var(--ink-fixed) 80%, var(--marigold));
  --line: color-mix(in srgb, var(--ink-fixed) 18%, transparent);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
  color: var(--ink);
}
section[tabindex="-1"]:focus, .beat__title:focus { outline: none; }

/* -------------------------------------------------------------- the hero */
.hero { display: contents; }
.hero__title {
  grid-row: 1;
  padding: calc(var(--chrome-h) + 14px) var(--gutter) 0;
  font: 700 clamp(42px, 11.2vw, 64px)/.92 var(--font-display);
  letter-spacing: -.038em;
  text-wrap: balance;
}
.hero__body { grid-row: 3; padding: 6px var(--gutter) clamp(48px, 9vw, 72px); }
.hero__lede {
  max-width: 34ch;
  font: 500 clamp(18px, 1.3vw, 21px)/1.45 var(--font-body);
  letter-spacing: -.008em;
}
.hero__proof { margin-top: 12px; max-width: 36ch; font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.hero__cta { min-height: 52px; padding: 0 26px; font-size: 16px; }

.stars { width: 92px; height: 17px; fill: currentColor; flex: none; }
.stars-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 600 16px/1 var(--font-body); text-decoration: none; color: var(--ink);
}
.stars-link b { font: 700 19px/1 var(--font-display); letter-spacing: -.01em; }
.stars-link span { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
.stars-link:hover span { text-decoration-color: currentColor; }

/* ------------------------------------------------------------- the stage */
.stage { grid-row: 2; position: relative; }
.stage__canvas { display: none; }
/* hidden until the room is ready (the poster shows meanwhile; boot draws warm-up frames into it) */
.js .stage__canvas { opacity: 0; }
.room-live .stage__canvas { opacity: 1; }
.room {
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.room__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transition: opacity 380ms var(--ease-out);
}
.room-live .room__poster { opacity: 0; }

/* ------------------------------------------- the labels on the objects */
.spots { position: absolute; inset: 0; pointer-events: none; }
.spot {
  position: absolute;
  left: var(--jx, var(--x));
  top: var(--jy, var(--y));
  width: 0; height: 0;
  color: var(--ink-fixed);
  text-decoration: none;
  pointer-events: auto;
}
.spot::before {
  content: "";
  position: absolute; left: -7px; top: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-fixed);
  box-shadow: 0 0 0 3px #ffffff, 0 3px 9px 1px rgba(58, 28, 70, .4);
  transition: transform var(--dur-ui) var(--ease-out);
}
.spot::after {
  content: "";
  position: absolute; left: -22px; top: -22px;
  width: 44px; height: 44px; border-radius: 50%;
}
.spot__label {
  position: absolute; left: -12px; bottom: 15px;
  padding: 8px 13px 9px;
  border-radius: var(--pill);
  background: var(--ink-fixed); color: #ffffff;
  font: 600 14px/1 var(--font-body); letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(28, 24, 48, .45);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--dur-micro) ease-out, transform var(--dur-ui) var(--ease-out);
  pointer-events: none;
}
.spot[data-dir="s"] .spot__label { bottom: auto; top: 15px; transform: translateY(-3px); }
.spot:hover::before, .spot.is-lit::before { transform: scale(1.2); }
.spot:hover .spot__label, .spot:focus-visible .spot__label, .spot.is-lit .spot__label { opacity: 1; transform: none; }
.spot:hover, .spot:focus-visible, .spot.is-lit { z-index: 2; }
.spot:focus-visible { outline: none; }
.spot:focus-visible::before { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px var(--ink-fixed); }
.room-away .spots { visibility: hidden; opacity: 0; transition: opacity 180ms ease-out, visibility 0s linear 180ms; }
.spots { transition: opacity 180ms ease-out; }

/* --------------------------------------------------------------- the story */
.story { grid-row: 4; padding: 8px 0 clamp(56px, 8vw, 96px); }
.beat { padding: 0 var(--gutter); }
.beat + .beat { margin-top: clamp(44px, 7vw, 72px); }
.beat__still { margin: 0 calc(var(--gutter) * -1) 0; }
.beat__still img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.beat__card {
  position: relative;
  margin-top: -28px;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(28px, 3vw, 42px);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink-fixed);
  box-shadow: 0 2px 4px rgba(58, 28, 70, .08), 0 30px 60px -28px rgba(58, 28, 70, .45);
}
.beat__title {
  font: 700 clamp(28px, 2.7vw, 42px)/1.02 var(--font-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.beat__card p { margin-top: 14px; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.55; color: var(--ink-soft); }
.beat__card p:first-of-type { margin-top: 18px; }
.beat__card .link { color: var(--marigold-deep); }

/* Sections below the room: laid out and painted only as they come near.
   Until then each holds about its real height (its content box, measured
   per layout), so the page keeps its length; once seen, its own size is
   remembered. Links that jump past them lay them out first (page.js). */
.results, .teach, .site { content-visibility: auto; }
.results { contain-intrinsic-size: auto 1270px; }
.teach { contain-intrinsic-size: auto 1215px; }
.site { contain-intrinsic-size: auto 1065px; }
@media (min-width: 821px) {
  .results { contain-intrinsic-size: auto 1030px; }
  .teach { contain-intrinsic-size: auto 950px; }
  .site { contain-intrinsic-size: auto 950px; }
}
@media (min-width: 1100px) {
  .results { contain-intrinsic-size: auto 930px; }
  .teach { contain-intrinsic-size: auto 575px; }
  .site { contain-intrinsic-size: auto 1065px; }
}

/* ------------------------------------------------------------- results */
.results {
  background: var(--marigold-tint);
  color: var(--ink-fixed);
  padding-block: clamp(80px, 9vw, 140px);
}
.results__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: clamp(36px, 4.6vw, 64px);
  align-items: start;
}
.results__head { grid-column: 1 / -1; }
.results__lede { max-width: 50ch; margin-top: clamp(18px, 2vw, 28px); font-size: var(--step-lede); line-height: 1.5; text-wrap: pretty; }
.results__title {
  max-width: 18ch;
  font: 700 clamp(44px, 5.4vw, 96px)/.94 var(--font-display);
  letter-spacing: -.038em;
  text-wrap: balance;
}
.results__me { grid-column: 1 / span 4; }
.results__photo { position: relative; isolation: isolate; margin-right: 14px; }
.results__photo::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border-radius: var(--radius-lg); background: var(--marigold);
}
.results__photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 26%;
  border-radius: var(--radius-lg);
}
.results__preply {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 4px;
  margin-top: 40px; text-decoration: none; color: var(--ink-fixed);
}
.results__preply .stars { grid-row: 1; }
.results__rating { grid-row: 1; font: 600 18px/1 var(--font-body); }
.results__rating b { font: 700 24px/1 var(--font-display); letter-spacing: -.01em; }
.results__reviews {
  grid-column: 1 / -1; min-height: 32px; display: inline-flex; align-items: center;
  font: 600 16px/1 var(--font-body); color: var(--marigold-deep);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: .25em; text-decoration-thickness: 1.5px;
}
.results__preply:hover .results__reviews { text-decoration-color: currentColor; }

.wins { grid-column: 6 / -1; border-top: 1.5px solid color-mix(in srgb, var(--ink-fixed) 16%, transparent); }
.win {
  display: grid;
  grid-template-columns: clamp(170px, 15vw, 250px) minmax(0, 1fr);
  column-gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
  padding: clamp(26px, 2.8vw, 40px) 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink-fixed) 16%, transparent);
}
.mark {
  display: flex; align-items: center; gap: .14em;
  font: 700 clamp(46px, 4.2vw, 72px)/1 var(--font-display);
  letter-spacing: -.03em;
}
.mark__was { position: relative; color: color-mix(in srgb, var(--ink-fixed) 40%, var(--marigold-tint)); }
.mark__strike {
  position: absolute; left: -16%; top: 6%; width: 132%; height: 90%;
  fill: none; stroke: var(--coral); stroke-width: 6px; stroke-linecap: round;
  vector-effect: non-scaling-stroke; overflow: visible;
}
.mark__strike path { vector-effect: non-scaling-stroke; }
.mark__arrow { width: .68em; height: .3em; flex: none; fill: none; stroke: var(--ink-fixed); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mark__now {
  display: grid; place-items: center;
  width: 1.42em; height: 1.42em; padding-top: .04em;
  border-radius: 52% 48% 50% 47% / 48% 53% 47% 52%;
  background: var(--marigold);
  box-shadow: 0 6px 16px -8px rgba(143, 91, 0, .7);
}
/* Emily's mark is her own rating, not a grade: five star stickers (system.css, Stickers) */
.mark__stars { width: 3.3em; max-width: 100%; height: auto; }
.win__quote p { font: 500 clamp(18px, 1.35vw, 22px)/1.45 var(--font-body); letter-spacing: -.008em; text-wrap: pretty; }
.win__who { margin-top: 12px; font: 500 15px/1.4 var(--font-body); color: var(--ink-soft); text-wrap: pretty; }

/* ---------------------------------------------------------- what I teach */
.teach { background: var(--paper); color: var(--ink-fixed); padding-block: clamp(80px, 9vw, 140px); }
.teach__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: 64px;
  align-items: end;
}
.teach__books { grid-column: 1 / span 7; }
.teach__how { grid-column: 9 / -1; padding-bottom: 6px; }
.teach__title {
  font: 700 clamp(40px, 4.6vw, 80px)/.95 var(--font-display);
  letter-spacing: -.036em;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.stack { display: grid; gap: 7px; }
.book {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name lv" "tp tp";
  align-items: baseline;
  column-gap: 18px; row-gap: 3px;
  padding: 17px 26px 18px 40px;
  border-radius: 6px 14px 14px 6px;
  color: var(--ink-fixed);
  box-shadow: inset 0 -3px 0 rgba(28, 24, 48, .12), 0 10px 24px -18px rgba(58, 28, 70, .6);
}
.book::before, .book::after {
  content: ""; position: absolute; top: 9px; bottom: 9px; width: 3px; border-radius: 2px;
  background: currentColor; opacity: .3;
}
.book::before { left: 16px; }
.book::after { left: 23px; }
.book__name { grid-area: name; font: 650 clamp(22px, 1.75vw, 30px)/1.05 var(--font-display); letter-spacing: -.02em; }
.book__lv { grid-area: lv; font: 600 14px/1.2 var(--font-body); letter-spacing: .01em; text-align: right; }
.book__tp { grid-area: tp; font: 400 15px/1.4 var(--font-body); opacity: .9; }
.book--a { background: var(--marigold); width: 100%; }
.book--b { background: var(--ink-fixed); color: #ffffff; width: 95%; margin-left: 3%; }
.book--c { background: var(--cobalt); color: #ffffff; width: 98%; margin-left: 1%; }
.book--d { background: #fffdf8; width: 92%; margin-left: 5%; box-shadow: inset 0 0 0 1.5px rgba(28, 24, 48, .16), inset 0 -3px 0 rgba(28, 24, 48, .08), 0 10px 24px -18px rgba(58, 28, 70, .6); }
.book--e { background: var(--coral); width: 96%; margin-left: 2%; }
.book--b .book__tp { opacity: .88; }
.book--c .book__tp { opacity: 1; }

.teach__sub { font: 700 clamp(26px, 2.3vw, 36px)/1.05 var(--font-display); letter-spacing: -.025em; }
.how { margin-top: 22px; border-top: 1.5px solid var(--rule); }
.how li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; align-items: start;
  padding: 16px 0 17px;
  border-bottom: 1.5px solid var(--rule);
}
.how svg { width: 30px; height: 30px; fill: none; stroke: var(--marigold-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.how p { font-size: 17px; line-height: 1.5; padding-top: 3px; text-wrap: pretty; }
.hero__lede, .hero__proof, .beat__card p, .site__lede { text-wrap: pretty; }

/* ------------------------------------------------- basseltutor.com, live */
.site { padding-block: clamp(80px, 9vw, 140px); }
.site__grid { display: grid; row-gap: clamp(40px, 4.6vw, 64px); }
.site__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.site__title {
  max-width: 13ch;
  font: 700 clamp(42px, 5vw, 86px)/.95 var(--font-display);
  letter-spacing: -.036em;
  text-wrap: balance;
}
.site__aside { padding-bottom: 6px; }
.site__lede { max-width: 34ch; font-size: clamp(18px, 1.3vw, 21px); line-height: 1.5; }
.site__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.site .btn--ghost { border-color: color-mix(in srgb, #ffffff 55%, transparent); }
.site .btn--ghost:hover { border-color: #ffffff; }

.tabs { position: relative; }
.tabs__browser { --ratio: 16 / 10; max-width: 1100px; width: 100%; margin: 0 auto; box-shadow: 0 0 0 1px rgba(28, 24, 48, .12), 0 40px 80px -30px rgba(20, 8, 70, .6); }
.tabs__strip { display: flex; gap: 2px; padding: 8px 10px 0; background: #e7e3ee; }
.tab {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 1 210px; min-width: 0;
  min-height: 44px; padding: 0 16px;
  border-radius: 11px 11px 0 0;
  font: 500 13.5px/1 var(--font-body); color: #5b5570;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color var(--dur-micro) ease-out, color var(--dur-micro) ease-out;
}
.tab img { width: 16px; height: 16px; flex: none; }
.tab:hover { background: #efecf4; color: #1c1830; }
#bt-home:checked ~ .tabs__browser .tab--home,
#bt-register:checked ~ .tabs__browser .tab--register,
#bt-messages:checked ~ .tabs__browser .tab--messages,
#bt-book:checked ~ .tabs__browser .tab--book,
#bt-notes:checked ~ .tabs__browser .tab--notes { background: #f4f2f7; color: #1c1830; font-weight: 600; }
#bt-home:focus-visible ~ .tabs__browser .tab--home,
#bt-register:focus-visible ~ .tabs__browser .tab--register,
#bt-messages:focus-visible ~ .tabs__browser .tab--messages,
#bt-book:focus-visible ~ .tabs__browser .tab--book,
#bt-notes:focus-visible ~ .tabs__browser .tab--notes { outline: 2px solid var(--violet-deep); outline-offset: -4px; }
.url { display: none; }
#bt-home:checked ~ .tabs__browser .url--home,
#bt-register:checked ~ .tabs__browser .url--register,
#bt-messages:checked ~ .tabs__browser .url--messages,
#bt-book:checked ~ .tabs__browser .url--book,
#bt-notes:checked ~ .tabs__browser .url--notes { display: inline; }
.screen { position: absolute; inset: 0; display: grid; place-items: center; background: #faf6ed; visibility: hidden; }
.screen__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* the live home page carries old figures (100+, 5+) in a band at its foot;
   crop to the hero so only BRIEF numbers show on this page */
.screen--home .screen__shot { inset: auto; top: 0; left: -12%; width: 124%; height: 124%; max-width: none; }
#bt-home:checked ~ .tabs__browser .screen--home,
#bt-register:checked ~ .tabs__browser .screen--register,
#bt-messages:checked ~ .tabs__browser .screen--messages,
#bt-book:checked ~ .tabs__browser .screen--book,
#bt-notes:checked ~ .tabs__browser .screen--notes { visibility: visible; }
/* phones: the same pages on a real iPhone, chosen with chips */
.tabs__chips, .tabs__phone { display: none; }
.tabs__stack { position: relative; }
.pshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; visibility: hidden; }
#bt-home:checked ~ .tabs__phone .pshot--home,
#bt-register:checked ~ .tabs__phone .pshot--register,
#bt-messages:checked ~ .tabs__phone .pshot--messages,
#bt-book:checked ~ .tabs__phone .pshot--book,
#bt-notes:checked ~ .tabs__phone .pshot--notes { visibility: visible; }
/* status bands take each capture's top colour (inapp entries) */
.tabs__phone .iphone__screen { --status-bg: #faf6ee; }
#bt-register:checked ~ .tabs__phone .iphone__screen { --status-bg: #faf6ed; }
#bt-messages:checked ~ .tabs__phone .iphone__screen,
#bt-book:checked ~ .tabs__phone .iphone__screen,
#bt-notes:checked ~ .tabs__phone .iphone__screen { --status-bg: #ffffff; }
.tchip {
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px;
  border-radius: var(--pill);
  font: 600 13px/1 var(--font-body); color: #ffffff; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-micro) ease-out, color var(--dur-micro) ease-out;
}
#bt-home:checked ~ .tabs__chips .tchip--home,
#bt-register:checked ~ .tabs__chips .tchip--register,
#bt-messages:checked ~ .tabs__chips .tchip--messages,
#bt-book:checked ~ .tabs__chips .tchip--book,
#bt-notes:checked ~ .tabs__chips .tchip--notes { background: #ffffff; border-color: #ffffff; color: var(--violet-deep); }
#bt-home:focus-visible ~ .tabs__chips .tchip--home,
#bt-register:focus-visible ~ .tabs__chips .tchip--register,
#bt-messages:focus-visible ~ .tabs__chips .tchip--messages,
#bt-book:focus-visible ~ .tabs__chips .tchip--book,
#bt-notes:focus-visible ~ .tabs__chips .tchip--notes { outline: 2px solid #ffffff; outline-offset: 3px; }
.screen__splash { display: grid; justify-items: center; gap: clamp(14px, 1.6vw, 22px); }
.screen__splash img { width: clamp(56px, 6.4vw, 96px); height: auto; }
.screen__splash b { font: 600 clamp(19px, 1.9vw, 30px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; color: #1f1b33; }
.screen__splash b span { color: #4b3fd8; }
.screen--home .screen__splash b { font: 700 clamp(19px, 1.9vw, 28px)/1 var(--font-body); letter-spacing: -.02em; }

/* =====================================================================
   Wide screens: the hero and the room side by side; with motion, the room
   holds still behind the story while the camera walks the wall
   ===================================================================== */
@media (min-width: 1000px) and (min-height: 640px) {
  .film {
    --text-w: min(560px, 35vw);
    --area-l: calc(var(--gutter) + var(--text-w) + 24px);
  }
  .hero {
    grid-row: 1; grid-column: 1;
    position: relative; z-index: 3;
    display: flex; flex-direction: column; justify-content: center;
    height: 100dvh;
    padding: calc(var(--chrome-h) + 4px) 0 24px var(--gutter);
    pointer-events: none;
  }
  .hero__title, .hero__body { width: var(--text-w); pointer-events: auto; }
  .hero__title { padding: 0; font-size: clamp(56px, 5.3vw, 100px); line-height: .9; }
  .hero__body { padding: 0; margin-top: clamp(22px, 3.2dvh, 38px); }
  .hero__lede { max-width: 31ch; }

  .stage {
    grid-row: 1; grid-column: 1;
    height: 100dvh;
    z-index: 1;
    container-type: size;
  }
  .stage__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .room {
    --box: min(100cqh - var(--chrome-h) - 28px, 100cqw - var(--area-l) - 16px, 1000px);
    position: absolute;
    width: var(--box); height: var(--box);
    margin: 0;
    left: calc(var(--area-l) + (100cqw - var(--area-l) - 16px - var(--box)) / 2);
    top: calc(var(--chrome-h) + (100cqh - var(--chrome-h) - var(--box)) / 2);
  }

  /* the still story: a card and its still, side by side */
  .story { grid-row: 2; grid-column: 1; padding: clamp(40px, 6vw, 96px) 0 clamp(72px, 8vw, 120px); }
  .beat {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: center;
    width: min(100% - 2 * var(--gutter), 1440px);
    margin-inline: auto;
    padding: 0;
  }
  .beat__still { grid-column: 5 / -1; grid-row: 1; margin: 0; }
  .beat__still img { border-radius: var(--radius-lg); box-shadow: 0 30px 60px -34px rgba(58, 28, 70, .5); }
  .beat__card { grid-column: 1 / span 5; grid-row: 1; margin: 0; z-index: 1; }

  /* the tour: the room stays, the cards scroll over it */
  .has-tour .stage { grid-row: 1 / span 2; position: sticky; top: 0; align-self: start; }
  .has-tour .story { position: relative; z-index: 2; padding: 0; pointer-events: none; }
  .has-tour .beat {
    display: flex; align-items: center;
    width: auto; margin: 0;
    min-height: 100dvh;
    padding: var(--chrome-h) 0 0 var(--gutter);
  }
  .has-tour .beat + .beat { margin-top: 0; }
  .has-tour .beat--last { min-height: 160dvh; padding-bottom: 60dvh; }
  .has-tour .beat__still { display: none; }
  .has-tour .beat__card { width: min(500px, 33vw); pointer-events: auto; }

  .results__me { grid-column: 1 / span 4; }
}

/* Tablets and short wide windows: the room above, the story below */
@media (min-width: 821px) and (max-width: 999px), (min-width: 821px) and (max-height: 639px) {
  .hero__title { padding-top: calc(var(--chrome-h) + 28px); font-size: clamp(52px, 7.4vw, 76px); max-width: 13ch; }
  .stage { height: min(78vw, 720px); container-type: size; margin-top: 8px; }
  .stage__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .room { position: absolute; width: min(100cqw - 32px, 100cqh); height: min(100cqw - 32px, 100cqh); left: 0; right: 0; margin: 0 auto; top: 0; }
  .hero__body { padding-top: 22px; }
  .beat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: center; }
  .beat__still { grid-column: 5 / -1; grid-row: 1; margin: 0; }
  .beat__still img { border-radius: var(--radius-lg); }
  .beat__card { grid-column: 1 / span 6; grid-row: 1; margin: 0; z-index: 1; }
}

/* The scrubs hang at the left edge of their still: side by side, that card
   hangs from the still's foot rather than its middle, so it doesn't cover them */
@media (min-width: 821px) {
  html:not(.has-tour) .beat--last .beat__card { align-self: end; margin-bottom: -36px; }
}

/* ------------------------------------------------------------- phones */
@media (max-width: 1099px) {
  .results__me { grid-column: 1 / span 5; }
  .wins { grid-column: 7 / -1; }
  .teach__books { grid-column: 1 / -1; }
  .teach__how { grid-column: 1 / -1; }
  .site__head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .site__title { grid-row: auto; }
}
@media (max-width: 820px) {
  .room { width: 100%; }
  .results__grid { grid-template-columns: minmax(0, 1fr); }
  .results__head, .results__me, .wins { grid-column: 1 / -1; }
  .results__me { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); column-gap: 22px; align-items: end; }
  .results__preply { margin-top: 0; padding-bottom: 6px; grid-template-columns: minmax(0, 1fr); }
  .results__rating { grid-row: auto; }
  .win { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 28px 0; }
  .mark { font-size: 52px; }
  .book { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "lv" "tp"; padding: 15px 18px 16px 36px; row-gap: 4px; }
  .book__lv { text-align: left; }
  .book--b, .book--c, .book--d, .book--e { width: auto; margin-left: 0; }
  .book--b { margin-right: 3%; } .book--c { margin-left: 2%; } .book--d { margin-right: 5%; } .book--e { margin-left: 3%; }
  .tabs { display: grid; justify-items: center; row-gap: 26px; }
  .tabs__browser { display: none; }
  .tabs__chips {
    display: flex; width: min(100%, 420px); padding: 4px; gap: 2px;
    border-radius: var(--pill); border: 1.5px solid color-mix(in srgb, #ffffff 45%, transparent);
  }
  .tabs__phone { display: block; --w: min(300px, 74vw); }
  .beat + .beat { margin-top: 56px; }
}
/* Phones: the actions span the column, sized for a thumb, and wrap rather
   than overflow on the narrowest screens */
@media (max-width: 560px) {
  .hero__act { gap: 12px; }
  .hero__cta, .site__act .btn {
    flex: 1 1 100%;
    min-height: 54px; padding: 10px 20px;
    white-space: normal; text-align: center; line-height: 1.2;
  }
  .site__act { gap: 10px; }
}

/* Touch: the room's links stay visible, short and big enough to hit */
@media (hover: none) {
  .spot::before { width: 16px; height: 16px; left: -8px; top: -8px; }
  .spot__label { opacity: 1; transform: none; left: -10px; bottom: 13px; padding: 6px 10px 7px; font-size: 12.5px; pointer-events: auto; }
  .spot[data-dir="s"] .spot__label { top: 13px; bottom: auto; transform: none; }
}

@media (max-width: 359px) {
  .tchip { padding: 0 4px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .room__poster, .spot__label, .spot::before, .spots { transition: none; }
}