/* Go Rin no Sho. One type system. Japanese: Kaisei Tokumin (a carved-block mincho), 800 for display, set vertically,
   right to left, on the right-hand page of every spread, as the book reads; 500 for text. Latin: Newsreader, display at
   optical size 72 and weight 250–320 with tight tracking, text at 14, italic only for titles of works. Colours are the
   print's own: washi, sumi, beni (safflower red), ai (indigo), Ryūsen's gold, the bench at night.

   The spreads sit inside a printed frame (../scene/page.js): --pg-m is the frame's inset, --pg-c the centre column,
   both in screen heights, so the words land inside the rules the block printed. */
.gorin_wrap {
  --paper: #ece5d4;
  --paper-2: #e2d9c4;
  --sumi: #191613;
  --sumi-2: #4f463c;
  --beni: #b2402b;
  --ai: #2a4767;
  --bench: #0d0a08;
  --ink: #efe8d8;
  --ink-2: rgba(239, 232, 216, 0.7);
  --jp: 'MS Kaisei', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --la: 'MS News', 'Iowan Old Style', Georgia, serif;
  --gut: clamp(16px, 2.6vw, 40px);
}
.gorin_wrap {
  position: relative;
  color: var(--ink);
  background: none;
  font-family: var(--la);
  font-variation-settings: 'opsz' 14;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
.gorin_wrap .gorin_contain { position: relative; }
.gorin_wrap.is-loading, .gorin_wrap .gorin_hold { -webkit-user-select: none; user-select: none; }
/* loading from the first paint (the class is in the markup, before any script): a finger rubs the sheet, never pans the page */
.gorin_wrap.is-loading { touch-action: none; }
.gorin_wrap [lang='ja'] { font-family: var(--jp); font-variation-settings: normal; }
.gorin_wrap em, .gorin_wrap .gorin_title_it { font-style: italic; }
.gorin_wrap .gorin_world { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; pointer-events: none; }
.gorin_wrap .gorin_veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(5, 3, 2, 0.82) 100%); }

/* ---------- chrome: the print's furniture ---------- */
.gorin_wrap .gorin_chrome { position: fixed; inset: 0; z-index: 40; pointer-events: none; color: #f4efe4; mix-blend-mode: difference; transition: opacity 0.6s ease; }
.gorin_wrap .gorin_chrome.is-hidden { opacity: 0; }
.gorin_wrap .gorin_chrome > * { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); }
/* on a leaf of the book the page has its own title (in the centre column): the mast steps aside */
.gorin_wrap .gorin_chrome.is-page .gorin_mast, .gorin_wrap .gorin_chrome.is-page .gorin_side { opacity: 0; pointer-events: none; }
.gorin_wrap .gorin_chrome.is-page .gorin_index_btn { transform: translate(calc(var(--gut) - 6px), calc(6px - var(--gut))) scale(0.7); transform-origin: 100% 0; }
.gorin_wrap .gorin_chrome.is-page .gorin_index_label { opacity: 0; }
.gorin_wrap .gorin_mast { position: absolute; left: var(--gut); top: var(--gut); display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; pointer-events: auto; }
.gorin_wrap .gorin_slip {
  writing-mode: vertical-rl; font-size: 17px; letter-spacing: 0.12em; padding: 10px 5px 12px; line-height: 1;
  border: 1px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px;
  background: linear-gradient(to bottom, rgba(42, 71, 103, 0.55), transparent 55%);
}
.gorin_wrap .gorin_mast_en { display: flex; flex-direction: column; padding-top: 2px; }
.gorin_wrap .gorin_mast_title { font-size: 15px; font-variation-settings: 'opsz' 18; font-weight: 500; }
.gorin_wrap .gorin_mast_by { font-size: 12px; opacity: 0.7; }
.gorin_wrap .gorin_index_btn { position: absolute; right: var(--gut); top: var(--gut); display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; font: inherit; font-size: 13px; cursor: pointer; pointer-events: auto; padding: 0; }
.gorin_wrap .gorin_ring { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: 19px; line-height: 1; }
.gorin_wrap .gorin_side { position: absolute; right: calc(var(--gut) + 150px); top: calc(var(--gut) + 12px); display: flex; gap: 18px; align-items: baseline; pointer-events: auto; }
.gorin_wrap .gorin_side_btn { background: none; border: 0; color: inherit; font: inherit; font-size: 12px; cursor: pointer; padding: 4px 0; display: flex; gap: 6px; align-items: baseline; }
.gorin_wrap .gorin_side_jp { font-size: 13px; }
.gorin_wrap .gorin_gpu { position: absolute; right: 0; top: 100%; text-align: right; margin: 0; font-size: 11px; opacity: 0; max-width: 220px; transition: opacity 0.3s; }
.gorin_wrap .gorin_side:hover .gorin_gpu, .gorin_wrap .gorin_side:focus-within .gorin_gpu { opacity: 0.6; }
/* kento: the L-shaped kagi at the lower right, the straight hikitsuke at the lower left: the screen is a sheet registered on the block */
.gorin_wrap .gorin_kento_kagi { position: absolute; right: calc(var(--gut) - 6px); bottom: calc(var(--gut) - 6px); width: 18px; height: 18px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: 0.6; }
.gorin_wrap .gorin_kento_hiki { position: absolute; left: calc(var(--gut) - 6px); bottom: calc(var(--gut) - 6px); width: 18px; height: 0; border-bottom: 1px solid currentColor; opacity: 0.6; }
.gorin_wrap .gorin_chrome.is-page .gorin_kento { opacity: 0; }

/* ---------- contents (mokuroku): the series' table, read right to left ---------- */
.gorin_wrap .gorin_index { position: fixed; inset: 0; z-index: 60; background: var(--paper); color: var(--sumi); animation: gorin_lay 0.7s cubic-bezier(0.2, 0.7, 0.1, 1); }
@keyframes gorin_lay { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.gorin_wrap .gorin_index[hidden] { display: none; }
.gorin_wrap .gorin_index_sheet { position: absolute; inset: calc(var(--gut) + 70px) var(--gut) calc(var(--gut) + 30px); display: flex; flex-direction: column; }
.gorin_wrap .gorin_index_head { margin: 0 0 4vh; display: flex; align-items: baseline; gap: 18px; }
.gorin_wrap .gorin_index_jp { font-size: 26px; letter-spacing: 0.2em; font-weight: 500; }
.gorin_wrap .gorin_index_en { font-size: 14px; color: var(--sumi-2); }
.gorin_wrap .gorin_index_list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: row-reverse; border-top: 1px solid rgba(25, 22, 19, 0.3); }
.gorin_wrap .gorin_index_item { flex: 1; border-left: 1px solid rgba(25, 22, 19, 0.16); }
.gorin_wrap .gorin_index_item:last-child { border-left: 0; }
.gorin_wrap .gorin_index_link { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 3vh 1.2vw 0; color: inherit; text-decoration: none; transition: background 0.3s ease; }
.gorin_wrap .gorin_index_k { font-size: clamp(80px, 15vh, 190px); line-height: 1; font-weight: 800; transition: color 0.25s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.1, 1); }
.gorin_wrap .gorin_index_name { font-size: clamp(22px, 2vw, 34px); font-weight: 300; font-variation-settings: 'opsz' 48; letter-spacing: -0.02em; margin-top: auto; }
.gorin_wrap .gorin_index_note { font-size: 13px; color: var(--sumi-2); padding: 8px 0 3vh; height: 6.2em; box-sizing: border-box; }
.gorin_wrap .gorin_index_link:hover, .gorin_wrap .gorin_index_link:focus-visible { background: rgba(178, 64, 43, 0.06); }
.gorin_wrap .gorin_index_link:hover .gorin_index_k, .gorin_wrap .gorin_index_link:focus-visible .gorin_index_k { color: var(--beni); transform: translateY(-6px); }
.gorin_wrap .gorin_index_close { position: absolute; right: 0; top: -54px; background: none; border: 0; color: var(--sumi); font: inherit; font-size: 14px; padding: 10px 0; cursor: pointer; }
@media (max-width: 767px) {
  .gorin_wrap .gorin_index_list { flex-direction: column; }
  .gorin_wrap .gorin_index_item { border-left: 0; border-bottom: 1px solid rgba(25, 22, 19, 0.16); }
  .gorin_wrap .gorin_index_link { flex-direction: row; align-items: center; gap: 16px; padding: 1.4vh 0; }
  .gorin_wrap .gorin_index_k { font-size: 7vh; }
  .gorin_wrap .gorin_index_name { margin-top: 0; font-size: 22px; }
  .gorin_wrap .gorin_index_note { padding: 0; min-height: 0; margin-left: auto; text-align: right; max-width: 40%; }
}

/* ---------- loader: one line of caption on the sheet itself, centred at its foot ---------- */
.gorin_wrap .gorin_loader { position: fixed; inset: 0; z-index: 50; pointer-events: none; transition: opacity 0.9s ease; }
.gorin_wrap .gorin_loader.is-done { opacity: 0; }
.gorin_wrap .gorin_loader_cap { position: absolute; left: 50%; bottom: calc(7vh + 18px); transform: translateX(-50%); width: min(560px, calc(100vw - 2 * var(--gut) - 40px)); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--ink); transition: color 0.8s ease; }
.gorin_wrap .gorin_loader.is-laid .gorin_loader_cap { color: var(--sumi); }
.gorin_wrap .gorin_loader_k { margin: 0; display: flex; gap: 12px; align-items: baseline; font-size: 13px; letter-spacing: 0.01em; opacity: 0.8; }
.gorin_wrap .gorin_loader_jp { font-size: 17px; letter-spacing: 0.2em; font-weight: 800; }
.gorin_wrap .gorin_loader_hint { margin: 0; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; font-weight: 300; font-style: italic; font-variation-settings: 'opsz' 36; letter-spacing: -0.008em; opacity: 0; transform: translateY(6px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1); text-wrap: balance; }
.gorin_wrap .gorin_loader.is-ready .gorin_loader_hint { opacity: 1; transform: none; }
.gorin_wrap .gorin_loader_bar { width: 160px; height: 1px; background: currentColor; opacity: 0.25; position: relative; overflow: hidden; }
.gorin_wrap .gorin_loader_fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: currentColor; }
.gorin_wrap .gorin_loader_bar:has(.gorin_loader_fill) { opacity: 0.5; }
.gorin_wrap .gorin_loader_sound { position: absolute; right: calc(var(--gut) + 8px); bottom: calc(var(--gut) + 4px); pointer-events: auto; background: none; border: 0; padding: 8px 4px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; transition: color 0.8s ease; }
.gorin_wrap .gorin_loader.is-laid .gorin_loader_sound { color: var(--sumi-2); }
.gorin_wrap .gorin_loader_sound:focus-visible, .gorin_wrap .gorin_index_btn:focus-visible, .gorin_wrap .gorin_side_btn:focus-visible, .gorin_wrap .gorin_mast:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.gorin_wrap .gorin_baren { position: fixed; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; left: 0; top: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(60, 40, 22, 0.0) 52%, rgba(185, 150, 98, 0.85) 54%, rgba(120, 88, 52, 0.9) 60%, rgba(120, 88, 52, 0) 63%),
    repeating-conic-gradient(from 0deg, rgba(170, 130, 80, 0.55) 0 6deg, rgba(110, 78, 44, 0.55) 6deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 61%, transparent 62%); mask: radial-gradient(circle, #000 61%, transparent 62%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease; }
.gorin_wrap .gorin_baren.is-on { opacity: 0.92; }

/* ---------- stages (over the canvas: the screen is the sheet) ---------- */
.gorin_wrap .gorin_stage { position: relative; z-index: 2; margin-top: -100vh; pointer-events: none; }
.gorin_wrap .gorin_stage.is-title { margin-top: 0; }
.gorin_wrap .gorin_hold { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.gorin_wrap .gorin_hold a, .gorin_wrap .gorin_hold button { pointer-events: auto; }
/* a cinematic shade at the foot of the sheet, under the words only while there are words */
.gorin_wrap .gorin_scrim { position: absolute; inset: auto 0 0 0; height: 46vh; background: linear-gradient(to top, rgba(10, 7, 5, 0.78), rgba(10, 7, 5, 0.42) 45%, transparent); opacity: 0; }
/* words over a print: subtitles, left, in paper on the shade */
.gorin_wrap .gorin_sub, .gorin_wrap .gorin_credit { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 54px); max-width: min(620px, calc(100vw - 2 * var(--gut))); margin: 0; opacity: 0; visibility: hidden; color: var(--ink); }
.gorin_wrap .gorin_sub_t { margin: 0; font-size: clamp(21px, 1.75vw, 30px); line-height: 1.3; font-weight: 300; font-variation-settings: 'opsz' 36; letter-spacing: -0.012em; text-wrap: pretty; }
.gorin_wrap .gorin_sub_jp { margin: 0 0 12px; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.7; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-2); }
.gorin_wrap .gorin_sub_src { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.gorin_wrap .gorin_credit { max-width: 440px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.gorin_wrap .gorin_credit_t { color: var(--ink); font-style: italic; }
.gorin_wrap .gorin_hint { position: absolute; right: var(--gut); bottom: calc(var(--gut) + 54px); margin: 0; font-size: 13px; color: var(--ink); opacity: 0; display: flex; gap: 10px; align-items: center; mix-blend-mode: difference; }
.gorin_wrap .gorin_hint::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.2); }
.gorin_wrap .gorin_cue { position: absolute; left: 50%; bottom: calc(2.8vh + 10px); transform: translateX(-50%); margin: 0; font-size: 12px; color: var(--sumi-2); display: flex; align-items: center; gap: 12px; opacity: 0; white-space: nowrap; }
.gorin_wrap .gorin_cue::before { content: ''; width: 12px; height: 12px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform-origin: 100% 100%; animation: gorin_corner 2.4s ease-in-out infinite; }
@keyframes gorin_corner { 0%, 100% { transform: none; } 50% { transform: translate(-6px, -6px) rotate(-6deg); } }

/* ---------- the poster (序): the print is the poster; these are the words set on it ---------- */
.gorin_wrap .gorin_hero { position: absolute; inset: 0; color: var(--sumi); opacity: 0; }
.gorin_wrap .gorin_hero_text { position: absolute; left: calc(2.8vh + clamp(24px, 4.6vw, 76px)); right: calc(2.8vh + clamp(24px, 4.6vw, 76px)); bottom: calc(2.8vh + clamp(26px, 6vh, 70px)); display: flex; align-items: flex-end; justify-content: space-between; gap: 6vw; }
.gorin_wrap .gorin_hero_title { margin: 0; font-size: clamp(54px, 7.2vw, 140px); line-height: 0.88; font-weight: 270; font-variation-settings: 'opsz' 72; letter-spacing: -0.045em; white-space: nowrap; }
.gorin_wrap .gorin_hero_l1 { display: block; }
.gorin_wrap .gorin_hero_l2 { display: block; font-style: italic; font-weight: 300; letter-spacing: -0.04em; padding-left: 0.42em; }
.gorin_wrap .gorin_hero_side { width: min(25rem, 32vw); padding-bottom: 0.4em; }
.gorin_wrap .gorin_hero_lede { margin: 0; font-size: 16px; line-height: 1.55; color: var(--sumi-2); text-wrap: pretty; }
.gorin_wrap .gorin_hero_void { margin: 2vh 0 0; padding-top: 1.6vh; border-top: 1px solid rgba(25, 22, 19, 0.22); display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; font-style: italic; color: var(--sumi-2); }
.gorin_wrap .gorin_hero_void [lang='ja'] { font-style: normal; font-weight: 800; font-size: 18px; color: transparent; -webkit-text-stroke: 0.6px var(--sumi-2); }
/* the five rings: each printed character is its own way in; its name shows when the hand is over it */
.gorin_wrap .gorin_rings { list-style: none; margin: 0; padding: 0; }
.gorin_wrap .gorin_ring_i { position: absolute; left: 0; top: 0; width: var(--ring-px, 120px); height: var(--ring-px, 120px); transform: translate(-50%, -50%); }
.gorin_wrap .gorin_ring_i a { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; border-radius: 4px; }
.gorin_wrap .gorin_ring_i a:focus-visible { outline: 1px solid var(--sumi); outline-offset: 8px; }
.gorin_wrap .gorin_ring_tag { position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, 6px); display: flex; gap: 8px; align-items: baseline; white-space: nowrap; opacity: 0; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.1, 1); }
.gorin_wrap .gorin_ring_i a:hover .gorin_ring_tag, .gorin_wrap .gorin_ring_i a:focus-visible .gorin_ring_tag { opacity: 1; transform: translate(-50%, 0); }
.gorin_wrap .gorin_ring_n { font-size: 13px; font-family: var(--jp); color: var(--sumi-2); }
.gorin_wrap .gorin_ring_name { font-size: 15px; font-style: italic; }
.gorin_wrap .gorin_ring_note { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); width: 14em; text-align: center; font-size: 12.5px; line-height: 1.45; font-style: italic; color: var(--sumi-2); transition: opacity 0.35s ease; }
.gorin_wrap .gorin_ring_i a:hover .gorin_ring_note { opacity: 0; }

/* ---------- the map: captions set like Ryūsen's own cartouches (gold paper, a double sumi rule) ---------- */
/* a place on the road: the province's name on a tall slip, the year beside it, one line */

/* ---------- the spreads: leaves of the book ---------- */
.gorin_wrap .is-page, .gorin_wrap .is-leaf { color: var(--sumi); }
/* the right page: Japanese, vertical, right to left */
/* the left page: the Latin, a kicker at the head and the words standing at the foot */
/* the title leaf of each scroll (扉) */
/* the carpenter's line, under the words on the left page */
.gorin_wrap .gorin_inkline { position: relative; margin-top: 3vh; height: 24vh; touch-action: pan-y; cursor: grab; pointer-events: auto; border-top: 1px solid rgba(25, 22, 19, 0.2); }
.gorin_wrap .gorin_inkline_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gorin_wrap .gorin_inkline_hint { position: absolute; left: 0; bottom: 0; margin: 0; font-size: 12.5px; color: var(--sumi-2); pointer-events: none; }
/* the gaze: whatever you look at goes soft */
.gorin_wrap .is-gaze { pointer-events: auto; }
.gorin_wrap .gorin_gaze_word { display: inline-block; transition: filter 0.35s ease, opacity 0.35s ease; }
.gorin_wrap .gorin_gaze_word.is-seen { filter: blur(7px); opacity: 0.4; }
/* forging and polishing */
.gorin_wrap .gorin_days_row { margin: 0; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.gorin_wrap .gorin_days_row + .gorin_days_row { margin-top: 1.4vh; }
.gorin_wrap .gorin_days_n { font-size: clamp(84px, 11vw, 210px); line-height: 0.9; font-weight: 230; font-variation-settings: 'opsz' 72; letter-spacing: -0.055em; font-variant-numeric: tabular-nums lining-nums; min-width: 4.3ch; }
.gorin_wrap .gorin_days_row:last-child .gorin_days_n { color: var(--beni); }
.gorin_wrap .gorin_days_what { font-size: clamp(20px, 1.8vw, 30px); font-weight: 300; font-style: italic; }

/* the duel */
.gorin_wrap .gorin_duel { position: absolute; left: 50%; bottom: calc(var(--gut) + 30px); transform: translateX(-50%); width: min(460px, calc(100vw - 2 * var(--gut))); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; visibility: hidden; text-align: center; color: var(--ink); transition: opacity 0.5s ease; }
.gorin_wrap .gorin_duel_ring { width: clamp(120px, 17vh, 170px); height: auto; overflow: visible; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55)); }
.gorin_wrap .gorin_duel_track { fill: rgba(12, 9, 7, 0.36); stroke: rgba(239, 232, 216, 0.38); stroke-width: 1; }
.gorin_wrap .gorin_duel_win { fill: none; stroke: var(--beni); stroke-width: 7; stroke-linecap: butt; transition: stroke 0.15s ease, stroke-width 0.15s ease; }
.gorin_wrap .gorin_duel_ring.is-flash .gorin_duel_win { stroke: #f2c2b4; stroke-width: 11; }
.gorin_wrap .gorin_duel_hold { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 452.4; stroke-dashoffset: 452.4; }
.gorin_wrap .gorin_duel_hand { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.gorin_wrap .gorin_duel_tip { fill: var(--ink); }
.gorin_wrap .gorin_duel_k { fill: var(--ink-2); font-family: var(--jp); font-size: 22px; font-weight: 800; letter-spacing: 0.06em; }
.gorin_wrap .gorin_duel_ring.is-holding .gorin_duel_k { fill: var(--ink); }
.gorin_wrap .gorin_duel_hint { margin: 4px 0 0; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.3; font-weight: 300; font-variation-settings: 'opsz' 36; letter-spacing: -0.005em; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7); text-wrap: balance; }
.gorin_wrap .gorin_duel_say { margin: 0; min-height: 1.4em; font-size: 15px; font-style: italic; color: #f2c2b4; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
.gorin_wrap .is-fire .gorin_hold { touch-action: pan-y; }

/* the legend, in states (over the canvas: the print at the right gains its blocks) */
.gorin_wrap .gorin_legend { position: absolute; left: var(--gut); top: calc(var(--gut) + 92px); bottom: calc(var(--gut) + 54px); width: min(36vw, 520px); }
.gorin_wrap .gorin_legend_kick { margin: 0; font-size: 13px; color: var(--ink-2); display: flex; gap: 12px; align-items: baseline; }
.gorin_wrap .gorin_legend_kick span { font-size: 22px; color: var(--ink); letter-spacing: 0.12em; }
.gorin_wrap .gorin_legend_lede { position: absolute; left: 0; top: 64px; margin: 0; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.3; font-weight: 300; font-variation-settings: 'opsz' 36; letter-spacing: -0.012em; opacity: 0; }
.gorin_wrap .gorin_states { list-style: none; margin: 0; padding: 0; }
.gorin_wrap .gorin_state { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; }
.gorin_wrap .gorin_state_year { font-size: clamp(120px, 15vw, 240px); line-height: 1; margin-bottom: 4px; font-weight: 200; font-variation-settings: 'opsz' 72; letter-spacing: -0.06em; font-variant-numeric: lining-nums; margin-left: -0.05em; }
.gorin_wrap .gorin_state_block { font-size: 13px; color: var(--beni); filter: brightness(1.6); }
.gorin_wrap .gorin_state_src { font-size: clamp(22px, 1.9vw, 30px); font-weight: 400; font-variation-settings: 'opsz' 36; letter-spacing: -0.012em; }
.gorin_wrap .gorin_state_text { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 30rem; }

@media (max-width: 767px) {
  .gorin_wrap { font-size: 16px; }
  .gorin_wrap .gorin_mast_en { display: none; }
  .gorin_wrap .gorin_index_label { display: none; }
  .gorin_wrap .gorin_sub, .gorin_wrap .gorin_credit { right: var(--gut); bottom: calc(var(--gut) + 44px); max-width: none; }
  .gorin_wrap .gorin_sub_t { font-size: 20px; }
  .gorin_wrap .gorin_side { right: calc(var(--gut) + 56px); top: calc(var(--gut) + 8px); gap: 14px; }
  .gorin_wrap .gorin_side_btn [data-sound-label], .gorin_wrap .gorin_side_btn [data-gfx-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .gorin_wrap .gorin_side_jp { font-size: 16px; padding: 6px; }
  .gorin_wrap .gorin_kento_hiki { display: none; }
  .gorin_wrap .gorin_hint { bottom: calc(var(--gut) - 4px); top: auto; left: var(--gut); right: var(--gut); font-size: 12px; }
  .gorin_wrap .gorin_loader_cap { bottom: calc(5vh + 30px); }
  .gorin_wrap .gorin_duel { width: calc(100vw - 2 * var(--gut)); }
  .gorin_wrap .gorin_legend { width: auto; right: var(--gut); top: 44vh; }
  .gorin_wrap .gorin_legend_kick { display: none; }
  .gorin_wrap .gorin_legend_lede { top: 0; font-size: 21px; }
  .gorin_wrap .gorin_state_year { font-size: 92px; }
}
/* tall screens: a single leaf, its centre column at the right edge; the Japanese stands at the head of the page, the
   Latin at its foot; the poster's words go to the foot of the sheet */
@media (max-aspect-ratio: 11/10) {
  .gorin_wrap .gorin_days_n { font-size: clamp(64px, 18vw, 130px); }
  .gorin_wrap .gorin_inkline { height: 16vh; }
  .gorin_wrap .gorin_hero_text { left: calc(2.8vh + var(--gut)); right: calc(2.8vh + var(--gut)); bottom: calc(2.8vh + var(--gut) + 22px); flex-direction: column; align-items: flex-start; gap: 2.4vh; }
  .gorin_wrap .gorin_hero_title { font-size: clamp(44px, 12.5vw, 96px); }
  .gorin_wrap .gorin_hero_side { width: auto; }
  .gorin_wrap .gorin_hero_lede { font-size: 15px; }
  .gorin_wrap .gorin_ring_tag { left: auto; right: calc(100% + 12px); top: 50%; transform: translate(-6px, -50%); }
  .gorin_wrap .gorin_ring_i a:hover .gorin_ring_tag { transform: translate(0, -50%); }
  .gorin_wrap .gorin_ring_note { left: auto; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: 9em; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .gorin_wrap * { transition: none !important; animation: none !important; } }


/* ---------- shared: the book and the map (tools/share.py copies this region) ---------- */
.gorin_wrap {
  --gold: #e8cf8f;
  --pg-m: 4vh; --pg-k: 0.75vh; --pg-c: 6.2vh; --pg-pad: clamp(18px, 4.2vh, 46px);
  --pg-in: calc(var(--pg-m) + var(--pg-k) + var(--pg-pad));
}
.gorin_wrap .gorin_mapcap { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 50px); width: min(460px, calc(100vw - 2 * var(--gut))); box-sizing: border-box; margin: 0; padding: 22px 26px 22px; color: var(--sumi); background: var(--gold); border: 2px solid var(--sumi); box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 4px var(--sumi), 0 18px 40px -18px rgba(20, 12, 4, 0.55); opacity: 0; visibility: hidden; }
.gorin_wrap .gorin_mapcap_k { margin: 0 0 12px; font-size: 13px; color: var(--sumi-2); display: flex; gap: 12px; align-items: baseline; }
.gorin_wrap .gorin_mapcap_k span { font-size: 24px; color: var(--sumi); font-weight: 800; letter-spacing: 0.08em; }
.gorin_wrap .gorin_mapcap_t { margin: 0; font-size: clamp(22px, 1.9vw, 32px); line-height: 1.18; font-weight: 320; font-variation-settings: 'opsz' 48; letter-spacing: -0.018em; text-wrap: balance; }
.gorin_wrap .gorin_mapcap_jp { margin: 0 0 12px; font-size: 17px; letter-spacing: 0.08em; font-weight: 500; }
.gorin_wrap .gorin_mapcap_src { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--sumi-2); }
.gorin_wrap .gorin_mapcap.is-title { width: min(620px, calc(100vw - 2 * var(--gut))); padding: 30px 34px 28px; }
.gorin_wrap .gorin_mapcap.is-title .gorin_mapcap_k span { font-size: clamp(30px, 3.4vw, 48px); }
.gorin_wrap .gorin_mapcap.is-title .gorin_mapcap_t { font-size: clamp(34px, 3.6vw, 60px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 280; }
.gorin_wrap .gorin_pin { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; align-items: start; opacity: 0; visibility: hidden; color: var(--sumi); will-change: transform; }
.gorin_wrap .gorin_pin::before { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--sumi); box-shadow: 0 0 0 4px rgba(236, 229, 212, 0.6); }
.gorin_wrap .gorin_pin_jp { grid-row: 1 / 3; margin: 20px 0 0 22px; writing-mode: vertical-rl; font-size: 34px; line-height: 1; letter-spacing: 0.06em; font-weight: 800; padding: 12px 8px; background: var(--gold); border: 2px solid var(--sumi); box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 3px var(--sumi), 0 14px 30px -14px rgba(20, 12, 4, 0.6); }
.gorin_wrap .gorin_pin_n { margin-top: 14px; font-size: clamp(64px, 7vw, 120px); line-height: 0.85; font-weight: 250; font-variation-settings: 'opsz' 72; letter-spacing: -0.05em; color: #fbf6ea; text-shadow: 0 2px 20px rgba(20, 12, 4, 0.55), 0 0 2px rgba(20, 12, 4, 0.4); font-variant-numeric: lining-nums; }
.gorin_wrap .gorin_pin_t { width: 17em; margin-top: 10px; padding: 10px 14px; font-size: 15px; line-height: 1.4; background: rgba(240, 233, 216, 0.94); box-shadow: 0 10px 24px -14px rgba(20, 12, 4, 0.6); text-wrap: pretty; }
.gorin_wrap .gorin_pin.is-left { grid-template-columns: auto auto; direction: rtl; }
.gorin_wrap .gorin_pin.is-left > * { direction: ltr; }
.gorin_wrap .gorin_pin.is-left .gorin_pin_jp { margin: 20px 22px 0 0; }
.gorin_wrap .gorin_pin.is-left::before { left: auto; right: -9px; }
.gorin_wrap .gorin_pin.is-under::before { display: none; }
.gorin_wrap .gorin_pin.is-under .gorin_pin_jp { margin: 0 0 0 0; }
.gorin_wrap .gorin_credit.is-laid { left: auto; right: var(--gut); bottom: calc(var(--gut) + 40px); text-align: right; color: #fbf6ea; text-shadow: 0 1px 14px rgba(20, 12, 4, 0.8); }
.gorin_wrap .gorin_credit.is-laid .gorin_credit_t { color: #fff; }
.gorin_wrap .gorin_bk_spread { position: absolute; inset: 0; opacity: 0; visibility: hidden; color: var(--sumi); }
.gorin_wrap .gorin_bk_r, .gorin_wrap .gorin_bk_l { position: absolute; top: var(--pg-in); bottom: var(--pg-in); box-sizing: border-box; }
.gorin_wrap .gorin_bk_r { left: calc(50vw + var(--pg-c) / 2 + var(--pg-pad)); right: var(--pg-in); display: flex; flex-direction: row-reverse; align-items: flex-start; gap: clamp(16px, 2.6vh, 36px); }
.gorin_wrap .gorin_bk_l { left: var(--pg-in); right: calc(50vw + var(--pg-c) / 2 + var(--pg-pad)); display: flex; flex-direction: column; }
.gorin_wrap .gorin_bk_v { margin: 0; writing-mode: vertical-rl; font-weight: 800; line-height: 1; }
.gorin_wrap .gorin_bk_v.is-giant { font-size: calc((100vh - 2 * var(--pg-in)) / 4.3); letter-spacing: 0.02em; }
.gorin_wrap .gorin_bk_v.is-name { font-size: calc((100vh - 2 * var(--pg-in)) / 3.25); letter-spacing: 0.02em; }
.gorin_wrap .gorin_bk_v.is-scroll { font-size: calc((100vh - 2 * var(--pg-in)) / 3.3); letter-spacing: 0.04em; margin-right: auto; margin-left: auto; }
.gorin_wrap .gorin_bk_v.is-text { font-size: clamp(16px, 2.3vh, 24px); font-weight: 500; line-height: 2; letter-spacing: 0.1em; max-height: 100%; color: var(--sumi-2); margin-top: 0.4em; }
.gorin_wrap .gorin_bk_v.is-quote { font-size: clamp(32px, 6.4vh, 72px); line-height: 1.55; letter-spacing: 0.05em; max-height: 100%; }
.gorin_wrap .gorin_bk_v.is-quote.is-small { font-size: clamp(28px, 5.4vh, 60px); }
.gorin_wrap .gorin_bk_v.is-quote.is-gaze { font-size: calc((100vh - 2 * var(--pg-in)) / 13.8); }
.gorin_wrap .gorin_bk_k { margin: 0 0 auto; font-size: 13px; color: var(--sumi-2); display: flex; gap: 12px; align-items: baseline; }
.gorin_wrap .gorin_bk_k span { font-size: 22px; color: var(--sumi); font-weight: 800; letter-spacing: 0.08em; }
.gorin_wrap .gorin_bk_display { margin: 0; font-size: clamp(30px, 3.5vw, 64px); line-height: 1.06; font-weight: 290; font-variation-settings: 'opsz' 72; letter-spacing: -0.028em; text-wrap: balance; max-width: 17em; }
.gorin_wrap .gorin_bk_display.is-mid { font-size: clamp(26px, 2.6vw, 46px); line-height: 1.12; letter-spacing: -0.02em; max-width: 19em; }
.gorin_wrap .gorin_bk_display.is-huge { font-size: clamp(58px, 7vw, 132px); line-height: 0.9; letter-spacing: -0.045em; }
.gorin_wrap .gorin_bk_display strong { font-weight: 480; }
.gorin_wrap .gorin_bk_note { margin: 2.6vh 0 0; max-width: 31rem; font-size: 16px; line-height: 1.55; color: var(--sumi-2); text-wrap: pretty; }
.gorin_wrap .gorin_bk_src { margin: 2.6vh 0 0; padding-top: 1.4vh; border-top: 1px solid rgba(25, 22, 19, 0.28); max-width: 31rem; font-size: 12.5px; line-height: 1.45; color: var(--sumi-2); }
.gorin_wrap .gorin_bk_r.is-figure { justify-content: center; }
.gorin_wrap .gorin_bk_fig { margin: 0; height: 100%; }
.gorin_wrap .gorin_bk_fig.is-portrait { aspect-ratio: 759 / 2000; }
.gorin_wrap .gorin_bk_fig_img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; filter: saturate(0.92) contrast(1.02); }
.gorin_wrap .gorin_bk_title { margin: 0 0 0 -0.06em; font-size: clamp(96px, 13.5vw, 252px); line-height: 0.84; font-weight: 250; font-variation-settings: 'opsz' 72; letter-spacing: -0.055em; }
.gorin_wrap .gorin_bk_jp { margin: 3.2vh 0 0; font-size: clamp(16px, 2.2vh, 22px); letter-spacing: 0.08em; font-weight: 500; line-height: 1.7; max-width: 26em; }
.gorin_wrap .gorin_bk_en { margin: 1vh 0 0; font-size: clamp(22px, 2vw, 34px); line-height: 1.2; font-weight: 300; font-style: italic; font-variation-settings: 'opsz' 48; letter-spacing: -0.012em; max-width: 22em; text-wrap: balance; }
.gorin_wrap .is-carpenter .gorin_bk_k { margin-bottom: 4vh; }
.gorin_wrap .is-carpenter .gorin_bk_display { margin-top: auto; }
@media (max-width: 767px) {
  .gorin_wrap .gorin_mapcap { bottom: calc(var(--gut) + 30px); padding: 16px 18px; }
  .gorin_wrap .gorin_pin_jp { font-size: 26px; }
  .gorin_wrap .gorin_pin_n { font-size: 60px; }
  .gorin_wrap .gorin_pin_t { width: 12em; font-size: 14px; }
  .gorin_wrap .gorin_credit.is-laid { left: var(--gut); text-align: left; }
}
@media (max-aspect-ratio: 11/10) {
  .gorin_wrap { --pg-m: 2.6vh; --pg-pad: clamp(16px, 2.6vh, 30px); --pg-c: 5vh; }
  .gorin_wrap .gorin_bk_r { left: var(--pg-in); right: calc(var(--pg-m) + var(--pg-k) * 2 + var(--pg-c) + var(--pg-pad)); top: calc(var(--pg-in) + 56px); bottom: 54vh; }
  .gorin_wrap .gorin_bk_l { top: 48vh; left: var(--pg-in); right: calc(var(--pg-m) + var(--pg-k) * 2 + var(--pg-c) + var(--pg-pad)); }
  .gorin_wrap .gorin_bk_k { position: absolute; top: calc(-48vh + var(--pg-in)); left: 0; right: 0; margin: 0; }
  .gorin_wrap .gorin_bk_k span { white-space: nowrap; }
  .gorin_wrap .gorin_bk_v.is-giant { font-size: calc((46vh - var(--pg-in) - 4vh - 56px) / 4.3); }
  .gorin_wrap .gorin_bk_v.is-name, .gorin_wrap .gorin_bk_v.is-scroll { font-size: calc((46vh - var(--pg-in) - 4vh - 56px) / 3.3); }
  .gorin_wrap .gorin_bk_v.is-quote { font-size: clamp(24px, 3.4vh, 44px); }
  .gorin_wrap .gorin_bk_v.is-quote.is-small { font-size: clamp(22px, 3vh, 38px); }
  .gorin_wrap .gorin_bk_v.is-quote.is-gaze { font-size: calc((46vh - var(--pg-in) - 4vh - 56px) / 13.6); }
  .gorin_wrap .gorin_bk_v.is-text { display: none; }
  .gorin_wrap .gorin_bk_display { font-size: clamp(26px, 6.2vw, 44px); }
  .gorin_wrap .gorin_bk_display.is-mid { font-size: clamp(21px, 4.8vw, 34px); }
  .gorin_wrap .gorin_bk_display.is-huge { font-size: clamp(44px, 11vw, 84px); }
  .gorin_wrap .gorin_bk_title { font-size: clamp(76px, 20vw, 160px); }
  .gorin_wrap .gorin_bk_note { font-size: 15px; margin-top: 1.8vh; }
  .gorin_wrap .gorin_bk_src { margin-top: 1.8vh; }
}
/* ---------- end shared ---------- */

/* the editor's canvas (stage.js canvasPosters): each chapter as a still of the live page, in px; the stills of a block
   are one strip (desktop 16:10, phone 390:844), each figure showing its own slice */
.gorin_wrap.is-canvas { background: #0d0a08; }
.gorin_wrap.is-canvas [data-stage] { margin: 0 !important; height: auto !important; min-height: 0 !important; pointer-events: auto; }
.gorin_wrap.is-canvas [data-stage] > :not(.gorin_poster) { display: none !important; }
.gorin_wrap .gorin_poster { position: relative; margin: 0; aspect-ratio: 16 / 10; background: var(--still) 0 var(--at) / 100% auto no-repeat; border-bottom: 1px solid rgba(236, 229, 212, 0.14); }
.gorin_wrap .gorin_poster figcaption { position: absolute; left: 12px; top: 12px; padding: 5px 9px; font: 500 11px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #ece5d4; background: rgba(13, 10, 8, 0.72); }
@media (max-width: 767px) { .gorin_wrap .gorin_poster { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }
.gorin_wrap.is-canvas .gorin_world, .gorin_wrap.is-canvas .gorin_veil, .gorin_wrap.is-canvas .gorin_chrome, .gorin_wrap.is-canvas .gorin_index, .gorin_wrap.is-canvas .gorin_loader { display: none !important; }