/*
 * Blue Mountains Gudauri — the stylesheet.
 *
 * Layout concept: a trail sign at blue hour. The distance to the lift is set like a piste marker, the one loud thing
 * on the page; everything around it is quiet, cool and spacious, the way the room in the photographs is.
 *
 * Colour comes from the two paintings over the bed the flat is named after: blue-violet mountains, alpenglow on the
 * peaks. The ground is snow, cool rather than cream; the ink is the night end of that blue; actions are alpenglow
 * with dark ink on them, because a peach button with indigo text reads at a glance and looks like nothing else here.
 *
 * Type: Jost for display, the open revival of Futura, which is what the Swiss ski posters were set in. It carries
 * Latin and Cyrillic only. Georgian, Hebrew and Chinese headings fall through to the system faces by unicode-range,
 * and running text uses the system stack in every language: no face covers all five scripts, and the budget is
 * 70 KB of fonts per page language (ADR-011 §8). Two files, 26 KB and 10 KB.
 *
 * One grid. From 48rem everything below the header sits on the gallery's three columns: the photographs fill all
 * three, the reading column takes the first two, and the booking card the third, where it stays in view as you
 * scroll. The header, the hero and the footer share the same outer edges. Below 48rem it is one column, and the
 * thumb bar at the bottom of the screen does the card's job.
 *
 * No uppercase anywhere: Georgian has no capitals and uppercase Russian shouts (ADR-011 §9). Every margin, padding
 * and alignment is logical, so Hebrew mirrors from dir="rtl" alone; a test fails if a physical property creeps in.
 */

/* Chrome's built-in translation swaps the text but keeps the page's dir attribute, and marks what it did with a class
   on <html>: translated-ltr or translated-rtl. Direction follows that class when it is there, so a Hebrew page read
   in English lays out left to right, and an English one read in Hebrew the other way. The two optical nudges below
   that are keyed on dir follow the class as well. */
html.translated-ltr {
  direction: ltr;
}

html.translated-rtl {
  direction: rtl;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/jost-latin.235d8f89.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/jost-cyrillic.184c3af4.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  color-scheme: light dark;

  /* colour */
  --snow: #f6f7fa;
  --snow-deep: #eceef4;
  --surface: #ffffff;
  --night: #161b30;
  --slate: #535b78;
  --rime: #dce0ea;
  --ridge: #2e4170;
  --ridge-far: #8d9cc6;
  --glow: #f2a581;
  --on-glow: #161b30;
  --shade: rgb(22 27 48 / 7%);
  --lift: rgb(22 27 48 / 22%);

  /* type */
  --display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans Georgian",
    "Noto Sans Hebrew", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Arial Hebrew", sans-serif;

  --step-marker: clamp(4.25rem, 2.6rem + 9vw, 7.5rem);
  --step-1: clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem);
  --step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-0: 1.0625rem;
  --step-small: 0.875rem;

  /* layout */
  --measure: 35rem;
  --wide: 66rem;
  --gutter: clamp(1rem, 4.5vw, 2rem);
  --column-gap: 0.5rem;
  --radius: 6px;
  --dock: 0rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --snow: #0f1324;
    --snow-deep: #171c31;
    --surface: #171c31;
    --night: #e9ecf5;
    --slate: #9aa3c0;
    --rime: #262c45;
    --ridge: #a4b6ec;
    --ridge-far: #56628e;
    --glow: #f2a581;
    --on-glow: #161b30;
    --shade: rgb(0 0 0 / 35%);
    --lift: rgb(0 0 0 / 55%);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--snow);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--snow);
  color: var(--night);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  text-wrap: pretty;
  padding-block-end: var(--dock);
  overflow-x: clip;
}

img {
  max-width: 100%;
}

::selection {
  background: var(--glow);
  color: var(--on-glow);
}

:focus-visible {
  outline: 2px solid var(--ridge);
  outline-offset: 3px;
}

a {
  color: var(--ridge);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Hidden until focused, without parking it 9999px away: an offset like that flips to the far right in Hebrew. */
.skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: 0.5rem;
  z-index: 3;
  padding: 0.5rem 0.75rem;
  background: var(--snow);
  color: var(--night);
}

/* ---- header ------------------------------------------------------------ */

header.site {
  padding-inline: var(--gutter);
  border-block-end: 1px solid var(--rime);
}

/* The header's and footer's content box is the --wide container minus its gutters: the edges the page has. */
header.site .inner,
footer.site .inner {
  max-width: calc(var(--wide) - 2 * var(--gutter));
  margin-inline: auto;
}

/* Brand and languages on one line, the pages under them. In the source the order is brand, pages, languages, which
   is the order they read in on a wide screen, where the header is one row. */
header.site .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  padding-block-start: 0.25rem;
}

.brand {
  order: 0;
  margin: 0;
  padding-block: 0.5rem;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: nowrap;
}

.brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--night);
  text-decoration: none;
}

/* Two peaks, the near one in the ink of the paintings, the far one paler, the way distance does it. */
.mark {
  flex: none;
  inline-size: 1.75rem;
  block-size: auto;
  aspect-ratio: 32 / 20;
  fill: var(--ridge);
}

.mark .far {
  fill: var(--ridge-far);
}

nav.languages {
  order: 1;
  display: flex;
  gap: 0 1rem;
  font-size: var(--step-small);
}

/* The padding widens the tap target past the short names (中文 is two characters); the margin gives the space back,
   so the row looks the same. */
nav.languages a {
  color: var(--slate);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.625rem;
  padding-inline: 0.375rem;
  margin-inline: -0.375rem;
}

nav.languages a[aria-current] {
  color: var(--night);
  font-weight: 600;
}

nav.pages {
  order: 2;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  /* Sized so the four links fit one line at 360px in all five languages; measured, not guessed. */
  gap: 0 0.875rem;
}

nav.pages a {
  position: relative;
  padding-block: 0.625rem 0.75rem;
  color: var(--slate);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.875rem;
}

nav.pages a[aria-current] {
  color: var(--night);
  font-weight: 600;
}

/* The current page is underlined on the header's own rule. */
nav.pages a[aria-current]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 2px;
  background: var(--night);
}

/* On a phone every language is visible at once, in its own row above the brand: hiding three of five behind a
   scroll is how a Russian visitor fails to find Russian. */
@media (max-width: 47.99rem) {
  nav.languages {
    order: -1;
    flex-basis: 100%;
    justify-content: space-between;
    border-block-end: 1px solid var(--rime);
  }
}

@media (max-width: 22.4rem) {
  nav.languages {
    gap: 0 0.75rem;
  }
}

/* 360px Android screens: English is 5px too wide for one line at the size above. At 320px it wraps instead. */
@media (max-width: 23.75rem) {
  nav.pages {
    gap: 0 0.75rem;
  }

  nav.pages a {
    font-size: 0.8125rem;
  }
}

@media (min-width: 48rem) {
  header.site .inner {
    padding-block-start: 0.875rem;
  }

  nav.pages {
    gap: 0 1.75rem;
  }

  nav.pages a {
    font-size: 0.9375rem;
  }
}

/* One row: brand, pages, languages. The links run the full height of the row, so the current page's underline
   still lands on the rule. */
@media (min-width: 64rem) {
  header.site .inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    padding-block-start: 0;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
  }

  nav.pages {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    gap: 0 1.5rem;
  }

  nav.pages a {
    display: flex;
    align-items: center;
    padding-block: 1.25rem;
  }

  nav.languages {
    grid-column: 3;
    grid-row: 1;
  }
}

/* ---- the page ------------------------------------------------------------ */

/* A phrase that must not break: "квартира-студия", "09:00–24:00", 新古多里. Markup rather than invisible characters,
   so the heading's text is the title's text. */
.nb {
  white-space: nowrap;
}

.layout {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

body:not(.home) .layout {
  padding-block-start: 2.25rem;
}

.content {
  min-width: 0;
}

.content > *,
.page-head > *,
.hero-text > * {
  max-width: var(--measure);
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-1);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-block: 0 0.75rem;
}

h2 {
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-block: 2.75rem 0.75rem;
}

/* Sections. A section that ends in running text gets a rule above the next heading, so a long page reads as parts;
   one that ends in a table already ends on a rule, and gets the space without a second line. */
.content > h2 {
  margin-block: 3rem 0.75rem;
}

.content > h2:first-child {
  margin-block-start: 2.75rem;
}

.content > :is(p, ul, .places, .note, .map, .calendar) + h2 {
  padding-block-start: 2.5rem;
  border-block-start: 1px solid var(--rime);
}

p {
  margin-block: 0 1.15rem;
}

.lead {
  color: var(--slate);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  margin-block-end: 1.25rem;
}

.page-head .lead {
  margin-block-end: 0.5rem;
}

.content > ul:not([class]) {
  margin-block: 0 1.25rem;
  padding-inline-start: 1.15rem;
}

.content > ul:not([class]) li {
  margin-block-end: 0.5rem;
}

.content > ul:not([class]) li::marker {
  color: var(--slate);
}

/* ---- hero ------------------------------------------------------------- */

/* On a phone the photograph runs edge to edge, and the text under it keeps the page's edges. */
main > .hero {
  max-width: none;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  /* 3:2 on a phone leaves room for the marker, the heading, the lead and the price above the dock, in every
     language, from 360px up; measured. */
  aspect-ratio: 3 / 2;
  max-height: 56vh;
  object-fit: cover;
  /* Both paintings stay in frame; they are what the flat is named after. */
  object-position: 50% 16%;
  background: var(--snow-deep);
}

.hero-text {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-start: 1.5rem;
}

/* 360px Android screens are shorter as well as narrower: a wider crop and a smaller marker keep the first screen
   complete above the dock there too. */
@media (max-width: 23.75rem) {
  .hero-image {
    aspect-ratio: 16 / 9;
  }

  :root {
    --step-marker: 4rem;
  }

  .hero-text {
    padding-block-start: 1.125rem;
  }
}

/* The trail sign: the number people check first, set like the distance on a piste marker. */
.marker {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.625rem;
  margin-block: 0 0.875rem;
  color: var(--ridge);
  font-family: var(--display);
  line-height: 0.9;
}

.marker strong {
  font-size: var(--step-marker);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* Optical alignment: the "1" carries a wide side bearing, which sets the number visibly in from the heading's edge
   in left-to-right pages, and away from its unit in right-to-left ones. */
[dir="ltr"]:not(.translated-rtl) .marker strong,
.translated-ltr .marker strong {
  margin-inline-start: -0.085em;
}

.marker strong span {
  font-size: 0.42em;
  letter-spacing: 0;
  margin-inline-start: 0.08em;
}

[dir="rtl"]:not(.translated-ltr) .marker strong span,
.translated-rtl .marker strong span {
  margin-inline-start: -0.15em;
}

.marker em {
  font-style: normal;
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--slate);
}

.keyfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  list-style: none;
  padding: 0;
  margin-block: 0 1.5rem;
  font-weight: 600;
}

.keyfacts li + li::before {
  content: "·";
  padding-inline: 0.625rem;
  color: var(--slate);
  font-weight: 400;
}

/* ---- the numbers of an inner page ---------------------------------------- */

.content > .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem clamp(1.75rem, 5vw, 3.25rem);
  list-style: none;
  padding: 0;
  margin-block: 1.75rem 0;
}

.stats li {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.stats strong {
  color: var(--ridge);
  font-family: var(--display);
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[dir="ltr"]:not(.translated-rtl) .stats li:first-child strong,
.translated-ltr .stats li:first-child strong {
  margin-inline-start: -0.07em;
}

.stats strong span {
  font-size: 0.45em;
  letter-spacing: 0;
  margin-inline-start: 0.12em;
}

.stats em {
  font-style: normal;
  color: var(--slate);
  font-size: 0.9375rem;
  line-height: 1.3;
}

/* ---- actions ---------------------------------------------------------- */

.cta {
  margin-block: 0.5rem 2.5rem;
}

a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.125rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  background: var(--glow);
  color: var(--on-glow);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: transform 120ms ease, filter 120ms ease;
}

a.button:hover {
  filter: saturate(1.15) brightness(1.03);
}

a.button:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  a.button {
    transition: none;
  }
}

/* ---- photographs -------------------------------------------------------- */

/* Every photograph is portrait, so the tiles are too: a 4:3 tile showed barely half of each picture. */
main > .gallery {
  max-width: var(--wide);
  margin-inline: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64%;
  gap: var(--column-gap);
  margin-block: 0 1.5rem;
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

main > .gallery::-webkit-scrollbar {
  display: none;
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--snow-deep);
  scroll-snap-align: start;
}

/* ---- facts ------------------------------------------------------------ */

.content dl.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  margin-block: 0.25rem 2rem;
}

/* The rules belong to the rows, so they span the text column rather than the whole box with its gutters. */
dl.facts dt,
dl.facts dd {
  margin: 0;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--rime);
  min-width: 0;
  overflow-wrap: anywhere;
}

dl.facts > :nth-child(-n + 2) {
  border-block-start: 1px solid var(--rime);
}

dl.facts dt {
  color: var(--slate);
  padding-inline-end: 1rem;
}

dl.facts dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A row's note: what the figure means for you, under the figure. */
dl.facts dd small {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--slate);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
}

/* ---- places ------------------------------------------------------------ */

.content > .places {
  display: grid;
  gap: 1.25rem;
  margin-block: 0.5rem 1.75rem;
}

.places div {
  display: grid;
  gap: 0.125rem;
}

.places dt {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.places dd {
  margin: 0;
}

/* ---- a callout ----------------------------------------------------------- */

.content > .note {
  margin-block: 0.25rem 1.5rem;
  padding: 1.125rem 1.25rem;
  border-inline-start: 3px solid var(--ridge);
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  background: var(--snow-deep);
}

.note p {
  margin: 0;
}

/* The address for the driver, big enough to read off a phone held up to the window. */
.note .driver {
  margin-block-start: 1rem;
  color: var(--slate);
  font-size: var(--step-small);
}

.note .driver span {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--night);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ---- questions ---------------------------------------------------------- */

.content > .qa {
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--rime);
}

.content > :not(.qa) + .qa {
  margin-block-start: 1.5rem;
  border-block-start: 1px solid var(--rime);
}

.qa h2 {
  font-size: 1.125rem;
  margin-block: 0 0.375rem;
}

.qa p {
  margin: 0;
  color: var(--slate);
}

/* ---- embeds ------------------------------------------------------------ */

/* The calendar is 30rem wide at most and its frame as tall as the widget at that width, with a sixth week of days
   and a chosen check-in day allowed for: anything more was an empty box under it. */
.content > .calendar {
  max-width: 30rem;
}

.calendar-note {
  margin-block: 0 0.75rem;
  color: var(--slate);
  font-size: var(--step-small);
}

.calendar-link {
  margin-block: -0.25rem 1.5rem;
  font-size: var(--step-small);
}

.calendar iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 47.5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--snow-deep);
  margin-block-end: 1.25rem;
}

@media (min-width: 48rem) {
  .calendar iframe {
    height: 45rem;
  }
}

/* Where Google is blocked, as in Russia and China it often is, the frame stays empty: the label underneath it is
   what shows, and the link below the map still works. */
.map .frame {
  position: relative;
  display: grid;
  place-items: center;
  margin-block-end: 0.75rem;
  border: 1px solid var(--rime);
  border-radius: var(--radius);
  background: var(--snow-deep);
  overflow: hidden;
}

.map .frame::before {
  content: attr(data-label);
  position: absolute;
  color: var(--slate);
  font-size: var(--step-small);
}

.map iframe {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 300px;
  border: 0;
  background: transparent;
}

@media (min-width: 48rem) {
  .map iframe {
    height: 400px;
  }
}

.contact h2 {
  font-size: 1.125rem;
  margin-block: 2.25rem 0.375rem;
}

.contact-line {
  margin: 0;
}

.pending {
  color: var(--slate);
}

/* ---- the booking card ----------------------------------------------------- */

.card {
  display: none;
}

/* ---- footer ------------------------------------------------------------- */

footer.site {
  margin-block-start: 4rem;
  padding-block: 2.5rem 3rem;
  padding-inline: var(--gutter);
  border-block-start: 1px solid var(--rime);
  background: var(--snow-deep);
  color: var(--slate);
  font-size: 0.9375rem;
}

footer.site .inner {
  display: grid;
  gap: 1.5rem;
}

footer.site p {
  margin: 0;
}

footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-brand {
  display: grid;
  align-content: start;
  gap: 0.375rem;
}

.footer-brand .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0;
  color: var(--night);
}

footer.site .note {
  margin-block-start: 0.5rem;
  color: var(--night);
}

footer.site .phone a {
  padding-block: 0;
  font-weight: 600;
  text-decoration: none;
}

.footer-pages,
.footer-links {
  display: grid;
  align-content: start;
}

/* Footer links are tap targets too. */
footer.site a {
  display: inline-block;
  padding-block: 0.5rem;
}

.footer-pages a[aria-current] {
  color: var(--night);
  font-weight: 600;
  text-decoration: none;
}

footer.site .copy {
  margin-block-start: 0.75rem;
  font-size: 0.8125rem;
}

/* ---- the thumb bar ------------------------------------------------------- */

/* The price on the start side, the action on the end side, the way every booking app does it. Solid, not frosted:
   text sliding under a 90% veil read as grey smears. */
.dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.625rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
  padding-inline: var(--gutter);
  background: var(--surface);
  border-block-start: 1px solid var(--rime);
  box-shadow: 0 -8px 24px var(--shade);
}

.dock-price {
  margin: 0;
  min-width: 0;
  color: var(--slate);
  font-size: var(--step-small);
  line-height: 1.3;
}

.dock-price strong {
  color: var(--night);
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* As wide as its words, and never more than 60% of the bar: a long label wraps to two balanced lines instead. */
.dock .button {
  flex: none;
  max-inline-size: 60%;
  min-height: 2.875rem;
  padding-block: 0.5rem;
  padding-inline: 1.125rem;
  line-height: 1.2;
  text-wrap: balance;
}

body:has(.dock) {
  --dock: 4.75rem;
}

/* Below 48rem the dock carries the price and the action, so the hero's chip and button would only repeat them. */
@media (max-width: 47.99rem) {
  body:has(.dock) .hero .cta,
  body:has(.dock) .content > .cta,
  body:has(.dock) .keyfacts li:last-child {
    display: none;
  }
}

/* ---- wider screens: one grid ----------------------------------------------- */

@media (min-width: 48rem) {
  .dock {
    display: none;
  }

  body:has(.dock) {
    --dock: 0rem;
  }

  main > .hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    max-width: var(--wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: 3rem 2.5rem;
  }

  .hero-image {
    order: 2;
    aspect-ratio: 5 / 6;
    max-height: 36rem;
    border-radius: var(--radius);
  }

  .hero-text {
    order: 1;
    padding: 0;
    max-width: none;
  }

  main > .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
  }

  .gallery img {
    aspect-ratio: 4 / 5;
  }

  /* The gallery's three columns, again: the reading column takes two, the card the third. */
  .layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--column-gap);
    align-items: start;
  }

  .content {
    grid-column: 1 / 3;
    padding-inline-end: clamp(1.5rem, 3.5vw, 3rem);
  }

  body:not(.home) .layout {
    padding-block-start: 3.5rem;
  }

  .card {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    inset-block-start: 1.5rem;
    /* Level with the first heading of the column: the section's on the home page, the page's own elsewhere. */
    margin-block-start: 2.75rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--rime);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 2px var(--shade), 0 16px 40px -20px var(--lift);
  }

  body:not(.home) .card {
    margin-block-start: 0.25rem;
  }

  .card p {
    margin: 0;
  }

  .card-price {
    color: var(--slate);
    font-size: 0.9375rem;
    line-height: 1.35;
  }

  .card-price strong {
    color: var(--night);
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .card-facts {
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: 600;
  }

  .card-facts li {
    padding-block: 0.5rem;
    border-block-start: 1px solid var(--rime);
  }

  .card-facts li:last-child {
    border-block-end: 1px solid var(--rime);
  }

  .card .button {
    display: flex;
    width: 100%;
    text-wrap: balance;
  }

  .card-note,
  .card-link {
    color: var(--slate);
    font-size: var(--step-small);
    line-height: 1.5;
  }

  .card-note span {
    display: block;
    text-wrap: balance;
  }

  .card-link a {
    white-space: nowrap;
  }

  /* The card carries the call to action now; the ones at the end of the column would repeat it. */
  .content > .cta {
    display: none;
  }

  footer.site .inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--column-gap);
  }

  /* The card says it, beside every page. */
  footer.site .note {
    display: none;
  }
}