/* "Nahar bel-haraka" (daytime, in motion)
   Its own page in the Layl × Sharbat sticker style (same buttons, Marhey +
   Baloo Bhaijaan 2) on cream, navy, sunny yellow and orange. The page follows
   the invitation before, during and after the wedding, and opens with a
   sample invite the visitor can answer. Mobile first: rules outside a media
   query are the phone layout, and one min-width query at the end adds the
   desktop columns. Motion lives in fx.css; the small scripts are inline at
   the end of index.html.

   Every sticker has a navy edge (border + hard offset shadow). Fills:
     A  sun    / navy text
     B  coral  / navy text
     C  paper  / navy text
     D  navy   / cream text */

:root {
  --background: #F2E7D6;
  --ink: #17203F;
  --sun: #FECC39;
  --coral: #FD7F44;
  --peach: #FBDCC4;
  --paper: #FFF8EC;

  /* Blob tints: soft versions of the palette, each with a deeper layer behind
     it like a second sheet of cut paper. No sticker, line or letter on the page
     uses these, so nothing ever sinks into the blob behind it. */
  --blob-sun: #F5D88E;
  --blob-sun-deep: #E9C26A;
  --blob-coral: #F3BC9E;
  --blob-coral-deep: #E6A07D;
  --blob-sky: #CFD3EA;
  --blob-sky-deep: #B7BCDD;
  --muted: #4B5269;

  --display: "Marhey", "Baloo Bhaijaan 2", "Segoe UI", sans-serif;
  --text: "Baloo Bhaijaan 2", "Segoe UI", Tahoma, sans-serif;

  --section: clamp(4rem, 8vw, 6.5rem);
  --edge: 3px;
  --focus: var(--ink);
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* No blue flash when something is tapped on a phone: the press itself
     (the sticker moving onto its shadow) is the feedback */
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
  scrollbar-color: var(--coral) var(--background);
  accent-color: var(--coral);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.2rem;
  line-height: 1.75;
}

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

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

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
}

h2 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.3;
}

h3 {
  font-size: 1.75rem;
  line-height: 1.4;
}

a {
  color: inherit;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.lede {
  max-width: 34rem;
  font-size: 1.3rem;
  font-weight: 600;
}

/* Blobs: three jelly shapes at the edges of the screen, behind everything.
   Each is an SVG of two layers of the same shape: a deeper one offset down and
   to the left (the page's sticker shadow, in a softer key) and the tint on top.
   The script in index.html draws the outline and makes its edge ripple and
   stretch while the page scrolls.

   The layer reaches 25vh past the top and bottom of the screen. On phones the
   address bar slides in and out while you scroll; a layer exactly the size of
   the screen showed its flat bottom edge, cutting the low blob, until the
   scroll stopped. */

.blobs {
  position: fixed;
  inset-inline: 0;
  inset-block-start: -25vh;
  height: 150vh;
  height: calc(100lvh + 50vh);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  inset-block-start: 0;
  left: 0;
  overflow: visible;
  translate: calc(var(--x) * 1vw - 50%) calc((var(--y) + 25) * 1vh - 50%);
  will-change: transform;
}

.blob__back {
  translate: -7px 7px;
}

.blob--sun {
  --x: 4;
  --y: 10;
  width: clamp(16rem, 74vmin, 34rem);
}

.blob--sun .blob__back { fill: var(--blob-sun-deep); }
.blob--sun .blob__front { fill: var(--blob-sun); }

/* The tap mark: three small navy ")" arcs, hidden unless the script says
   poking works here */
.blob__hint {
  display: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: opacity 0.4s;
}

.can-poke .blob__hint {
  display: inline;
}

.blob__hint.is-gone {
  opacity: 0;
}

/* While a blob is being pulled with the mouse */
.pulling,
.pulling * {
  cursor: grabbing !important;
  -webkit-user-select: none;
  user-select: none;
}

.blob--coral {
  --x: 97;
  --y: 88;
  width: clamp(13rem, 58vmin, 27rem);
}

.blob--coral .blob__back { fill: var(--blob-coral-deep); }
.blob--coral .blob__front { fill: var(--blob-coral); }

.blob--sky {
  --x: 2;
  --y: 60;
  width: clamp(9rem, 40vmin, 18rem);
}

.blob--sky .blob__back { fill: var(--blob-sky-deep); }
.blob--sky .blob__front { fill: var(--blob-sky); }

.hero,
main,
.footer {
  position: relative;
  z-index: 1;
}

/* Buttons: stickers that press down (the same recipe as Layl × Sharbat).
   --drop is how far the shadow sits down-left: a press moves the button
   exactly that far, onto its shadow; a hover lifts it a little instead, so
   pointing at a button never looks like it was already pressed. */

.btn {
  --drop: 5px;
  --drop-ink: var(--ink);
  display: inline-block;
  padding: 0.6rem 2rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--coral);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: calc(var(--drop) * -1) var(--drop) 0 var(--drop-ink);
  transition: translate 0.12s, box-shadow 0.12s;
}

.btn--small {
  --drop: 3px;
  padding: 0.35rem 1.25rem;
  background: var(--paper);
  font-size: 1.15rem;
}

.btn--sun {
  background: var(--sun);
}

.btn--closing {
  --drop-ink: var(--background);
  border-color: var(--background);
  background: var(--sun);
}

@media (hover: hover) {
  .btn:hover {
    translate: 2px -2px;
    box-shadow: calc(var(--drop) * -1 - 2px) calc(var(--drop) + 2px) 0 var(--drop-ink);
  }
}

.btn:active,
.btn[aria-pressed="true"] {
  translate: calc(var(--drop) * -1) var(--drop);
  box-shadow: 0 0 0 var(--drop-ink);
}

/* An answered RSVP stays pressed in */
.btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--background);
}

/* Hero: the headline, then a sample invite you can answer */

.hero {
  padding-block: 1.25rem clamp(3rem, 7vw, 5rem);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}

/* The name is a surprise for now: the mark is a lone question mark */
a.wordmark {
  justify-content: center;
  min-width: 2.75rem;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-top: clamp(2rem, 6vw, 4.5rem);
}

/* On a phone the first screen holds only the headline and its button, so the
   invite is never seen cut in half under the fold. It lands as a whole sticker
   once you scroll to it. 7rem = the top padding, the bar and the gap above
   the text. */
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 7rem);
  min-height: calc(100svh - 7rem);
  padding-bottom: 8vh;
}

.hero__text .btn {
  align-self: flex-start;
}

.hero h1 {
  font-size: clamp(3.2rem, 14vw, 6rem);
  line-height: 1.12;
}

.hero h1 span {
  display: block;
}

/* The middle line is the promise: orange letters with a navy drop, like a
   cut-out sticker. The drop keeps it readable on cream and on the blobs. */
.hero h1 .pop {
  color: var(--coral);
  text-shadow: -0.045em 0.045em 0 var(--ink);
  rotate: -2deg;
  transform-origin: right;
}

.hero__sub {
  max-width: 30rem;
  margin-block: 1.25rem 1.75rem;
  font-size: 1.3rem;
  font-weight: 600;
}

/* The sample invite: a paper sticker, a little crooked */
.invite {
  position: relative;
  margin-inline: 0.25rem 0.75rem;
  padding: 1.5rem 1.5rem 1.75rem;
  border: var(--edge) solid var(--ink);
  border-radius: 2rem;
  background: var(--paper);
  text-align: center;
  rotate: 2deg;
  box-shadow: -8px 8px 0 var(--ink);
}

.invite__label {
  display: inline-block;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--background);
  font-size: 0.95rem;
  font-weight: 600;
}

.invite__names {
  margin-block: 0.75rem 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: 1.3;
}

.invite__names span {
  color: var(--coral);
}

.invite__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
}

.invite__facts li {
  padding: 0.15rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--peach);
}

.invite__rsvp {
  position: relative;
  margin-top: 1.5rem;
}

.invite__status {
  margin-top: 1rem;
  min-height: 1.75em;
  font-size: 1.05rem;
  color: var(--muted);
}

.burst {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  pointer-events: none;
}

.burst i {
  position: absolute;
  width: 0.7rem;
  height: 1.1rem;
  border-radius: 0.2rem;
  background: var(--coral);
  opacity: 0;
}

.burst i:nth-child(3n + 1) {
  background: var(--sun);
}

.burst i:nth-child(3n + 2) {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--ink);
}

/* The story: before, the day, after. The pill follows along and shows where
   you are. */

.story {
  position: relative;
}

.when {
  position: sticky;
  inset-block-start: 0.75rem;
  z-index: 4;
  display: flex;
  width: fit-content;
  margin-inline: auto;
  padding: 0.25rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: -4px 4px 0 var(--ink);
}

.when a {
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.25s;
}

.when a[aria-current] {
  background: var(--sun);
}

.chapter {
  padding-block: var(--section) 1rem;
  scroll-margin-top: 1rem;
}

/* The wedding itself is at night, so its chapter is one big navy sticker:
   rounded, a little crooked, with a yellow shadow, never a full-width band.
   The stickers on it take an orange shadow. */
.chapter--night {
  --focus: var(--sun);
  width: min(100% - 1.5rem, 74rem);
  margin: var(--section) auto 0;
  padding-block: clamp(3rem, 7vw, 4.5rem);
  border: var(--edge) solid var(--ink);
  border-radius: clamp(2rem, 7vw, 3.5rem);
  background: var(--ink);
  color: var(--background);
  rotate: -0.8deg;
  box-shadow: -8px 8px 0 var(--sun);
}

.chapter--night .wrap {
  padding-inline: clamp(1.5rem, 5vw, 3.5rem);
}

.chapter--night .stamp {
  background: var(--sun);
  color: var(--ink);
}

.chapter--night .answer {
  color: var(--ink);
  box-shadow: -4px 4px 0 var(--coral);
}

/* The chapter label: a small crooked stamp */
.stamp {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.2rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: var(--sun);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  rotate: -3deg;
}

.chapter h2 + .lede {
  margin-top: 0.75rem;
}

/* Before: everyone the link reaches */
.guests {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 0.8rem;
  margin-top: 2rem;
  padding-inline-end: 0.5rem;
}

.guests li {
  padding: 0.15rem 1.2rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.6;
  white-space: nowrap;
  box-shadow: -4px 4px 0 var(--ink);
}

.guests li:nth-child(3n + 1) { background: var(--sun); rotate: -2deg; }
.guests li:nth-child(3n + 2) { rotate: 1.5deg; }
.guests li:nth-child(3n) { background: var(--coral); rotate: -1deg; }

/* The day: each question the family asks gets crossed out by its answer */
.asks {
  display: grid;
  gap: 2rem;
  margin-top: 2.25rem;
}

.ask {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 1.3;
}

.ask span {
  position: relative;
  display: inline-block;
}

.ask span::after {
  content: "";
  position: absolute;
  inset-inline: -0.2em;
  inset-block-start: 56%;
  height: 0.11em;
  border-radius: 999px;
  background: var(--coral);
  rotate: -3deg;
  transform-origin: right;
}

.answer {
  width: fit-content;
  margin-top: 0.4rem;
  margin-inline-start: 1.25rem;
  padding: 0.3rem 1.1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 1rem;
  background: var(--sun);
  font-weight: 600;
  rotate: 1deg;
  box-shadow: -4px 4px 0 var(--ink);
}

.asks li:nth-child(2) .answer {
  background: var(--paper);
  rotate: -1deg;
}

/* After: the photos fan out like a hand of prints */
.fan {
  position: relative;
  height: 13.5rem;
  margin-top: 2.5rem;
}

.fan li {
  position: absolute;
  inset-block-end: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 6.75rem;
  height: 8.25rem;
  margin-left: -3.375rem;
  border: var(--edge) solid var(--ink);
  border-radius: 0.9rem;
  background: var(--paper);
  transform-origin: 50% 190%;
  rotate: calc((var(--i) - 2) * 15deg);
  box-shadow: -4px 4px 0 var(--ink);
}

.fan li::before {
  content: "";
  position: absolute;
  inset: 0.45rem 0.45rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 0.5rem;
  background: var(--sun);
}

.fan li:nth-child(2)::before,
.fan li:nth-child(5)::before { background: var(--peach); }
.fan li:nth-child(3)::before { background: var(--ink); }
.fan li:nth-child(4)::before { background: var(--coral); }

.fan svg {
  position: relative;
  width: 2.9rem;
  margin-bottom: 1rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.fan path {
  fill: var(--coral);
}

.fan li:nth-child(3) path { fill: var(--sun); stroke: none; }
.fan li:nth-child(4) path { fill: var(--paper); }

/* Occasions: pick yours and the big word changes */

.occasions {
  padding-block: var(--section) 1rem;
}

.swap {
  margin-block: 1.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.8rem, 12vw, 5.5rem);
  line-height: 1.5;
}

.swap b {
  display: inline-block;
  padding: 0 1.4rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  rotate: -3deg;
  white-space: nowrap;
  box-shadow: -6px 6px 0 var(--ink);
}

.swap b.tone-1 { background: var(--coral); }
.swap b.tone-2 { background: var(--paper); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0.6rem;
  margin-bottom: 1.75rem;
  padding-inline-end: 0.5rem;
}

.chip {
  padding: 0.15rem 1.1rem;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.7;
  cursor: pointer;
  box-shadow: -4px 4px 0 var(--ink);
  transition: translate 0.12s, box-shadow 0.12s;
}

/* A small sticker on the chip's top corner that says which occasion it is
   (landing only): a bridal veil, a ring, a pinned paper, a henna hand, a baby
   bottle, a party hat, a graduation cap, a roast turkey, a ribbon being cut */
.chip:has(.chip__art) {
  position: relative;
}

.chips:has(.chip__art) {
  gap: 1.5rem 0.95rem;
  padding-top: 1.1rem;
}

.chip__art {
  position: absolute;
  inset-block-start: -1.25rem;
  inset-inline-end: -0.7rem;
  width: 2.1rem;
  height: 2.1rem;
  overflow: visible;
  rotate: -14deg;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.chip__art .s { fill: var(--sun); }
.chip__art .c { fill: var(--coral); }
.chip__art .p { fill: var(--paper); }
.chip__art .n { fill: none; }

.chip:active,
.chip[aria-pressed="true"] {
  translate: -4px 4px;
  box-shadow: 0 0 0 var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--background);
}

/* Steps: three stops on a dashed path, numbered because the order matters */

.steps {
  padding-block: var(--section);
}

.path {
  display: grid;
  gap: 2.25rem;
  margin-top: 2.5rem;
  counter-reset: step;
}

.path li {
  position: relative;
  counter-increment: step;
  padding-inline-start: 5.25rem;
  min-height: 4.25rem;
}

.path li::before {
  content: counter(step, arabic-indic);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  rotate: -6deg;
  box-shadow: -4px 4px 0 var(--ink);
}

.path li:nth-child(2)::before { background: var(--coral); rotate: 5deg; }
.path li:nth-child(3)::before { background: var(--paper); }

/* The dashes that join one stop to the next */
.path li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 4.5rem -2rem;
  inset-inline-start: calc(2rem - 2px);
  border-inline-start: 4px dashed var(--ink);
}

.path p {
  max-width: 30rem;
  font-weight: 600;
}

/* Closing: one big navy sticker */

.closing-wrap {
  padding-block: 1rem var(--section);
}

.closing {
  --focus: var(--sun);
  margin-inline-end: 0.5rem;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  border: var(--edge) solid var(--ink);
  border-radius: 2.5rem;
  background: var(--ink);
  color: var(--background);
  text-align: center;
  rotate: -1deg;
  box-shadow: -10px 10px 0 var(--coral);
}

.closing h2 {
  font-size: clamp(3.5rem, 11vw, 6rem);
  line-height: 1.2;
  color: var(--sun);
}

.closing p {
  margin-block: 0.25rem 2rem;
  font-size: 1.35rem;
  font-weight: 600;
}

/* Footer */

.footer {
  padding-block: 3rem;
  border-top: var(--edge) solid var(--ink);
  background: var(--background);
  color: var(--muted);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.wordmark__q {
  display: inline-block;
}

/* Tapping fast must not select the label or zoom the page */
a.wordmark,
.btn,
.chip,
.sound,
.top-link,
button {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* The hidden message (ten taps on the "؟"): a paper sticker over a dimmed page */
.secret {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.75rem 1.4rem 1.5rem;
  border: var(--edge) solid var(--ink);
  border-radius: 2rem;
  background: var(--paper);
  color: var(--ink);
  rotate: -1deg;
  box-shadow: -8px 8px 0 var(--coral);
  overflow: visible;
}

.secret::backdrop {
  background: rgb(23 32 63 / 0.6);
}

.secret__stamp {
  position: absolute;
  inset-block-start: -1.1rem;
  inset-inline-start: 1.25rem;
  margin: 0;
}

.secret h2 {
  font-size: 1.9rem;
  line-height: 1.35;
}

.secret p {
  margin-top: 0.6rem;
  font-weight: 600;
}

.secret .secret__hush {
  margin-top: 0.35rem;
  font-size: 1.05rem;
  color: var(--muted);
}

.secret__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 1.4rem;
  padding-inline-end: 0.5rem;
}

.wordmark--footer {
  font-size: 3rem;
}

.footer__link {
  font-weight: 600;
  color: var(--ink);
  text-decoration-color: var(--coral);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

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

/* Desktop: the invite sits beside the headline, the questions and steps go
   side by side */

@media (min-width: 54rem) {
  .hero__text {
    display: block;
    min-height: 0;
    padding-bottom: 0;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .hero h1 {
    font-size: clamp(4rem, 7.2vw, 6.5rem);
  }

  .invite {
    max-width: 26rem;
    justify-self: center;
    padding: 2rem 2rem 2.25rem;
  }

  .when a {
    padding-inline: 1.4rem;
    font-size: 1.1rem;
  }

  .asks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fan {
    height: 17rem;
  }

  .fan li {
    scale: 1.25;
  }

  .path {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .path li {
    padding-inline-start: 0;
    padding-top: 5.25rem;
  }

  .path li:not(:last-child)::after {
    inset-block: 2rem auto;
    inset-inline: 4.5rem 0;
    border-inline-start: 0;
    border-top: 4px dashed var(--ink);
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* "دخول": a quiet text link in the top bar, beside the button */
.top-link {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
  white-space: nowrap;
}

/* The speaker: a small round sticker beside the top bar's button */
.sound {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  margin-inline-start: auto;
  padding: 0;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -3px 3px 0 var(--ink);
  cursor: pointer;
  transition: translate 0.12s, box-shadow 0.12s;
}

.sound:active {
  translate: -3px 3px;
  box-shadow: 0 0 0 var(--ink);
}

.sound[aria-pressed="false"] {
  background: var(--peach);
}

.sound svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Big desktop screens: the whole page grows together (type, cards, gaps),
   so a 1920 screen shows the same proportions as a 1440 one instead of a
   small page in a lot of empty sand. Phones and laptops are untouched. */
@media (min-width: 90rem) {
  html {
    font-size: clamp(100%, 4px + 0.8333vw, 150%);
  }
}