@font-face {
  font-family: "Merriweather";
  src: url("/assets/fonts/merriweather-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f3eee4;
  --surface: #faf7f0;
  --ink: #161412;
  --muted: #5a544d;
  --line: #ddd5c8;
  --rule: #161412;
  --night: #000;
  --crimson: #b8291f;
  --crimson-deep: #8f1d15;
  --crimson-tint: #fbeae6;
  --serif: "Merriweather", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Japanese glyphs are decoration only, set in a Mincho the system has. */
  --mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", serif;
  --radius: 0;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

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

/* The page starts and ends in black, so overscroll stays black too. */
html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Black bands: the header and hero, the footer, and the small pages.
   Components read these variables, so they adapt without overrides. */
.dark {
  color-scheme: dark;
  --paper: var(--night);
  --surface: #111;
  --ink: #f4f1ec;
  --muted: #a9a29a;
  --line: #2a2a2a;
  --rule: #3a3632;
  --crimson: #e04a3f;
  --crimson-deep: #ec675d;
  --crimson-tint: rgba(214, 58, 48, 0.18);
  background: var(--paper);
  color: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 0.875rem;
  background: #fff;
  color: #000;
  border-radius: 0;
  text-decoration: none;
  z-index: 10;
}

.skip:focus {
  top: 1rem;
}

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

/* Header */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  font: 700 1.0625rem/1 var(--serif);
  letter-spacing: -0.005em;
}

.brand img {
  width: 2rem;
  height: 2rem;
}

.brand-mark {
  display: flex;
}

.header-link {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}

.header-link:hover {
  color: var(--ink);
}

/* Shared type */

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

/* Hero */

main {
  flex: 1;
}

.hero {
  padding: clamp(2rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  gap: 2rem;
  align-items: center;
}

/* The ninja before a dim moon. The moon is drawn inside the SVG so the
   opening cut can split it. */
.hero-art {
  position: relative;
  width: min(17rem, 72%);
  padding: 1.5rem 0 0.5rem;
}

.hero-art .ninja {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* the moon, the dash and the cut spill past the frame */
}

/* Each part turns about its joint, given in the art's own coordinates. */
:where(.ninja) :where(g, use, circle, line, path) {
  transform-box: view-box;
}

/* On arrival, once: the moon rises, the ninja dashes in from the right as a
   blur with afterimages, lands in a skid and whips his blade up in a rising
   cut. A beat later the moon behind him splits along the cut and closes again
   while the blade's point flashes. Every part of him is rigged at its joint:
   the torso turns at the hip, the head at the neck, the arms at the shoulder
   and the sword in his grip. After that, moonlight runs down the blade every
   few seconds, the headband's tails stir and he breathes. */

.nj-moon {
  transform-origin: 93.86px 57.25px;
  animation: nj-moon-rise 1.1s cubic-bezier(.2, .7, .3, 1) both;
}

.nj-moon-a { animation: nj-split-a 1.7s 1.42s both; }
.nj-moon-b { animation: nj-split-b 1.7s 1.42s both; }

.nj-cut,
.nj-cut-glow {
  opacity: 0;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: nj-cut 1.6s 1.34s both;
}

.nj-cut-glow { animation-name: nj-cut-glow; }

.nj-hover {
  animation: ninja-hover 4s 2.8s ease-in-out infinite alternate;
}

.nj-body {
  transform-origin: 110px 122px; /* the ground under him */
  animation: nj-arrive 1s 0.25s both;
}

.nj-torso {
  transform-origin: 76px 74px; /* the hip */
  animation: nj-torso 1s 0.25s both;
}

.nj-head {
  transform-origin: 55px 37px; /* the neck */
  animation: nj-head 1s 0.25s both;
}

.nj-arms {
  transform-origin: 47px 42px; /* the shoulder */
  animation: nj-arms 1s 0.25s both;
}

.ninja-sword {
  transform-origin: 24.5px 48.5px; /* the grip */
  animation: nj-sword 1s 0.25s both;
}

.ninja-tails {
  transform-origin: 45.5px 16px; /* the knot */
  animation: nj-whip 1.5s 0.45s both, ninja-flutter 3.4s 1.95s ease-in-out infinite;
}

.nj-ghost,
.nj-speed,
.nj-dust,
.nj-skid,
.nj-smear,
.nj-comet {
  opacity: 0;
  animation-fill-mode: forwards !important;
}

.nj-ghost {
  transform-origin: 110px 122px;
  animation: nj-ghost 0.5s cubic-bezier(.15, .7, .3, 1) both;
}

.nj-ghost-1 { animation-delay: 0.3s; fill-opacity: .16; }
.nj-ghost-2 { animation-delay: 0.34s; fill-opacity: .09; }
.nj-ghost-3 { animation-delay: 0.38s; fill-opacity: .05; }

.nj-speed {
  transform-box: fill-box;
  transform-origin: right center;
  animation: nj-speed 0.55s cubic-bezier(.3, .6, .4, 1) both;
}

.nj-speed-0 { animation-delay: 0.22s; }
.nj-speed-1 { animation-delay: 0.27s; }
.nj-speed-2 { animation-delay: 0.31s; }
.nj-speed-3 { animation-delay: 0.25s; }
.nj-speed-4 { animation-delay: 0.35s; }

.nj-dust {
  transform-box: fill-box;
  transform-origin: center;
  animation: nj-dust-f 0.9s cubic-bezier(.2, .7, .3, 1) both;
}

.nj-dust-b { animation-name: nj-dust-b; }
.nj-dust-0 { animation-delay: 0.5s; }
.nj-dust-1 { animation-delay: 0.53s; }
.nj-dust-2 { animation-delay: 0.56s; }
.nj-dust-3 { animation-delay: 0.6s; }

.nj-smear { animation: nj-smear 0.55s 0.52s linear; }

/* The smear is drawn in behind the tip as it sweeps, then wiped from its tail. */
.nj-smear-reveal {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: nj-smear-reveal 0.55s 0.52s both;
}

.nj-skid {
  transform-box: fill-box;
  transform-origin: right center;
  animation: nj-skid 0.7s 0.5s cubic-bezier(.2, .7, .3, 1);
}

.nj-skid-b { transform-origin: left center; }

.nj-comet {
  stroke-dasharray: .32 1.4;
  stroke-dashoffset: .32;
  animation: nj-comet 0.2s 0.52s cubic-bezier(.4, 0, .6, 1) both;
}

.ninja-shine,
.ninja-glint {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.ninja-shine { animation: ninja-shine 6s 3.6s infinite; }
.ninja-glint { animation: nj-flash 0.7s 1.36s both, ninja-glint 6s 3.6s infinite; }

@keyframes nj-moon-rise {
  from { opacity: 0; transform: scale(.94); }
}

@keyframes nj-arrive {
  0% { opacity: 0; transform: translate(95px, -3px) scale(1, 1) skewX(-10deg); animation-timing-function: cubic-bezier(.12, .6, .25, 1); }
  8% { opacity: 1; }
  27% { transform: translate(-4.5px, 1.6px) scale(1.05, .92) skewX(5deg); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  45% { transform: translate(-1px, -.4px) scale(.985, 1.025) skewX(-1.2deg); }
  65% { transform: translate(.3px, 0) scale(1.004, .995) skewX(.3deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1, 1) skewX(0); }
}

@keyframes nj-torso {
  0% { transform: rotate(-10deg); }
  27% { transform: rotate(-13deg); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  41% { transform: rotate(3.5deg); animation-timing-function: ease-out; }
  60% { transform: rotate(-1deg); }
  80%, 100% { transform: rotate(0); }
}

@keyframes nj-head {
  0% { transform: rotate(6deg); }
  27% { transform: rotate(9deg); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  43% { transform: rotate(-4deg); animation-timing-function: ease-out; }
  62% { transform: rotate(1.2deg); }
  82%, 100% { transform: rotate(0); }
}

@keyframes nj-arms {
  0% { transform: rotate(-28deg); }
  27% { transform: rotate(-33deg); animation-timing-function: cubic-bezier(.6, 0, .15, 1); }
  41% { transform: rotate(5deg); animation-timing-function: ease-out; }
  55% { transform: rotate(-2deg); }
  70% { transform: rotate(.6deg); }
  85%, 100% { transform: rotate(0); }
}

@keyframes nj-sword {
  0% { transform: rotate(80deg); }
  27% { transform: rotate(86deg); animation-timing-function: cubic-bezier(.6, 0, .15, 1); }
  41% { transform: rotate(-4deg); animation-timing-function: ease-out; }
  55% { transform: rotate(1.5deg); }
  72%, 100% { transform: rotate(0); }
}

@keyframes nj-whip {
  0% { transform: rotate(-16deg) skewX(8deg); }
  14% { transform: rotate(11deg) skewX(-4deg); }
  30% { transform: rotate(-7deg) skewX(3deg); }
  48% { transform: rotate(4deg) skewX(-2deg); }
  68% { transform: rotate(-1.8deg); }
  100% { transform: none; }
}

@keyframes nj-ghost {
  0% { opacity: 0; transform: translate(95px, -3px) skewX(-10deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-2px, 1px) skewX(2deg); }
}

@keyframes nj-speed {
  0% { opacity: 0; transform: translateX(70px) scaleX(.2); }
  30% { opacity: .55; }
  100% { opacity: 0; transform: translateX(-60px) scaleX(1.2); }
}

@keyframes nj-dust-f {
  0% { opacity: .9; transform: translate(0, 0) scale(.3); }
  100% { opacity: 0; transform: translate(-12px, -6px) scale(1.9); }
}

@keyframes nj-dust-b {
  0% { opacity: .8; transform: translate(0, 0) scale(.3); }
  100% { opacity: 0; transform: translate(9px, -5px) scale(1.7); }
}

@keyframes nj-smear {
  0%, 45% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes nj-smear-reveal {
  0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  26% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  100% { stroke-dashoffset: -1; }
}

@keyframes nj-skid {
  0% { opacity: .6; transform: scaleX(.1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes nj-comet {
  0% { opacity: 1; stroke-dashoffset: .32; }
  80% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -1.05; }
}

@keyframes nj-cut {
  0% { opacity: 1; stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  8% { opacity: 1; stroke-dashoffset: 0; }
  40% { opacity: .9; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes nj-cut-glow {
  0% { opacity: .5; stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  8% { opacity: .5; stroke-dashoffset: 0; }
  20% { opacity: .22; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

/* The halves part across the cut, the right one slipping off a little,
   then close. */
@keyframes nj-split-a {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  10%, 42% { transform: translate(3.6px, -2.6px); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  100% { transform: none; }
}

@keyframes nj-split-b {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  10%, 42% { transform: translate(-1.6px, 1.4px); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  100% { transform: none; }
}

@keyframes nj-flash {
  0% { opacity: 0; transform: scale(0) rotate(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  25% { opacity: 1; transform: scale(1.6) rotate(45deg); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: scale(.2) rotate(120deg); }
}

@keyframes ninja-hover {
  to { transform: translateY(-0.6px); }
}

@keyframes ninja-flutter {
  0%, 100% { transform: none; }
  22% { transform: rotate(-3deg) skewX(2deg); }
  41% { transform: rotate(1.2deg) skewX(-1deg); }
  63% { transform: rotate(-2deg) skewX(1.5deg); }
  82% { transform: rotate(.6deg); }
}

@keyframes ninja-shine {
  0% { opacity: 0; transform: translateX(6px) scaleX(.6); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  4% { opacity: 1; }
  20% { opacity: 1; transform: translateX(136px) scaleX(1); }
  24%, 100% { opacity: 0; transform: translateX(141px) scaleX(.4); }
}

@keyframes ninja-glint {
  0%, 18% { opacity: 0; transform: scale(0) rotate(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  21% { opacity: 1; transform: scale(1) rotate(45deg); animation-timing-function: ease-in; }
  27%, 100% { opacity: 0; transform: scale(.2) rotate(90deg); }
}

.hero h1 {
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  line-height: 1.12;
}

/* A single brush stroke, wet at the start and dry at the end. */
.stroke {
  display: block;
  width: 9rem;
  height: 0.75rem;
  margin: 1.5rem 0 0;
  color: var(--crimson);
}

.lede {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  color: var(--muted);
}

@media (min-width: 52rem) {
  .hero .wrap {
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
  }
  .hero-art {
    order: 2;
    width: 100%;
    max-width: 26rem;
    justify-self: end;
    padding: 2.5rem 0 1rem;
  }
}

/* Games: a shoji grid, the cards sharing one ink frame. */

.games {
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 6rem);
  background-color: var(--paper);
  /* Faint washi grain. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

@media (min-width: 44rem) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
  .card-featured {
    grid-column: 1 / -1;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

/* Each game's kanji: 盟 alliance, 問 question, 賭 wager. */
.ordinal {
  font: 400 2.5rem/1 var(--mincho);
  color: #a39a8e;
}

.card-featured .ordinal {
  color: var(--ink);
}

/* Coming soon: the whole card recedes, not just its kanji. */
.card-soon {
  --ink: #857d73;
  --muted: #8f877c;
  color: var(--ink);
}

.icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rule);
  color: var(--crimson);
  font: 400 1.5rem/1 var(--mincho);
  flex: none;
}

.card h3 {
  font-size: 1.5rem;
  line-height: 1.2;
}

.card .subtitle {
  margin: -0.25rem 0 0;
  font: 400 1rem/1.45 var(--serif);
  color: var(--ink);
}

.card p {
  margin: 0;
  color: var(--muted);
}

/* Status as a seal: a square stamp, solid vermilion when it's on. */
.stamp {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border: 1px solid currentColor;
  font: 700 0.8125rem/1.2 var(--serif);
  white-space: nowrap;
  color: var(--muted);
}

.stamp-live {
  border-color: var(--crimson);
  background: var(--crimson);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--crimson), inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* Featured card */

.card-featured {
  box-shadow: inset 0 4px 0 var(--crimson);
  transition: background-color 0.2s ease;
}

.card-featured:hover {
  background: #fffdf8;
}

.card-featured h3 {
  font-size: clamp(1.75rem, 4.5vw, 2.25rem);
}

.card-featured .subtitle {
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
}

.dates {
  font-weight: 600;
  color: var(--ink) !important;
  font-variant-numeric: lining-nums;
}

.cta {
  align-self: flex-start;
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.8rem 1.375rem;
  min-height: 2.75rem;
  background: var(--ink);
  color: #fff;
  font: 600 0.9375rem/1 var(--sans);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.15s ease;
}

/* The whole featured card is clickable through its link. */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-featured:hover .cta {
  background: var(--crimson);
}

.card-featured:hover .cta svg {
  transform: translateX(3px);
}

@media (min-width: 52rem) {
  .card-featured {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 3rem;
    align-items: end;
  }
  .card-featured > * {
    grid-column: 1;
  }
  .card-featured .card-top {
    grid-column: 1 / -1;
  }
  .card-featured .cta {
    grid-column: 2;
    grid-row: 2 / span 4;
    align-self: end;
  }
}

/* Coming-soon pages */

.soon {
  display: grid;
  place-items: center;
  padding: clamp(3rem, 12vh, 7rem) 0;
  text-align: center;
}

.soon .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 36rem;
}

.soon .icon {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.75rem;
}

.soon .icon {
  font-size: 2.25rem;
}

.soon-mark {
  width: 6rem;
  height: 6rem;
}

.soon h1 {
  margin-top: 1.25rem;
  font-size: clamp(2.5rem, 9vw, 4rem);
  line-height: 1.1;
}

.soon .stroke {
  margin: 1.25rem auto 0;
}

.soon p {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  color: var(--muted);
}

.back {
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  font-weight: 600;
  color: var(--crimson);
  text-decoration: none;
}

.back svg {
  width: 1rem;
  height: 1rem;
}

.back:hover span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Footer */

.site-footer {
  padding: 1.75rem 0 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

.site-footer p {
  margin: 0;
}

/* 忍者, ninja: a quiet sign-off, centered between the two lines. */
.site-footer .sign {
  order: 3;
  font: 400 1rem/1.4 var(--mincho);
  letter-spacing: 0.3em;
}

@media (min-width: 40rem) {
  .site-footer .wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .site-footer .sign {
    order: 0;
    margin-right: -0.3em;
  }
  .site-footer .sign + p {
    justify-self: end;
  }
}

.site-footer a {
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
  .ninja,
  .ninja * {
    animation: none !important;
  }
}

/* Hovering a kanji shows its meaning. */
[data-meaning] {
  position: relative;
  z-index: 1; /* above the featured card's full-card link */
  cursor: help;
}

[data-meaning]::after {
  content: attr(data-meaning);
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translate(-50%, -0.25rem);
  padding: 0.35rem 0.6rem;
  background: #111;
  color: #f4f1ec;
  border: 1px solid #333;
  font: 500 0.8125rem/1.2 var(--sans);
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

[data-meaning]:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.site-footer [data-meaning]::after {
  top: auto;
  bottom: calc(100% + 0.5rem);
}

.brand-mark[data-meaning]::after,
.ordinal[data-meaning]::after {
  left: 0;
  transform: translate(0, -0.25rem);
}

.brand-mark[data-meaning]:hover::after,
.ordinal[data-meaning]:hover::after {
  transform: none;
}

[hidden] {
  display: none !important;
}