@charset "utf-8";
/* hizume.net のトップ。値を持つのはこの :root だけ。色は白と黒の 2 つ（docs/DESIGN.md §2.1） */

:root {
  --paper: #f4f4f2;
  --ink: #0a0a0a;
  --bg: var(--paper);
  --fg: var(--ink);

  --stack-latin: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --stack-jp: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-4xl: clamp(64px, 13vw, 210px);

  --leading-display: 1.25;
  --leading-heading: 1.4;
  --leading-body: 1.75;
  --leading-ui: 1.5;
  --tracking-mega: -0.055em;

  --margin: clamp(16px, 2.5vw, 40px);
  --gutter: clamp(12px, 1.6vw, 24px);
  --section-gap: clamp(120px, 22vh, 240px);
  --measure-text: 34em;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --tap-size: 44px;
  --radius-full: 9999px;
}

html.dark {
  --paper: #0a0a0a;
  --ink: #f4f4f2;
}

.tone-ink {
  --bg: var(--ink);
  --fg: var(--paper);
}

/* 色の段は、--fg が入れ替わる場所ごとに作り直す。上で一度だけ作ると、反転した場所でも元の色のまま受け継がれる */
:root,
.tone-ink {
  --fg-muted: color-mix(in srgb, var(--fg) 62%, transparent);
  --fg-dim: color-mix(in srgb, var(--fg) 56%, transparent);
  --rule: color-mix(in srgb, var(--fg) 18%, transparent);
  --stage: color-mix(in srgb, var(--fg) 6%, var(--bg));
}

/* ---------- 土台 ---------- */

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

html {
  overflow-x: clip;
  background: var(--bg);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.dark {
  color-scheme: dark;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--stack-jp);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
  hanging-punctuation: allow-end;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
}

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

::selection {
  background: var(--fg);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

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

.cap {
  text-transform: capitalize;
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--fg);
  color: var(--bg);
  font-size: var(--text-sm);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.line {
  display: block;
}

/* モチーフの小さなアイコン。img/motif/ の SVG を型抜きに使い、色は文字の色に合わせる */
.mi {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 明暗の切り替えは、押したところから円で広がる（JS が新しい側に clip-path を掛ける）。既定の重ね合わせは止める */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---------- ヘッダー ---------- */
/* 差の合成で、白い面でも黒い面でも図版の上でも読める。切り替えの JS がいらない */

.mh {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding: 18px var(--margin);
  color: #fff;
  mix-blend-mode: difference;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.mh > * {
  pointer-events: auto;
}

.mh-home {
  grid-column: 1 / 4;
  justify-self: start;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
}

.mh-run {
  grid-column: 5 / 9;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.mh-sign {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
}

.mh-sign .mi {
  position: absolute;
  inset: 0;
}

.mh-label {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
}

.mh-label-in {
  display: block;
}

.mh-tools {
  grid-column: 9 / 13;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
}

.mh-lang,
.mh-theme {
  min-height: var(--tap-size);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  margin-block: -14px;
}

.mh-index {
  min-height: var(--tap-size);
  margin-block: -14px;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
}

.mh-index-in {
  display: block;
  height: 1.2em;
  line-height: 1.2;
  overflow: hidden;
}

.mh-index-in > span {
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.mh-index[aria-expanded='true'] .mh-index-in > span {
  transform: translateY(-100%);
}

.mh-theme span {
  opacity: 0.4;
  transition: opacity 0.4s var(--ease-out);
}

html:not(.dark) .mh-theme .t-light,
html.dark .mh-theme .t-dark {
  opacity: 1;
}

.mh-lang-code::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}

.langs {
  position: fixed;
  top: 52px;
  right: var(--margin);
  z-index: 45;
  width: 220px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  font-size: var(--text-sm);
}

.langs[hidden] {
  display: none;
}

.langs-list button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  text-align: left;
  border-top: 1px solid var(--rule);
}

.langs-list li:first-child button {
  border-top: 0;
}

.langs-list button span:last-child {
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  color: var(--fg-dim);
}

.langs-list button:hover,
.langs-list button[aria-current='true'] {
  background: var(--fg);
  color: var(--bg);
}

.langs-list button:hover span:last-child,
.langs-list button[aria-current='true'] span:last-child {
  color: inherit;
}

/* ---------- 目次 ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 96px var(--margin) clamp(24px, 5vh, 56px);
  background: var(--fg);
  color: var(--bg);
  --menu-rule: color-mix(in srgb, var(--bg) 22%, transparent);
}

.menu[hidden] {
  display: none;
}

.menu-list {
  border-top: 1px solid var(--menu-rule);
}

.menu-item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding: clamp(6px, 1.2vh, 14px) 0;
  border-bottom: 1px solid var(--menu-rule);
}

.menu-no,
.menu-note {
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.menu-no {
  grid-column: 1 / 2;
}

.menu-sign {
  grid-column: 2 / 3;
  width: clamp(16px, 1.8vw, 26px);
  aspect-ratio: 1;
  transition: transform 0.8s var(--ease-out);
}



.menu-title {
  grid-column: 3 / 10;
  font-family: var(--stack-latin);
  font-size: clamp(40px, 7.4vh, 104px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.menu-note {
  grid-column: 10 / 13;
  justify-self: end;
  opacity: 0.6;
}

.menu-item.is-current .menu-title {
  opacity: 0.35;
}

@media (hover: hover) {
  .menu-item:hover .lr > span {
    transform: translateY(-100%);
  }

  .menu-item:hover .menu-sign {
    transform: rotate(90deg) scale(1.3);
  }
}

/* ---------- 共通の部品 ---------- */

.sh {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
  padding-top: 12px;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.sh::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--fg);
  transform-origin: left;
  transform: scaleX(var(--rule-x, 1));
}

.sh-num {
  grid-column: 1 / 2;
}

.sh-title {
  grid-column: 2 / 7;
}

.sh-note {
  grid-column: 9 / 13;
  justify-self: end;
  color: var(--fg-muted);
}

.mega-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  margin-top: clamp(20px, 3vw, 40px);
}

.mega {
  font-family: var(--stack-latin);
  font-size: var(--text-4xl);
  line-height: 0.8;
  font-weight: 700;
  letter-spacing: var(--tracking-mega);
  white-space: nowrap;
  margin-left: -0.035em;
  padding-bottom: 0.04em;
}

.mega .mline {
  display: block;
  overflow: hidden;
  padding: 0.06em 0.06em 0.12em 0.04em;
  margin: -0.06em -0.06em -0.12em -0.04em;
}

.mega .mch {
  display: inline-block;
}

.mark {
  position: relative;
  flex: none;
  /* 図形は枠いっぱいに描かれているので、大文字の高さ（約 0.7em）にそろえる */
  width: calc(var(--text-4xl) * 0.7);
  aspect-ratio: 1;
  margin-bottom: 0.06em;
}

/* WebGL が描けたら、予備のアイコンは隠す（重なって二重に見える） */
.mark.is-gl .mi {
  visibility: hidden;
}

.cap-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

.cap-row .cap {
  text-transform: capitalize;
}

.plate {
  position: relative;
  display: block;
  overflow: hidden;
}

.plate > img,
.plate > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s linear;
}

/* WebGL が描けたら、元の画像は見えなくするだけ。場所と大きさはそのまま使う */
.plate.is-gl > img,
.plate.is-gl > video {
  opacity: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-size);
  padding: 0 22px 0 26px;
  border: 1px solid var(--fg);
  border-radius: var(--radius-full);
  font-family: var(--stack-latin);
  font-size: var(--text-sm);
  font-weight: 500;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease-out);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-out);
}

.btn-chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.55s var(--ease-out);
}

@media (hover: hover) {
  .btn:hover {
    color: var(--bg);
  }

  .btn:hover::before {
    transform: none;
  }

  .btn:hover .btn-chevron {
    transform: translateX(4px);
  }
}

.link-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--stack-latin);
  font-size: var(--text-sm);
  font-weight: 500;
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size 0.6s var(--ease-out);
}

.link-line svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .link-line:hover {
    background-size: 0 1px;
    background-position: right bottom;
  }
}

/* ---------- 01 ファーストビュー ---------- */

.cover {
  position: relative;
  height: 260vh;
}

.cover-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  cursor: crosshair;
}

/* 拡大は枠（.cover-zoom）の scale でスクロールに合わせ、canvas はその逆数で縮めて、描いた拡大率の分だけを打ち消す（main.js）。
   canvas は縁に --padx / --pady の余白を持つ。スクロールを戻す途中で枠の拡大が描いた絵より小さくなっても、縁が空かない */
.cover-zoom {
  position: absolute;
  inset: 0;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}

.cover-gl {
  position: absolute;
  left: calc(-1 * var(--padx, 0px));
  top: calc(-1 * var(--pady, 0px));
  width: calc(100% + 2 * var(--padx, 0px));
  max-width: none;
  height: calc(100% + 2 * var(--pady, 0px));
  transform-origin: calc(var(--zx, 50%) + var(--padx, 0px)) calc(var(--zy, 50%) + var(--pady, 0px));
}

/* スクロールに連動するアニメーションは、Safari 26.4 からスクロールと同じプロセスで動く（120Hz の画面でも、JS が重くても遅れない）。
   範囲（px）とトラックの送り幅は JS が入れる */
@supports (animation-timeline: scroll()) {
  .cover.is-sda .cover-zoom {
    animation: cover-zoom linear both;
    animation-timeline: scroll(root);
    animation-range: 0px var(--zoom-end, 60vh);
  }

  .photos.is-sda .photos-track {
    animation: photos-slide linear both;
    animation-timeline: scroll(root);
    animation-range: var(--ps, 0px) var(--pe, 0px);
  }

  .photos.is-sda .ph-bar i {
    transform: none;
    animation: photos-bar linear both;
    animation-timeline: scroll(root);
    animation-range: var(--ps, 0px) var(--pe, 0px);
  }
}

@keyframes photos-slide {
  from {
    translate: 0 0;
  }
  to {
    translate: calc(-1 * var(--dist, 0px)) 0;
  }
}

@keyframes photos-bar {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}

.cover-name,
.cover-meta,
.cover-cue,
.cover-hint,
.cover-fig {
  color: #fff;
  mix-blend-mode: difference;
}

/* 大きな記号の右上に添える注記。記号が変わるたびに番号と名前が入れ替わる */
.cover-fig {
  position: absolute;
  left: var(--fx, 70%);
  top: var(--fy, 20%);
  display: flex;
  gap: 10px;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.cf-label,
.cf-total {
  opacity: 0.62;
}

.cm a {
  pointer-events: auto;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.5s var(--ease-out);
}

@media (hover: hover) {
  .cm a:hover {
    background-size: 100% 1px;
  }
}

.cf-roll {
  position: relative;
  display: block;
  height: 1.2em;
  overflow: hidden;
}

.cf-in {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.cover-name {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  bottom: calc(var(--margin) * 0.7);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--stack-latin);
  font-size: var(--name-size, 11.2vw);
  line-height: 0.8;
  font-weight: 700;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.cn-word {
  display: inline-flex;
  overflow: hidden;
  padding: 0.08em 0.06em 0.02em 0;
  margin: -0.08em -0.06em -0.02em 0;
}

.cn-word:first-child {
  margin-left: -0.06em;
  padding-left: 0.06em;
}

.ch {
  display: inline-block;
}

.cover-meta {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  top: clamp(64px, 8.5vh, 88px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-top: 12px;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  font-weight: 500;
  pointer-events: none;
}

.cover-meta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(var(--rule-x, 1));
}

.cm {
  grid-column: span 3;
}

.cm dt {
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 4px;
}

.cm dd {
  font-family: var(--stack-jp);
}

.cover-cue {
  position: absolute;
  right: var(--margin);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}

.cover-cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  overflow: hidden;
}

.cover-cue i::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  animation: cue 2.2s var(--ease-inout) infinite;
}

@keyframes cue {
  0% { transform: translateY(-101%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(101%); }
}

.cover-hint {
  position: absolute;
  left: var(--margin);
  top: 50%;
  display: flex;
  gap: 20px;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- 02 序文 ---------- */

.preface {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  margin-top: -100svh;
  padding: var(--section-gap) var(--margin);
  background: var(--bg);
}

.preface-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(64px, 10vw, 140px);
  margin-top: clamp(48px, 7vw, 96px);
}

.catch {
  grid-column: 1 / 11;
  grid-row: 1;
  font-family: var(--stack-latin), var(--stack-jp);
  font-size: clamp(36px, 5.8vw, 96px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: pretty;
  /* 広い画面で最後の 1 語だけが次の行に残らないよう、行の長さに上限を付ける */
  max-width: 14em;
}

:lang(ja) .catch,
:lang(zh-CN) .catch,
:lang(zh-TW) .catch,
:lang(ko) .catch {
  font-family: var(--stack-jp);
  font-size: clamp(32px, 4.9vw, 80px);
  line-height: var(--leading-display);
  letter-spacing: 0;
  font-feature-settings: 'palt' 1;
  max-width: 20em;
}

.catch .w {
  opacity: var(--o, 1);
}

.mark-preface {
  grid-column: 11 / 13;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: min(100%, 15vw);
  margin-top: 0.4vw;
}

.portrait {
  grid-column: 1 / 4;
  grid-row: 2;
  align-self: start;
}

.plate-portrait {
  aspect-ratio: 1;
  width: min(100%, 256px);
}

.lead {
  grid-column: 6 / 12;
  grid-row: 2;
  max-width: var(--measure-text);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.lead p + p {
  margin-top: 1.4em;
}

/* ---------- 03 アプリ ---------- */

.apps {
  position: relative;
  z-index: 2;
  padding: 0 var(--margin) var(--section-gap);
  background: var(--bg);
}

.app {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: clamp(80px, 12vw, 180px);
}

.app-stage {
  position: relative;
  display: block;
}

/* ---------- アプリの図版 ----------
   中は製品ごとの決まりで組む。RONDO は白と黒の 2 色と図形、Recite は紙と墨と録音の赤い点。
   寸法は枠の幅に対する割合（cqw）で持つ。幅が変わっても構図が崩れない */

.art {
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
}

/* RONDO。Ver 5 のビジュアルアイデンティティのシート（02 / Application）を縮めた組み。
   灰色の紙に黒。RONDO には明暗の切り替えが無いので、ページが暗くても同じ紙のまま */
.art-rondo {
  --r-paper: #ececec;
  --r-ink: #000000;
  --r-guide: rgba(0, 0, 0, 0.16);
  grid-column: 1 / 8;
  aspect-ratio: 7 / 7.4;
  background: var(--r-paper);
  color: var(--r-ink);
}

/* 上と下の小さな見出し。シートと同じく、左は太字、右は細字 */
.ar-cap {
  position: absolute;
  left: 4.4cqw;
  right: 4.4cqw;
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  font-family: var(--stack-latin);
  font-size: max(1.45cqw, 11px);
  line-height: 1;
  white-space: nowrap;
}

.ar-cap b {
  font-weight: 700;
  text-transform: uppercase;
}

.ar-cap-top {
  top: 4cqw;
}

.ar-cap-bottom {
  bottom: 4cqw;
}

/* 端末の列。両端の 2 台は紙の端で切る。列はスクロールとポインタで少し横に動く */
.ar-row {
  position: absolute;
  top: 10.6cqw;
  left: -6.9cqw;
  display: flex;
  gap: 4.6cqw;
  transform: translateX(var(--rx, 0px));
}

.ar-device {
  position: relative;
  flex: none;
  width: 25cqw;
  padding: 0.6cqw;
  border-radius: 4.5cqw;
  background: var(--r-ink);
}

.ar-screen {
  position: relative;
  display: block;
  aspect-ratio: 760 / 1652;
  border-radius: 3.9cqw;
  overflow: hidden;
  background: #dcdcdc;
  isolation: isolate;
}

.ar-screen::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: 0.95cqw;
  left: 50%;
  width: 7.2cqw;
  height: 2.1cqw;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}

.ar-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 次の画面は、図形の形に開いて重なる */
.ar-shot.is-next {
  z-index: 2;
  -webkit-mask: var(--m) var(--mx, 50%) var(--my, 50%) / calc(var(--ms, 0) * 1%) no-repeat;
  mask: var(--m) var(--mx, 50%) var(--my, 50%) / calc(var(--ms, 0) * 1%) no-repeat;
}

/* ワードマークと作図の線 */
.ar-mark {
  position: absolute;
  left: 0;
  right: 0;
  top: 71.4cqw;
  height: 19.1cqw;
  border-top: 1px solid var(--r-guide);
  border-bottom: 1px solid var(--r-guide);
}

.ar-mark::before,
.ar-mark::after {
  content: '';
  position: absolute;
  top: -2.4cqw;
  bottom: -2.4cqw;
  width: 1px;
  background: var(--r-guide);
}

.ar-mark::before {
  left: 6cqw;
}

.ar-mark::after {
  right: 6cqw;
}

.ar-word {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  top: 0;
  bottom: 0;
  background: var(--r-ink);
  -webkit-mask: url(../img/rondo/wordmark.svg) center / contain no-repeat;
  mask: url(../img/rondo/wordmark.svg) center / contain no-repeat;
}

/* Recite。Recite の紙と墨に従うので、ページの明暗で入れ替わる */
.art-recite {
  grid-column: 6 / 13;
  aspect-ratio: 7 / 5.6;
  background: var(--bg);
  color: var(--fg);
}

.art-recite::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 1px solid var(--fg);
  pointer-events: none;
}

.rc-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 0 4cqw;
  border-bottom: 1px solid var(--fg);
  font-family: var(--stack-latin);
  font-size: max(1.45cqw, 11px);
  line-height: 1;
  white-space: nowrap;
}

.rc-logo {
  flex: none;
  width: 2.6cqw;
  height: 2.6cqw;
}

.rc-logo svg {
  width: 100%;
  height: 100%;
}

.rc-head b {
  font-weight: 700;
  text-transform: uppercase;
}

.rc-head > span:last-child {
  margin-left: auto;
}

.rc-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 9cqw;
  height: 60cqw;
}

.rc-tracks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rc-label {
  position: absolute;
  left: 4cqw;
  display: flex;
  gap: 0.9cqw;
  align-items: baseline;
  font-family: var(--stack-latin);
  font-size: max(1.5cqw, 10px);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rc-label span:first-child {
  font-family: var(--stack-jp);
  font-weight: 700;
  font-size: max(1.7cqw, 11px);
  letter-spacing: 0;
}

.rc-label-a {
  top: 4.2cqw;
}

.rc-label-b {
  top: 33.4cqw;
}

/* いま録っている位置。縦の線と、明滅する赤い点と、経過時間 */
.rc-now {
  position: absolute;
  top: 3.6cqw;
  bottom: 3.6cqw;
  left: var(--now, 55.5cqw);
  width: 1px;
}

/* 線は点の下から始める。点が薄くなったときに、線が透けて点に重ならないように */
.rc-line {
  position: absolute;
  top: 1.7cqw;
  bottom: 0;
  left: 0;
  width: 1px;
  background: currentColor;
  transform-origin: top;
}

.rc-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5cqw;
  height: 1.5cqw;
  border-radius: 50%;
  background: #ff453a;
  transform: translate(-50%, -50%);
  transition: opacity 0.45s ease-in-out;
}

.rc-time {
  position: absolute;
  top: 0;
  left: 1.6cqw;
  font-family: var(--stack-latin);
  font-size: max(1.6cqw, 10px);
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateY(-50%);
}

.rc-panel {
  position: absolute;
  z-index: 2;
  right: 4.5cqw;
  top: 19.6cqw;
  width: 37cqw;
}

.rc-panel img {
  width: 100%;
  height: auto;
}

/* 下の帯。Recite のページの帯と同じ 4 語を、白黒を反転して流す */
.rc-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 11cqw;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--fg);
  color: var(--bg);
}

.rc-ticker {
  display: flex;
  align-items: center;
  flex: none;
  gap: 3cqw;
  padding-right: 3cqw;
  font-family: var(--stack-latin);
  font-size: 5.4cqw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  white-space: nowrap;
  animation: rc-tick 26s linear infinite;
  animation-play-state: var(--tick, paused);
}

.rc-ticker i {
  position: relative;
  flex: none;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  border: 0.62cqw solid currentColor;
}

.rc-ticker i::after {
  content: '';
  position: absolute;
  inset: 0.38cqw;
  border-radius: 50%;
  background: #ff453a;
}

@container (max-width: 560px) {
  .ar-cap > span:last-child,
  .rc-head > span:last-child {
    display: none;
  }
}

@keyframes rc-tick {
  to {
    transform: translateX(-50%);
  }
}

.app-text {
  position: sticky;
  top: 18vh;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.app-rondo .app-text {
  grid-column: 9 / 13;
}

.app-recite .app-text {
  grid-column: 1 / 5;
  grid-row: 1;
}

.app-no {
  display: flex;
  gap: 16px;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

.app-name {
  margin-top: 20px;
  font-family: var(--stack-latin);
  font-size: clamp(56px, 7.4vw, 124px);
  line-height: 0.82;
  font-weight: 700;
  letter-spacing: var(--tracking-mega);
  margin-left: -0.05em;
}

.app-catch {
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

:lang(ja) .app-catch,
:lang(zh-CN) .app-catch,
:lang(zh-TW) .app-catch,
:lang(ko) .app-catch {
  line-height: var(--leading-heading);
  letter-spacing: 0;
  font-feature-settings: 'palt' 1;
}

.app-desc {
  margin-top: 20px;
  max-width: var(--measure-text);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.app-points {
  margin-top: 24px;
  display: grid;
  gap: 10px;
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.app-points li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-point-sign {
  flex: none;
  width: 12px;
  height: 12px;
}

.app-conds {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  color: var(--fg-muted);
}

.app-conds span + span::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin: 0 12px;
  vertical-align: -0.1em;
  background: var(--rule);
}

.app-text .btn {
  margin-top: 32px;
}

/* ---------- 04 仕事 ---------- */

.works {
  position: relative;
  z-index: 2;
  padding: 0 var(--margin) var(--section-gap);
  background: var(--bg);
}

.index {
  margin-top: clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--rule);
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding: clamp(22px, 2.4vw, 36px) 0;
  border-top: 1px solid var(--rule);
  isolation: isolate;
  transition: color 0.5s var(--ease-out);
}

.row::before {
  content: '';
  position: absolute;
  inset: -1px calc(var(--margin) * -1) 0;
  z-index: -1;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease-out);
}

.row-no {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.row-sign {
  width: 10px;
  height: 10px;
  transition: transform 0.7s var(--ease-out);
}



.row-title {
  grid-column: 2 / 9;
  font-size: clamp(26px, 3.3vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  transition: transform 0.6s var(--ease-out);
}

.roll {
  position: relative;
  display: inline-block;
  /* 上下だけ隠す。字間を詰めているので、最後の字の端は枠の外まで出ている */
  clip-path: inset(0 -0.3em);
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.roll > span,
.roll::after {
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.roll::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
}

.row-meta {
  grid-column: 9 / 12;
  font-family: var(--stack-latin);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  transition: color 0.5s var(--ease-out);
}

.row-arrow {
  grid-column: 12 / 13;
  justify-self: end;
  width: 28px;
  height: 28px;
}

.row-arrow svg,
.link-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s var(--ease-out);
}

.row-thumb {
  display: none;
}

@media (hover: hover) {
  .row:hover {
    color: var(--bg);
  }

  .row:hover::before {
    transform: scaleY(1);
  }

  .row:hover .row-meta {
    color: color-mix(in srgb, var(--bg) 70%, transparent);
  }

  .row:hover .row-title {
    transform: translateX(clamp(8px, 1vw, 16px));
  }

  .row:hover .roll > span,
  .row:hover .roll::after {
    transform: translateY(-100%);
  }

  .row:hover .row-arrow svg {
    transform: rotate(45deg);
  }

  .row:hover .row-sign {
    transform: rotate(90deg) scale(1.4);
  }
}

/* ---------- 05 写真 ---------- */

.photos {
  position: relative;
  z-index: 2;
  background: var(--bg);
}

.photos-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.photos-track {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding: 0 var(--margin);
  will-change: transform;
}

.photos-head {
  flex: none;
  width: min(86vw, 44rem);
  align-self: center;
  margin-right: clamp(40px, 6vw, 120px);
}

.photos-head .mega {
  font-size: clamp(64px, 11vw, 180px);
  white-space: normal;
}

.photos-head .link-line {
  margin-top: 36px;
}

.ph {
  flex: none;
  display: flex;
  flex-direction: column;
}

.ph-open {
  display: block;
  cursor: zoom-in;
}

.ph .plate {
  height: var(--h, 62vh);
  aspect-ratio: 3 / 4;
}

.ph:nth-of-type(n + 7) .plate {
  aspect-ratio: 533 / 800;
}

.ph:nth-of-type(3n + 1) {
  --h: 56vh;
  align-self: flex-start;
  margin-top: 16vh;
}

.ph:nth-of-type(3n + 2) {
  --h: 68vh;
}

.ph:nth-of-type(3n) {
  --h: 48vh;
  align-self: flex-end;
  margin-bottom: 14vh;
}

.ph-sign {
  width: 10px;
  height: 10px;
  color: var(--fg);
}



.photos-hud {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  bottom: clamp(20px, 3vh, 32px);
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.ph-count {
  display: flex;
  gap: 6px;
}

.ph-total {
  color: var(--fg-dim);
}

.ph-bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.ph-bar i {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* 動きを減らす設定と、JS が動かないときは、横に送らずに格子に並べる */
.photos.is-static .photos-pin,
html:not(.js) .photos-pin {
  position: static;
  height: auto;
  overflow: visible;
}

.photos.is-static .photos-track,
html:not(.js) .photos-track {
  position: static;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px var(--gutter);
  padding: var(--section-gap) var(--margin);
}

.photos.is-static .photos-head,
html:not(.js) .photos-head {
  width: 100%;
  margin: 0 0 24px;
}

.photos.is-static .ph,
html:not(.js) .ph {
  width: calc((100% - var(--gutter) * 3) / 4);
  margin: 0;
  align-self: auto;
}

.photos.is-static .ph .plate,
html:not(.js) .ph .plate {
  width: 100%;
  height: auto;
}

.photos.is-static .photos-hud,
html:not(.js) .photos-hud {
  display: none;
}

/* 白から黒へ移る境目。点が下へ行くほど大きくなり、黒い面につながる */
.seam {
  position: relative;
  z-index: 2;
  background: var(--bg);
  line-height: 0;
}

/* ---------- 06 リンクと奥付 ---------- */

.else {
  position: relative;
  z-index: 2;
  padding: var(--section-gap) var(--margin) 0;
  background: var(--bg);
  color: var(--fg);
}

.links {
  margin-top: clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--rule);
}

.link {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding: clamp(14px, 1.6vw, 24px) 0;
  border-top: 1px solid var(--rule);
}

.link-name {
  grid-column: 1 / 8;
  font-family: var(--stack-latin);
  font-size: clamp(32px, 4.6vw, 76px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.lr {
  display: inline-flex;
  flex-direction: column;
  height: 1.3em;
  margin-block: -0.15em;
  /* 上下だけ隠す。字間を詰めているので、字の端は隣の字の枠まで出ている。overflow で隠すと端が切れる */
  clip-path: inset(0 -0.4em);
  vertical-align: top;
}

.lr > span {
  display: block;
  height: 1.3em;
  line-height: 1.3;
  transition: transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 22ms);
}

.link-handle {
  grid-column: 8 / 12;
  font-family: var(--stack-latin);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  transition: transform 0.6s var(--ease-out), color 0.6s var(--ease-out);
}

.link-arrow {
  grid-column: 12 / 13;
  justify-self: end;
  width: 28px;
  height: 28px;
}

@media (hover: hover) {
  .link:hover .lr > span {
    transform: translateY(-100%);
  }

  .link:hover .link-handle {
    color: var(--fg);
    transform: translateX(8px);
  }

  .link:hover .link-arrow svg {
    transform: rotate(45deg);
  }
}

.back {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(48px, 6vw, 96px);
}

.end {
  position: relative;
  margin: clamp(80px, 10vw, 160px) calc(var(--margin) * -1) 0;
  height: calc(100vw * 0.2);
  cursor: crosshair;
}

.end-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.end-name {
  position: absolute;
  inset: 0 var(--margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--stack-latin);
  font-size: 11vw;
  line-height: 0.8;
  font-weight: 700;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  white-space: nowrap;
}

.end.is-gl .end-name {
  visibility: hidden;
}

.copy {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* 製品のページへ移るときの覆い。押したところから点が広がって画面を埋める */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}

/* ---------- 図版の層 ---------- */

/* 画面に固定せず、文書の中に置く。高さは画面（lvh）の --span 倍で、JS が transform で画面の近くへずらす（plates.js）。
   JS はこの実寸でバッファとカメラを作る。innerHeight で作ると、iOS のツールバーが出ている間は絵が縦に伸びる */
.plates-gl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: calc(100vh * var(--span, 1));
  height: calc(100lvh * var(--span, 1));
  pointer-events: none;
}

/* 写真の網点は、トラックの中の canvas に描く。トラックといっしょに動く。はみ出た分はここで切る（トラックの幅を伸ばさない） */
.photos-gl-clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.photos-gl {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100vw * var(--span, 1));
  max-width: none;
  height: 100%;
}

/* ---------- 写真を大きく見る ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--gutter);
  row-gap: 16px;
  padding: 18px var(--margin) 24px;
  background: #0a0a0a;
  color: #f4f4f2;
  font-family: var(--stack-latin);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.lightbox[hidden] {
  display: none;
}

.lb-title,
.lb-insta {
  grid-row: 1;
  align-self: center;
}

.lb-title {
  grid-column: 1 / 7;
}

.lb-insta {
  grid-column: 7 / 13;
  justify-self: end;
  font-size: var(--text-xs);
  text-transform: uppercase;
  min-height: var(--tap-size);
  padding-bottom: 0;
  background-position: left calc(50% + 0.9em);
}

/* 下線は文字のすぐ下に。押せる高さ（44px）を取っても、線が箱の下の端へ離れないように */
@media (hover: hover) {
  .lb-insta:hover {
    background-position: right calc(50% + 0.9em);
  }
}

.lb-figure {
  grid-column: 1 / 13;
  grid-row: 2;
  display: grid;
  place-items: center;
  min-height: 0;
}

.lb-img {
  max-width: 100%;
  max-height: calc(100svh - 176px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.lb-count {
  grid-column: 1 / 4;
  grid-row: 3;
  align-self: center;
}

.lb-btn {
  grid-row: 3;
  min-height: var(--tap-size);
  text-transform: uppercase;
}

.lb-prev {
  grid-column: 6 / 7;
}

.lb-next {
  grid-column: 7 / 8;
}

.lb-close {
  grid-column: 12 / 13;
  justify-self: end;
}

@media (hover: hover) {
  .lb-btn:hover {
    opacity: 0.6;
  }
}

html:not(.js) .cover {
  height: 100vh;
  height: 100svh;
}

html:not(.js) .preface {
  margin-top: 0;
}

/* ---------- 動きの初めの状態 ---------- */

.is-pending > *,
.is-pending .line {
  opacity: 0;
}

.portrait.is-pending {
  opacity: 0;
}
/* JS が動くときだけ隠す。JS が止まっても 4 秒後には見える（head の is-ready） */

@media (prefers-reduced-motion: no-preference) {
  .js:not(.is-ready) .cover-name .ch {
    transform: translateY(110%);
  }

  .js:not(.is-ready) .cover-meta .cm,
  .js:not(.is-ready) .cover-fig,
  .js:not(.is-ready) .cover-cue,
  .js:not(.is-ready) .cover-hint,
  .js:not(.is-ready) .mh {
    opacity: 0;
  }

  .js:not(.is-ready) .cover-meta {
    --rule-x: 0;
  }
}

/* ---------- 狭い画面 ---------- */

@media (max-width: 959px) {
  .app-rondo .app-stage,
  .app-recite .app-stage {
    grid-column: 1 / 13;
  }

  .app-rondo .app-text,
  .app-recite .app-text {
    position: static;
    grid-column: 1 / 13;
    grid-row: auto;
    margin-top: 40px;
  }

  .app-recite .app-stage {
    grid-row: 1;
  }

  .row-title {
    grid-column: 2 / 13;
  }

  .row-meta {
    grid-column: 2 / 12;
    margin-top: 8px;
  }

  .row-arrow {
    grid-row: 1;
  }

  .lead {
    grid-column: 4 / 13;
  }
}

@media (max-width: 767px) {
  .mh {
    padding-block: 14px;
  }

  .mh-home {
    grid-column: 1 / 6;
  }

  .mh-run {
    display: none;
  }

  .mh-tools {
    grid-column: 6 / 13;
    gap: 16px;
  }

  .menu-title {
    grid-column: 3 / 13;
    font-size: clamp(34px, 10.5vw, 56px);
  }

  .menu-note {
    display: none;
  }

  .cover {
    height: 250vh;
  }

  .cover-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.04em;
  }

  .cover-name .cn-word:last-child {
    align-self: flex-end;
  }

  .cover-meta {
    top: 60px;
    row-gap: 14px;
  }

  .cm {
    grid-column: span 6;
  }

  .cover-hint {
    display: none;
  }

  .cover-cue,
  .cover-fig {
    display: none;
  }

  .sh-title {
    grid-column: 3 / 9;
  }

  .sh-note {
    grid-column: 9 / 13;
  }

  .mega-row {
    align-items: flex-end;
  }

  .mark {
    width: calc(var(--text-4xl) * 0.66);
  }

  .preface-grid {
    row-gap: 56px;
  }

  .catch {
    grid-column: 1 / 13;
  }

  .mark-preface {
    display: none;
  }

  .portrait {
    grid-column: 1 / 8;
  }

  .lead {
    grid-column: 1 / 13;
    grid-row: 3;
  }

  .row-no {
    align-self: start;
    padding-top: 0.5em;
  }

  .row-title {
    grid-column: 2 / 12;
  }

  .row-thumb {
    display: block;
    grid-column: 2 / 13;
    margin-top: 16px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--stage);
  }

  .row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ph .plate {
    height: var(--h, 52vh);
  }

  .ph:nth-of-type(3n + 1) {
    --h: 46vh;
    margin-top: 12vh;
  }

  .ph:nth-of-type(3n + 2) {
    --h: 56vh;
  }

  .ph:nth-of-type(3n) {
    --h: 40vh;
    margin-bottom: 12vh;
  }

  .link-name {
    grid-column: 1 / 12;
  }

  .link-handle {
    grid-column: 1 / 12;
    grid-row: 2;
    margin-top: 6px;
  }

  .link-arrow {
    grid-row: 1;
  }

  .back {
    justify-content: flex-start;
  }

  .end {
    height: calc(100vw * 0.72);
  }

  .photos.is-static .ph,
  html:not(.js) .ph {
    width: calc((100% - var(--gutter)) / 2);
  }

  .lb-prev {
    grid-column: 5 / 7;
  }

  .lb-next {
    grid-column: 7 / 9;
  }

  .lb-count {
    grid-column: 1 / 5;
  }

  .lb-close {
    grid-column: 10 / 13;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover {
    height: 100vh;
    height: 100svh;
  }

  .preface {
    margin-top: 0;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}