html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none
}
html { scroll-behavior: auto }

body {
  --top: clamp(4.5rem, 11svh, 6.5rem);
  --bottom: clamp(3rem, 8svh, 4.5rem);
  --right: max(var(--gutter), 6rem)
}

main {
  position: fixed;
  inset: 0;
  overflow: hidden
}

main > section {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: var(--top) var(--right) var(--bottom) var(--gutter);
  background: var(--paper);
  visibility: hidden
}
main > section:target,
main:not(:has(> section:target)) > section:first-of-type {
  visibility: visible;
  z-index: 1
}
main > section:focus { outline: none }

.bar { position: fixed; z-index: 40 }

.bar, .rail, .foot { color: var(--ink); transition: color 300ms var(--snap) }
body:has(main > section[data-ground="ink"]:target) :is(.bar, .rail, .foot) { color: var(--paper) }

.foot {
  position: fixed;
  left: var(--gutter);
  bottom: 0;
  z-index: 40;
  gap: 0.25rem 1.5rem;
  padding: 0 0 1rem;
  border: 0;
  background: none;
  font-size: 0.75rem;
  opacity: 0.66
}
.foot a { color: inherit }

.rail {
  position: fixed;
  right: 1rem;
  top: 50%;
  z-index: 40;
  translate: 0 -50%
}
.rail ol { display: grid }
.rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  font-family: var(--mincho);
  font-weight: 800;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none
}
.rail-num { opacity: 0.5; transition: opacity 200ms var(--snap), color 200ms var(--snap) }
.rail-name {
  position: absolute;
  right: 100%;
  font-family: var(--gothic);
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  translate: 0.5rem 0;
  pointer-events: none;
  transition: opacity 200ms var(--snap), translate 200ms var(--snap)
}
.rail a:hover .rail-num, .rail a:focus-visible .rail-num { opacity: 1 }
.rail a:hover .rail-name, .rail a:focus-visible .rail-name { opacity: 1; translate: 0 0 }
.rail a::before {
  content: "";
  width: 0.75rem;
  height: 2px;
  background: currentColor;
  opacity: 0;
  order: 2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--snap), opacity 300ms var(--snap)
}

body:not(:has(main > section:target)) .rail li:first-child .rail-num,
.rail a[aria-current] .rail-num { opacity: 1; color: var(--blood) }
body:not(:has(main > section:target)) .rail li:first-child a::before,
.rail a[aria-current]::before { opacity: 1; transform: none; background: var(--blood) }
body:has(#top:target) .rail a[href="#top"] .rail-num,
body:has(#bankai:target) .rail a[href="#bankai"] .rail-num,
body:has(#cuts:target) .rail a[href="#cuts"] .rail-num,
body:has(#work:target) .rail a[href="#work"] .rail-num,
body:has(#silence:target) .rail a[href="#silence"] .rail-num,
body:has(#stack:target) .rail a[href="#stack"] .rail-num,
body:has(#senbonzakura:target) .rail a[href="#senbonzakura"] .rail-num,
body:has(#gate:target) .rail a[href="#gate"] .rail-num { opacity: 1; color: var(--blood) }

.passage {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden
}
.passage.on { visibility: visible; pointer-events: auto }

.passage-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--paper-line) 2px, transparent 2px),
    linear-gradient(90deg, var(--paper-line) 2px, transparent 2px);
  background-size: 5.5rem 6.5rem
}
.passage-left { left: 0; right: 50%; width: auto; border-right: 2px solid var(--blood); background-position: right center; transform: translateX(-101%) }
.passage-right { left: 50%; right: 0; width: auto; border-left: 2px solid var(--blood); background-position: left center; transform: translateX(101%) }
.passage .rope { top: 50%; margin-top: -0.375rem }

.passage-seam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: var(--paper);
  box-shadow: 0 0 40px 12px var(--paper-glow), 0 0 120px 40px var(--paper-glow);
  opacity: 0
}

.passage-kanji {
  position: relative;
  padding: 1.25rem 0.75rem;
  background: var(--ink);
  border: 2px solid var(--blood);
  writing-mode: vertical-rl;
  font-family: var(--brush);
  font-size: clamp(2.25rem, 7svh, 4rem);
  line-height: 1.1;
  letter-spacing: 0.15em;
  color: var(--paper);
  opacity: 0
}

.cover {
  display: grid;
  grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 2.5rem;
  isolation: isolate
}

.poem {
  align-self: start;
  margin-top: 4rem;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--mincho);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-soft)
}

.getsuga {
  position: absolute;
  left: 46%;
  top: 13%;
  width: 57%;
  z-index: -1;
  overflow: visible;
  transition: translate 700ms var(--snap)
}
.getsuga-body { fill: var(--ink) }
.getsuga-edge { fill: none; stroke: var(--blood); stroke-width: 7; stroke-linecap: round }

.cover-text { display: grid; gap: clamp(1rem, 2.6svh, 1.5rem) }

.name {
  display: flex;
  align-items: flex-start;
  font-family: var(--mincho);
  font-weight: 800;
  font-size: clamp(4rem, min(15vw, 24svh), 12.5rem);
  line-height: 0.82;
  padding-bottom: 0.14em;
  letter-spacing: -0.03em;
  transition: translate 700ms var(--snap)
}

.seal {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin: 0.4rem 0 0 0.75rem;
  background: var(--blood);
  color: var(--paper);
  font-family: var(--brush);
  font-weight: 400;
  font-size: clamp(1.4rem, min(3.2vw, 5svh), 2.6rem);
  letter-spacing: 0;
  line-height: 1;
  rotate: 4deg
}

.lede {
  max-width: 52ch;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.6
}

.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem }

.action {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  clip-path: var(--cut);
  transition: translate 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms var(--snap), background-color 200ms var(--snap)
}
.action:hover { text-decoration: none }
.action:focus-visible { clip-path: none }

.action-primary { background: var(--ink); color: var(--paper); box-shadow: inset 0 -3px 0 var(--ink) }
.action-primary:hover { box-shadow: inset 0 -3px 0 var(--blood) }

.action-secondary { position: relative; isolation: isolate; background: var(--ink-soft) }
.action-secondary::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--paper);
  clip-path: polygon(0 0, calc(100% - 9.4px) 0, 100% 9.4px, 100% 100%, 0 100%);
  transition: background-color 200ms var(--snap)
}
.action-secondary:hover::before { background: color-mix(in srgb, var(--blood) 14%, var(--paper)) }

.figure {
  justify-self: end;
  position: relative;
  z-index: 1;
  width: min(100%, 30rem, 60svh);
  rotate: -2deg;
  transition: translate 700ms var(--snap)
}

.figure img {
  width: 100%;
  border: 3px solid var(--ink);
  filter: grayscale(1) contrast(1.12);
  transition: filter 420ms var(--snap)
}
.figure:hover img { filter: none }

.figure figcaption {
  margin-top: 0.75rem;
  font-family: var(--mincho);
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-align: right
}

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4rem;
  background: var(--ink);
  color: var(--paper)
}

.spread-text { position: relative; z-index: 1; display: grid; gap: clamp(1.25rem, 4svh, 2.5rem); order: -1 }

.spread-kanji {
  position: relative;
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--brush);
  font-size: clamp(7rem, min(17vw, 34svh), 15rem);
  line-height: 1
}

.statement {
  max-width: 24ch;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.6rem, min(4.4vw, 7svh), 4rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance
}

.spread-slash {
  position: absolute;
  left: -20%;
  top: 46%;
  width: 140%;
  height: 14px;
  background: var(--blood);
  rotate: -9deg;
  transform: translateX(-120%);
  pointer-events: none
}

.spread-scar {
  position: absolute;
  left: -20%;
  top: 46%;
  width: 140%;
  height: 1px;
  margin-top: 7px;
  background: var(--blood);
  rotate: -9deg;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none
}

.page { display: grid }

.page-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 0
}

.panel {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  background: var(--ink)
}
.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.18);
  transition: filter 420ms var(--snap), scale 900ms var(--snap)
}
.panel:hover img { filter: none; scale: 1.04 }

.panel-hollow { grid-column: 5 / 13; grid-row: 1 }
.panel-cat { grid-column: 1 / 5; grid-row: 1 / 3 }
.panel-ice { grid-column: 5 / 10; grid-row: 2 }
.panel-nel { grid-column: 10 / 13; grid-row: 2 }

.panel-hollow img { object-position: 50% 36% }
.panel-cat img { object-position: 50% 30% }
.panel-ice img { object-position: 50% 42%; filter: grayscale(1) contrast(1.05) brightness(0.9) }
.panel-nel img { object-position: 46% 34% }

.narration {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: 21ch;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--mincho);
  font-size: 0.9375rem;
  line-height: 1.45
}

.sfx {
  position: absolute;
  right: 0.75rem;
  top: 0.25rem;
  font-family: var(--brush);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  rotate: -8deg
}

.roster { display: flex; flex-direction: column; justify-content: safe center }

.divisions { margin-top: clamp(1rem, 3svh, 2.5rem); max-width: 72rem }

.division { border-top: 1px solid var(--ink-line) }
.division:last-child { border-bottom: 1px solid var(--ink-line) }

.division summary {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding-block: clamp(0.4rem, 1.5svh, 0.9rem);
  list-style: none;
  cursor: pointer
}
.division summary::-webkit-details-marker { display: none }
.division summary:focus-visible { outline-offset: -2px }

.lozenge {
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(2.25rem, 5.5svh, 3rem);
  height: clamp(2.25rem, 5.5svh, 3rem);
  border: 2px solid var(--ink);
  rotate: 45deg;
  transition: background-color 180ms var(--snap), color 180ms var(--snap)
}
.lozenge span { rotate: -45deg; font-family: var(--brush); font-size: clamp(1.1rem, 2.8svh, 1.5rem); line-height: 1 }

.division summary:hover .lozenge, details[open] .lozenge { background: var(--ink); color: var(--paper) }

.division-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem }

.division-name {
  position: relative;
  font-family: var(--mincho);
  font-weight: 800;
  font-size: clamp(1.3rem, min(2.4vw, 4svh), 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em
}

.division-name::after {
  content: "";
  position: absolute;
  left: -0.2em;
  right: -0.4em;
  bottom: 0.05em;
  height: 3px;
  background: var(--blood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--snap)
}
.division summary:hover .division-name::after,
details[open] .division-name::after,
.division.struck .division-name::after { transform: scaleX(1) }

.division-meta { font-size: 0.9375rem; color: var(--ink-soft) }

.division-body {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 0 0 clamp(0.75rem, 2.4svh, 1.5rem) 6rem
}

.release {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem
}
.release div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem }
.release dt { font-family: var(--mincho); font-weight: 800 }
.release dd { color: var(--ink-soft) }

.division-link {
  font-family: var(--mincho);
  font-weight: 800;
  text-decoration-color: var(--blood)
}

.silence {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper)
}
.silence-line {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--paper-soft);
  text-align: center
}

.kido {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: safe center;
  column-gap: clamp(2rem, 5vw, 5rem)
}
.kido .heading { grid-column: 1 / -1 }
.chant { grid-row: 2 / 4; margin-top: clamp(1rem, 3.5svh, 2.5rem) }
.incantation { align-self: end }
.stack { align-self: start; align-content: start }
.chant p {
  max-width: 46ch;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1rem, min(2.2vw, 3.3svh), 1.8rem);
  line-height: 1.55
}

.incantation {
  margin-top: clamp(1rem, 3svh, 2rem);
  font-family: var(--mincho);
  font-weight: 800;
  font-size: clamp(1.8rem, min(5.4vw, 7.5svh), 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blood)
}

.stack { display: flex; flex-wrap: wrap; margin-top: clamp(1rem, 3.5svh, 2.5rem); row-gap: 0.5rem }
.stack li { padding-inline: 1rem; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft) }
.stack li:first-child { padding-left: 0 }
.stack li + li { border-left: 1px solid var(--ink-line) }

.sakura {
  background: var(--ink);
  color: var(--paper)
}

.sakura-canvas { position: absolute; inset: 0; width: 100%; height: 100% }

.sakura-text { position: relative; z-index: 1; display: grid; gap: 1.5rem; max-width: 34rem }

.sakura-command {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.35
}

.sakura-hint { display: none; font-size: 0.9375rem; color: var(--paper-soft) }
.js .sakura-hint { display: block }

.sakura-kanji {
  position: absolute;
  right: var(--right);
  bottom: 8%;
  font-family: var(--brush);
  font-size: clamp(5rem, min(16vw, 30svh), 14rem);
  line-height: 1;
  color: var(--sakura)
}
.js .sakura-kanji { visibility: hidden }

.gate {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  background: var(--ink);
  color: var(--paper)
}

.gate-text { display: grid; gap: 0.75rem; align-content: center }

.gate-note { max-width: 40ch; color: var(--paper-soft) }

.roads { margin-top: clamp(1rem, 4svh, 2.5rem); border-bottom: 1px solid var(--paper-line) }

.roads a {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: clamp(0.75rem, 2.4svh, 1.25rem);
  border-top: 1px solid var(--paper-line);
  text-decoration: none
}

.road-num {
  font-family: var(--brush);
  font-size: clamp(1.25rem, 3svh, 1.6rem);
  line-height: 1;
  color: var(--blood)
}

.dest {
  position: relative;
  justify-self: start;
  font-family: var(--mincho);
  font-weight: 800;
  font-size: clamp(1.4rem, min(3.2vw, 5.5svh), 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em
}
.dest::after {
  content: "";
  position: absolute;
  left: 0;
  right: -0.2em;
  bottom: -0.05em;
  height: 3px;
  background: var(--blood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--snap)
}
.roads a:hover .dest::after, .roads a:focus-visible .dest::after { transform: scaleX(1) }

.dest-note { font-size: 0.875rem; color: var(--paper-soft) }

.senkaimon {
  justify-self: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  width: min(100%, 24rem);
  min-height: 0
}

.lintel {
  margin-inline: -1.75rem;
  padding: 0.5rem 0;
  border-bottom: 3px solid var(--blood);
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--paper-line);
  text-align: center;
  font-family: var(--brush);
  font-size: clamp(1.4rem, 4svh, 2.25rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  line-height: 1.2;
  color: var(--paper)
}

.gate-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem
}

.pillar { background: var(--blood) }

.sill { margin-inline: -0.75rem; height: 0.75rem; background: var(--blood) }

.gate-frame {
  position: relative;
  overflow: hidden;
  background: radial-gradient(closest-side, var(--paper) 45%, color-mix(in srgb, var(--paper) 82%, var(--ink)));
  transition: box-shadow 900ms var(--snap)
}
.gate-frame.lit { box-shadow: 0 0 120px 10px var(--paper-glow) }

.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-position: center;
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--paper-line) 2px, transparent 2px),
    linear-gradient(90deg, var(--paper-line) 2px, transparent 2px);
  background-size: 4.5rem 5.5rem;
  pointer-events: none
}
.door-left { left: 0; border-right: 3px solid var(--blood); transform: translateX(-100%) }
.door-right { right: 0; border-left: 3px solid var(--blood); transform: translateX(100%) }

.rope {
  position: absolute;
  top: 46%;
  width: 100%;
  height: 0.75rem;
  background: var(--blood)
}

.bfly {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 46px;
  height: 34px;
  margin: -17px 0 0 -23px;
  opacity: 0;
  pointer-events: none
}
.bfly path { fill: var(--ink); stroke: var(--blood); stroke-width: 1.4 }
.bfly .wing { transform-origin: 30px 22px; animation: flap 260ms ease-in-out infinite alternate }
.bfly .body { fill: var(--blood) }

@keyframes flap {
  to { transform: scaleX(0.45) }
}

.shard { position: fixed; z-index: 55; margin: 0; pointer-events: none; box-sizing: border-box }

.piece { display: inline-block; will-change: transform, opacity }

.veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: veil-fallback 400ms ease 3.5s forwards
}

@keyframes veil-fallback {
  to { opacity: 0; visibility: hidden }
}

.veil-half {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 51%;
  background: var(--ink)
}
.veil-top { top: 0 }
.veil-bottom { bottom: 0 }

.veil-kanji {
  position: relative;
  font-family: var(--brush);
  font-size: clamp(6rem, 24vw, 22rem);
  line-height: 1;
  color: var(--paper)
}

.veil-cut {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: var(--blood);
  transform: scaleX(0);
  transform-origin: left
}

.reishi {
  position: absolute;
  z-index: -1;
  background: var(--ink);
  opacity: 0;
  rotate: 45deg;
  pointer-events: none
}
.reishi-red { background: var(--blood) }

.cut {
  position: fixed;
  z-index: 60;
  width: 44vw;
  height: 3px;
  margin: -1.5px 0 0 -22vw;
  background: var(--blood);
  pointer-events: none
}

@media (hover: none) {
  .figure img { filter: none }
}

@media (max-height: 46rem) and (min-width: 52.01rem) {
  .poem { margin-top: 1rem }
  .figure figcaption { display: none }
  .division-meta { font-size: 0.8125rem }
  .release dd, .release dt { font-size: 0.9375rem; line-height: 1.5 }
}

@media (max-width: 52rem) {
  body {
    --top: 4.25rem;
    --bottom: 4rem;
    --right: var(--gutter)
  }

  .bar { padding-block: 0.5rem }

  .rail {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    translate: none;
    padding-bottom: env(safe-area-inset-bottom)
  }
  .rail ol { grid-auto-flow: column; justify-content: center }
  .rail a { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; padding-inline: 0.25rem; font-size: 0.6875rem }
  .rail a::before { position: absolute; left: 50%; bottom: 0.4rem; margin-left: -0.375rem; order: 0 }
  .rail-name { display: none }

  .foot { display: none }
  body:has(#gate:target) .foot { display: flex; bottom: 2.75rem; flex-direction: column; padding-bottom: 0.25rem; font-size: 0.6875rem; line-height: 1.4 }
  .gate { padding-bottom: 7rem }
  .gate {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head gate" "note gate" "roads roads";
    align-items: start;
    gap: 0.75rem 1.5rem
  }
  .gate-text { display: contents }
  .gate .heading { grid-area: head }
  .gate-note { grid-area: note; font-size: 0.9375rem; line-height: 1.5 }
  .roads { grid-area: roads; margin-top: 0.5rem }
  .senkaimon { grid-area: gate; width: 100%; height: 9rem; margin-top: 0.5rem }
  .lintel { margin-inline: -0.5rem; padding: 0.25rem 0; font-size: 0.875rem; letter-spacing: 0.2em; text-indent: 0.2em; border-bottom-width: 2px }
  .gate-body { grid-template-columns: 0.5rem minmax(0, 1fr) 0.5rem }
  .sill { margin-inline: -0.25rem; height: 0.375rem }
  .bfly { width: 28px; height: 21px; margin: -10px 0 0 -14px }
  .roads a { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 0.75rem }
  .dest-note { grid-column: 2 }

  .cover {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 1.25rem
  }
  .poem { display: none }
  .getsuga { left: -30%; top: 6%; bottom: auto; width: 160% }
  .figure { order: -1; align-self: center; justify-self: end; width: auto; height: 100%; max-height: 22rem; aspect-ratio: 1; margin-right: 0.5rem }
  .figure img { height: 100%; width: auto; object-fit: cover }
  .figure figcaption { display: none }
  .name { font-size: clamp(3.75rem, min(22vw, 13svh), 6rem) }
  .lede { font-size: 0.9375rem; line-height: 1.5 }
  .actions { gap: 0.75rem; margin-top: 0 }
  .action { min-height: 44px; padding-inline: 1.125rem; font-size: 0.9375rem }

  .spread { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1.5rem }
  .spread-kanji { writing-mode: horizontal-tb; order: -2; font-size: clamp(4rem, min(26vw, 14svh), 8rem) }
  .statement { font-size: clamp(1.4rem, min(7vw, 4.6svh), 2.4rem) }

  .page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr) }
  .panel-hollow { grid-column: 1 / 3; grid-row: 1 }
  .panel-cat { grid-column: 1; grid-row: 2 / 4 }
  .panel-ice { grid-column: 2; grid-row: 2 }
  .panel-nel { grid-column: 2; grid-row: 3 }
  .narration { left: auto; right: 0.5rem; bottom: 0.5rem; max-width: 16ch; font-size: 0.75rem }

  .division summary { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.3rem }
  .lozenge { width: 1.75rem; height: 1.75rem }
  .lozenge span { font-size: 0.9375rem }
  .division-head { gap: 0 0.75rem }
  .division-meta { font-size: 0.8125rem }
  .division-body { padding-left: 3.5rem; gap: 0.5rem }
  .release { grid-template-columns: minmax(0, 1fr); gap: 0.5rem }
  .release div { display: block; line-height: 1.45 }
  .release dt { display: inline; font-size: 0.8125rem; margin-right: 0.5em }
  .release dd { display: inline; font-size: 0.8125rem; line-height: 1.5 }
  .division-link { font-size: 0.9375rem }

  .kido { grid-template-columns: minmax(0, 1fr); grid-template-rows: none }
  .chant { grid-row: auto }
  .chant p { font-size: clamp(0.875rem, 2.4svh, 1.125rem); line-height: 1.5 }
  .stack li { padding-inline: 0.625rem; font-size: 0.8125rem }

  .sakura-kanji { right: var(--gutter); bottom: 12% }

}

@media (max-width: 52rem) and (max-height: 40rem) {
  .division-meta { display: none }
  .stack { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .veil, .passage { display: none }
}