/* =========================================================================
   すべての月は神無月 — official hub
   Art direction:「朱の暦（しゅのこよみ）」 / Vermilion Almanac

   Three signs carry the whole site, and nothing else is allowed to compete:

   1. 暦環 (the dial)   — a ring of twelve. The year is a circle, and the
                          order never changes.
   2. 朱線 (the strike) — every verb that leaves the world is shown *being*
                          crossed out in correction ink, never simply absent.
   3. 十二罫 (the rules)— twelve hairlines stand behind every page, so the
                          year is present even when nothing names it.

   Ground is ink, type is paper, and exactly one hue — vermilion — is ever
   allowed to be saturated.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* Ground */
  --ink: #07080b;
  --ink-raised: #0e1116;
  --ink-high: #141821;
  --ink-sunken: #040507;
  --hair: #1e232b;
  --hair-strong: #39414c;
  --hair-soft: #13161c;

  /* Type */
  --paper: #f4efe6;
  --paper-dim: #9aa0a9;
  /* The quietest ink still clears 4.5:1 on the ground; anything softer was
     failing AA at the small sizes these labels are set in. */
  --paper-faint: #767d88;

  /* Accent — the correction mark */
  --accent: #e2543a;
  --accent-bright: #ff8264;
  --accent-dim: #a13a26;
  --accent-wash: rgba(226, 84, 58, 0.1);
  --accent-glow: rgba(226, 84, 58, 0.28);

  /* Moonlight */
  --moon-lit: #d6dee6;
  --moon-dark: #12161d;

  --focus: #ffb59f;

  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",
    "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --font-mincho: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDPMincho",
    "Noto Serif JP", serif;
  --font-num: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --shell: 84rem;
  --shell-narrow: 52rem;
  --gutter: 1.25rem;
  --header-h: 3.75rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms;
  --t-mid: 280ms;
  --t-slow: 620ms;
}

/* Index utilities. One class carries a month's ordinal to any component that
   needs to place, delay or stagger by it. */
.i01 { --i: 0; }
.i02 { --i: 1; }
.i03 { --i: 2; }
.i04 { --i: 3; }
.i05 { --i: 4; }
.i06 { --i: 5; }
.i07 { --i: 6; }
.i08 { --i: 7; }
.i09 { --i: 8; }
.i10 { --i: 9; }
.i11 { --i: 10; }
.i12 { --i: 11; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  min-width: 20rem;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: it cannot start a scroll container, so the sticky
     header keeps working while stray bleed can never widen the page. */
  overflow-x: clip;
}

/* Twelve vertical rules: the year, always underneath, fading out at the edges
   so it reads as a watermark rather than a table. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    var(--hair-soft) 0 1px,
    transparent 1px calc(100% / 12)
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 18vh,
    #000 72%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 18vh,
    #000 72%,
    transparent
  );
}

/* Paper tooth and a soft vignette. Both are inert and never intercept input. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(
      ellipse 120% 80% at 50% 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 100% 100%, 140px 140px;
}

/* Kept at element specificity so `.site-header`'s sticky and `.veil`'s fixed
   positioning still win. Raising this selector silently un-sticks the header. */
body > * {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.45;
  margin: 0;
  text-wrap: balance;
}

/* Headings break between clauses only. A line must never end on a stray kana
   with the rest of its word carried over. */
.phrase {
  display: inline-block;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

[hidden] {
  display: none !important;
}

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

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

.skip-link {
  position: fixed;
  z-index: 60;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1.1rem;
  transform: translateY(-180%);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding: 0 var(--gutter);
  background: rgba(7, 8, 11, 0.78);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease-soft),
    background var(--t-mid) var(--ease-soft);
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--hair);
  background: rgba(4, 5, 7, 0.94);
}

/* A hairline that fills as the page is read. */
.site-header__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  overflow: hidden;
}

.site-header__progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding-right: 0.5rem;
  text-decoration: none;
}

.wordmark__mark {
  display: block;
  width: 3px;
  height: 1.15rem;
  background: var(--accent);
  transition: height var(--t-mid) var(--ease-out);
}

.wordmark:hover .wordmark__mark {
  height: 1.5rem;
}

.wordmark__text {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--hair);
  background: transparent;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 1rem;
}

.nav-toggle__bars i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease-soft);
}

.nav-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child {
  transform: translateY(2.5px) rotate(12deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child {
  transform: translateY(-2.5px) rotate(-12deg);
}

.site-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  display: grid;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  background: var(--ink-sunken);
  border-bottom: 1px solid var(--hair);
  transition: max-height var(--t-mid) var(--ease-soft),
    visibility 0s linear var(--t-mid);
}

.site-nav.is-open {
  max-height: 32rem;
  visibility: visible;
  transition: max-height var(--t-mid) var(--ease-soft), visibility 0s;
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 3.4rem;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--hair-soft);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.site-nav__en {
  min-width: 5.5rem;
  color: var(--paper-faint);
  font-family: var(--font-num);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  transition: color var(--t-fast) var(--ease-soft);
}

.site-nav__label {
  position: relative;
  padding-bottom: 2px;
}

.site-nav__link[aria-current="page"] .site-nav__label::after,
.site-nav__link:hover .site-nav__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
}

.site-nav__link[aria-current="page"],
.site-nav__link:hover {
  color: var(--paper);
}

.site-nav__link[aria-current="page"] .site-nav__en,
.site-nav__link:hover .site-nav__en {
  color: var(--accent);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer {
  display: grid;
  gap: 2rem;
  max-width: var(--shell);
  margin: 6rem auto 0;
  padding: 3rem var(--gutter) 3.5rem;
  border-top: 1px solid var(--hair);
  color: var(--paper-dim);
  font-size: 0.82rem;
}

/* The year, one last time, as twelve marks. */
.site-footer__rule {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  height: 0.75rem;
  margin-top: -3rem;
  margin-bottom: 1.5rem;
}

.site-footer__rule i {
  display: block;
  width: 1px;
  height: 0.45rem;
  background: var(--hair-strong);
}

.site-footer__rule i:nth-child(7) {
  height: 0.75rem;
  background: var(--accent);
}

.site-footer__title {
  color: var(--paper);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.site-footer__line {
  margin-top: 0.35rem;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
}

.site-footer__nav a {
  display: grid;
  gap: 0.15rem;
  align-content: center;
  min-height: 2.75rem;
  text-decoration: none;
  line-height: 1.5;
}

.site-footer__nav a span {
  color: var(--paper-faint);
  font-family: var(--font-num);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  transition: color var(--t-fast) var(--ease-soft);
}

.site-footer__nav a:hover {
  color: var(--paper);
}

.site-footer__nav a:hover span {
  color: var(--accent);
}

.site-footer__meta {
  display: grid;
  gap: 0.25rem;
  color: var(--paper-faint);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
   Buttons and small parts
   ------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.25rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--paper);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft);
}

/* The fill sweeps in from the left, like a stroke of ink. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease-out);
}

.btn > * {
  position: relative;
}

.btn .icon {
  transition: transform var(--t-mid) var(--ease-out);
}

.btn:hover .icon,
.btn:focus-visible .icon {
  transform: translateX(0.3rem);
}

.btn--primary {
  border-color: var(--accent);
  color: var(--accent-bright);
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: color var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft),
    box-shadow var(--t-mid) var(--ease-soft);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: #fff;
  box-shadow: 0 0 2.5rem -0.5rem var(--accent-glow);
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before {
  transform: scaleX(1);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--paper-dim);
  color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.rule {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--accent);
}

.hint,
.status-text,
.form-note,
.disclaimer {
  color: var(--paper-faint);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.disclaimer {
  max-width: var(--shell);
  margin: 3rem auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  color: var(--paper-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.back-link::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  transition: width var(--t-fast) var(--ease-soft);
}

.back-link:hover {
  color: var(--paper);
}

.back-link:hover::before {
  width: 2rem;
}

.notice {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--hair);
  border-left: 2px solid var(--accent);
  background: var(--ink-raised);
  color: var(--paper-dim);
  font-size: 0.86rem;
  line-height: 1.8;
}

.notice__mark {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.65rem;
  border-radius: 50%;
  background: var(--accent);
}

/* -------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------- */

.band {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter);
  border-top: 1px solid var(--hair-soft);
}

.section-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 44rem;
}

/* Latin above, Japanese below: the pairing used on the reference sites, kept
   to one size and one weight so it never reads as decoration. */
.section-title {
  display: grid;
  gap: 0.5rem;
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  letter-spacing: 0.06em;
}

.section-title__en {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.28em;
}

.section-title__en::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
}

.section-lede {
  color: var(--paper-dim);
  font-size: 0.98rem;
  line-height: 2;
}

.page-head {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
}

.page-head--narrow {
  max-width: var(--shell-narrow);
}

.page-head__eyebrow,
.hero__eyebrow,
.promo__eyebrow,
.join__eyebrow,
.prologue__eyebrow,
.result__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--accent-bright);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.page-head__eyebrow::before,
.hero__eyebrow::before,
.promo__eyebrow::before,
.join__eyebrow::before,
.prologue__eyebrow::before,
.result__eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}

.page-head__title {
  overflow: hidden;
  margin: 1.25rem 0 1.5rem;
  font-size: clamp(2rem, 6.4vw, 3.6rem);
  letter-spacing: 0.005em;
  line-height: 1.35;
}

.page-head__lede {
  max-width: 42rem;
  color: var(--paper-dim);
  line-height: 2.05;
}

.page-head .notice {
  max-width: 42rem;
  margin-top: 1.75rem;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: 1.75rem 0 3rem;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  z-index: -1;
  top: -22vh;
  right: -12vw;
  width: min(96vw, 56rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(214, 222, 230, 0.08),
    rgba(214, 222, 230, 0.025) 42%,
    transparent 68%
  );
}

.hero__inner {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Small screens read the dial as a key visual first, then the headline.
   From tablet up the two sit side by side and the dial keeps its own column. */
.hero__grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.hero__title {
  margin: 1rem 0 1.4rem;
  font-size: clamp(1.6rem, 8.2vw, 4.4rem);
  letter-spacing: 0.005em;
  line-height: 1.3;
}

/* Two lines, always two lines: the mask keeps each one whole. */
.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line > span {
  display: block;
  white-space: nowrap;
}

.hero__premise {
  max-width: 40rem;
  color: var(--paper-dim);
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  line-height: 2.1;
}

.hero__example {
  max-width: 40rem;
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  color: var(--paper);
  font-size: 0.92rem;
  line-height: 1.95;
}

.hero .btn-row {
  margin-top: 1.5rem;
}

.hero__scroll {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--paper-faint);
  font-family: var(--font-num);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 1.75rem;
  background: linear-gradient(to bottom, transparent, var(--hair-strong));
}

/* --- 暦環 / the dial ---------------------------------------------------- */

.dial {
  --dial-size: min(62vw, 17rem);
  --dial-r: calc(var(--dial-size) / 2 - 0.8rem);
  --slot: 2.4s;
  --cycle: 28.8s;
  position: relative;
  width: var(--dial-size);
  height: var(--dial-size);
  justify-self: center;
  flex: 0 0 auto;
}

.dial__halo {
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(214, 222, 230, 0.11),
    rgba(214, 222, 230, 0.02) 46%,
    transparent 70%
  );
}

.dial__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
}

.dial__ring--inner {
  inset: 15%;
  border-color: var(--hair-soft);
}

.dial__ticks {
  position: absolute;
  inset: 0;
}

/* Read like a clock face: 一月 sits at one o'clock, 十二月 at the top. */
.dial__tick {
  --a: calc((var(--i) + 1) * 30deg);
  --place: translate(-50%, -50%) rotate(var(--a))
    translateY(calc(var(--dial-r) * -1));
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 1.4rem;
  border-radius: 1px;
  background-color: var(--hair-strong);
  transform: var(--place) scaleY(0.5);
}

.dial__hand {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(30deg);
}

.dial__hand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4%;
  width: 1px;
  margin-left: -0.5px;
  height: 42%;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

.dial__stage {
  position: absolute;
  inset: 22%;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.dial__caption {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--paper-faint);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
}

.dial__words {
  position: relative;
  display: block;
  width: 100%;
  height: 4.75rem;
}

.dial__word {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 0.2rem;
  align-content: center;
  justify-items: center;
  opacity: 0;
}

/* Without animation the dial still says the thing: 一月 loses「終える」. */
.dial__word.i01 {
  opacity: 1;
}

.dial__word-month {
  color: var(--paper-dim);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}

.dial__word-verb {
  position: relative;
  display: inline-block;
  font-size: clamp(1.75rem, 6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: nowrap;
}

.dial__word-strike {
  position: absolute;
  left: -0.12em;
  right: -0.12em;
  top: 52%;
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}

.dial__word.i01 .dial__word-strike {
  transform: scaleX(1);
  opacity: 0.85;
}

/* --- Year ruler: twelve ticks on one baseline --------------------------- */

.yearline {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  border-top: 1px solid var(--hair);
  padding-top: 0.9rem;
}

.yearline__caption {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  color: var(--paper-faint);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.yearline__caption span {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
}

.yearline__track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.yearline__tick {
  display: grid;
  grid-template-rows: 1rem 1.5rem 1.25rem 1.25rem;
  align-items: center;
  justify-items: center;
  padding: 0.35rem 0;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-soft),
    background var(--t-fast) var(--ease-soft);
}

.yearline__tick:hover,
.yearline__tick:focus-visible {
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.yearline__num {
  font-family: var(--font-num);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--paper-faint);
}

.yearline__stem {
  width: 1px;
  height: 1.25rem;
  background: var(--hair-strong);
  transition: height var(--t-mid) var(--ease-out),
    background var(--t-fast) var(--ease-soft);
}

.yearline__tick:hover .yearline__stem,
.yearline__tick:focus-visible .yearline__stem {
  height: 1.5rem;
  background: var(--accent);
}

.yearline__name,
.yearline__verb {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.25rem;
}

.yearline__name {
  color: var(--paper-dim);
}

.yearline__verb {
  color: var(--paper);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Steps
   ------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
}

.steps__item {
  display: grid;
  grid-template-rows: 1.75rem 2.25rem auto;
  gap: 0.5rem;
  padding: 1.75rem 1.5rem 2rem;
  background: var(--ink);
}

.steps__num {
  font-family: var(--font-num);
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}

.steps__title {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.steps__text {
  color: var(--paper-dim);
  font-size: 0.9rem;
  line-height: 1.95;
}

/* -------------------------------------------------------------------------
   Month plates — the twelve-month grid
   ------------------------------------------------------------------------- */

.plate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
}

.plate {
  position: relative;
  display: grid;
  /* Fixed rows keep 十一月 and 十二月 on exactly the same baselines as 一月. */
  grid-template-rows: 2.6rem 3.4rem minmax(3.4rem, 1fr) 1.5rem;
  gap: 0.6rem;
  padding: 1.35rem 1.1rem 1.25rem;
  background: var(--ink);
  text-decoration: none;
  transition: background var(--t-mid) var(--ease-soft);
}

.plate::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--t-mid) var(--ease-out);
}

.plate:hover,
.plate:focus-visible {
  background: var(--ink-raised);
}

.plate:hover::after,
.plate:focus-visible::after {
  transform: scaleY(1);
}

.plate__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.plate__index {
  font-family: var(--font-num);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--paper-faint);
}

.plate__name {
  /* One fixed box wide enough for 十一月 / 十二月 — never wraps, never shifts. */
  min-width: 4em;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--paper-dim);
}

.plate__moon {
  display: flex;
  align-items: center;
  margin-left: auto;
  opacity: 0.85;
  transition: opacity var(--t-mid) var(--ease-soft);
}

.plate:hover .plate__moon {
  opacity: 1;
}

.plate__verb {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-self: start;
  font-size: clamp(1.55rem, 4.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 3.4rem;
  white-space: nowrap;
}

.plate__verb-text {
  position: relative;
}

/* The struck word. Rests as an underline; sweeps across on reveal. */
.plate__strike {
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: 50%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(1) translateY(0.62em);
  transform-origin: left center;
  opacity: 0.45;
  transition: opacity var(--t-fast) var(--ease-soft);
}

.plate:hover .plate__strike,
.plate:focus-visible .plate__strike,
.ledger__row:hover .plate__strike,
.ledger__row:focus-visible .plate__strike {
  opacity: 1;
}

.plate__effect {
  color: var(--paper-dim);
  font-size: 0.84rem;
  line-height: 1.85;
}

.plate__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: end;
  color: var(--accent-bright);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.plate__more .icon {
  width: 0.9rem;
  transition: transform var(--t-fast) var(--ease-soft);
}

.plate:hover .plate__more .icon {
  transform: translateX(0.25rem);
}

/* Moon disc */
.moon {
  --moon-size: 2.25rem;
  display: block;
  width: var(--moon-size);
  height: var(--moon-size);
  flex: 0 0 auto;
}

.moon__dark {
  fill: var(--moon-dark);
}

.moon__light {
  fill: var(--moon-lit);
}

.moon__rim {
  fill: none;
  stroke: var(--hair-strong);
  stroke-width: 1.5;
}

/* -------------------------------------------------------------------------
   Feature / promo / terms / join
   ------------------------------------------------------------------------- */

.band--feature {
  display: grid;
  gap: 1.75rem;
}

.feature__label {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  color: var(--paper-dim);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}

.feature__label .rule {
  align-self: center;
}

.feature__label p span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
}

.feature__body {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
}

.feature__title {
  font-size: clamp(1.4rem, 4.2vw, 2.1rem);
  line-height: 1.6;
}

.feature__text {
  color: var(--paper-dim);
  font-family: var(--font-mincho);
  font-size: 1.02rem;
  line-height: 2.15;
}

.band--prologue,
.band--quiz,
.band--world,
.band--join {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.promo,
.join {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  max-width: 40rem;
}

.promo__title,
.join__title {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  line-height: 1.45;
}

.promo__text,
.join__text {
  color: var(--paper-dim);
  line-height: 2.05;
}

.promo .btn,
.join .btn {
  margin-top: 0.5rem;
}

.promo__figure {
  position: relative;
  justify-self: center;
  width: min(64vw, 17rem);
  aspect-ratio: 1;
}

.orbit,
.orbit__moon {
  position: absolute;
  border-radius: 50%;
}

.orbit {
  inset: 0;
  border: 1px solid var(--hair);
}

.orbit::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid var(--hair-soft);
  border-radius: 50%;
}

.orbit__moon {
  top: 50%;
  left: 50%;
  width: 34%;
  height: 34%;
  transform: translate(-50%, -50%);
  background: var(--moon-lit);
  box-shadow: 0 0 4rem rgba(214, 222, 230, 0.2);
}

.term-list {
  display: grid;
  border-top: 1px solid var(--hair-soft);
}

.term {
  display: grid;
  gap: 0.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--hair-soft);
}

.term__name {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

.term__reading {
  display: block;
  margin-top: 0.2rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.term__line {
  color: var(--paper-dim);
  font-size: 0.92rem;
  line-height: 2;
}

.band--join {
  border-top: 1px solid var(--hair);
}

/* -------------------------------------------------------------------------
   Month ledger (/months/)
   ------------------------------------------------------------------------- */

.ledger {
  border-top: 1px solid var(--hair);
}

/* Six columns will not fit a phone, so the row folds into three lines and
   unfolds into a single ledger line from tablet up. Named areas keep the
   markup identical at both sizes. */
.ledger__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.75rem 1.5rem;
  grid-template-areas:
    "idx name moon go"
    "verb verb verb verb"
    "eff eff eff eff";
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 1rem 0.5rem 1.1rem;
  border-bottom: 1px solid var(--hair-soft);
}

.ledger__head {
  display: none;
  gap: 0.75rem;
  padding: 0 0.5rem 0.6rem;
  border-bottom: 1px solid var(--hair-soft);
  color: var(--paper-faint);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

.ledger__index { grid-area: idx; }
.ledger__name { grid-area: name; }
.ledger__moon { grid-area: moon; }
.ledger__verb { grid-area: verb; }
.ledger__effect { grid-area: eff; }
.ledger__go { grid-area: go; }

.ledger__row {
  position: relative;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-soft);
}

.ledger__row::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--t-mid) var(--ease-out);
}

.ledger__row:hover,
.ledger__row:focus-visible {
  background: var(--ink-raised);
}

.ledger__row:hover::after,
.ledger__row:focus-visible::after {
  transform: scaleY(1);
}

.ledger__index {
  font-family: var(--font-num);
  font-size: 0.74rem;
  color: var(--paper-faint);
  letter-spacing: 0.08em;
}

.ledger__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--paper-dim);
}

.ledger__moon {
  display: flex;
  justify-content: flex-end;
}

.ledger__moon .moon {
  --moon-size: 1.6rem;
}

.ledger__verb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  margin-top: 0.2rem;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ledger__effect {
  margin-top: 0.35rem;
  color: var(--paper-dim);
  font-size: 0.86rem;
  line-height: 1.75;
}

.ledger__go {
  display: flex;
  justify-content: flex-end;
  color: var(--accent);
}

.ledger__go .icon {
  transition: transform var(--t-fast) var(--ease-soft);
}

.ledger__row:hover .ledger__go .icon {
  transform: translateX(0.3rem);
}

.band--ledger .hint {
  margin-top: 1.25rem;
}

/* -------------------------------------------------------------------------
   Month detail
   ------------------------------------------------------------------------- */

.month {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2rem var(--gutter) 0;
}

.month__top {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

/* Where you are, out of twelve. Twelve targets cannot be both reachable and
   large enough on a phone, so small screens rely on the 12／12 readout and the
   prev / index / next bar instead, and the rail returns from tablet up. */
.month-rail {
  display: none;
  align-items: center;
  gap: 0.85rem;
  max-width: 100%;
}

.month-rail__caption {
  flex: 0 0 auto;
  color: var(--paper-faint);
  font-family: var(--font-num);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.month-rail__track {
  display: flex;
  gap: 2px;
}

.month-rail__item {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.5rem;
  border-bottom: 1px solid var(--hair);
  color: var(--paper-faint);
  font-family: var(--font-num);
  font-size: 0.6rem;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft);
}

.month-rail__item:hover {
  color: var(--paper);
  border-bottom-color: var(--paper-faint);
}

.month-rail__item.is-current {
  color: var(--accent-bright);
  border-bottom: 2px solid var(--accent);
}

.month__hero {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(2.5rem, 8vw, 5rem) 0;
  border-bottom: 1px solid var(--hair);
  /* The moon's halo is allowed to bleed, but never past the page. */
  overflow: hidden;
}

.month__disc {
  position: relative;
  justify-self: start;
}

.month__disc::before {
  content: "";
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(214, 222, 230, 0.1),
    transparent 68%
  );
}

.month__disc .moon {
  --moon-size: min(52vw, 15rem);
  position: relative;
}

.month__copy {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}

.month__index {
  font-family: var(--font-num);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--paper-faint);
}

.month__name {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.month__caption {
  margin-top: 0.75rem;
  color: var(--accent-bright);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.month h1 {
  position: relative;
  padding-bottom: 0.14em;
  font-size: clamp(3.25rem, 13vw, 6.5rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* The correction rule is exactly as wide as the word it takes out — never a
   decorative bar of some other length. */
.month h1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.04em;
  bottom: 0;
  height: 4px;
  background: var(--accent);
  transform-origin: left center;
}

.month__effect {
  max-width: 32rem;
  margin-top: 1rem;
  color: var(--paper-dim);
  font-size: clamp(1rem, 3vw, 1.2rem);
  line-height: 1.95;
}

.month__life {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
  border-bottom: 1px solid var(--hair-soft);
}

.month__life-text {
  margin-top: 1.5rem;
  max-width: 40rem;
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  line-height: 1.85;
}

.month__cta {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: clamp(2rem, 5vw, 3rem) 0;
  border-bottom: 1px solid var(--hair-soft);
}

.month__cta h2 {
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

.month__cta p {
  color: var(--paper-dim);
  font-size: 0.9rem;
}

.month__cta .btn {
  margin-top: 0.5rem;
}

.month__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2.5rem 0 1rem;
  border: 1px solid var(--hair-soft);
}

.month__nav-item {
  display: grid;
  gap: 0.3rem;
  align-content: center;
  justify-items: center;
  min-height: 5.5rem;
  padding: 0.75rem 0.5rem;
  border-right: 1px solid var(--hair-soft);
  text-align: center;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-soft);
}

.month__nav-item:last-child {
  border-right: 0;
}

.month__nav-item:hover {
  background: var(--ink-raised);
}

.month__nav-item span {
  color: var(--paper-faint);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.month__nav-item strong {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   In-world records — the same three forms a reader can write
   ------------------------------------------------------------------------- */

.month__records {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
  border-bottom: 1px solid var(--hair-soft);
}

.record-cards {
  display: grid;
  gap: 1px;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
}

.record-card {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: 1.4rem 1.25rem 1.6rem;
  background: var(--ink);
}

.record-card__form {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--accent-bright);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.record-card__num {
  color: var(--paper-faint);
  font-family: var(--font-num);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.record-card__body {
  display: grid;
  gap: 0.35rem;
  font-family: var(--font-mincho);
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--paper-dim);
}

.record-card__line {
  display: block;
}

/* -------------------------------------------------------------------------
   World page
   ------------------------------------------------------------------------- */

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: var(--shell-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.jump__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--hair);
  color: var(--paper-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft);
}

.jump__link:hover {
  border-color: var(--accent);
  color: var(--paper);
}

.entries {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 48rem;
}

.entry {
  display: grid;
  gap: 0.85rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--hair);
}

.entry__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(1.1rem, 3.2vw, 1.35rem);
  letter-spacing: 0.06em;
}

.entry__head::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  margin-left: -1.3rem;
  background: var(--accent);
}

.entry__line {
  color: var(--paper-dim);
  font-size: 0.98rem;
  line-height: 2.05;
}

.notes {
  display: grid;
  gap: 1.1rem;
  max-width: 46rem;
}

.notes__item {
  display: flex;
  gap: 0.9rem;
}

.notes__mark {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1px;
  margin-top: 1rem;
  background: var(--accent);
}

.notes__item p {
  color: var(--paper-dim);
  font-size: 0.98rem;
  line-height: 2.05;
}

/* The fixed order, stated once as a single unbroken line. */
.strip {
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--hair);
  padding-top: 1rem;
}

.strip__caption {
  margin-bottom: 0.75rem;
  color: var(--paper-faint);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.strip__track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
}

.strip__cell {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  padding: 0.7rem 0.3rem 0.8rem;
  background: var(--ink);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-soft);
}

.strip__cell:hover {
  background: var(--ink-raised);
}

.strip__num {
  color: var(--paper-faint);
  font-family: var(--font-num);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.strip__verb {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   People page
   ------------------------------------------------------------------------- */

.person-list {
  display: grid;
  gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
}

.person {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem 1.5rem 2rem;
  background: var(--ink);
}

/* A frame, not an illustration: real artwork drops in at the same ratio. */
.portrait {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 15rem;
  justify-self: center;
  background: linear-gradient(160deg, var(--ink-high), var(--ink-sunken));
  border: 1px solid var(--hair);
  overflow: hidden;
}

.portrait__shape {
  width: 62%;
  height: auto;
  opacity: 0.35;
}

.portrait__head,
.portrait__body {
  fill: var(--hair-strong);
}

.portrait__corner {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--accent);
}

.portrait__corner--tl {
  top: 0.55rem;
  left: 0.55rem;
  border-right: 0;
  border-bottom: 0;
}

.portrait__corner--br {
  right: 0.55rem;
  bottom: 0.55rem;
  border-left: 0;
  border-top: 0;
}

.portrait__note {
  position: absolute;
  bottom: 0.9rem;
  color: var(--paper-faint);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
}

.person__copy {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.person__role {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--paper-dim);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.person__alias {
  color: var(--accent-bright);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.person__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: clamp(1.5rem, 5vw, 2rem);
  letter-spacing: 0.1em;
}

.person__reading {
  color: var(--paper-faint);
  font-family: var(--font-num);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.person__line {
  color: var(--paper-dim);
  font-family: var(--font-mincho);
  font-size: 1rem;
  line-height: 2.1;
}

/* -------------------------------------------------------------------------
   Choice — the always-visible selection control that replaces native selects
   ------------------------------------------------------------------------- */

.choice {
  display: grid;
  gap: 0.5rem;
}

.choice__item {
  position: relative;
  display: block;
  cursor: pointer;
}

/* The input stays in the accessibility tree and keeps native arrow-key
   behaviour; only its default painting is removed. */
.choice__item input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.choice__box {
  position: relative;
  display: grid;
  gap: 0.2rem;
  height: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hair);
  background: var(--ink-raised);
  transition: border-color var(--t-fast) var(--ease-soft),
    background var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft);
}

.choice__item:hover .choice__box {
  border-color: var(--paper-faint);
}

.choice__item:has(input:checked) .choice__box {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: #fff;
}

/* The chosen card is marked the same way a lost verb is: with a red rule. */
.choice__item:has(input:checked) .choice__box::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--accent);
}

.choice__item:has(input:focus-visible) .choice__box {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.choice__key {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.choice__detail {
  color: var(--paper-dim);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.choice__item:has(input:checked) .choice__detail {
  color: var(--accent-bright);
}

.choice__note {
  color: var(--paper-dim);
  font-size: 0.78rem;
  line-height: 1.7;
  white-space: normal;
}

.choice__item:has(input:checked) .choice__note {
  color: var(--paper);
}

/* Twelve months: three across on small screens, six across from tablet. */
.choice--months {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.choice--months .choice__box {
  gap: 0.1rem;
  padding: 0.55rem 0.5rem;
  text-align: center;
  justify-items: center;
}

.choice--months .choice__key {
  font-size: 0.85rem;
}

.choice--months .choice__detail {
  font-size: 0.72rem;
}

/* Equal cells and single-line labels, so the grid stays a grid: no chip is
   taller than its neighbour because its text happened to wrap. */
.choice--chips {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.45rem;
}

.choice--chips .choice__box {
  align-content: center;
  min-height: 2.9rem;
  padding: 0.55rem 0.9rem;
}

.choice--chips .choice__key {
  font-size: 0.84rem;
  font-weight: 400;
  white-space: nowrap;
}

.prompt-set {
  display: grid;
  gap: 0.45rem;
}

/* The two answers that are not topics. */
.prompt-set__base {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 0.45rem;
  border-top: 1px solid var(--hair-soft);
}

.choice--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Four answers always sit two by two — never three across with one orphan. */
.choice--quad {
  grid-template-columns: minmax(0, 1fr);
}

.choice--quad .choice__box {
  min-height: 100%;
  padding: 0.85rem 1rem;
  align-content: center;
}

.choice--quad .choice__key {
  font-weight: 400;
  line-height: 1.7;
  white-space: normal;
}

.choice--cards {
  grid-template-columns: minmax(0, 1fr);
}

.choice--cards .choice__box {
  padding: 1rem 1.1rem;
}

/* -------------------------------------------------------------------------
   Quiz
   ------------------------------------------------------------------------- */

.quiz {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  max-width: var(--shell-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.quiz__question {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.quiz__legend {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--hair);
}

.quiz__num {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: 0.8rem;
  color: var(--accent);
}

.quiz__of {
  color: var(--paper-faint);
  font-size: 0.68rem;
}

.quiz__count {
  max-width: var(--shell-narrow);
  margin: 1rem auto 0;
  padding: 0 var(--gutter);
  text-align: right;
}

.quiz__ask {
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.6;
}

.quiz__submit {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.result {
  position: relative;
  max-width: var(--shell-narrow);
  margin: 3rem auto 0;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border: 1px solid var(--accent);
  background: var(--ink-raised);
  box-shadow: 0 1.5rem 4rem -2rem rgba(0, 0, 0, 0.9);
}

.result__title {
  margin: 0.6rem 0 1rem;
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 1.35;
}

.result__text {
  color: var(--paper-dim);
  line-height: 2;
  margin-bottom: 1.5rem;
}

.result pre {
  margin: 1.25rem 0 1.75rem;
  padding: 1.1rem;
  border: 1px solid var(--hair);
  background: var(--ink-sunken);
  font-family: var(--font-mincho);
  font-size: 0.92rem;
  line-height: 1.95;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.make-route .result {
  max-width: var(--shell);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* -------------------------------------------------------------------------
   Prologue
   ------------------------------------------------------------------------- */

.prologue {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem var(--gutter) 0;
}

.prologue__head {
  display: grid;
  gap: 0.9rem;
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}

.prologue__title {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 7vw, 3.2rem);
  letter-spacing: 0.06em;
  line-height: 1.5;
  overflow: hidden;
}

.prologue__title > span {
  display: block;
}

.prologue__meta {
  color: var(--paper-faint);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.reading-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgba(7, 8, 11, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
}

.reading-bar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.reading-bar__label {
  color: var(--paper-faint);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

.reading-bar strong {
  font-family: var(--font-num);
  font-size: 0.82rem;
  color: var(--accent-bright);
  min-width: 3ch;
  text-align: right;
}

.reading-bar progress {
  width: 100%;
  height: 2px;
  border: 0;
  appearance: none;
  background: var(--hair);
}

.reading-bar progress::-webkit-progress-bar {
  background: var(--hair);
}

.reading-bar progress::-webkit-progress-value {
  background: var(--accent);
}

.reading-bar progress::-moz-progress-bar {
  background: var(--accent);
}

.reading-action {
  display: block;
  margin: 2.25rem auto;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-bright);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.reading-action:hover {
  color: #fff;
}

.prologue__body {
  font-family: var(--font-mincho);
  font-size: clamp(1.02rem, 2.6vw, 1.12rem);
  line-height: 2.4;
}

.prologue__body p {
  margin: 0 0 2.1em;
  text-indent: 1em;
  /* Proper 禁則処理: a closing 」 or 。 is allowed to hang past the column
     rather than be pushed onto a line of its own. */
  line-break: strict;
}

.prologue__after {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 2.5rem 0 1rem;
  border-top: 1px solid var(--hair-soft);
}

/* -------------------------------------------------------------------------
   Record builder (/make/)
   ------------------------------------------------------------------------- */

.record {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Steps number themselves. A hidden step takes no number, so switching between
   a single month and a date range never leaves a gap in the sequence. */
.record__steps {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.25rem);
  counter-reset: record-step;
}

.record__step {
  display: grid;
  gap: 0.9rem;
  counter-increment: record-step;
}

.step-num::before {
  content: counter(record-step, decimal-leading-zero);
}

.record__legend {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  letter-spacing: 0.04em;
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-bright);
  font-family: var(--font-num);
  font-size: 0.78rem;
}

.record__optional {
  color: var(--paper-faint);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.record__hint {
  color: var(--paper-dim);
  font-size: 0.86rem;
}

.readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding-top: 0.35rem;
  color: var(--paper-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.readout strong {
  color: var(--accent-bright);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}

.range {
  display: grid;
  gap: 1.5rem;
}

[data-invalid="true"] .readout,
[data-invalid="true"] #record-range-readout {
  color: var(--accent-bright);
}

.range__label {
  margin-bottom: 0.55rem;
  color: var(--paper-dim);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.verb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.verb-chips li {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--hair);
  color: var(--paper-dim);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.verb-chips__more {
  border-color: transparent !important;
  color: var(--paper-faint) !important;
  padding-left: 0 !important;
}

/* How many years later the story ends. Two clicks for the common cases, a
   number for everything else — a hundred years is a legal answer. */
.years,
.custom-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
  color: var(--paper-dim);
  font-size: 0.85rem;
}

.custom-prompt {
  display: grid;
  gap: 0.45rem;
  max-width: 28rem;
}

.years input,
.custom-prompt input {
  min-height: 2.75rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--hair);
  border-radius: 0;
  background: var(--ink-raised);
  color: var(--paper);
  font-size: 0.95rem;
}

.years input {
  width: 5.5rem;
  font-family: var(--font-num);
  text-align: right;
}

.years input:focus-visible,
.custom-prompt input:focus-visible {
  border-color: var(--accent);
}

.custom-prompt label {
  color: var(--paper-faint);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.custom-prompt input::placeholder {
  color: var(--paper-faint);
}

/* A line of text that is quietly a door. Used where a heading has left
   something unsaid and the answer is one page away. */
.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--accent-bright);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: color var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft);
}

.quiet-link .icon {
  width: 1rem;
  transition: transform var(--t-mid) var(--ease-out);
}

.quiet-link:hover,
.quiet-link:focus-visible {
  color: #fff;
  border-bottom-color: var(--accent);
}

.quiet-link:hover .icon,
.quiet-link:focus-visible .icon {
  transform: translateX(0.3rem);
}

.person__trail {
  margin-top: 0.35rem;
}

/* Reads as a link, but keeps a full-height touch target around it. */
.linkish {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-bright);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.linkish::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.8rem;
  height: 1px;
  background: var(--accent);
}

.linkish:hover {
  color: #fff;
}

#record-body {
  width: 100%;
  min-height: 11rem;
  padding: 1rem;
  border: 1px solid var(--hair);
  border-radius: 0;
  background: var(--ink-raised);
  font-family: var(--font-mincho);
  font-size: 1rem;
  line-height: 2;
  resize: vertical;
}

#record-body::placeholder {
  color: var(--paper-faint);
}

#record-body:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

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

.counter {
  font-family: var(--font-num);
  font-size: 0.76rem;
  color: var(--paper-faint);
  white-space: nowrap;
}

.counter[data-over="true"] {
  color: var(--accent-bright);
}

.record__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.record__submit .status-text {
  flex-basis: 100%;
}

.submission {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hair);
}

.submission__title {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
}

.submission__text,
.submission__receipt {
  color: var(--paper-dim);
  line-height: 1.9;
}

.submission__field {
  display: grid;
  gap: 0.35rem;
  color: var(--paper);
  font-size: 0.9rem;
}

.submission__field span {
  color: var(--paper-faint);
  font-size: 0.74rem;
}

#submission-name {
  width: min(100%, 28rem);
  min-height: 2.9rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hair);
  background: var(--ink-raised);
  color: var(--paper);
}

.submission__check {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  max-width: 48rem;
  color: var(--paper-dim);
  font-size: 0.84rem;
  line-height: 1.75;
}

.submission__check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.28rem;
  accent-color: var(--accent);
}

.submission__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submission__human {
  min-height: 4.1rem;
}

.submission__receipt {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--hair);
  background: var(--ink-raised);
}

.submission__receipt strong {
  color: var(--accent-bright);
  font-family: var(--font-num);
  letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------
   One idea drives every animation on this site: a word is struck out, and the
   year advances by one twelfth. Nothing moves for decoration alone, and every
   page is complete and legible with animation and JavaScript switched off.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes line-in {
    from {
      transform: translateY(105%);
    }
    to {
      transform: none;
    }
  }

  @keyframes strike-through {
    0% {
      transform: scaleX(0) translateY(0);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    55% {
      transform: scaleX(1) translateY(0);
      opacity: 1;
    }
    100% {
      transform: scaleX(1) translateY(0.62em);
      opacity: 0.45;
    }
  }

  @keyframes wipe-x {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  @keyframes drift {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-1.5rem, 2rem, 0);
    }
  }

  @keyframes cue {
    0%,
    100% {
      transform: scaleY(0.4);
      opacity: 0.4;
    }
    50% {
      transform: scaleY(1);
      opacity: 1;
    }
  }

  /* Above-the-fold: pure CSS, so nothing depends on JavaScript timing. */
  .enter {
    animation: rise 640ms var(--ease-out) both;
  }

  .enter-line > span {
    animation: line-in 780ms var(--ease-out) both;
  }

  .hero__eyebrow {
    animation-delay: 60ms;
  }
  .hero__line:nth-child(1) > span {
    animation-delay: 160ms;
  }
  .hero__line:nth-child(2) > span {
    animation-delay: 320ms;
  }
  .hero__premise {
    animation-delay: 520ms;
  }
  .hero__example {
    animation-delay: 620ms;
  }
  .hero .btn-row {
    animation-delay: 700ms;
  }
  .dial {
    animation-delay: 260ms;
    animation-duration: 1100ms;
  }
  .yearline {
    animation-delay: 820ms;
  }
  .hero__scroll {
    animation-delay: 1100ms;
  }

  .hero__scroll i {
    transform-origin: top center;
    animation: cue 3.2s var(--ease-soft) 1.6s infinite;
  }

  .page-head__eyebrow,
  .prologue__eyebrow {
    animation-delay: 40ms;
  }
  .page-head__title > span,
  .prologue__title > span {
    animation-delay: 140ms;
  }
  .page-head__lede,
  .prologue__meta {
    animation-delay: 340ms;
  }
  .page-head .notice {
    animation-delay: 440ms;
  }

  .month__disc {
    animation-delay: 80ms;
  }
  .month__index {
    animation-delay: 160ms;
  }
  .month__name {
    animation-delay: 220ms;
  }
  .month__caption {
    animation-delay: 300ms;
  }
  .month h1 {
    animation: rise 720ms var(--ease-out) 340ms both;
  }
  .month h1::after {
    animation: wipe-x 760ms var(--ease-out) 620ms both;
  }
  .month__effect {
    animation-delay: 520ms;
  }

  .hero__glow {
    animation: drift 26s var(--ease-soft) infinite alternate;
  }

  /* --- 暦環: the year turning, one twelfth at a time --------------------- */

  @keyframes dial-hand {
    from {
      transform: rotate(30deg);
    }
    to {
      transform: rotate(390deg);
    }
  }

  @keyframes dial-tick {
    0%,
    7% {
      transform: var(--place) scaleY(1);
      background-color: var(--accent);
    }
    8.3334%,
    100% {
      transform: var(--place) scaleY(0.5);
      background-color: var(--hair-strong);
    }
  }

  @keyframes dial-word {
    0% {
      opacity: 0;
      transform: translateY(0.5rem);
    }
    1.6% {
      opacity: 1;
      transform: none;
    }
    7.2% {
      opacity: 1;
      transform: none;
    }
    8.3334%,
    100% {
      opacity: 0;
      transform: translateY(-0.35rem);
    }
  }

  @keyframes dial-strike {
    0%,
    2.2% {
      transform: scaleX(0);
      opacity: 0;
    }
    2.7% {
      opacity: 1;
    }
    5% {
      transform: scaleX(1);
      opacity: 1;
    }
    7.2% {
      transform: scaleX(1);
      opacity: 1;
    }
    8.3334%,
    100% {
      transform: scaleX(1);
      opacity: 0;
    }
  }

  .dial__hand {
    animation: dial-hand var(--cycle) steps(12, end) infinite;
  }

  .dial__tick {
    animation: dial-tick var(--cycle) linear infinite;
    animation-delay: calc(var(--i) * var(--slot));
  }

  .dial__word {
    animation: dial-word var(--cycle) linear infinite;
    animation-delay: calc(var(--i) * var(--slot));
  }

  .dial__word-strike {
    animation: dial-strike var(--cycle) var(--ease-out) infinite;
    animation-delay: calc(var(--i) * var(--slot));
  }

  /* Below-the-fold: revealed by IntersectionObserver, never before. */
  html[data-motion="on"] .reveal {
    opacity: 0;
    transform: translateY(18px);
  }

  html[data-motion="on"] .reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity var(--t-slow) var(--ease-out),
      transform var(--t-slow) var(--ease-out);
  }

  /* Twelve plates arrive in calendar order. */
  html[data-motion="on"] .plate.is-revealed,
  html[data-motion="on"] .ledger__row.is-revealed,
  html[data-motion="on"] .steps__item.is-revealed,
  html[data-motion="on"] .term.is-revealed {
    transition-delay: calc(var(--stagger-step, 45ms) * var(--stagger-index, 0));
  }

  html[data-motion="on"] .plate.is-revealed .plate__strike,
  html[data-motion="on"] .ledger__row.is-revealed .plate__strike {
    animation: strike-through 900ms var(--ease-out)
      calc(220ms + var(--stagger-step, 45ms) * var(--stagger-index, 0)) both;
  }

  .site-header__progress i {
    transition: transform 120ms linear;
  }

  .page-enter {
    animation: rise 420ms var(--ease-out) both;
  }
}

/* Belt and braces: if anything above slipped through, force the rest state.
   The dial keeps its meaning without turning — 一月 is shown with its verb
   already struck out, which is the whole premise in one still frame. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .dial__tick.i01 {
    background-color: var(--accent);
    transform: var(--place) scaleY(1);
  }
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (min-width: 30rem) {
  .choice--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 34rem) {
  .choice--months {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .person {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }

  .portrait {
    justify-self: start;
  }

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

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

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

}

@media (min-width: 48rem) {
  :root {
    --gutter: 2rem;
    --header-h: 4.25rem;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    max-height: none;
    overflow: visible;
    visibility: visible;
    background: transparent;
    border-bottom: 0;
  }

  .site-nav__link {
    display: grid;
    gap: 0.1rem;
    align-content: center;
    justify-items: center;
    min-height: var(--header-h);
    padding: 0 0.85rem;
    border-bottom: 0;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
  }

  .site-nav__en {
    min-width: 0;
    font-size: 0.5rem;
    letter-spacing: 0.18em;
  }

  .site-nav__link:last-child {
    margin-left: 0.65rem;
    padding: 0 1.05rem;
    border: 1px solid var(--accent);
    color: var(--accent-bright);
  }

  .site-nav__link:last-child .site-nav__en {
    color: var(--accent);
  }

  .site-nav__link:last-child .site-nav__label::after {
    display: none;
  }

  .site-nav__link:last-child:hover {
    background: var(--accent-wash);
  }

  .hero {
    padding: clamp(2.5rem, 7vw, 4.5rem) 0 3.5rem;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
  }

  .hero__copy {
    grid-column: 1;
    grid-row: 1;
  }

  .hero .dial {
    grid-column: 2;
    grid-row: 1;
  }

  .hero__title {
    margin: 1.4rem 0 1.75rem;
  }

  .hero .btn-row {
    margin-top: 2rem;
  }

  .hero__scroll {
    display: inline-flex;
  }

  /* Once the dial shares the row, the headline is sized by its own column and
     not by the window, so the two lines stay whole at every width. */
  .hero__copy {
    container-type: inline-size;
  }

  .hero__title {
    font-size: clamp(1.9rem, 4.6vw, 4.4rem);
    font-size: clamp(1.9rem, 8.6cqw, 4.4rem);
  }

  .dial {
    --dial-size: min(34vw, 22rem);
  }

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

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

  .choice--months {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ledger__head,
  .ledger__row {
    display: grid;
    grid-template-columns: 3rem 5.5rem 2.5rem minmax(6rem, 8rem) minmax(0, 1fr) 2rem;
    grid-template-areas: "idx name moon verb eff go";
    align-items: center;
    gap: 1.25rem;
    padding: 0.85rem 0.75rem;
  }

  .ledger__head {
    padding-top: 0;
    padding-bottom: 0.6rem;
  }

  .ledger__row {
    min-height: 4.5rem;
  }

  .ledger__verb {
    margin-top: 0;
    font-size: 1.3rem;
  }

  .ledger__effect {
    margin-top: 0;
  }

  .band--feature {
    grid-template-columns: minmax(9rem, 0.32fr) minmax(0, 1fr);
    gap: 2.5rem;
  }

  .feature__label {
    display: block;
  }

  .feature__label .rule {
    margin-bottom: 0.9rem;
  }

  .band--prologue {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.42fr);
  }

  .term-list {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .person {
    grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr);
    gap: 2.75rem;
    padding: 2.25rem 2rem 2.5rem;
  }

  .term {
    grid-template-columns: minmax(10rem, 0.32fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }

  .month__top {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
  }

  .month-rail {
    display: flex;
    justify-self: end;
  }

  .month__hero {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: 3rem;
  }

  .range {
    gap: 1.75rem;
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .site-footer__rule {
    grid-column: 1 / -1;
  }

  .site-footer__meta {
    grid-column: 1 / -1;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hair-soft);
  }
}

@media (min-width: 64rem) {
  /* Three side by side only once each column can hold a record without
     shredding it into a dozen lines. */
  .record-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .choice--months {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .choice--months .choice__box {
    padding-inline: 0.3rem;
  }

  .choice--cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .yearline__tick {
    grid-template-rows: 1rem 2rem 1.35rem 1.35rem;
  }

  .yearline__name,
  .yearline__verb {
    font-size: 0.76rem;
    line-height: 1.35rem;
  }

  .dial {
    --dial-size: min(32vw, 25rem);
  }
}