/* Stonk Alarm.
   One surface: the calendar page. Warm white body, lime band, two pegs, soft lift.
   The board, the featured leaf and the identity plate are all that object at three sizes. */

@font-face {
  font-family: "Pilcrow";
  src: url("fonts/PilcrowRounded-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pilcrow";
  src: url("fonts/PilcrowRounded-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pilcrow";
  src: url("fonts/PilcrowRounded-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maple";
  src: url("fonts/MapleMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maple";
  src: url("fonts/MapleMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* the sky the art was rendered in */
  --sky-high: #2f8ae4;
  --sky: #4aa4f5;
  --sky-low: #8fc9fb;

  /* the clock's own plastic */
  --lime: #a8d81c;
  --lime-hi: #c9f22e;
  --lime-deep: #7c9f11;
  --lime-shade: #6a8a0d;

  /* the calendar page */
  --page: #f7f4ea;
  --page-edge: #e3ddcb;
  --ink: #20262c;
  --ink-soft: #5c6670;
  --ink-faint: #8d959c;

  /* the one accent, and it only ever means an alarm */
  --alarm-ink: #ff6a13;
  --up: #1f9d4d;
  --down: #d8452c;

  --t-hero: clamp(2.6rem, 7.4vw, 5.6rem);
  --t-head: clamp(1.15rem, 2.3vw, 1.7rem);
  --t-body: clamp(0.95rem, 1.25vw, 1.06rem);
  --t-lab: clamp(0.62rem, 0.86vw, 0.72rem);
  --t-fig: clamp(0.86rem, 1.15vw, 1rem);

  --gap: clamp(0.9rem, 2vw, 1.6rem);
  --pad: clamp(1rem, 2.6vw, 2rem);
  --r-out: 22px;
  --r-in: 12px;
  --lift: 0 18px 40px rgba(20, 60, 110, 0.22);
  --lift-low: 0 8px 18px rgba(20, 60, 110, 0.16);

  --band: 54px;

  color-scheme: light;
  font-synthesis: none;
}

/* Maple Mono carries a large programming ligature set, and it renders a plain "--"
   as one long dash. Every figure here is literal, so those are switched off page wide
   (the property inherits, so declaring it on body reaches everything). */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
  font-family: Pilcrow, ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--sky);
  overflow-x: hidden;
}

/* The pointer is the thing that sets an alarm, so it is a bell.
   It is a real CSS cursor rather than a sprite chasing pointermove: the compositor draws a
   cursor image, so it is exactly where the pointer is with no frame of lag. A sprite reads
   as a laggy cursor no matter how tight the follow is written. The hotspot is the top of the
   handle, so the bell hangs from the point being aimed at. It tips over on anything you can
   actually press, which is the honest affordance a pointing hand would otherwise give. */
body {
  cursor: url("art/cursor-bell.png") 18 3, auto;
}

:where(a[href], button:not(:disabled), [role="link"], .bell, .chip, .seg button, .copy):hover {
  cursor: url("art/cursor-bell-ring.png") 18 3, pointer;
}

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

/* ---------------------------------------------------------------- the sky */

/* The sky is one fixed layer carrying the gradient and the drifting clouds. Putting the
   gradient on the body with background-attachment: fixed repaints the whole document on
   every scroll instead, which is what a hundred and forty rows cannot afford. */
#sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-high) 0%, var(--sky) 46%, var(--sky-low) 100%);
  contain: strict;
}

#sky .drift {
  position: absolute;
  left: 0;
  height: auto;
  will-change: transform;
  animation-name: drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes drift {
  from { transform: translateX(-60vw); }
  to   { transform: translateX(160vw); }
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: calc(clamp(42px, 7.6vw, 92px) + var(--pad));
  padding: calc(var(--pad) * 0.75) var(--pad) calc(var(--pad) * 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
}

.masthead .wordmark {
  width: min(64vw, 560px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(18, 58, 108, 0.28));
}

main {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--gap) var(--pad) calc(var(--pad) * 2.4);
  display: grid;
  gap: clamp(1.4rem, 4vw, 3rem);
}

/* ---------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(320px, 1.14fr);
  gap: var(--gap);
  align-items: end;
  /* The cloud bank is wider than the clock's column on purpose: it reads as a layer running
     past the frame rather than as an object sitting in a box. Clipping at the hero lets it
     run behind the readout on a wide screen and stops at the window edge on a phone, without
     ever giving the document something to scroll sideways to. */
  overflow: clip;
}

.stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: end center;
}

.stage .shelf {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 128%;
  height: auto;
  transform: translateX(-50%);
  z-index: 1;
}

.stage .shadow {
  position: absolute;
  left: 50%;
  bottom: 13.5%;
  width: 44%;
  height: 6.5%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 92, 140, 0.5), rgba(46, 92, 140, 0) 76%);
  z-index: 2;
}

.clock {
  position: relative;
  width: 74%;
  margin-bottom: 12%;
  z-index: 3;
  transform-origin: 50% 92%;
  animation: sway 7.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.1deg); }
}

.clock-body {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 20px rgba(24, 66, 116, 0.26));
}

.clock-hands { position: absolute; inset: 0; }
.clock-face { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the bells actually ring */
.stage.ringing .clock { animation: shake 0.09s linear infinite; }

@keyframes shake {
  0%   { transform: rotate(-3.4deg) translateX(-0.5%); }
  50%  { transform: rotate(3.4deg) translateX(0.5%); }
  100% { transform: rotate(-3.4deg) translateX(-0.5%); }
}

.ring {
  position: absolute;
  top: 6%;
  width: 13%;
  aspect-ratio: 1;
  border: 0.5vmin solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0;
  z-index: 4;
}
.ring-l { left: -8%; clip-path: polygon(0 0, 46% 0, 46% 100%, 0 100%); }
.ring-r { right: -8%; clip-path: polygon(54% 0, 100% 0, 100% 100%, 54% 100%); }
.stage.ringing .ring { animation: ping 0.6s ease-out infinite; }

@keyframes ping {
  0%   { opacity: 0.95; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* ---------------------------------------------------------------- readout */

.readout { display: grid; gap: var(--gap); align-content: end; }

.line {
  margin: 0;
  max-width: 34ch;
  font-family: Pilcrow, ui-rounded, sans-serif;
  font-weight: 800;
  font-size: var(--t-head);
  line-height: 1.16;
  letter-spacing: 0.004em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 3px 12px rgba(20, 62, 112, 0.4);
}

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(0.9rem, 2.4vw, 2.2rem);
  padding: 0 0 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.fig { display: grid; gap: 0.18rem; }

.lab {
  font-family: Maple, ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--t-lab);
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.86);
}

.fig .big {
  font-family: Maple, ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 4px 16px rgba(18, 58, 108, 0.45);
}

.fig .med {
  font-family: Maple, ui-monospace, monospace;
  font-weight: 700;
  font-size: var(--t-fig);
  letter-spacing: 0.01em;
  color: #fff;
}

#session-state.is-open { color: var(--lime-hi); }

.strip-thin { padding-bottom: 0.5rem; }

/* the featured calendar page */

.leaf {
  display: grid;
  grid-template-columns: clamp(112px, 16vw, 168px) 1fr;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  position: relative;
}

.leaf > img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(22, 64, 114, 0.3));
}

.leaf-page {
  grid-area: 1 / 1;
  /* The leaf image carries a drop-shadow filter, which makes it a stacking context and
     paints it above a plain sibling. Positioning this puts the date back on the page. */
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  /* the white panel measured off art/leaf.webp */
  margin: 33.6% 7.1% 3.8% 6.4%;
  gap: 0.05em;
}

.leaf-day {
  font-family: Pilcrow, ui-rounded, sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 0.86;
  color: var(--ink);
}

.leaf-month {
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: clamp(0.6rem, 1.1vw, 0.78rem);
  letter-spacing: 0.2em;
  color: var(--lime-shade);
}

.leaf-side { display: grid; gap: 0.16rem; }
.leaf-what {
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: var(--t-fig);
  color: var(--alarm-ink);
  letter-spacing: 0.02em;
}
.leaf-who {
  font-family: Pilcrow, ui-rounded, sans-serif;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  color: #fff;
}
.leaf-rate {
  font-family: Maple, monospace;
  font-weight: 500;
  font-size: var(--t-lab);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------- the board, a calendar page */

.board,
.plate {
  position: relative;
  background: var(--page);
  border-radius: var(--r-out);
  box-shadow: var(--lift), inset 0 -2px 0 var(--page-edge);
}

.board-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  min-height: var(--band);
  padding: 0.7rem clamp(0.9rem, 2vw, 1.4rem);
  background: linear-gradient(180deg, var(--lime-hi) 0%, var(--lime) 62%, var(--lime-deep) 100%);
  border-radius: var(--r-out) var(--r-out) 0 0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.peg {
  position: absolute;
  top: -12px;
  width: 15px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--lime-hi), var(--lime-deep));
  box-shadow: 0 2px 3px rgba(20, 60, 110, 0.3);
}
.peg-l { left: 13%; }
.peg-r { right: 13%; }

.board-band h2 {
  margin: 0;
  font-family: Pilcrow, ui-rounded, sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 1.9vw, 1.34rem);
  letter-spacing: 0.005em;
  color: #35460a;
}

.board-count {
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: var(--t-lab);
  letter-spacing: 0.14em;
  color: rgba(38, 52, 8, 0.72);
}

.board-tools {
  order: 2;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: var(--t-lab);
  letter-spacing: 0.12em;
  color: #35460a;
  cursor: pointer;
}
.chip:hover:not(:disabled) { background: #fff; }
.chip:disabled { opacity: 0.55; cursor: default; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--lime-hi); }
.chip img { height: 20px; width: auto; }
.chip em {
  font-style: normal;
  min-width: 1.1em;
  text-align: center;
  color: var(--alarm-ink);
}
.chip-snooze { padding-left: 0.45rem; }

/* Three views of the same board, as one control rather than three loose buttons. */
.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(53, 70, 10, 0.22);
}

.seg button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #35460a;
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: var(--t-lab);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.seg button em {
  font-style: normal;
  opacity: 0.6;
}
.seg button:hover { background: rgba(255, 255, 255, 0.5); }
.seg button[aria-pressed="true"] {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}
.seg button[aria-pressed="true"] em { color: var(--alarm-ink); opacity: 1; }

.board-note {
  flex-basis: 100%;
  order: 3;
  margin: 0;
  font-size: 0.84em;
  color: rgba(38, 52, 8, 0.78);
}

/* rows */

.head,
.row {
  display: grid;
  grid-template-columns:
    minmax(140px, 1.25fr) minmax(90px, 1fr)
    repeat(4, minmax(64px, 0.66fr))
    minmax(150px, 1.2fr) 56px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem clamp(0.9rem, 2vw, 1.4rem);
}

.head {
  padding-top: 0.7rem;
  padding-bottom: 0.4rem;
  font-family: Maple, monospace;
  font-weight: 500;
  font-size: var(--t-lab);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--page-edge);
}
.head .cell-num, .head .cell-alarm, .head .cell-bell { text-align: right; }
.head .cell-alarm { text-align: left; }

.rows { display: grid; }

.row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.055);
  transition: background 0.18s;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: rgba(168, 216, 28, 0.13); }
.row.soon { background: rgba(255, 106, 19, 0.09); }
.row.fired { animation: flash 0.5s steps(2) 8; }

@keyframes flash {
  0%   { background: rgba(255, 106, 19, 0.3); }
  100% { background: rgba(255, 106, 19, 0.02); }
}

.cell { min-width: 0; }
.cell-num, .row .cell-alarm { display: grid; gap: 0.05rem; }
.cell-num { text-align: right; }

.cell-coin {
  display: flex;
  align-items: baseline;
  gap: 0.34rem;
  flex-wrap: wrap;
}
.cell-coin .coin {
  font-family: Pilcrow, ui-rounded, sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.cell-coin .on {
  font-family: Pilcrow, sans-serif;
  font-size: 0.76em;
  color: var(--ink-faint);
}
.cell-coin .share {
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: 0.86em;
  letter-spacing: 0.04em;
  padding: 0.08em 0.4em;
  border-radius: 6px;
  background: var(--lime);
  color: #35460a;
}

.cell-name {
  font-size: 0.9em;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The header row names the columns on desktop, so the per row labels only appear
   on narrow screens where the header is gone. */
.row .cell-num .lab { display: none; }
.row .lab { color: var(--ink-faint); }

.row .val {
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: var(--t-fig);
  color: var(--ink);
}
.row .val.up { color: var(--up); }
.row .val.down { color: var(--down); }

.row .cell-alarm {
  padding-left: 0.9rem;
  border-left: 1px solid var(--page-edge);
}

.cell-alarm [data-alarm-label] {
  font-family: Maple, monospace;
  font-weight: 500;
  font-size: var(--t-lab);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-alarm [data-alarm-in] {
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: var(--t-fig);
  color: var(--ink);
}
.row[data-kind="action"] .cell-alarm [data-alarm-label],
.row[data-kind="action"] .cell-alarm [data-alarm-in] { color: var(--alarm-ink); }
.row[data-kind="halt"] .cell-alarm [data-alarm-label],
.row[data-kind="halt"] .cell-alarm [data-alarm-in] { color: var(--down); }

.bell {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(32, 38, 44, 0.07);
  cursor: pointer;
  transition: background 0.15s;
}
.bell img {
  width: 26px;
  height: auto;
  filter: grayscale(1) opacity(0.65);
  transition: filter 0.15s, transform 0.15s;
}
.bell:hover img { filter: grayscale(0.35) opacity(0.8); }
.bell.is-set { background: rgba(255, 106, 19, 0.16); }
.bell.is-set img { filter: none; transform: rotate(-8deg); }

.empty {
  margin: 0;
  padding: 1.6rem clamp(0.9rem, 2vw, 1.4rem);
  font-family: Maple, monospace;
  font-weight: 500;
  font-size: var(--t-lab);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

.source {
  margin: 0;
  padding: 0.9rem clamp(0.9rem, 2vw, 1.4rem) 1.1rem;
  border-top: 1px solid var(--page-edge);
  font-size: 0.86em;
  color: var(--ink-soft);
}
.source span {
  font-family: Maple, monospace;
  font-weight: 700;
  color: var(--ink);
}

/* ---------------------------------------------------------------- identity plate */

.plate {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  align-items: center;
  grid-template-columns: auto 1fr auto;
}

.plate-id { display: grid; gap: 0.1rem; }

.plate-ticker {
  font-family: Pilcrow, ui-rounded, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1;
  color: var(--lime-shade);
}

.plate-pair {
  font-family: Maple, monospace;
  font-weight: 500;
  font-size: var(--t-lab);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.plate-ca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-in);
  background: rgba(32, 38, 44, 0.05);
}

.plate-ca .lab { color: var(--ink-faint); }

.plate-ca code {
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: clamp(0.72rem, 1.35vw, 0.9rem);
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
}
.plate-ca code.pending {
  font-weight: 500;
  color: var(--ink-faint);
  user-select: auto;
}

.copy {
  min-height: 38px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--lime-hi);
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: var(--t-lab);
  letter-spacing: 0.14em;
  cursor: pointer;
}
.copy:disabled { background: rgba(32, 38, 44, 0.22); color: rgba(255, 255, 255, 0.7); cursor: default; }

.copy-note {
  min-width: 12ch;
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: var(--t-lab);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.copy-note[data-ok="yes"] { color: var(--up); }
.copy-note[data-ok="no"] { color: var(--down); }

.plate-links { display: flex; gap: 0.5rem; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: rgba(32, 38, 44, 0.06);
  color: var(--ink);
  text-decoration: none;
  font-family: Maple, monospace;
  font-weight: 700;
  font-size: var(--t-lab);
  letter-spacing: 0.14em;
}
.mark:hover { background: rgba(32, 38, 44, 0.12); }
.mark img { height: 26px; width: auto; }
.mark.pending { opacity: 0.45; cursor: default; }

:where(a, button):focus-visible {
  outline: 3px solid var(--alarm-ink);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .stage { aspect-ratio: 4 / 3; max-width: 460px; margin: 0 auto; }
  .clock { width: 56%; }

  .head { display: none; }
  .row {
    grid-template-columns: 1fr 1fr 56px;
    grid-template-areas:
      "coin  coin  bell"
      "name  name  bell"
      "share coin2 bell"
      "ch    pool  bell"
      "alarm alarm alarm";
    gap: 0.35rem 0.6rem;
    padding: 0.85rem clamp(0.9rem, 2vw, 1.4rem);
  }
  .row .cell-num .lab { display: block; }
  .row .cell-coin { grid-area: coin; }
  .row .cell-name { grid-area: name; }
  .row .cell-num:nth-of-type(3) { grid-area: share; text-align: left; }
  .row .cell-num:nth-of-type(4) { grid-area: coin2; text-align: left; }
  .row .cell-num:nth-of-type(5) { grid-area: ch; text-align: left; }
  .row .cell-num:nth-of-type(6) { grid-area: pool; text-align: left; }
  .row .cell-alarm {
    grid-area: alarm;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--page-edge);
  }
  .bell { grid-area: bell; align-self: start; }

  .plate { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .masthead .wordmark { width: 78vw; }
  .row { grid-template-columns: 1fr 56px; grid-template-areas:
      "coin  bell"
      "name  bell"
      "share coin2"
      "ch    pool"
      "alarm alarm"; }
}

@media (prefers-reduced-motion: reduce) {
  #sky .drift { animation: none; }
  .clock { animation: none; }
  .stage.ringing .clock { animation: none; }
  .stage.ringing .ring { animation: none; opacity: 0.55; }
  .row.fired { animation: none; background: rgba(255, 106, 19, 0.18); }
}