/* ============================================================
   Tiny Happy — pre-launch landing page
   Palette and fonts follow the locked Tiny Happy brand system.
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  /* Spacing */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  --radius: 14px;
  --radius-lg: 22px;
  --shell: 68rem;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Brand palette (locked) */
  --cream:      #FBF6EF;
  --ivory:      #F7EFE4;
  --blush:      #F3CFD3;
  --dusty-rose: #C08192;
  --rose-ink:   #8E4E62;
  --plum-ink:   #4A3540;
  --lavender:   #CFC3E3;
  --lilac:      #E7E0F2;
  --sage:       #B4C4AC;
  --aqua:       #C3DCDC;
}

/* ---------- Light (default) ---------- */
:root,
[data-theme="light"] {
  --bg:          var(--cream);
  --surface:     #FFFCF7;
  --tint:        var(--lilac);
  --wash-a:      #DED3EE;
  --wash-b:      var(--lilac);
  /* Hero: solid lavender band with legible text tones */
  --hero-bg:      var(--lavender);
  --hero-muted:   #5F4A55;
  --hero-accent:  #753F51;
  --hero-surface: #FFFCF7;
  --hero-border:  #B9A9D2;
  /* Illustration */
  --ill-ink:    #4A3540;
  --ill-cup:    #FBF6EF;
  --ill-lid:    #F3CFD3;
  --ill-straw:  #E7E0F2;
  --ill-ghost:  #FFFCF7;
  --border:      #E4D9DC;
  --text:        var(--plum-ink);
  --text-muted:  #7C6672;
  --text-faint:  #A9959E;
  --accent:      var(--rose-ink);
  --accent-hover:#753F51;
  --on-accent:   #FFFBF7;
  --motif-fill:  var(--lilac);
  --motif-ink:   var(--plum-ink);
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
  --bg:          #241A20;
  --surface:     #2E2229;
  --tint:        #2E2229;
  --wash-a:      #34252F;
  --wash-b:      #241A20;
  --hero-bg:      #34252F;
  --hero-muted:   #C6B2BC;
  --hero-accent:  #EFB9C6;
  --hero-surface: #2E2229;
  --hero-border:  #4E3B45;
  --ill-ink:    #F2E8EC;
  --ill-cup:    #3D2C35;
  --ill-lid:    #6E4653;
  --ill-straw:  #4A3745;
  --ill-ghost:  #4E3B45;
  --border:      #43333B;
  --text:        #F2E8EC;
  --text-muted:  #BCA7B1;
  --text-faint:  #8E7A84;
  --accent:      #EFB9C6;
  --accent-hover:#F7D0D9;
  --on-accent:   #2A1D23;
  --motif-fill:  #54404A;
  --motif-ink:   #F2E8EC;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-12));
}

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: var(--space-3) var(--space-5); z-index: 100;
  border-radius: 0 0 var(--radius) 0; font-size: var(--text-sm);
}
.skip:focus { left: 0; }

:where(a, button, input):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============ LOGO ============ */
.logo { display: block; color: var(--text); }
.logo svg { display: block; width: 100%; height: auto; overflow: visible; }

.logo__word {
  font-family: "Quicksand", ui-sans-serif, sans-serif;
  font-weight: 700;
  font-size: 46px;
  letter-spacing: -0.5px;
  fill: currentColor;
}
.logo__smile {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}
.logo--sm { width: 116px; }
.logo--hero { width: min(340px, 74vw); margin: var(--space-5) auto var(--space-8); }

/* Hero smile draws itself in on load */
.logo--hero .logo__smile {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-smile 1.1s .45s var(--ease) forwards;
}
@keyframes draw-smile { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .logo--hero .logo__smile { animation: none; stroke-dashoffset: 0; }
}

/* ============ HEADER ============ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--hero-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.header--scrolled {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
}
.header--scrolled { border-bottom-color: var(--border); }
/* Header sits on the lavender hero before scroll */
.header:not(.header--scrolled) .logo__smile { stroke: var(--hero-accent); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.themetoggle {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.themetoggle:hover { color: var(--accent); border-color: var(--accent); }
.themetoggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.themetoggle__moon { display: none; }
[data-theme="dark"] .themetoggle__sun { display: none; }
[data-theme="dark"] .themetoggle__moon { display: block; }

/* ============ HERO ============ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  /* Keep small text legible against the solid lavender */
  --text-muted: var(--hero-muted);
  --text-faint: var(--hero-muted);
  --accent: var(--hero-accent);
  --surface: var(--hero-surface);
  --border: var(--hero-border);
}
.hero__inner {
  position: relative;
  padding-block: clamp(var(--space-10), 7vw, var(--space-16)) clamp(var(--space-10), 6vw, var(--space-16));
  display: flex; flex-direction: column; align-items: center;
}
.hero__copy {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

/* Illustration */
.hero__art {
  margin: clamp(var(--space-10), 6vw, var(--space-14)) 0 0;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
}
.hero__art svg {
  display: block;
  width: min(210px, 52vw);
  height: auto;
  overflow: visible;
}
.hero__caption {
  max-width: 22ch;
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 20, "wght" 400, "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-muted);
}

/* Illustration ink */
.ill { stroke-linecap: round; stroke-linejoin: round; }
.ill__body, .ill__lid, .ill__straw, .ill__ghost {
  stroke: var(--ill-ink);
  stroke-width: 3.4;
}
.ill__body { fill: var(--ill-cup); }
.ill__lid  { fill: var(--ill-lid); }
.ill__straw { fill: var(--ill-straw); }
.ill__ghost { fill: var(--ill-ghost); }
.ill__hint {
  fill: none; stroke: var(--ill-ink); stroke-width: 2.2; opacity: .3;
}
.ill__shadow { fill: var(--ill-ink); opacity: .1; }
.ill__eye { fill: var(--ill-ink); }
.ill__mouth { fill: none; stroke: var(--ill-ink); stroke-width: 2.4; }
.ill__blush { fill: none; stroke: var(--dusty-rose); stroke-width: 3; opacity: .85; }

@media (min-width: 60rem) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas:
      "copy art"
      "cue  art";
    align-items: start;
    column-gap: clamp(var(--space-8), 4vw, var(--space-16));
    row-gap: clamp(var(--space-8), 4vw, var(--space-12));
  }
  .hero__copy { grid-area: copy; text-align: left; align-items: flex-start; }
  .hero__art  { grid-area: art; margin-top: 0; align-self: center; }
  .scrollcue  { grid-area: cue; align-self: end; justify-self: start; align-items: flex-start; margin-top: 0; }
  .hero__copy .logo--hero { margin-left: 0; margin-right: 0; }
  .hero__art svg { width: min(300px, 100%); }
  .hero__caption { max-width: 26ch; }
}

.scrollcue {
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .25s var(--ease);
}
.scrollcue:hover { color: var(--accent); }
.scrollcue svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scrollcue svg { animation: none; }
}

.eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tagline {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "wght" 500, "SOFT" 100, "WONK" 1;
  font-size: var(--text-xl);
  font-style: italic;
  line-height: 1.25;
  color: var(--accent);
  max-width: 22ch;
}

.hero__lede {
  margin: var(--space-6) 0 0;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* ============ SIGNUP ============ */
.signup { width: 100%; max-width: 30rem; margin: var(--space-10) auto 0; text-align: left; }
.signup--center { margin-top: var(--space-8); }

.signup__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  text-align: center;
}

.signup__row { display: flex; gap: var(--space-2); }

.signup__input {
  flex: 1 1 auto; min-width: 0;
  padding: var(--space-4) var(--space-5);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.signup__input::placeholder { color: var(--text-faint); }
.signup__input:hover { border-color: var(--dusty-rose); }
.signup__input[aria-invalid="true"] { border-color: var(--accent); }

.btn {
  flex: none;
  padding: var(--space-4) var(--space-6);
  font-family: "Quicksand", sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

.signup__note,
.signup__msg {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-align: center;
}
.signup__msg { min-height: 1.3em; margin-top: var(--space-2); }
.signup__msg--ok  { color: var(--accent); font-weight: 600; }
.signup__msg--err { color: var(--accent); }

/* ============ SECTIONS ============ */
.section { padding-block: clamp(var(--space-16), 10vw, var(--space-24)); }
.section--tint { background: var(--tint); }

.kicker {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.h2 {
  margin: 0 0 var(--space-5);
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "wght" 600, "SOFT" 100, "WONK" 1;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--text);
}
.h2--center { text-align: center; }

.prose { margin: 0 0 var(--space-5); max-width: 58ch; color: var(--text-muted); }
.prose--tight { margin-bottom: 0; }
.prose--center { max-width: 48ch; margin-inline: auto; text-align: center; }

/* ============ MOTIFS ============ */
.motifs {
  list-style: none;
  margin: var(--space-12) 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.motif {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.motif:hover { transform: translateY(-3px); border-color: var(--dusty-rose); }

.motif__art { display: block; width: 68px; margin: 0 auto var(--space-5); }
.motif__art svg { display: block; width: 100%; height: auto; }
.motif__art .fill   { fill: var(--motif-fill); }
.motif__art .ink    { fill: var(--motif-ink); opacity: .72; }
.motif__art .stroke {
  fill: none; stroke: var(--motif-ink); stroke-width: 1.9;
  stroke-linecap: round; opacity: .46;
}
.motif__art .stroke--band { stroke: var(--accent); stroke-width: 3.4; opacity: .85; }

.motif__name {
  margin: 0 0 var(--space-2);
  font-family: "Quicksand", sans-serif;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}
.motif__note { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

/* ============ FACTS STRIP ============ */
.facts {
  list-style: none; padding: 0;
  margin: clamp(var(--space-10), 7vw, var(--space-16)) 0 0;
  border-top: 1px solid var(--border);
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fact {
  position: relative;
  padding: var(--space-6) var(--space-6) 0 0;
}
.fact::before {
  content: "";
  position: absolute; top: -2px; left: 0;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--dusty-rose);
}
.fact__k {
  display: block;
  font-family: "Quicksand", sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  margin-bottom: var(--space-1);
}
.fact__v { display: block; font-size: var(--text-sm); color: var(--text-muted); }

/* ============ STORY ============ */
.story {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .story { grid-template-columns: 1.45fr .9fr; }
}
.signoff {
  margin: var(--space-6) 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "wght" 500, "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-size: var(--text-base);
  color: var(--accent);
}

.pull {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--dusty-rose);
  border-radius: 6px var(--radius-lg) var(--radius-lg) 6px;
  padding: var(--space-8);
}
@media (min-width: 62rem) {
  .pull { margin-top: var(--space-12); }
}
.pull__quote {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "wght" 500, "SOFT" 100, "WONK" 1;
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.35;
  color: var(--text);
}

/* ============ CLOSING ============ */
.closing__inner { display: flex; flex-direction: column; align-items: center; }

/* ============ FOOTER ============ */
.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-12);
  font-size: var(--text-sm);
}
.footer__inner {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  justify-content: space-between; align-items: flex-start;
}
.footer__mark {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text);
}
.tm { font-size: .5em; font-weight: 600; margin-left: 2px; vertical-align: super; }
.footer__line {
  margin: var(--space-2) 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "wght" 400, "SOFT" 100, "WONK" 1;
  font-style: italic;
  color: var(--text-muted);
}
.footer__meta { text-align: right; color: var(--text-muted); }
.footer__meta p { margin: 0 0 var(--space-1); }
.footer__meta a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.footer__meta a:hover { border-bottom-color: currentColor; }
.footer__fine { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--text-faint); }

@media (max-width: 40rem) {
  .footer__inner { flex-direction: column; }
  .footer__meta { text-align: left; }
  .signup__row { flex-direction: column; }
  .btn { width: 100%; }
}

/* ============================================================
   /next — "Meet your toppers" QR destination page
   ============================================================ */

.pagehead {
  position: relative;
  background: var(--hero-bg);
  /* Same scoped contrast overrides the hero uses on lavender */
  --text-muted: var(--hero-muted);
  --text-faint: var(--hero-muted);
  --accent: var(--hero-accent);
  --surface: var(--hero-surface);
  --border: var(--hero-border);
}
.pagehead__inner {
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.h1 {
  margin: var(--space-4) 0 0;
  max-width: 26ch;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "wght" 600, "SOFT" 100, "WONK" 1;
  font-size: var(--text-2xl);
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: var(--text);
}

.pagehead__lede {
  margin: var(--space-6) 0 0;
  max-width: 50ch;
  color: var(--text-muted);
}

/* Four-up cast grid */
.motifs--cast {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.motifs--cast .motif {
  display: flex; flex-direction: column;
}
.motifs--cast .motif__note { margin-top: auto; padding-top: var(--space-2); }
.motif__line {
  margin: 0 0 var(--space-3);
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 20, "wght" 400, "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text);
}
.motif__note { font-size: var(--text-xs); color: var(--text-faint); }
.motif__art .fill--hat { fill: var(--dusty-rose); opacity: .55; }

/* The rare one */
.rare {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.rare__art { width: min(140px, 42vw); }
.rare__art svg { display: block; width: 100%; height: auto; }
/* Lilac-on-lilac would vanish against the tinted band, so Edgar is rose. */
.rare__art .fill   { fill: var(--dusty-rose); }
.rare__art .ink    { fill: var(--cream); opacity: .9; }
.rare__art .stroke {
  fill: none; stroke: var(--cream); stroke-width: 2.2;
  stroke-linecap: round; opacity: .85;
}
.rare .h2 { margin-bottom: var(--space-3); }
.rare .prose { margin-bottom: 0; }

.charline {
  margin: 0 0 var(--space-5);
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "wght" 500, "SOFT" 100, "WONK" 1;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--accent);
}

@media (min-width: 52rem) {
  .rare {
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    text-align: left;
    justify-items: start;
  }
  .rare__art { width: 150px; }
  .rare .prose { max-width: 52ch; }
}

/* Fit & care list reads better with links */
#fit .fact__v a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
#fit .fact__v a:hover { border-bottom-color: currentColor; }

.backlink-wrap { margin: clamp(var(--space-10), 6vw, var(--space-16)) 0 0; }
.backlink {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .25s var(--ease);
}
.backlink:hover { color: var(--accent); }
.backlink svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.backlink:hover svg { transform: translateX(-3px); }

/* ============ ENTRANCE MOTION ============ */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal--in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--in { opacity: 1; transform: none; transition: none; }
  .motif:hover, .btn:hover { transform: none; }
}

/* ============ ONWARD LINK (Pretty Spooky -> /next) ============ */
.onward-wrap { margin: var(--space-6) 0 0; }
.onwardlink {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .25s var(--ease);
}
.onwardlink:hover,
.onwardlink:focus-visible { color: var(--accent); }
.onwardlink svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.onwardlink:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .onwardlink svg, .onwardlink { transition: none; }
  .onwardlink:hover svg { transform: none; }
}