/* Tirus waitlist. Values come from the Figma frames 189:600 (dark) and
   189:616 (light), both 1920×1080. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/dm-sans-latin.woff2?v=ca72d2bc") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  --bg: #f8f6f0;
  /* The page colour as it ends up on screen, once the paper texture has been
     blended over --bg. Used where a flat colour has to match the page. */
  --surface: #f8f4f0;
  --text: #161616;
  --text-soft: #161616;
  --link: #545454;
  --quiet: #5e5e5e;
  --field-bg: #fff;
  --field-border: #c2bbb3;
  --field-border-hover: #8a847e;
  --placeholder: #6b6b6b;
  --button-bg: #f49347;
  --button-bg-hover: #f7b07a;
  --button-text: #000;
  --error: #a3271c;
  --focus: #161616;
  --success: #1e9e57; /* the tick on the confirmation */
  --mark-frame: 104px;
  --stone-fade-top: 183; /* iOS 26 block: x --f = 55px on a phone */
  --mark-max: var(--mark-frame);

  /* Light frame, bottom to top: paper, stones, pixels, content. */
  --texture-blend: darken;
  --texture-opacity: 0.6;
  --z-content: 4;

  /* One frame pixel. Stones and pixel layers are sized in these units from
     their corners: the frame's own proportions from 1440 up (1920 wide = 1px),
     easing down to 0.3px at 600 and holding there for phones. */
  --f: max(min(0.0769vw, 0.3px), 0.05357vw - 0.0214px);

  /* Type and spacing: the frame's values from 1024 up, easing down to 390. */
  --mark: clamp(72px, 51.7px + 5.205vw, var(--mark-max));
  --h1: clamp(40px, 25.24px + 3.785vw, 64px);
  --lede: clamp(17px, 12.69px + 1.104vw, 24px);
  --ui: clamp(17px, 15.15px + 0.473vw, 20px);
  --field-h: clamp(56px, 51.08px + 1.262vw, 64px);
  --gap-xl: clamp(36px, 23.7px + 3.155vw, 56px);
  --gap-lg: clamp(28px, 20.6px + 1.893vw, 40px);
  --gap-md: clamp(16px, 11.08px + 1.262vw, 24px);
  --gutter: 24px;
  --pad-top: 56px;
  --pad-bottom: 40px;
}

@media (min-width: 1024px) {
  :root {
    --pad-top: 32px;
    --pad-bottom: 32px;
  }
}

/* The note under the button is not in the frames. Where there is room, the
   block is centred as if the note were absent, so everything from the mark
   down to the button sits exactly where the frame puts it. */
@media (min-width: 1024px) and (min-height: 781px) {
  .content--home {
    margin-top: calc(16px + 14px * 1.4);
  }
}

@media (min-width: 1440px) {
  :root {
    --f: calc(100vw / 1920);
  }
}

/* Dark values, twice: once when the system is dark and the visitor has not
   picked light with the switch, once when they have picked dark. Keep the
   two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111;
    --surface: #161616;
    --text: #fff;
    --text-soft: #e3e3e3;
    --link: #d8d8d8;
    --quiet: #939393;
    --field-bg: rgb(0 0 0 / 0.7);
    --field-border: #585858;
    --field-border-hover: #8c8c8c;
    --placeholder: #939393;
    --error: #ff9d8f;
    --focus: #fff;
    --success: #4fd68a;
    --mark-frame: 105px;
    --stone-fade-top: 300; /* 90px on a phone */

    /* Dark frame, bottom to top: content, paper, stones, pixels. The paper
       sits over the content there, which is what lifts the button from
       #f49347 to the lighter orange in the frame. */
    --texture-blend: overlay;
    --texture-opacity: 0.3;
    --z-content: 0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111;
  --surface: #161616;
  --text: #fff;
  --text-soft: #e3e3e3;
  --link: #d8d8d8;
  --quiet: #939393;
  --field-bg: rgb(0 0 0 / 0.7);
  --field-border: #585858;
  --field-border-hover: #8c8c8c;
  --placeholder: #939393;
  --error: #ff9d8f;
  --focus: #fff;
  --success: #4fd68a;
  --mark-frame: 105px;
  --stone-fade-top: 300; /* 90px on a phone */

  /* Dark frame, bottom to top: content, paper, stones, pixels. The paper
     sits over the content there, which is what lifts the button from
     #f49347 to the lighter orange in the frame. */
  --texture-blend: overlay;
  --texture-opacity: 0.3;
  --z-content: 0;
}

:root[data-theme="light"] {
  color-scheme: light;
}

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

[hidden] {
  display: none !important;
}

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

/* The root colour is what Safari shows where it cannot show the page: under
   the status bar, beyond the end of the page, and on overscroll. It has to be
   the rendered page colour or those areas read as bands. */
html {
  background: var(--surface);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  /* The frames pin the optical size (14, and 9 for the heading) instead of
     letting it follow the font size. Safari needs the automatic sizing turned
     off for the explicit value to apply. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* <picture> steps out of the way so its <img> is the layout item; its
   <source> children must not become flex or grid items in its place. */
picture {
  display: contents;
}

source {
  display: none;
}

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

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

/* ---------- Moving between pages ---------- */

/* Going from one page to the other, the old page softens out of focus while
   the new one comes into focus. Both run on the same curve, so their
   opacities always add up to one and the shared background holds steady.
   Browsers without cross-page view transitions simply load the page. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: page-leave 0.36s ease both;
  }

  ::view-transition-new(root) {
    animation: page-arrive 0.36s ease both;
  }
}

/* Switching between light and dark is a plain cross-fade, without the blur:
   src/theme.js marks the root while it runs. It only starts a transition
   when reduced motion is off. */
:root[data-theme-switching]::view-transition-old(root) {
  animation: theme-leave 0.5s ease both;
}

:root[data-theme-switching]::view-transition-new(root) {
  animation: theme-arrive 0.5s ease both;
}

@keyframes theme-leave {
  to {
    opacity: 0;
  }
}

@keyframes theme-arrive {
  from {
    opacity: 0;
  }
}

@keyframes page-leave {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes page-arrive {
  from {
    opacity: 0;
    filter: blur(8px);
  }
}

/* ---------- Page and decoration ---------- */

.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  display: grid;
  place-items: center;
  /* One screen: the small viewport (svh) is what is visible with every browser
     bar showing, so a page this tall has nothing to scroll. */
  min-height: 100vh;
  min-height: 100svh;
  padding: max(var(--pad-top), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
    max(var(--pad-bottom), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: var(--bg);
}

/* The decoration must share the page's stacking context for its blend modes
   to reach the background, so none of these get a wrapper. */
.texture,
.stone,
.px {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.texture {
  inset: 0;
  z-index: 1;
  mix-blend-mode: var(--texture-blend);
  opacity: var(--texture-opacity);
  background: center / cover no-repeat;
  background-image: url("img/texture-l-1420.webp?v=6aa7b086");
  background-image: image-set(
    url("img/texture-l-1420.avif?v=05c4a128") type("image/avif"),
    url("img/texture-l-1420.webp?v=6aa7b086") type("image/webp")
  );
}

@media (orientation: landscape) and (max-width: 1024px) {
  .texture {
    background-image: url("img/texture-l-1024.webp?v=69e3a866");
    background-image: image-set(
      url("img/texture-l-1024.avif?v=e5b14d50") type("image/avif"),
      url("img/texture-l-1024.webp?v=69e3a866") type("image/webp")
    );
  }
}

@media (orientation: portrait) {
  .texture {
    background-image: url("img/texture-p-1014.webp?v=8b1f747f");
    background-image: image-set(
      url("img/texture-p-1014.avif?v=70973f9a") type("image/avif"),
      url("img/texture-p-1014.webp?v=8b1f747f") type("image/webp")
    );
  }
}

@media (orientation: portrait) and (max-width: 600px) {
  .texture {
    background-image: url("img/texture-p-720.webp?v=ef2dfd87");
    background-image: image-set(
      url("img/texture-p-720.avif?v=5eea0da0") type("image/avif"),
      url("img/texture-p-720.webp?v=ef2dfd87") type("image/webp")
    );
  }
}

/* Each stone is Figma's own render of it inside the frame, cut at the frame
   edge, so it only needs pinning to its corner at frame scale. */
.stone {
  z-index: 2;
}

.stone img {
  display: block;
  width: 100%;
  height: auto;
}

.stone--tr {
  top: 0;
  right: 0;
  width: calc(679 * var(--f));
}

.stone--bl {
  bottom: 0;
  left: 0;
  width: calc(610.333 * var(--f));
}

/* Corner crops of the frame's pixel layer; scripts/build.mjs has the same
   numbers. Each corner is drawn twice, as in the frame: 100% and 40%. */
.px {
  z-index: 3;
  max-width: none;
  mix-blend-mode: overlay;
}

.px--soft {
  opacity: 0.4;
}

.px--tr {
  top: 0;
  right: 0;
  width: calc(420 * var(--f));
  height: calc(390 * var(--f));
}

.px--bl {
  bottom: 0;
  left: 0;
  width: calc(330 * var(--f));
  height: calc(420 * var(--f));
}

/* ---------- iOS 26 Safari ---------- */

/* Safari on iOS 26 floats its bars over the page. Measured in the simulator:
   - Under the status bar it paints nothing but the root colour while the page
     is at the top.
   - Under the bottom toolbar it paints only real page: the part of the
     document that lies beyond the small viewport. Fixed elements, shadows and
     other paint-only overflow do not show there.
   - safe-area-inset-* are all 0, so neither area can be measured.
   Extending the page under the toolbar was tried and dropped: any page beyond
   the small viewport is scroll range, and even with scrolling locked Safari
   uses it to shift the page when the email field is focused, and leaves it
   shifted. So the page stays exactly one screen. The top-right stone fades
   into the root colour under the status bar; the bottom-left one keeps its
   place and softens over its last few pixels.
   The user agent string is frozen at an older version, so this is matched by
   features: -webkit-touch-callout exists only on iOS, anchor-name arrived in
   Safari 26. */
@supports (-webkit-touch-callout: none) and (anchor-name: --a) {
  /* Both stones end in an eased fade (a smoothstep curve in eleven stops), so
     no line shows where the fade starts or ends. Each sets its direction and
     length below. */
  .stone--tr,
  .px--tr,
  .stone--bl,
  .px--bl {
    --eased-fade: linear-gradient(
      var(--fade-to),
      rgb(0 0 0 / 0) 0,
      rgb(0 0 0 / 0.028) calc(var(--fade) * 0.1),
      rgb(0 0 0 / 0.104) calc(var(--fade) * 0.2),
      rgb(0 0 0 / 0.216) calc(var(--fade) * 0.3),
      rgb(0 0 0 / 0.352) calc(var(--fade) * 0.4),
      rgb(0 0 0 / 0.5) calc(var(--fade) * 0.5),
      rgb(0 0 0 / 0.648) calc(var(--fade) * 0.6),
      rgb(0 0 0 / 0.784) calc(var(--fade) * 0.7),
      rgb(0 0 0 / 0.896) calc(var(--fade) * 0.8),
      rgb(0 0 0 / 0.972) calc(var(--fade) * 0.9),
      #000 var(--fade)
    );
    -webkit-mask-image: var(--eased-fade);
    mask-image: var(--eased-fade);
  }

  /* Top: the stone dissolves into the root colour under the status bar. The
     length follows the stone's size and the theme: on a phone 90px in dark,
     55px in light, where a longer fade turned the top of the stone milky. */
  .stone--tr,
  .px--tr {
    --fade-to: to bottom;
    --fade: calc(var(--stone-fade-top) * var(--f));
  }

  /* Bottom: the same long fade as the top one, mirrored, so the stone
     dissolves into the page above the toolbar instead of ending at a line. */
  .stone--bl,
  .px--bl {
    --fade-to: to top;
    --fade: calc(var(--stone-fade-top) * var(--f));
  }
}

/* ---------- Content ---------- */

.content {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xl);
  width: min(100%, 634px);
  text-align: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(var(--mark) * 0.153);
  padding-right: calc(var(--mark) * 0.2347);
}

/* The mark is a planet with a letter over it. The planet is a round window
   (the disc's own outline) onto a surface that slides sideways behind it, one
   full turn a minute, west to east. The surface picture is two disc-widths
   long and its ends meet, and it is laid out twice in a row, so moving the row
   by one picture's length brings it back to where it began. Only the black
   letter sits still on top. */
.brand__mark {
  position: relative;
  flex: none;
  width: var(--mark);
  height: var(--mark);
}

.brand__planet,
.brand__glyph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.brand__planet {
  overflow: hidden;
  -webkit-mask: url("img/disc-window.webp?v=a5b09b2b") center / 100% 100% no-repeat;
  mask: url("img/disc-window.webp?v=a5b09b2b") center / 100% 100% no-repeat;
}

.brand__turn {
  display: flex;
  width: 400%;
  height: 100%;
}

.brand__surface {
  flex: none;
  width: 50%;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .brand__turn {
    animation: planet-turn 60s linear infinite;
  }
}

@keyframes planet-turn {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: none;
  }
}

.brand__name {
  width: calc(var(--mark) * 1.52392);
  height: calc(var(--mark) * 0.55215);
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
}

h1 {
  margin: 0;
  color: var(--text);
  font-size: var(--h1);
  font-weight: 400;
  font-variation-settings: "opsz" 9;
  line-height: 1.05;
  text-wrap: balance;
}

@media (min-width: 600px) {
  h1 {
    white-space: nowrap;
  }
}

.lede {
  max-width: 19.96em;
  margin: 0;
  color: var(--text-soft);
  font-size: var(--lede);
  line-height: 1.4;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-lg);
  width: 100%;
}

.join {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  width: min(100%, 613px);
}

.field,
.submit {
  width: 100%;
}

.submit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.field__input {
  display: block;
  width: 100%;
  height: var(--field-h);
  margin: 0;
  /* The frames draw no edge on the field; this hairline gives it one. In the
     dark theme it reaches 3:1 against the page. In the light theme it is kept
     quiet on purpose (about 1.7:1): the white field on cream paper carries
     the shape, and hover and focus darken the border. With the border the
     text still starts 24px in, as in the frames. */
  padding: 0 23px;
  border: 1px solid var(--field-border);
  border-radius: 24px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: var(--ui);
  appearance: none;
}

.field__input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

/* Hover and focus recolour the field's own border; no second ring is drawn
   around it. The focused border is the same colour as the focus ring used
   elsewhere. */
.field__input:focus-visible {
  outline: none;
  border-color: var(--focus);
}

@media (hover: hover) {
  .field__input:hover:not(:focus-visible) {
    border-color: var(--field-border-hover);
  }
}

/* Forced-colours modes repaint borders, so the focus ring comes back there. */
@media (forced-colors: active) {
  .field__input:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 100px var(--field-bg) inset;
  transition: background-color 100000s;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 301px);
  height: 56px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 24px;
  background: var(--button-bg);
  color: var(--button-text);
  font: inherit;
  font-size: var(--ui);
  font-weight: 500;
  line-height: 1.05;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.button__label {
  text-box: trim-both cap alphabetic;
}

@media (hover: hover) {
  .button:hover:not(:disabled) {
    background: var(--button-bg-hover);
  }
}

.button:active:not(:disabled) {
  filter: brightness(0.95);
}

.button:disabled {
  cursor: default;
  opacity: 0.8;
}

.spinner {
  display: none;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.button[aria-busy="true"] .spinner {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: background-color 0.15s ease, filter 0.15s ease;
  }

  .field__input {
    transition: border-color 0.15s ease;
  }

  .spinner {
    animation: spin 0.7s linear infinite;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.message {
  margin: 0;
  color: var(--error);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

.field .message:not(:empty) {
  margin-top: 8px;
  padding: 0 24px;
  text-align: left;
}

.submit .message:not(:empty),
.message--static {
  margin-top: 12px;
}

.note {
  margin: 16px 0 0;
  color: var(--quiet);
  font-size: 14px;
  line-height: 1.4;
  text-wrap: balance;
}

.note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.success {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  text-align: center;
  width: min(100%, 613px);
  margin: 0;
  color: var(--text);
  font-size: var(--lede);
  line-height: 1.4;
  text-wrap: balance;
  outline: none;
}

/* A green disc with the tick cut out in the page colour. */
.success__icon {
  width: 44px;
  height: 44px;
}

.success__icon circle {
  fill: var(--success);
}

.success__icon path {
  fill: none;
  stroke: var(--bg);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
}

.social {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 24px icons with a 44px target. */
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px;
  border-radius: 12px;
}

.social a:focus-visible {
  outline-offset: -4px;
}

.social img {
  display: block;
}

.social__linkedin {
  width: 24px;
  height: 24px;
}

.social__x {
  width: 24px;
  height: 20.87px;
}

.contact {
  color: var(--link);
  font-size: var(--ui);
  line-height: 1.05;
  text-decoration: none;
  border-radius: 4px;
}

.links__more {
  /* 16px under the address, whatever the gap above it is. */
  margin-top: calc(16px - var(--gap-md));
}

/* Bottom-right corner of the page (the stone has the bottom-left): the
   light/dark switch and, on the home page, the Privacy link. Padding makes
   the targets larger than they look; the Privacy text sits 24px from both
   edges. */
.corner {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  gap: 4px;
}

.corner-link {
  padding: 8px;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--quiet);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* While the other theme's pictures are still on their way, the page does not
   change; only the switch dims. */
.theme-toggle[aria-busy="true"] {
  opacity: 0.45;
}

/* Where src/theme.js parks the other theme's pictures while they load. */
.theme-preload {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* The icon shows where a click leads: a moon in the light theme, a sun in
   the dark one. */
.theme-toggle[data-next="light"] .theme-toggle__moon,
.theme-toggle[data-next="dark"] .theme-toggle__sun {
  display: none;
}

.links__more,
.corner-link {
  color: var(--quiet);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
}

.contact:hover,
.links__more:hover,
.corner-link:hover,
.theme-toggle:hover,
.back-link:hover,
.social a:hover {
  opacity: 0.8;
}

.contact:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Text pages (privacy) ---------- */

/* Back to the home page, pinned to the top-left corner of the window (the
   stone has the top-right), so it stays in reach while the text scrolls. It
   sits above every other layer, on a patch of the page colour with a soft
   blur, so text passing under it does not tangle with the label. The padding
   enlarges the target; the label itself is 24px from both edges. */
.back-link {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--link);
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none;
}

.back-link svg {
  flex: none;
}

/* On phones the mark sits just under the Back link; give it a little air. */
@media (max-width: 599px) {
  .content--page {
    margin-top: 16px;
  }
}

a.brand {
  border-radius: 16px;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: min(100%, 560px);
  color: var(--text-soft);
  font-size: clamp(16px, 15.38px + 0.158vw, 17px);
  line-height: 1.55;
  text-align: left;
}

.prose h2 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.35;
}

.prose p {
  margin: 0;
}

.prose p + p {
  margin-top: 10px;
}

.prose a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose__meta {
  color: var(--quiet);
  font-size: 14px;
}

/* Below this width the text column reaches over the bottom-left stone, so
   the text ends above it. The footer is narrow and centred and sits beside
   the stone, as on the home page. */
@media (max-width: 1099px) {
  .prose {
    margin-bottom: max(0px, calc(667 * var(--f) - 182px));
  }
}

/* ---------- Narrow ---------- */

/* Two short lines instead of one long one, clear of the bottom-left stone. */
@media (max-width: 1023px) {
  .note {
    max-width: 24em;
  }
}

@media (max-width: 520px) {
  .button {
    width: 100%;
  }

  .note {
    font-size: 13px;
  }
}

/* The narrowest phones: the note stays on one line by going one size down
   and using a little of the side gutter. */
@media (max-width: 359px) {
  .note {
    margin-inline: -10px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* ---------- Short desktop windows: tighten before scrolling ---------- */

@media (min-width: 900px) and (max-height: 780px) {
  :root {
    --mark-max: 88px;
    --h1: 56px;
    --gap-xl: 40px;
    --pad-top: 32px;
    --pad-bottom: 32px;
  }
}

/* ---------- Short phones: tighten so the page still fits one screen ---------- */

/* An iPhone SE shows 549px of page in iOS 26 Safari and the regular layout
   needs 651px. Below 660px of height the mark, heading, gaps and paddings
   shrink (to 528px on an SE), so there is nothing to scroll. The larger
   bottom padding keeps the email line clear of the corner links. */
@media (orientation: portrait) and (max-width: 600px) and (max-height: 659px) {
  :root {
    --mark: 56px;
    --h1: 34px;
    --field-h: 50px;
    --gap-xl: 22px;
    --gap-lg: 18px;
    --gap-md: 12px;
    --pad-top: 16px;
    --pad-bottom: 48px;
  }

  .button {
    height: 50px;
  }

  .note {
    margin-top: 12px;
  }
}