/* =============================================================================
   WORD PAGE — 寄り + 図録 + 絵巻 (E1: the page becomes a book)

   Every painting click on the gallery wall lands here. Two rooms in one
   scroller: viewport 1 is the YORI arrival — the painting full-bleed and
   PINNED (position:sticky), the word inscribed vertically as a gasan with a
   hand-pressed 言 seal, the placard re-set as ink bottom-left, no boxes
   anywhere. The washi catalog sheet (ZUROKU) slides OVER the pinned painting
   on scroll; its own top edge is the 続き lip that peeks at rest. Since E1
   the sheet is the SAME SCROLL CONTINUING: the painting's pigment tints the
   washi (--wp-washi, set per word), kasumi mist bands separate the scenes,
   the boxed cards are dissolved to ink on the tinted paper, and related
   words hang as real mini-paintings (the 対 antonym diptych faces you).

   ROOT SELECTOR: `.wp-root` (the element also carries id="wordPage" — only
   the CURRENT page owns the id; a fusuma exit clone keeps .wp-root so its
   styles hold mid-slide). Button rules carry the .wp-root prefix because
   components.css paints every bare <button> as a floating white pill with a
   hover lift — the reset below must keep winning (the round-3 specificity
   trap; word-page.css also loads after components.css so ties break our way).

   Ink legibility is PER REGION via js/zone-ink.js: .wp-rg-dark (white ink on
   sumi veil) / .wp-rg-light (sumi ink on washi veil) applied separately to
   the gasan, placard and back-button corners from bundle-precomputed zone
   luminances (img_lum); missing data falls to white-on-heavier-sumi (the
   safe floor — the dark treatment manufactures its own contrast).
   ============================================================================= */

.wp-root {
  position: fixed;
  inset: 0;
  z-index: 9000;            /* above nav + wall; below nothing it must yield to */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #171310;
  font-family: 'Inter', sans-serif;
  color: #2C2C2C;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: none;
  animation: wpArrive 0.36s ease-out;
}
.wp-root::-webkit-scrollbar { display: none; }
@keyframes wpArrive { from { opacity: 0; } to { opacity: 1; } }
body.wp-open { overflow: hidden; }

/* hop arrival (fusuma) — no entrance fade; the slide IS the entrance */
.wp-root.wp-noarrive { animation: none; }

.wp-root button {
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;     /* components.css gives every button a 12px pill radius */
  box-shadow: none;     /* …and a floating white-pill shadow — both must die here */
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
/* …and a translateY(-2px) hover lift + glow (components.css:390) — the
   "buttons jump on hover" owner note. Buttons on this page REST. */
.wp-root button:hover,
.wp-root button:active {
  transform: none;
  box-shadow: none;
}
.wp-root button:focus-visible {
  outline: 2px solid #3D5A80;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ─── VIEWPORT 1 — the arrival stage, pinned ─── */
.wp-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* region ink regimes — set independently on the gasan + placard subtrees */
.wp-rg-dark {
  --ink: #F6F1E7;
  --inkdim: rgba(246, 241, 231, 0.80);
  --inkfaint: rgba(246, 241, 231, 0.58);
  --halo: 0 0 22px rgba(18, 14, 10, 0.55), 0 0 3px rgba(18, 14, 10, 0.35);
  --romaji-ink: #C9A96E;
  --romaji-halo: 0 1px 12px rgba(18, 14, 10, 0.8), 0 0 3px rgba(18, 14, 10, 0.5);
}
.wp-rg-light {
  --ink: #2C2C2C;
  --inkdim: rgba(44, 44, 44, 0.80);
  --inkfaint: rgba(44, 44, 44, 0.56);
  --halo: 0 0 18px rgba(250, 247, 239, 0.78), 0 0 3px rgba(250, 247, 239, 0.5);
  --romaji-ink: #A8854B;
  --romaji-halo: 0 0 14px rgba(250, 247, 239, 0.85), 0 0 3px rgba(250, 247, 239, 0.6);
}

.wp-paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;          /* a press on the painting speaks the word */
}

/* painter's scrim — the painting darkening (or paling) at its edges, never a box.
   Colors are written inline per word from the zone regimes + img_tone. */
.wp-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--wp-scrimC) 0%, var(--wp-scrimB) 20%, transparent 48%),
    linear-gradient(to bottom, var(--wp-topC) 0%, transparent 13%);
}
.wp-gasanveil {
  position: absolute;
  top: 0;
  right: 0;
  width: 560px;
  height: 680px;
  pointer-events: none;
  background: radial-gradient(120% 100% at 100% 0%,
    var(--wp-veilC) 0%, var(--wp-veilB) 40%, transparent var(--wp-veilReach, 68%));
}

/* the back button's own corner veil — top-LEFT, its own zone's regime.
   The gasan veil never reaches this corner; without this the back rides
   whatever the painting happens to put there (owner round 2: invisible
   on the kabuki costume). */
.wp-backveil {
  position: absolute;
  top: 0;
  left: 0;
  width: 380px;
  height: 200px;
  pointer-events: none;
  background: radial-gradient(140% 130% at 0% 0%,
    var(--wp-backC) 0%, var(--wp-backB) 45%, transparent 75%);
}

/* back — top-left. Reads '← 画廊 gallery' at the trail head and
   '← <previous word> previous' mid-walk (the 栞 trail). Sized up — it is
   the page's primary way home and was reading as a footnote. */
.wp-root .wp-back {
  position: absolute;
  top: 24px;
  left: 32px;
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 8px 12px;
  color: var(--ink);
  text-shadow: var(--halo);
}
.wp-back .arr { font-size: 20px; }
.wp-back .jp { font-family: 'Klee One', 'Noto Sans JP', sans-serif; font-size: 19px; font-weight: 600; }
.wp-back .cap {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--inkfaint);
  text-transform: uppercase;
}
.wp-back:hover .cap { color: var(--inkdim); }

/* gasan — the inscription, set like a hanging-scroll 掛軸: one column for
   most words, TWO right-to-left columns for 8+ characters (real gasan
   break long inscriptions into columns — long phrases gain PRESENCE
   instead of shrinking to a thread). The parallel reading column is
   retired: the inscription is always exactly one thing, its reading
   riding it as ruby. */
.wp-gasan {
  position: absolute;
  top: 58px;
  right: 66px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}
.wp-gasan .wp-word {
  display: flex;
  flex-direction: row-reverse;   /* first column rightmost — the scroll's reading order */
  gap: 0.46em;                   /* the ruby channel between columns */
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  color: var(--ink);
  text-shadow: var(--halo);
  line-height: 1;
}
.wp-gasan .wp-wcol {
  writing-mode: vertical-rl;
  letter-spacing: 0.10em;
}
/* furigana rides each kanji (vertical ruby sits to the column's right) —
   the kana-to-kanji mapping a parallel reading column can't show. THE
   RUBY FLOOR (owner seed #1): no reading aid ever renders below 16px,
   however long the word — the clamp decouples it from the base size. */
.wp-gasan .wp-word rt {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 0.34em, 28px);
  letter-spacing: 0.18em;
  color: var(--ink);
  opacity: 1;
  text-shadow: var(--halo);
}
.wp-sealcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
}
/* the seal is EARNED, not decoration (owner call 2026-06-11): nothing on a
   new word; the small gold press appears only once the word is known. */
.wp-seal {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #C9A96E;            /* earned gold — pressed on learning */
  color: #2C2C2C;
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  transform: rotate(-2deg);
  opacity: 0.95;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.wp-stage.known .wp-seal {
  display: flex;
  animation: wpSealPress 0.45s ease-out;
}
@keyframes wpSealPress {
  from { transform: rotate(-2deg) scale(1.3); opacity: 0; }
  to   { transform: rotate(-2deg) scale(1); opacity: 0.95; }
}

/* bottom-left ink placard */
.wp-placard {
  position: absolute;
  left: 64px;
  right: 64px;
  bottom: 74px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
/* provenance whisper on hop arrival: '縁 — <previous> より' — tap = back one */
.wp-root .wp-via {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--inkfaint);
  text-shadow: var(--halo);
  margin-bottom: 12px;
}
.wp-via [lang="ja"] { font-family: 'Klee One', 'Noto Sans JP', sans-serif; }
.wp-via .dash { font-size: 11px; }
.wp-root .wp-via:hover { color: var(--inkdim); }
.wp-romaji {
  font-style: italic;
  font-size: 14.5px;
  letter-spacing: 0.05em;
  color: var(--romaji-ink);
  text-shadow: var(--romaji-halo);
  margin-bottom: 11px;
}
.wp-gloss {
  font-size: 29px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  text-shadow: var(--halo);
  max-width: 680px;
  margin-bottom: 21px;
  /* two lines before the ellipsis — one line amputated real glosses
     (owner 2026-06-12); the catalog below still restates it in full */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-acts {
  display: flex;
  align-items: center;
  gap: 22px;
}
/* the 音 chip wears the brand seal's clothes (owner 2026-06-11: the plain
   white circle read as an off-brand logo): washi disc, brushed sumi ring,
   the logo's small gold dot under the glyph */
.wp-root .wp-oto {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F7F2E6;
  border: 1.6px solid rgba(44, 44, 44, 0.72);
  color: #2C2C2C;
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.wp-root .wp-oto svg { width: 18px; height: 18px; display: block; }
.wp-root .wp-oto:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.wp-root .wp-oto::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #C9A96E;
}
.wp-root .wp-oto.playing { border-color: #C9A96E; color: #A8854B; }

/* SAVE 残す / SKIP 流す — real presence (owner seed #3): framed ghost
   buttons with a quiet color identity in the app-wide grammar — amber =
   still learning (save), moss = known (skip), same as the wall's status
   dots. The accents are MIXED WITH the region's own ink so they keep
   contrast on both regimes (cream tints on dark paintings, deep on light). */
.wp-root .wp-verb {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 22px 12px;
  border: 1.5px solid color-mix(in srgb, var(--vac, var(--ink)) 62%, transparent);
  border-radius: 3px;
  color: var(--ink);
  text-shadow: var(--halo);
}
.wp-root .wp-save { --vac: color-mix(in srgb, var(--color-amber, #A07850) 55%, var(--ink) 45%); }
.wp-root .wp-skip { --vac: color-mix(in srgb, var(--color-moss, #6B7F5C) 55%, var(--ink) 45%); }
.wp-root .wp-verb:hover {
  border-color: var(--vac, var(--ink));
  background: color-mix(in srgb, var(--vac, var(--ink)) 12%, transparent);
}
.wp-root .wp-verb.active {
  border-color: var(--vac, var(--ink));
  background: color-mix(in srgb, var(--vac, var(--ink)) 22%, transparent);
}
.wp-verb .cap { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.wp-verb .jp {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: var(--inkdim);
}
/* 壁書き — the wall label's opening line (owner seed #2): what KIND of
   thing this is, placed where the eye already reads. The old bottom-right
   corner is deleted; the painting's fourth corner returns to the painting. */
.wp-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkdim);
  text-shadow: var(--halo);
}
.wp-eyebrow .pj {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.wp-eyebrow .sep,
.wp-eyebrow .pe { color: var(--inkfaint); }

/* ─── 落款 RAKKAN — the painting's signature marks ───
   The word's page-gated kanji sign the canvas: outlined square seals,
   glyph + first keyword sense, in the placard's regime ink (sumi on
   light floors, paper on dark — never a fixed color on art). They press
   in one by one AFTER the kigō inscription settles, the way a painter
   signs last. Doors into the kanji room; gold only on intent (hover).
   window._wpHeroKanjiLeft = true trades the bottom-right cluster for
   framed doors inside the left placard stack (the owner's hypothesis). */
.wp-plright {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-left: 32px;
}
.wp-root .wp-rakkan,
.wp-root .wp-kdoor {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-shadow: var(--halo);
}
.wp-rakkan .kg {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent);
  border-radius: 10px;
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 24px;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}
.wp-rakkan .kc,
.wp-kdoor .kc {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkdim);
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wp-rakkan .go,
.wp-kdoor .go {
  position: absolute;
  top: -5px;
  right: -7px;
  font-size: 10px;
  color: #C9A96E;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.wp-root .wp-rakkan:hover .kg,
.wp-root .wp-rakkan:focus-visible .kg,
.wp-rakkan.glint .kg {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.wp-root .wp-rakkan:hover,
.wp-root .wp-kdoor:hover { transform: translateY(-1px); }
.wp-root .wp-rakkan:hover .go,
.wp-root .wp-kdoor:hover .go,
.wp-root .wp-rakkan:focus-visible .go,
.wp-root .wp-kdoor:focus-visible .go { opacity: 1; }
.wp-rakkan.pressed .kg { transform: scale(0.94); }

/* the owner's bottom-left variant: framed door pills after SAVE/SKIP */
.wp-kdoors {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  overflow: hidden;
  white-space: nowrap;
}
.wp-root .wp-kdoor {
  padding: 8px 13px 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 38%, transparent);
  border-radius: 2px;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}
.wp-kdoor .kg {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
}
.wp-root .wp-kdoor:hover,
.wp-root .wp-kdoor:focus-visible,
.wp-kdoor.glint {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.wp-kdoor.pressed { transform: scale(0.96); }

/* the marks press in only after the inscription finishes (delays written
   per-mark by JS as --sd; inert unless mount() sets .wp-kigo) */
@keyframes wpMarkPress {
  from { opacity: 0; transform: scale(1.15); }
  to   { opacity: 1; transform: none; }
}
.wp-kigo .wp-rakkan,
.wp-kigo .wp-kdoor {
  opacity: 0;
  animation: wpMarkPress 0.45s ease-out forwards;
  animation-delay: var(--sd, 0ms);
}

@media (max-width: 1280px) {
  .wp-rakkan .kg { width: 40px; height: 40px; font-size: 22px; }
  .wp-rakkan .kc { max-width: 72px; }
}

/* 揮毫 — the inscription inks on, unit by unit, its furigana landing a
   beat after its kanji. The class is set by JS on fresh wall-opens only
   (never on fusuma slides or trail restores) and never under
   prefers-reduced-motion; opacity-only, compositor-friendly. */
@keyframes wpGuOn { from { opacity: 0; } to { opacity: 1; } }
.wp-kigo .wp-gu {
  opacity: 0;
  animation: wpGuOn 0.32s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.wp-kigo .wp-gu rt {
  opacity: 0;
  animation: wpGuOn 0.26s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 200ms);
}

/* ─── THE SHEET — the scroll continuing (EMAKI) ───
   --wp-washi (the painting's pigment soaked 7% into the paper) and
   --wp-tone (the raw tone, for kasumi bands) are written inline per word. */
.wp-sheet {
  position: relative;
  z-index: 5;
  margin-top: -52px;            /* the lip overlaps the stage = the peek */
  background: var(--wp-washi, #FAF7EF);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -14px 40px rgba(15, 11, 7, 0.30), 0 -2px 8px rgba(15, 11, 7, 0.12);
  min-height: 100vh;
  color: #2C2C2C;
}

/* the rolled lip — the sheet's own top edge; running head once stuck */
.wp-lip {
  position: sticky;
  top: 0;
  z-index: 8;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp-washi, #FAF7EF);
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid rgba(44, 44, 44, 0);
  transition: border-color 0.25s;
}
.wp-lip::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px 14px 0 0;
}
.wp-cue {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #57534e;
}
.wp-cue .jp {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.12em;
  color: #44403a;
}
.wp-cue .cap {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8d877b;
}
.wp-cue .tick { width: 22px; height: 1px; background: #c2bbab; }
.wp-run {
  display: none;
  width: 100%;
  padding: 0 40px;
  align-items: baseline;
  justify-content: space-between;
}
.wp-root .wp-run .wp-rback {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #57534e;
}
.wp-run .wp-rback .jp { font-family: 'Klee One', 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 600; }
.wp-run .wp-rback .cap {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8d877b;
}
.wp-run .wp-rback:hover .cap { color: #57534e; }
.wp-run .wp-rword { display: flex; align-items: baseline; gap: 12px; }
.wp-run .wp-rword .w {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #2C2C2C;
}
.wp-run .wp-rword .r {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: #6d675c;
}
.wp-run .wp-rcap {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8d877b;
}
.wp-run .wp-rcap .jp {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.3em;
  color: #57534e;
}
.wp-lip.stuck { border-bottom-color: rgba(44, 44, 44, 0.08); }
.wp-lip.stuck .wp-cue { display: none; }
.wp-lip.stuck .wp-run { display: flex; }

/* ─── 栞 trail stones — the walk made visible in the lip ───
   One stone per visited word in its painting's own tone; the current stone
   wears the only ink ring; ghosts (the forward stack) are re-walkable. */
.wp-stones {
  position: absolute;
  left: 170px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9;
}
.wp-root .wp-stone {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--stone, #b0a090);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.wp-root .wp-stone:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10); }
.wp-root .wp-stone.current {
  box-shadow: 0 0 0 2px var(--wp-washi, #FAF7EF), 0 0 0 3.5px #2C2C2C;
}
.wp-root .wp-stone.ghost { opacity: 0.35; }
.wp-stone-more {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: #8d877b;
  margin-right: 2px;
}
/* hover bloom: the visited painting lifts out of its stone */
.wp-stone-bloom {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  width: 104px;
  padding: 5px 5px 6px;
  background: #FBF8F1;
  border: 1px solid rgba(44, 44, 44, 0.14);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(15, 11, 7, 0.20);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 20;
}
.wp-lip.stuck .wp-stone-bloom {
  bottom: auto;
  top: 24px;
  transform: translateX(-50%) translateY(-3px);
}
.wp-root .wp-stone:hover .wp-stone-bloom,
.wp-root .wp-stone:focus-visible .wp-stone-bloom {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.wp-stone-bloom .im {
  display: block;
  width: 94px;
  height: 63px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-color: var(--stone, #b0a090);
}
.wp-stone-bloom .lw {
  display: block;
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2C2C2C;
  text-align: center;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-stone-bloom .lr {
  display: block;
  font-size: 9px;
  font-style: italic;
  color: #8d877b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (the 運 running-title rail is retired — the stuck lip's running head
   already carries word, reading and 図録 within 200px of where it stood;
   two simultaneous running titles is information worn twice.) */

/* ─── catalog entry column (the ZUROKU re-set on the tinted washi) ─── */
.wp-entry {
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

/* 扉 — the plate title. The headword carries title scale and its own ruby
   (the stacked reading/listen/kana rows are collapsed into one composed
   lockup: headword, then romaji with the 音 chip inline, then the gloss). */
.wp-eword {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 64px;
  line-height: 1.22;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
  color: #2C2C2C;
}
/* THE RUBY-FLOOR LAW (page invariant): no reading aid on the washi ever
   renders below 13px — the headword's own ruby holds a 14px floor; the
   hero gasan keeps its separate 16px on-art floor. A reading aid a
   beginner cannot read is decoration wearing a teacher's clothes. */
.wp-eword rt {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 0.30em, 22px);
  letter-spacing: 0.1em;
  color: #57534e;
}
.wp-eword.long { font-size: 46px; }
.wp-eword.verylong { font-size: 36px; }
.wp-eromaji {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  letter-spacing: 0.045em;
  color: #A8854B;
}
.wp-eromaji .ro { font-style: italic; font-weight: 500; }
/* the 音 chip in the brand hanko dress, inline at the romaji's right —
   the LISTEN cap is dropped (the convention is established on arrival);
   the ::before halo keeps the hit target at 46px */
.wp-root .wp-eaudio {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F7F2E6;
  border: 1.4px solid rgba(44, 44, 44, 0.55);
  color: #2C2C2C;
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
.wp-root .wp-eaudio svg { width: 14px; height: 14px; display: block; }
.wp-root .wp-eaudio::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.wp-root .wp-eaudio::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #C9A96E;
}
.wp-root .wp-eaudio:hover { border-color: rgba(44, 44, 44, 0.85); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); }
.wp-root .wp-eaudio.playing { border-color: #C9A96E; color: #A8854B; }
.wp-egloss {
  font-size: 22px;
  line-height: 1.55;
  color: #2C2C2C;
  margin-top: 18px;
  max-width: 42ch;
}

/* 字を照らす — inline Japanese inside English prose is DISPLAY type, not
   body type (the reading-room law: a beginner reads Japanese as pictures
   first; it was the smallest type on the page). Spans are minted by
   wrapJP() in grid-mode.js — text runs only, never markup. */
.wp-entry .wp-jp {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 1.25em;
  color: #2C2C2C;
}
.wp-entry .wp-jp rt {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #57534e;
}

/* addressable headword kanji — the reveal wire (.lit: a 字 row under hover
   lights its character in the word above) and the homecoming glow
   (.lit-home: returning from the kanji room, the character settles from
   indigo back to ink — the first-word-I-ever-read moment) */
.wp-kch { transition: color 0.2s ease; }
.wp-kch.lit { color: #3D5A80; }
@keyframes wpHomeGlow { from { color: #3D5A80; } to { color: #2C2C2C; } }
.wp-kch.lit-home { animation: wpHomeGlow 1.4s ease-out 1; }

/* 字をたたく — a page-gated kanji met where the word is set large is its own
   door. Quiet, regime-safe affordance: every .wp-kt is a pointer, no movement
   anywhere (no transforms — kanji on this page REST, like the buttons). */
.wp-kt { cursor: pointer; }
/* THE HINT AT REST (owner 2026-06-12, round 2 — "the characters themselves
   should hint, dots add noise"): a live kanji wears a quiet indigo-leaning
   INK instead of plain sumi — the character itself is the affordance, in the
   page's interactive grammar (the reveal wire's indigo family). Hover/focus
   completes it to full indigo. No underlines, no marks, no movement. */
.wp-entry .wp-kt {
  transition: color 0.15s ease;
  color: color-mix(in srgb, #2C2C2C 68%, #3D5A80 32%);
}
.wp-entry .wp-kt:hover,
.wp-entry .wp-kt:focus-visible { color: #3D5A80; }
/* the focusable spans (role=button) miss the .wp-root button:focus-visible
   rule above — give them the page's standard keyboard ring directly. */
.wp-kt:focus-visible {
  outline: 2px solid #3D5A80;
  outline-offset: 2px;
  border-radius: 2px;
}
/* GASAN (the inscription ON the art): deliberately NO rest tint — partially
   tinted characters would patchwork the one inscription, and the 落款 seals
   below already advertise these same kanji. The tap stays a quiet bonus:
   hover draws a solid side rule beside the column (vertical-rl renders an
   underline as a right-hand reading mark) in currentColor, regime-safe. */
.wp-gasan .wp-kt:hover {
  text-decoration: underline 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: currentColor;
}

/* ─── 字 BUILT FROM — the specimen monument. Each kanji of the headword
   set at display scale with its keyword, its reading in THIS word, its
   shape story's opening clause reprinted in place, and an honest door
   into the kanji room. Page-gated kanji are whole-row doors; keyword-only
   kanji rest as plain ink (no door, no pretense). */
.wp-anat { max-width: 660px; }
.wp-root .wp-anat-e {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 18px;
  align-items: start;
  width: 100%;
  padding: 18px 0;
  text-align: left;
}
.wp-anat-e + .wp-anat-e { border-top: 1px solid rgba(44, 44, 44, 0.06); }
span.wp-anat-e { cursor: default; }
span.wp-anat-e.still { opacity: 0.8; }
.wp-anat-e .ak {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 72px;
  line-height: 1.05;
  color: #2C2C2C;
  transition: color 0.15s ease;
}
.wp-anat-e .atx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}
.wp-anat-e .akw {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #57534e;
}
.wp-anat-e .ard {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #57534e;
}
.wp-anat-e .ard b {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #2C2C2C;
  margin-left: 7px;
  vertical-align: -0.12em;
}
.wp-anat-e .astory {
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #44403c;
  margin-top: 2px;
}
.wp-anat-e .asim b,
.wp-anat-note b {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
}
.wp-anat-e .asim { font-size: 12.5px; color: rgba(87, 83, 78, 0.85); }
.wp-anat-e .asim .sj {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  margin-right: 7px;
  color: #57534e;
}
/* the gold arrow ends the story teaser — "the story continues", which is
   literally what the tap delivers (the labelled door line + word count are
   retired; the count already opens the kanji room). Gold at rest = a real
   door; indigo on intent. */
.wp-anat-e .astory .ago {
  display: inline-block;
  margin-left: 9px;
  font-size: 14px;
  color: #C9A96E;
  transition: transform 0.18s ease, color 0.15s ease;
}
button.wp-anat-e:hover .ak { color: #3D5A80; }
button.wp-anat-e:hover .astory .ago {
  color: #3D5A80;
  transform: translateX(3px);
}

/* section heads: ink kanji + placard caps. The hairline rules are gone —
   sections now close with a kasumi (霞) mist band of the painting's own
   tone, the emaki scene-break. */
.wp-sec { position: relative; margin-top: 88px; }
.wp-sec::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -14%;
  right: -14%;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--wp-tone, #b0a090) 5%, transparent) 30%,
    color-mix(in srgb, var(--wp-tone, #b0a090) 8%, transparent) 52%,
    color-mix(in srgb, var(--wp-tone, #b0a090) 4%, transparent) 74%,
    transparent 100%);
  -webkit-mask-image: radial-gradient(120% 300% at 30% 46%, #000 22%, transparent 70%);
  mask-image: radial-gradient(120% 300% at 30% 46%, #000 22%, transparent 70%);
}
/* every band a differently-shaped cloud — mist, not a printed rule */
.wp-sec:nth-of-type(even)::before {
  -webkit-mask-image: radial-gradient(130% 260% at 64% 54%, #000 26%, transparent 74%);
  mask-image: radial-gradient(130% 260% at 64% 54%, #000 26%, transparent 74%);
  height: 40px;
  top: -56px;
}
.wp-sec:nth-of-type(3n)::before {
  -webkit-mask-image: radial-gradient(110% 320% at 44% 42%, #000 20%, transparent 66%);
  mask-image: radial-gradient(110% 320% at 44% 42%, #000 20%, transparent 66%);
}
.wp-sechead {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-bottom: 15px;
}
.wp-ink {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #2C2C2C;
}
.wp-seclabel {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #57534e;
}

/* story: ink directly on the tinted washi (the boxed card dissolved).
   ONE voice — the old 15.5px-lead / 14px-rest split is deleted; the whole
   story reads at reading scale. */
.wp-paper { padding: 0 2px; }
.wp-story-sec { display: flex; gap: 16px; padding: 21px 0; }
.wp-story-sec + .wp-story-sec { border-top: 1px solid rgba(44, 44, 44, 0.06); }
.wp-story-mark { flex: none; width: 52px; padding-top: 4px; }
.wp-story-mark .wp-ink { font-size: 16px; display: block; }
/* the story signed in its painting's pigment (cut-first candidate: revert
   this one rule to return the markers to pure sumi) */
.wp-story-mark .wp-ink { color: color-mix(in srgb, #2C2C2C 86%, var(--wp-tone, #b0a090) 14%); }
.wp-story-mark .sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(87, 83, 78, 0.55);
  display: block;
  margin-top: 3px;
}
.wp-story-body { font-size: 16.5px; line-height: 1.85; color: #44403c; }

/* examples: furigana ruby on the washi itself (ruby-floor law: 13px) */
.wp-ex { padding: 17px 2px; }
.wp-ex + .wp-ex { border-top: 1px solid rgba(44, 44, 44, 0.07); }
.wp-ex-jp {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 24px;
  line-height: 2.0;
  color: #2C2C2C;
}
.wp-ex-jp rt {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #57534e;
}
.wp-ex-ro {
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(87, 83, 78, 0.78);
  margin-top: 3px;
}
.wp-ex-en { font-size: 15px; line-height: 1.5; color: #44403c; margin-top: 5px; }
/* the ten-character lesson that unlocks the whole vertical form */
.wp-ex-cue {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #78716c;
}

/* tategaki (EMAKI): short sentences set as true vertical columns, read
   right to left, furigana riding each column; romaji + English foot each
   column horizontally. JS gates this on sentence length + viewport. */
.wp-ex-set.tategaki {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: stretch;       /* equal heights → feet share one baseline */
  gap: 72px;
  padding-top: 10px;
}
.wp-ex-set.tategaki .wp-ex {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.wp-ex-set.tategaki .wp-ex-foot { margin-top: auto; }
.wp-ex-set.tategaki .wp-ex + .wp-ex { border-top: none; }
.wp-ex-set.tategaki .wp-ex-jp {
  writing-mode: vertical-rl;
  max-height: 640px;
  font-size: 26px;
  line-height: 2.0;
  letter-spacing: 0.05em;
}
.wp-ex-set.tategaki .wp-ex-foot { max-width: 200px; text-align: center; }
.wp-ex-set.tategaki .wp-ex-ro { margin-top: 0; }

/* conjugation: ink table on the washi (box dissolved) */
.wp-conj { padding: 0 2px; }
.wp-conj-row {
  display: grid;
  grid-template-columns: 122px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.wp-conj-row + .wp-conj-row { border-top: 1px solid rgba(44, 44, 44, 0.05); }
.wp-conj-form .jp {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #2C2C2C;
  display: block;
}
.wp-conj-form .en {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(87, 83, 78, 0.6);
  display: block;
  margin-top: 2px;
}
.wp-conj-kana {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 17.5px;
  color: #2C2C2C;
}
.wp-conj-kana .ro {
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  color: rgba(87, 83, 78, 0.7);
  margin-left: 10px;
}
.wp-root .wp-conj-on {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: rgba(87, 83, 78, 0.55);
  border: 1px solid rgba(44, 44, 44, 0.1);
  border-radius: 3px;
  padding: 2px 6px;
  background: rgba(250, 247, 239, 0.6);
}
.wp-root .wp-conj-on svg { width: 12px; height: 12px; display: block; }
.wp-root .wp-conj-on:hover { color: #2C2C2C; border-color: rgba(44, 44, 44, 0.25); }
.wp-root .wp-conj-on.playing { color: #A8854B; border-color: #C9A96E; }

/* counter reference 数え方 — ink grid on the washi (box dissolved) */
.wp-cnt {
  padding: 0 2px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
}
.wp-cnt-cell {
  display: grid;
  grid-template-columns: 22px 64px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.wp-cnt-cell:nth-child(n+3) { border-top: 1px solid rgba(44, 44, 44, 0.05); }
.wp-cnt-n {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(87, 83, 78, 0.45);
}
.wp-cnt-kanji {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #2C2C2C;
}
.wp-cnt-kana {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: #57534e;
}

/* ─── 縁 — 凡例 HANREI, the dictionary's legend ───
   Related words are dictionary lines under a fixed legend gutter: the
   relation kanji (対 alone in vermilion — scarcity) with a small-caps
   ENGLISH carrier beneath it. Text on PLAIN washi; the painting lives
   only in the fixed-size tone chip at the line's end. One continuous
   vertical margin rule is the only ruling — groups separate by air. */
.wp-dict { position: relative; }
.wp-dict::before {
  content: '';
  position: absolute;
  left: 68px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(44, 44, 44, 0.10);
}
.wp-dict-g {
  display: grid;
  grid-template-columns: 68px 1fr;
  column-gap: 18px;
  padding: 14px 0;
  /* legend centers against its group — with the taller chips a top-pinned
     label floated above the words (owner round 1, 2026-06-12) */
  align-items: center;
}
.wp-dict-g:first-child { padding-top: 4px; }
.wp-dict-m {
  text-align: right;
  padding-right: 14px;
}
.wp-dict-m .g {
  display: block;
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #2C2C2C;
}
.wp-dict-m .g.tai { color: var(--rel-opposite); } /* token holds this exact hex — no visible change */
.wp-dict-m .c {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #57534e;
}
.wp-dict-list { min-width: 0; }
/* .wp-root needed: the .wp-root button reset (margin:0) outguns a bare
   > * + * — without it rows stack flush and a hover-grown chip lands on
   its neighbour (owner round 2: "images overlap when expanded") */
.wp-root .wp-dict-list > * + * { margin-top: 10px; }

/* a dictionary line */
.wp-root .wp-dict-e {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 6px 0;
  text-align: left;
}
.wp-dict-tx { flex: 1; min-width: 0; display: block; }
.wp-dict-tx .l1 { display: block; }
.wp-dict-tx .lw {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: #2C2C2C;
}
.wp-dict-e.soft .lw { font-weight: 500; }
.wp-dict-tx .lr {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #57534e;
  margin-left: 9px;
}
.wp-dict-tx .l2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  line-height: 1.45;
}
.wp-dict-tx .ro {
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #44403A;
}
.wp-dict-tx .dash { color: rgba(44, 44, 44, 0.35); margin: 0 6px; }
.wp-dict-tx .gl { font-size: 13px; color: #44403A; }
/* The tone chip — a held stamp, not a painting (owner refinement
   2026-06-12: "a bit larger" than the old 48×32, NOT a tile). Vars so
   size rounds are a one-line tweak. On hover/focus the chip micro-
   expands toward the text — a glance at the scene, never a reveal —
   then settles back. transform (not width) so rows never reflow. */
.wp-dict-chip {
  flex: none;
  margin-left: auto;
  width: var(--wp-relchip-w, 96px);
  height: var(--wp-relchip-h, 64px);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(44, 44, 44, 0.10);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.wp-dict-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wp-root .wp-dict-e { position: relative; cursor: pointer; }
/* the row is a div[role=button] (hosts the nested 音 chip) — it misses the
   .wp-root button:focus-visible rule, so give it the standard ring here */
.wp-root .wp-dict-e:focus-visible {
  outline: 2px solid #3D5A80;
  outline-offset: 2px;
  border-radius: 2px;
}
/* bare speaker — a universally read icon (the 音 kanji asked beginners
   to already know the word for sound); no chip frame (owner pick F) */
.wp-root .wp-dict-on {
  margin-left: 10px;
  padding: 2px;
  vertical-align: 1px;
  color: rgba(87, 83, 78, 0.55);
  transition: color 0.15s ease;
}
.wp-root .wp-dict-on svg { width: 14px; height: 14px; display: block; }
.wp-root .wp-dict-on:hover { color: #2C2C2C; }
.wp-root .wp-dict-on.playing { color: #A8854B; }
.wp-root .wp-dict-e:hover .lw { color: #3D5A80; }
.wp-root .wp-dict-e:hover,
.wp-root .wp-dict-e:focus-visible { z-index: 2; }
/* grow 1.25 = the most the 76px row band + 10px row gap can host without
   the grown chip (or its shadow) reaching the neighbour's image (owner
   round 2). 1.5 overlapped. */
.wp-root .wp-dict-e:hover .wp-dict-chip,
.wp-root .wp-dict-e:focus-visible .wp-dict-chip {
  transform: scale(var(--wp-relchip-grow, 1.25));
  box-shadow: inset 0 0 0 1px rgba(44, 44, 44, 0.10), 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* (対 self-entry + ⇔ arrow retired 2026-06-12 — owner asked in every
   round: the vermilion 対 glyph + OPPOSITE carrier hold the meaning
   alone; you are already on this word's page.) */

/* (音/同 shared heads + member indents retired 2026-06-13 — every group
   now speaks the same self-contained two-row line: lemma + kana reading,
   then romaji — gloss.) */

/* ─── 陽だまり CREST — the door to the word's graph room, at the related
   section's foot (triptych S3). A washi slip holding a small pool of
   sunlight: warm light tones only — no relation hues out here (the dose
   rule), no red (seals are the kanji's), no gold (nothing is earned).
   Hover warms the light; the hover is also the module's preload. */
.wp-root .wp-crest {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  background: linear-gradient(174deg, rgba(255, 253, 246, 0.85), rgba(250, 244, 230, 0.75));
  border: 1px solid rgba(126, 100, 58, 0.16);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.wp-root .wp-crest:hover,
.wp-root .wp-crest:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(96, 72, 36, 0.08), 0 10px 24px rgba(96, 72, 36, 0.10);
}
.wp-root .wp-crest-sun {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFEEBC 0%, rgba(255, 238, 188, 0.45) 62%, rgba(255, 238, 188, 0) 100%);
  font-family: var(--font-jp, 'Klee One', cursive);
  font-weight: 600;
  font-size: 17px;
  color: #8A6E35;
  transition: filter 0.35s ease;
}
.wp-root .wp-crest:hover .wp-crest-sun,
.wp-root .wp-crest:focus-visible .wp-crest-sun {
  filter: brightness(1.06) saturate(1.15);
}
.wp-root .wp-crest-tx { flex: 1; min-width: 0; }
.wp-root .wp-crest-tx .l1 {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.wp-root .wp-crest-tx .l1 [lang="ja"] {
  font-family: var(--font-jp, 'Klee One', cursive);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-sumi, #2C2C2C);
}
.wp-root .wp-crest-tx .l1 .cap {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a3957c;
}
.wp-root .wp-crest-tx .l2 {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: #8d8069;
}
.wp-root .wp-crest-go {
  flex: 0 0 auto;
  font-size: 13px;
  color: #b0552f;
  transition: transform 0.25s ease;
}
.wp-root .wp-crest:hover .wp-crest-go,
.wp-root .wp-crest:focus-visible .wp-crest-go {
  transform: translateX(3px);
}
@media (max-width: 768px) { .wp-root .wp-crest { display: none; } }

/* ─── 細部 DETAIL — the sparse page's plate: the painting again, closer.
   One tight crop of the already-cached hero (no new requests), aimed at
   the zone with the most visual incident. Caption in plate-label caps. */
.wp-plate-im {
  height: 300px;
  border-radius: 2px;
  background-size: 260%;
  background-color: var(--wp-tone, #b0a090);
  box-shadow: inset 0 0 0 1px rgba(44, 44, 44, 0.10);
}
.wp-plate-cap {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 9px;
  margin-top: 9px;
}
.wp-plate-cap .jp {
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #44403a;
}
.wp-plate-cap .cap {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8d877b;
}

/* colophon 奥付 */
.wp-colo {
  margin-top: 58px;
  padding-top: 20px;
  border-top: 1px solid rgba(44, 44, 44, 0.11);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.wp-colo-lines {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(87, 83, 78, 0.78);
}
.wp-colo-lines .dim { color: rgba(87, 83, 78, 0.5); }
.wp-coloseal {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(44, 44, 44, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Klee One', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: rgba(44, 44, 44, 0.35);
  transform: rotate(-4deg);
}
.wp-coloseal.known { border-color: #C9A96E; color: #C9A96E; }

/* ─── 襖 fusuma — a hop slides the room sideways instead of teleporting.
   The outgoing page keeps .wp-root (its styles) but loses the id; both
   animate as solid rooms, transform-only. Order matters: these rules sit
   AFTER .wp-noarrive so the incoming slide wins the animation slot. */
@keyframes wpFusumaOutLeft  { to { transform: translateX(-9%); opacity: 0.22; } }
@keyframes wpFusumaOutRight { to { transform: translateX(9%);  opacity: 0.22; } }
@keyframes wpFusumaInRight  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes wpFusumaInLeft   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.wp-root.wp-fusuma-out-left  { animation: wpFusumaOutLeft 0.42s cubic-bezier(0.33, 0, 0.2, 1) forwards; z-index: 8999; pointer-events: none; }
.wp-root.wp-fusuma-out-right { animation: wpFusumaOutRight 0.42s cubic-bezier(0.33, 0, 0.2, 1) forwards; z-index: 8999; pointer-events: none; }
.wp-root.wp-fusuma-in-right  { animation: wpFusumaInRight 0.42s cubic-bezier(0.33, 0, 0.2, 1); }
.wp-root.wp-fusuma-in-left   { animation: wpFusumaInLeft 0.42s cubic-bezier(0.33, 0, 0.2, 1); }

/* narrower desktops: the placard and gasan breathe in */
@media (max-width: 1200px) {
  .wp-placard { left: 40px; right: 40px; bottom: 56px; }
  .wp-gasan { right: 44px; }
  .wp-gloss { font-size: 24px; }
  .wp-stones { left: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-root { animation: none; }
  .wp-root * { transition: none !important; animation: none !important; }
  /* belt-and-braces: JS never adds .wp-kigo under reduced motion, but if
     the class ever appears its opacity:0 bases must not hide the word —
     nor the rakkan marks waiting on their press-in delays */
  .wp-kigo .wp-gu,
  .wp-kigo .wp-gu rt { opacity: 1 !important; }
  .wp-kigo .wp-rakkan,
  .wp-kigo .wp-kdoor { opacity: 1 !important; animation: none !important; }
}