/* Cyanopica — site v4, «Сцены». Real works from the app float over the page at different depths and turn as
   you scroll. The light changes with the scene (day, night, morning) as a pure function of the scroll position,
   and contact shadows follow one slow light. JS writes --page, --bar, --ink-bar, --night, --lx and transforms. */

/* Scripts Geologica does not cover use the reader's system fonts (no large font downloads) */
html:lang(ar) { --font: "Cyanopica Text", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", system-ui, sans-serif; }
html:lang(hi) { --font: "Cyanopica Text", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", system-ui, sans-serif; }
html:lang(zh-Hans) { --font: "Cyanopica Text", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
:root {
  --page: #F6F5F1;
  --day: #F6F5F1;
  --ink: #16243A;
  --graphite: #5B6878;
  --fog: #DAD8D1;
  --azure: #2C6BB3;
  --azure-deep: #22568F;
  --white: #FFFFFF;
  --night-ink: #EEF0F3;
  --night-graphite: #A2ABB8;
  --lx: 0;

  --font: "Cyanopica Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(20px, 4.4vw, 64px);
  --max: 1320px;
  --r: 20px;
  --r-small: 12px;
  --lvh: 1vh; --svh: 1vh;
}
@supports (height: 1lvh) { :root { --lvh: 1lvh; --svh: 1svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 400 17px/1.55 var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
p, figure, h1, h2, h3, ul, ol { margin: 0; }
h1, h2, h3 { font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Type */
.title { font-weight: 300; font-size: clamp(34px, min(4.8vw, 9vh), 72px); line-height: 1.03; letter-spacing: -.022em; }
.lead { margin-top: 18px; color: var(--graphite); font-size: 18px; max-width: 42ch; }
.head { margin-bottom: clamp(40px, 5vw, 72px); }
.head--row { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; flex-wrap: wrap; }
figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.45; color: var(--graphite); max-width: 52ch; }
figcaption strong { color: var(--ink); }
.link { color: var(--azure); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { color: var(--azure-deep); text-decoration-thickness: 2px; }

/* Buttons say what happens */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px;
  border-radius: 999px; background: var(--azure); color: var(--white); text-decoration: none;
  font: 500 16px/1 var(--font); white-space: nowrap; transition: background-color .2s ease;
  box-shadow: calc(var(--lx) * -8px) 12px 26px -12px rgba(44, 107, 179, .6); }
.btn:hover { background: var(--azure-deep); }
.btn--quiet { background: transparent; color: var(--graphite); box-shadow: inset 0 0 0 1px var(--fog); cursor: default; }
.btn--quiet:hover { background: transparent; }
.btn--small { height: 40px; padding: 0 18px; font-size: 15px; box-shadow: none; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Top bar: same light as the page, ink and bird follow it */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 30; background: var(--bar, rgba(246, 245, 241, .92)); color: var(--ink-bar, var(--ink)); }
.bar__in { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.brand__marks { position: relative; width: 30px; height: 30px; }
.brand__mark { position: absolute; inset: 0; width: 30px; height: 30px; }
.brand__mark--night { opacity: var(--night, 0); }
.bar__nav { display: flex; gap: 26px; margin-inline-start: auto; font-size: 15px; }
.bar__nav a { text-decoration: none; opacity: .74; }
.bar__nav a:hover { opacity: 1; }
.bar__end { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
.bar__nav + .bar__end { margin-inline-start: 4px; }
/* Language menu: a native disclosure, closed by a click outside or Escape */
.langs { position: relative; }
.langs__button { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 500; opacity: .8; }
.langs__button::-webkit-details-marker { display: none; }
.langs__button:hover, .langs[open] .langs__button { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.langs__globe { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; }
.langs__globe::before { content: ""; position: absolute; inset: 0 4px; border: 1.5px solid currentColor; border-block: 0; border-radius: 50%; }
.langs__globe::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; }
.langs__list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 190px; padding: 8px; display: grid; gap: 2px;
  background: var(--white); color: var(--ink); border-radius: 14px; box-shadow: 0 18px 44px -18px rgba(22, 30, 44, .35), 0 0 0 1px rgba(22, 30, 44, .06); }
.langs__list a { display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; font-size: 15px; }
.langs__list a:hover { background: #F1F0EC; }
.langs__list a[aria-current] { color: var(--azure); font-weight: 500; }

/* Works that turn */
.obj { position: relative; width: 100%; }
.obj img, .obj canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; }
.obj canvas { opacity: 0; }
.obj.is-live canvas { opacity: 1; }
.obj.is-live img { visibility: hidden; }
.obj__shadow { position: absolute; left: calc(var(--bx) * 100%); top: calc(var(--by) * 100%); width: 62%; height: 9%;
  transform: translate(calc(-50% + var(--lx) * -9%), -55%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(24, 30, 40, .30), rgba(24, 30, 40, .12) 55%, transparent); filter: blur(5px); }

/* Pinned scenes: a tall section and a sticky screen; the visible part avoids the space under browser bars */
.scene { position: relative; height: calc(var(--len, 2) * 100 * var(--lvh)); }
.scene__pin { --side: max(var(--gutter), calc((100vw - 1440px) / 2)); position: sticky; top: 0; height: calc(100 * var(--lvh)); padding-bottom: calc(100 * var(--lvh) - 100 * var(--svh));
  overflow: hidden; background: var(--page); perspective: 1400px; }
.page-terms main, .page-privacy main, .page-missing main { padding-top: 64px; }
[data-layer] { will-change: transform; }
.scene__note { position: absolute; inset-inline-end: var(--side, var(--gutter)); bottom: calc(18px + 100 * var(--lvh) - 100 * var(--svh)); max-width: min(46ch, 60vw);
  font-size: 13px; color: var(--graphite); text-align: end; }

/* Intro on load: the first screen arrives from depth, once */
.js .intro { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .7, .1, 1); transition-delay: 80ms; }
.intro--1 { transition-delay: 170ms !important; } .intro--2 { transition-delay: 260ms !important; } .intro--3 { transition-delay: 350ms !important; }
.js .intro--deep { transform: translate3d(0, 36px, 0) scale(.94); }
.is-loaded .intro { opacity: 1; transform: none; }

/* Hero */
.scene--hero { --len: 2.05; }
.scene--hero .scene__pin { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); align-items: center; gap: 0 2vw;
  padding-inline: var(--side); padding-top: 64px; }
.hero__copy { position: relative; z-index: 1; grid-column: 1; grid-row: 1; max-width: 560px; }
.hero__title { font-weight: 300; font-size: clamp(40px, min(5.3vw, 11.5vh), 104px); line-height: .98; letter-spacing: -.035em; }
.hero__title > span { display: block; text-wrap: balance; } /* one line where it fits, two balanced lines where it does not */
/* Kazakh: its second line is the longest of the nine, so it keeps the footprint of the Russian one */
@media (min-aspect-ratio: 1001/1000) and (min-width: 721px) {
  html:lang(kk) .hero__title { font-size: clamp(40px, min(4.8vw, 10.4vh), 94px); }
}
.hero__accent { color: var(--azure); }
.hero__lead { margin-top: clamp(16px, 3vh, 28px); font-size: 18px; line-height: 1.5; color: var(--graphite); max-width: 34ch; }
.hero__price { margin-top: 10px; font-size: 16px; font-weight: 500; }
.hero__copy .stores { margin-top: clamp(16px, 3vh, 26px); }
.hero__object { position: relative; z-index: 2; grid-column: 2; grid-row: 1; }
.hero__object .obj { width: min(100%, calc(70 * var(--svh) * 1.9)); margin-inline: auto; }

/* Gallery of works at depth */
.gallery { padding-top: clamp(110px, 16vh, 200px); padding-bottom: clamp(60px, 10vh, 120px); perspective: 1600px; }
.gallery__field { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 7vh, 90px) 24px; margin-top: clamp(40px, 8vh, 90px); align-items: start; }
.piece--harbour { grid-column: 1 / span 7; }
.piece--ax07 { grid-column: 9 / span 3; margin-top: clamp(60px, 14vh, 160px); }
.piece--studio { grid-column: 2 / span 6; }
.piece--rig09 { grid-column: 9 / span 3; margin-top: clamp(30px, 8vh, 90px); }
.piece figcaption { margin-top: 4px; }
.gallery__note { margin-top: clamp(40px, 8vh, 90px); color: var(--graphite); font-size: 15px; max-width: 70ch; }
[data-float] { transform: translate3d(0, var(--y, 0px), var(--z, 0px)); opacity: var(--o, 1); will-change: transform, opacity; }

/* Night */
.scene--night { --len: 2.2; color: var(--night-ink); }
.scene--night .scene__pin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 2vw;
  padding-inline: var(--side); padding-top: 64px; }
.night__copy { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
.night__copy .lead, .scene--night .scene__note { color: var(--night-graphite); }
.night__object { grid-column: 2; grid-row: 1; mix-blend-mode: screen; }
.night__object .obj { width: min(100%, calc(80 * var(--svh) * 1.25)); margin-inline: auto; }

/* Morning: two characters on two planes */
.scene--people { --len: 2.2; }
.scene--people .scene__pin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 2vw;
  padding-inline: var(--side); padding-top: 64px; }
.people__front { grid-column: 1; grid-row: 1; position: relative; z-index: 2; justify-self: center; width: min(100%, calc(76 * var(--svh) * .8)); margin-inline-start: 12%; }
.people__back { grid-column: 1; grid-row: 1; position: relative; z-index: 1; justify-self: start; align-self: center; width: min(46%, calc(52 * var(--svh) * .5)); margin-top: -12vh; }
.people__copy { grid-column: 2; grid-row: 1; position: relative; z-index: 3; }
.people__names { margin-top: 22px; display: grid; gap: 4px; font-size: 14.5px; color: var(--graphite); }
.people__names span:first-child { color: var(--ink); font-weight: 500; }

/* Steps: one sequence from a lesson */
.steps { padding-top: clamp(110px, 16vh, 200px); perspective: 1600px; }
.steps__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.step:nth-child(2) { margin-top: 56px; }
.step:nth-child(3) { margin-top: 18px; }
.step:nth-child(4) { margin-top: 84px; }
.step .clip { border-radius: var(--r-small); box-shadow: calc(var(--lx) * -16px) 20px 46px -18px rgba(22, 30, 44, .32); }
.step p { margin-top: 14px; font-size: 15px; color: var(--graphite); }
.step strong { color: var(--ink); }
.steps__link { margin-top: 32px; }
.clip { position: relative; overflow: hidden; background: var(--fog); }
.clip video { width: 100%; height: auto; }

/* Free and Full */
.price { padding-top: clamp(110px, 16vh, 200px); perspective: 1600px; }
.price__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(32px, 4vw, 52px); }
.plan { background: var(--white); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); box-shadow: calc(var(--lx) * -18px) 24px 60px -26px rgba(22, 30, 44, .26); }
.plan__name { font-size: 28px; font-weight: 400; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan__name span { font-size: 16px; font-weight: 500; color: var(--azure); }
.plan ul { margin-top: 18px; display: grid; gap: 12px; }
.plan li { padding-inline-start: 20px; position: relative; color: var(--graphite); font-size: 16px; }
.plan li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 8px; height: 2px; background: var(--fog); }
.plan--full li::before { background: var(--azure); }
.price__note { margin-top: 22px; color: var(--graphite); font-size: 15px; }

/* Lessons */
.lessons { padding-top: clamp(110px, 16vh, 200px); perspective: 1600px; }
.lessons__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lesson a { text-decoration: none; display: block; }
.lesson__thumb { position: relative; display: block; border-radius: var(--r-small); overflow: hidden; aspect-ratio: 16 / 9; background: #EAE8E2;
  box-shadow: calc(var(--lx) * -14px) 18px 40px -18px rgba(22, 30, 44, .3); }
.lesson__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lesson--rig09 .lesson__thumb { background: #FFFFFD; }
.lesson--rig09 .lesson__thumb img { object-fit: contain; padding: 4% 12%; }
.lesson__len { position: absolute; inset-inline-end: 10px; bottom: 10px; background: rgba(22, 36, 58, .82); color: var(--white); padding: 4px 8px; border-radius: 6px; font-size: 13px; }
.lesson__title { display: block; margin-top: 12px; font-size: 16px; font-weight: 500; max-width: 34ch; }
.lesson a:hover .lesson__title { color: var(--azure); }

/* Cyanopica 2D: the wash runs over the liner as the picture rises */
.next { padding-top: clamp(110px, 16vh, 200px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 24px clamp(24px, 4vw, 64px); perspective: 1600px; }
.wash__stage { position: relative; border-radius: var(--r); overflow: hidden; background: #E8E8E8; box-shadow: calc(var(--lx) * -22px) 26px 70px -26px rgba(22, 30, 44, .3); }
.wash__stage picture { display: block; }
.wash__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--wash, 0%)) 0 0); }
.wash__top img, .wash__stage > picture img { width: 100%; height: 100%; object-fit: cover; }

/* Questions */
.faq { padding-top: clamp(110px, 16vh, 200px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.faq .title { grid-column: 1 / span 4; }
.faq__list { grid-column: 6 / -1; }
.qa { border-top: 1px solid var(--fog); }
.qa:last-child { border-bottom: 1px solid var(--fog); }
.qa summary { cursor: pointer; padding: 20px 0; font-size: 18px; font-weight: 500; }
.qa summary::marker { color: var(--azure); }
.qa p { padding: 0 0 22px; color: var(--graphite); max-width: 62ch; }

/* Final call */
.final { padding-top: clamp(130px, 20vh, 230px); padding-bottom: clamp(96px, 14vh, 160px); perspective: 1600px; }
.final__title { font-weight: 300; font-size: clamp(52px, min(9vw, 16vh), 150px); line-height: .94; letter-spacing: -.04em; }

/* Footer */
.foot { background: var(--white); position: relative; }
.foot__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; padding-top: 52px; padding-bottom: 44px; font-size: 15px; color: var(--graphite); }
.foot__about { grid-column: 1 / span 5; display: grid; gap: 12px; justify-items: start; }
.foot__mark { width: 34px; height: 34px; }
.foot__about .link { color: var(--ink); }
.foot__links { grid-column: 8 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 24px; align-content: start; }
.foot__links a { text-decoration: none; hyphens: auto; overflow-wrap: anywhere; }
.foot__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot__langs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.foot__langs a { text-decoration: none; }
.foot__langs a:hover { color: var(--ink); }
.foot__langs a[aria-current] { color: var(--ink); font-weight: 500; }
.foot__rights { grid-column: 1 / -1; font-size: 13px; }

/* Documents: privacy, terms */
.doc { max-width: calc(760px + 2 * var(--gutter)); padding-top: clamp(40px, 6vw, 80px); padding-bottom: 120px; }
.doc__back { margin-bottom: 44px; font-size: 15px; }
.doc__toc { display: flex; gap: 8px; margin-bottom: 36px; }
.doc__toc a { text-decoration: none; padding: 8px 14px; border-radius: 999px; background: #ECEAE4; font-size: 14px; }
.doc__toc a:hover { color: var(--azure); }
.doc__part + .doc__part { margin-top: 100px; padding-top: 64px; border-top: 1px solid var(--fog); }
.doc__title { font-weight: 300; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.02em; }
.doc__part .doc__date { margin-top: 14px; color: var(--graphite); font-size: 15px; }
.doc__date + p, .doc__title + p { margin-top: 32px; font-size: 18px; color: var(--ink); }
.doc__part h2 { display: flex; gap: 12px; align-items: baseline; margin: 48px 0 14px; font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.doc__n { color: var(--azure); font-size: 16px; }
.doc__part p { margin-top: 14px; color: var(--graphite); }
.doc__lead { margin-top: 20px; color: var(--graphite); max-width: 56ch; }
.doc__note { margin-top: 22px; padding: 14px 18px; border-radius: var(--r-small); background: #ECEAE4; color: var(--graphite); font-size: 15px; }
.doc__list { margin-top: 40px; display: grid; gap: 12px; }
.doc__list a { display: grid; gap: 4px; padding: 22px 26px; background: #ECEAE4; border-radius: var(--r-small); text-decoration: none; }
.doc__list a:hover .doc__list-title { color: var(--azure); }
.doc__list-title { font-size: 19px; font-weight: 500; }
.doc__list-meta { color: var(--graphite); font-size: 14.5px; }
.doc__list-arrow { display: none; }
.missing { padding-top: clamp(80px, 14vw, 180px); padding-bottom: 160px; }
.missing__title { font-weight: 300; font-size: clamp(52px, 8vw, 120px); line-height: .95; letter-spacing: -.035em; }
.missing__text { margin: 22px 0 32px; color: var(--graphite); }

/* Without motion: no pinning and no flights; each work shows its first frame */
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .scene__pin { position: relative; height: auto; min-height: calc(100 * var(--svh)); padding-block: 96px 64px; }
  [data-float], [data-layer] { transform: none !important; opacity: 1 !important; }
  .js .intro { opacity: 1; transform: none; transition: none; }
}

/* Tablet in portrait and narrow laptops */
@media (max-width: 1080px) {
  .bar__nav { display: none; }
  .bar__nav + .bar__end { margin-inline-start: auto; }
  .steps__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(n) { margin-top: 0; }
  .step:nth-child(even) { margin-top: 48px; }
  .faq .title, .faq__list { grid-column: 1 / -1; }
  .next { grid-template-columns: 1fr; }
  .foot__about { grid-column: 1 / span 6; }
  .foot__links { grid-column: 7 / -1; }
}

/* Portrait screens: the scenes stack */
@media (max-aspect-ratio: 1/1), (max-width: 720px) {
  .scene--hero .scene__pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-content: start; padding-top: calc(64px + 4 * var(--svh)); }
  .hero__copy { display: contents; }
  .hero__title { grid-row: 1; font-size: clamp(38px, 11vw, 88px); }
  .hero__title > span { white-space: normal; }
  .hero__copy > .intro { grid-row: 3; align-self: end; padding-bottom: 3vh; }
  .hero__object { grid-column: 1; grid-row: 2; margin-left: 0; align-self: center; }
  .hero__object .obj { width: 114%; margin-inline: -7%; }
  .scene--hero .scene__note { display: none; }
  .scene--night .scene__pin, .scene--people .scene__pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; padding-top: calc(64px + 4 * var(--svh)); }
  .night__copy, .people__copy { grid-column: 1; grid-row: 1; }
  .night__object { grid-column: 1; grid-row: 2; align-self: center; }
  .night__object .obj { width: min(100%, calc(52 * var(--svh) * 1.25)); }
  .people__front { grid-column: 1; grid-row: 2; width: min(64%, calc(48 * var(--svh) * .8)); margin-inline-start: 22%; align-self: center; }
  .people__back { grid-column: 1; grid-row: 2; width: min(34%, calc(30 * var(--svh) * .5)); margin-top: -10vh; align-self: center; }
  .people__names { display: none; }
  .scene__note { display: none; }
  .gallery__field { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .piece--harbour { grid-column: 1 / -1; }
  .piece--ax07 { grid-column: 3 / span 4; margin-top: 0; }
  .piece--studio { grid-column: 1 / span 5; }
  .piece--rig09 { grid-column: 3 / span 4; margin-top: 0; }
}

/* Phone */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .bar__in { height: 58px; gap: 14px; }
  .brand { font-size: 17px; }
  .brand__marks, .brand__mark { width: 26px; height: 26px; }
  .bar__end { gap: 12px; }
  /* The open language list hangs from the bar's edge, so it always fits the screen */
  .langs { position: static; }
  .langs__list { inset-inline-end: var(--gutter); top: calc(100% + 6px); max-width: calc(100vw - 2 * var(--gutter)); }
  .scene--hero .scene__pin, .scene--night .scene__pin, .scene--people .scene__pin { padding-top: calc(58px + 3 * var(--svh)); }
  .hero__title { font-size: clamp(36px, 11.2vw, 52px); }
  .hero__lead { font-size: 16px; margin-top: 0; }
  .hero__price { font-size: 15px; }
  .hero__copy .stores { margin-top: 14px; }
  .stores .btn { flex: 1 1 auto; }
  .lead { font-size: 16px; }
  .title { font-size: clamp(30px, 8.6vw, 40px); }
  .night__copy .lead, .people__copy .lead { margin-top: 10px; }
  /* Steps read one by one on a phone: full-width pictures, captions at reading size */
  .steps__row { grid-template-columns: 1fr; gap: 34px; }
  .step:nth-child(even) { margin-top: 0; }
  .step p { font-size: 15px; margin-top: 12px; }
  .price__cols { grid-template-columns: 1fr; }
  .lessons__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .lessons__row::-webkit-scrollbar { display: none; }
  .lesson { flex: 0 0 78%; scroll-snap-align: start; }
  .final { padding-top: clamp(110px, 16vh, 180px); }
  .final__title { font-size: clamp(38px, 10.6vw, 56px); line-height: .98; }
  .final .lead { margin-top: 20px; }
  .doc__title { font-size: clamp(26px, 8.6vw, 34px); }
  .foot__about, .foot__links { grid-column: 1 / -1; }
}
/* Narrow phones: the language button keeps only its globe; below 340px the bird stands in for the name */
@media (max-width: 380px) {
  .langs__current { display: none; }
  .langs__button { padding: 0 8px; }
  .bar .btn--small { padding: 0 14px; }
}
@media (max-width: 340px) {
  .brand__name { display: none; }
  .foot__links { grid-template-columns: 1fr; }
}
/* A word longer than the line (a long legal word, a narrow screen) wraps instead of widening the page */
h1, h2, h3, p, li, summary, figcaption { overflow-wrap: break-word; }