/* ==========================================================================
   dominicryder.com

   The page is built as a register, not a deck of cards. Every entry is a row
   on a two column grid: the designation hangs in the left margin, the content
   sits in the right column, and hairline rules run past both of them out to
   the edge of the page. Boxes appear exactly once, on the contact channels,
   so that when a box does show up it means something.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, no external requests)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') 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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') 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;
}

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex-cond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex-cond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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 Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/plex-cond-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/plex-cond-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --ink:        #0C0F16;
  --panel:      #121722;
  --paper:      #E9E7E1;
  --amber:      #E8A33D;
  --slate:      #8A93A6;
  --hairline:   #222B3A;

  --paper-soft: rgba(233, 231, 225, 0.80);
  --amber-wash: rgba(232, 163, 61, 0.035);
  --amber-line: rgba(232, 163, 61, 0.42);

  --display: 'IBM Plex Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  --rail-w:   150px;
  --rail-gap: 232px;
  --wrap:     1120px;
  --gutter:   clamp(20px, 4.4vw, 56px);

  /* the register grid */
  --mark-w:   232px;
  --col-gap:  40px;

  --bar-h: 56px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.012em;
  line-height: 1.02;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

::selection { background: var(--amber); color: var(--ink); }

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

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

/* Fixed rather than absolute, so it stays reachable from anywhere on the page,
   including partway down. */
.skip {
  position: fixed;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip:focus { top: 8px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* a standalone rule, running the full width of its section */
.rule { border-top: 1px solid var(--hairline); }

/* --------------------------------------------------------------------------
   4. The register grid
   -------------------------------------------------------------------------- */

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 0;
}

.row__body > * + * { margin-top: 1.15em; }

/* --------------------------------------------------------------------------
   5. Spec line: the registry device
   -------------------------------------------------------------------------- */

.spec {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: pre-wrap;
}

/* Every designation in the register opens with a short amber bar, the same
   marker the social card carries. It lengthens when the entry is hovered. */
.row__mark .spec::before {
  content: '';
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 15px;
  background: var(--amber);
  transition: width 0.3s var(--ease);
}
.entry:hover .row__mark .spec::before { width: 58px; }

/* Bordered block with amber registration ticks at opposing corners. Used for
   the hero data plate and the contact channels, nowhere else. */
.plate {
  position: relative;
  border: 1px solid var(--hairline);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.plate::before,
.plate::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
}
.plate::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--amber);
  border-left: 1px solid var(--amber);
}
.plate::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--amber);
  border-right: 1px solid var(--amber);
}

/* --------------------------------------------------------------------------
   6. Rail: a graduated scale on desktop, a top bar on mobile
   -------------------------------------------------------------------------- */

.rail {
  position: fixed;
  z-index: 50;
  top: 0; left: 0; right: 0;
  background: var(--ink);
  border-bottom: 1px solid var(--hairline);
}

.rail__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-h);
  padding: 0 var(--gutter);
}

.rail__mark {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--amber);
}

.rail__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.rail__toggle:hover { border-color: var(--amber); color: var(--amber); }

.rail__toggle-glyph { position: relative; width: 13px; height: 9px; flex: none; }
.rail__toggle-glyph::before,
.rail__toggle-glyph::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.22s var(--ease);
}
.rail__toggle-glyph::before { top: 0; }
.rail__toggle-glyph::after  { bottom: 0; }
.rail__toggle[aria-expanded='true'] .rail__toggle-glyph::before { transform: translateY(4px) rotate(45deg); }
.rail__toggle[aria-expanded='true'] .rail__toggle-glyph::after  { transform: translateY(-4px) rotate(-45deg); }

.rail__list {
  display: none;
  border-top: 1px solid var(--hairline);
  padding: 8px 0 16px;
}
.rail__list.is-open { display: block; }

.rail__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px var(--gutter);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-soft);
  transition: color 0.2s var(--ease);
}
.rail__list a:hover { color: var(--paper); }

/* The index number stays quieter than its label, but stays readable: hairline
   on ink is 1.34:1, which is nowhere near AA for text this size. */
.rail__num {
  color: var(--slate);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s var(--ease);
}
.rail__list a:hover .rail__num { color: var(--paper-soft); }
.rail__list a[aria-current='true'],
.rail__list a[aria-current='true'] .rail__num { color: var(--amber); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { padding-top: calc(var(--bar-h) + 68px); }

.hero__title { container-type: inline-size; }

.hero__eyebrow {
  display: inline-block;
  padding: 11px 16px;
  margin-bottom: 30px;
}

/* Sized against the width of the column it sits in, so the name runs the full
   measure at every viewport instead of guessing with viewport units. */
.hero__name {
  font-size: clamp(3rem, 16.1cqi, 10.6rem);
  line-height: 0.86;
  letter-spacing: -0.022em;
  margin-bottom: 44px;
}

.hero__subline {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.62;
  color: var(--paper-soft);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   8. Control strip (hero actions)
   -------------------------------------------------------------------------- */

.strip {
  margin-top: 52px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.strip__row { display: flex; flex-direction: column; }

.strip__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  background: none;
  border: 0;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.strip__item + .strip__item { border-top: 1px solid var(--hairline); }
.strip__item:hover { color: var(--amber); }
.strip__item--copy { text-transform: none; letter-spacing: 0.04em; font-size: 13px; }

.strip__hint,
.action__hint,
.channel__hint {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  border-left: 1px solid var(--hairline);
  padding-left: 10px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.strip__item:hover .strip__hint,
.action--copy:hover .action__hint,
.channel:hover .channel__hint { color: var(--amber); border-color: var(--amber-line); }
.is-copied .strip__hint,
.is-copied .action__hint,
.is-copied .channel__hint { color: var(--amber); }

/* --------------------------------------------------------------------------
   9. Quiet actions, used inside register entries
   -------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin-top: 32px;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 7px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.action:hover { color: var(--amber); border-bottom-color: var(--amber); }
.action--copy { text-transform: none; letter-spacing: 0.04em; font-size: 13px; }

/* --------------------------------------------------------------------------
   10. Stat band
   -------------------------------------------------------------------------- */

.stats {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
}

.stats__grid { display: grid; grid-template-columns: 1fr; }

.stat {
  padding: 26px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat + .stat { border-top: 1px solid var(--hairline); }

.stat__figure {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   11. Sections
   -------------------------------------------------------------------------- */

.section {
  padding: clamp(74px, 10vw, 122px) 0 clamp(66px, 9vw, 108px);
  scroll-margin-top: calc(var(--bar-h) + 8px);
}
.section + .section { border-top: 1px solid var(--hairline); }

.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 0;
  margin-bottom: 46px;
}

.section__index {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.section__title {
  font-size: clamp(1.95rem, 4.8vw, 3rem);
  font-weight: 600;
}

.prose { max-width: 68ch; color: var(--paper-soft); }
.prose p + p { margin-top: 1.1em; }
.prose--lead { font-size: clamp(1.02rem, 1.5vw, 1.14rem); }
.prose--intro { color: var(--paper-soft); }

/* --------------------------------------------------------------------------
   12. Register entries
   -------------------------------------------------------------------------- */

.register {
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
}
.section > .wrap + .register,
.section > .wrap + .wrap + .register { margin-top: 42px; }

.entry {
  padding: 34px 0 38px;
  border-bottom: 1px solid var(--hairline);
  transition: background-color 0.3s var(--ease);
}
.entry:hover { background: var(--amber-wash); }

.entry__title {
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  font-weight: 600;
  margin-bottom: 14px;
}
.entry__title--lg { font-size: clamp(1.85rem, 3.4vw, 2.5rem); margin-bottom: 18px; }

.entry .row__body > .prose { margin-top: 0; }

.linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 24px;
}
.linkrow a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.linkrow a:hover { color: var(--amber); border-color: var(--amber); }

/* a row that follows a register needs air, or it reads as part of it */
.register + .wrap { margin-top: 30px; }
.row__body.actions { margin-top: 0; }

.closing {
  color: var(--slate);
  letter-spacing: 0.08em;
}
.closing::before { display: none; }

/* --------------------------------------------------------------------------
   13. Contact channels: the one place a box appears
   -------------------------------------------------------------------------- */

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 14px;
}

.channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 19px 18px;
  background: none;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.channel:hover {
  color: var(--amber);
  border-color: var(--amber-line);
  background: var(--amber-wash);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--hairline);
  padding: 34px 0 42px;
}
.foot p {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   15. Motion
   -------------------------------------------------------------------------- */

.js .hero__name,
.js .hero__subline,
.js .strip {
  animation: rise 0.62s var(--ease) both;
}
.js .hero__name    { animation-delay: 0.18s; }
.js .hero__subline { animation-delay: 0.30s; }
.js .strip         { animation-delay: 0.40s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* The spec line types on character by character. Every character occupies its
   final width from the start, so nothing on the page moves while it runs, and
   the caret is a border on the next character rather than an extra element. */
.tc { color: transparent; }
.tc.is-on { color: inherit; }
.tc--caret {
  color: transparent;
  border-bottom: 1px solid var(--amber);
  animation: caret 0.8s steps(1, end) infinite;
}
@keyframes caret {
  0%, 49%   { border-bottom-color: var(--amber); }
  50%, 100% { border-bottom-color: transparent; }
}

[data-reveal='armed'] .reveal { opacity: 0; transform: translateY(16px); }
[data-reveal='armed'] .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

/* --------------------------------------------------------------------------
   16. Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  /* the marker column is empty on intro and closing rows, so drop it entirely */
  .row__mark:empty { display: none; }
}

@media (min-width: 620px) {
  .strip__row { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .strip__item { padding: 18px 26px; }
  .strip__item:first-child { padding-left: 0; }
  .strip__item + .strip__item {
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }
}

@media (min-width: 720px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 32px 0 34px; }
  .stat + .stat {
    border-top: 0;
    border-left: 1px solid var(--hairline);
    padding-left: 34px;
  }
}

@media (min-width: 900px) {
  .row {
    grid-template-columns: var(--mark-w) minmax(0, 1fr);
    gap: 0 var(--col-gap);
  }

  .section__head {
    grid-template-columns: var(--mark-w) minmax(0, 1fr);
    gap: 0 var(--col-gap);
    align-items: baseline;
  }

  .entry { padding: 40px 0 46px; }
}

@media (min-width: 1180px) {
  body { padding-left: var(--rail-gap); }

  .rail {
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    width: var(--rail-w);
    margin-left: clamp(24px, 3.2vw, 56px);
    background: none;
    border-bottom: 0;
  }
  .rail__bar { display: none; }
  .rail__list {
    display: block;
    border-top: 0;
    padding: 0;
    border-left: 1px solid var(--hairline);
  }

  /* each entry is a graduation on the scale; the current one reads longest */
  .rail__list a {
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: 11.5px;
  }
  .rail__list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 9px;
    height: 1px;
    background: var(--hairline);
    transition: width 0.22s var(--ease), background-color 0.22s var(--ease);
  }
  .rail__list a:hover::before { width: 15px; background: var(--slate); }
  .rail__list a[aria-current='true']::before { width: 19px; background: var(--amber); }

  .hero { padding-top: clamp(80px, 13vh, 138px); }
  .section { scroll-margin-top: 0; }
}

/* --------------------------------------------------------------------------
   17. Reduced motion: everything static, nothing hidden
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .hero__name,
  .js .hero__subline,
  .js .strip { animation: none; opacity: 1; transform: none; }

  .reveal { opacity: 1 !important; transform: none !important; }

  .tc, .tc--caret { color: inherit; border-bottom: 0; animation: none; }
}