/* The home page: the landscape opens the page full screen, then shrinks into the phone; after that the
   page sits on night. One painted landscape behind the whole page (Thomas Cole, The Oxbow),
   which you travel through as you scroll, with cut-out figures from famous works standing in it.
   Text sits on quiet paper panels. Standalone: the other pages use styles.css. */

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-roman.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* The phone mock's interface type (.pt-screen), self-hosted like the serif: the site's CSP allows
   fonts from nowhere else, and a Google Fonts link would have failed silently, leaving the mock in
   Arial. Google Fonts' latin subset of the variable face, SIL Open Font License (OFL-LibreFranklin.txt).
   The latin subset is enough: the only other script in the mock is the Arabic of the language switcher,
   which Libre Franklin has no glyphs for in any subset. The file carries the whole 100-900 axis, so the
   range is declared in full rather than clamped to the three weights used today. */
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/LibreFranklin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #0c1a2b;
  --paper: #f7f5f1;
  --panel: rgba(247, 245, 241, 0.95);
  --ink: #101418;
  --muted: #58606b;
  --on-night: #f3f0e8;
  --on-night-soft: rgba(243, 240, 232, 0.72);
  --patina-deep: #2e6a5d;
  --patina: #86c2b0; /* the brand's light patina, for the accents that sit on night */
  --rule: rgba(16, 20, 24, 0.14);
  --rule-dark: rgba(243, 240, 232, 0.2);
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --width: 1240px;
}

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

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

/* Nothing off-screen may widen the page on a phone. clip, not hidden, so the sticky scenes keep
   working. */
html,
body {
  overflow-x: clip;
}

.pricing {
  overflow-x: clip;
}

body {
  margin: 0;
  background: #3b4a3a; /* the landscape's mid-tone, shown while the painting loads */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

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

p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The landscape: fixed behind everything, taller than the screen so there's room to travel. */

.landscape {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.landscape img {
  width: 100%;
  height: 165vh;
  height: 165lvh;
  max-width: none;
  object-fit: cover;
  object-position: 58% 0;
  will-change: transform;
}

/* Masthead: a paper strip */

.masthead-band {
  background: var(--panel);
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.wordmark img {
  height: 24px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500; /* medium, like the button's label: at regular weight the links read thin beside it */
}

.nav a:not(.button) {
  text-decoration: none;
}

.nav a:not(.button):hover {
  text-decoration: underline;
}

/* The one accent: the demo button. Square corners. */

.button {
  display: inline-block;
  padding: 10px 18px;
  background: var(--patina-deep);
  color: var(--on-night);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.button.large {
  padding: 15px 24px;
  font-size: 16px;
}

.button:hover {
  background: #245448;
}

/* Scenes: a panel of words and a figure standing in the landscape */

.scene {
  padding: clamp(56px, 12vh, 140px) 0;
}

.scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}

.scene-grid.flip {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
}

.panel {
  background: var(--panel);
  padding: clamp(28px, 4vw, 56px);
  max-width: 640px;
}

.panel.wide {
  max-width: none;
}

.panel.night {
  background: rgba(12, 26, 43, 0.92);
  color: var(--on-night);
}

.panel > p:not(.label) + p,
.panel h2 + p {
  margin-top: 18px;
}

.label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
}

h1 {
  margin: 20px 0 0;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.012em;
}

h2 {
  margin: 14px 0 0;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
}

h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.lede {
  margin-top: 26px;
  font-size: clamp(17px, 1.4vw, 19px);
  color: #2e343b;
}

.body {
  margin-top: 18px;
  max-width: 40rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

.link {
  font-family: var(--serif);
  font-size: 20px;
}

/* Cut-out figures, full colour, standing in the painting */

.cutout {
  margin: 0;
  justify-self: center;
  will-change: transform;
}

.cutout img {
  height: min(76vh, 720px);
  width: auto;
}


/* The hero: one line, written on the painting */

.opening {
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex;
  align-items: center;
  text-align: center;
}

.catch {
  margin: 0 auto;
  max-width: 15ch;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--on-night);
}

/* The guide in a phone: MACAAL's entry page, scrolled, then the first stop. Screens follow Yassine's
   "Guide screens" canvas (Libre Franklin, MACAAL's white and ink). home.js drives it from the scroll. */

.phone-tour {
  height: 420vh;
}

.pt-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pt-phone {
  --s: 0.78;
  position: relative;
  flex: none;
  width: 406px;
  height: 860px;
  padding: 8px;
  background: #101418;
  border-radius: 54px;
  transform: scale(var(--s));
}

.pt-screen {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border-radius: 46px;
  background: #fff;
  font-family: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;
  color: #101010;
}

.pt-screen p {
  margin: 0;
}

.pt-entry,
.pt-stop {
  position: absolute;
  inset: 0 0 auto;
  background: #fff;
}

.pt-stop {
  height: 100%;
  transform: translateX(100%);
}

.pt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 56px 20px 16px;
}

.pt-bar img {
  height: 22px;
  width: auto;
}

.pt-langs {
  display: flex;
  gap: 14px;
  font-size: 14px;
  color: #676b70;
}

.pt-langs .is-on {
  color: #101010;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pt-cover {
  width: 390px;
  height: 292px;
  object-fit: cover;
  display: block;
}

.pt-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.pt-credit {
  font-size: 12px;
  color: #676b70;
}

.pt-kicker {
  margin-top: 12px !important;
  font-size: 14px;
  color: #676b70;
}

.pt-title {
  margin-top: 6px !important;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.pt-desc {
  margin-top: 6px !important;
  font-size: 17px;
  line-height: 1.6;
}

.pt-muted {
  font-size: 14px;
  color: #676b70;
}

.pt-start {
  position: relative;
  margin-top: 16px !important;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101010;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}

/* The finger's tap on "Start the tour" */
.pt-tap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: scale(0.4);
}

.pt-hint {
  margin-top: 10px !important;
  font-size: 14px;
  line-height: 1.5;
  color: #676b70;
}

.pt-h2 {
  margin-top: 40px !important;
  font-size: 20px;
  font-weight: 600;
}

.pt-route {
  margin-top: 12px;
  border-top: 1px solid #101010;
}

.pt-row {
  display: grid;
  grid-template-columns: 24px 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #d9dbd8;
}

.pt-row b {
  font-size: 15px;
}

.pt-row img,
.pt-row i {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: top;
  background: #d9dbd8;
}

.pt-row-title {
  font-size: 16px;
  font-weight: 600;
}

.pt-row-sub {
  font-size: 14px;
  color: #676b70;
}

.pt-contour {
  padding: 14px 0 10px 38px;
  border-bottom: 1px solid #d9dbd8;
  font-size: 16px;
  font-weight: 600;
}

.pt-contour span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #676b70;
}

.pt-made {
  margin-top: 40px !important;
  padding-bottom: 28px;
  font-size: 12px;
  color: #676b70;
}

.pt-stop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 64px 20px 22px;
  font-size: 14px;
  color: #676b70;
}

.pt-stop-bar svg {
  color: #101010;
}

.pt-stop-img {
  width: 390px;
  height: 400px;
  object-fit: cover;
  display: block;
}

.pt-artist {
  font-size: 17px;
  font-weight: 600;
}

.pt-stop .pt-title {
  font-size: 26px;
  margin-top: 4px !important;
}

.pt-progress {
  margin-top: 24px;
  height: 4px;
  background: #d9dbd8;
}

.pt-progress span {
  display: block;
  width: 8%;
  height: 100%;
  background: #101010;
}

.pt-times {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 13px;
  color: #676b70;
}

.pt-controls {
  display: grid;
  grid-template-columns: 44px 48px 1fr 48px 44px;
  gap: 8px;
  align-items: center;
  justify-items: center;
  margin-top: 14px;
}

.pt-skip {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid #101010;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.pt-play {
  width: 72px;
  height: 72px;
  background: #101010;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-links {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 14px;
  color: #676b70;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The section's title, written on the painting like the hero */
.pt-heading {
  position: absolute;
  top: clamp(20px, 5vh, 56px);
  will-change: transform;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05;
  color: var(--on-night);
}

/* The words around the phone */

.pt-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pt-label {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.25;
  color: var(--on-night);
  width: max-content;
  max-width: min(13em, 26vw);
}

/* Hairlines from each sentence to the part of the phone it describes, like a catalogue's annotations */
.pt-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Arrows: a mid-grey curve with an open arrowhead, readable on the night ground and on the screen */
.pt-arrow,
.pt-head {
  fill: none;
  stroke: #c9cdd1;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The route, outlined on the phone while its sentence is up: patina, the one accent of this view */
.pt-hl {
  fill: none;
  stroke: var(--patina-deep);
  stroke-width: 2.5;
  opacity: 0;
}

/* The QR code under its sentence: small, on a plain white square */
.pt-qr {
  display: block;
  width: 68px;
  margin-top: 16px;
  padding: 6px;
  background: #fff;
}

.pt-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.pt-qr-scan {
  fill: var(--patina-deep);
}

/* Set by home.js once it drives the scene; without it the labels simply show */
.phone-tour.is-live .pt-label {
  opacity: 0;
  will-change: transform, opacity;
}

/* After the phone: three slides, one per sentence. The section is tall so its stage stays on screen
   while you scroll; home.js moves the track up, pausing on each slide. */

.steps {
  height: 360vh;
}

.steps-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* The carousel's dots, on the right side: one per slide, the current one filled */
.steps-dots {
  position: absolute;
  right: clamp(12px, 2.5vw, 36px);
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(-50%);
}

.steps-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1.5px solid var(--on-night);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.steps-dots button.is-on {
  background: var(--on-night);
}

.steps-dots button:focus-visible {
  outline: 2px solid var(--on-night);
  outline-offset: 3px;
}

/* The slides move inside a window that starts under the title, so they never pass over it */
.steps-window {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(80px, 13vh, 136px);
  bottom: 0;
  overflow: hidden;
}

.steps-window .steps-track {
  height: 100%;
}

.steps-window .slide {
  flex: 0 0 100%;
  height: 100%;
}

/* "What We Do" is placed by home.js just above the phone */
.phone-tour.is-live .pt-stage > .pt-heading {
  top: 0;
}

.steps-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}

.slide {
  flex: none;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  padding: 0 var(--gutter);
  max-width: none;
}

.slide-text {
  margin: 0;
  justify-self: end;
  max-width: 15em;
  padding: clamp(24px, 3vw, 40px);
  background: var(--panel);
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.12;
}

.slide-number {
  display: block;
  margin-bottom: 14px;
  font-style: italic;
  font-size: 20px;
  color: var(--muted);
}

.slide-art {
  position: relative;
  height: min(70vh, 640px);
  width: 100%;
  max-width: 720px;
}

.slide-art img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  border: 1px solid rgba(16, 20, 24, 0.12);
}

/* 1. Your knowledge: a collage of what a venue already has */

.c-map {
  width: 74%;
  left: 0;
  top: 4%;
  transform: rotate(-3deg);
}

.c-painting {
  width: 40%;
  right: 4%;
  top: 0;
  transform: rotate(2.5deg);
}

.c-portrait {
  width: 22%;
  left: 8%;
  bottom: 2%;
  transform: rotate(-1.5deg);
}

.c-page {
  position: absolute;
  right: 0;
  bottom: 6%;
  width: 46%;
  padding: 20px 22px;
  background: #fbfaf6;
  border: 1px solid rgba(16, 20, 24, 0.12);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
  transform: rotate(1deg);
}

.c-page p {
  margin: 0;
}

.c-page-title {
  margin-bottom: 8px !important;
  font-size: 20px;
}

.c-note {
  position: absolute;
  left: 30%;
  top: 58%;
  margin: 0;
  padding: 12px 16px;
  background: #f1e7c9;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  transform: rotate(-4deg);
}

/* 2. Our AI drafts: Studio, and the guide on a visitor's phone */

.s-studio {
  width: 88%;
  left: 0;
  top: 8%;
}

.s-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  aspect-ratio: 9 / 19;
  padding: 8px;
  background: #101418;
  border-radius: 30px;
}

.s-phone-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 23px;
  background: #f5f6f4;
}

.s-phone-screen img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border: 0;
}

/* 3. You keep control: a line edited in Studio */

.edit {
  display: flex;
  align-items: center;
}

.edit {
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.e-shot {
  position: static !important;
  width: 100%;
}

/* A close-up of the edit, readable at a glance: the AI's sentence struck through, the team's in its place */
.e-zoom {
  width: 88%;
  margin-top: -12px;
  margin-left: 8%;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid rgba(16, 20, 24, 0.14);
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.35;
}

.e-zoom p {
  margin: 0;
}

.e-label {
  margin-bottom: 10px !important;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--patina-deep);
}

.e-zoom del {
  color: var(--muted);
  text-decoration-thickness: 1.5px;
}

.e-zoom ins {
  text-decoration: none;
  background: rgba(46, 106, 93, 0.12);
}

/* The promise */

.statement {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.012em;
}

/* How it works: numbered, because the order is real */

.rooms {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.room {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 0 32px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--rule);
}

.room:last-child {
  border-bottom: 1px solid var(--rule);
}

.room-number {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--muted);
}

.room h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
}

.note {
  margin-top: 32px;
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.25;
}

/* Grids */

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

.grid > div {
  padding: 22px 0 26px;
  border-top: 1px solid var(--rule);
}

.grid p {
  margin-top: 8px;
}

.price {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
}

.terms {
  margin-top: 4px !important;
  font-size: 14px;
  color: var(--muted);
}

.languages {
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.35;
}

/* Pricing, like the sections above: the title on the painting, the plans on paper panels */

.pricing {
  padding: clamp(80px, 14vh, 160px) 0 clamp(56px, 9vh, 100px);
}

.section-title {
  margin: 0;
  text-align: center;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05;
  color: var(--on-night);
}

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
  max-width: 920px;
  margin: clamp(32px, 6vh, 56px) auto 0;
}

.plans.one {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
}

.plans.one .plan .price {
  white-space: normal;
}

.plan {
  background: var(--panel);
  padding: clamp(24px, 3vw, 40px);
}

.plan h3 {
  font-size: 22px;
  color: var(--muted);
}

.plan .price {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.3vw, 32px);
  line-height: 1.05;
  white-space: nowrap;
}

.plan .terms {
  margin-top: 8px !important;
}

.plan p:last-child {
  margin-top: 18px;
}

.plans-more {
  margin: clamp(24px, 4vh, 40px) 0 0;
  text-align: center;
}

/* A quiet button: paper on the painting, so the demo button stays the one accent */
.button-paper {
  display: inline-block;
  padding: 15px 28px;
  background: var(--panel);
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
}

.button-paper:hover {
  background: #fff;
}

/* Questions: a paper section between the night ones, the list ruled like the steps on a phone */
.faq-section {
  padding: clamp(80px, 14vh, 160px) 0 clamp(72px, 12vh, 140px);
  background: var(--paper);
  color: var(--ink);
}

.faq-section .section-title {
  color: var(--ink);
}

.faq-section .faq {
  max-width: 880px;
  margin: clamp(32px, 6vh, 56px) auto 0;
  border-bottom: 1px solid var(--rule);
}

.faq-section .faq details:first-child {
  border-top: 0;
}

/* Questions, collapsed */

.faq {
  margin-top: 28px;
  border-bottom: 1px solid var(--rule);
}

.faq details {
  border-top: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* A thin line glyph in the text colour: plus when closed, minus when open */
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.45em;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
}

.faq details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat;
}

.faq details p {
  max-width: 42rem;
  padding-bottom: 24px;
}

/* Contact and footer: night, solid, where the journey ends */

.contact {
  background: var(--night);
  color: var(--on-night);
  padding-top: clamp(80px, 11vw, 136px);
}

.contact .label {
  color: var(--on-night-soft);
}

.contact h2 {
  font-size: clamp(36px, 5vw, 60px);
}

.contact .body {
  color: var(--on-night-soft);
}

.email {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
}

/* The ask: the Thinker, cut out, beside the last question */
.ask {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.ask-figure {
  justify-self: end;
  width: auto;
  height: min(60vh, 520px);
}

.ask-text h2 {
  margin: 0;
  max-width: none;
}

.ask-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 32px;
}

.ask-actions .email {
  margin-top: 0;
  font-size: clamp(20px, 1.8vw, 26px);
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(80px, 11vw, 136px);
  padding: 24px 0 32px;
  border-top: 1px solid var(--rule-dark);
  font-size: 13px;
  color: var(--on-night-soft);
}

.footer p:first-child {
  max-width: 60ch;
}

/* Phone */

/* The QR code's <defs> svg, drawn once and used twice: out of the flow (an inline style can't do it, the CSP
   allows none) so its empty line box leaves no band under the masthead. */
.qr-defs {
  position: absolute;
}

@media (max-width: 860px) {
  .nav a:not(.button) {
    display: none;
  }

  .scene-grid,
  .scene-grid.flip {
    grid-template-columns: minmax(0, 1fr);
  }

  .scene-grid .cutout {
    order: -1;
  }

  /* On a phone the headline comes first; Mona Lisa follows */
  .opening .scene-grid .cutout {
    order: 0;
  }

  .cutout img {
    height: 46vh;
  }




  .room {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 10px 14px;
  }

  .room p {
    grid-column: 2;
  }

  .grid,
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer {
    flex-direction: column;
  }

  /* On a phone the labels sit above the phone, one at a time */
  .pt-label {
    font-size: 20px;
    max-width: 80vw;
    text-align: center;
  }

  /* On a phone the caption sits under the phone; the QR code sits beside its sentence */
  .pt-label-qr {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
  }

  .pt-qr {
    flex: none;
    width: 52px;
    margin-top: 0;
    padding: 4px;
  }

  /* On a phone the carousel dots sit in the margin, clear of the illustrations */
  .steps-dots {
    right: 6px;
    gap: 10px;
  }

  .steps-dots button {
    width: 9px;
    height: 9px;
  }

  .steps .slide {
    padding-right: 26px;
  }

  /* On a phone each slide stacks: the sentence, then its illustration */
  .slide {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 20px;
  }

  .slide-text {
    justify-self: start;
    font-size: 22px;
  }

  .slide-art {
    height: 46vh;
  }

  .c-page {
    font-size: 13px;
    padding: 12px;
  }

  .c-page-title {
    font-size: 14px;
  }

  .c-note {
    font-size: 13px;
    left: 4%;
    top: auto;
    bottom: 34%;
    padding: 8px 10px;
  }

  .c-page {
    width: 54%;
  }

  .e-zoom {
    width: 100%;
    margin-left: 0;
    padding: 16px 18px;
    font-size: 17px;
  }

}

/* Draft 2: the opening */

body {
  background: var(--night);
}

.opening-tour {
  height: 560vh;
}

.lens {
  position: absolute;
  left: 0;
  top: 0;
  /* The whole stage until home.js sizes it: the first paint is then the opening screen as the script
     draws it at the top of the page */
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
  will-change: left, top, width, height;
}

.lens img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 58% 40%;
  transition: opacity 0.6s ease; /* home.js fades it in when it arrives after the page has painted */
}

.opening-tour .catch {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%; /* centred on the band of storm clouds; home.js keeps the -50% when it moves it */
  /* Over the bright valley the paper-white line needs help: a soft night shadow keeps it readable
     (WCAG 3:1 for large text, checked against the painting behind it). */
  text-shadow: 0 1px 3px rgba(12, 26, 43, 0.75), 0 0 10px rgba(12, 26, 43, 0.6), 0 0 22px rgba(12, 26, 43, 0.55), 0 0 44px rgba(12, 26, 43, 0.4);
  transform: translateY(-50%);
  z-index: 6; /* above the arrow layer (.pt-lines), which never crosses the headline */
  margin: 0 auto;
  max-width: 15ch;
  text-align: center;
  /* Its entrance, from the first paint: set here rather than by home.js, which on a first visit arrives
     after the headline has already been painted and would make it blink */
  animation: catch-in 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.outline {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  box-sizing: border-box;
  border: 1.5px solid rgba(243, 240, 232, 0.85);
  pointer-events: none;
}

.opening-tour .pt-phone {
  z-index: 2;
}

.opening-tour .pt-heading {
  z-index: 6;
}

/* Until home.js runs, the opening is the landscape and the headline alone, as the script draws it at the
   top of the page. On a first visit the page paints before the script and the painting have arrived, and
   the phone, "What we do" and the captions must not show through meanwhile (home.js sets their opacity
   inline as you scroll). Only for visitors the script will animate: under reduced motion it never drives
   the scene, and the heading above the landscape stays as it was. */
@media (prefers-reduced-motion: no-preference) {
  .opening-tour .pt-phone,
  .opening-tour .pt-heading,
  .opening-tour .pt-label {
    opacity: 0;
  }
}

/* Phone: the Thinker above the question (after the .ask rules, so it wins) */
@media (max-width: 860px) {
  .ask {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .ask-figure {
    justify-self: start;
    height: 34vh;
  }
}

/* "What we do" on a phone: the title, then cards you swipe sideways, the next one peeking in (after
   Revolut's mobile page). Each card is a photo with one white chip from the guide on it, its sentence
   underneath. Wider screens keep the phone above and never show this. */
.wwd {
  display: none;
}

@media (max-width: 860px) {
  /* The phone, its labels and arrows stay off; the opening is the landscape and the headline, one screen */
  .opening-tour {
    height: auto;
  }

  .opening-tour .pt-stage {
    position: relative;
    height: calc(100svh - 76px);
    min-height: 480px;
  }

  .opening-tour .lens {
    inset: 0;
    width: auto;
    height: auto;
  }

  .opening-tour .outline,
  .opening-tour .pt-heading,
  .opening-tour .pt-lines,
  .opening-tour .pt-labels,
  .opening-tour .pt-phone {
    display: none;
  }

  .wwd {
    display: block;
    padding: 64px 0 72px;
    background: var(--night);
    color: var(--on-night);
  }

  .wwd-title {
    margin: 0 16px 28px;
    font-size: 46px;
    line-height: 1.02;
    letter-spacing: -0.01em;
  }

  .wwd-track {
    display: flex;
    gap: 12px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .wwd-track::-webkit-scrollbar {
    display: none;
  }

  .wwd-card {
    flex: none;
    width: calc(100vw - 72px);
    max-width: 420px;
    margin: 0;
    scroll-snap-align: start;
  }

  .wwd-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 24px;
    background: #1b2a3c;
  }

  .wwd-media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wwd-media > img.wwd-right {
    object-position: 85% 50%;
  }

  .wwd-card figcaption {
    margin-top: 18px;
    font-family: var(--serif);
    font-size: 21px;
    line-height: 1.3;
    color: var(--on-night-soft);
  }

  /* The chip: a piece of the guide, in its own type (Libre Franklin, white and ink) */
  .wwd-chip {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(12, 26, 43, 0.25);
    font-family: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;
    color: #101010;
  }

  .wwd-chip p {
    margin: 0;
  }

  .wwd-chip > img {
    display: block;
    height: 26px;
    width: auto;
  }

  .wwd-langs {
    gap: 22px;
    font-size: 17px;
    color: #676b70;
  }

  .wwd-langs .is-on {
    color: #101010;
    text-decoration: underline;
    text-underline-offset: 5px;
  }

  .wwd-qr {
    justify-content: flex-start;
    gap: 16px;
    font-size: 16px;
    font-weight: 600;
  }

  .wwd-qr svg {
    flex: none;
    width: 64px;
    height: 64px;
  }

  .wwd-route {
    display: block;
    padding: 4px 16px;
  }

  .wwd-route .pt-row {
    grid-template-columns: 16px 48px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
  }

  .wwd-route .pt-row:last-child {
    border-bottom: 0;
  }

  .wwd-route .pt-row img {
    width: 48px;
    height: 48px;
  }

  .wwd-route .pt-row-title {
    font-size: 15px;
  }

  .wwd-route .pt-row-sub {
    font-size: 13px;
  }

  .wwd-route .pt-contour {
    padding: 10px 0 8px 28px;
    font-size: 15px;
  }

  /* Apple's controls: the dots in a pill, the current one stretched and filling as its time runs
     (--p, 0 to 1, set by home.js), and a round pause/play button beside it */
  .wwd-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
  }

  .wwd-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    background: rgba(243, 240, 232, 0.12);
  }

  .wwd-dots button {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    background: rgba(243, 240, 232, 0.4);
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .wwd-dots button.is-on {
    width: 36px;
  }

  .wwd-dots button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--on-night);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
  }

  .wwd-dots button:focus-visible,
  .wwd-play:focus-visible {
    outline: 2px solid var(--on-night);
    outline-offset: 3px;
  }

  .wwd-play {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(243, 240, 232, 0.12);
    color: var(--on-night);
    fill: currentColor;
    cursor: pointer;
  }

  .wwd-play .i-play,
  .wwd-play.is-paused .i-pause {
    display: none;
  }

  .wwd-play.is-paused .i-play {
    display: block;
  }

  /* The QR code and the route stand on their own, larger, on paper */
  .wwd-plain {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
  }

  .wwd-plain .wwd-chip {
    position: static;
    box-shadow: none;
    background: none;
  }

  .wwd-plain.wwd-qr,
  .wwd-plain .wwd-qr {
    flex-direction: column;
    gap: 20px;
    font-size: 18px;
  }

  .wwd-plain .wwd-qr svg {
    width: 150px;
    height: 150px;
  }

  .wwd-plain .wwd-route {
    width: 100%;
    padding: 0 20px;
  }

  .wwd-plain .wwd-route .pt-row {
    grid-template-columns: 18px 64px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
  }

  .wwd-plain .wwd-route .pt-row img {
    width: 64px;
    height: 64px;
  }

  .wwd-plain .wwd-route .pt-row-title {
    font-size: 16px;
  }

  .wwd-plain .wwd-route .pt-contour {
    padding: 14px 0 12px 32px;
    font-size: 16px;
  }

}

/* Phone type scale, three clear levels (kept last so it wins over the section rules above):
   1. the hero line, biggest, like Revolut's mobile headline;
   2. section titles, a step down;
   3. the sentences that go with them, a step down again, in the softer paper tone. */
@media (max-width: 860px) {
  .opening-tour .catch {
    font-size: 54px;
    line-height: 1.02;
    max-width: none;
    padding: 0 16px;
    text-align: left;
  }

  .pt-heading,
  .section-title,
  .wwd-title,
  .ask-text h2 {
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: -0.01em;
  }

  /* Titles sit on the left edge, like the hero, as on Revolut's mobile page */
  .section-title,
  .steps-heading {
    padding: 0 16px;
    text-align: left;
  }

  .faq-section .section-title {
    padding: 0;
  }

  /* The steps title takes two lines at this size: the slides start under it */
  .steps-window {
    top: 132px;
  }

  /* 3. The sentences: 22px serif in the full paper tone. Garamond's small lowercase reads like ~18px
     sans, so this lands next to Revolut's text; faded, it read as a caption. */
  .wwd-card figcaption,
  .contact .body {
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.3;
    color: var(--on-night);
  }

  .faq summary {
    font-size: 22px;
  }

  /* 4. Buttons and small print */
  .button.large,
  .button-paper {
    font-size: 17px;
  }

  .pt-label {
    font-size: 21px;
    line-height: 1.3;
    color: var(--on-night-soft);
    max-width: calc(100vw - 32px);
  }

  .slide-text {
    font-size: 22px;
  }


  /* On a phone the price may take two lines rather than run out of its card */
  .plan .price {
    font-size: clamp(28px, 8.7vw, 34px);
    line-height: 1.1;
    white-space: normal;
  }

  .plan .price .keep {
    white-space: nowrap;
  }

  body {
    font-size: 17px;
  }
}

/* "How we make your guide": a light section between the night ones, so the page changes as you go
 down. The three steps read like gallery labels (option C of the canvas): a thin ink rule, the number
 in patina beside the sentence, and the picture in a white frame, square, like a hung work. Step 3,
 the team's control, takes a thicker patina rule. Side by side on desktop, stacked on a phone; the
 page scrolls normally at every width. (Placed after the older slide rules so it wins.) */
.steps {
  height: auto;
  padding: 72px 16px 80px;
  background: var(--paper);
  color: var(--ink);
}

.steps .steps-stage {
  position: static;
  height: auto;
  overflow: visible;
}

.steps .steps-heading {
  position: static;
  margin: 0 0 40px;
  padding: 0;
  color: var(--ink);
  opacity: 1 !important;
  transform: none !important;
}

.steps .steps-dots {
  display: none;
}

.steps .steps-window {
  position: static;
  overflow: visible;
}

.steps .steps-track {
  height: auto;
  gap: 40px;
  transform: none !important;
}

.steps .steps-window .slide {
  display: block;
  height: auto;
  padding: 18px 0 0;
  border-top: 1px solid var(--ink);
}

.steps .steps-window .slide:last-child {
  border-top: 3px solid var(--patina-deep);
}

.steps .slide-text {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  max-width: none;
  padding: 0;
  background: none;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.3;
}

.steps .slide-number {
  margin: 0;
  font-style: normal;
  font-size: 34px;
  line-height: 1;
  color: var(--patina-deep);
}

/* The picture, framed: a white mat, and inside it the night of the sections around, so the white
   screenshots and paper notes stand out like works on a dark gallery wall */
.steps .slide-art {
  box-sizing: border-box;
  height: 224px;
  max-width: none;
  margin-top: 18px;
  overflow: hidden;
  border: 12px solid #fff;
  background: var(--night);
}

.steps .slide-art img {
  border: 0;
}

.steps .c-map {
  width: 60%;
  left: 4%;
  top: 12px;
}

.steps .c-painting {
  width: 38%;
  right: 4%;
  top: 8px;
}

.steps .c-portrait {
  display: none;
}

.steps .c-page {
  top: 126px;
  bottom: auto;
  right: 3%;
  width: 48%;
  padding: 10px 12px;
  font-size: 13px;
}

.steps .c-page-title {
  font-size: 13px;
}

.steps .c-note {
  left: 4%;
  top: 84px;
  bottom: auto;
  font-size: 13px;
}

.steps .screens {
  height: 244px;
}

.steps .s-studio {
  width: 94%;
  left: 10px;
  top: 12px;
}

.steps .s-phone {
  top: 34px;
  bottom: auto;
  right: 12px;
  width: 36%;
  padding: 6px;
  border-radius: 22px;
}

.steps .s-phone-screen {
  border-radius: 17px;
}

.steps .edit {
  display: block;
  height: auto;
  padding: 12px;
}

/* The phone's black edge, kept apart from the night behind it */
.steps .s-phone {
  outline: 1px solid rgba(243, 240, 232, 0.3);
}

.steps .e-zoom {
  width: 100%;
  margin: 6px 0 0;
  padding: 14px 16px;
  border: 0;
  background: var(--paper);
  font-size: 18px;
}

.steps .steps-stage {
  max-width: var(--width);
  margin: 0 auto;
}

/* The art pieces sit in their frames at their own sizes: keep their height fixed at any width */
@media (min-width: 861px) {
  .steps {
    padding: clamp(96px, 14vh, 160px) var(--gutter);
  }

  .steps .steps-heading {
    margin-bottom: clamp(40px, 6vh, 64px);
    text-align: center;
  }

  .steps .steps-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 48px);
  }

  /* Each label's frame sits at the foot of its column, so the three line up whatever the sentence */
  .steps .steps-window .slide {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* The three frames at one height, so they hang level */
  .steps .slide-art,
  .steps .screens,
  .steps .edit {
    height: 252px;
    overflow: hidden;
  }

  .steps .slide-text {
    font-size: clamp(20px, 1.6vw, 24px);
  }

  .steps .slide-art {
    margin-top: auto;
  }

  .steps .slide-text {
    margin-bottom: 28px;
  }
}

/* Text comes in as it reaches the screen, after Apple's product pages: it fades in while rising a
   little, blocks that arrive together one after another. home.js adds .reveal, then .is-in. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@keyframes catch-in {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .opening-tour .catch {
    animation: none;
  }
}

/* The menu on a phone: a button of two lines beside "Get a demo" (they cross when open), and the links
   in a panel under the header, in the section titles' serif */
.menu-toggle,
.phone-menu {
  display: none;
}

@media (max-width: 860px) {
  .nav {
    gap: 8px;
  }

  .masthead {
    gap: 12px;
  }

  .nav .button {
    white-space: nowrap;
  }

  .wordmark img {
    width: min(160px, 40vw);
    height: auto;
  }

  .menu-toggle {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }

  .menu-toggle span {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .menu-toggle span:first-child {
    top: 18px;
  }

  .menu-toggle span:last-child {
    top: 25px;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .menu-toggle:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -4px;
  }

  .phone-menu:not([hidden]) {
    display: block;
    padding: 4px 16px 20px;
    border-top: 1px solid var(--rule);
  }

  .phone-menu a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 28px;
    line-height: 1.1;
    text-decoration: none;
  }
}

/* What you get (2026-10-13): six lines on night, ruled like wall labels, between the steps and the
   pricing, and the way to the Features page */
.offer {
  padding: clamp(80px, 14vh, 160px) 0 0;
}

.offer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  max-width: 880px;
  margin: clamp(32px, 6vh, 56px) auto 0;
}

.offer-list p {
  margin: 0;
  padding: 14px 0 18px;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3;
  color: var(--on-night);
}

/* The page you're on, underlined in both menus (Features shares this header) */
.nav a[aria-current="page"],
.phone-menu a[aria-current="page"] {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .offer-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer-list p {
    font-size: 22px;
  }
}

/* One ground on desktop (2026-10-14): the paper sections ("How we make your guide", the questions, and
   the features on the Features page) keep their paper on a phone, where the page changes colour as you
   scroll; on a wider screen the whole page sits on night, like the rest of the site. The pictures keep
   their white mats and the notes and cards their paper: works and labels on a dark gallery wall. */
@media (min-width: 861px) {
  .steps,
  .faq-section {
    background: var(--night);
    color: var(--on-night);
  }

  .steps .steps-heading,
  .steps .slide-text,
  .faq-section .section-title {
    color: var(--on-night);
  }

  .steps .slide-number {
    color: var(--patina);
  }

  .steps .steps-window .slide {
    border-top-color: var(--on-night-soft);
  }

  .steps .steps-window .slide:last-child {
    border-top-color: var(--patina);
  }

  /* The paper cards inside the frames inherit the section's colour: ink, whatever the ground */
  .steps .c-page,
  .steps .c-note,
  .steps .e-zoom {
    color: var(--ink);
  }

  .faq-section .faq,
  .faq-section .faq details {
    border-color: var(--rule-dark);
  }
}

/* Hear one stop (2026-10-14): one stop of MACAAL's guide in its three languages, played from the page. The
   work hangs in a white mat on the night wall, its label on paper beside it: the language row, the player and
   the words, lit sentence by sentence as the voice reaches them (home.js). The two take equal columns, so a
   landscape photograph still holds its own next to the label; on a phone the work sits above the label. */
.listen {
  padding: clamp(80px, 14vh, 160px) 0;
  background: var(--night);
  color: var(--on-night);
}

/* The one line under the title, naming the museum */
.ls-intro {
  max-width: 34em;
  margin: 18px auto 0;
  text-align: center;
  color: var(--on-night-soft);
}

.ls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  max-width: 1040px;
  margin: clamp(32px, 6vh, 56px) auto 0;
}

/* The work stays in view while the label's text runs on below it */
.ls-work {
  position: sticky;
  top: 24px;
  margin: 0;
}

.ls-work img {
  width: 100%;
  height: auto;
  border: 12px solid #fff;
  background: var(--night);
}

.ls-work figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--on-night-soft);
}

.ls-label {
  padding: 28px 32px 36px;
  background: var(--paper);
  color: var(--ink);
}

.ls-kicker {
  font-size: 14px;
  color: var(--muted);
}

.ls-title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
}

.ls-artist {
  margin-top: 4px;
}

/* The language row, as on the guide's own screens: the current one underlined */
.ls-langs {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.ls-langs button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
}

/* Arabic letters sit small at the Latin size */
.ls-langs button[lang="ar"] {
  font-size: 18px;
}

.ls-langs button[aria-pressed="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.ls-langs button:focus-visible,
.ls-play:focus-visible,
.ls-bar:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.ls-player {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 20px;
}

.ls-play {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  fill: currentColor;
  cursor: pointer;
}

.ls-play .i-pause,
.ls-play.is-playing .i-play {
  display: none;
}

.ls-play.is-playing .i-pause {
  display: block;
}

/* The bar is thin; its hit area is not */
.ls-seek {
  padding: 10px 0;
  cursor: pointer;
}

.ls-bar {
  height: 4px;
  background: rgba(16, 20, 24, 0.18);
}

.ls-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ink);
}

.ls-times {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}

.ls-text {
  margin-top: 20px;
}

.ls-text p {
  margin: 0 0 14px;
  line-height: 1.6;
}

/* The sentence being spoken, in a patina wash that follows it across the lines */
.ls-text .is-now {
  background: rgba(134, 194, 176, 0.4);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ls-text[lang="ar"] p {
  font-size: 19px;
  line-height: 1.9;
}

/* The paragraphs still to come, and the link that opens them all */
.ls-text p[hidden] {
  display: none;
}

.ls-unfold {
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.ls-unfold:hover {
  color: var(--ink);
}

.ls-unfold:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* A paragraph unfolding as the voice reaches it */
@keyframes ls-unfold {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ls-text p.is-new {
    animation: ls-unfold 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }
}

@media (max-width: 860px) {
  .listen .section-title {
    padding: 0;
  }

  .ls {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 28px;
  }

  .ls-work {
    position: static;
  }

  .ls-label {
    padding: 22px 16px 28px;
  }

  .ls-title {
    font-size: 34px;
  }
}