/* ============================================================
   shared.css: pieces that live in more than one room.
   - the quote room: his own quote on a blue page (home and About)
   - the footer (footer.js), on every room that scrolls
   Loaded last, so it can settle positions set elsewhere.
   ============================================================ */

/* ================= his own quote, on a blue page ================= */
.act--quote, .quote-room--about {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; align-content: center;
  /* room before the words (his ask, 30 September 2026): the page turns blue first, then the quote arrives.
     2 October 2026, his notes: a whole blue screen before the words was too much (92vh, now 44vh), and the
     quote needs air after it to shine on blue before the footer's maroon comes up (+28vh below) */
  padding: calc(clamp(110px, 16vh, 180px) + 44vh) var(--gutter) calc(clamp(110px, 16vh, 180px) + 28vh);
  text-align: center;
}
.act--quote::before, .quote-room--about::before {        /* dark, never dead: light from inside the blue, around the words */
  content: ""; position: absolute; top: 45%; right: 8%; bottom: 4%; left: 8%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 50% at 50% 48%, rgba(var(--lapis-glow), 0.42), rgba(var(--lapis-glow), 0) 72%);
  opacity: 0;                                   /* the blue light belongs to the blue page: it leaves with it */
  transition: opacity var(--dur-lights) var(--ease-grace);
}
html[data-field="blue"] .act--quote::before, html[data-field="blue"] .quote-room--about::before { opacity: 1; }
.quote-room { display: grid; justify-items: center; }
/* after his ReignSpire ring hero: Inter at a calm size with normal tracking, the closing phrase in
   Instrument Serif italic, a small tracked label on top. Regular weight: light on dark reads heavier than
   dark on light, so 400 here matches the feel of that hero's 500 */
.magic.magic--quote {
  max-width: 19em;
  font: 400 clamp(1.65rem, 0.95rem + 2.3vw, 3.05rem)/1.22 var(--font-quote);
  letter-spacing: -0.012em;
  color: var(--warm);
}
.magic--quote .magic__ghost { opacity: 0.2; }
.magic--quote .magic__word--em {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 1.12em; letter-spacing: 0;
}
.quote-room__src {
  margin-bottom: clamp(20px, 3vh, 30px);
  font: 500 var(--t-micro)/1.4 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sky);
}

/* ================= the footer ================= */
.sf {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: clamp(84px, 14vh, 150px);
  color: var(--warm);
  /* no block of its own at the top edge: the page's colour crossfades behind it (the same way the rooms
     melt into the ivory story), and the footer only deepens towards the floor */
  background: linear-gradient(180deg, rgba(27, 7, 10, 0) 0%, rgba(27, 7, 10, 0) 35%, var(--velvet-900) 100%);
}
.sf::before {                                  /* the red light, faded in from nothing at the top edge */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(80% 45% at 50% 18%, rgba(154, 28, 36, 0.3), rgba(154, 28, 36, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  transition: opacity var(--dur-lights) var(--ease-grace);
}
/* the red light is the maroon room's own: on the blue page it waits, so blue and red never mix into purple
   (his note, 2 October 2026); it comes up with the dark as the footer takes the screen */
html[data-field="blue"] .sf::before, html[data-field="light"] .sf::before { opacity: 0; }
/* the lamp too (its own opacity breathes, so the field fades it through a filter) */
.sf__glow { transition: filter var(--dur-lights) var(--ease-grace); }
html[data-field="blue"] .sf__glow, html[data-field="light"] .sf__glow { filter: opacity(0); }
.sf__glow {
  position: absolute; left: 50%; top: -18%; z-index: -1; pointer-events: none;
  width: min(1100px, 110vw); height: 70%;
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 45%);
          mask-image: linear-gradient(180deg, transparent 18%, #000 45%);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--lamp), 0.14), rgba(var(--lamp), 0));
  animation: sf-breathe 8s ease-in-out infinite alternate;
}
@keyframes sf-breathe { from { opacity: 0.6; transform: translateX(-50%) scale(1); } to { opacity: 1; transform: translateX(-50%) scale(1.1); } }
.sf__inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

.sf__close { text-align: center; margin-bottom: clamp(64px, 11vh, 120px); }
.sf__title {
  font: 400 clamp(2.3rem, 1.3rem + 3.4vw, 4.6rem)/1.03 var(--font-display);
  letter-spacing: -0.01em; color: var(--warm); text-wrap: balance;
}
.sf__sub { margin-top: 14px; font: italic 400 var(--t-lead)/1.35 var(--font-text); color: var(--warm-muted); }

.sf__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(36px, 6vh, 56px);
  border-top: 1px solid var(--line-dark);
}
.sf__mark { display: inline-block; width: 64px; height: 64px; }      /* his mark, World Builder (2 October 2026) */
.sf__mark img { width: 100%; height: 100%; filter: drop-shadow(0 6px 16px rgba(212, 168, 83, 0.3)); }
.sf__name { margin-top: 18px; font: 400 1.55rem/1.1 var(--font-display); letter-spacing: -0.015em; color: var(--warm); }
.sf__name [lang] { font-size: 0.8em; color: var(--gold); margin-left: 6px; letter-spacing: 0.06em; }
.sf__tag { margin-top: 10px; max-width: 24em; font: italic 400 1.08rem/1.45 var(--font-text); color: var(--warm-muted); }
.sf__head {
  margin-bottom: 16px;
  font: 500 var(--t-micro)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.sf__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sf__link {
  display: inline-flex; align-items: center; gap: 10px;
  font: 400 1rem/1.3 var(--font-ui); color: var(--warm-muted);
  transition: color var(--dur-hover) var(--ease-ui);
}
.sf__link svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (pointer: fine) { .sf__link:hover { color: var(--warm); } }
.sf__link:focus-visible, .sf__mark:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }

.sf__base {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px;
  margin-top: clamp(48px, 8vh, 80px); padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font: 400 var(--t-micro)/1.5 var(--font-ui); letter-spacing: 0.04em; color: var(--warm-faint);
}
.sf__creed { font: italic 400 1rem/1.4 var(--font-text); letter-spacing: 0.01em; color: var(--warm-muted); }
/* the music's credit, under the creed, once the song's maker is known (3 October 2026; content.js music.credit) */
.sf__credit { display: block; margin-top: 4px; font: 400 var(--t-micro)/1.4 var(--font-ui); font-style: normal; letter-spacing: 0.04em; color: var(--warm-faint); }
.sf__top { flex: none; }                                /* a glass pill (.gbtn, below, 3 October 2026); this only holds its place in the row */

/* his name, set into the bottom edge like the ReignSpire footer's wordmark, rising into place */
.sf__word {
  margin: clamp(18px, 4vh, 44px) 0 0;
  padding-bottom: clamp(14px, 2.4vh, 28px);        /* a little air under his name, not a gap */
  font: 400 clamp(3rem, 11.6vw, 13rem)/0.9 var(--font-display);
  letter-spacing: -0.035em; white-space: nowrap; text-align: center;
  color: transparent;
  background: linear-gradient(180deg, rgba(240, 214, 156, 0.5) 0%, rgba(214, 170, 90, 0.26) 45%, rgba(185, 138, 62, 0.06) 82%, rgba(185, 138, 62, 0) 100%);
  -webkit-background-clip: text; background-clip: text;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  pointer-events: none;
}

@media (max-width: 760px) {
  .sf__grid { grid-template-columns: 1fr 1fr; }
  .sf__brand { grid-column: 1 / -1; }
  .sf__base { flex-direction: column; align-items: flex-start; }
  .sf__word { font-size: 12.4vw; }
}
@media (prefers-reduced-motion: reduce) {
  .sf__glow { animation: none; }
  .sf__word { transform: none !important; opacity: 1 !important; }
}

/* Gloock everywhere again (his ruling, 2 October 2026): the About title and My Thoughts went back from Plex Serif
   to the display face the rest of the site speaks in */
.story__title, .notes-index__title, .note-page__title { letter-spacing: -0.012em; }

/* the tail of the story, if still on screen as the page turns blue, reads light on blue */
html[data-field="blue"] .story__text, html[data-field="blue"] .story__text .src { color: var(--warm-muted); }

/* ================= the island game's panel (island-panel.js): home act 4 and Watch Me Win =================
   One link to the game's own page (/play/): the island at dawn, its name, one line, a way in. The picture is
   the only file of the game the site ever loads, and only when the panel comes near. */
.isle {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; border-radius: 20px;
  color: var(--warm); text-decoration: none;
  background: radial-gradient(70% 60% at 50% 62%, #7a3b2c, var(--velvet) 72%);      /* while the picture comes */
  box-shadow: 0 50px 90px -40px rgba(18, 0, 3, 0.9), 0 0 0 1px rgba(255, 230, 190, 0.14);
  transition: box-shadow var(--dur-hover) var(--ease-ui);
}
.isle__pic { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; }
.isle__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform 1.4s var(--ease-grace); }
.isle::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 4, 5, 0.18) 0%, rgba(18, 4, 5, 0) 22%, rgba(18, 4, 5, 0) 40%, rgba(18, 4, 5, 0.55) 68%, rgba(18, 4, 5, 0.88) 100%);
}
.isle__chip {
  position: absolute; top: 16px; left: 18px;
  padding: 8px 12px; border-radius: var(--r-pill);
  font: 700 var(--t-micro)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm);
  background: rgba(18, 4, 5, 0.38); border: 1px solid rgba(247, 239, 228, 0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.isle__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; justify-items: start; gap: 8px;
  padding: clamp(18px, 2.6vw, 32px);
}
.isle__title { font: 400 clamp(1.9rem, 1.3rem + 2vw, 3.1rem)/1 var(--font-display); letter-spacing: -0.01em; text-shadow: 0 2px 24px rgba(18, 4, 5, 0.5); }
.isle__line { max-width: 26em; font: italic 400 clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem)/1.35 var(--font-text); color: rgba(247, 239, 228, 0.88); }
.isle__play {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; margin-top: 8px; padding: 0 20px 0 16px; border-radius: var(--r-pill);
  font: 700 0.95rem/1 var(--font-ui); letter-spacing: 0.02em;
  color: var(--velvet-900); background: var(--warm);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.75);
  transition: transform var(--dur-hover) var(--ease-ui), background-color var(--dur-hover) var(--ease-ui);
}
.isle__play svg { width: 16px; height: 16px; }
.isle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .isle:hover { box-shadow: 0 60px 100px -40px rgba(18, 0, 3, 0.95), 0 0 0 1px rgba(234, 203, 134, 0.35); }
  .isle:hover .isle__pic img { transform: scale(1.04); }
  .isle:hover .isle__play { background: #fff; transform: translateY(-1px); }
}
@media (max-width: 760px) { .isle { aspect-ratio: 4 / 4.4; } }
@media (prefers-reduced-motion: reduce) { .isle__pic img, .isle__play { transition: none; } }

/* ================= the glass buttons (3 October 2026) =================
   Moved in from glass.css so the first load carries one stylesheet fewer; the system itself is unchanged. */
/* ============================================================
   the glass buttons (his ask, 3 October 2026: "the Apple design feel").

   One small system for the site's buttons: frosted, tinted glass with a bright rim, light caught inside it,
   a soft shadow under it, and a press that gives. The look comes from Apple's Liquid Glass as
   dashersw/liquid-glass-js shows it (MIT; ~/.claude/skills/apple-design-feel/vendor/), rebuilt in plain CSS the
   way the reading switch is (rooms.css, .readmode): no WebGL, no html2canvas, nothing from a CDN, so the
   first load and mainland networks are untouched. The rim's bend (the SVG displacement filter) is left out:
   on a control this small it is invisible, and it would make every page carry the filter.

     .gbtn               a pill; the site's blue (sky) in glass, 46 px tall
     .gbtn--sm           the small pill (44 px, a touch smaller type): the footer's Back to the top
     .gbtn--icon         the round one, for a glyph only: the × on the Say Hi letter (46 px)
     .gbtn--dark         forces the smoked glass, for a button that always sits on maroon (the footer)
     .gbtn--ivory        forces the pale glass, for a button that always sits on ivory paper (the letter)

   Without a modifier a button follows the page: pale glass where the field is light (html[data-field="light"],
   which My Thoughts sets for ivory and flips to "dark" for maroon), smoked glass everywhere else. The fill, the
   rim and the ink are registered colours, so they glide when the reading switch changes the page rather than
   snapping. Blue stays the call to action, as everywhere on the site: never maroon.
   Hover lifts it a little and brightens the rim; a press scales it to .97 and springs back.
   ============================================================ */

@property --gb-top     { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-bot     { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-gloss   { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-ink     { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-rim-hi  { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-rim-lo  { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-rim-hi2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-edge    { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-edge-lo { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-glow    { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-drop    { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-drop2   { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-hair    { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gb-hl      { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------------- the glass ---------------- */
.gbtn {
  /* smoked glass over maroon (the default, and the footer's) */
  --gb-top: rgba(100, 170, 243, 0.56);
  --gb-bot: rgba(88, 156, 236, 0.27);
  --gb-gloss: rgba(255, 255, 255, 0.24);
  --gb-ink: color-mix(in srgb, var(--sky, #9CC7EC) 68%, #fff);
  --gb-rim-hi: rgba(255, 255, 255, 0.6);
  --gb-rim-lo: rgba(156, 199, 236, 0.1);
  --gb-rim-hi2: rgba(255, 255, 255, 0.3);
  --gb-edge: rgba(255, 255, 255, 0.34);
  --gb-edge-lo: rgba(0, 0, 0, 0.34);
  --gb-glow: rgba(156, 199, 236, 0.14);
  --gb-drop: rgba(0, 0, 0, 0.62);
  --gb-drop2: rgba(0, 0, 0, 0.36);
  --gb-hair: rgba(156, 199, 236, 0.16);
  --gb-focus: var(--sky, #9CC7EC);
  --gb-dy: 11px; --gb-blur: 24px; --gb-hl: 0;

  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: 46px; padding: 0 22px; margin: 0;
  border: 0; border-radius: 999px;
  font: 600 0.92rem/1 var(--font-ui); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  color: var(--gb-ink); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background:
    linear-gradient(rgba(214, 234, 255, calc(var(--gb-hl) * 0.1)), rgba(214, 234, 255, calc(var(--gb-hl) * 0.1))),
    radial-gradient(110% 130% at 22% -18%, var(--gb-gloss), transparent 62%),
    linear-gradient(165deg, var(--gb-top), var(--gb-bot));
  -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
  box-shadow:
    0 var(--gb-dy) var(--gb-blur) -10px var(--gb-drop), 0 2px 5px -2px var(--gb-drop2),     /* the soft shadow under it */
    0 0 0 0.5px var(--gb-hair),                                                              /* a hairline, so it holds its edge on any ground */
    inset 0 1px 1px var(--gb-edge), inset 0 -1px 1px var(--gb-edge-lo),                      /* the bright top edge, the faint bottom one */
    inset 0 0 14px var(--gb-glow);                                                           /* the light inside */
  transition:
    transform 520ms cubic-bezier(0.34, 1.36, 0.5, 1), box-shadow 520ms var(--ease-ui, ease),
    --gb-top 900ms var(--ease-grace, ease), --gb-bot 900ms var(--ease-grace, ease), --gb-gloss 900ms var(--ease-grace, ease),
    --gb-ink 900ms var(--ease-grace, ease), --gb-rim-hi 900ms var(--ease-grace, ease), --gb-rim-lo 900ms var(--ease-grace, ease),
    --gb-rim-hi2 900ms var(--ease-grace, ease), --gb-edge 900ms var(--ease-grace, ease), --gb-edge-lo 900ms var(--ease-grace, ease),
    --gb-glow 900ms var(--ease-grace, ease), --gb-drop 900ms var(--ease-grace, ease), --gb-drop2 900ms var(--ease-grace, ease),
    --gb-hair 900ms var(--ease-grace, ease), --gb-hl 420ms var(--ease-ui, ease);
}

/* the rim: a one-pixel ring that is bright where the light lands (upper left, lower right) and dim between,
   cut out of a gradient with a mask, as Apple draws the edge of its glass */
.gbtn::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  box-sizing: border-box; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, var(--gb-rim-hi) 0%, var(--gb-rim-lo) 36%, var(--gb-rim-lo) 64%, var(--gb-rim-hi2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.82; transition: opacity 420ms var(--ease-ui, ease);
}
.gbtn svg { display: block; width: 18px; height: 18px; flex: none; }
.gbtn__icon { display: inline-block; transition: transform 520ms cubic-bezier(0.34, 1.36, 0.5, 1); }

/* pale glass, on ivory: the page's light field, or a button that is always on paper */
html[data-field="light"] .gbtn, html .gbtn.gbtn--ivory {
  --gb-top: rgba(226, 239, 251, 0.96);
  --gb-bot: rgba(158, 200, 238, 0.82);
  --gb-gloss: rgba(255, 255, 255, 0.78);
  --gb-ink: color-mix(in srgb, var(--sky-ink, #2B5E8A) 76%, #06182b);
  --gb-rim-hi: rgba(255, 255, 255, 1);
  --gb-rim-lo: rgba(118, 168, 220, 0.22);
  --gb-rim-hi2: rgba(255, 255, 255, 0.8);
  --gb-edge: rgba(255, 255, 255, 0.96);
  --gb-edge-lo: rgba(43, 94, 138, 0.22);
  --gb-glow: rgba(255, 255, 255, 0.4);
  --gb-drop: rgba(43, 94, 138, 0.55);
  --gb-drop2: rgba(43, 94, 138, 0.2);
  --gb-hair: rgba(43, 94, 138, 0.26);
  --gb-focus: var(--sky-ink, #2B5E8A);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* a button that is always on maroon keeps the smoked glass, whatever field the page has just now */
html .gbtn.gbtn--dark {
  --gb-top: rgba(100, 170, 243, 0.56);
  --gb-bot: rgba(88, 156, 236, 0.27);
  --gb-gloss: rgba(255, 255, 255, 0.24);
  --gb-ink: color-mix(in srgb, var(--sky, #9CC7EC) 68%, #fff);
  --gb-rim-hi: rgba(255, 255, 255, 0.6);
  --gb-rim-lo: rgba(156, 199, 236, 0.1);
  --gb-rim-hi2: rgba(255, 255, 255, 0.3);
  --gb-edge: rgba(255, 255, 255, 0.34);
  --gb-edge-lo: rgba(0, 0, 0, 0.34);
  --gb-glow: rgba(156, 199, 236, 0.14);
  --gb-drop: rgba(0, 0, 0, 0.62);
  --gb-drop2: rgba(0, 0, 0, 0.36);
  --gb-hair: rgba(156, 199, 236, 0.16);
  --gb-focus: var(--sky, #9CC7EC);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* ---------------- sizes ---------------- */
.gbtn--sm { min-height: 44px; padding: 0 18px; gap: 7px; font-size: 0.84rem; }
.gbtn--icon { width: 46px; min-width: 46px; padding: 0; }
.gbtn--icon svg { transition: transform 520ms cubic-bezier(0.34, 1.36, 0.5, 1); }

/* ---------------- states ---------------- */
@media (hover: hover) and (pointer: fine) {
  .gbtn:hover { transform: translateY(-2px); --gb-hl: 1; --gb-dy: 15px; --gb-blur: 28px; }
  .gbtn:hover::after { opacity: 1; }
  .gbtn:hover .gbtn__icon { transform: translateY(-2px); }
  .gbtn--icon:hover svg { transform: rotate(90deg); }
}
/* the press goes in quickly and springs back on release (the base transition) */
.gbtn:active {
  transform: scale(0.97); --gb-hl: 0.6; --gb-dy: 6px; --gb-blur: 14px;
  transition: transform 120ms var(--ease-ui, ease), box-shadow 120ms var(--ease-ui, ease), --gb-hl 120ms var(--ease-ui, ease);
}
.gbtn:focus-visible { outline: 2px solid var(--gb-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .gbtn, .gbtn::after { transition: opacity 200ms linear, box-shadow 200ms linear; }
  .gbtn:hover, .gbtn:active { transform: none; }
  .gbtn__icon, .gbtn--icon svg { transition: none; }
  .gbtn:hover .gbtn__icon, .gbtn--icon:hover svg { transform: none; }
}
@media (forced-colors: active) {
  .gbtn { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; text-shadow: none; }
  .gbtn::after { display: none; }
}

/* ---------------- where it is used ---------------- */
/* the × on the Say Hi letter (hi.js): inside the airmail border, at the top right, above it */
.hi__close { position: absolute; top: 22px; right: 22px; z-index: 3; }
@media (max-width: 760px) { .hi__close { top: 18px; right: 18px; } }