/* Spec: specs/website.md R3, R15, R16 */
/* The product website. Dark photo scenes ask a question in giant type, paper scenes answer it with a piece of
   the product. Mobile first, no script. Everything is visible without animation; the scroll effects at the
   end of this file are an extra for browsers that have them. */

/* Barlow and Barlow Condensed (SIL Open Font License, fonts/OFL-*.txt), latin subset, served from here. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/barlow-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}
/* Stands in while Barlow Condensed loads, or if it never does: a system bold squeezed to about its width, so
   the giant lines, which are sized to fill the page, cannot run off it. */
@font-face {
  font-family: 'Velomi Poster Fallback';
  font-weight: 700;
  src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Arial Bold'), local('Arial-BoldMT'),
    local('Helvetica Neue Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Liberation Sans Bold'),
    local('Roboto'), local('Roboto-Regular');
  size-adjust: 70%;
}

:root {
  /* The app's tokens (src/app/globals.css). Change both together. */
  --paper: #f4f2ed;
  --ink: #15171c;
  --ink-2: #3b3f48;
  --muted: #585d68;
  --line: #e2ded5;
  --line-soft: #eeeae2;
  --field: #cfc9bd;
  --accent: #c2410c;
  --accent-dark: #9a3412;
  --accent-soft: #fbebe2;
  --yes: #166534;
  --yes-soft: #e3f0e6;
  --lead: #1e3a5f;
  --lead-soft: #e4eaf2;
  --g1: #1e3a5f;
  --g2: #2e6a76;
  --g3: #6b3fa0;
  --on-dark: #dcd8cf;
  --sans: 'Barlow', system-ui, sans-serif;
  --display: 'Barlow Condensed', 'Velomi Poster Fallback', system-ui, sans-serif;

  --bar: 56px;
  --gutter: clamp(16px, 5.4vw, 56px);
  --max: 1360px;
  /* Side padding of every scene: the gutter, or whatever centres a column of --max. */
  --pad: max(var(--gutter), calc((100vw - var(--max)) / 2));
  --measure: min(100vw - 2 * var(--gutter), var(--max));
  --space: clamp(64px, 16vw, 160px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--bar);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
}

img,
picture {
  display: block;
}

main {
  overflow-x: clip;
}

/* Focus: orange on paper, white with a dark inner ring on dark, photographic and coloured grounds. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.top :focus-visible,
.dark :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ink);
}

.sprite {
  position: absolute;
}

.icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keeps "E-Mail" from breaking at its hyphen. */
.nw {
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 8px;
}

.paper {
  background: var(--paper);
  color: var(--ink);
}

.dark {
  background: var(--ink);
  color: #fff;
}

/* Poster type: one size per headline, computed from the width of its widest line (--k, measured in em for
   Barlow Condensed Bold plus 2%), so a line fills its column and cannot overflow. --cap limits it on low screens. */
.box {
  container-type: inline-size;
}

.poster {
  --top: 15rem;
  --cap: 30vh;
  font-family: var(--display);
  font-size: clamp(2.75rem, min(calc(var(--measure) / var(--k)), var(--cap)), var(--top));
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

@supports (width: 1cqi) {
  .box .poster {
    font-size: clamp(2.75rem, min(calc(100cqi / var(--k)), var(--cap)), var(--top));
  }
}

.poster .ln {
  display: block;
  overflow-wrap: anywhere;
}

.poster em {
  color: var(--accent);
  font-style: normal;
}

.k-wer {
  --k: 4.16;
}
.k-tipp {
  --k: 3.12;
}
.k-viele {
  --k: 3.65;
}
.k-schnell {
  --k: 3.68;
}
.k-fahrt {
  --k: 3.73;
}
.k-mark {
  --k: 2.66;
  --top: 60rem;
  --cap: 60rem;
}

.label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.display {
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(34px, 10.4vw, 72px);
  font-weight: 700;
  line-height: 1;
  text-wrap: balance;
}

.lead {
  max-width: 30em;
  font-size: clamp(18px, 4.6vw, 22px);
  font-weight: 500;
  line-height: 1.45;
}

.body {
  max-width: 34em;
  color: var(--ink-2);
}

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

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding-inline: 24px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

@media (hover: hover) {
  .btn:hover {
    background: var(--accent-dark);
  }
}

/* Top bar */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
}

.top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--bar);
  padding-inline: var(--pad);
}

.wordmark {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.top-what {
  display: none;
  color: rgb(244 242 237 / 0.72);
  font-size: 13px;
  font-weight: 500;
}

.top-cta {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-left: auto;
  padding-inline: 16px;
  border: 1px solid rgb(244 242 237 / 0.6);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

@media (hover: hover) {
  .top-cta:hover {
    background: var(--paper);
    color: var(--ink);
  }
}

/* 1 · Hero. On phones the photo fills the upper part and melts into the dark ground, the question stands in
   its sky and the words follow below. On wider screens the photo fills the scene. If the photo is missing, a
   gradient in its colours stays. The scene is a little lower than the screen, so the next one shows at its
   foot and nobody takes the photo for the whole page. */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(86vh - var(--bar));
  min-height: calc(86svh - var(--bar));
  padding-inline: var(--pad);
  overflow: clip;
}

.hero-photo {
  position: absolute;
  z-index: -2;
  inset: clamp(44px, 11vh, 96px) 0 auto;
  inset: clamp(44px, 11svh, 96px) 0 auto;
  height: min(125vw, 64vh);
  height: min(125vw, 64svh);
  overflow: clip;
  background: linear-gradient(to bottom, #67596a 0%, #c9916a 42%, #3c4433 64%, var(--ink) 100%);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgb(21 23 28 / 0.45) 14%, rgb(21 23 28 / 0) 40%),
    linear-gradient(to top, var(--ink) 0%, rgb(21 23 28 / 0.82) 12%, rgb(21 23 28 / 0.5) 26%, rgb(21 23 28 / 0) 46%);
}

@media (max-width: 600px) and (orientation: portrait) and (max-height: 639px) {
  .hero-photo::after {
    background:
      linear-gradient(to bottom, var(--ink) 0%, rgb(21 23 28 / 0.45) 14%, rgb(21 23 28 / 0) 40%),
      linear-gradient(
        to top,
        var(--ink) 0%,
        rgb(21 23 28 / 0.82) 12%,
        rgb(21 23 28 / 0.5) 26%,
        rgb(21 23 28 / 0.28) 48%,
        rgb(21 23 28 / 0) 64%
      );
  }
}

.hero-title {
  padding-top: clamp(14px, 3.5vh, 40px);
}

.hero .poster {
  --cap: 25vh;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: auto;
  padding-block: 24px clamp(24px, 5vh, 48px);
}

/* 2 · One tap. The enlarged answer buttons stay pinned while three short lines pass. */

.tip {
  padding: clamp(24px, 4vh, 96px) var(--pad) 40px;
}

.tip-head {
  margin-bottom: 24px;
}

.tip-head .poster {
  margin-top: 12px;
}

.tip-stage {
  position: sticky;
  top: var(--bar);
  z-index: 2;
  margin-inline: calc(-1 * var(--pad));
  padding: 16px 0 22px var(--pad);
  background: var(--paper);
}

.tip-stage::after {
  content: '';
  position: absolute;
  inset: 100% 0 auto;
  height: 32px;
  background: linear-gradient(to bottom, var(--paper), rgb(244 242 237 / 0));
}

.stage-label {
  color: var(--muted);
  font-size: 13px;
}

/* The example is an email on a phone. On a phone the reader's own screen is the phone, so there is no frame,
   only the mail's sender and subject; on wider screens the mail lies in the top of a large phone (further down). */
.phone-bar {
  display: none;
}

.mail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-right: var(--pad);
}

.mail-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
}

.mail-from {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.mail-sender {
  color: var(--muted);
  font-size: 13px;
}

.mail-subject {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-mail {
  margin-block: 10px 14px;
  padding-right: var(--pad);
  font-size: clamp(18px, 4.9vw, 22px);
  line-height: 1.35;
}

.stage-count {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 16px;
}

.stage-link {
  color: var(--accent);
  font-weight: 600;
}

/* Pieces of the product, drawn in HTML. Everything inside .ui is sized in em, so --u scales a whole piece. */

.ui {
  --u: clamp(18px, 5.2vw, 25px);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  font-size: var(--u);
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18em;
  min-height: 3.5em;
  padding: 0.6em 1em;
  border-radius: 1em 0 0 1em;
  color: #fff;
  font-weight: 600;
}

.choice-g1 {
  background: var(--g1);
}

.choice-g2 {
  padding-right: calc(clamp(20px, 9%, 72px) + 2.2em);
  background: var(--g2);
}

.choice-no {
  min-height: 3em;
  border: 1px solid var(--field);
  border-right: 0;
  background: #fff;
  color: var(--ink);
  font-size: 0.95em;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1em;
}

.choice-name {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.choice-style {
  padding: 0.12em 0.7em;
  border-radius: 999px;
  background: #fff;
  font-size: 0.6em;
}

.choice-g1 .choice-style {
  color: var(--g1);
}

.choice-g2 .choice-style {
  color: var(--g2);
}

.choice-meta {
  flex-basis: 100%;
  font-size: 0.76em;
  font-weight: 500;
}

.choice-note {
  font-size: 0.7em;
  font-weight: 400;
}

/* The tap: a fingertip on the button for group 2. */
.tap {
  position: absolute;
  top: 50%;
  right: clamp(20px, 9%, 72px);
  width: 1.9em;
  height: 1.9em;
  margin-top: -0.95em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.94);
  box-shadow:
    0 0 0 0.45em rgb(255 255 255 / 0.3),
    0 0 0 1em rgb(255 255 255 / 0.14);
}

.tap::after {
  content: '';
  position: absolute;
  inset: -1em;
  border: 2px solid rgb(255 255 255 / 0.75);
  border-radius: 50%;
  opacity: 0;
}

.tip-notes {
  padding-bottom: clamp(24px, 8vw, 80px);
}

.note {
  min-height: 34vh;
  min-height: 34svh;
  padding-top: 40px;
  font-family: var(--display);
  font-size: clamp(26px, 7.6vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

.note-small {
  display: block;
  margin-top: 10px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

/* What leaders and board get out of it: three plain outcomes, right after the buttons. */

.gain {
  padding: clamp(28px, 7vw, 64px) var(--pad) var(--space);
}

.gain-list {
  display: grid;
  margin-top: 26px;
}

.gain-item {
  padding-block: 18px 26px;
  border-top: 3px solid var(--ink);
}

.gain-title {
  font-family: var(--display);
  font-size: clamp(26px, 7.6vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

.gain-item .body {
  margin-top: 8px;
}

/* A question on a photograph. The dark veil belongs to the text block, not to the screen, so the
   words always stand on it: at least 58% under the headline. */

.scene {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - var(--bar));
  min-height: calc(100svh - var(--bar));
  padding-inline: var(--pad);
  overflow: clip;
}

.scene-photo {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: clip;
  background: linear-gradient(to bottom, #b9b5ac 0%, #6f6d69 45%, var(--ink) 100%);
}

.scene-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-copy {
  position: relative;
  padding-block: 7rem clamp(24px, 6vh, 56px);
}

.scene-copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--pad));
  background: linear-gradient(
    to bottom,
    rgb(21 23 28 / 0) 0,
    rgb(21 23 28 / 0.58) 6.5rem,
    rgb(21 23 28 / 0.72) 60%,
    rgb(21 23 28 / 0.94) 100%
  );
}

/* 4 · Numbers */

.count {
  display: grid;
  gap: 40px;
  padding: var(--space) var(--pad);
}

.score {
  margin-top: 14px;
  border-bottom: 1px solid var(--line);
}

.score-row {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  column-gap: 14px;
  padding-block: 14px 16px;
  border-top: 1px solid var(--line);
}

.num {
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-size: clamp(112px, 36vw, 300px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.02em;
}

.num-yes {
  color: var(--yes);
}

/* "12 without an answer" is only an outline: a number without names. */
.num-none {
  color: var(--muted);
}

@supports (-webkit-text-stroke: 1px #000) {
  .num-none {
    color: transparent;
    -webkit-text-stroke: 3px var(--muted);
  }
}

.score-what {
  align-self: end;
  font-family: var(--display);
  font-size: clamp(26px, 7.6vw, 44px);
  font-weight: 700;
  line-height: 1;
}

.score-note {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.4;
}

.count-text {
  display: grid;
  gap: 14px;
}

.count-card {
  --u: clamp(17px, 4.6vw, 21px);
}

.group {
  display: flex;
  flex-direction: column;
  padding: 0.85em 1em 0.35em;
  border: 1px solid var(--line);
  border-radius: 1em;
  background: #fff;
}

.group-head {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding-bottom: 0.75em;
}

.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border-radius: 0.55em;
  color: #fff;
  font-family: var(--display);
  font-size: 1.05em;
  font-weight: 700;
}

.tag-g2 {
  background: var(--g2);
}

.group-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.group-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
}

.group-meta {
  color: var(--muted);
  font-size: 0.82em;
}

.group-count {
  font-family: var(--display);
  font-size: 1.45em;
  font-weight: 700;
}

.pill {
  padding: 0.12em 0.65em;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
}

.pill-nodrop {
  background: var(--yes-soft);
  color: var(--yes);
}

.pill-lead {
  background: var(--lead-soft);
  color: var(--lead);
}

.rider {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding-block: 0.55em;
  border-top: 1px solid var(--line-soft);
}

.initials {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: #ede9e1;
  font-size: 0.76em;
  font-weight: 600;
}

.rider-name {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1em 0.5em;
  min-width: 0;
  font-size: 0.95em;
  font-weight: 500;
}

.rider-comment {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.86em;
  font-weight: 400;
}

.icon-yes {
  color: var(--yes);
}

.more {
  padding-block: 0.55em;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.82em;
}

/* The groups. The third question stands on the colours themselves; below it each answer button has grown
   into a field of its colour. */

.fields {
  display: grid;
}

.fields-title {
  padding: clamp(36px, 8vh, 80px) var(--pad) 8px;
  background-color: var(--g1);
  background-image: url('img/grain.png');
  background-size: 128px;
  background-blend-mode: overlay;
}

.field {
  display: flex;
  flex-direction: column;
  min-height: 46vh;
  min-height: 46svh;
  padding: 22px var(--pad) 30px;
  background-image: url('img/grain.png');
  background-size: 128px;
  background-blend-mode: overlay;
}

.field-g1 {
  background-color: var(--g1);
}

.field-g2 {
  background-color: var(--g2);
}

.field-g3 {
  min-height: 34vh;
  min-height: 34svh;
  background-color: var(--g3);
}

.field-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}

.field-style {
  padding: 2px 11px;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
}

.field-g1 .field-style {
  color: var(--g1);
}

.field-g2 .field-style {
  color: var(--g2);
}

.field-body {
  margin-top: auto;
  padding-top: 40px;
}

.pace {
  font-family: var(--display);
  font-size: clamp(88px, 30vw, 190px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.02em;
}

@supports (width: 1cqi) {
  .pace {
    font-size: clamp(88px, calc(100cqi / 2.9), 190px);
  }
}

.pace-u {
  font-size: 0.22em;
  letter-spacing: 0;
}

.field-line {
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(26px, 7.6vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

.field-meta {
  max-width: 26em;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
}

/* 6 · For the board */

.setup {
  display: grid;
  gap: 28px;
  padding: var(--space) var(--pad);
}

.steps {
  border-bottom: 1px solid var(--line);
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 6px;
  padding-block: 20px 22px;
  border-top: 1px solid var(--line);
}

.step-n {
  grid-row: 1 / span 2;
  min-width: 0.875em;
  font-family: var(--display);
  font-size: clamp(64px, 19vw, 144px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.01em;
}

.step-title {
  align-self: end;
  font-family: var(--display);
  font-size: clamp(26px, 7.6vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

/* 7 · Closing. The photo's black ground has the page's own dark, so the scene simply goes on below it. */

.closing {
  position: relative;
  isolation: isolate;
  padding: 0 var(--pad) clamp(48px, 12vw, 112px);
  overflow: clip;
}

.closing-photo {
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: 44vh;
  height: 44svh;
  overflow: clip;
  background: linear-gradient(to bottom, #f0a070 0%, #b08a6c 70%, var(--ink) 72%);
}

.closing-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 12% 100%;
}

.closing-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 12%;
  background: linear-gradient(to top, var(--ink), rgb(21 23 28 / 0));
}

/* The question starts in the black of the photo, just under its ridge. In the portrait crop the ridge lies at
   72% of the picture's height, which is the box's height or, on wide boxes, 25% of the width above its foot. */
.closing-title {
  padding-top: max(10vh, calc(min(31.7vh, 44vh - 25vw) + 14px));
  padding-top: max(10svh, calc(min(31.7svh, 44svh - 25vw) + 14px));
}

.closing-copy {
  display: grid;
  gap: 28px;
  margin-top: 24px;
}

.closing .lead {
  color: var(--on-dark);
}

/* The one answer button on the page that is real. */
.answer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  line-height: 1.25;
  text-decoration: none;
}

@media (hover: hover) {
  .answer:hover {
    background: var(--accent-dark);
  }
}

.answer-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.answer-name {
  font-size: 20px;
  font-weight: 600;
}

.answer-meta {
  font-size: 15px;
}

.answer-icon {
  width: 26px;
  height: 26px;
}

.address {
  margin-top: 4px;
  color: var(--on-dark);
  font-size: 16px;
  font-weight: 500;
}

.address a {
  display: inline-block;
  padding-block: 10px;
}

/* Footer */

.foot {
  padding: 36px var(--pad) 0;
  border-top: 1px solid rgb(244 242 237 / 0.14);
  overflow: clip;
  color: #b9b4a9;
  font-size: 15px;
  line-height: 1.55;
}

.foot-notes {
  display: grid;
  gap: 12px;
  max-width: 46em;
}

.foot strong {
  color: var(--paper);
  font-weight: 600;
}

.foot-legal {
  margin-top: 8px;
  font-size: 14px;
}

/* The wordmark as the last thing on the page, faint, standing on its end. */
.foot-mark {
  margin-top: 28px;
}

.k-mark {
  display: block;
  color: rgb(244 242 237 / 0.09);
  line-height: 0.8;
}

/* "Seite nicht gefunden" (404.html) */

.notfound {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: calc(100vh - var(--bar));
  min-height: calc(100svh - var(--bar));
  padding: 56px var(--pad);
}

.notfound p {
  max-width: 30em;
  color: var(--ink-2);
}

.notfound .btn {
  margin-top: 8px;
}

/* Photo credits (credits.html) */

.credits {
  max-width: 34em;
  border-bottom: 1px solid var(--line);
}

.credits li {
  padding-block: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}

.credits strong {
  color: var(--ink);
  font-weight: 600;
}

/* Impressum and privacy notice (impressum.html): the text page of the credits, with an address and one more
   heading. */

.legal address {
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}

.legal-title {
  margin-top: 28px;
  font-family: var(--display);
  font-size: clamp(26px, 7.6vw, 44px);
  font-weight: 700;
  line-height: 1.05;
}

.legal-links {
  font-size: 15px;
}

/* Wider screens */

@media (min-width: 420px) {
  .top-what {
    display: block;
  }
}

@media (min-width: 601px), (orientation: landscape) {
  .hero-photo {
    inset: 0;
    height: auto;
  }

  .hero-photo img {
    object-position: 62% 0%;
  }

  .hero-photo::after {
    background:
      linear-gradient(to bottom, rgb(21 23 28 / 0.55) 0%, rgb(21 23 28 / 0.38) 28%, rgb(21 23 28 / 0) 50%),
      linear-gradient(to top, rgb(21 23 28 / 0.94) 0%, rgb(21 23 28 / 0.62) 24%, rgb(21 23 28 / 0) 54%);
  }

  .hero-copy {
    align-items: flex-start;
    max-width: 36em;
  }
}

/* Wider than high: the closing photo is the landscape crop (ridge at 70.75% of its height). */
@media (min-aspect-ratio: 1001/1000) {
  .closing-photo {
    height: 58vh;
    height: 58svh;
  }

  .closing-photo img {
    object-position: 20% 100%;
  }

  .closing-title {
    padding-top: max(10vh, calc(min(41vh, 58vh - 11.2vw) + 14px));
    padding-top: max(10svh, calc(min(41svh, 58svh - 11.2vw) + 14px));
  }
}

@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .poster.one .ln {
    display: inline-block;
  }

  .k-wer {
    --k: 6.12;
  }
  .k-viele {
    --k: 7.35;
  }
  .k-schnell {
    --k: 5.27;
  }
  .k-fahrt {
    --k: 5.68;
  }

  .score-row {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  }

  .answer {
    max-width: 30em;
  }
}

/* From tablet width the example email lies in the top of a large phone, cut off at its foot. */
@media (min-width: 700px) {
  .tip-stage {
    margin-inline: 0;
    padding-left: 0;
  }

  .stage-label {
    text-align: center;
  }

  .phone {
    position: relative;
    container-type: inline-size;
    width: min(100%, 35rem);
    margin: 10px auto 0;
    padding: 0 22px 48px;
    border: 12px solid var(--ink);
    border-bottom: 0;
    border-radius: 56px 56px 0 0;
    background: #fff;
  }

  .phone::after {
    content: '';
    position: absolute;
    inset: auto -12px 0;
    height: 56px;
    background: linear-gradient(to bottom, rgb(244 242 237 / 0), var(--paper));
  }

  .phone-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 54px;
    padding-inline: 12px;
    font-size: 15px;
    font-weight: 600;
  }

  .phone-island {
    width: 96px;
    height: 28px;
    border-radius: 999px;
    background: var(--ink);
  }

  .phone-battery {
    justify-self: end;
    width: 26px;
    height: 13px;
    border-radius: 4px;
    background: var(--ink);
  }

  .mail-head {
    margin-top: 2px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--line-soft);
  }

  .mail-avatar {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .mail-sender {
    font-size: 14px;
  }

  .mail-subject {
    font-size: 17px;
  }

  .stage-mail {
    margin-block: 16px;
    padding-right: 0;
  }

  .phone .ui {
    --u: clamp(17px, 2.2vw, 24px);
  }

  @supports (width: 1cqi) {
    .phone .ui {
      --u: clamp(17px, min(4.6cqi, 3vh), 24px);
    }
  }

  .phone .choice {
    border-radius: 1em;
  }

  .phone .choice-no {
    border-right: 1px solid var(--field);
  }
}

@media (min-width: 960px) {
  :root {
    --bar: 64px;
  }

  body {
    font-size: 18px;
  }

  .label {
    font-size: 14px;
  }

  /* One tap: the lines scroll on the left, the buttons stay on the right and run off the page. */
  .tip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 96px);
    padding-top: clamp(52px, 9vh, 96px);
    padding-bottom: 0;
  }

  .tip-head {
    grid-area: 1 / 1;
    margin-bottom: 8px;
  }

  /* Only for browsers without container units: this headline stands in half of the column. */
  .tip-head .poster {
    --measure: calc((min(100vw - 2 * var(--gutter), var(--max)) - clamp(32px, 5vw, 96px)) / 2);
  }

  .tip-notes {
    grid-area: 2 / 1;
  }

  .note {
    min-height: 46vh;
    min-height: 46svh;
    padding-top: 40px;
  }

  .note:last-child {
    min-height: 20vh;
    min-height: 20svh;
  }

  .tip-stage {
    grid-area: 1 / 2 / span 2;
    align-self: start;
    top: calc(var(--bar) + 4vh);
    padding: 0 0 24px;
  }

  .tip-stage::after {
    content: none;
  }

  .count-card {
    --u: clamp(18px, 1.6vw, 23px);
  }

  /* The three outcomes side by side. */
  .gain-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
    margin-top: 40px;
  }

  .gain-title {
    font-size: clamp(24px, 2.35vw, 36px);
  }

  /* Numbers: a scoreboard of three. */
  .count {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(40px, 8vw, 128px);
    row-gap: 72px;
    align-items: start;
  }

  .count-head {
    grid-column: 1 / -1;
  }

  .score {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
  }

  .score-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 24px 30px 0;
    border-top: 0;
  }

  .score-row + .score-row {
    padding-left: 28px;
    border-left: 1px solid var(--line);
  }

  .num {
    font-size: clamp(180px, 21vw, 300px);
  }

  .score-what {
    align-self: auto;
    margin-top: 10px;
  }

  /* The groups: three lanes side by side. The section carries the three colours, so the question can run
     across all of them. */
  .fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background-color: var(--g2);
    background-image:
      url('img/grain.png'),
      linear-gradient(to right, var(--g1) 0 33.334%, var(--g2) 33.334% 66.667%, var(--g3) 66.667% 100%);
    background-size:
      128px,
      auto;
    background-blend-mode: overlay, normal;
  }

  .fields-title {
    grid-column: 1 / -1;
    padding: clamp(36px, 8vh, 80px) clamp(20px, 2.6vw, 44px) 0;
    background: none;
  }

  .fields-title .poster {
    --top: 24rem;
  }

  .field,
  .field-g3 {
    min-height: 52vh;
    min-height: 52svh;
    padding: 28px clamp(20px, 2.6vw, 44px) 40px;
    background: none;
  }

  .pace {
    font-size: clamp(88px, 10vw, 190px);
  }

  @supports (width: 1cqi) {
    .pace {
      font-size: clamp(88px, calc(100cqi / 2.9), 190px);
    }

    /* "Das Tempo wird gehalten." on one line in its lane, so both numbers stand on the same height. */
    .field-line {
      font-size: clamp(26px, calc(100cqi / 9.8), 44px);
    }
  }

  /* For the board: the headline stays while the steps pass. */
  .setup {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 8vw, 128px);
    align-items: start;
  }

  .setup-head {
    position: sticky;
    top: calc(var(--bar) + 48px);
  }

  .step {
    padding-block: 32px 36px;
  }

  .closing-copy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 8vw, 128px);
    align-items: start;
    margin-top: 32px;
  }
}

/* Low screens (phones held sideways, low windows): the example email is not pinned. This stands after the
   wide-screen rules on purpose, because they set the same properties. */

@media (max-height: 699px) {
  .tip-stage {
    position: static;
  }

  .tip-stage::after {
    content: none;
  }

  .note,
  .note:last-child {
    min-height: 0;
  }
}

/* Low and wide (a phone held sideways): the hero's words reach up into the bright part of the photo, so
   they get their own veil, as the questions on the other photos have. */

@media (orientation: landscape) and (max-height: 639px) {
  .hero-copy {
    position: relative;
    max-width: none;
  }

  .hero-copy::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -3rem calc(-1 * var(--pad)) 0;
    background: linear-gradient(to bottom, rgb(21 23 28 / 0) 0, rgb(21 23 28 / 0.66) 3rem, rgb(21 23 28 / 0.94) 100%);
  }
}

/* Extras for browsers with scroll-driven animation, and only where motion is welcome. Only transform and
   opacity move; nothing here hides content. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  @supports (animation-timeline: view()) {
    .hero-photo img,
    .scene-photo img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .tap::after {
      animation: ring linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }

    .rise .ln,
    .num,
    .step-n,
    .pace {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

@keyframes ring {
  0% {
    opacity: 0.9;
    transform: scale(0.42);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes drift {
  from {
    transform: scale(1.08) translateY(-2.5%);
  }
  to {
    transform: scale(1.08) translateY(2.5%);
  }
}

@keyframes rise {
  from {
    opacity: 0.25;
    transform: translateY(0.28em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}