/*
 * Site styles that aren't Tailwind utilities: fonts, colours, smooth scroll,
 * and the states the JavaScript toggles (reveal, nav, form).
 * Put your own additions at the bottom.
 */

/* ---------- Fonts (self-hosted Geist; Instrument Serif loads from Google Fonts) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Instrument Serif, self-hosted (no request to Google Fonts). */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Italic-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Regular-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Regular-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  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;
}

/* ---------- Colours: RGB triplets used as rgb(var(--m-…)) by the m-* classes ---------- */
:root {
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", Georgia, serif;

  --m-bg: 36 36 38;
  --m-surface: 46 46 50;
  --m-text: 245 245 247;
  --m-muted: 161 161 166;
  --m-label: 210 210 215;
  --m-line: 255 255 255;
  --m-accent: 255 159 10;
  --m-on-accent: 20 20 22;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: rgb(var(--m-bg));
  color: rgb(var(--m-text));
  overflow-x: hidden;
}

/* ---------- Lenis smooth scroll ---------- */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ---------- Reveal on scroll (assets/js/ui.js adds .is-revealed) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(8px);
  transition:
    opacity 1s var(--ease) var(--reveal-delay, 0s),
    transform 1s var(--ease) var(--reveal-delay, 0s),
    filter 1s var(--ease) var(--reveal-delay, 0s);
}
[data-reveal="left"],
[data-reveal="right"] {
  transition-duration: 0.9s;
}
[data-reveal="left"] {
  transform: translateX(-48px);
}
[data-reveal="right"] {
  transform: translateX(48px);
}
[data-reveal="rise"] {
  transform: translateY(30px);
  filter: none;
  transition-duration: 1.2s;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- Navigation (assets/js/nav.js) ---------- */
.nav-shell {
  opacity: 0;
  transform: translateY(-24px);
  transition:
    transform 0.6s var(--ease),
    opacity 0.6s var(--ease);
}
.nav-shell.is-ready {
  opacity: 1;
  transform: none;
}
.nav-shell.is-hidden {
  opacity: 0;
  transform: translateY(-96px);
}
.nav-pill {
  opacity: 0;
  transition:
    transform 0.5s var(--ease),
    width 0.5s var(--ease),
    opacity 0.3s ease;
}
.nav-sheet {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(6px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease),
    filter 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.nav-sheet.is-open {
  opacity: 1;
  transform: none;
  filter: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ---------- Contact form views (assets/js/form.js) ---------- */
.form-view {
  transition:
    opacity 0.35s ease,
    filter 0.35s ease;
}
.form-view.is-leaving,
.form-view.is-entering {
  opacity: 0;
  filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Your own styles ---------- */

/* ---------- About portrait: no frame, just depth ---------- */
.about-portrait {
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
}

/* ---------- Timeline: body and actions line up with the text, not the monogram ---------- */
.tl-actions,
.tl-body {
  padding-left: 3.75rem; /* monogram 2.75rem + gap 1rem */
}

/* ---------- Timeline: work entries (left column) lean towards the spine ---------- */
@media (min-width: 768px) {
  .tl-mirror .tl-actions,
  .tl-mirror .tl-body {
    padding-left: 0;
    padding-right: 3.75rem;
  }
  .tl-mirror {
    text-align: right;
  }
  .tl-mirror .tl-head {
    flex-direction: row-reverse;
  }
  .tl-mirror .tl-meta,
  .tl-mirror .tl-actions {
    justify-content: flex-end;
  }
}

/* ---------- iPod in black liquid glass (includes/ipod.php) ----------
   Everything inside is sized in cqw (% of the iPod's width), so it scales. */
.ipod-stage {
  perspective: 1400px;
}
.ipod {
  --lg-tint: 8 8 10;
  --lg-alpha: 0.6;
  --lg-blur: 30px;
  --lg-rim: 0.5;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 0.6;
  border-radius: 12% / 7.2%;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.28),
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    inset 0 -40px 80px -40px rgb(0 0 0 / 0.6),
    0 60px 120px -50px rgb(0 0 0 / 0.85);
}
.ipod__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgb(255 255 255 / 0.07) 42%, transparent 58%);
}
.ipod__screen {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  top: 7cqw;
  height: 64cqw;
  overflow: hidden;
  border-radius: 4.5cqw;
  background: #000;
  box-shadow:
    0 0 0 0.5cqw rgb(0 0 0 / 0.7),
    0 0 0 0.9cqw rgb(255 255 255 / 0.06);
}
.ipod__art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 18% 8%, var(--art-1, #45bfff) 0%, transparent 55%),
    radial-gradient(100% 80% at 92% 30%, var(--art-2, #7a5cff) 0%, transparent 60%),
    linear-gradient(160deg, var(--art-3, #2d7ff0), var(--art-4, #4b3aa8));
  animation: ipod-art 16s ease-in-out infinite alternate;
}
.ipod__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent 58%);
}
@keyframes ipod-art {
  from { filter: hue-rotate(-14deg) saturate(1.05); }
  to { filter: hue-rotate(22deg) saturate(1.15); }
}
.ipod__status {
  position: absolute;
  left: 4cqw;
  top: 3.2cqw;
  width: 4.4cqw;
  color: rgb(255 255 255 / 0.85);
}
.ipod__meta {
  position: absolute;
  left: 4.5cqw;
  right: 4.5cqw;
  bottom: 3.6cqw;
  color: #fff;
}
.ipod__title {
  overflow: hidden;
  font-size: 6.2cqw;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ipod__artist {
  margin-top: 0.6cqw;
  font-size: 4.6cqw;
  opacity: 0.8;
}
.ipod__progress {
  margin-top: 3.4cqw;
  height: 0.9cqw;
  overflow: hidden;
  border-radius: 1cqw;
  background: rgb(255 255 255 / 0.28);
}
.ipod__progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transition: width 1s linear;
}
.ipod__times {
  display: flex;
  justify-content: space-between;
  margin-top: 1.6cqw;
  font-size: 3.4cqw;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.ipod__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg, rgb(255 255 255 / 0.16), transparent 38%);
}
.ipod__wheel {
  --lg-tint: 255 255 255;
  --lg-alpha: 0.05;
  --lg-blur: 12px;
  position: absolute;
  left: 19cqw;
  top: 88cqw;
  width: 62cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  color: rgb(255 255 255 / 0.88);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.18),
    inset 0 -1.2cqw 3cqw rgb(0 0 0 / 0.35),
    0 0.6cqw 2cqw rgb(0 0 0 / 0.35);
}
.ipod__menu {
  position: absolute;
  top: 6.6cqw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4.4cqw;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.ipod__previous,
.ipod__next,
.ipod__note {
  position: absolute;
  width: 5.4cqw;
}
.ipod__previous,
.ipod__next {
  top: 50%;
  transform: translateY(-50%);
}
.ipod__previous {
  left: 6.4cqw;
}
.ipod__next {
  right: 6.4cqw;
}
.ipod__note {
  bottom: 6cqw;
  left: 50%;
  transform: translateX(-50%);
}
.ipod__center {
  --lg-tint: 8 8 10;
  --lg-alpha: 0.55;
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 24cqw;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ipod__center svg {
  width: 6cqw;
}

/* ---------- The iPod, interactive (assets/js/ipod.js) ---------- */
.ipod__screen {
  cursor: pointer;
}
.ipod__wheel {
  cursor: grab;
  touch-action: none;
  outline: none;
}
.ipod__wheel:focus-visible {
  box-shadow: 0 0 0 0.8cqw rgb(255 255 255 / 0.5);
}
.ipod__wheel button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Bigger hit areas than the glyphs themselves. */
.ipod__menu::before,
.ipod__previous::before,
.ipod__next::before,
.ipod__note::before {
  content: "";
  position: absolute;
  inset: -4cqw;
}
.ipod__wheel button:active {
  opacity: 0.6;
}
.ipod__center:active {
  transform: translate(-50%, -50%) scale(0.96);
}
.ipod__center svg + svg,
.ipod-stage.is-paused .ipod__center svg:first-child {
  display: none;
}
.ipod-stage.is-paused .ipod__center svg + svg {
  display: block;
}

/* Play/pause state next to the signal bars. */
.ipod__status {
  display: flex;
  width: auto;
  gap: 2cqw;
  align-items: center;
}
.ipod__status > svg {
  width: 4.4cqw;
}
.ipod__state svg {
  width: 3.6cqw;
}
.ipod__state svg + svg,
.ipod-stage.is-paused .ipod__state svg:first-child {
  display: none;
}
.ipod-stage.is-paused .ipod__state svg + svg {
  display: block;
}

/* Scrubber, swapped for a volume bar while the wheel turns. */
.ipod__seek {
  margin-top: -1.6cqw;
  padding-top: 1.6cqw;
  cursor: ew-resize;
  touch-action: none;
}
.ipod__volume {
  display: none;
  align-items: center;
  gap: 2.4cqw;
  margin-top: 2.4cqw;
  height: 6.2cqw;
}
.ipod__volume svg {
  width: 4.6cqw;
  flex-shrink: 0;
}
.ipod__volume .ipod__progress {
  flex: 1;
  margin-top: 0;
}
.ipod__volume .ipod__progress > span {
  transition: width 0.12s ease-out;
}
.ipod__meta.is-volume .ipod__seek {
  display: none;
}
.ipod__meta.is-volume .ipod__volume {
  display: flex;
}

/* The menu. */
.ipod__list {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgb(14 14 16 / 0.82);
  -webkit-backdrop-filter: blur(4cqw);
  backdrop-filter: blur(4cqw);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.ipod__screen.is-menu .ipod__list {
  opacity: 1;
  visibility: visible;
}
.ipod__list-title {
  padding: 2.6cqw 4cqw 2cqw;
  border-bottom: 0.25cqw solid rgb(255 255 255 / 0.14);
  font-size: 4.4cqw;
  font-weight: 600;
  text-align: center;
}
.ipod__list ul {
  margin: 0;
  padding: 1.2cqw;
  list-style: none;
}
.ipod__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1.7cqw 2.8cqw;
  border-radius: 1.6cqw;
  font-size: 4.6cqw;
  font-weight: 500;
  white-space: nowrap;
}
.ipod__list li.is-active {
  background: #fff;
  color: #000;
}
.ipod__list li.has-submenu::after {
  content: "\203A";
  opacity: 0.6;
}
.ipod__list li.is-current::after {
  content: "\2713";
  opacity: 0.7;
}

/* Skins, picked from the menu. */
.ipod[data-skin="frosted"] {
  --lg-tint: 255 255 255;
  --lg-alpha: 0.16;
  --lg-blur: 40px;
}
.ipod[data-skin="classic"] {
  --lg-tint: 238 238 241;
  --lg-alpha: 0.94;
}
.ipod[data-skin="classic"] .ipod__wheel {
  --lg-tint: 255 255 255;
  --lg-alpha: 0.9;
  color: rgb(120 120 128);
}
.ipod[data-skin="classic"] .ipod__center {
  --lg-tint: 226 226 231;
  --lg-alpha: 0.95;
}


/* ---------- Capabilities: the tools behind each process step ---------- */
.capabilities-heading {
  max-width: 36rem;
  margin-bottom: 2.5rem;
}
.tool-chips {
  list-style: none;
}
.tool-chip {
  background: rgb(var(--tint, 255 255 255) / 0.12);
  color: rgb(var(--tint, 255 255 255) / 0.92);
}
/* Equal-height cards side by side; on phones they just fit their content. */
@media (min-width: 768px) {
  .capability-card {
    min-height: 16rem;
  }
}

/* ---------- Work: a faint glow in each project's own colour ---------- */
.project-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 75% 45%, rgb(var(--tint) / 0.16), transparent 70%),
    radial-gradient(40% 35% at 15% 90%, rgb(var(--tint) / 0.08), transparent 70%);
}

/* ---------- Project icons: fixed height, width follows the image (never stretched) ---------- */
.project-icon {
  width: auto;
  height: 4rem;
}
.project-icon--wide {
  height: 2.75rem;
}
@media (min-width: 768px) {
  .project-icon {
    height: 5rem;
  }
  .project-icon--wide {
    height: 3.25rem;
  }
}

/* ---------- Project pages: plain lists, verdicts and the median-time chart ---------- */
.verdict-dot--fail {
  background: rgb(255 105 97 / 0.75);
}

.median-chart__rows {
  display: grid;
}
.median-chart__row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr 3rem;
  align-items: center;
  gap: 1.25rem;
  padding: 0.45rem 0;
}
.median-chart__row--head {
  padding: 0;
}
.median-chart__track {
  position: relative;
  height: 10px;
}
.median-chart__row--head .median-chart__track {
  height: 1.25rem;
}
/* The oracle's median, as a dashed reference that runs through every row. */
.median-chart__track::after {
  content: "";
  position: absolute;
  left: var(--oracle);
  top: -0.45rem;
  bottom: -0.45rem;
  border-left: 1px dashed rgb(var(--m-text) / 0.35);
}
.median-chart__row--head .median-chart__track::after {
  top: 1.1rem;
}
.median-chart__oracle-label {
  position: absolute;
  left: var(--oracle);
  top: 0;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: rgb(var(--m-muted));
  white-space: nowrap;
}
.median-chart__bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgb(var(--m-text) / 0.22);
}
.median-chart__bar--highlight {
  background: rgb(var(--m-accent) / 0.9);
}
@media (max-width: 767px) {
  .median-chart__row {
    grid-template-columns: 6.5rem 1fr 2.5rem;
    gap: 0.75rem;
  }
  .median-chart__label {
    font-size: 0.85rem;
  }
}

.exact-numbers summary {
  list-style: none;
}
.exact-numbers summary::-webkit-details-marker {
  display: none;
}
.exact-numbers summary::before {
  content: "+ ";
}
.exact-numbers[open] summary::before {
  content: "\2212 ";
}

/* ---------- Spindle: numbered click-wheel diagram ---------- */
.wheel-diagram__body {
  fill: rgb(var(--m-text) / 0.05);
  stroke: rgb(var(--m-text) / 0.14);
}
.wheel-diagram__screen {
  fill: rgb(0 0 0 / 0.35);
  stroke: rgb(var(--m-text) / 0.12);
}
.wheel-diagram__text,
.wheel-diagram__track {
  fill: rgb(var(--m-text) / 0.18);
}
.wheel-diagram__progress {
  fill: rgb(var(--m-text) / 0.6);
}
.wheel-diagram__wheel {
  fill: rgb(var(--m-text) / 0.05);
  stroke: rgb(var(--m-text) / 0.12);
}
.wheel-diagram__button {
  fill: rgb(var(--m-text) / 0.08);
}
.wheel-diagram__turn {
  fill: none;
  stroke: rgb(var(--m-accent));
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wheel-diagram__marker circle,
.wheel-diagram__key {
  fill: rgb(var(--m-accent));
  background: rgb(var(--m-accent));
}
.wheel-diagram__marker text {
  fill: rgb(var(--m-on-accent));
  font: 600 12px var(--font-mono);
  text-anchor: middle;
  dominant-baseline: central;
}
.wheel-diagram__key {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  color: rgb(var(--m-on-accent));
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---------- Project pages: spacing the compiled Tailwind file does not include ---------- */
.plain-grid {
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .plain-grid {
    column-gap: 4rem;
    row-gap: 3.5rem;
  }
}
.median-chart {
  margin-top: 5rem;
}
.exact-numbers summary {
  cursor: pointer;
}
.wheel-diagram {
  max-width: 300px;
}
.controls-legend {
  display: grid;
  gap: 1.75rem;
  list-style: none;
}
.controls-legend li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

/* ---------- Accent: links on hover, and the Download / Read the thesis buttons ---------- */
.link-accent {
  transition: color 0.25s var(--ease);
}
.link-accent:hover,
.link-accent:focus-visible {
  color: rgb(var(--m-accent));
}
.btn-accent {
  background: rgb(var(--m-accent));
  color: rgb(var(--m-on-accent));
  transition: filter 0.25s var(--ease), transform 0.3s var(--ease);
}
.btn-accent:hover {
  filter: brightness(1.08);
}
.btn-accent:active {
  transform: scale(0.97);
}

/* ---------- Contact pills: an orange fill sweeps in from the left, and out to the right ---------- */
.channel-btn {
  overflow: hidden;
}
.channel-btn__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgb(var(--m-accent));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.55s var(--ease);
}
.channel-btn:hover .channel-btn__fill,
.channel-btn:focus-visible .channel-btn__fill {
  transform: scaleX(1);
  transform-origin: left center;
}
.channel-btn__label {
  position: relative;
  z-index: 2;
  transition: color 0.35s var(--ease);
}
.channel-btn:hover .channel-btn__label,
.channel-btn:focus-visible .channel-btn__label {
  color: rgb(var(--m-on-accent));
}
.channel-btn__label svg {
  opacity: 0.6;
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
}
.channel-btn:hover .channel-btn__label svg,
.channel-btn:focus-visible .channel-btn__label svg {
  opacity: 1;
  transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .channel-btn__fill,
  .channel-btn__label svg {
    transition: none;
  }
}

/* ---------- Footer: the small Privacy link ---------- */
.footer-link {
  margin-left: 0.75rem;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease);
}
.footer-link:hover {
  color: rgb(var(--m-accent));
}

/* ---------- Privacy page: plain reading text ---------- */
.legal__meta {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: rgb(var(--m-muted));
}
.legal__lead {
  margin-top: 3rem;
  font-size: 1.375rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.legal h2 {
  margin-top: 3rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.legal h2 + p {
  margin-top: 0.75rem;
  line-height: 1.7;
  color: rgb(var(--m-muted));
}
.legal p a {
  color: rgb(var(--m-text));
  text-decoration: underline;
  text-decoration-color: rgb(var(--m-accent));
  text-underline-offset: 3px;
}
.legal p a:hover {
  color: rgb(var(--m-accent));
}