@layer reset, tokens, base, page, components, brand;
/* A small modern reset: predictable box sizing and spacing, media that behave. */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    /* Guard only: .center gives the scrollbar's width back, so nothing should overflow sideways. */
    overflow-x: clip;
  }

  body {
    min-block-size: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

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

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  :target {
    scroll-margin-block: 2rem;
  }

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

/* Font faces, as piing.gg (src/app/(frontend)/styles/base.css), Latin and Latin Extended only: the page is
   English. Browsers fetch a file only when text needs it, so Latin Extended costs nothing here.
   Geologica variable (the full cut, as the site) and IBM Plex Mono 500. Licences: fonts/OFL-*.txt. */
@font-face {
  font-family: Geologica;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/piing/fonts/geologica-latin-full-normal.woff2?v=94045871535a") format('woff2-variations');
  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: Geologica;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/piing/fonts/geologica-latin-ext-full-normal.woff2?v=8f52d1b0f52c") format('woff2-variations');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400 500;
  src: url("/assets/piing/fonts/ibm-plex-mono-latin-500-normal.woff2?v=01d285447409") 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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400 500;
  src: url("/assets/piing/fonts/ibm-plex-mono-latin-ext-500-normal.woff2?v=6bb06407c975") format('woff2');
  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;
}

/* Copied unchanged from sites/piing.gg/src/app/(frontend)/styles/tokens.css on 2026-11-12 (design system v1.1.0, Quiet Paper).
   Copy it again when the site changes; never import. Paper on light devices, Graphite on dark ones. */
/*
 * Piing design system v1.1.0 tokens (Quiet Paper, 2026-11-11; pass A 2026-10-31, the map 2026-11-02), copied by hand from docs/design/design-system/tokens.json.
 * Paper on :root; Graphite by the switch (data-theme="dark") or, with no choice made, by the device.
 * The Signal and moment sets are the same in both themes: Signal is a state, the moment is the moment.
 */
@layer tokens {
  :root, [data-theme="light"] {
    --color-bg: #eceeeb;
    --color-surface: #ffffff;
    --color-fg: #161616;
    --color-muted: #565a58;
    --color-line: #e4e7e3;
    --color-grid: #e3e6e2;
    --color-rule: #7c837d;
    --color-hair: #d0d5cf;
    --color-outline: #b4bab4;
    --color-sunken: #f6f7f5;
    --color-accent: #007a63;
    --color-on-accent: #ffffff;
    --color-focus: var(--color-accent);
    --color-teal: #00b796;
    --color-on-teal: #161616;
    --color-teal-tint: #ddf3ec;
    --signal-bg: #07110f;
    --signal-surface: #0e1c19;
    --signal-fg: #e6fff6;
    --signal-muted: #8fb3a8;
    --signal-line: #1f3631;
    --signal-mint: #3df5b8;
    --signal-on-mint: #03140f;
    --moment-bg: #007a63;
    --moment-glow: #00846b;
    --moment-deep: #00735d;
    --moment-fg: #ffffff;
    --map-land: #f3f4f2;
    --map-water: #d5e1dd;
    --map-park: #e7ece6;
    --map-road: #ffffff;
    --map-label: #565a58;
  }
  [data-theme="dark"] {
    --color-bg: #131514;
    --color-surface: #1c1e1d;
    --color-fg: #eceeec;
    --color-muted: #9fa3a1;
    --color-line: #303433;
    --color-grid: #1f2221;
    --color-rule: #7a807d;
    --color-hair: #3d4240;
    --color-outline: #565c59;
    --color-sunken: #171918;
    --color-accent: #3fc9a4;
    --color-on-accent: #131514;
    --color-focus: var(--color-accent);
    --color-teal-tint: #17312a;
    --map-land: #161817;
    --map-water: #0e1b19;
    --map-park: #19201c;
    --map-road: #2f3331;
    --map-label: #9fa3a1;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-bg: #131514;
      --color-surface: #1c1e1d;
      --color-fg: #eceeec;
      --color-muted: #9fa3a1;
      --color-line: #303433;
      --color-grid: #1f2221;
      --color-rule: #7a807d;
      --color-hair: #3d4240;
      --color-outline: #565c59;
      --color-sunken: #171918;
      --color-accent: #3fc9a4;
      --color-on-accent: #131514;
      --color-focus: var(--color-accent);
      --color-teal-tint: #17312a;
      --map-land: #161817;
      --map-water: #0e1b19;
      --map-park: #19201c;
      --map-road: #2f3331;
      --map-label: #9fa3a1;
    }
  }
  :root {
    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs: 12px;
    --space-s: 16px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --stack-gap: var(--space-m);
    --radius: 0px;
    --radius-pill: 999px;
    --radius-round: 50%;
    --border-width: 1px;
    --rule-width: 1px;
    --route-width: 4px;
    --bar-width: 2px;
    --focus-width: 3px;
    --step--1: clamp(0.8125rem, 0.792rem + 0.093vw, 0.875rem);
    --step-0: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);
    --step-1: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);
    --step-2: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem);
    --step-3: clamp(1.5rem, 1.25rem + 1.111vw, 2.25rem);
    --step-4: clamp(1.875rem, 1.458rem + 1.852vw, 3.125rem);
    --step-5: clamp(2.25rem, 1.5rem + 3.333vw, 4.5rem);
    --step-6: clamp(3.5rem, 2rem + 6.667vw, 8rem);
    --measure: 65ch;
    --gutter: clamp(16px, 4vw, 40px);
    --page-max: 1280px;
    --font-display: Geologica, Arial, sans-serif;
    --font-text: Geologica, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", Consolas, monospace;
  }
  @media (min-width: 720px) { :root { --stack-gap: 40px; } }
  .display-open { font-family: var(--font-display); font-size: 128px; line-height: 0.92; font-weight: 400; letter-spacing: -0.05em; }
  .display-xl { font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -0.035em; }
  .display-l { font-family: var(--font-display); font-size: 44px; line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; }
  .heading { font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 400; letter-spacing: -0.03em; }
  .signal-display { font-family: var(--font-display); font-size: 56px; line-height: 0.95; font-weight: 800; letter-spacing: -0.02em; }
  .answer { font-family: var(--font-text); font-size: 24px; line-height: 1.4; font-weight: 400; }
  .lead { font-family: var(--font-text); font-size: 20px; line-height: 1.5; font-weight: 400; }
  .body { font-family: var(--font-text); font-size: 17px; line-height: 1.55; font-weight: 400; }
  .strong { font-family: var(--font-text); font-size: 17px; line-height: 1.4; font-weight: 600; }
  .small { font-family: var(--font-text); font-size: 14px; line-height: 1.45; font-weight: 400; }
  .data { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; font-weight: 400; }
  .label { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.04em; }
}

@layer tokens {
  :root {
    --feature-aspect: 16 / 9;
  }
}
/* Element defaults, from the shared token names only (foundations.md). */
@layer base {
  body {
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-text);
    font-size: var(--step-0);
    font-weight: var(--weight-text, 400);
    line-height: 1.5;
  }

  h1,
  h2 {
    font-family: var(--font-display);
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.1;
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  :focus-visible {
    outline: max(2px, var(--border-width)) solid var(--color-focus);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }

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

  /* Read by screen readers, not shown (the name when the logo carries it, separators). */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    font-weight: 400;
    font-style: normal;
  }
}

/* The page structure every brand shares: one centred column, phone first, the logo centred on top,
   the socials band at the foot of the screen. Reads only the shared token names; each brand's
   brand.css gives it its character and may set these hooks: --logo-size, --content-max (the column),
   --feature-aspect (from brand.json).
   With "flow": true in brand.json (class .flow on <html>), the website buttons run straight into
   the socials as one group instead of standing apart above the band. */
@layer page {
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: 10;
    padding: var(--space-2xs) var(--space-xs);
    background: var(--color-accent);
    color: var(--color-on-accent);
    transform: translateY(-200%);
  }
  .skip-link:focus-visible {
    transform: none;
  }

  /* Full-height page, so the band sits at the bottom of short pages and the extra space goes above it.
     Bands are full width; their content is a centred column of --content-max, framed by padding from
     the viewport width (100vw), so it keeps its place whether the page scrolls or not, and the end
     padding gives the scrollbar back. */
  .page {
    --frame-inset: max(var(--gutter), (100vw - var(--content-max, 36rem)) / 2);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100dvh;
  }
  .page > * {
    padding-inline: var(--frame-inset) calc(var(--frame-inset) - (100vw - 100%));
  }

  .announce {
    padding-block: var(--space-2xs);
    font-size: var(--step--1);
    text-align: center;
  }

  .profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
    padding-block-start: var(--space-xl);
    text-align: center;
  }
  .logo {
    display: block;
    inline-size: var(--logo-size, 200px);
    max-inline-size: 100%;
    color: var(--color-fg);
  }
  .logo-svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    fill: currentColor;
  }
  .profile-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
  }
  /* The intro is a side note under the logo, not a headline. */
  .intro {
    max-inline-size: 34ch;
    color: var(--color-muted);
    font-size: var(--step--1);
    line-height: 1.5;
    text-wrap: balance;
  }
  .photo img {
    inline-size: 96px;
    block-size: 96px;
    object-fit: cover;
  }

  .main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .label {
    font-size: var(--step--1);
  }

  /* Now: the featured card, then rows. */
  .now-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }
  .feature {
    display: grid;
    gap: var(--space-s);
    text-decoration: none;
  }
  .feature-media img {
    inline-size: 100%;
    aspect-ratio: var(--feature-aspect, 16 / 9);
    object-fit: cover;
  }
  .feature-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }
  .links {
    display: flex;
    flex-direction: column;
  }
  .link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: 56px;
    padding-block: var(--space-s);
    text-decoration: none;
  }
  .link-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0;
  }
  .link-meta {
    display: flex;
    flex-wrap: wrap;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
  }
  /* Phones: badge and end date go under the title, the row's arrow (if any) stays on the right. */
  @media (max-width: 559px) {
    .link {
      flex-wrap: wrap;
      row-gap: var(--space-2xs);
    }
    .link-meta {
      order: 1;
      flex-basis: 100%;
      justify-content: flex-start;
    }
  }
  .desc,
  .until {
    font-size: var(--step--1);
    color: var(--color-muted);
  }
  .badge {
    display: inline-block;
    font-size: var(--step--1);
    line-height: 1.2;
    white-space: nowrap;
  }

  /* Website buttons */
  .buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }
  .button {
    display: flex;
    align-items: center;
    min-block-size: 56px;
    text-decoration: none;
  }

  /* The band: socials, set apart from the links above, then the legal links. */
  .band {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-block: var(--space-xl) var(--space-l);
  }
  .primary {
    display: grid;
    gap: var(--space-2xs);
  }
  .social {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-block-size: 48px;
    text-decoration: none;
  }
  .social .icon {
    flex: none;
    inline-size: 28px;
    block-size: 28px;
  }
  .social-text {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-2xs);
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .social-handle {
    color: var(--color-muted);
  }
  .secondary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    margin-inline-start: -10px;
  }
  .primary + .secondary {
    margin-block-start: var(--space-s);
  }
  /* 44px tap targets around 22px icons */
  .icon-link {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    color: var(--color-muted);
  }
  .icon-link:hover {
    color: var(--color-fg);
  }
  .icon-link .icon {
    inline-size: 22px;
    block-size: 22px;
  }

  .legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    font-size: var(--step--1);
    color: var(--color-muted);
  }
  .legal ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs) var(--space-m);
  }
  .legal a {
    color: var(--color-muted);
  }
  .legal a:hover {
    color: var(--color-fg);
  }

  /* Flow: website and socials as one group. Main no longer takes the spare height; the band does,
     with the legal line pushed to the bottom. */
  .flow .main {
    flex: none;
    padding-block-end: 0;
  }
  .flow .band {
    flex: 1 0 auto;
    padding-block-start: var(--space-xl);
  }
  .flow .legal {
    margin-block-start: auto;
  }
}

@layer brand {
/* Piing on the bio page. Design system v1.1.0 (Quiet Paper), as piing.gg: the plain cool ground, white
   plates under a 2 px route-green bar with the station (the emblem's solid node) at its left end,
   Geologica for names and text, IBM Plex Mono for labels and facts, a pill for anything you press,
   square for anything you read, no shadows. Paper on light devices, Graphite on dark ones: every
   colour here is a token from tokens.css, so the switch needs nothing else. Calm everywhere; the
   system keeps its loud moments for events and Hubs. */

:root {
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --plate-pad: var(--space-m);
}
@media (min-width: 720px) {
  :root {
    --plate-pad: var(--space-l);
  }
}

body {
  font-feature-settings: normal;
}
.page {
  --content-max: 34rem;
}
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: 3px;
}
::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* The announcement: one teal-tint line, the system's single highlighted row. */
.announce {
  padding-block: var(--space-xs);
  background: var(--color-teal-tint);
  font-size: 14px;
  line-height: 1.45;
}
.announce a {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.announce a:hover {
  color: var(--color-accent);
}

/* The wordmark centred on top: letters in ink, the connector in route green (the inks of
   piing-wordmark.svg on Paper and piing-wordmark-dark.svg on Graphite). The intro is a quiet note. */
.profile {
  --logo-size: clamp(150px, 42vw, 196px);
  gap: var(--space-m);
  padding-block-start: clamp(56px, 12vw, 104px);
}
.logo-svg .logo-ink {
  fill: var(--color-fg);
}
.logo-svg .logo-node {
  fill: var(--color-accent);
}
.intro {
  max-inline-size: 30ch;
  font-size: 15px;
  line-height: 1.55;
}

/* Section labels: mono, uppercase, muted, as .pi-label. */
.label {
  margin-block-end: var(--space-s);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.main {
  gap: var(--space-l);
  padding-block: var(--space-xl) var(--space-l);
}

/* Plates: Now and the socials. White sheet, the bar, the station. */
.now,
.socials {
  position: relative;
  padding: var(--plate-pad);
  background: var(--color-surface);
  border-block-start: var(--bar-width) solid var(--color-accent);
}
.now::before,
.socials::before {
  content: "";
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: var(--plate-pad);
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-round);
  background: var(--color-accent);
}

/* Now: the featured card, then rows between hairlines. */
.now-body {
  gap: var(--space-m);
}
.feature {
  gap: var(--space-s);
}
.feature-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.feature:hover .feature-title,
.link:hover .link-title {
  color: var(--color-accent);
}
.feature-body {
  gap: var(--space-2xs);
}
.links > li + li {
  border-block-start: var(--rule-width) solid var(--color-line);
}
.feature + .links {
  border-block-start: var(--rule-width) solid var(--color-line);
}
.link {
  min-block-size: 64px;
}
.link::after {
  content: "↗";
  flex: none;
  color: var(--color-muted);
}
.link:hover::after {
  color: var(--color-accent);
}
.link-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.desc {
  font-size: 14px;
  line-height: 1.45;
}
.until {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* Badge: a tag, as .pi-tag – mono, uppercase, a pill in the rule colour. */
.badge {
  padding: 3px 8px;
  border: var(--border-width) solid var(--color-rule);
  border-radius: var(--radius-pill);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Website: the primary button, a route-green pill across the column. */
.buttons {
  gap: var(--space-xs);
}
.button {
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 56px;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  transition:
    background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}
.button::after {
  content: "↗";
  font-weight: 400;
}
.button:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}
.button:active {
  transform: translateY(1px);
}

/* The band: the socials plate, then the legal line on the ground. */
.band {
  gap: var(--space-l);
  padding-block: 0 var(--space-l);
}
.primary {
  gap: 0;
}
.primary > li + li {
  border-block-start: var(--rule-width) solid var(--color-line);
}
.social {
  gap: var(--space-s);
  min-block-size: 60px;
  padding-block: var(--space-xs);
}
.social::after {
  content: "↗";
  margin-inline-start: auto;
  color: var(--color-muted);
}
.social:hover::after {
  color: var(--color-accent);
}
.social .icon {
  inline-size: 24px;
  block-size: 24px;
}
.social-text {
  align-items: baseline;
  column-gap: var(--space-s);
}
.social-name {
  min-inline-size: 6.5em;
  font-size: 16px;
  font-weight: 600;
}
.social:hover .social-name {
  color: var(--color-accent);
}
.social-handle {
  font-family: var(--font-mono);
  font-size: 13px;
}
.primary + .secondary {
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule-width) solid var(--color-line);
  margin-inline-start: 0;
}
.primary + .secondary > li:first-child {
  margin-inline-start: -10px;
}
.icon-link {
  color: var(--color-fg);
  border-radius: var(--radius-round);
}
.icon-link:hover {
  color: var(--color-accent);
}

/* Legal: mono small print on the ground. */
.legal {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal a {
  text-decoration: none;
}
.legal a:hover {
  color: var(--color-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

}