@charset "UTF-8";
/* Cinematic layer: scroll-scrubbed stage, lanterns, mask reveals, page transitions.
   Loaded after style.css. Everything animated is gated behind html.fx
   (set in <head> only when JavaScript runs and reduced motion is not requested). */
@property --accent { syntax:'<color>'; inherits:true; initial-value:#a4261e; }
:root { --bar:0px; --bar-total:0px; --accent:#a4261e; --stage-bg:#0f0d0a; --ease-out:cubic-bezier(.2,.7,.2,1); --ease-inout:cubic-bezier(.7,0,.15,1); transition:--accent 1.1s ease; }

/* Live accent: thin lines and glows only, never large surfaces. */
.primary-nav>a::after { background:var(--accent); }
.reading-progress { background:var(--accent); }
.red-rule { background:var(--accent); }
.button:not(.button-outline):not(.button-white-outline):not(.button-light):hover { box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 38%,transparent); }
.mask,.shoji { margin:0; }
.image-label { z-index:2; }

/* ---------- Frame sequence ---------- */
.seq { position:relative; overflow:hidden; background:var(--stage-bg); }
.seq-poster { width:100%; height:100%; object-fit:cover; }
/* object-fit: even if the bitmap is momentarily out of date it is cropped, never stretched. */
.seq-canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
.seq.is-ready .seq-canvas { opacity:1; }
html:not(.fx) .seq-canvas { display:none; }

/* ---------- Home stage: hero + motsunabe scroll film ---------- */
.stage { position:relative; background:var(--stage-bg); color:var(--white); --p:0; }
.stage-pin { position:relative; overflow:hidden; isolation:isolate; }
.stage h1 { font-size:clamp(31px,4.2vw,62px); line-height:1.44; letter-spacing:.04em; text-shadow:0 2px 18px #000a; }
.stage h1 span,.stage-line h2 span,.stage-big span { display:block; }
.stage .hero-eyebrow { display:block; font-size:13px; letter-spacing:.17em; color:#e8cf9d; margin-bottom:20px; }
.stage-hero p { margin-top:20px; font-size:17px; line-height:2; letter-spacing:.07em; text-shadow:0 1px 10px #000c; }
.stage-hero .actions { margin-top:30px; }
.stage-line h2,.stage-big { font-size:clamp(27px,3.5vw,54px); line-height:1.6; letter-spacing:.08em; font-weight:500; text-shadow:0 2px 20px #000c; }
.stage-big { font-family:var(--serif); margin:0; }
.stage-line .text-link { margin-top:22px; color:#f0dcb0; }
.stage-note { position:absolute; right:18px; bottom:12px; z-index:3; font:10px/1.4 var(--sans); letter-spacing:.05em; color:#d9cfbdcc; text-shadow:0 1px 6px #000; }
.stage-steam,.scroll-vert,.stage-shade { display:none; }
/* Static layout (no JS / reduced motion): picture first, then the copy in reading order. */
html:not(.fx) .stage-media { aspect-ratio:16/9; max-height:72vh; width:100%; }
html:not(.fx) .stage-copy { padding:34px 0 6px; }
html:not(.fx) .stage-copy:last-of-type { padding-bottom:44px; }
html:not(.fx) .stage-note { position:static; display:block; text-align:right; padding:0 18px 14px; }

.fx .stage { height:430vh; }
.fx .stage-pin { position:sticky; top:var(--header); height:calc(100vh - var(--header)); height:calc(100svh - var(--header)); }
.fx .stage-media { position:absolute; inset:0; z-index:-3; }
.fx .stage-media .seq-poster { display:none; }
.fx .stage-shade { display:block; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#0f0d0ad9 0%,#0f0d0a59 12%,transparent 30%),linear-gradient(90deg,rgb(15 13 10 / calc(.82 - var(--p) * .5)) 0%,rgb(15 13 10 / calc(.42 - var(--p) * .3)) 24%,transparent 48%); }
.fx .stage-copy { position:absolute; inset:0; z-index:2; display:flex; align-items:center; opacity:0; visibility:hidden; pointer-events:none; will-change:opacity,transform; }
.fx .stage-copy.is-on { visibility:visible; }
.fx .stage-copy.is-live { pointer-events:auto; }
.fx .stage-hero { opacity:1; visibility:visible; pointer-events:auto; }
@media(min-width:1021px) { .fx .stage-hero .container { width:min(1500px,calc(100% - 96px)); } }
.fx .stage-hero .container>* { max-width:600px; }
.fx .stage-line { align-items:flex-start; padding-top:clamp(34px,8vh,90px); }
.fx .stage-line-a { text-align:center; }
.fx .stage-line-b { padding-top:clamp(26px,6vh,70px); }
.stage-big { font-size:clamp(26px,3vw,46px); }
.fx .stage-steam { display:block; position:absolute; left:50%; top:6%; width:min(70vw,900px); height:58%; z-index:-2; pointer-events:none; opacity:calc(.1 + var(--p) * .55); transform:translate(-50%,calc(var(--steam-v,0) * -16px)); transition:transform .6s ease-out; }
.stage-steam i { position:absolute; bottom:0; width:34%; height:90%; border-radius:50%; background:radial-gradient(ellipse at 50% 70%,#fff4e22e 0%,#ffffff12 38%,transparent 70%); filter:blur(16px); animation:steam-drift 9s ease-in-out infinite; }
.stage-steam i:nth-child(1) { left:8%; animation-delay:-2s; }
.stage-steam i:nth-child(2) { left:34%; animation-duration:11s; animation-delay:-6s; }
.stage-steam i:nth-child(3) { left:58%; animation-duration:8s; animation-delay:-4s; }
@keyframes steam-drift { 0% { opacity:0; transform:translate(-6%,26%) scale(.7); } 35% { opacity:.9; } 70% { opacity:.5; transform:translate(7%,-22%) scale(1.15); } 100% { opacity:0; transform:translate(-3%,-52%) scale(1.35); } }
.fx .scroll-vert { display:flex; position:absolute; right:26px; top:50%; z-index:3; flex-direction:column; align-items:center; gap:14px; transform:translateY(-50%); opacity:calc(1 - var(--p) * 1.6); color:#d6c9b4; pointer-events:none; }
.scroll-vert b { writing-mode:vertical-rl; font:400 10px/1 var(--sans); letter-spacing:.32em; }
.scroll-vert i { display:block; width:1px; height:74px; background:#c7ac7255; position:relative; overflow:hidden; }
.scroll-vert i::after { content:""; position:absolute; left:0; top:-30px; width:1px; height:30px; background:var(--accent); animation:scroll-drop 2.4s ease-in-out infinite; }
@keyframes scroll-drop { to { transform:translateY(104px); } }

/* ---------- Depth lanterns in the hero: rows receding along the aisle, lit front to back by scroll ---------- */
.depth { position:absolute; inset:0 0 auto 0; height:100%; z-index:0; overflow:hidden; pointer-events:none; opacity:var(--row,0); --dl-h:110px; --glow:0; contain:layout style; }
.dl { position:absolute; left:0; top:0; width:calc(var(--dl-h) * .68); height:var(--dl-h); margin:calc(var(--dl-h) * -.5) 0 0 calc(var(--dl-h) * -.34); --lit:0; --dim:1; transform:translate3d(calc(var(--x,0px) + var(--slide,0px)),var(--y,0px),0) scale(var(--s,1)); filter:blur(var(--blur,0px)); }
.dl::after { content:""; position:absolute; left:50%; top:52%; z-index:-1; width:calc(var(--dl-h) * 3.3); height:calc(var(--dl-h) * 3.3); margin:calc(var(--dl-h) * -1.65) 0 0 calc(var(--dl-h) * -1.65); border-radius:50%; background:radial-gradient(circle,rgb(255 201 128 / .4) 0%,rgb(236 146 62 / .19) 28%,rgb(164 74 22 / .08) 50%,transparent 70%); opacity:calc(var(--lit) * var(--dim)); }
.dl-in { position:absolute; inset:0; transform-origin:50% -30%; }
.fx .dl-in { animation:lantern-sway 7.5s ease-in-out infinite; animation-delay:calc(var(--i) * -1.7s); }
.fx .dl-r .dl-in { animation-duration:8.6s; animation-delay:calc(var(--i) * -1.2s - 1s); }
.dl-in::before { content:""; position:absolute; left:50%; bottom:99%; width:1px; height:calc(var(--dl-h) * .6); background:linear-gradient(transparent,rgb(138 116 74 / .7)); }
.dl b { position:absolute; inset:0; overflow:hidden; border-radius:46%/36%; opacity:calc(.4 + var(--lit) * .6); box-shadow:inset 0 0 0 1px rgb(93 76 48 / .9),0 4px 12px rgb(0 0 0 / .45); background:repeating-linear-gradient(0deg,transparent 0 6%,rgb(20 12 4 / .38) 6% 7.3%),repeating-linear-gradient(90deg,rgb(255 255 255 / .03) 0 2px,transparent 2px 5px),radial-gradient(ellipse at 50% 56%,#74644a,#3d301e 72%,#241b10); }
.dl b::before { content:""; position:absolute; inset:0; opacity:calc(var(--lit) * var(--dim)); background:repeating-linear-gradient(0deg,transparent 0 6%,rgb(122 58 5 / .2) 6% 7.3%),repeating-linear-gradient(90deg,rgb(255 255 255 / .05) 0 2px,transparent 2px 5px),radial-gradient(ellipse at 50% 58%,#fff6dc 0%,#ffe0a0 24%,#f1ad55 56%,#c9782c 82%,#8d4a17); }
.dl b::after { content:""; position:absolute; inset:0; background:linear-gradient(#1c140b 0 8.5%,transparent 8.5% 91.5%,#1c140b 91.5%); }
.depth-wash { position:absolute; top:0; bottom:0; width:40%; opacity:calc(var(--glow) * .7); }
.depth-wash-l { left:0; background:linear-gradient(90deg,rgb(255 150 60 / .12),transparent); }
.depth-wash-r { right:0; background:linear-gradient(270deg,rgb(255 150 60 / .11),transparent); }
.lanterns { transition:opacity .5s ease; }
/* The copy stays readable over the lantern light. */
.fx .stage-line h2,.fx .stage-line .stage-big { position:relative; }
.fx .stage-line h2::before,.fx .stage-line .stage-big::before { content:""; position:absolute; inset:-18% -8%; z-index:-1; background:radial-gradient(closest-side,rgb(15 13 10 / .62),rgb(15 13 10 / .34) 62%,transparent); pointer-events:none; }
@media(min-width:701px) { .fx .stage-line-b { text-align:center; } }
@media(max-width:700px) { .dl::after { width:calc(var(--dl-h) * 2.7); height:calc(var(--dl-h) * 2.7); margin:calc(var(--dl-h) * -1.35) 0 0 calc(var(--dl-h) * -1.35); } .depth-wash { width:46%; opacity:calc(var(--glow) * .5); } }
@media(prefers-reduced-motion:reduce) { .depth { opacity:1; } }

/* ---------- Lantern side system ---------- */
.lanterns { position:fixed; inset:var(--header) 0 0 0; z-index:40; pointer-events:none; --glow:0; --rail-y:24px; }
/* One lantern per side rides down with the scroll position (transform only; set by the shared scroll loop). */
.lantern { position:absolute; top:0; width:34px; height:50px; --lamp:0; transform:translate3d(0,var(--rail-y),0); will-change:transform; }
.lantern:nth-of-type(n+3) { display:none; }
.fx .lantern b { animation:lantern-sway 6.5s ease-in-out infinite; transform-origin:50% -10%; }
.fx .lantern-r b { animation-duration:7.4s; animation-delay:-.8s; }
.lantern-l { left:7px; }
.lantern-r { right:16px; } /* keeps clear of the browser's scroll bar */
.lantern::before { content:""; position:absolute; left:50%; top:-24px; width:1px; height:22px; background:#8a744a99; }
.lantern::after { content:""; position:absolute; left:50%; top:50%; width:220px; height:220px; margin:-110px 0 0 -110px; z-index:-1; border-radius:50%; background:radial-gradient(circle,#ffb14a5c 0%,#ff9a3a22 34%,transparent 68%); opacity:var(--lamp); transition:opacity 1.8s ease; }
.lantern b { position:absolute; inset:0; overflow:hidden; border-radius:46%/36%; border:1px solid #6d5a3a; border-block:4px solid #2c2318; background:repeating-linear-gradient(0deg,transparent 0 5px,#2e1c0840 5px 6px),radial-gradient(ellipse at 50% 55%,#8c7955,#4a3b25); box-shadow:0 3px 8px #0006; }
.lantern b::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 5px,#7a3a0533 5px 6px),radial-gradient(ellipse at 50% 60%,#fff6d6 0%,#ffd683 36%,#e79d3f 76%,#c57a2a); opacity:var(--lamp); transition:opacity 1.3s ease; }
.lantern-wash { position:absolute; top:0; bottom:0; width:24vw; opacity:calc(var(--glow) * .5); transition:opacity 1.6s ease; }
.lantern-wash-l { left:0; background:linear-gradient(90deg,#ff9a3c1f,transparent); }
.lantern-wash-r { right:0; background:linear-gradient(270deg,#ff9a3c1f,transparent); }
@keyframes lantern-sway { 0%,100% { transform:rotate(-1.5deg); } 50% { transform:rotate(1.5deg); } }
@media(max-width:1250px) { .lantern { width:30px; height:43px; } .lantern-l { left:5px; } .lantern-r { right:14px; } }
@media(max-width:1020px) {
  .lantern { width:23px; height:34px; }
  .lantern-r { right:9px; }
  .lantern::after { width:150px; height:150px; margin:-75px 0 0 -75px; }
  .lantern-wash { width:34vw; opacity:calc(var(--glow) * .36); }
}
@media(max-width:700px) {
  .lantern { width:18px; height:28px; }
  .lantern-l { left:-3px; } .lantern-r { right:6px; } /* left one partly outside the screen; right one clear of the scroll bar */
  .lantern::before { top:-16px; height:15px; }
  .lantern b { border-block-width:3px; box-shadow:0 2px 5px #0005; }
  .lantern::after { width:110px; height:110px; margin:-55px 0 0 -55px; }
}

/* ---------- Mask reveals ---------- */
.mask { position:relative; overflow:hidden; }
.mask-inner { background:#241c13; }
.mask-inner { display:block; width:100%; height:100%; overflow:hidden; }
.mask-inner img { width:100%; height:100%; object-fit:cover; }
.fx .mask-inner[data-parallax] img { height:114%; max-height:none; transform:translate3d(0,calc(var(--py,.5) * -12.2%),0); will-change:transform; }
.mask figcaption { position:absolute; left:0; bottom:0; z-index:2; padding:9px 16px; background:#17130de0; color:var(--white); font-size:14px; letter-spacing:.08em; }
.mask figcaption small,.shoji figcaption small { font:11px/1.6 var(--sans); margin-left:10px; color:#e3cf9f; letter-spacing:.04em; }
/* The clip is applied to the inner wrapper: clipping the observed element itself would hide it from IntersectionObserver. */
.fx.motion-ready [data-mask]>.mask-inner { transition:clip-path 1.15s var(--ease-inout); }
.fx.motion-ready [data-mask=right]>.mask-inner { clip-path:inset(0 100% 0 0); }
.fx.motion-ready [data-mask=left]>.mask-inner { clip-path:inset(0 0 0 100%); }
.fx.motion-ready [data-mask=up]>.mask-inner { clip-path:inset(100% 0 0 0); }
.fx.motion-ready [data-mask=circle]>.mask-inner { clip-path:circle(0% at 50% 58%); transition-duration:1.3s; }
.fx.motion-ready [data-mask=ink]>.mask-inner { clip-path:inset(0 100% 0 0 round 0 46% 54% 0); transition-duration:1.35s; }
.fx.motion-ready [data-mask=right].is-in>.mask-inner,.fx.motion-ready [data-mask=left].is-in>.mask-inner,.fx.motion-ready [data-mask=up].is-in>.mask-inner { clip-path:inset(0 0 0 0); }
.fx.motion-ready [data-mask=circle].is-in>.mask-inner { clip-path:circle(78% at 50% 58%); }
.fx.motion-ready [data-mask=ink].is-in>.mask-inner { clip-path:inset(0 0 0 0 round 0); }
.fx.motion-ready [data-mask]>figcaption,.fx.motion-ready [data-mask]>.image-label { opacity:0; transition:opacity .6s ease .7s; }
.fx.motion-ready [data-mask].is-in>figcaption,.fx.motion-ready [data-mask].is-in>.image-label { opacity:1; }

/* ---------- Shoji: real room photo behind sliding lattice panels ---------- */
.shoji { position:relative; overflow:hidden; background:#1b140c; aspect-ratio:1/1; --open:1; }
.shoji-photo,.shoji-photo img { width:100%; height:100%; }
.shoji-photo img { object-fit:cover; }
.shoji-panel { display:none; }
.fx .shoji-panel { display:block; position:absolute; top:0; bottom:0; width:50.3%; z-index:1; background-color:#efe3c8; background-image:linear-gradient(90deg,#3d2a19 0 7px,transparent 7px calc(100% - 7px),#3d2a19 calc(100% - 7px)),repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),#4b3421 calc(25% - 2px) calc(25% + 2px)),repeating-linear-gradient(0deg,transparent 0 calc(16.66% - 2px),#4b3421 calc(16.66% - 2px) calc(16.66% + 2px)),radial-gradient(ellipse at 50% 60%,#ffe6b0aa,transparent 70%); box-shadow:inset 0 0 0 7px #3d2a19,0 0 24px #0006; will-change:transform; }
.fx .shoji-l { left:0; transform:translate3d(calc(var(--open) * -101%),0,0); }
.fx .shoji-r { right:0; transform:translate3d(calc(var(--open) * 101%),0,0); }
.shoji figcaption { position:absolute; left:0; bottom:0; z-index:2; padding:10px 18px; background:#17130de0; color:var(--white); font-size:15px; letter-spacing:.08em; }

/* ---------- Home: story ---------- */
.story { padding:110px 0 120px; position:relative; overflow:hidden; }
.story-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:84px; align-items:center; }
.story h2 { font-size:clamp(30px,3.1vw,44px); line-height:1.65; }
.story-copy>p { font-size:15px; line-height:2.1; }
.story-points { list-style:none; padding:0; margin:26px 0 22px; border-top:1px solid var(--line); }
.story-points li { display:grid; grid-template-columns:8.2em 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.9; }
.story-points b { font-weight:600; color:#795a2d; letter-spacing:.08em; }
.story-photos { position:relative; padding:0 34px 70px 0; }
.story-photo-main { aspect-ratio:5/4; }
.story-photo-sub { position:absolute; left:-46px; bottom:0; width:46%; aspect-ratio:16/10; border:7px solid var(--paper-light); box-shadow:0 14px 34px #2e1f1026; }
.story .vertical-note { position:absolute; right:0; top:14px; writing-mode:vertical-rl; font-size:15px; letter-spacing:.22em; color:#5a4a33; }

/* ---------- Home: signature dishes ---------- */
.dishes { padding:104px 0 70px; }
.dishes-head { text-align:center; margin-bottom:64px; }
.dishes-head h2 { font-size:clamp(29px,3vw,42px); }
.dish-row { display:grid; grid-template-columns:1.42fr 1fr; gap:clamp(30px,5vw,84px); align-items:center; margin-bottom:96px; }
.dish-row.is-flip { grid-template-columns:1fr 1.42fr; }
.dish-row.is-flip .dish-photo { order:2; }
.dish-photo { display:block; position:relative; }
.dish-photo .mask { aspect-ratio:16/10; }
.dish-photo:hover { color:inherit; }
.dish-text { position:relative; display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:start; }
.dish-no { position:absolute; right:0; top:-46px; font:300 68px/1 var(--sans); letter-spacing:.02em; color:#b99a6226; }
.dish-name-v { writing-mode:vertical-rl; font-size:clamp(40px,4.3vw,62px); line-height:1.15; letter-spacing:.2em; font-weight:500; padding-top:4px; border-right:1px solid color-mix(in srgb,var(--accent) 70%,transparent); padding-right:22px; min-height:190px; transition:border-color 1s; }
.dish-body .dish-catch { font-size:21px; line-height:1.75; margin:6px 0 14px; }
.dish-body p:not(.dish-catch) { font-size:14px; color:#d8d0bf; line-height:2; }
.dish-body .text-link { margin-top:18px; }
.dishes .photo-disclosure { text-align:center; color:#b9b09d; margin-top:-30px; }

/* ---------- Home: private rooms ---------- */
.home-room { padding:110px 0 120px; }
.room-split { display:grid; grid-template-columns:.86fr 1.14fr; gap:76px; align-items:center; }
.home-room h2 { font-size:clamp(30px,3.1vw,44px); line-height:1.65; }
.room-uses { list-style:none; padding:0; margin:24px 0 20px; display:flex; gap:10px; flex-wrap:wrap; }
.room-uses li { display:flex; align-items:center; gap:9px; padding:9px 15px; border:1px solid var(--line); background:#fffaf066; font-size:13px; letter-spacing:.06em; }
.room-uses .icon { width:19px; height:19px; color:#a08243; }
.room-visual { position:relative; padding:0 0 86px 0; }
.room-visual .shoji { aspect-ratio:6/5; width:86%; }
.room-sub { position:absolute; right:0; bottom:0; width:47%; aspect-ratio:5/4; border:7px solid var(--paper-light); box-shadow:0 14px 34px #2e1f1026; }

/* ---------- Home: finale ---------- */
.finale { position:relative; overflow:hidden; color:var(--white); text-align:center; padding:118px 0 124px; background:radial-gradient(ellipse at 50% 118%,#a4261ecc 0%,#6d1712aa 30%,transparent 66%),radial-gradient(ellipse at 12% 20%,#e0a54822,transparent 42%),radial-gradient(ellipse at 88% 20%,#e0a54822,transparent 42%),#120f0b; }
.finale::before { content:""; position:absolute; inset:0; background:url('../waves.svg') 50% 100%/420px auto repeat-x; opacity:.13; pointer-events:none; }
.finale-inner { position:relative; }
.finale .section-label { color:var(--gold); }
.finale h2 { font-size:clamp(31px,4.2vw,60px); line-height:1.55; letter-spacing:.09em; text-shadow:0 2px 20px #0008; }
.finale p { margin-top:16px; color:#ead9bd; font-size:14px; }
.finale-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:38px; }
.finale-actions .button { min-width:250px; min-height:60px; font-size:16px; }
.finale-links { display:flex; justify-content:center; gap:44px; flex-wrap:wrap; margin-top:30px; }
.finale-links .text-link { color:#f0dcb0; }
.finale-links .text-link:hover { color:var(--white); }

/* ---------- Sub page heroes ---------- */
.page-hero { height:clamp(330px,46vh,470px); }
.page-hero .hero-media { left:0; -webkit-mask-image:none; mask-image:none; }
.page-hero::after { background:linear-gradient(90deg,#120f0bf2 0%,#120f0bb8 34%,#120f0b33 68%,#120f0b1a),linear-gradient(0deg,#120f0b80,transparent 40%); }
.page-hero h1 { text-shadow:0 2px 18px #000a; }
.page-hero .hero-content p { text-shadow:0 1px 10px #000c; }
.fx .page-hero .hero-media img { animation:hero-settle 2.2s var(--ease-out) both; }
@keyframes hero-settle { from { transform:scale(1.08); } to { transform:none; } }
.course-hero .hero-media img { object-position:50% 62%; }
.menu-hero .hero-media img { object-position:50% 68%; }
.interior-hero { height:clamp(350px,50vh,500px); }
.interior-hero .hero-media { left:0; }
.interior-hero .hero-media img { object-position:50% 66%; }
.access-hero .hero-media img { object-position:50% 46%; }
.news-hero .hero-media img { object-position:50% 22%; }

/* ---------- Course: the recommended course takes focus at screen centre ---------- */
.course-card[data-focus] { transition:transform .7s var(--ease-out),box-shadow .7s ease; z-index:1; }
.fx.motion-ready .course-card[data-focus] .recommend-ribbon { opacity:0; transform:translateY(8px) scale(.94); transition:opacity .5s ease,transform .6s var(--ease-out),background .6s; }
.fx.motion-ready .course-card[data-focus].is-focus { transform:scale(1.035); box-shadow:0 22px 56px #1a100744,0 0 0 1px #c9a45c; }
.fx.motion-ready .course-card[data-focus].is-focus .course-image img { transform:scale(1.06); }
.fx.motion-ready .course-card[data-focus].was-focus .recommend-ribbon,.fx.motion-ready .course-card[data-focus].is-focus .recommend-ribbon { opacity:1; transform:none; }
.course-card[data-focus] .recommend-ribbon { background:linear-gradient(135deg,#e2c078,#b08a3e); color:#1c150a; font-weight:600; }
.course-section .section-end { margin-top:36px; }

/* ---------- Menu ---------- */
.menu-main>.mask { height:100%; min-height:335px; }
.menu-dish-photo.mask { background:transparent; }
.menu-dish-photo .mask-inner img { min-height:280px; }
.menu-dish-photo .seq-inline { width:100%; height:100%; min-height:275px; }
.menu-dish-photo .mask-inner { height:100%; }
.menu-small-pair .menu-dish-photo .mask-inner img { min-height:275px; }

/* ---------- Interior ---------- */
.room-grid .shoji { aspect-ratio:1.9; margin-bottom:21px; }
.room-grid .mask { aspect-ratio:1.9; margin-bottom:21px; }
.room-scenes>.mask { aspect-ratio:1.6; }

/* ---------- Access: route sketch ---------- */
.route { margin:24px auto 0; padding:0; border:0; background:none; width:100%; max-width:440px; }
.route svg { display:block; width:100%; height:auto; aspect-ratio:1/1; }
.route-paper { fill:#fbf6ea; stroke:#d8c39a; stroke-width:1.5; }
.route-grid path { stroke:#b99a62; stroke-opacity:.12; stroke-width:1; }
.route-aux { fill:none; stroke:#8d6b35; stroke-width:1.6; stroke-dasharray:3 5; stroke-linecap:round; opacity:.7; }
.route-base { fill:none; stroke:#cdbd9c; stroke-width:3; stroke-dasharray:2 9; stroke-linecap:round; }
.route-line { fill:none; stroke:var(--red); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
.fx .route-line { stroke-dashoffset:calc(1 - var(--draw,0)); }
.route-mark rect { fill:#fffaf0; stroke:#4a3a26; stroke-width:2.4; }
.route-mark path { fill:#4a3a26; opacity:.75; }
.route-shop-ring { fill:#fffaf0; stroke:#b99a62; stroke-width:3; }
.route-shop-core { fill:var(--red); }
.route-shop-seal { font:700 17px/1 var(--serif); fill:#fffaf0; }
.route-hachi-ring { fill:#fffaf0; stroke:#3a2d1c; stroke-width:3.2; }
.route-hachi-dot { fill:#3a2d1c; }
.route-label { font:600 19px/1 var(--serif); fill:var(--ink); letter-spacing:.05em; }
.route-label-shop { fill:var(--red); font-size:20px; }
.route-sub { font:400 13px/1 var(--sans); fill:var(--muted); letter-spacing:.04em; }
.fx .route-shop,.fx .route-label-shop { opacity:calc(.3 + var(--draw,0) * .7); }
.route figcaption { font:11px/1.8 var(--sans); color:var(--muted); margin-top:10px; }

/* ---------- News: featured card + pagination ---------- */
.news-card.is-featured { grid-column:1/-1; grid-template-columns:1fr 1fr; }
.news-card .photo { min-width:0; max-width:100%; }
@media(min-width:1021px) { .news-card:not(.is-featured) { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); } .news-card:not(.is-featured) .photo { aspect-ratio:auto; height:100%; min-height:200px; } }
.news-card.is-featured h3 { font-size:28px; }
.pagination { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:44px; flex-wrap:wrap; }
.pagination button { min-width:46px; min-height:46px; padding:0 12px; border:1px solid var(--line); background:transparent; color:var(--ink); font:15px/1 var(--serif); transition:background .2s,color .2s,border-color .2s; }
.pagination button:hover:not(:disabled) { border-color:var(--red); color:var(--red); }
.pagination button[aria-current=page] { background:var(--red); border-color:var(--red); color:var(--white); border-radius:50%; }
.pagination button:disabled { opacity:.35; cursor:default; }
.article-updated { color:var(--muted); }
.article-prose p { white-space:pre-line; }
.from-instagram { color:#8d6b35; }
.article-source { margin:0 0 26px; }
.article-source .text-link { gap:12px; }
.article-source .icon:first-child { width:20px; }
.footer-instagram { display:inline-flex; align-items:center; gap:10px; margin-top:14px; font-size:13px; letter-spacing:.06em; min-height:44px; }
.footer-instagram:hover { color:var(--gold); }
.footer-instagram small { display:block; font:11px/1.5 var(--sans); color:#c4bca9; letter-spacing:.02em; }
.news-bottom-actions { display:flex; gap:12px; flex-wrap:wrap; }
@media(max-width:700px) { .news-bottom-actions { flex-direction:column; } }
.article-author { font:12px/1.8 var(--sans); color:var(--muted); margin-bottom:26px; }
.notfound { min-height:60vh; display:flex; align-items:center; }
.notfound h1 { font-size:clamp(28px,3.4vw,44px); margin:10px 0 18px; }
.notfound .actions { margin-top:30px; }

/* ---------- Page transition: noren parts on arrival, closes on departure ---------- */
.noren { display:none; }
.fx .noren { display:block; position:fixed; inset:0; z-index:300; pointer-events:none; }
.noren span { position:absolute; top:0; bottom:0; width:50.2%; background:#14110d url('../paper.svg'); transform:translate3d(-101%,0,0); }
.noren span:first-child { left:0; border-right:1px solid #b99a6255; }
.noren span:last-child { right:0; border-left:1px solid #b99a6255; transform:translate3d(101%,0,0); }
.noren span::after { content:"博"; position:absolute; top:50%; width:74px; height:74px; margin-top:-37px; display:grid; place-items:center; border:2px solid #b99a62; color:#b99a62; font:600 46px/1 var(--serif); opacity:.5; }
.noren span:first-child::after { right:-38px; clip-path:inset(0 50% 0 0); }
.noren span:last-child::after { left:-38px; clip-path:inset(0 0 0 50%); }
.page-interior .noren span { background-color:#efe3c8; background-image:repeating-linear-gradient(90deg,transparent 0 calc(20% - 3px),#4b3421 calc(20% - 3px) calc(20% + 3px)),repeating-linear-gradient(0deg,transparent 0 calc(12.5% - 3px),#4b3421 calc(12.5% - 3px) calc(12.5% + 3px)); border-color:#3d2a19; }
.page-interior .noren span::after { display:none; }
.pt-enter .noren span:first-child { animation:noren-l .75s var(--ease-inout) .05s both; }
.pt-enter .noren span:last-child { animation:noren-r .75s var(--ease-inout) .05s both; }
.pt-leave .noren { pointer-events:auto; }
.pt-leave .noren span { transform:none!important; animation:none!important; transition:transform .34s cubic-bezier(.6,0,.3,1); }
@keyframes noren-l { from { transform:none; } to { transform:translate3d(-101%,0,0); } }
@keyframes noren-r { from { transform:none; } to { transform:translate3d(101%,0,0); } }

/* ---------- Pointer: faint warm glow and a small ink ring on click (fine pointers only) ---------- */
.cursor-glow { position:fixed; left:0; top:0; z-index:35; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent) 0%,#ffb85c0d 38%,transparent 66%); opacity:0; transition:opacity .6s; mix-blend-mode:screen; will-change:transform; }
.cursor-glow.is-on { opacity:1; }
.ink-ring { position:fixed; z-index:310; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; pointer-events:none; border:1.5px solid var(--accent); background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%); animation:ink-ring .55s ease-out forwards; }
@keyframes ink-ring { from { opacity:.9; transform:scale(.3); } to { opacity:0; transform:scale(1.5); } }

/* ---------- Responsive ---------- */
@media(max-width:1020px) {
  .story-grid,.room-split { grid-template-columns:1fr; gap:46px; }
  .story-photos { padding:0 30px 62px 46px; }
  .dish-row,.dish-row.is-flip { gap:32px; }
  .fx .stage-hero .container>* { max-width:470px; }
  .page-hero { height:clamp(300px,42vh,400px); }
  .news-card.is-featured { grid-template-columns:1fr 1fr; }
}
@media(max-width:700px) {
  .fx .stage { height:380vh; }
  .fx .stage-shade { background:linear-gradient(180deg,#0f0d0a 0%,#0f0d0acc 22%,transparent 46%),linear-gradient(0deg,#0f0d0a 0%,transparent 26%); }
  .fx .stage-copy { align-items:stretch; }
  /* One source of truth for the fixed booking bar: the bar itself, the page's bottom padding and the hero all use it. */
  :root { --bar:69px; --bar-total:calc(var(--bar) + env(safe-area-inset-bottom,0px)); }
  body { padding-bottom:var(--bar-total); }
  .mobile-booking { min-height:var(--bar-total); padding-bottom:calc(9px + env(safe-area-inset-bottom,0px)); }
  .fx .stage-hero .container { display:flex; flex-direction:column; padding-top:clamp(14px,3.6vh,34px); padding-bottom:calc(var(--bar-total) + 30px); }
  .fx .stage-hero .container>* { max-width:none; }
  .stage .hero-eyebrow { font-size:11px; letter-spacing:.13em; margin-bottom:12px; }
  .stage h1 { font-size:clamp(29px,8.6vw,38px); line-height:1.5; }
  .stage-hero p { font-size:13px; line-height:1.9; margin-top:12px; letter-spacing:.04em; }
  .fx .stage-hero .actions { margin-top:auto; display:grid; grid-template-columns:1.25fr 1fr; gap:9px; }
  .stage-hero .actions .button { font-size:13px; padding:12px 6px; gap:6px; min-height:50px; letter-spacing:.04em; }
  .stage-hero .actions .button span { white-space:nowrap; }
  .stage-hero .actions .button .icon:first-child { width:16px; height:16px; }
  .stage-hero .actions .button .icon:last-child { width:11px; }
  .fx .stage-line { padding-top:clamp(22px,5vh,46px); align-items:flex-start; }
  .fx .stage-line-b { text-align:center; }
  .fx .stage-line-b .container>* { max-width:none; }
  .stage-line h2,.stage-big { font-size:clamp(24px,7vw,31px); line-height:1.65; letter-spacing:.06em; }
  .stage-line .text-link { margin-top:12px; }
  .stage-steam i:nth-child(n+2) { display:none; }
  .fx .stage-steam { width:90vw; top:22%; height:40%; }
  .stage-steam i { width:70%; left:15%!important; }
  .fx .scroll-vert { right:7px; top:auto; bottom:calc(var(--bar-total) + 96px); transform:none; }
  .scroll-vert i { height:44px; }
  .stage-note { right:10px; bottom:calc(var(--bar-total) + 8px); font-size:9px; }
  html:not(.fx) .stage-note { padding-bottom:10px; }
  .story { padding:58px 0 66px; }
  .story-grid { gap:38px; }
  .story h2,.home-room h2 { font-size:28px; line-height:1.7; }
  .story-copy>p { font-size:14px; }
  .story-points li { grid-template-columns:1fr; gap:2px; padding:13px 0; font-size:13px; }
  .story-photos { padding:0 26px 54px 0; }
  .story-photo-sub { left:auto; right:0; width:58%; border-width:5px; }
  .story .vertical-note { font-size:12px; right:2px; top:6px; }
  .dishes { padding:60px 0 44px; }
  .dishes-head { margin-bottom:38px; text-align:left; }
  .dishes-head h2 { font-size:28px; }
  .dish-row,.dish-row.is-flip { grid-template-columns:1fr; gap:22px; margin-bottom:58px; }
  .dish-row.is-flip .dish-photo { order:0; }
  .dish-photo .mask { aspect-ratio:16/11; }
  .dish-text { gap:20px; }
  .dish-no { font-size:46px; top:-6px; }
  .dish-name-v { font-size:38px; min-height:0; padding-right:16px; letter-spacing:.16em; }
  .dish-body .dish-catch { font-size:18px; margin:4px 0 10px; }
  .dish-body p:not(.dish-catch) { font-size:13px; }
  .dishes .photo-disclosure { margin-top:-14px; text-align:left; }
  .home-room { padding:58px 0 66px; }
  .room-split { gap:34px; }
  .room-uses li { font-size:12px; padding:8px 11px; }
  .room-visual { padding-bottom:70px; }
  .room-visual .shoji { width:90%; aspect-ratio:1/1; }
  .room-sub { width:56%; border-width:5px; }
  .mask figcaption,.shoji figcaption { font-size:12px; padding:7px 11px; }
  .mask figcaption small,.shoji figcaption small { font-size:10px; margin-left:7px; }
  .room-sub figcaption { line-height:1.5; }
  .room-sub figcaption small { display:block; margin-left:0; }
  .finale { padding:66px 0 72px; }
  .finale h2 { font-size:clamp(27px,7.6vw,34px); line-height:1.65; letter-spacing:.06em; }
  .finale p { font-size:13px; }
  .finale-actions { flex-direction:column; gap:11px; margin-top:28px; }
  .finale-actions .button { width:100%; min-width:0; min-height:56px; font-size:15px; }
  .finale-links { gap:8px 28px; margin-top:20px; }
  .page-hero { height:300px; }
  .interior-hero { height:320px; }
  .menu-main>.mask { min-height:0; aspect-ratio:1.45; }
  .menu-dish-photo .mask-inner img,.menu-small-pair .menu-dish-photo .mask-inner img,.menu-dish-photo .seq-inline { min-height:0; }
  .room-grid .shoji,.room-grid .mask { aspect-ratio:1.5; margin-bottom:17px; }
  .route { max-width:none; }
  .route-label { font-size:20px; }
  .route-label-shop { font-size:21px; }
  .route-sub { font-size:15px; }
  .news-card.is-featured { grid-template-columns:1fr; }
  .news-card.is-featured h3 { font-size:24px; }
  .pagination { margin-top:30px; gap:6px; }
  .pagination button { min-width:44px; min-height:44px; padding:0 8px; font-size:14px; }
  .fx.motion-ready .course-card[data-focus].is-focus { transform:scale(1.015); }
}
/* Portrait tablets: same stacked hero as phones (copy above the pot, actions below). */
@media(min-width:701px) and (max-aspect-ratio:1/1) {
  .fx .stage-copy { align-items:stretch; }
  .fx .stage-hero .container { display:flex; flex-direction:column; padding-top:7vh; padding-bottom:7vh; }
  .fx .stage-hero .container>* { max-width:none; }
  .fx .stage-hero .actions { margin-top:auto; }
  .fx .stage-line { align-items:flex-start; text-align:center; }
  .fx .stage-shade { background:linear-gradient(180deg,#0f0d0a 0%,#0f0d0acc 20%,transparent 44%),linear-gradient(0deg,#0f0d0a 0%,transparent 24%); }
}
/* Phones held sideways: little height, so the scroll copy stays compact above the pot. */
@media(max-height:480px) and (orientation:landscape) {
  .fx .stage-line { padding-top:10px; }
  .stage-line h2,.stage-big { font-size:17px; line-height:1.45; letter-spacing:.04em; }
  .stage-line h2 span,.stage-big span { display:inline; }
  .stage-line .text-link { margin-top:4px; min-height:36px; }
  .stage h1 { font-size:clamp(26px,3.6vw,34px); }
  .stage-hero p { margin-top:8px; font-size:13px; }
  .stage-hero .actions { margin-top:12px; }
  .stage .hero-eyebrow { margin-bottom:6px; font-size:11px; }
}
@media(max-width:360px) {
  .scroll-vert b { display:none; }
  .stage h1 { font-size:27px; }
  .stage-hero .actions .button { font-size:12px; }
  .stage-hero .actions .button .icon:first-child { display:none; }
}
@media(max-height:560px) and (min-width:701px) {
  .stage h1 { font-size:clamp(30px,4vw,48px); }
  .stage-hero p { margin-top:10px; font-size:14px; }
  .stage-hero .actions { margin-top:16px; }
  .stage .hero-eyebrow { margin-bottom:8px; }
}
@media(prefers-reduced-motion:reduce) {
  :root { transition:none; }
  .lantern { --lamp:1!important; }
  .lanterns { --glow:.6!important; }
}