/* offbeat.karano.me: the app's own look. Behind everything, as in the app, the photo on screen, blurred and changing
   at each cut of the cut on the stage; glass for the panels and the buttons, as the app's Liquid Glass is (frosted, a light rim brightest at the top, a soft lift), one
   white main action; and Mona Sans by role: the name wide and leaning, titles a little wide, numbers narrow, the
   text at its normal width. Every page is one screen. No build step: edit this file as it is. */

@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url('/assets/fonts/mona-sans.5ea37406.woff2') format('woff2');
}

@font-face {
  font-family: 'Mona Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url('/assets/fonts/mona-sans-italic.6999f82b.woff2') format('woff2');
}

:root {
  --bg: #08080a;
  --text: #f4f4f5;
  /* 4.5:1 or better on the glass over the photo's brightest tiles. */
  --text-2: rgb(244 244 245 / 0.82);
  --text-3: rgb(244 244 245 / 0.66);
  --line: rgb(255 255 255 / 0.12);
  --line-strong: rgb(255 255 255 / 0.22);
  --wash-strong: rgb(255 255 255 / 0.12);

  /* The app's accent at its resting hue. */
  --accent: oklch(0.78 0.16 300);
  --accent-soft: oklch(0.78 0.16 300 / 0.2);

  /* Glass: a tint dark enough to read on, a sheen from the top, the backdrop frosted and saturated through it, a
     rim of light (.glass::after), and a lift off the photo. */
  --glass-tint: rgb(18 18 24 / 0.46);
  --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.03) 42%, rgb(255 255 255 / 0.02));
  --glass-blur: blur(26px) saturate(1.8);
  --glass-rim: linear-gradient(160deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.1) 30%, rgb(255 255 255 / 0.04) 62%, rgb(255 255 255 / 0.26));
  --glass-inner: inset 0 1px 1px rgb(255 255 255 / 0.16), inset 0 -16px 28px -22px rgb(255 255 255 / 0.16);
  --glass-drop: 0 24px 60px -18px rgb(0 0 0 / 0.65), 0 2px 8px rgb(0 0 0 / 0.25);
  --glass-solid: #17171c;
  --float: 0 40px 90px -20px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.1);

  --font: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --name-stretch: 125%;
  --title-stretch: 112%;
  --numerals-stretch: 84%;
  --w-title: 640;

  /* The app's type and spacing scales. */
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --r-control: 14px;
  --r-tile: 24px;
  --r-dock: 28px;
  --r-round: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --quick: 160ms;

  --gutter: var(--s4);
  --foot-h: 44px;

  color-scheme: dark;
}

@media (min-width: 640px) {
  :root {
    --gutter: var(--s5);
  }
}

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

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

body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font: 450 1rem / 1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1,
h2,
p,
ol,
ul,
figure {
  margin: 0;
}

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

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

/* Hidden stays hidden: the display above would otherwise outrank the attribute (the backdrop's strip of photos). */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

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

::selection {
  background: var(--accent-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  z-index: 10;
  padding: 10px 18px;
  border-radius: var(--r-round);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

/* Behind everything, as the app's editor has it: the photo on screen, scaled up and heavily blurred, a little more
   saturated, at about half strength over the night, and darker toward the bottom. On the home page site.js draws
   each cut's photo into one of the two canvases on the cut and fades it in over the other, quickly, so it keeps up
   with the cut; the still (the bay from the cut) is there before it plays, and on the other pages. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}

.backdrop__photo {
  position: absolute;
  inset: -12%;
  filter: blur(80px) saturate(1.3);
  opacity: 0.55;
}

.backdrop__photo > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.backdrop canvas {
  opacity: 0;
  transition: opacity 350ms ease-out;
}

.backdrop canvas[data-shown] {
  opacity: 1;
}

.backdrop canvas[data-top] {
  z-index: 1;
}

.backdrop canvas[data-reset] {
  transition: none;
}

.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgb(8 8 10 / 0.6));
}

/* Glass. The rim is a 1 px ring of light masked out of a gradient, brightest at the top left as if lit from above. */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-sheen), var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inner), var(--glass-drop);
}

.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-sheen), var(--glass-solid);
  }
}

/* Glass you can press: it brightens under the pointer and gives under the finger. */
a.glass,
button.glass {
  cursor: pointer;
  transition:
    transform var(--quick) var(--ease),
    background-color var(--quick) var(--ease),
    box-shadow var(--quick) var(--ease);
}

a.glass:hover,
button.glass:hover {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.06) 50%, rgb(255 255 255 / 0.04)), var(--glass-tint);
}

a.glass:active,
button.glass:active {
  transform: scale(0.96);
}

/* Pills: glass capsules, 44 px to touch when they can be pressed. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s4);
  border-radius: var(--r-round);
  color: var(--text-2);
  font-size: var(--t-xs);
  line-height: 1.3;
  text-decoration: none;
}

a.pill {
  min-height: 44px;
  color: var(--text);
  font-size: var(--t-sm);
  font-weight: 600;
}

.pill svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* The one main action on a screen: white and glossy, as the app's Export is. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s5);
  border: 0;
  border-radius: var(--r-round);
  background: linear-gradient(180deg, #fff, #e6e6ec);
  color: #0a0a0c;
  font-size: var(--t-base);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 5px rgb(0 0 0 / 0.1),
    0 10px 28px -12px rgb(255 255 255 / 0.5),
    0 2px 6px rgb(0 0 0 / 0.35);
  transition:
    transform var(--quick) var(--ease),
    box-shadow var(--quick) var(--ease),
    filter var(--quick) var(--ease);
}

.button:hover {
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 5px rgb(0 0 0 / 0.1),
    0 14px 36px -12px rgb(255 255 255 / 0.65),
    0 2px 6px rgb(0 0 0 / 0.35);
}

.button:active {
  transform: scale(0.97);
}

.button--wide {
  width: 100%;
}

/* Round glass buttons, 44 px, as the app's are. */
.round {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
}

.round svg {
  width: 16px;
  height: 16px;
}

/* The name: the mark and the word, wide and leaning, as the app draws them. */
.wordmark {
  width: 100%;
  height: auto;
  color: var(--text);
  overflow: visible;
}

.mark__beat {
  fill: var(--text);
}

/* Playing along (site.js): the beat of the bar lights its dot in the accent, and a cut off the beat makes the raised
   dot glow. Light only: nothing grows, shrinks or moves. */
[data-count='0'] .mark__beat:nth-child(1),
[data-count='1'] .mark__beat:nth-child(2),
[data-count='2'] .mark__beat:nth-child(3),
[data-count='3'] .mark__beat:nth-child(4) {
  fill: var(--accent);
}

.mark__accent {
  transition: filter 220ms var(--ease);
}

[data-hit] .mark__accent {
  filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 5px var(--accent));
}

/* Every page in one frame, the home page's: as wide, padded the same, the bar on top and the footer line along the
   bottom, so moving between pages nothing jumps. */
.frame {
  display: grid;
  gap: var(--s5) clamp(var(--s5), 3.4vw, 64px);
  width: min(100%, 1720px);
  min-height: 100svh;
  margin-inline: auto;
  padding: var(--s4) var(--s5) calc(var(--foot-h) + var(--s2));
}

/* The bar: the name (or the way back to it) on the left, the line in the middle, and a pill on the right. */
.bar {
  grid-area: bar;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s4);
}

/* The home page is the app's first screen. Under the bar how it works on the left, the stage in the middle (a 9:16
   frame sized from the window's height), what is coming on the right, and the song lane in the dock. The bar, the
   dock, the footer, the gaps and the padding take about 230 px of the height. */
.home {
  --stage-h: clamp(360px, calc(100svh - 236px), 820px);
  --stage-w: calc(var(--stage-h) * 9 / 16);
  grid-template:
    'bar bar bar' auto
    'left stage right' minmax(0, 1fr)
    'dock dock dock' auto / minmax(0, 1fr) var(--stage-w) minmax(0, 1fr);
}

.brand {
  justify-self: start;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--s4);
  border-radius: var(--r-round);
}

.brand .wordmark {
  width: 104px;
}

/* the way back on another page: the name, with a chevron before it */
.brand--back {
  gap: var(--s2);
  padding-left: var(--s3);
  text-decoration: none;
}

.brand__back {
  flex: none;
  width: 16px;
  height: 16px;
}

.bar__line {
  color: var(--text);
  font-size: var(--t-base);
  font-style: italic;
  font-weight: 560;
  font-stretch: var(--title-stretch);
  text-align: center;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
}

.bar__end {
  justify-self: end;
}

/* The two cards hold their own places beside the stage; on a narrow screen they become a sideways row. */
.home__cards {
  display: contents;
}

.card {
  display: grid;
  align-content: start;
  align-self: center;
  gap: var(--s5);
  width: clamp(260px, 21vw, 320px);
  padding: var(--s5);
  border-radius: var(--r-tile);
}

.card--steps {
  grid-area: left;
  justify-self: end;
}

.card--soon {
  grid-area: right;
  justify-self: start;
}

.card__title {
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: var(--w-title);
  font-stretch: var(--title-stretch);
  line-height: 1.2;
}

/* How it works: three steps, each with the light the app's ignition uses; the last lit in the accent. */
.steps {
  display: grid;
  gap: var(--s4);
}

.step {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: var(--s3);
}

.step__light {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--text);
}

.step:last-child .step__light {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.step__title {
  display: block;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.4;
}

.step__line {
  display: block;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.45;
  text-wrap: pretty;
}

/* The stage: the cut, framed as the app frames its preview, with a hairline of light round its edge. */
.stage {
  grid-area: stage;
  align-self: center;
  justify-self: center;
}

.stage__frame {
  position: relative;
  width: var(--stage-w);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--r-dock);
  background: #000;
  box-shadow:
    0 40px 90px -20px rgb(0 0 0 / 0.8),
    0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.stage__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage__controls {
  position: absolute;
  right: var(--s3);
  bottom: var(--s3);
  display: flex;
  gap: var(--s2);
}

.icon-play,
.icon-sound,
[data-paused] .icon-pause,
[aria-pressed='true'] .icon-muted {
  display: none;
}

[data-paused] .icon-play,
[aria-pressed='true'] .icon-sound {
  display: block;
}

/* Coming soon: the App Store first, then the rest as the app lists its other ways in. */
.store {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 60px;
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-control);
  font-size: 1.375rem;
  font-weight: 640;
  font-stretch: var(--title-stretch);
  line-height: 1;
}

.store img {
  flex: none;
  width: 40px;
  height: 40px;
}

.store small {
  display: block;
  margin-bottom: 3px;
  color: var(--text-3);
  font-size: var(--t-xs);
  font-weight: 500;
  font-stretch: 100%;
}

.options {
  display: grid;
}

.option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s3);
  padding-block: var(--s3);
}

.option + .option {
  border-top: 1px solid var(--line);
}

.option:first-child {
  padding-top: 0;
}

.option:last-child {
  padding-bottom: 0;
}

.option > svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--text-2);
}

.option b {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.45;
}

.option span span {
  display: block;
  color: var(--text-3);
  font-size: var(--t-xs);
  line-height: 1.4;
}

.soon {
  margin-top: 2px;
  padding: 2px var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-round);
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 550;
  line-height: 1.4;
}

/* The dock: the cut's own song lane. Its waveform, a tick for every cut that lights as the cut plays, a playhead,
   and the app's three readouts, all following the video (site.js). */
.dock {
  grid-area: dock;
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 64px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-dock);
}

.dock__label {
  color: var(--text-3);
  font-size: var(--t-xs);
}

.dock__lane {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  height: 36px;
}

.dock__bar {
  flex: 1;
  border-radius: 1px;
  background: var(--line-strong);
}

.dock__tick {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0.22;
  transition:
    opacity 600ms var(--ease),
    box-shadow 600ms var(--ease);
}

.dock__tick[data-lit] {
  opacity: 1;
  box-shadow: 0 0 8px var(--accent);
  transition: none;
}

.dock__head {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  width: 1px;
  background: var(--text);
  opacity: 0;
}

.dock[data-playing] .dock__head {
  opacity: 0.9;
}

.dock__readout {
  min-width: 52px;
  color: var(--text-3);
  font-size: var(--t-xs);
  white-space: nowrap;
}

.dock__readout b {
  display: block;
  color: var(--text);
  font-size: 22px;
  font-weight: 580;
  font-stretch: var(--numerals-stretch);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* The footer line, along the bottom of the screen under the dock: who made it, and the privacy page. */
.foot {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: min(100%, 1720px);
  height: var(--foot-h);
  padding-inline: calc(var(--s5) + var(--s5));
  color: var(--text-2);
  font-size: var(--t-sm);
  transform: translateX(-50%);
}

.foot__by {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.foot svg {
  flex: none;
  width: 28px;
  height: auto;
}

.foot a {
  color: var(--text);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

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

/* Narrower: one column, as the app goes. The bar and the line, the stage as tall as the screen leaves it, the two
   cards side by side under it (a phone has them on a second screen, below), the footer line; the dock left out. */
@media (max-width: 1099px) {
  .frame {
    gap: var(--s4);
    padding: var(--s4) 0 calc(var(--foot-h) + var(--s1));
  }

  .home {
    grid-template:
      'bar' auto
      'stage' minmax(0, 1fr)
      'cards' auto / minmax(0, 1fr);
    height: 100svh;
    min-height: 0;
  }

  .bar {
    grid-template-columns: auto minmax(0, 1fr);
    padding-inline: var(--gutter);
  }

  /* the line moves under the bar, larger, as the page's first words */
  .bar__line {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: clamp(1.125rem, 0.9rem + 1.4vw, 1.5rem);
    font-weight: var(--w-title);
    line-height: 1.15;
    text-align: left;
    text-wrap: balance;
  }

  /* the frame takes the height the row gives it, and its width from that, in the middle */
  .stage {
    display: grid;
    justify-items: center;
    align-self: stretch;
    justify-self: stretch;
    min-height: 0;
  }

  .stage__frame {
    width: auto;
    height: 100%;
    max-width: calc(100vw - 2 * var(--gutter));
  }

  .home__cards {
    grid-area: cards;
    display: flex;
    justify-content: safe center;
    gap: var(--s3);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .home__cards::-webkit-scrollbar {
    display: none;
  }

  .card {
    flex: 0 0 min(320px, 80vw);
    align-self: stretch;
    gap: var(--s4);
    padding: var(--s4) var(--s5) var(--s5);
    scroll-snap-align: start;
  }

  .dock {
    display: none;
  }

  .foot {
    padding-inline: var(--gutter);
  }
}

/* The way down to the cards on a phone: hidden elsewhere. */
.home__more {
  display: none;
}

/* On a phone the home page is two screens that lock as you swipe: the bar, the line and the cut as tall as the
   screen allows, with the way down to the cards at its foot; then the two cards one above the other, each half the
   screen, and the footer line. The screens are exactly the window's height: the cards' row is the second screen less
   the gap above it and the footer's room below. */
@media (max-width: 639px) {
  html:has(.home) {
    scroll-snap-type: y mandatory;
  }

  .home {
    grid-template:
      'bar' auto
      'stage' minmax(0, 1fr)
      'more' auto
      'cards' calc(100svh - var(--s4) - var(--foot-h) - var(--s1)) / minmax(0, 1fr);
    height: 200svh;
  }

  .bar,
  .home__cards {
    scroll-snap-align: start;
    scroll-margin-top: var(--s4);
  }

  .bar__end {
    display: none;
  }

  .home__more {
    grid-area: more;
    justify-self: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--s1) var(--s4) var(--s2);
    color: var(--text-2);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
  }

  .home__more svg {
    width: 18px;
    height: 18px;
    animation: nudge 2.4s var(--ease) infinite;
  }

  .home__cards {
    flex-direction: column;
    justify-content: normal;
    overflow: visible;
    scroll-snap-type: none;
  }

  .card {
    flex: 1 1 0;
    min-height: 0;
    align-content: space-between;
    width: auto;
    padding: var(--s5);
  }
}

/* A short phone: the cards keep their names and leave out the lines under them. */
@media (max-width: 639px) and (max-height: 760px) {
  .step__line,
  .option span span {
    display: none;
  }

  .steps {
    gap: var(--s3);
  }

  .option {
    padding-block: var(--s2);
  }

  .store {
    min-height: 52px;
  }
}

/* The way down nods once in a while, so it reads as one; still for less motion. */
@keyframes nudge {
  0%,
  60%,
  100% {
    transform: none;
  }

  75% {
    transform: translateY(4px);
  }
}

/* The privacy page, in the home page's frame: under the bar its title, large, and what it comes to on the left, and
   its six parts as glass tiles on the right, in the middle of the screen; one screen from a tablet up, a column that
   scrolls on a phone. */
.policy {
  grid-template:
    'bar' auto
    'body' minmax(0, 1fr) / minmax(0, 1fr);
}

.policy__body {
  grid-area: body;
  display: grid;
  align-content: center;
  align-items: center;
  gap: var(--s5) clamp(var(--s6), 4vw, 72px);
  width: min(100%, 1320px);
  justify-self: center;
}

.policy__head {
  display: grid;
  align-content: start;
  gap: var(--s4);
}

/* the title in the tiles' own face, upright at its normal width, only larger */
.policy__title {
  margin-top: -0.12em; /* its cap height, not its line box, level with the tiles' top */
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4rem);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.02em;
}

.policy__intro {
  max-width: 30rem;
  color: var(--text);
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  font-weight: 480;
  line-height: 1.42;
  text-wrap: pretty;
}

.policy__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--s4);
}

.policy__item {
  display: grid;
  align-content: start;
  gap: var(--s2);
  padding: var(--s5);
  border-radius: var(--r-tile);
}

.policy__item h2 {
  font-size: var(--t-md);
  font-weight: 620;
  line-height: 1.3;
}

.policy__item p {
  color: var(--text-2);
  font-size: var(--t-base);
  line-height: 1.55;
  text-wrap: pretty;
}

/* beside the tiles, the title starts level with their top and what it comes to ends level with their bottom */
@media (min-width: 1100px) {
  .policy__body {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: stretch;
  }

  .policy__head {
    align-content: space-between;
  }

  .policy__intro {
    margin-bottom: -0.3em; /* its last line's baseline, not its line box, level with the tiles' bottom */
  }
}

@media (max-width: 1099px) {
  .policy__body {
    width: auto;
    padding-inline: var(--gutter);
  }
}

/* The 404 page: one glass card in the middle of the screen. */
body:has(.lost) {
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.lost {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  max-width: 420px;
  padding: var(--s7) var(--s6);
  border-radius: var(--r-tile);
  color: var(--text-2);
  text-align: center;
}

.lost__title {
  color: var(--text);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  font-style: italic;
  font-weight: var(--w-title);
  font-stretch: var(--title-stretch);
  line-height: 1.1;
  text-wrap: balance;
}

/* Asked for less motion: nothing eases or gives, and site.js leaves the clip paused on its first frame. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  a.glass:active,
  button.glass:active,
  .button:active {
    transform: none;
  }
}

/* More contrast asked for: the glass nearly solid, every grey one step lighter. */
@media (prefers-contrast: more) {
  :root {
    --text-2: rgb(244 244 245 / 0.94);
    --text-3: rgb(244 244 245 / 0.82);
    --glass-tint: rgb(14 14 18 / 0.92);
    --line: rgb(255 255 255 / 0.26);
    --line-strong: rgb(255 255 255 / 0.42);
  }
}