/* wubba.studio
   One stylesheet: tokens, base, layout, components, pages, motion, print.
   The site reads like a media kit: black sheet, white type, one green that only marks the point. */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: dark;

  --black: #000000;
  --white: #ffffff;
  --green: #72ac0e;            /* the point: logo dot, decimal point, primary action, focus */
  --green-lift: #86c61c;
  --ink: #ffffff;
  --ink-2: #b9b9b9;            /* 11:1 on black */
  --ink-3: #8f8f8f;            /* 6.6:1 on black */
  --line-ui: #6b6b6b;          /* 3.9:1 on black: borders that show where to type or tap */
  --rule: #262626;             /* decorative hairlines only */
  --rule-2: #3a3a3a;
  --error: #ff6a55;            /* 7.4:1 on black */
  --dot: var(--green);

  --display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-meta: 0.8125rem;
  --fs-small: 0.9375rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lede: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  --fs-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.625rem);
  --fs-h2: clamp(2rem, 1.3rem + 3vw, 4rem);
  --fs-h1: clamp(2.125rem, 1.2rem + 3.6vw, 4.5rem);
  --fs-big: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);

  --pad: clamp(16px, 4vw, 56px);
  --pad-l: max(var(--pad), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--pad), env(safe-area-inset-right, 0px));
  --safe-top: env(safe-area-inset-top, 0px);
  --max: 1440px;
  --gap: clamp(16px, 2vw, 28px);
  --bar-h: 64px;
  --section: clamp(72px, 10vw, 168px);

  /* motion tokens (transitions.dev scale) */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: ease-in-out;
  --distance-micro: 4px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --blur-small: 2px;
  --blur-medium: 3px;

  --text-swap-dur: 150ms;
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- base */

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

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + var(--safe-top) + 24px);
  scrollbar-color: var(--rule-2) var(--black);
  background: var(--black);
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--black);
  color: var(--ink);
  font: 400 var(--fs-body) / 1.55 var(--text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
fieldset {
  margin: 0;
}

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

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

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: inherit;
}

a,
button,
label,
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

::selection {
  background: var(--green);
  color: var(--black);
}

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

input,
textarea,
button,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  user-select: none;
}

.skip {
  position: absolute;
  left: var(--pad-l);
  top: calc(var(--safe-top) + 12px);
  z-index: 60;
  padding: 12px 16px;
  background: var(--white);
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}

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

.bar-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
  pointer-events: none;
}

.nowrap {
  white-space: nowrap;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
}

.section {
  padding-block: var(--section);
}

.section + .section {
  border-top: 1px solid var(--rule);
}

.section--flush {
  padding-top: 0;
}

.section--ruled {
  border-top: 1px solid var(--rule);
}

.section + .section--flush {
  border-top: 0;
}

.after-h2 {
  margin-top: clamp(40px, 5vw, 72px);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 46ch;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.prose {
  max-width: 62ch;
  color: var(--ink-2);
}

.prose > * + * {
  margin-top: 1em;
}

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

/* ---------------------------------------------------------------- buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 0;
  font: 600 1rem / 1 var(--text);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-smooth-out),
    border-color var(--duration-fast) var(--ease-smooth-out),
    color var(--duration-fast) var(--ease-smooth-out),
    transform var(--duration-quick) var(--ease-smooth-out);
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn--green {
  background: var(--green);
  color: var(--black);
}

.btn--green:hover {
  background: var(--green-lift);
}

.btn--line {
  border-color: var(--line-ui);
  color: var(--ink);
  background: transparent;
}

.btn--line:hover {
  border-color: var(--white);
}

/* black on the green disc */
.btn--ink {
  background: var(--black);
  color: var(--white);
}

.btn--ink:hover {
  background: var(--white);
  color: var(--black);
}

.btn--small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9375rem;
}

.btn--big {
  min-height: 56px;
  padding: 0 28px;
  font-size: 1.0625rem;
}

.btn .icon {
  font-size: 1.125em;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}

.btn:hover .icon--shuffle {
  transform: rotate(-12deg);
}

.btn[target="_blank"]:hover .icon {
  transform: translate(2px, -2px);
}

/* text swap (transitions.dev): used by buttons whose label changes */
.btn .swap,
.copy .swap,
.handoff__copy .swap {
  display: inline-block;
  transition:
    transform var(--text-swap-dur) var(--ease-in-out),
    filter var(--text-swap-dur) var(--ease-in-out),
    opacity var(--text-swap-dur) var(--ease-in-out);
}

.btn .swap.is-exit,
.copy .swap.is-exit,
.handoff__copy .swap.is-exit {
  transform: translateY(calc(var(--distance-micro) * -1));
  filter: blur(var(--blur-small));
  opacity: 0;
}

.btn .swap.is-enter-start,
.copy .swap.is-enter-start,
.handoff__copy .swap.is-enter-start {
  transform: translateY(var(--distance-micro));
  filter: blur(var(--blur-small));
  opacity: 0;
  transition: none;
}

.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: var(--line-ui);
  transition:
    text-decoration-color var(--duration-fast) var(--ease-smooth-out),
    color var(--duration-fast) var(--ease-smooth-out);
}

.link:hover {
  text-decoration-color: var(--green);
}

.link-ext {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-ui);
  transition: border-color var(--duration-fast) var(--ease-smooth-out);
}

.link-ext .icon {
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}

.link-ext:hover {
  border-color: var(--green);
}

.link-ext:hover .icon {
  transform: translate(2px, -2px);
}

.link-ext:hover .icon--arrow {
  transform: translateX(3px);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

/* ---------------------------------------------------------------- top bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: calc(var(--bar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  background: rgb(0 0 0 / 0);
  transition:
    background-color var(--duration-medium) var(--ease-smooth-out),
    box-shadow var(--duration-medium) var(--ease-smooth-out);
  view-transition-name: bar;
}

.bar.is-stuck {
  background: rgb(0 0 0 / 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 -1px 0 var(--rule);
}

.bar__in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar__logo {
  display: block;
  width: 104px;
  color: var(--white);
  margin-right: auto;
  padding-block: 10px;
}

.bar__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-right: 20px;
  view-transition-name: bar-nav;
}

.bar__nav a {
  position: relative;
  padding-block: 12px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-smooth-out);
}

.bar__nav a:hover,
.bar__nav a[aria-current="page"] {
  color: var(--white);
}

/* the point marks where you are */
.bar__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--dot);
}

.bar__cta {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9375rem;
  view-transition-name: bar-cta;
  transition:
    background-color var(--duration-fast) var(--ease-smooth-out),
    border-color var(--duration-fast) var(--ease-smooth-out),
    color var(--duration-fast) var(--ease-smooth-out),
    opacity var(--duration-quick) var(--ease-smooth-out),
    visibility 0s linear 0s;
}

/* one green action per screen: while the page shows its own, the bar's button steps back to an
   outline, in place, so the navigation never moves. Pages whose action sits on the first screen
   start that way (set before first paint); on /brief it stays an outline. */
.primary-in-view .bar__cta,
.bar__cta[aria-current="page"] {
  border-color: var(--line-ui);
  background: transparent;
  color: var(--ink);
}

.primary-in-view .bar__cta:hover,
.bar__cta[aria-current="page"]:hover {
  border-color: var(--white);
  background: transparent;
}

/* the open menu carries its own button; this one keeps its place, unseen */
.menu-open .bar__cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-quick) var(--ease-smooth-out),
    visibility 0s linear var(--duration-quick);
}

.bar__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.burger {
  position: relative;
  display: block;
  width: 22px;
  height: 12px;
}

.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--duration-fast) var(--ease-smooth-out),
    top var(--duration-fast) var(--ease-smooth-out);
}

.burger::before {
  top: 0;
}

.burger::after {
  top: 10.5px;
}

.bar__menu[aria-expanded="true"] .burger::before {
  top: 5.25px;
  transform: rotate(45deg);
}

.bar__menu[aria-expanded="true"] .burger::after {
  top: 5.25px;
  transform: rotate(-45deg);
}

@media (max-width: 880px) {
  .bar__nav {
    display: none;
  }
  .bar__menu {
    display: inline-flex;
  }
  .bar__cta {
    padding: 0 14px;
  }
  .bar__logo {
    width: 92px;
  }
}

/* ---------------------------------------------------------------- mobile menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad-r) max(24px, env(safe-area-inset-bottom, 0px)) var(--pad-l);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--black);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-quick) var(--ease-smooth-out),
    visibility 0s linear var(--duration-quick);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--duration-fast) var(--ease-smooth-out),
    visibility 0s linear 0s;
}

.menu__spacer {
  flex: none;
  height: calc(var(--bar-h) + var(--safe-top));
}

/* the bar stays on top while the menu is open, so the burger can turn into the close button */
.menu-open .bar {
  background: var(--black);
  box-shadow: inset 0 -1px 0 var(--rule);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.menu-open body {
  overflow: hidden;
}

.menu__links {
  margin-top: 5vh;
  display: grid;
  gap: 2px;
}

.menu__links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 8px;
  font: 700 clamp(2.25rem, 10vw, 3.5rem) / 1.08 var(--display);
  letter-spacing: -0.035em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(var(--distance-medium));
  filter: blur(var(--blur-medium));
  transition:
    opacity var(--duration-very-slow) var(--ease-smooth-out),
    transform var(--duration-very-slow) var(--ease-smooth-out),
    filter var(--duration-very-slow) var(--ease-smooth-out);
  transition-delay: calc(var(--i, 0) * var(--duration-stagger) + 60ms);
}

.menu__links a:nth-child(2) {
  --i: 1;
}

.menu__links a:nth-child(3) {
  --i: 2;
}

.menu__links a:nth-child(4) {
  --i: 3;
}

.menu__links a[aria-current="page"]::after {
  content: "";
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: var(--dot);
}

.menu.is-open .menu__links a {
  opacity: 1;
  transform: none;
  filter: none;
}

.menu__foot {
  margin-top: auto;
  padding-top: 40px;
  display: grid;
  gap: 16px;
}

.menu__figure {
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
}

.menu__num {
  font: 700 clamp(3.25rem, 17vw, 5rem) / 0.8 var(--display);
  letter-spacing: -0.04em;
}

.menu__cap {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-2);
}

.menu__foot .btn {
  width: 100%;
}

.menu__mail {
  font-size: var(--fs-small);
  color: var(--ink-3);
}

@media (max-height: 500px) {
  .menu__links {
    margin-top: 8px;
    grid-template-columns: repeat(2, max-content);
    column-gap: 40px;
  }
  .menu__links a {
    padding-block: 2px;
    font-size: 1.75rem;
  }
  .menu__figure {
    display: none;
  }
  .menu__foot {
    padding-top: 16px;
  }
}

/* ---------------------------------------------------------------- hero: the headline, the figure, the twist */

.hero {
  --hero-rest: calc(332px + 7.1vw);
  container-type: inline-size;
  padding-top: clamp(20px, 3.2vw, 48px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

.hero__head {
  display: grid;
  gap: 24px;
}

.hero__title {
  font-size: clamp(2.5rem, 1.25rem + 3.4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.hero__sub {
  display: block;
  max-width: 30em;
  margin-top: 0.55em;
  font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink-2);
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* wide screens: the actions sit beside the subheadline, under the headline */
@media (min-width: 1180px) {
  .hero__head {
    grid-template: auto / minmax(0, 1fr);
  }
  .hero__title,
  .hero__actions {
    grid-area: 1 / 1;
  }
  .hero__actions {
    justify-self: end;
    align-self: end;
  }
  .hero__sub {
    max-width: min(30em, calc(100cqi - 440px));
  }
  .hero {
    --hero-rest: calc(248px + 7.1vw);
  }
}

/* the figure is its own container, so 98.8M spans whatever column it sits in */
.figure {
  container-type: inline-size;
  margin-top: clamp(24px, 3vw, 48px);
}

.figure__num {
  display: block;
  margin-left: -0.035em;
  font: 700 calc(100cqi / 2.99) / 0.78 var(--display);
  letter-spacing: -0.04em;
  white-space: nowrap;
  font-variant-numeric: lining-nums proportional-nums;
}

/* inline, never inline-block: the figure stays one run of text, so it copies, finds and prints
   as 98.8M. The glyphs move with `top`, which works on inline boxes where transforms do not;
   print sets them back to static so they print in reading order. */
.figure__num .g,
.figure__num .point {
  position: relative;
}

/* the decimal point is the logo's dot: round, green. It is the real "." of the figure, set in
   Figtree, whose period is round where Sora's is square: 0.18em of the figure, sitting on the
   baseline, tight to the digit before it. Line height 0 keeps the larger size out of the line box. */
.point {
  margin: 0 0.0036em 0 -0.0222em;
  font: 600 1.282em / 0 var(--text);
  vertical-align: 0.0144em;
  color: var(--dot);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.figure__num .g:nth-child(2) {
  --i: 1;
}

.figure__num .g:nth-child(4) {
  --i: 2;
}

.figure__num .g:nth-child(5) {
  --i: 3;
}

.figure__cap .cell:nth-child(2) {
  --i: 1;
}

.figure__cap .cell:nth-child(3) {
  --i: 2;
}

.figure__cap {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  margin-top: clamp(10px, 1.2vw, 18px);
  border-top: 1px solid var(--rule-2);
}

.cell {
  padding: 14px 20px 0 0;
}

.cell + .cell {
  padding-left: 20px;
  border-left: 1px solid var(--rule);
}

.cell__k {
  font: 500 var(--fs-meta) / 1.4 var(--mono);
  color: var(--ink-3);
}

.cell__v {
  margin-top: 4px;
  font: 500 0.9375rem / 1.4 var(--mono);
  color: var(--ink);
}

.cell__lead {
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
}

.hero__twist {
  margin-top: clamp(20px, 2.4vw, 36px);
  font: 700 clamp(1.75rem, 1rem + 2.4vw, 3rem) / 1.04 var(--display);
  letter-spacing: -0.03em;
}

/* laptop and desktop windows that are short (1366x657, 1280x609): tighter rhythm, and the figure
   gives up a little width so "The guy in it doesn't exist." still lands on the first screen.
   It never drops below three quarters of its width; under 600px tall the two-column hook takes over. */
@media (min-width: 761px) and (max-height: 820px) and (min-height: 600px) {
  .hero {
    padding-top: 12px;
  }
  .hero__sub {
    margin-top: 0.3em;
  }
  .figure {
    margin-top: 28px;
  }
  .figure__num {
    font-size: max(calc(100cqi / 4), min(calc(100cqi / 2.99), calc((100svh - var(--hero-rest)) / 0.78)));
  }
  .figure__cap {
    margin-top: 6px;
  }
  .figure__cap .cell {
    padding-top: 10px;
  }
  .hero__twist {
    margin-top: 12px;
  }
}

/* phones: the hook first (headline, figure, twist), then the two actions; the bar holds
   "Send a brief" until they scroll into view */
@media (max-width: 760px) {
  .hero {
    display: flex;
    flex-direction: column;
  }
  .hero__head {
    display: contents;
  }
  .hero__title {
    order: 1;
  }
  .figure {
    order: 2;
  }
  .hero__twist {
    order: 3;
  }
  .hero__actions {
    order: 4;
    margin-top: 28px;
  }
}

/* the caption in two rows wherever the figure is narrow: phones, and the landscape hook's column */
@media (max-width: 760px), (min-width: 560px) and (max-height: 599px) {
  .figure__cap {
    grid-template-columns: 1fr 1fr;
  }
  .figure__cap .cell:first-child {
    grid-column: 1 / -1;
    padding-bottom: 14px;
  }
  .figure__cap .cell:nth-child(2) {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .figure__cap .cell:nth-child(3) {
    border-top: 1px solid var(--rule);
  }
}

/* on phones the two actions share the width, or each takes a full line when they wrap */
@media (max-width: 560px) {
  .hero__actions {
    gap: 10px;
  }
  .hero__actions .btn {
    flex: 1 1 auto;
    padding: 0 16px;
  }
}

/* phones on their side, and any window under 600px tall: the hook in two columns. Headline and
   actions on the left; the figure, at the full width of its column, and the twist on the right. */
@media (min-width: 560px) and (max-height: 599px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(24px, 4vw, 56px);
    padding-top: 14px;
    padding-bottom: 40px;
  }
  .hero__head {
    display: grid;
    grid-template: none;
    grid-row: 1 / span 2;
    align-content: start;
    gap: 20px;
  }
  .hero__title,
  .hero__actions {
    grid-area: auto;
  }
  .hero__title {
    font-size: clamp(1.75rem, 0.9rem + 2.9vw, 3rem);
  }
  .hero__sub {
    max-width: none;
    margin-top: 0.45em;
    font-size: clamp(1rem, 0.75rem + 0.9vw, 1.25rem);
  }
  .hero__actions {
    justify-self: start;
    align-self: start;
    margin-top: 0;
  }
  .figure {
    grid-column: 2;
    grid-row: 1;
    margin-top: 6px;
  }
  .figure__cap .cell {
    padding-top: 10px;
  }
  .figure__cap .cell:first-child {
    padding-bottom: 10px;
  }
  .hero__twist {
    grid-column: 2;
    grid-row: 2;
    margin-top: 14px;
    font-size: clamp(1.375rem, 0.8rem + 1.9vw, 2rem);
  }
}

/* ---------------------------------------------------------------- the first series (home): the horizon at page scale */

.scene {
  padding-top: clamp(40px, 6vw, 112px);
  padding-bottom: var(--section);
}

.scene__sky {
  position: relative;
  padding-bottom: clamp(72px, 11vw, 176px);
}

.scene__title {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 19ch;
}

.scene__sub {
  margin-top: 20px;
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: var(--ink-2);
}

/* one line across the whole screen, and the point floating on it: the middle of the ocean.
   The point is the hero's decimal point at the scale of the section; the facts hang from the line. */
.scene__horizon {
  position: relative;
  height: 1px;
}

.scene__horizon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--line-ui);
  transform-origin: left center;
}

.scene__point {
  position: absolute;
  left: 61%;
  bottom: 1px;
  width: clamp(28px, 4.4vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dot);
}

.scene__film {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(200px, 22vw, 300px);
}

.scene:has(.scene__film) .scene__point {
  display: none;
}

.scene__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--gap);
  align-items: start;
}

/* each fact hangs on a line dropped from the horizon */
.fact {
  position: relative;
  padding-top: clamp(56px, 6.4vw, 96px);
}

.fact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: calc(clamp(56px, 6.4vw, 96px) - 18px);
  background: var(--line-ui);
  transform-origin: top center;
}

.scene__links {
  margin-top: clamp(32px, 4vw, 48px);
}

.scene + .section {
  border-top: 1px solid var(--rule);
}

.fact__big {
  font: 700 var(--fs-big) / 1.08 var(--display);
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.fact__text {
  color: var(--ink-2);
  max-width: 52ch;
}

@media (max-width: 960px) {
  .scene__facts {
    grid-template-columns: 1fr;
  }
  .scene__film {
    position: static;
    width: min(100%, 320px);
    margin-top: 40px;
  }
}

/* ---------------------------------------------------------------- the title card, until the film arrives */

.card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  container-type: inline-size;
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--rule-2);
  color: var(--ink);
  text-decoration: none;
  --horizon: 64%;
  transition: border-color var(--duration-fast) var(--ease-smooth-out);
}

.card__in {
  position: absolute;
  inset: 0;
}

.card__date {
  position: absolute;
  top: 7cqi;
  left: 7cqi;
  font: 500 max(12px, 3.1cqi) / 1 var(--mono);
  color: var(--ink-3);
}

.card__horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizon);
  height: 1px;
  background: var(--line-ui);
}

/* the point, resting on the horizon: somewhere in the middle of the ocean */
.card__point {
  position: absolute;
  top: var(--horizon);
  left: 61%;
  width: clamp(8px, 3.2cqi, 14px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dot);
  translate: 0 -100%;
}

.card__foot {
  position: absolute;
  inset: calc(var(--horizon) + 1px) 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 4cqi;
  padding: 7cqi;
}

/* two lines, always the same break: "Counter-Strike," then "middle of the ocean" (9.7em at this
   tracking, so 8.4cqi keeps it inside the card's 86cqi) */
.card__title {
  font: 700 8.4cqi / 1.02 var(--display);
  letter-spacing: -0.03em;
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 max(14px, 3.6cqi) / 1.2 var(--text);
}

.card__cta .icon {
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}

a.card:hover {
  border-color: var(--ink-3);
}

a.card:hover .card__cta .icon {
  transform: translate(2px, -2px);
}

@keyframes bob {
  50% {
    transform: translateY(-2px);
  }
}

@media (max-width: 560px) {
  .card {
    aspect-ratio: 4 / 5;
    --horizon: 50%;
  }
}

/* the film, once it lands */
.film {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--rule-2);
}

.film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film__controls {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.film__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 0.5);
  background: rgb(0 0 0 / 0.72);
  color: var(--white);
  font: 600 var(--fs-small) / 1 var(--text);
  transition: border-color var(--duration-fast) var(--ease-smooth-out);
}

.film__btn:hover {
  border-color: var(--white);
}

/* ---------------------------------------------------------------- problem, then the answer (home) */

.pitch__problem,
.pitch__solution {
  display: grid;
  gap: 24px;
}

.pitch__solution {
  margin-top: clamp(56px, 7vw, 112px);
}

/* the answer comes in from the other side of the page */
@media (min-width: 961px) {
  .pitch__solution {
    margin-left: calc(5 / 12 * 100%);
  }
}

.pitch__h {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 19ch;
}

.pitch__h--dim {
  color: var(--ink-3);
}

.pitch .lede {
  max-width: 54ch;
}

/* ---------------------------------------------------------------- steps */

.steps {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-2);
}

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

.steps.steps--flush {
  margin-top: 0;
}

.step {
  position: relative;
  padding: 22px 24px 8px 0;
}

.step + .step {
  padding-left: 24px;
  border-left: 1px solid var(--rule);
}

.step__n {
  font: 500 var(--fs-meta) / 1 var(--mono);
  color: var(--ink-3);
}

.step__name {
  margin-top: 28px;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.step__spec {
  margin-top: 8px;
  font: 500 var(--fs-small) / 1.35 var(--mono);
  color: var(--ink);
}

.step__text {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  max-width: 34ch;
}

.rights {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.rights p {
  max-width: 60ch;
  color: var(--ink-2);
}

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

@media (max-width: 960px) {
  .steps:not(.steps--3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps:not(.steps--3) .step:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .steps:not(.steps--3) .step:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 760px) {
  .steps.steps--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .steps.steps--3 .step,
  .steps.steps--3 .step + .step {
    padding-left: 0;
    border-left: 0;
  }
  .steps.steps--3 .step + .step {
    border-top: 1px solid var(--rule);
  }
  .steps.steps--3 .step__name {
    margin-top: 14px;
  }
}

@media (max-width: 560px) {
  .steps:not(.steps--3) {
    grid-template-columns: 1fr;
  }
  .step,
  .step + .step {
    padding-left: 0;
    border-left: 0;
  }
  .step + .step {
    border-top: 1px solid var(--rule);
  }
  .step__name {
    margin-top: 14px;
  }
}

/* ---------------------------------------------------------------- brief: form + builder */

.brief-head {
  display: grid;
  gap: 20px;
  max-width: 980px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

@media (max-width: 960px) {
  .brief-grid {
    grid-template-columns: 1fr;
  }
}

.form {
  display: grid;
  gap: 22px;
}

/* a field scrolled to after an error clears the bar above and leaves room for the button below */
.field {
  display: grid;
  gap: 8px;
  scroll-margin-top: calc(var(--bar-h) + var(--safe-top) + 24px);
  scroll-margin-bottom: 96px;
}

.field label {
  font-size: var(--fs-small);
  font-weight: 600;
}

.field__box {
  border: 1px solid var(--line-ui);
  background: transparent;
  transition: border-color var(--duration-quick) ease-out;
}

.field__box:hover {
  border-color: var(--ink-3);
}

.field__box:focus-within {
  border-color: var(--white);
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  caret-color: var(--green);
  font-size: 1rem;
  line-height: 1.5;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

.field textarea {
  min-height: 180px;
  resize: vertical;
}

.field ::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.field__help {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.field__count {
  font: 500 var(--fs-meta) / 1.6 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.field__count.is-over {
  color: var(--error);
}

.field__error {
  display: none;
  font-size: var(--fs-small);
  color: var(--error);
}

.field.is-error .field__box {
  border-color: var(--error);
}

.field.is-error .field__error {
  display: block;
  animation: fade 280ms var(--ease-smooth-out);
}

.field__box.is-shaking {
  animation: shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}

@keyframes shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--shake-ease);
  }
  28.57% {
    transform: translateX(var(--shake-distance));
    animation-timing-function: var(--shake-ease);
  }
  57.14% {
    transform: translateX(calc(var(--shake-distance) * -1));
    animation-timing-function: var(--shake-ease);
  }
  78.57% {
    transform: translateX(var(--shake-overshoot));
    animation-timing-function: var(--shake-ease);
  }
  100% {
    transform: translateX(0);
  }
}

.form__foot {
  display: grid;
  gap: 14px;
}

.form__foot[hidden] {
  display: none;
}

.form__foot .btn {
  justify-self: start;
}

.form__note,
.form__next {
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.form__note a {
  color: var(--ink);
}

.form.is-sending .btn[type="submit"] {
  opacity: 0.7;
  pointer-events: none;
}

/* the hand-off: the brief, written as an email, and three ways to send it */
.handoff {
  display: grid;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-2);
  animation: fade 360ms var(--ease-smooth-out);
}

.handoff[hidden] {
  display: none;
}

.handoff__title {
  font: 700 var(--fs-h3) / 1.15 var(--display);
  letter-spacing: -0.02em;
  outline-offset: 6px;
}

.handoff__text,
.handoff__note {
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.handoff__note {
  color: var(--ink-3);
}

.mail {
  border: 1px solid var(--line-ui);
}

.mail__row {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}

.mail__k {
  flex: none;
  width: 4.5rem;
  font: 500 var(--fs-meta) / 1.7 var(--mono);
  color: var(--ink-3);
}

.mail__v {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mail__body {
  display: block;
  width: 100%;
  min-height: 96px;
  max-height: 320px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: 400 var(--fs-small) / 1.55 var(--text);
  resize: vertical;
}

.mail__body:focus-visible {
  outline-offset: -2px;
}

.handoff__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.handoff__actions .btn {
  width: 100%;
  padding-inline: 14px;
}

.handoff__actions > :first-child {
  grid-column: 1 / -1;
}

.handoff__more {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}

.handoff__copy {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: var(--line-ui);
}

.handoff__copy:hover {
  text-decoration-color: var(--green);
}

@media (max-width: 400px) {
  .handoff__actions {
    grid-template-columns: 1fr;
  }
}

/* sent (only when a form endpoint really took it) */
.form__status {
  display: none;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule-2);
}

.form.is-sent > :not(.form__status) {
  display: none;
}

.form.is-sent .form__status {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.form__status-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 var(--fs-h3) / 1.1 var(--display);
  letter-spacing: -0.02em;
}

.form__edit {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: var(--line-ui);
}

.form__edit:hover {
  text-decoration-color: var(--green);
}

.check {
  width: 28px;
  height: 28px;
  flex: none;
}

.check circle {
  fill: var(--green);
}

.check path {
  fill: none;
  stroke: var(--black);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}

.form.is-sent .check path {
  animation: draw var(--duration-very-slow) var(--ease-smooth-out) 120ms forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* the builder: a product, a place, one line */
.builder {
  display: grid;
  gap: 28px;
}

.builder__title {
  font: 600 var(--fs-h3) / 1.2 var(--display);
  letter-spacing: -0.015em;
}

.builder__group {
  border: 0;
  padding: 0;
  min-width: 0;
}

.builder__group legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-ui);
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-smooth-out),
    border-color var(--duration-fast) var(--ease-smooth-out),
    color var(--duration-fast) var(--ease-smooth-out);
}

.chip span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
  transform: scale(0);
  margin-right: -14px;
  transition:
    transform var(--duration-fast) var(--ease-smooth-out),
    margin-right var(--duration-fast) var(--ease-smooth-out);
}

.chip:hover span {
  border-color: var(--ink-3);
  color: var(--ink);
}

.chip input:checked + span {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.chip input:checked + span::before {
  transform: scale(1);
  margin-right: 0;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.idea {
  padding-top: 24px;
  border-top: 1px solid var(--rule-2);
}

.idea__line {
  display: block;
  font: 700 clamp(1.625rem, 1.1rem + 2.1vw, 3rem) / 1.08 var(--display);
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}

/* inline so the sentence wraps naturally; the swap fades and blurs instead of moving */
.idea__line .swap {
  transition:
    filter var(--text-swap-dur) var(--ease-in-out),
    opacity var(--text-swap-dur) var(--ease-in-out);
}

.idea__line .swap.is-exit {
  filter: blur(var(--blur-small));
  opacity: 0;
}

.idea__line .swap.is-enter-start {
  filter: blur(var(--blur-small));
  opacity: 0;
  transition: none;
}

.idea__actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

.foot {
  border-top: 1px solid var(--rule);
  padding-top: clamp(64px, 8vw, 128px);
  padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
}

.foot__mark {
  display: block;
  width: 100%;
  color: var(--white);
}

.foot__grid {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px var(--gap);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.foot__k {
  margin-bottom: 12px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-3);
}

.foot__list {
  display: grid;
  gap: 6px;
}

.foot__list a {
  display: inline-block;
  padding-block: 4px;
  text-decoration: none;
  color: var(--ink-2);
  transition: color var(--duration-fast) var(--ease-smooth-out);
}

.foot__list a:hover {
  color: var(--white);
}

.foot__mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.foot__mail a {
  font: 600 clamp(1.125rem, 1rem + 0.6vw, 1.5rem) / 1.2 var(--text);
  text-decoration: none;
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-ui);
  background: transparent;
  color: var(--ink-2);
  font: 600 var(--fs-meta) / 1 var(--text);
  transition:
    border-color var(--duration-fast) var(--ease-smooth-out),
    color var(--duration-fast) var(--ease-smooth-out);
}

.copy:hover {
  border-color: var(--ink-3);
  color: var(--white);
}

.foot__base {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.foot__base a {
  display: inline-block;
  padding-block: 4px;
  color: var(--ink-3);
  text-decoration: none;
}

.foot__base a:hover {
  color: var(--white);
}

@media (max-width: 760px) {
  .foot__grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot__grid > :first-child {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------- inner pages */

.page-head {
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

.page-head + .section {
  padding-top: 0;
}

.h1 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 18ch;
}

.page-head .lede {
  margin-top: 24px;
}

.page-head__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* the series: the head, the tally and the record on the left; the card on the right from the top */
.series-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-bottom: var(--section);
}

.series-top__head {
  grid-column: 1 / span 7;
  grid-row: 1;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.series-top__record {
  grid-column: 1 / span 7;
  grid-row: 2;
  container-type: inline-size;
}

/* pinned under the bar, and never taller than the window: at laptop heights the card gets
   narrower, so it shows whole on arrival and its title and link stay on screen for the whole pin */
.series-top__card {
  grid-column: 9 / -1;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  width: min(100%, calc((100svh - var(--bar-h) - var(--safe-top) - clamp(40px, 5vw, 72px) - 24px) * 9 / 16));
  position: sticky;
  top: calc(var(--bar-h) + var(--safe-top) + 24px);
  margin-top: clamp(40px, 5vw, 72px);
}

@media (max-width: 960px) {
  .series-top__card {
    grid-column: 8 / -1;
  }
}

@media (max-width: 560px) {
  .series-top__head,
  .series-top__record,
  .series-top__card {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .series-top__card {
    position: static;
    justify-self: stretch;
    width: auto;
    margin-top: 48px;
  }
}

.tally__num {
  margin-left: -0.035em;
  font: 700 min(12rem, calc(100cqi / 3.3)) / 0.8 var(--display);
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.tally__cap {
  margin-top: 18px;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
}

.tally__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

.tally__meta dt {
  font: 500 var(--fs-meta) / 1.4 var(--mono);
  color: var(--ink-3);
}

.tally__meta dd {
  margin-top: 4px;
  font: 500 0.9375rem / 1.4 var(--mono);
}

.record {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rule-2);
}

.record li {
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--rule);
}

.record__big {
  font: 700 var(--fs-big) / 1.06 var(--display);
  letter-spacing: -0.03em;
}

/* the measure sits on the paragraph, so the rule under the item runs the full width */
.record__text {
  color: var(--ink-2);
}

.record__text p {
  max-width: 56ch;
}

.record__text .link-ext {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-top: 12px;
  color: var(--ink);
}

/* the format, as one annotated sentence */
.anatomy {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px clamp(14px, 1.6vw, 24px);
}

.anatomy__part {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.anatomy__words {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--white);
  font: 700 clamp(1.75rem, 1rem + 2.6vw, 3.5rem) / 1.05 var(--display);
  letter-spacing: -0.03em;
}

.anatomy__part--link .anatomy__words {
  border-bottom-color: transparent;
  color: var(--ink-3);
}

.anatomy__note {
  max-width: 26ch;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.anatomy__foot {
  margin-top: clamp(40px, 5vw, 64px);
}

/* the closing band: the point, grown into the X banner's disc, rises from the bottom edge like a sun
   on the horizon. The heading sits above it; the button and the idea sit on it. The crop never
   changes character: always exactly half, and either a clear margin or a clear bleed at the sides. */
.disc-band {
  --r: max(250px, min(30vw, 440px, 45svh));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(64px, 7vw, 104px);
  text-align: center;
}

.disc-band__in {
  display: grid;
  justify-items: center;
}

.disc-band__h {
  max-width: 17ch;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.disc-band__acts {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 18px;
  width: 100%;
  min-height: var(--r);
  margin-top: clamp(32px, 4vw, 56px);
  padding-bottom: max(24px, calc(var(--r) * 0.2 - 30px));
  color: var(--black);
}

.disc-band__disc {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: calc(var(--r) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green);
  translate: -50% 50%;
}

/* inline, so a wrapped line keeps its arrow right after the last word */
.disc-band__try {
  max-width: 100%;
  padding-block: 6px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.disc-band__try .icon {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -0.14em;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}

.disc-band__try:hover .icon--arrow {
  transform: translateX(3px);
}

.disc-band__acts :focus-visible {
  outline-color: var(--black);
}

.disc-band__acts ::selection {
  background: var(--black);
  color: var(--green);
}

/* From 641px the disc sits inside the band with a clear margin, never taller than about half the
   window. On phones it is wider than the screen and bleeds the same amount on both sides. */
@media (max-width: 640px) {
  .disc-band {
    --r: max(230px, 62vw);
  }
  .disc-band__acts {
    gap: 14px;
  }
  .disc-band__try {
    font-size: var(--fs-small);
    text-wrap: balance;
  }
}

/* the kit */
.kit {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 48px;
}

.kit__head {
  grid-column: 1 / -1;
  display: grid;
  gap: 18px;
}

.kit__list {
  grid-column: 1 / span 6;
  border-top: 1px solid var(--rule-2);
}

.kit__list li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
}

.kit__list li + li {
  border-top: 1px solid var(--rule);
}

.kit__n {
  font: 700 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem) / 1 var(--display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kit__t strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.kit__t span {
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.formats {
  grid-column: 8 / -1;
  align-self: end;
}

.formats__frames {
  display: flex;
  align-items: flex-end;
  gap: 3%;
}

.frame {
  position: relative;
  border: 1px solid var(--rule-2);
  display: flex;
  align-items: flex-end;
  padding: 10px;
}

/* widths chosen so the three heights step down: 9:16 tallest, 16:9 lowest */
.frame--916 {
  flex: 0 0 25%;
  aspect-ratio: 9 / 16;
  border-color: var(--ink-3);
}

.frame--11 {
  flex: 0 0 30%;
  aspect-ratio: 1 / 1;
}

.frame--169 {
  flex: 0 0 39%;
  aspect-ratio: 16 / 9;
}

.frame span {
  font: 500 var(--fs-meta) / 1 var(--mono);
  color: var(--ink-2);
}

.formats__cap {
  margin-top: 16px;
  font-size: var(--fs-small);
  color: var(--ink-3);
  max-width: 40ch;
}

@media (max-width: 960px) {
  .kit__list,
  .formats {
    grid-column: 1 / -1;
  }
}

/* rights and terms: a spec sheet */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.spec tr {
  border-top: 1px solid var(--rule);
}

.spec tr:first-child {
  border-top-color: var(--rule-2);
}

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

.spec th,
.spec td {
  padding: 20px 0 22px;
  text-align: left;
  vertical-align: baseline;
}

.spec th {
  width: 20%;
  padding-right: 24px;
  font: 500 var(--fs-meta) / 1.5 var(--mono);
  color: var(--ink-3);
}

.spec__cell {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 8px var(--gap);
  align-items: baseline;
}

.spec__v {
  font: 600 var(--fs-h3) / 1.2 var(--display);
  letter-spacing: -0.015em;
}

.spec__d {
  max-width: 56ch;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .spec tr {
    display: block;
    padding: 18px 0 20px;
  }
  .spec th,
  .spec td {
    display: block;
    width: auto;
    padding: 0;
  }
  .spec td {
    margin-top: 8px;
  }
  .spec__cell {
    display: block;
  }
  .spec__v,
  .spec__d {
    display: block;
  }
  .spec__d {
    margin-top: 6px;
  }
}

/* questions */
.qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 80px);
}

.qa > div {
  padding: 24px 0 30px;
  border-top: 1px solid var(--rule-2);
}

.qa dt {
  font: 600 var(--fs-h3) / 1.2 var(--display);
  letter-spacing: -0.015em;
}

.qa dd {
  margin-top: 10px;
  color: var(--ink-2);
  max-width: 52ch;
}

@media (max-width: 760px) {
  .qa {
    grid-template-columns: 1fr;
  }
}

/* about */
.note {
  display: grid;
  gap: 40px;
}

.note__body {
  max-width: 34em;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-2);
}

.note__body > * + * {
  margin-top: 1.1em;
}

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

.note__sign {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.note__sign svg {
  width: 110px;
  color: var(--white);
}

.rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
}

.rules li {
  padding: 22px 32px 30px 0;
  border-top: 1px solid var(--rule-2);
  font: 600 var(--fs-h3) / 1.25 var(--display);
  letter-spacing: -0.015em;
}

.rules li span {
  display: block;
  margin-top: 8px;
  font: 400 var(--fs-body) / 1.55 var(--text);
  letter-spacing: 0;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .rules {
    grid-template-columns: 1fr;
  }
}

/* legal / plain pages */
.plain {
  max-width: 68ch;
}

.plain h2 {
  margin-top: 48px;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.plain h2:first-child {
  margin-top: 0;
}

.plain p {
  margin-top: 14px;
  color: var(--ink-2);
}

.plain a {
  color: var(--ink);
}

.plain ul {
  margin-top: 14px;
  color: var(--ink-2);
}

.plain li + li {
  margin-top: 8px;
}

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

.plain__date {
  padding-top: 34px;
  font: 500 var(--fs-meta) / 1.4 var(--mono);
}

/* 404 */
.lost {
  min-height: calc(100dvh - var(--bar-h) - 280px);
  display: grid;
  align-content: center;
  gap: 28px;
  padding-block: 80px;
}

.lost__h {
  font-size: clamp(2.75rem, 1.2rem + 6.6vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 12ch;
}

.lost__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------------------------------------------------------- motion */

/* The one authored moment: the figure rises, then the point drops into place.
   Fill mode backwards: once it has played nothing stays applied (no leftover blur or transform). */
@media (prefers-reduced-motion: no-preference) {
  .js .figure__num .g {
    animation: rise 820ms var(--ease-smooth-out) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 80ms);
  }

  .js .figure__num .point {
    animation: drop 900ms var(--ease-expo-out) 520ms backwards;
  }

  .js .figure__cap {
    animation: rule-in 700ms var(--ease-smooth-out) 420ms backwards;
    transform-origin: left center;
  }

  .js .figure__cap .cell {
    animation: fade 600ms var(--ease-smooth-out) backwards;
    animation-delay: calc(640ms + var(--i, 0) * 60ms);
  }

  .js .hero__twist {
    animation: fade 700ms var(--ease-smooth-out) 1000ms backwards;
  }

  /* headline and actions are readable from the first frame; they only settle */
  .js .hero__title,
  .js .hero__actions {
    animation: settle 700ms var(--ease-smooth-out) backwards;
  }

  .js .hero__actions {
    animation-delay: 90ms;
  }
}

/* the horizons (home scene, title card): the line draws across, then the point drops onto it.
   The head script sets .reveal-ready before the first paint, so the hidden state is the first one
   painted and the transitions only ever run towards .is-in. Without JavaScript nothing hides. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal]:not(.is-in)::before,
  .reveal-ready [data-reveal]:not(.is-in) .card__horizon {
    transform: scaleX(0);
  }
  .reveal-ready [data-reveal]:not(.is-in) .scene__point,
  .reveal-ready [data-reveal]:not(.is-in) .card__point {
    opacity: 0;
    transform: translateY(-3.5rem);
  }
  .reveal-ready [data-reveal].is-in::before,
  .reveal-ready [data-reveal].is-in .card__horizon {
    transition: transform 1200ms var(--ease-expo-out);
    transform-origin: left center;
  }
  .reveal-ready [data-reveal].is-in .scene__point,
  .reveal-ready [data-reveal].is-in .card__point {
    transition:
      opacity 300ms var(--ease-smooth-out) 450ms,
      transform 900ms var(--ease-expo-out) 450ms;
    animation: bob 3.4s ease-in-out 1.5s infinite;
  }
  /* the lines the facts hang from drop once the horizon is drawing */
  .reveal-ready .scene:has(.scene__horizon:not(.is-in)) .fact::before {
    transform: scaleY(0);
  }
  .reveal-ready .scene:has(.scene__horizon.is-in) .fact::before {
    transition: transform 700ms var(--ease-expo-out) calc(300ms + var(--i, 0) * 90ms);
  }
  .scene__facts .fact:nth-child(2) {
    --i: 1;
  }
  .scene__facts .fact:nth-child(3) {
    --i: 2;
  }
}

/* the figure's glyphs are inline (one run of text), so they move with `top`, not transforms */
@keyframes rise {
  from {
    opacity: 0;
    top: 0.14em;
    filter: blur(10px);
  }
}

/* the point falls from inside its own line, never across the headline
   (0.273em of the point's own size is 0.35em of the figure) */
@keyframes drop {
  0% {
    opacity: 0;
    top: -0.273em;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes rule-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(var(--distance-base));
  }
}

@keyframes settle {
  from {
    transform: translateY(var(--distance-medium));
  }
}

/* page to page: the bar stays, the sheet slides in */
@view-transition {
  navigation: auto;
}

/* the old page is gone before the new one comes in, so two pages never show at once; the bar's
   parts keep their size from page to page, so they cross-fade in place */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out 120ms var(--ease-smooth-out) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 320ms var(--ease-smooth-out) 110ms both;
  }
  ::view-transition-old(bar-cta),
  ::view-transition-new(bar-cta) {
    height: 100%;
    object-fit: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

@keyframes vt-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(var(--distance-base));
  }
}

/* ---------------------------------------------------------------- print: the one-sheet */

.print-only {
  display: none;
}

@page {
  size: A4;
  margin: 12mm 13mm;
}

@media print {
  /* the page prints at rest: an animation left filling (a blur of 0, a transform) would print as an image */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  :root {
    color-scheme: light;
    --ink: #000;
    --ink-2: #1f1f1f;
    --ink-3: #5c5c5c;
    --rule: #c8c8c8;
    --rule-2: #8a8a8a;
    --section: 0;
  }
  html,
  body {
    background: #fff !important;
    color: #000;
  }
  body {
    min-height: 0;
    font-size: 8.5pt;
    line-height: 1.4;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  h1,
  h2,
  h3,
  .hero__twist,
  .fact__big {
    letter-spacing: -0.01em !important;
  }
  .bar,
  .menu,
  .skip,
  .bar-sentinel,
  .hero__actions,
  .scene__film,
  .links,
  .rights .link-ext,
  #brief,
  .disc-band,
  .card,
  .series-top__card,
  .page-head__actions,
  .foot__mark,
  .foot__grid > :nth-child(2),
  .foot__base,
  .copy {
    display: none !important;
  }
  .spec tr,
  .qa > div,
  .kit__list li,
  .rules li,
  .record li,
  .step {
    break-inside: avoid;
  }
  .note__sign svg {
    color: #000;
  }
  .anatomy__words {
    border-bottom-color: #000;
  }
  /* inner pages: the same compact scale as the one-sheet */
  .page-head,
  .series-top__head {
    padding: 0 0 3mm !important;
  }
  .series-top {
    display: block;
    padding: 0;
  }
  .h1 {
    font-size: 20pt;
    max-width: none;
  }
  .page-head .lede,
  .anatomy__foot,
  .kit__head .lede {
    margin-top: 1.5mm;
    font-size: 9pt;
  }
  .after-h2 {
    margin-top: 3mm;
  }
  .tally__num {
    font-size: 40pt;
  }
  .tally__cap {
    margin-top: 2mm;
    font-size: 9.5pt;
  }
  .tally__meta {
    margin-top: 1.5mm;
  }
  .record {
    margin-top: 3mm;
  }
  .record li {
    padding: 1.5mm 0;
  }
  .record__big {
    font-size: 11pt;
  }
  .anatomy {
    gap: 3mm 4mm;
  }
  .anatomy__words {
    padding-bottom: 1mm;
    font-size: 12pt;
  }
  .anatomy__note {
    font-size: 8pt;
  }
  .kit {
    row-gap: 3mm;
  }
  .kit__list li {
    padding: 1.5mm 0;
  }
  .kit__n {
    font-size: 12pt;
  }
  .formats__frames {
    display: none;
  }
  .formats__cap {
    margin-top: 0;
    font-size: 8pt;
  }
  .spec th,
  .spec td {
    padding: 1.5mm 0;
  }
  .spec__v {
    font-size: 10pt;
  }
  .spec__d {
    font-size: 8pt;
  }
  .qa > div {
    padding: 2mm 0;
  }
  .qa dt {
    font-size: 9.5pt;
  }
  .qa dd {
    margin-top: 1mm;
    font-size: 8pt;
  }
  .note__body {
    font-size: 9.5pt;
  }
  .rules li {
    padding: 2mm 4mm 2mm 0;
    font-size: 10pt;
  }
  .rules li span {
    font-size: 8.5pt;
  }
  .print-only {
    display: block;
  }
  /* reveals print drawn, whether or not they were scrolled to */
  [data-reveal]::before,
  [data-reveal] .card__horizon,
  [data-reveal] .scene__point,
  [data-reveal] .card__point,
  .fact::before {
    transform: none !important;
    opacity: 1 !important;
  }
  /* /brief on paper: where to send it and what happens next, without the form and the builder */
  .brief-grid {
    display: none !important;
  }
  .brief-print {
    margin: 1mm 0 6mm;
    font-size: 11pt;
    font-weight: 600;
  }
  .print-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5mm;
    font: 500 7.5pt / 1 var(--mono);
    color: var(--ink-3);
  }
  .print-head svg {
    width: 26mm;
    color: #000;
  }
  .print-head span + span {
    margin-left: 5mm;
  }
  .wrap {
    max-width: none;
    padding-inline: 0;
  }
  main > .section {
    padding: 4mm 0 0 !important;
    margin-top: 4mm;
    border-top: 0.5pt solid var(--rule) !important;
    break-inside: avoid;
  }
  .hero {
    padding: 0;
  }
  .hero__title {
    font-size: 17pt;
  }
  .hero__sub {
    max-width: none;
    margin-top: 1mm;
    font-size: 10pt;
  }
  .figure {
    margin-top: 4mm;
    overflow: hidden;
  }
  .figure__num {
    font-size: calc(100cqi / 3.1);
  }
  .figure__num .g,
  .figure__num .point {
    position: static;
  }
  .figure__cap {
    margin-top: 1.5mm;
    grid-template-columns: 2fr 1fr 1fr !important;
  }
  .figure__cap .cell {
    padding: 1.5mm 3mm 0 0 !important;
    border-top: 0 !important;
  }
  .figure__cap .cell + .cell {
    padding-left: 3mm !important;
    border-left: 0.5pt solid var(--rule) !important;
  }
  .figure__cap .cell:first-child {
    grid-column: auto !important;
  }
  .cell__lead {
    font-size: 9.5pt;
  }
  .cell__k {
    font-size: 6.5pt;
  }
  .cell__v {
    font-size: 8pt;
  }
  .hero__twist {
    margin-top: 3mm;
    font-size: 15pt;
  }
  .scene {
    padding: 0 !important;
    margin-top: 4mm;
    border-top: 0.5pt solid var(--rule);
    break-inside: avoid;
  }
  .scene__sky {
    padding: 3mm 0 3mm;
  }
  .scene__title {
    font-size: 12pt;
    max-width: none;
  }
  .scene__sub {
    margin-top: 1mm;
    font-size: 8pt;
  }
  .scene__horizon::before {
    background: #8a8a8a;
  }
  .scene__point {
    width: 2.2mm;
  }
  .fact {
    padding-top: 3.5mm;
  }
  .fact::before {
    height: 2.5mm;
    background: #8a8a8a;
  }
  .scene__facts {
    grid-template-columns: 1fr 2fr 1fr !important;
    column-gap: 4mm;
  }
  .fact__big {
    font-size: 10pt;
  }
  .fact__text {
    font-size: 8.5pt;
    max-width: none;
  }
  .scene + .section {
    border-top: 0.5pt solid var(--rule) !important;
  }
  .print-terms {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column: 1 / -1;
    margin-top: 2.5mm;
    padding-top: 1.5mm;
    border-top: 0.5pt solid var(--rule);
  }
  .print-terms div + div {
    padding-left: 3mm;
    border-left: 0.5pt solid var(--rule);
  }
  .print-terms dt {
    font: 500 6.5pt / 1.3 var(--mono);
    color: var(--ink-3);
  }
  .print-terms dd {
    margin-top: 0.5mm;
    font: 600 8.5pt / 1.3 var(--display);
  }
  .pitch .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6mm;
  }
  .pitch__problem,
  .pitch__solution {
    gap: 1.5mm;
    margin: 0 !important;
  }
  .pitch__h {
    font-size: 12pt;
    max-width: none;
  }
  .pitch .lede {
    font-size: 8.5pt;
    max-width: none;
  }
  .steps,
  .rights {
    grid-column: 1 / -1;
  }
  .steps {
    margin-top: 3mm;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .step,
  .step + .step {
    padding: 1.5mm 3mm 0 0 !important;
    border-top: 0 !important;
  }
  .step + .step {
    padding-left: 3mm !important;
    border-left: 0.5pt solid var(--rule) !important;
  }
  .step__n {
    font-size: 6.5pt;
  }
  .step__name {
    margin-top: 1.5mm !important;
    font-size: 10pt;
  }
  .step__spec,
  .step__text {
    margin-top: 1mm;
    font-size: 7.5pt;
  }
  .rights {
    margin-top: 2.5mm;
    padding-top: 1.5mm;
  }
  .rights p {
    font-size: 8pt;
  }
  .foot {
    margin-top: 4mm;
    padding: 3mm 0 0;
    border-top: 0.5pt solid var(--rule);
  }
  .foot__grid {
    margin: 0;
    padding: 0;
    border: 0;
    grid-template-columns: 1.4fr 1fr !important;
  }
  .foot__grid > :first-child {
    grid-column: auto !important;
  }
  .foot__k {
    margin-bottom: 1mm;
    font-size: 6.5pt;
  }
  .foot__mail a {
    font-size: 11pt;
  }
  .foot__list {
    gap: 0;
  }
  .foot__list a {
    padding: 0;
    color: #000;
  }
  .foot__list li:last-child {
    display: none;
  }
  .print-cta {
    margin-top: 3mm;
    font: 600 9pt / 1.3 var(--text);
  }
  a {
    text-decoration: none;
  }
}