/* ひだまり写真館 — a Showa-era town photo studio: aged sepia paper, burnt umber, gilt frames, mounted prints and album pages.
   From stage 3 the gilt turns to mourning black and a thin red runs through everything. */
:root {
  --paper: #f2e8d5;
  --paper-2: #e9dcc3;
  --mat: #fbf6ea;
  --ink: #2c1d13;
  --ink-2: #5a4331;
  --muted: #7d6650;
  --umber: #3a2416;
  --umber-2: #4d3220;
  --gold: #a98436;
  --gold-2: #d8bd7b;
  --gold-soft: #efe0b9;
  --line: #d6c4a3;
  --red: #8f1c17;
  --album: #3b2619;
  --f-head: "Kaisei Tokumin", "Shippori Mincho", "Yu Mincho", serif;
  --f-body: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --f-en: "Libre Caslon Text", "Noto Serif JP", serif;
  --f-hand: "Zen Kurenaido", "Klee One", cursive;
  --f-brush: "Yuji Syuku", "Kaisei Tokumin", serif;
  --shadow: 0 1px 1px rgba(60, 35, 15, .12), 0 6px 18px rgba(60, 35, 15, .16);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .13 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
html[data-stage="2"] { --gold: #9c7a36; --paper: #efe4cf; }
html[data-stage="3"], html[data-stage="4"] {
  --paper: #e7dcc8; --paper-2: #ddcfb5; --mat: #f4eee2;
  --gold: #1f1714; --gold-2: #4a3a33; --gold-soft: #ddd2c2;
  --muted: #6e5c4d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
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; background: var(--paper) var(--grain); color: var(--ink); font-family: var(--f-body); font-size: 15.5px; line-height: 1.95; letter-spacing: .03em; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .8s; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
.nb { white-space: nowrap; }
.en { font-family: var(--f-en); font-style: italic; letter-spacing: .04em; }

/* 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; }

/* handwriting jitter */
.hand { font-family: var(--f-hand); }
.hc { display: inline-block; white-space: pre; }
.hc.sp { width: .4em; }

/* ---------- header ---------- */
.topline { background: var(--umber); color: #e8d9bd; font-size: 12.5px; letter-spacing: .08em; }
.topline .wrap { display: flex; justify-content: space-between; gap: 16px; min-height: 32px; align-items: center; flex-wrap: wrap; }
.topline .tl-r { display: flex; gap: 18px; flex-wrap: wrap; }
.topline a { text-decoration: none; }
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--paper), 0 2px 0 var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.logo .mark { width: 40px; height: 40px; color: var(--gold); transition: color .8s; flex: none; }
.logo .word { display: flex; flex-direction: column; line-height: 1.15; }
.logo .word b { font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: .14em; }
.logo .word i { font-family: var(--f-en); font-size: 11px; letter-spacing: .12em; color: var(--muted); margin-top: 3px; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; font-size: 14px; }
.nav a { text-decoration: none; padding: 6px 11px; color: var(--ink-2); position: relative; }
.nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav .nav-cta { margin-left: 10px; background: var(--umber); color: #f6ead2; padding: 8px 20px; outline: 1px solid var(--umber); outline-offset: 2px; }
.nav .nav-cta::after { display: none; }
.nav .nav-cta[aria-current="page"] { color: #f6ead2; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line); width: 44px; height: 44px; cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 4px auto; }

/* ---------- common parts ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 28px; background: var(--umber); color: #f6ead2; border: 0; outline: 1px solid var(--umber); outline-offset: 3px; text-decoration: none; font-size: 14.5px; letter-spacing: .12em; cursor: pointer; transition: background .2s, transform .15s; }
.btn:hover { background: var(--umber-2); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); outline-color: var(--ink-2); }
.btn.ghost:hover { background: var(--mat); }
.btn.sm { padding: 8px 18px; font-size: 13.5px; }
.sec { padding-block: 84px; }
.sec.tint { background: var(--paper-2) var(--grain); border-block: 1px solid var(--line); }
.sec-head { text-align: center; margin-bottom: 44px; }
.sec-head .en { display: block; color: var(--gold); font-size: 15px; transition: color .8s; }
.sec-head h2 { font-family: var(--f-head); font-weight: 700; font-size: clamp(25px, 3.4vw, 34px); letter-spacing: .14em; margin: 4px 0 10px; line-height: 1.5; }
.sec-head p { margin: 0 auto; max-width: 36em; color: var(--ink-2); }
.orn { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold); margin: 6px auto 0; width: 220px; transition: color .8s; }
.orn::before, .orn::after { content: ""; flex: 1; height: 0; border-top: 3px double currentColor; }
.orn i { width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }

/* mounted print: white mat, thin gold line, photo corners */
.print { background: var(--mat); padding: 14px 14px 12px; box-shadow: var(--shadow); position: relative; }
.print .ph { position: relative; outline: 1px solid rgba(169, 132, 54, .45); outline-offset: 4px; }
.print .ph img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) saturate(.95); }
.corners > i { position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none; }
.corners > i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #20140c 0 50%, transparent 50%); filter: drop-shadow(1px 1px 1px rgba(0,0,0,.35)); }
.corners > i:nth-child(1) { left: -7px; top: -7px; }
.corners > i:nth-child(2) { right: -7px; top: -7px; transform: rotate(90deg); }
.corners > i:nth-child(3) { right: -7px; bottom: -7px; transform: rotate(180deg); }
.corners > i:nth-child(4) { left: -7px; bottom: -7px; transform: rotate(270deg); }
.corners > i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 1px; background: rgba(255,255,255,.18); transform-origin: 0 0; transform: rotate(45deg) translateY(4px) scaleX(.6); }

/* gilt frame (border-image from a photographed frame); mourning black from stage 3 */
.gilt { border: 26px solid transparent; border-image: url("../img/frame.webp") 13.5% stretch; background: var(--mat); padding: 12px; box-shadow: 0 10px 26px rgba(40, 22, 8, .28); position: relative; }
html:is([data-stage="3"], [data-stage="4"]) .gilt { border-image-source: url("../img/frame-black.webp"); border-width: 30px; }
.gilt img { width: 100%; filter: sepia(.12); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(78vh, 720px); display: grid; overflow: hidden; color: #fbf1de; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) saturate(.9) brightness(.92); transition: filter 1s; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 16, 6, .5) 0%, rgba(30, 16, 6, .05) 46%, rgba(30, 16, 6, .45) 100%), radial-gradient(ellipse at 70% 40%, transparent 30%, rgba(25, 12, 4, .45) 100%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-block: 60px; }
.hero .lead { max-width: 25em; }
.hero .lead .en { font-size: 17px; color: var(--gold-2); }
.hero .lead p { font-size: 15.5px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.hero .lead .cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.hero .lead .btn.ghost { color: #fbf1de; outline-color: #fbf1de; }
.hero .lead .btn.ghost:hover { background: rgba(255,255,255,.12); }
.hero .v { writing-mode: vertical-rl; font-family: var(--f-head); font-weight: 700; font-size: clamp(30px, 4.2vw, 50px); letter-spacing: .22em; line-height: 1.7; text-shadow: 0 2px 14px rgba(20, 10, 0, .55); margin: 0; height: 9.5em; }
.hero .v small { display: block; font-size: .42em; letter-spacing: .3em; font-weight: 400; margin-left: 1.4em; color: var(--gold-soft); }
html:is([data-stage="3"], [data-stage="4"]) .hero .lead .en { color: #d99a8c; }
html:is([data-stage="3"], [data-stage="4"]) .hero > img { filter: sepia(.5) saturate(.6) brightness(.7) contrast(1.1); }

/* news */
.news { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }
.news h2 { font-family: var(--f-head); font-size: 24px; letter-spacing: .16em; margin: 0; line-height: 1.4; }
.news h2 .en { display: block; font-size: 14px; color: var(--gold); }
.news ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news li { display: grid; grid-template-columns: 110px 92px 1fr; gap: 12px; padding: 14px 4px; border-bottom: 1px dotted var(--line); font-size: 14.5px; align-items: baseline; }
.news time { font-family: var(--f-en); color: var(--muted); font-size: 13.5px; }
.news .tag { font-size: 11.5px; border: 1px solid var(--ink-2); padding: 0 6px; text-align: center; color: var(--ink-2); letter-spacing: .08em; }
.news li.odd .tag { border-color: var(--red); color: var(--red); }
.news a { text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* plans */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 26px; }
.plan { display: flex; flex-direction: column; }
.plan .print { transform: rotate(var(--tilt, 0deg)); transition: transform .3s; }
.plan:hover .print { transform: rotate(0deg) translateY(-3px); }
.plan .ph { aspect-ratio: 2 / 3; }
.plan.wide .ph { aspect-ratio: 2 / 3; }
.plan h3 { font-family: var(--f-head); font-size: 19px; letter-spacing: .14em; margin: 22px 0 4px; }
.plan h3 small { font-family: var(--f-en); font-style: italic; font-size: 12.5px; color: var(--muted); margin-left: 8px; letter-spacing: .06em; }
.plan p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.85; }
.plan .cap { font-size: 15px; color: var(--ink-2); text-align: center; margin: 8px 0 0; }
.plan .gone { font-size: 13px; color: var(--red); margin-top: 6px; }
.feature { margin-top: 64px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.feature .badge { display: inline-block; font-size: 12px; letter-spacing: .2em; border: 1px solid var(--gold); color: var(--gold); padding: 1px 10px; }
.feature h3 { font-family: var(--f-head); font-size: clamp(22px, 2.8vw, 29px); letter-spacing: .12em; margin: 12px 0 10px; line-height: 1.6; }
.feature ul { padding-left: 1.2em; margin: 14px 0 22px; }
.feature li { margin: 2px 0; }

/* price */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 48px; }
.menu h3 { font-family: var(--f-head); font-size: 18px; letter-spacing: .12em; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 3px double var(--line); }
.menu dl { margin: 0; }
.menu .row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 14.5px; }
.menu .row dt { flex: none; }
.menu .row::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--muted); transform: translateY(-4px); opacity: .7; }
.menu .row dd { order: 2; margin: 0; font-family: var(--f-en); white-space: nowrap; }
.menu .row dd small { font-family: var(--f-body); font-size: 11.5px; color: var(--muted); }
.menu .note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.price-foot { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 34px; }

/* costumes */
.costume { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.costume .print .ph { aspect-ratio: 4 / 3; }
.c-list { list-style: none; margin: 0; padding: 0; }
.c-list li { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; padding: 11px 0; border-bottom: 1px dotted var(--line); align-items: baseline; font-size: 14.5px; }
.c-list .no { font-family: var(--f-en); color: var(--muted); font-size: 13px; }
.c-list .st { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.c-list .st.out { color: var(--red); }

/* owner */
.owner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 54px; align-items: center; }
.owner .print .ph { aspect-ratio: 4 / 3; }
.owner h3 { font-family: var(--f-head); font-size: 23px; letter-spacing: .12em; margin: 0 0 6px; }
.owner .sign { font-family: var(--f-hand); font-size: 22px; text-align: right; margin-top: 18px; }
.owner .sign small { font-family: var(--f-body); font-size: 12.5px; color: var(--muted); margin-right: 10px; }
.history { list-style: none; margin: 22px 0 0; padding: 0; border-left: 1px solid var(--gold); }
.history li { padding: 2px 0 8px 18px; position: relative; font-size: 14px; }
.history li::before { content: ""; position: absolute; left: -4px; top: 11px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.history b { font-family: var(--f-en); font-weight: 400; margin-right: 10px; color: var(--ink-2); }

/* flow, voice, faq, access */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: f; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flow li { list-style: none; padding: 26px 22px; border-right: 1px dotted var(--line); counter-increment: f; }
.flow li:last-child { border-right: 0; }
.flow li::before { content: "其の" counter(f, cjk-ideographic); display: block; font-family: var(--f-head); color: var(--gold); font-size: 14px; letter-spacing: .2em; }
.flow h3 { font-family: var(--f-head); font-size: 17px; margin: 6px 0; letter-spacing: .1em; }
.flow p { margin: 0; font-size: 14px; color: var(--ink-2); }
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.voice { background: var(--mat); padding: 26px 26px 20px; box-shadow: var(--shadow); position: relative; }
.voice::before { content: "“"; position: absolute; left: 14px; top: -6px; font-family: var(--f-en); font-size: 56px; color: var(--gold-2); line-height: 1; }
.voice p { margin: 8px 0 12px; font-size: 14.5px; }
.voice .who { font-size: 13px; color: var(--muted); border-top: 1px dotted var(--line); padding-top: 8px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.voice.odd .who { color: var(--red); }
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px dotted var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 12px 34px 12px 2.2em; position: relative; list-style: none; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "問"; position: absolute; left: 0; top: 12px; font-family: var(--f-head); color: var(--gold); }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 10px; font-family: var(--f-en); font-size: 20px; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 14px; padding-left: 2.2em; position: relative; color: var(--ink-2); font-size: 14.5px; }
.faq details p::before { content: "答"; position: absolute; left: 0; font-family: var(--f-head); color: var(--ink-2); }
.faq details.odd summary { color: var(--red); }
.access { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.access dl { display: grid; grid-template-columns: 7em 1fr; gap: 8px 14px; margin: 0; font-size: 14.5px; }
.access dt { color: var(--muted); }
.access dd { margin: 0; }
.map { background: var(--mat); box-shadow: var(--shadow); padding: 12px; }
.map svg { width: 100%; height: auto; display: block; }

/* ---------- page head ---------- */
.page-head { padding-block: 56px 26px; text-align: center; }
.page-head .crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; letter-spacing: .08em; }
.page-head .crumb a { text-decoration: none; }
.page-head h1 { font-family: var(--f-head); font-weight: 700; font-size: clamp(27px, 4vw, 38px); letter-spacing: .16em; margin: 0; line-height: 1.5; }
.page-head p { color: var(--ink-2); max-width: 38em; margin: 12px auto 0; }

/* ---------- album ---------- */
.album-sec { background: #2a1a10; color: #eadcc2; padding-block: 56px 70px; position: relative; }
.album-sec::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(255, 214, 150, .1), transparent 65%); pointer-events: none; }
.album-head { text-align: center; position: relative; }
.album-head .en { color: var(--gold-2); font-size: 15px; }
.album-head h2 { font-family: var(--f-head); font-size: clamp(22px, 3vw, 30px); letter-spacing: .14em; margin: 4px 0 8px; color: #fbf1de; line-height: 1.5; }
.album-head p { margin: 0 auto; max-width: 40em; font-size: 14.5px; color: #cdbb9c; }
.album-tabs { display: flex; justify-content: center; gap: 0; margin: 26px auto 24px; position: relative; }
.album-tabs button { background: transparent; border: 1px solid #7a6040; color: #e7d6b6; padding: 8px 22px; cursor: pointer; font-size: 14px; letter-spacing: .1em; }
.album-tabs button + button { border-left: 0; }
.album-tabs button[aria-selected="true"] { background: #e8d7b5; color: #2a1a10; border-color: #e8d7b5; }

.book { position: relative; max-width: 1040px; margin: 0 auto; perspective: 2600px; }
.book-inner { display: grid; grid-template-columns: 1fr 1fr; position: relative; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.book-inner::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 60px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(0,0,0,.42) 46%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.42) 54%, transparent); pointer-events: none; z-index: 3; }
.page { position: relative; aspect-ratio: 1 / 1.02; background: var(--album) url("../img/album-page.webp") center / cover; padding: 9% 9% 7%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; overflow: hidden; }
.page::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 12%, transparent 88%, rgba(0,0,0,.18)); pointer-events: none; }
.page .yr { font-family: var(--f-hand); color: #f1e4c8; font-size: clamp(15px, 1.6vw, 19px); align-self: flex-start; margin-left: 2%; }
.shot { position: relative; width: 100%; background: #f6efe0; padding: 3.2%; box-shadow: 0 2px 3px rgba(0,0,0,.5); transform: rotate(var(--tilt, 0deg)); }
.shot .pic { position: relative; aspect-ratio: 3 / 2; overflow: hidden; cursor: default; }
.shot .pic img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.14) contrast(.97); user-select: none; -webkit-user-drag: none; }
.shot.corners > i { width: 9%; height: 0; padding-bottom: 9%; }
.shot.corners > i:nth-child(1) { left: -2.2%; top: -3.3%; }
.shot.corners > i:nth-child(2) { right: -2.2%; top: -3.3%; }
.shot.corners > i:nth-child(3) { right: -2.2%; bottom: -3.3%; }
.shot.corners > i:nth-child(4) { left: -2.2%; bottom: -3.3%; }
.page .cap { color: #f3e7cc; font-size: clamp(14.5px, 1.55vw, 18px); line-height: 1.7; text-align: center; min-height: 3.4em; }
.page .cap small { display: block; font-size: .82em; color: #d9c7a5; }
.page.blank .shot { background: transparent; box-shadow: none; padding: 0; }
.page.blank .shot .pic { background: rgba(0,0,0,.12); outline: 1px dashed rgba(240, 225, 190, .25); }
.page .folio { position: absolute; bottom: 3%; font-family: var(--f-en); font-size: 12px; color: #a68e6c; }
.page.l .folio { left: 7%; } .page.r .folio { right: 7%; }
.leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45, .05, .25, 1); z-index: 5; }
.leaf.fwd { left: 50%; transform-origin: 0 50%; }
.leaf.back { left: 0; transform-origin: 100% 50%; }
.leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .face .page { height: 100%; aspect-ratio: auto; }
.leaf .face.b { transform: rotateY(180deg); }
.leaf .face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 35%); opacity: 0; transition: opacity .9s; pointer-events: none; }
.leaf.turning .face::after { opacity: 1; }
.book-nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 24px; color: #d9c7a5; font-size: 14px; position: relative; }
.book-nav button { background: transparent; border: 1px solid #8a7050; color: #f1e4c8; width: 46px; height: 46px; cursor: pointer; font-size: 18px; }
.book-nav button:disabled { opacity: .3; cursor: default; }
.book-nav .where { font-family: var(--f-en); min-width: 9em; text-align: center; }

/* compare */
.cmp { max-width: 980px; margin: 0 auto; position: relative; }
.cmp-ctl { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: center; align-items: center; margin-bottom: 18px; font-size: 14px; }
.cmp-ctl label { display: inline-flex; gap: 8px; align-items: center; }
.cmp-ctl select { background: #f3e7cc; color: #2a1a10; border: 0; padding: 6px 10px; font-size: 15px; }
.cmp-ctl button { background: transparent; border: 1px solid #8a7050; color: #f1e4c8; padding: 6px 16px; cursor: pointer; letter-spacing: .06em; }
.cmp-ctl button[aria-pressed="true"] { background: #e8d7b5; color: #2a1a10; }
.cmp-stage { position: relative; background: #f6efe0; padding: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.5); }
.cmp-view { position: relative; aspect-ratio: 3 / 2; overflow: hidden; touch-action: pan-y; user-select: none; }
.cmp-view .layer { position: absolute; inset: 0; }
.cmp-view .layer img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.14) contrast(.97); -webkit-user-drag: none; }
.cmp-view .layer.b { clip-path: inset(0 0 0 var(--cut, 50%)); }
.cmp-view.blink .layer.b { clip-path: none; }
.cmp-view.blink.show-a .layer.b { opacity: 0; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 0; z-index: 4; }
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #f6efe0; box-shadow: 0 0 6px rgba(0,0,0,.6); }
.cmp-handle span { position: absolute; top: 50%; left: 0; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #f6efe0; box-shadow: 0 2px 8px rgba(0,0,0,.5); display: grid; place-items: center; cursor: ew-resize; color: #2a1a10; font-size: 14px; letter-spacing: -.1em; }
.cmp-view.blink .cmp-handle { display: none; }
.cmp-tag { position: absolute; top: 10px; z-index: 3; font-family: var(--f-hand); font-size: 16px; background: rgba(42, 26, 16, .78); color: #f3e7cc; padding: 1px 10px; pointer-events: none; }
.cmp-tag.a { left: 10px; } .cmp-tag.b { right: 10px; }
.cmp-view.blink .cmp-tag.a { display: none; }
.cmp-view.blink.show-a .cmp-tag.a { display: block; }
.cmp-view.blink.show-a .cmp-tag.b { display: none; }
.cmp-range { width: 100%; margin-top: 12px; accent-color: #b08a45; }
.cmp-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; color: #f3e7cc; font-size: 15px; line-height: 1.7; }
.cmp-caps > div:last-child { text-align: right; }
.cmp-caps small { display: block; color: #cdbb9c; font-size: 13px; }

/* marks drawn over the photographs */
.marks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.marks svg { position: absolute; overflow: visible; }
.marks .ring { fill: none; stroke: #c4261d; stroke-width: 2.6; stroke-linecap: round; filter: url(#crayon); stroke-dasharray: 400; stroke-dashoffset: 400; animation: ring .7s ease-out forwards; vector-effect: non-scaling-stroke; }
.marks .ring.flash { animation: ring .5s ease-out forwards, fadeRing 1.4s .6s forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
@keyframes fadeRing { to { opacity: 0; } }
.marks .num { position: absolute; font-family: var(--f-hand); color: #c4261d; font-size: clamp(14px, 1.7vw, 20px); line-height: 1; transform: translate(-50%, -100%); text-shadow: 0 0 2px rgba(255,255,255,.7); white-space: nowrap; }
.marks .eye { position: absolute; width: max(2.6px, .42%); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #ff8a6a 0 18%, #d0140e 45%, rgba(200, 16, 12, 0) 75%); box-shadow: 0 0 3px 1px rgba(255, 36, 20, .45); animation: eyeglow 4s ease-in-out infinite; }
@keyframes eyeglow { 0%, 100% { opacity: .75; } 50% { opacity: 1; box-shadow: 0 0 5px 2px rgba(255, 36, 20, .6); } }
html:is([data-stage="3"], [data-stage="4"]) .album-head .en { color: #c0574a; }
.hit-flash { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 200, .5), transparent 70%); animation: hf .6s forwards; }
@keyframes hf { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.3); } }

.album-note { max-width: 680px; margin: 34px auto 0; background: #efe2c6; color: #3a2416; padding: 18px 26px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.4); transform: rotate(-.6deg); position: relative; }
.album-note::before { content: ""; position: absolute; left: 50%; top: -10px; width: 90px; height: 22px; margin-left: -45px; background: rgba(230, 214, 170, .75); transform: rotate(2deg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.album-note p { margin: 0; font-size: 17px; line-height: 1.9; }
.album-note .sig { text-align: right; font-size: 15px; margin-top: 6px; }
.album-hint { text-align: center; font-size: 13.5px; color: #bda887; margin: 18px auto 0; max-width: 40em; position: relative; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60; background: #2a1a10; color: #f3e7cc; padding: 10px 22px; font-size: 14.5px; box-shadow: 0 6px 20px rgba(0,0,0,.4); border: 1px solid #7a6040; max-width: calc(100% - 32px); text-align: center; }
.called { list-style: none; margin: 26px auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.called li { background: #f6efe0; color: #2c1d13; padding: 12px 16px 10px; box-shadow: 0 3px 8px rgba(0,0,0,.4); font-size: 14px; line-height: 1.7; }
.called li b { font-family: var(--f-hand); font-weight: 400; font-size: 19px; display: block; }
.called li .seat { color: #c4261d; font-family: var(--f-hand); font-size: 15px; }
.called li small { display: block; color: #6d5a48; font-size: 12.5px; }

/* sample prints on the gallery page */
.samples { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; align-items: start; }
.samples figure { margin: 0; }
.samples .gilt .ph { aspect-ratio: 2 / 3; overflow: hidden; }
.samples .gilt .ph img { height: 100%; object-fit: cover; }
.samples .gilt.land .ph { aspect-ratio: 3 / 2; }
.samples figcaption { text-align: center; margin-top: 14px; font-size: 14px; }
.samples figcaption b { font-family: var(--f-head); font-weight: 700; display: block; font-size: 16px; letter-spacing: .1em; }
.samples figcaption .gone { color: var(--red); font-size: 13px; display: block; }

/* ---------- reserve ---------- */
.res { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; padding-bottom: 80px; }
.form-card { background: var(--mat); box-shadow: var(--shadow); padding: 34px 36px; position: relative; }
.form-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none; }
.fld { margin-bottom: 20px; position: relative; }
.fld > label, .fld > .lb { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; letter-spacing: .08em; }
.fld .req { font-size: 11px; color: #fff; background: var(--ink-2); padding: 0 6px; margin-left: 8px; vertical-align: 1px; }
.fld input[type=text], .fld input[type=tel], .fld input[type=date], .fld select, .fld textarea { width: 100%; background: #fffdf7; border: 1px solid var(--line); border-bottom: 1px solid var(--ink-2); padding: 10px 12px; font-size: 15.5px; border-radius: 0; }
.fld textarea { min-height: 80px; resize: vertical; }
.fld .help { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.7; }
.fld .err { font-size: 13px; color: var(--red); margin: 6px 0 0; }
.fld.locked select { background: #f3ecdf; }
.fld .lockmsg { font-size: 13.5px; color: var(--red); margin: 6px 0 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.radios { display: grid; gap: 8px; }
.radios label { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border: 1px solid var(--line); background: #fffdf7; cursor: pointer; font-size: 14.5px; }
.radios label:has(input:checked) { border-color: var(--ink-2); background: var(--gold-soft); }
.radios small { color: var(--muted); font-size: 12.5px; margin-left: auto; white-space: nowrap; }
.consent { font-size: 13.5px; display: flex; gap: 10px; align-items: baseline; }
.side .panel { background: var(--mat); box-shadow: var(--shadow); padding: 24px 26px; margin-bottom: 22px; }
.side .panel h3 { font-family: var(--f-head); font-size: 17px; letter-spacing: .12em; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 3px double var(--line); }
.side .panel ul { padding-left: 1.2em; margin: 0; font-size: 14px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 12.5px; text-align: center; }
.cal b { font-weight: 500; color: var(--muted); }
.cal span { padding: 4px 0; background: #fffdf7; border: 1px solid var(--line); line-height: 1.4; }
.cal span i { display: block; font-style: normal; font-size: 11.5px; }
.cal span.x { color: #b9a78f; background: transparent; }
.cal span.pad { border-color: transparent; background: transparent; }
.cal span.one i { color: var(--red); }

.modal { position: fixed; inset: 0; z-index: 70; background: rgba(30, 18, 8, .6); display: grid; place-items: center; padding: 20px; }
.modal-box { background: var(--mat); max-width: 520px; width: 100%; padding: 34px 34px 28px; box-shadow: 0 20px 50px rgba(0,0,0,.45); position: relative; text-align: center; }
.modal-box::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none; }
.modal-box h3 { font-family: var(--f-head); font-size: 22px; letter-spacing: .14em; margin: 0 0 12px; }
.modal-box p { margin: 0 0 12px; font-size: 14.5px; }
.modal-box dl { display: grid; grid-template-columns: 6em 1fr; gap: 4px 12px; text-align: left; font-size: 14px; background: #fffdf7; border: 1px solid var(--line); padding: 12px 16px; margin: 0 0 20px; }
.modal-box dt { color: var(--muted); }
.modal-box dd { margin: 0; }
.modal-box .acts { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ground-glass preview (stage 3) */
.preview { padding-bottom: 90px; }
.glass-wrap { max-width: 980px; margin: 0 auto; background: #15100c; padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.45); position: relative; }
.glass-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #bba98d; font-family: var(--f-en); font-size: 13px; margin-bottom: 12px; }
.glass-top .rec { color: #e0574a; }
.glass { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
.glass .scene { position: absolute; inset: 0; transform: rotate(180deg); filter: blur(7px) brightness(.75) sepia(.3); transition: transform 1.6s cubic-bezier(.6, 0, .25, 1), filter 1.8s ease; }
.glass.focus .scene { filter: blur(0) brightness(.92) sepia(.12); }
.glass.upright .scene { transform: rotate(0deg); }
.glass .scene img { width: 100%; height: 100%; object-fit: cover; }
.glass .grid { position: absolute; inset: 0; pointer-events: none; z-index: 4; background:
  linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) 33.33% 0 / 1px 100% no-repeat,
  linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) 66.66% 0 / 1px 100% no-repeat,
  linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) 0 33.33% / 100% 1px no-repeat,
  linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) 0 66.66% / 100% 1px no-repeat,
  radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.glass .grain { position: absolute; inset: 0; z-index: 3; background: var(--grain); opacity: .9; mix-blend-mode: multiply; pointer-events: none; }
.glass .flash { position: absolute; inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; }
.glass .flash.go { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 4% { opacity: 1; } 100% { opacity: 0; } }
.glass-cap { color: #e9dcc3; text-align: center; margin: 16px 0 4px; font-size: 15px; min-height: 1.9em; }
.glass-cap .hand { font-size: 19px; }
.glass-acts { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.glass-acts .btn { background: #e8d7b5; color: #2a1a10; outline-color: #e8d7b5; }
.glass-acts .btn.ghost { background: transparent; color: #e9dcc3; outline-color: #8a7050; }
.glass-acts .btn:disabled { opacity: .4; cursor: default; transform: none; }
.glass-msg { text-align: center; color: #e0574a; font-size: 14px; margin: 10px 0 0; min-height: 1.6em; }

/* the place card (席札), projected onto the photographed chair */
.card-anchor { position: absolute; left: 0; top: 0; width: 200px; height: 120px; transform-origin: 0 0; z-index: 2; pointer-events: none; }
.card-anchor.on { pointer-events: auto; cursor: pointer; }
.seat-card { position: absolute; inset: 0; filter: sepia(.28) brightness(.9) contrast(.96); background: linear-gradient(100deg, #fffaf0 0%, #f6eedd 55%, #e4d8c2 100%); box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4px rgba(168, 128, 60, .8), inset 0 -10px 18px rgba(80, 50, 20, .14); display: grid; place-items: center; text-align: center; color: #1c120b; opacity: 0; transform: translateY(-160px); transition: transform .9s cubic-bezier(.3, 1.35, .5, 1), opacity .4s; }
.seat-card.placed { opacity: 1; transform: none; }
.seat-card .nm { font-family: var(--f-brush); font-size: 30px; line-height: 1.15; letter-spacing: .06em; padding: 0 10px; word-break: break-all; }
.seat-card .nm small { font-size: .62em; margin-left: 4px; }
.seat-card .sub { font-family: var(--f-head); font-size: 14px; letter-spacing: .3em; color: #7a2a1c; margin-top: 6px; border-top: 1px solid rgba(122, 42, 28, .4); padding-top: 3px; display: inline-block; }
.card-shadow { position: absolute; left: 0; top: 0; width: 200px; height: 120px; transform-origin: 0 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s .55s; }
.card-shadow.placed { opacity: 1; }
.card-shadow i { position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 70%, rgba(15, 6, 0, .85), rgba(15, 6, 0, .45) 45%, transparent 75%); filter: blur(5px); }
.card-shadow::after { content: ""; position: absolute; left: 1%; right: 10%; bottom: 3%; height: 15%; background: rgba(10, 4, 0, .7); filter: blur(3px); }

/* ---------- footer ---------- */
.site-footer { background: var(--umber) var(--grain); color: #d9c7a5; padding-block: 52px 26px; font-size: 13.5px; margin-top: 0; }
.site-footer .wrap { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 34px; }
.site-footer .logo { color: #f3e7cc; }
.site-footer .logo .word i { color: #b39c78; }
.site-footer .logo .mark { color: #d8bd7b; }
html:is([data-stage="3"], [data-stage="4"]) .site-footer .logo .mark { color: #9a2a22; }
.site-footer p { margin: 14px 0 0; max-width: 28em; }
.site-footer .f-seat { color: #f0a49a; }
.site-footer h4 { font-family: var(--f-head); font-size: 15px; letter-spacing: .16em; margin: 4px 0 10px; color: #f3e7cc; }
.site-footer ul { list-style: none; margin: 0; padding: 0; line-height: 2.1; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.legal { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid #5e4430; padding-top: 18px; margin-top: 10px; font-size: 12px; color: #b39c78; }
.legal button { background: none; border: 1px solid #7a6040; color: #d9c7a5; padding: 5px 14px; cursor: pointer; font-size: 12px; }

/* ---------- alteration ---------- */
.alter { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer; background: #120a04; }
.alter canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }
.alter .msg { position: relative; text-align: center; color: #fff6e4; font-family: var(--f-head); font-size: clamp(22px, 4vw, 40px); font-weight: 700; letter-spacing: .16em; text-shadow: 3px 0 #c4261d, -3px 0 #3d6b8a; animation: jit .18s steps(2) infinite; padding: 0 16px; }
.alter .msg small { display: block; margin-top: 18px; font-family: var(--f-en); font-size: 13px; letter-spacing: .3em; text-shadow: none; color: #cdbb9c; animation: none; font-weight: 400; }
@keyframes jit { 50% { transform: translate(2px, -1px); text-shadow: -3px 0 #c4261d, 3px 0 #3d6b8a; } }
html.glitching body { animation: gl .5s steps(3); }
@keyframes gl { 33% { filter: sepia(1) contrast(1.6) brightness(.8); transform: translateX(3px); } 66% { filter: invert(1) sepia(.6); transform: translateX(-3px); } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .samples { grid-template-columns: repeat(2, 1fr); }
  .voices { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li:nth-child(2) { border-right: 0; }
  .flow li:nth-child(-n+2) { border-bottom: 1px dotted var(--line); }
  .called { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); flex-direction: column; align-items: stretch; padding: 10px 20px 20px; border-bottom: 1px solid var(--line); box-shadow: 0 10px 20px rgba(40,20,5,.12); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 4px; border-bottom: 1px dotted var(--line); }
  .nav a::after { display: none; }
  .nav .nav-cta { margin: 14px 0 0; text-align: center; }
  .site-header .wrap { position: relative; }
  .feature, .price-grid, .costume, .owner, .access, .res, .news { grid-template-columns: 1fr; }
  .news { gap: 16px; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .book-inner { grid-template-columns: 1fr; }
  .book-inner::after { display: none; }
  .book-inner .page.r { display: none; }
  .leaf { width: 100%; }
  .leaf.fwd, .leaf.back { left: 0; transform-origin: 0 50%; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .sec { padding-block: 60px; }
  .topline .wrap > span:first-child { display: none; }
  .topline .wrap { justify-content: center; }
  .logo .word b { font-size: 19px; }
  .hero { min-height: 560px; }
  .hero .wrap { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 24px; padding-block: 40px; }
  .hero .v { writing-mode: horizontal-tb; height: auto; font-size: 30px; letter-spacing: .14em; line-height: 1.55; }
  .hero .v small { margin: 4px 0 0; }
  .plans { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .plan h3 { font-size: 16.5px; }
  .plan h3 small { display: block; margin: 0; }
  .news li { grid-template-columns: auto 1fr; }
  .news .tag { justify-self: start; padding: 0 10px; }
  .hero::after { background: linear-gradient(180deg, rgba(30, 16, 6, .45), rgba(30, 16, 6, .78)); }
  .album-tabs button { padding: 8px 12px; font-size: 13px; letter-spacing: .02em; }
  .cmp-ctl { gap: 10px; }
  .news li a, .news li > span:last-child { grid-column: 1 / -1; }
  .voices { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .flow li { border-right: 0; border-bottom: 1px dotted var(--line); }
  .samples { gap: 24px 14px; }
  .gilt { border-width: 16px; padding: 6px; }
  html:is([data-stage="3"], [data-stage="4"]) .gilt { border-width: 18px; }
  .form-card { padding: 26px 20px; }
  .two-col { grid-template-columns: 1fr; }
  .cmp-caps { font-size: 13.5px; }
  .called { grid-template-columns: 1fr; }
  .glass-wrap { padding: 10px; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .access dl { grid-template-columns: 5.5em 1fr; }
  .seat-card .nm { font-size: 30px; }
}