/* 松の湯 — Showa sento: white tiles, indigo noren, Fuji blue, lantern vermilion, varnished wood.
   Stage-driven alterations: steam creeps in (2), the bathhouse closes for the night (3). */
:root {
  --tile: #f2efe5;
  --grout: #dcd5c4;
  --paper: #fbf7ec;
  --ink: #2a221c;
  --muted: #6e6354;
  --ai: #1c2d4f;
  --ai-2: #24396a;
  --fuji: #2c6cb4;
  --fuji-deep: #1b4b86;
  --sky: #dce9f5;
  --shu: #cf3f26;
  --shu-deep: #a52c18;
  --wood: #8a5a2e;
  --wood-dark: #4f2f16;
  --wood-light: #c18e57;
  --line: #d8cfbd;
  --f-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --f-head: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-sign: "Zen Antique", "Kaisei Decol", serif;
  --f-hand: "Yusei Magic", "Zen Maru Gothic", sans-serif;
  color-scheme: light;
}
/* stage 2: steam and damp; stage 3: closed for the night */
html[data-stage="2"] { --tile: #eeede4; --grout: #d3d1c3; }
html:is([data-stage="3"], [data-stage="4"]) {
  --tile: #d9dcdc; --grout: #b9bfc0; --paper: #eef0ec; --muted: #5d6262; --line: #c3c8c6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.nb { white-space: nowrap; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body {
  margin: 0; color: var(--ink); font-family: var(--f-body); font-size: 15.5px; line-height: 1.9; -webkit-font-smoothing: antialiased;
  background-color: var(--tile);
  background-image:
    linear-gradient(var(--grout) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--grout) 1.5px, transparent 1.5px);
  background-size: 46px 46px;
  background-position: -1px -1px;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.hand { font-family: var(--f-hand); }

/* stage visibility helpers */
html[data-stage="0"] :is(.from-1, .from-2, .from-3, .from-4),
html[data-stage="1"] :is(.from-2, .from-3, .from-4),
html[data-stage="2"] :is(.from-3, .from-4),
html[data-stage="3"] .from-4,
html:is([data-stage="1"], [data-stage="2"], [data-stage="3"], [data-stage="4"]) .until-1,
html:is([data-stage="2"], [data-stage="3"], [data-stage="4"]) .until-2,
html:is([data-stage="3"], [data-stage="4"]) .until-3 { display: none !important; }

/* ---------- noren header ---------- */
.noren-head { position: relative; z-index: 30; }
.noren-rail { height: 12px; background: linear-gradient(#6b4321, #3d230f); box-shadow: 0 2px 4px rgba(0,0,0,.25); position: relative; z-index: 2; }
.noren {
  display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 6px; max-width: 760px; margin: -2px auto 0; padding: 0 12px;
}
.noren > a, .noren > span {
  position: relative; display: grid; place-items: center; text-decoration: none; color: #f6f1e6;
  background-color: var(--ai);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px);
  height: 92px; border-radius: 0 0 4px 4px; box-shadow: inset 0 -8px 12px rgba(0,0,0,.18), 0 6px 14px rgba(20, 28, 50, .22);
  transform-origin: top center; animation: sway 7s ease-in-out infinite;
}
.noren > span:nth-child(1) { animation-delay: -2s; }
.noren > span:nth-child(3) { animation-delay: -4.5s; }
@keyframes sway { 0%, 100% { transform: skewX(0) translateY(0); } 50% { transform: skewX(-1.2deg) translateY(1px); } }
.noren .yu { font-family: var(--f-sign); font-size: 46px; line-height: 1; opacity: .95; }
.noren .crest { width: 34px; height: 34px; opacity: .9; }
.noren .name { font-family: var(--f-sign); font-size: 40px; letter-spacing: .28em; padding-left: .28em; line-height: 1; }
.noren .name small { display: block; font-family: var(--f-head); font-size: 11px; letter-spacing: .5em; text-align: center; margin-top: 8px; opacity: .8; }
.noren::after { content: ""; }

.fuda-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 12px; padding: 18px 12px 8px; }
.fuda {
  position: relative; text-decoration: none; color: #2a1708; font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: .08em;
  padding: 7px 14px 7px 34px; border-radius: 3px;
  background-color: var(--wood-light);
  background-image:
    repeating-linear-gradient(92deg, rgba(90, 50, 15, .12) 0 2px, transparent 2px 7px, rgba(90, 50, 15, .07) 7px 8px, transparent 8px 13px),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.08));
  box-shadow: inset 0 0 0 1px rgba(70, 40, 10, .35), 0 2px 0 var(--wood-dark), 0 4px 8px rgba(0,0,0,.15);
  transition: transform .15s;
}
.fuda::before { content: attr(data-n); position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; border-radius: 50%; background: #2a1708; color: #f1dcc0; font-size: 10.5px; display: grid; place-items: center; font-family: var(--f-body); letter-spacing: 0; }
.fuda:hover { transform: translateY(-2px); }
.fuda[aria-current="page"] { background-color: #e1b27a; }

.notice-strip { margin: 10px auto 0; max-width: 1120px; padding: 0 18px; }
.notice-strip p { margin: 0; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--shu); padding: 8px 14px; font-size: 13.5px; }
.notice-strip p b { color: var(--shu-deep); }

/* ---------- hero ---------- */
.hero { padding: 26px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: stretch; }
.hero-frame { position: relative; border: 12px solid var(--wood); border-image: none; box-shadow: inset 0 0 0 2px var(--wood-dark), 0 10px 30px rgba(40, 25, 10, .25); background: #000; outline: 2px solid var(--wood-dark); outline-offset: -2px; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.hero-frame .chochin { position: absolute; right: 18px; top: 18px; }
.hero-copy {
  writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--f-head); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.55; letter-spacing: .14em; margin: 0; color: var(--ink);
  background: var(--paper); padding: 26px 18px; border: 1px solid var(--line); box-shadow: 6px 6px 0 rgba(42, 34, 28, .08);
  max-height: 560px;
}
.hero-copy em { font-style: normal; color: var(--fuji-deep); }
.hero-copy small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 13px; letter-spacing: .3em; color: var(--muted); margin-right: 14px; }
.hero-sub { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 2px solid var(--ink); background: var(--paper); }
.hero-sub > div { padding: 10px 14px; border-right: 1px solid var(--line); }
.hero-sub > div:last-child { border-right: 0; }
.hero-sub .k { font-size: 11.5px; color: var(--muted); letter-spacing: .1em; }
.hero-sub .v { font-family: var(--f-head); font-weight: 700; font-size: 20px; line-height: 1.4; }
.hero-sub .v small { font-size: 12px; font-family: var(--f-body); font-weight: 500; }

/* red lantern (CSS) */
.chochin { width: 46px; height: 64px; position: relative; filter: drop-shadow(0 0 14px rgba(255, 110, 60, .65)); }
.chochin::before { content: ""; position: absolute; inset: 7px 0; border-radius: 48% / 50%; background: radial-gradient(circle at 40% 35%, #ff8a5c, var(--shu) 55%, #7d1d0d); background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 6px), radial-gradient(circle at 40% 35%, #ff8a5c, var(--shu) 55%, #7d1d0d); animation: glow 4s ease-in-out infinite; }
.chochin::after { content: ""; position: absolute; left: 12px; right: 12px; top: 0; bottom: 0; border-top: 7px solid #1a1a1a; border-bottom: 7px solid #1a1a1a; border-radius: 3px; }
@keyframes glow { 50% { filter: brightness(1.12); } }

/* ---------- sections ---------- */
section.sec { padding: 56px 0; }
.sec-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.tate {
  writing-mode: vertical-rl; font-family: var(--f-sign); font-size: 30px; letter-spacing: .2em; margin: 0; line-height: 1.2;
  background: var(--ai); color: #f6f1e6; padding: 16px 10px; box-shadow: 4px 4px 0 rgba(28, 45, 79, .2); flex: none;
}
.tate.shu { background: var(--shu); box-shadow: 4px 4px 0 rgba(165, 44, 24, .25); }
.tate.wood { background: var(--wood-dark); }
.sec-head .lead { margin: 4px 0 0; color: var(--muted); max-width: 38em; }
.sec-head .lead b { color: var(--ink); }
.sec-head .en { display: block; font-family: var(--f-head); font-size: 12px; letter-spacing: .4em; color: var(--fuji-deep); }
.sec-head h2 { font-family: var(--f-head); font-size: clamp(22px, 2.6vw, 28px); margin: 2px 0 6px; line-height: 1.45; }
.panel { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 3px 3px 0 rgba(42, 34, 28, .07); padding: 22px; }

/* today board (blackboard) */
.board { background: #213028; color: #eef0e6; border: 10px solid var(--wood); box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.2); padding: 20px 24px; display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; align-items: center; font-family: var(--f-hand); }
.board .day { font-size: 26px; line-height: 1.3; }
.board .day b { display: block; font-size: 40px; color: #ffe08a; }
.board ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; font-size: 16.5px; }
.board li span { color: #b8c6b4; font-size: 13px; margin-right: 8px; }
.board .state { display: inline-block; border: 2px solid currentColor; padding: 0 10px; border-radius: 4px; color: #ffb39b; transform: rotate(-3deg); }
.board .state.open { color: #9cf0b3; }
.board .count { grid-column: 1 / -1; border-top: 1px dashed rgba(255,255,255,.25); padding-top: 8px; font-size: 15px; color: #d9e0d2; }
.board .count b { color: #ffe08a; font-weight: 400; }

/* fee board: lacquer plaque with vertical characters */
.fees { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.plaque { background: #1d1612; color: #f3ead8; padding: 22px 18px; border: 8px solid #6c4422; box-shadow: inset 0 0 0 2px #2c1d12, 0 10px 24px rgba(0,0,0,.25); display: flex; flex-direction: row-reverse; gap: 22px; }
.plaque .col { writing-mode: vertical-rl; font-family: var(--f-sign); font-size: 26px; letter-spacing: .14em; line-height: 1; display: flex; gap: 12px; align-items: center; }
.plaque .col small { font-family: var(--f-head); font-size: 13px; letter-spacing: .1em; color: #c9b896; }
.plaque .col b { color: #ffd27a; font-weight: 400; }
.plaque .col.title { color: #ffd27a; font-size: 22px; }
table.fee { width: 100%; border-collapse: collapse; background: var(--paper); border: 2px solid var(--ink); font-size: 14.5px; }
table.fee th, table.fee td { border-bottom: 1px solid var(--line); padding: 10px 14px; text-align: left; }
table.fee th { font-family: var(--f-head); background: #efe6d2; font-size: 13px; }
table.fee td.num { font-family: var(--f-head); font-weight: 700; text-align: right; white-space: nowrap; }
.fine { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }

/* features */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.feat { background: var(--paper); border: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; box-shadow: 3px 3px 0 rgba(42, 34, 28, .07); }
.feat figure { margin: 0; position: relative; overflow: hidden; }
.feat figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.feat .txt { grid-column: 1 / -1; padding: 16px 18px 18px; }
.feat h3 { font-family: var(--f-head); margin: 0 0 4px; font-size: 19px; }
.feat p { margin: 0; font-size: 14.5px; color: var(--muted); }
.feat .side { writing-mode: vertical-rl; font-family: var(--f-sign); font-size: 22px; letter-spacing: .3em; padding: 14px 10px; background: var(--wood-dark); color: #f3e6cf; }
.feat a.more { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--fuji-deep); }

/* notices: paper slips taped on tiles */
.harigami { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
.slip { position: relative; background: #fffdf6; padding: 22px 20px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 18px -10px rgba(0,0,0,.25); transform: rotate(var(--r, -.6deg)); }
.slip::before, .slip::after { content: ""; position: absolute; top: -9px; width: 64px; height: 20px; background: rgba(226, 214, 176, .82); box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.slip::before { left: 14px; transform: rotate(-6deg); }
.slip::after { right: 14px; transform: rotate(5deg); }
.slip time { font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.slip h3 { font-family: var(--f-head); font-size: 17px; margin: 2px 0 6px; line-height: 1.5; }
.slip p { margin: 0; font-size: 14px; }
.slip.red h3 { color: var(--shu-deep); }
.slip .btn { margin-top: 10px; }

/* steam host */
.steam { position: relative; }
.steam > canvas.fog { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.steam.fogged { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.steam-hint { font-size: 12.5px; color: var(--fuji-deep); margin: 6px 2px 0; }

/* diary teaser */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.post-card { text-decoration: none; background: var(--paper); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; align-items: start; box-shadow: 3px 3px 0 rgba(42, 34, 28, .07); transition: transform .15s; }
.post-card:hover { transform: translateY(-2px); }
.post-card img { aspect-ratio: 16 / 10; height: auto; align-self: start; object-fit: cover; width: 100%; }
.post-card div { padding: 12px 14px 14px; }
.post-card time { font-size: 12px; color: var(--muted); }
.post-card h3 { font-family: var(--f-head); font-size: 16px; margin: 2px 0 0; line-height: 1.5; }

/* faq */
.faq { display: grid; gap: 8px; max-width: 880px; }
.faq details { background: var(--paper); border: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 700; display: flex; gap: 12px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "問"; font-family: var(--f-sign); color: var(--fuji); }
.faq summary::after { content: "＋"; margin-left: auto; color: var(--muted); }
.faq details[open] summary::after { content: "－"; }
.faq .a { padding: 0 18px 16px 48px; color: var(--muted); }
.faq details.odd summary::before { color: var(--shu); }

/* access */
.access { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.map { border: 2px solid var(--ink); background: #ece6d6; min-height: 300px; position: relative; overflow: hidden; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
dl.info { margin: 0; display: grid; grid-template-columns: 6.5em 1fr; gap: 6px 12px; font-size: 14.5px; }
dl.info dt { color: var(--muted); }
dl.info dd { margin: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-weight: 700; font-size: 14.5px; text-decoration: none; cursor: pointer; border: 2px solid var(--ink); background: var(--ink); color: #fbf7ec; border-radius: 2px; box-shadow: 3px 3px 0 rgba(42, 34, 28, .2); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(42, 34, 28, .25); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(42, 34, 28, .2); }
.btn.shu { background: var(--shu); border-color: var(--shu-deep); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.sm { padding: 6px 14px; font-size: 13px; }

/* page head (subpages) */
.page-head { padding: 26px 0 18px; display: flex; gap: 18px; align-items: flex-start; }
.crumb { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.page-head h1 { font-family: var(--f-head); font-size: clamp(26px, 3.6vw, 38px); margin: 4px 0 4px; line-height: 1.35; }
.page-head p { margin: 0; color: var(--muted); max-width: 40em; }

/* ---------- 浴場とペンキ絵 ---------- */
.bath-photo { border: 10px solid var(--wood); outline: 2px solid var(--wood-dark); outline-offset: -2px; box-shadow: 0 10px 28px rgba(40, 25, 10, .25); }
.bath-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gallery { margin-top: 26px; }
.mural { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #234; border: 10px solid #ece7da; outline: 1px solid var(--line); box-shadow: 0 10px 28px rgba(40, 25, 10, .2); }
.mural img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.mural .yr { position: absolute; left: 12px; top: 10px; z-index: 3; font-family: var(--f-head); font-weight: 700; color: #fff; background: rgba(20, 24, 40, .55); padding: 2px 12px; font-size: 14px; letter-spacing: .1em; }
.mural .fig { position: absolute; z-index: 4; transform: translate(-50%, -50%); border: 0; background: transparent; cursor: pointer; border-radius: 40% 40% 30% 30%; }
.mural .fig:hover, .mural .fig:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 0 18px rgba(255, 255, 255, .45); outline: none; }
.years { display: grid; gap: 6px; margin-top: 14px; }
.years input[type=range] { width: 100%; accent-color: var(--fuji); height: 28px; }
.years .ticks { display: flex; justify-content: space-between; font-family: var(--f-head); font-size: 13px; color: var(--muted); }
.years .ticks button { background: none; border: 0; padding: 2px 0; cursor: pointer; color: inherit; font: inherit; }
.years .ticks button[aria-pressed="true"] { color: var(--fuji-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.mural-cap { margin: 10px 0 0; font-size: 14px; }
.repaint { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paper); border: 1px solid var(--line); margin-top: 16px; }
.repaint th, .repaint td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.repaint th { font-family: var(--f-head); background: #efe6d2; font-size: 12.5px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

/* ---------- diary ---------- */
.diary { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; padding-bottom: 60px; }
.entry { background: var(--paper); border: 1px solid var(--line); padding: 24px 26px; margin-bottom: 22px; box-shadow: 3px 3px 0 rgba(42, 34, 28, .07); }
.entry header { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.entry time { font-family: var(--f-head); font-weight: 700; color: var(--fuji-deep); }
.entry h2 { font-family: var(--f-head); font-size: 20px; margin: 0; line-height: 1.5; flex-basis: 100%; }
.entry p { margin: 0 0 10px; }
.entry figure { margin: 12px 0; }
.entry figure img { width: 100%; border: 6px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.entry figcaption { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.entry .sig { text-align: right; font-family: var(--f-hand); color: var(--muted); margin: 0; }
.chomen-thumb { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: min(340px, 100%); }
.chomen-thumb img { width: 100%; transform: rotate(-1.2deg); border: 0; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.side-box { background: var(--paper); border: 1px solid var(--line); padding: 16px 18px; margin-bottom: 18px; font-size: 14px; }
.side-box h3 { font-family: var(--f-head); font-size: 15px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ai); }
.side-box ul { margin: 0; padding-left: 1.1em; }
.chokai { background: #fffef8; border: 1px solid #c9c2ad; }
.chokai h3 { border-color: var(--shu); }
.chokai table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.chokai td { padding: 3px 4px; border-bottom: 1px dotted var(--line); }
.chokai td.n { text-align: right; font-family: var(--f-head); font-weight: 700; }
.chokai td.d { text-align: right; color: var(--muted); font-size: 12px; }

.comments { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.comments h3 { font-size: 14px; margin: 0 0 8px; }
.cmt { background: #f3ecdc; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; }
.cmt .who { font-size: 12px; color: var(--muted); }
.cmt.reply { margin-left: 22px; background: #e8eef6; border-left: 3px solid var(--fuji); }
.cmt-form { display: grid; gap: 8px; }
.cmt-form .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cmt-form input, .cmt-form textarea, .field input, .field select, .field textarea { border: 1.5px solid #b9ae98; background: #fff; padding: 9px 12px; font-size: 15px; color: var(--ink); border-radius: 0; width: 100%; }
.cmt-form textarea { min-height: 70px; resize: vertical; }
.cmt-msg { margin: 0; min-height: 1.4em; font-size: 13.5px; color: var(--shu-deep); font-weight: 700; }
.cmt-msg.ok { color: var(--fuji-deep); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(15, 12, 8, .86); display: grid; place-items: center; padding: 16px; }
.lightbox-box { position: relative; max-width: min(760px, 100%); max-height: 100%; overflow: auto; }
.lightbox-box img { width: 100%; height: auto; max-height: calc(100vh - 90px); object-fit: contain; }
.lightbox-box p { color: #e7dfcf; font-size: 13px; margin: 8px 2px 0; }
.lightbox-close { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.6); color: #fff; border: 1px solid #777; padding: 4px 12px; cursor: pointer; font-size: 13px; }

/* ---------- bandai ---------- */
.bandai-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; padding-bottom: 60px; }
.field { display: grid; gap: 4px; }
.field label { font-size: 13px; font-weight: 700; }
.form { display: grid; gap: 14px; }
.geta { position: relative; border: 10px solid var(--wood); outline: 2px solid var(--wood-dark); outline-offset: -2px; background: #000; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.geta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.geta .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); padding: 18px 12px 6px; }
.mawari { background: #1f2a33; color: #e8eef2; padding: 20px 22px; border: 2px solid #0f161c; display: grid; gap: 10px; }
.mawari h2 { margin: 0; font-family: var(--f-head); font-size: 19px; color: #fff; }
.mawari p { margin: 0; font-size: 14px; color: #c7d2da; }
.mawari .row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.mawari input { width: 7em; font-family: var(--f-head); font-weight: 700; font-size: 22px; text-align: center; padding: 6px 10px; border: 2px solid #8fa3b3; background: #fdfaf0; color: var(--ink); }
.mawari .fuda-label { display: inline-grid; place-items: center; writing-mode: vertical-rl; background: var(--wood-light); color: #2a1708; font-family: var(--f-sign); padding: 8px 6px; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(70,40,10,.4); }
.mawari .msg { min-height: 1.5em; font-weight: 700; color: #ffb39b; }
.mawari .msg.ok { color: #9cf0b3; }
.sent { background: #e8eef6; border-left: 4px solid var(--fuji); padding: 10px 14px; font-size: 14px; }

/* ---------- footer ---------- */
.site-footer { margin-top: 30px; background: var(--wood-dark); color: #e9dcc6; font-size: 13.5px; position: relative; }
.site-footer::before { content: ""; display: block; height: 14px; background: repeating-linear-gradient(90deg, var(--ai) 0 calc(33.33% - 3px), transparent calc(33.33% - 3px) 33.33%); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; padding-top: 34px; padding-bottom: 24px; }
.site-footer h4 { font-family: var(--f-head); color: #fff; margin: 0 0 8px; font-size: 14px; letter-spacing: .1em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer a { color: #e9dcc6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand { font-family: var(--f-sign); font-size: 30px; letter-spacing: .2em; color: #fff; line-height: 1.2; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; font-size: 12px; color: #c4b293; }
.site-footer .legal button { background: none; border: 1px solid rgba(255,255,255,.3); color: #c4b293; padding: 1px 10px; cursor: pointer; font-size: 12px; }
.site-footer .count { font-family: var(--f-head); color: #ffd27a; }

/* ---------- alteration overlay ---------- */
.alter { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer; background: #000; }
.alter canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }
.alter .msg { position: relative; text-align: center; color: #fff; font-size: clamp(22px, 4vw, 40px); font-weight: 700; letter-spacing: .12em; text-shadow: 3px 0 #ff2a2a, -3px 0 #2affff; animation: jit .18s steps(2) infinite; padding: 0 16px; }
.alter .msg small { display: block; margin-top: 18px; font-size: 13px; letter-spacing: .3em; text-shadow: none; color: #bbb; animation: none; }
@keyframes jit { 50% { transform: translate(2px, -1px); text-shadow: -3px 0 #ff2a2a, 3px 0 #2affff; } }
html.glitching body { animation: gl .45s steps(3); }
@keyframes gl { 33% { filter: hue-rotate(80deg) contrast(1.4); transform: translateX(3px); } 66% { filter: invert(1); transform: translateX(-3px); } }

/* rising steam wisps behind the page from stage 2 */
.wisps { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.wisps i { position: absolute; bottom: -30vh; width: 40vw; height: 60vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(14px); animation: rise 16s linear infinite; opacity: 0; }
@keyframes rise { 0% { transform: translateY(0) scale(.8); opacity: 0; } 20% { opacity: .55; } 100% { transform: translateY(-140vh) scale(1.4); opacity: 0; } }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-copy { writing-mode: horizontal-tb; max-height: none; padding: 16px 18px; font-size: 24px; letter-spacing: .06em; }
  .hero-copy small { margin: 6px 0 0; letter-spacing: .1em; }
  .hero-sub { grid-template-columns: repeat(2, 1fr); }
  .hero-sub > div:nth-child(2) { border-right: 0; }
  .hero-sub > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .fees, .access, .two-col, .bandai-grid, .diary { grid-template-columns: 1fr; }
  .plaque { justify-content: center; }
  .harigami, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 15px; background-size: 38px 38px; }
  .noren { grid-template-columns: .8fr 1.7fr .8fr; gap: 4px; padding: 0 6px; }
  .noren > a, .noren > span { height: 74px; }
  .noren .name { font-size: 28px; letter-spacing: .18em; padding-left: .18em; }
  .noren .name small { font-size: 9.5px; letter-spacing: .3em; }
  .noren .yu { font-size: 32px; }
  .fuda-nav { gap: 8px; padding-top: 14px; }
  .fuda { font-size: 12.5px; padding: 5px 9px 5px 28px; }
  .fuda::before { width: 16px; height: 16px; left: 6px; font-size: 9.5px; }
  .feats, .harigami, .posts { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; padding: 16px; border-width: 8px; }
  .board ul { grid-template-columns: 1fr; }
  .sec-head { gap: 14px; }
  .tate { font-size: 22px; padding: 12px 7px; }
  .plaque { gap: 14px; padding: 18px 10px; }
  .plaque .col { font-size: 20px; gap: 8px; }
  .plaque .col.title { font-size: 17px; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  section.sec { padding: 40px 0; }
  .entry { padding: 18px 16px; }
  .page-head { flex-direction: column; gap: 10px; }
  .page-head .tate { writing-mode: horizontal-tb; }
}
img.framed { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 6px solid var(--wood); box-shadow: 0 6px 18px rgba(40, 25, 10, .2); }
/* repaint slider: a varnished wooden rail with a brass knob */
.years input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.years input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(#a26a36, #6b4321); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.years input[type=range]::-moz-range-track { height: 10px; border-radius: 5px; background: linear-gradient(#a26a36, #6b4321); }
.years input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #c99a3a 55%, #7a5512); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.years input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #c99a3a 55%, #7a5512); }
html:is([data-stage="3"], [data-stage="4"]) .noren > a, html:is([data-stage="3"], [data-stage="4"]) .noren > span { filter: brightness(.7) saturate(.8); animation-duration: 14s; }