/* 思捕滄 v2 — 「碑記」
   Greys only. 1 px rules. No radius, shadow, gradient or transform-based motion.
   Ink is an <img> of a white-alpha PNG tinted with a CSS filter (CSS masks do not load from file://). */

:root {
  --paper:        #F2F1ED;
  --stone:        #DEDDD8;
  --stone-deep:   #C9C8C3;
  --hairline:     #CFCEC9;
  --field:       #85847F;   /* form-control borders only: 3.3:1 on paper (WCAG 1.4.11); rules stay --hairline */
  --mist:         #9A9994;   /* decorative only — never reading text */
  --mist-text:    #5A5955;   /* informational grey: 5.16:1 on stone, 6.2:1 on paper */
  --graphite:     #444340;
  --ink:          #1B1B1A;
  --carbon:       #0D0D0C;
  --carbon-rule:  #2A2927;
  --rubbing:      #E6E5E1;
  --rubbing-text: #A9A8A3;

  --f-display: 'Noto Serif HK', 'PingFang HK', 'Songti TC', serif;
  --f-text:    'Noto Sans HK', 'PingFang HK', sans-serif;
  --f-num:     'Inter Tight', 'Helvetica Neue', sans-serif;
  --f-mono:    'IBM Plex Mono', 'SF Mono', Menlo, 'Noto Sans HK', monospace;

  --pad: 64px;
  --nav: 56px;
  --gap: 24px;
  --band: 18vh;
  --work-h: min(70vh, calc(82vh - 128px));          /* nav 56 + 24 + the 碑額 block (~52 px) between the nav and the ink's top; the -cut PNGs carry ~3 % clear pad above the first stroke */
  --work-h-wide: min(78vh, calc(82vh - 100px));     /* No. 07 — nothing sits above the glyph, so it only clears the nav */
  --ease: cubic-bezier(.2, 0, 0, 1);
}
@media (max-width: 1279px) { :root { --pad: 40px; } }
@media (max-width: 767px)  { :root { --pad: 20px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font: 400 15px/1.7 var(--f-text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ol, ul, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; }
/* the rubbing ring only where the ground under the element is carbon: nav/bar while the page ground is carbon,
   and the 封 room. The hero's offer link sits on the stone band, so it keeps the graphite ring. */
html[data-ground="carbon"] .nav a:focus-visible,
html[data-ground="carbon"] .bar a:focus-visible,
.lu.is-sealed :focus-visible { outline-color: var(--rubbing); }
.ru__offer:focus-visible { outline-color: var(--graphite); }
main:focus { outline: none; }   /* skip-link target (tabindex=-1) */

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 30;
  background: var(--paper); color: var(--ink); padding: 8px 12px;
  font: 400 12px/1.6 var(--f-mono); letter-spacing: .12em;
}
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type ---------- */
.display { font: 200 clamp(44px, 6.5vw, 104px)/1.2 var(--f-display); letter-spacing: .18em; font-feature-settings: 'halt' 1; }   /* halt: 。， half-width */
.display--zhi { font-size: clamp(36px, 4.5vw, 64px); }
.mono { font: 400 12px/1.6 var(--f-mono); letter-spacing: .12em; font-variant-numeric: tabular-nums; word-break: keep-all; }   /* keep-all: wrap at separators only */
.mono--s { font-size: 11px; }
.bei { font: 400 20px/1.4 var(--f-display); letter-spacing: .1em; }
.name { font: 300 16px/1.6 var(--f-display); letter-spacing: .06em; }
.num { font: 200 clamp(36px, 3.2vw, 48px)/1 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.reading { font: 400 19px/2 var(--f-display); letter-spacing: .14em; }
.notes { font: 400 14px/1.9 var(--f-display); color: var(--mist-text); }
@media (min-width: 1024px) { .vert { writing-mode: vertical-rl; text-orientation: mixed; } }

/* ---------- ink ---------- */
.ink--on-light  { filter: invert(.89); }      /* white → ≈#1C1C1C on paper / stone */
.ink--on-carbon { filter: brightness(.9); }   /* white → ≈#E6E6E6 = --rubbing   */

/* ---------- nav / bar ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav); z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad); color: var(--ink); background: var(--paper);
}
html[data-ground="stone"] .nav { background: var(--stone); }
html[data-ground="carbon"] .nav { background: var(--carbon); }
/* the only time the nav's ground moves gradually: while 錄 becomes 封 (main.js toggles the class for 600 ms) */
html.is-sealing .nav, html.is-sealing .bar { transition: background-color 600ms var(--ease), color 600ms var(--ease); }
.nav__mark { font: 400 18px/1 var(--f-display); letter-spacing: .3em; }
.nav__links { display: flex; gap: 40px; font: 400 12px/1 var(--f-mono); letter-spacing: .12em; }
.nav__links a { padding: 10px 0 6px; border-bottom: 1px solid transparent; }
.nav__links a:hover { border-bottom-color: currentColor; }
html[data-ground="carbon"] .nav { color: var(--rubbing); }

.bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav); z-index: 20;
  background: var(--paper); border-top: 1px solid var(--hairline); color: var(--ink);
}
.bar a { flex: 1; display: flex; align-items: center; justify-content: center; font: 400 13px/1 var(--f-display); letter-spacing: .2em; text-indent: .2em; }
.bar a + a { border-left: 1px solid var(--hairline); }
html[data-ground="stone"] .bar { background: var(--stone); border-color: var(--stone-deep); }
html[data-ground="stone"] .bar a + a { border-color: var(--stone-deep); }
html[data-ground="carbon"] .bar { background: var(--carbon); border-color: var(--carbon-rule); color: var(--rubbing); }
html[data-ground="carbon"] .bar a + a { border-color: var(--carbon-rule); }

/* ---------- 入 #ru ---------- */
.ru {
  position: relative; min-height: 100vh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) var(--band);
  column-gap: var(--gap); padding-inline: var(--pad);
  background: var(--carbon); color: var(--rubbing);
}
.ru__sea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ru > :not(.ru__sea) { position: relative; z-index: 2; }
.ru > .ru__floor { z-index: 1; }   /* paper over the sea, under the words */
/* 記 lives in the black: the poem reads down, right to left, above the floor-line of the piece */
.ru__ji {
  grid-row: 1; grid-column: 1 / 13; align-self: start; justify-self: stretch;
  padding-top: calc(var(--nav) + 40px);
  display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start;
  font: 300 15px/1.85 var(--f-display); letter-spacing: .08em; color: var(--rubbing); opacity: .82;
  height: clamp(300px, 46vh, 420px);
}
.ru__ji p { margin: 0; writing-mode: vertical-rl; text-orientation: mixed; }
.ru__ji .blank { flex: 0 0 1.2em; }   /* a stanza break is one wider gap */
@media (max-width: 1279px) { .ru__ji { font-size: 14px; line-height: 1.8; } }
/* large screens: the poem runs across the black at reading size — the piece paints over its last columns */
@media (min-width: 1280px) {
  .ru__ji {
    font-size: 22px; line-height: 2.2; letter-spacing: .06em; height: clamp(340px, 48vh, 460px);
    z-index: 3; opacity: 1; color: #E2E1DC; mix-blend-mode: difference;   /* pale on the black, dark where it crosses the white strokes */
  }
  .ru__ji .blank { block-size: 1.6em; }
}
.ru__ink {
  grid-row: 1; grid-column: 6 / 13; align-self: end; justify-self: stretch;   /* col 6 clears 落筆為記。 at 1024–1280 */
  width: 100%; height: min(84vh, calc(82vh - var(--nav) - 40px));
  object-fit: contain; object-position: right bottom;
}
@media (min-width: 1280px) { .ru__ink { grid-column: 5 / 13; } }   /* the cover is landscape: give it one more column where 落筆為記。 has room */
.ru__display { grid-row: 1; grid-column: 1 / 8; align-self: end; padding-bottom: 24px; color: var(--rubbing); position: relative; z-index: 1; white-space: nowrap; }
.ru__floor { grid-row: 2; grid-column: 1 / -1; margin-inline: calc(-1 * var(--pad)); background: var(--stone); border-top: 1px solid var(--stone-deep); }
.ru__cat { grid-row: 2; grid-column: 1 / 7; align-self: start; padding-top: 32px; color: var(--mist-text); position: relative; z-index: 1; }
.ru__offer {
  grid-row: 2; grid-column: 7 / 13; justify-self: end; align-self: start; margin-top: 32px;
  color: var(--ink); border-bottom: 1px solid var(--stone-deep); padding-bottom: 2px; position: relative; z-index: 1;
}
.ru__offer:hover { border-bottom-color: var(--ink); }

/* ---------- 行 #hang ---------- */
.hang { position: relative; background: var(--stone); }
.hang__label { position: absolute; top: calc(var(--nav) + 24px); left: var(--pad); color: var(--mist-text); z-index: 2; }

.rail-wrap {
  position: absolute; top: 0; bottom: 0; left: var(--pad);
  width: calc((100% - 2 * var(--pad) - 11 * var(--gap)) / 12);
  padding-top: 50vh; pointer-events: none; z-index: 2;
}
.rail { position: sticky; top: 50%; transform: translateY(-50%); pointer-events: auto; }
.rail__list li { height: 32px; display: flex; align-items: center; font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--mist-text); }
.rail__list a { color: var(--mist-text); padding: 8px 0; }   /* 5.16:1 on stone — they are links */
.rail__list a[aria-current="true"] { color: var(--ink); }
.rail__list .rail__dash { color: var(--mist); }   /* 2.1:1 — decorative; the row's sr-only text says 在冊，不在牆 */
.rail__list .rail__more { color: var(--mist-text); }

.stone {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) var(--band);
  column-gap: var(--gap); padding-inline: var(--pad);
}
.stone__head { grid-row: 1; grid-column: 3 / 9; align-self: start; padding-top: calc(var(--nav) + 24px); padding-bottom: 32px; }
.stone__source { color: var(--mist-text); margin-top: 2px; }
.stone__source:empty { display: none; }
.stone__ink {
  grid-row: 2; grid-column: 3 / 9; align-self: end; justify-self: end;
  width: auto; max-width: 100%; height: auto; max-height: var(--work-h); object-fit: contain; object-position: right bottom;   /* the ink's right edge sits on the box's right edge, one gutter from its 釋文: work + reading are one unit, the silence is outside it */
}
.price__from { color: var(--mist-text); }
.num--tbc { font-size: clamp(28px, 3vw, 44px); color: var(--mist-text); letter-spacing: .06em; }

/* 禮盒 — what actually ships. It sits beside the price, where the choice is made, and not on
   every stone: the wall stays 留白, the receipt stays with the money. */
.kit { margin-top: 24px; max-width: 42ch; }
.kit__label { color: var(--mist-text); margin-bottom: 8px; }
.kit__items { list-style: none; margin: 0; padding: 0; }
.kit__items li {
  font-size: 13px; line-height: 1.9; color: var(--graphite);
  letter-spacing: .04em; padding-left: 14px; text-indent: -14px;
}
.kit__items li::before { content: "· "; color: var(--mist-text); }
.kit__items li.kit__slot { color: var(--mist-text); }

/* No. 05 — sold, and the picture taken down. The plate keeps the work's exact footprint
   so the wall's rhythm does not stumble; the emptiness is the entry. */
.stone__gone {
  grid-row: 2; grid-column: 3 / 9; align-self: end; justify-self: stretch;
  height: var(--work-h); display: grid; place-content: end start;
  border-bottom: 1px solid var(--stone-deep); padding-bottom: 12px;
}
.stone__gone p { color: var(--mist-text); }
.stone--gone .stone__text { grid-column: 9 / 13; }

.stone__text { grid-row: 2; grid-column: 9 / 13; align-self: start; display: flex; align-items: flex-start; gap: 40px; }   /* 釋文 at col 9, 題跋 40 px after it — the notes hug the reading, not the page edge */
.stone__reading { display: grid; justify-items: start; align-content: start; }
.stone__reading .reading { height: auto; max-height: var(--work-h); }
.stone__label { color: var(--mist-text); margin-bottom: 8px; }
.reading .ph { display: block; }
.stone__notes { display: grid; grid-template-rows: auto auto; justify-items: start; align-content: start; }   /* row 2 = the work's height, so the notes' top is level with the reading's */
.stone__notes .notes { height: auto; max-height: 100%; align-self: start; border-right: 1px solid var(--mist); padding-right: 16px; }   /* the rule is as tall as the notes */
.stone__notes:empty, .stone__notes[hidden] { display: none; }
.notes .note { display: block; }
.stone__display { display: none; grid-row: 2; grid-column: 9 / 13; align-self: end; padding-bottom: 32px; font-size: clamp(36px, 3.9vw, 56px); white-space: nowrap; position: relative; z-index: 1; }
.stone--display .stone__display { display: block; }
.stone__display .ln { display: block; }   /* one clause per line beside the glyph (四方，／一字。); a single line again on mobile */
/* No. 07 — the loud moment: the glyph takes cols 3–10 at its own height (≈ 640 px at 900, level with the door);
   碑額, 釋文 and the display line stack in cols 11–12 so nothing sits above the glyph. The head gets its own grid row
   so the reading always follows it, one line or two. */
.stone--wide { grid-template-rows: auto minmax(0, 1fr) var(--band); }
.stone--wide .stone__ink { grid-row: 1 / 3; grid-column: 3 / 11; max-height: var(--work-h-wide); margin-top: calc(var(--nav) + 24px); }
.stone--wide .stone__head { grid-row: 1; grid-column: 10 / 13; padding-bottom: 40px; }
.stone--wide .stone__head .bei { white-space: nowrap; }
.stone--wide .stone__text { grid-row: 2; grid-column: 11 / 13; align-self: start; }
.stone--wide .stone__reading .reading { height: auto; }
.stone--wide .stone__display { grid-row: 2; grid-column: 11 / 13; }
.stone--wide .stone__facts, .stone--wide .stone__ctas, .stone--wide .stone__near-btn, .stone--wide .stone__floor { grid-row: 3; }
.stone__facts { grid-row: 3; grid-column: 3 / 10; align-self: start; padding-top: 32px; color: var(--mist-text); position: relative; z-index: 1; }
.stone__ctas {
  grid-row: 3; grid-column: 10 / 13; justify-self: end; align-self: start; margin-top: 32px;
  display: flex; align-items: baseline; gap: 12px; color: var(--ink); position: relative; z-index: 1;
}
.stone__ctas:empty { display: none; }
.stone__cta { border-bottom: 1px solid var(--stone-deep); padding-bottom: 2px; white-space: nowrap; }   /* 訂此幅 → and, when a print exists, 訂印本 → */
.stone__cta:hover { border-bottom-color: var(--ink); }
.stone__sep { color: var(--mist-text); }
.stone__floor { grid-row: 3; grid-column: 1 / -1; margin-inline: calc(-1 * var(--pad)); border-top: 1px solid var(--stone-deep); }

/* Phase 2 — 近看／遠看 (wired by main.js only when every work has a -detail.png) */
.stone__box { position: relative; overflow: hidden; }
.stone__box .stone__far { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: opacity 600ms var(--ease); }
.stone__box .stone__near {
  position: absolute; left: 50%; top: 50%; width: 200%; height: auto; max-width: none; opacity: 0;
  transform: translate(calc(var(--fx, 50%) * -1), calc(var(--fy, 40%) * -1));   /* static: puts the focus point at the box centre */
  transition: opacity 600ms var(--ease);
}
.stone.is-near .stone__far { opacity: 0; }
.stone.is-near .stone__near { opacity: 1; }
.stone__near-btn {
  grid-row: 3; grid-column: 9 / 11; justify-self: end; align-self: start; margin-top: 32px;
  background: none; border: 0; border-bottom: 1px solid var(--stone-deep); padding: 0 0 2px; color: var(--ink); cursor: pointer;
  position: relative; z-index: 1;
}
.stone__near-btn:hover { border-bottom-color: var(--ink); }

.gap {
  height: 28vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding-inline: var(--pad); align-items: center; border-bottom: 1px solid var(--stone-deep); background: var(--stone);
}
.gap p { grid-column: 3 / 9; color: var(--mist-text); }

/* ---------- 知 #zhi ---------- */
.zhi {
  background: var(--paper); min-height: 100vh; padding: 24vh var(--pad);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
}
.zhi__lines { grid-column: 2 / 7; display: grid; gap: 1.2em; }
.zhi__line { display: block; white-space: nowrap; }
.zhi__ledger { grid-column: 8 / 12; }
.ledger__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; height: 64px; border-bottom: 1px solid var(--hairline); }
.ledger__row:first-child { border-top: 1px solid var(--hairline); }
.ledger dd { color: var(--mist-text); text-align: right; }

/* ---------- 錄 #lu ---------- */
.lu {
  background: var(--paper); min-height: 100vh; padding: calc(var(--nav) + 6vh) var(--pad) 16vh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
  transition: background-color 600ms var(--ease), color 600ms var(--ease);
}
.lu__left { grid-column: 1 / 7; }
.lu__h { margin-bottom: 6vh; white-space: nowrap; }
.prices { border-top: 1px solid var(--hairline); }
.price { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 20px 0 14px; border-bottom: 1px solid var(--hairline); }
.price__lead { color: var(--mist-text); }
.price__num { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: baseline; column-gap: 6px; row-gap: 2px; }
.price__num .price__cur { grid-column: 1 / -1; justify-self: end; }
.price__cur { color: var(--mist-text); }
.lu__process { margin-top: 24px; color: var(--mist-text); }

.form { grid-column: 7 / 12; width: 100%; max-width: 520px; justify-self: end; padding-top: calc(clamp(44px, 6.5vw, 104px) * 1.2 + 6vh); }
.field { margin-bottom: 28px; }
.form__label { display: block; font: 400 15px/1.7 var(--f-text); margin-bottom: 8px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { position: relative; display: block; border: 1px solid var(--field); padding: 14px 8px; text-align: center; cursor: pointer; font: 400 15px/1.4 var(--f-text); }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tile.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tile:has(input:focus-visible) { outline: 2px solid var(--graphite); outline-offset: 3px; }
@supports not selector(:has(*)) { .tile input:focus-visible + span { outline: 2px solid var(--graphite); outline-offset: 10px; } }
input[type="text"], select, textarea {
  width: 100%; background: transparent; border: 1px solid var(--field); border-radius: 0;
  padding: 12px 14px; font: 400 15px/1.6 var(--f-text); color: var(--ink); -webkit-appearance: none; appearance: none;
}
textarea { resize: vertical; min-height: 96px; }
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235A5955' stroke-width='1'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
::placeholder { color: var(--mist-text); opacity: 1; }
.is-invalid { border-color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink); }
.err { font: 400 13px/1.6 var(--f-text); color: var(--ink); margin-top: 6px; }
.counter { text-align: right; color: var(--mist-text); margin-top: 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border: 1px solid var(--field); margin: 4px 0 0; flex: none; background: transparent; display: grid; place-content: center; }
.check input:checked { border-color: var(--ink); }
.check input:checked::before { content: ''; width: 8px; height: 8px; background: var(--ink); }
.check input.is-invalid { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.trust { display: grid; gap: 4px; color: var(--mist-text); margin: 32px 0; }
.form__seal { display: flex; align-items: center; gap: 20px; }
.seal {
  width: 56px; height: 56px; flex: none; border: 1px solid var(--ink); background: transparent;
  font: 400 22px/1 var(--f-display); color: var(--ink); cursor: pointer; padding: 0; display: grid; place-items: center;
}
.seal:hover, .seal:focus-visible { background: var(--ink); color: var(--paper); }
.seal__hint { color: var(--mist-text); }

/* 封 — the room after a valid submit */
.lu.is-sealed { background: var(--carbon); color: var(--rubbing); align-items: center; grid-template-rows: 1fr; }
.sealed { grid-column: 1 / -1; grid-row: 1; justify-self: center; text-align: center; width: 100%; max-width: 960px; display: grid; justify-items: center; }
.sealed__box { display: grid; gap: 24px; justify-items: center; }
.sealed__word { color: var(--rubbing); white-space: nowrap; padding-inline-start: .6em; }   /* optical centre on 已記, the 。 hangs */
.sealed__word:focus { outline: none; }   /* programmatic focus target only (tabindex=-1) */
.sealed__line { font: 200 clamp(28px, 2.8vw, 40px)/1.6 var(--f-display); letter-spacing: .12em; color: var(--rubbing); overflow-wrap: anywhere;
  max-width: 20em; margin-inline: auto; text-wrap: balance; }   /* measured in the inscription's own em: ≤ 17 字 stay on one line, longer sentences split evenly */
.sealed__ref, .sealed__status { color: var(--rubbing-text); }
.sealed__again { color: var(--rubbing); border-bottom: 1px solid var(--carbon-rule); font: 400 15px/1.7 var(--f-text); margin-top: 48px; }
.sealed__again:hover { border-bottom-color: var(--rubbing); }
html.js .sealed { opacity: 0; }
html.js .sealed.is-in { opacity: 1; transition: opacity 1200ms var(--ease); }

/* ---------- 記 #ji ---------- */
/* ---------- 詩 #shi — three rooms of verse. Each poem stands alone, centred, title to its right ---------- */
.shi { background: var(--paper); padding: calc(var(--nav) + 8vh) var(--pad) 10vh; }
.shi__label { color: var(--mist-text); margin-bottom: 6vh; }
.shi__poem {
  display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; gap: 56px;
  min-height: clamp(380px, 54vh, 480px); padding: 8vh 0;
}
.shi__poem + .shi__poem { border-top: 1px solid var(--hairline); }
.shi__title { writing-mode: vertical-rl; text-orientation: mixed; font: 200 clamp(30px, 2.8vw, 40px)/1.2 var(--f-display); letter-spacing: .12em; margin: 0; color: var(--ink); }
.shi__text.poem { writing-mode: vertical-rl; text-orientation: mixed; height: auto; color: var(--graphite); font-size: clamp(15px, 1.5vw, 22px); }   /* .poem's later `font:` shorthand would win at equal specificity */   /* a column is as long as its line; the room grows to fit. Type scales so the 21-column poem fits from 1024 up */
.shi__text p { margin: 0; }
.shi__text .blank { block-size: 1.6em; }

.ji { background: var(--paper); min-height: 100vh; display: grid; grid-template-rows: minmax(82vh, auto) auto; }
.ji__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: var(--nav) var(--pad) 0; align-items: center; }
.poem-block {
  grid-column: 2 / 12; justify-self: center;
  writing-mode: vertical-rl; text-orientation: mixed;
  display: flex; flex-direction: column; align-items: flex-start; height: clamp(440px, 60vh, 500px);   /* longest column ≈ 418 px; the seal stays ≤ 80 px under it at any height */
}
.ji__title { font: 200 96px/1.1 var(--f-display); letter-spacing: .04em; margin-left: 40px; }
.poem { font: 300 22px/2.2 var(--f-display); letter-spacing: .06em; }
.poem .blank { block-size: 2.2em; }
.m-only { display: none; }
.seal-mark {
  writing-mode: horizontal-tb; width: 56px; height: 56px; flex: none; border: 1px solid var(--graphite);
  display: grid; place-items: center; align-self: flex-end; margin-right: 40px; color: var(--graphite);
}
.seal-mark .mono { letter-spacing: .08em; text-indent: .08em; }
.ji__band {
  border-top: 1px solid var(--hairline); min-height: var(--band);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 32px var(--pad) 72px; align-content: start;
}
.ce { grid-column: 1 / 7; }
.ce__head { color: var(--mist-text); height: 32px; display: flex; align-items: center; border-bottom: 1px solid var(--hairline); }
.ce__rows li { height: 32px; border-bottom: 1px solid var(--hairline); color: var(--ink); font: 400 12px/1.6 var(--f-mono); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.ce__rows li > * { display: flex; gap: 16px; align-items: center; height: 100%; }
.ce__rows a .ce__name { border-bottom: 1px solid transparent; }
.ce__rows a:hover .ce__name { border-bottom-color: var(--ink); }
.ce__rows .is-gap, .ce__rows .ce__more { color: var(--mist-text); }
.ji__contact { grid-column: 8 / 13; text-align: right; color: var(--mist-text); display: grid; gap: 8px; align-content: start; }
.ji__contact a { color: var(--ink); border-bottom: 1px solid var(--hairline); }
.ji__contact a:hover { border-bottom-color: var(--ink); }
.flag { margin-left: 8px; }

/* ---------- noscript ---------- */
.noscript { padding: 96px var(--pad); background: var(--paper); display: grid; gap: 32px; }
.noscript li { display: grid; gap: 12px; margin-top: 32px; }
.noscript img { width: 160px; height: auto; filter: invert(.89); }

/* ---------- motion ---------- */
html.js .fade { opacity: 0; }
html.js .fade.is-in { opacity: 1; transition: opacity 400ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html.js .fade, html.js .sealed, html.js .sealed.is-in { opacity: 1; transition: none; }
  .lu, .stone__box .stone__far, .stone__box .stone__near { transition: none; }
}

/* =====================================================================================
   ≤ 1023 px — stacked. Nothing vertical, bottom bar on, the ink stands on the band's top edge.
   ===================================================================================== */
@media (max-width: 1023px) {
  :root { --stage-h: min(60svh, calc(100svh - 288px)); }
  body { padding-bottom: var(--nav); }
  .nav__links { display: none; }
  .bar { display: flex; }
  .hang, .stone, .gap, .zhi, .lu, .shi, .ji { scroll-margin-top: var(--nav); }

  /* 入 */
  .ru { min-height: calc(100svh - var(--nav)); grid-template-columns: 1fr; }
  .ru__ink { grid-row: 1; grid-column: 1; width: 100%; height: auto; max-height: calc(var(--stage-h) - var(--nav) - 16px); margin-top: calc(var(--nav) + 16px); object-position: center bottom; }
  .ru__floor { grid-row: 3 / -1; grid-column: 1; min-height: 0; }
  /* one screen: piece, then the poem in whatever height is left — it scrolls (and drifts) when it does not fit */
  .ru { height: calc(100svh - var(--nav)); min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
  .ru__ji p { writing-mode: horizontal-tb; }
  .ru__ji {
    grid-row: 2; grid-column: 1; display: block; height: auto; min-height: 0; align-self: stretch;
    margin: 20px 0 0; padding: 12px 0 32px; font-size: 14px; line-height: 1.9; opacity: .78;
    overflow-y: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 36px), transparent 100%);
  }
  .ru__ji::-webkit-scrollbar { display: none; }
  .ru__ji .blank { block-size: .7em; }
  .ru__floor { grid-row: 3 / -1; }
  .ru__display { grid-row: 3; grid-column: 1; align-self: start; padding: 24px 0 0; color: var(--ink); font-size: 44px; }
  .ru__cat { grid-row: 4; grid-column: 1; padding-top: 20px; }
  .ru__offer { grid-row: 5; grid-column: 1; justify-self: start; margin: 16px 0 24px; }

  /* 行 */
  .hang__label { position: static; padding: 24px var(--pad) 0; }
  .rail-wrap { position: static; width: auto; padding: 8px var(--pad) 0; pointer-events: auto; }
  .rail { position: static; transform: none; }
  .rail__list { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .rail__list li { height: 40px; }

  .stone { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 40px; }
  .stone > *, .stone__text > * { align-self: stretch; }
  .stone__head { order: 0; padding: 24px 0 0; }                     /* number first — as on desktop, as in a ledger */
  .stone__ink { order: 1; width: 100%; height: calc(var(--stage-h) - 24px); margin-top: 24px; object-position: center bottom; }
  .stone--wide .stone__ink { height: auto; max-height: calc(var(--stage-h) - 24px); }   /* the stage shrinks to the wide glyph; no blank stone above it */
  .stone__floor { order: 2; }
  .stone__facts { order: 3; padding-top: 16px; font-size: 11px; }
  .stone__near-btn { order: 4; align-self: flex-end; margin-top: 8px; }
  .stone__ctas { order: 4; align-self: flex-end; margin-top: 8px; }
  .stone__text { display: contents; }
  .stone--wide .stone__head { padding-bottom: 0; }
  .stone__reading { order: 6; margin-top: 24px; display: block; }
  .stone__reading .reading, .stone--wide .stone__reading .reading { height: auto; font-size: 15px; line-height: 1.9; letter-spacing: .08em; }
  .reading .ph { display: inline; }
  .reading .ph + .ph::before { content: '\3000'; }
  .stone__notes { order: 7; margin-top: 24px; margin-left: 0; display: block; }
  .stone__notes .notes { height: auto; max-height: none; border: 0; padding: 0; font-size: 13px; }
  .stone__display { order: 8; margin-top: 24px; padding-bottom: 0; font-size: 36px; }
  .stone__display .ln { display: inline; }

  .gap { height: 20svh; display: flex; align-items: center; border-bottom: 1px solid var(--stone-deep); }

  /* 知 */
  .zhi { display: block; min-height: 0; padding: 24svh var(--pad); }
  .zhi__lines { gap: 1em; }
  .zhi__line { white-space: normal; }
  .zhi__ledger { margin-top: 64px; }

  /* 錄 */
  .lu { display: block; min-height: 0; padding: calc(var(--nav) + 12svh) var(--pad) 12svh; }
  input[type="text"], select, textarea { font-size: 16px; }   /* iOS Safari zooms into any focused control under 16 px and leaves the page zoomed */
  .lu__h { margin-bottom: 48px; }
  .form { max-width: none; padding-top: 56px; }
  .lu.is-sealed { display: grid; min-height: 100svh; grid-template-columns: 1fr; padding-block: calc(var(--nav) + 24px) 24px; }
  .sealed { grid-column: 1; }

  /* 記 */
  .shi { padding: 48px var(--pad) 32px; }
  .shi__label { margin-bottom: 32px; }
  .shi__poem { display: block; height: auto; padding: 32px 0; }
  .shi__title { writing-mode: horizontal-tb; font-size: 28px; margin: 0 0 20px; }
  .shi__text.poem { writing-mode: horizontal-tb; height: auto; font-size: 18px; line-height: 2; }
  .shi__text .blank { block-size: .9em; }
  .ji { display: block; min-height: 0; }
  .ji__stage { display: block; padding: 24svh var(--pad) 20svh; }
  .poem-block { writing-mode: horizontal-tb; display: block; height: auto; justify-self: auto; width: auto; }
  .ji__title { display: flex; font-size: 64px; letter-spacing: .2em; margin: 0 0 40px; }
  .poem { font-size: 20px; }
  .poem .blank { block-size: 1em; }
  .m-only { display: inline; }
  .seal-mark { margin: 40px 0 0; }
  .ji__band { display: block; min-height: 0; padding: 32px var(--pad) 48px; }
  .ji__contact { text-align: left; margin-top: 40px; }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .ru__ink { height: calc(100% - var(--nav) - 24px); }
  .zhi__ledger, .form, .poem-block, .ce { max-width: 640px; }
}