/* 詰田の家: the whole site is one house. Click = walk (nothing scrolls). The hero is the yard, the
   projects hang as lanterns in the hall, About is the kakejiku in the alcove, the
   team is on the ema rack at the shrine out the back. house.js drives every
   position from scroll progress q (0..1); this file only styles the objects.
   Everything painted stays the original art; the room is interior.png projected
   onto five planes in Three.js so the camera can actually walk through it. */
@font-face{font-family:'Yuji Hero';src:url('/fonts/YujiSyuku-Hero.ttf') format('truetype');font-display:swap}
:root{--brush:'Yuji Hero','Yuji Syuku',serif}
/* the page is one screen: the walk plays inside it, the wheel and the scrollbar do nothing */
html,body{height:100%;overflow:hidden;scroll-behavior:auto;overscroll-behavior:none}
.journey{height:100%;min-height:480px;position:relative}
.journey-viewport{position:absolute;inset:0;overflow:hidden;overflow:clip;isolation:isolate;background:#0a0b0f}   /* clip, not hidden: a focus or scrollIntoView can shove a hidden box */

/* ---- the yard: the original painting, the warrior, the lantern glows ---- */
.exterior{position:absolute;inset:0;z-index:1;will-change:transform,opacity}
.journey .glows{transform-origin:0 0;will-change:transform}
.journey .scene{position:absolute;inset:0;background-image:url('/assets/hero/scene.webp?v=3');background-position:100% 50%}
.journey .glows{position:absolute;z-index:2}
.journey .glows-over{z-index:3}
.journey .hero-fig{position:absolute;z-index:4;opacity:1;transition:none;will-change:transform,opacity;transform-origin:50% 90%}
.journey .hero-fig.moving{filter:none}
.journey .scene-shade{position:absolute;z-index:5;transition:none;pointer-events:none}
.journey .hero{position:absolute;inset:0;z-index:6;min-height:0;height:100%;pointer-events:none}
.journey .hero a{pointer-events:auto}
.journey .hero-copy{will-change:transform,opacity}
.journey .meta.bl{text-decoration:none}
.journey .hero-copy .next{margin-top:34px}
.journey .enter.settled{animation:none;opacity:1;transform:none;filter:none}
/* darkness that closes in around the doorway as the eye gets close: hides the
   blown-up pixels of the painting and makes the door swallow you */
.doorway-dark{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 34% 44% at var(--dx,50%) var(--dy,50%),transparent 30%,rgba(10,11,15,.85) 75%,#0a0b0f 100%)}

/* ---- the house: the room render, clipped to the door while you are outside ---- */
.house-portal{position:absolute;inset:0;z-index:3;overflow:hidden;opacity:0;pointer-events:none;background:#12100d;will-change:clip-path,opacity}
.room-fallback{position:absolute;inset:0;background:url('/assets/hero/interior.webp') center/cover}
#room-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s}
.webgl-ready #room-canvas{opacity:1}
.portal-shadow{position:absolute;inset:0;box-shadow:inset 0 0 90px 30px rgba(6,5,4,.75);pointer-events:none}

/* ---- things in the room, placed by projecting their 3D anchor ---- */
.room-ui{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0}
.room-ui > *{position:absolute;left:0;top:0;will-change:transform}
/* a chochin: the element is the lantern's box; height comes from the projection */
.lantern{container-type:inline-size;transform-origin:50% 0;opacity:0}
.cord{width:2px;background:linear-gradient(180deg,#0c0a08,#2a201a);opacity:0;transform-origin:50% 0}
.lantern .body{position:relative;width:100%;height:100%}
.lantern .body img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
/* the light lives in the paper: a warm core that breathes, brighter when this is the lantern you are at */
.lantern .body::before{content:"";position:absolute;left:8%;right:8%;top:10%;bottom:12%;border-radius:45%;
  background:radial-gradient(closest-side,rgba(255,214,150,.85),rgba(255,170,80,.35) 55%,transparent 100%);
  mix-blend-mode:screen;opacity:var(--lit,.35);filter:blur(6px);transition:opacity .6s}
.lantern .body::after{content:"";position:absolute;left:-70%;right:-70%;top:-30%;bottom:-40%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,180,90,.42),rgba(255,150,60,.16) 45%,transparent 72%);
  mix-blend-mode:screen;opacity:var(--halo,.5);transition:opacity .6s;z-index:-1}
/* the lit face of chochin.webp runs x 1-99%, y 10-88%: the kanji sits on its centre, sized off the lantern */
.lantern .k{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);font-family:var(--jp);font-weight:600;
  font-size:28cqw;letter-spacing:.04em;line-height:1.05;color:#5a3412;writing-mode:vertical-rl;text-orientation:upright;opacity:.9;
  text-shadow:0 0 6px rgba(255,220,170,.5)}
.lantern.lit{--lit:.95;--halo:.85}
.lantern .body{pointer-events:auto;cursor:pointer}
/* the handle: the project's name under the lit lantern; tap it (or the lantern) for the tag */
:is(.lantern,.stone) .lbl{position:absolute;left:50%;top:96%;transform:translate(-50%,6px);white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:5px;
  opacity:0;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none;cursor:pointer;text-shadow:0 2px 14px rgba(0,0,0,.95)}
:is(.lantern,.stone) .lbl .n{font-family:var(--head);font-weight:700;font-size:clamp(20px,1.9vw,30px);letter-spacing:.12em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 22px rgba(255,180,90,.55),0 2px 4px rgba(0,0,0,1),0 2px 18px rgba(0,0,0,.95)}
:is(.lantern,.stone) .lbl .t{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--shu-soft);text-shadow:0 2px 6px #000}
:is(.lantern,.stone).lit .lbl{opacity:1;transform:translate(-50%,0);pointer-events:auto}
:is(.lantern,.stone).open .lbl .t{color:var(--washi-dim)}

/* the reveal: ink smoke billows out of the lit lantern and the project appears inside it,
   like a dream (the prod projects-page smoke, at its sizes). Hover on a pointer, tap on touch */
:is(.lantern,.stone) .smoke{position:absolute;bottom:-12%;width:clamp(440px,38vw,620px);height:clamp(360px,32vw,520px);pointer-events:none;z-index:3}
:is(.lantern,.stone).left .smoke{left:70%}
:is(.lantern,.stone).right .smoke{right:70%}
:is(.lantern,.stone) .pf{position:absolute;bottom:0;width:40%;height:40%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(205,197,182,.78),rgba(160,152,140,.4) 55%,transparent 72%);
  filter:url(#inksmoke) blur(14px);opacity:0;transform:translate(-50%,10%) scale(.2);transform-origin:50% 100%;
  transition:opacity .5s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
:is(.lantern,.stone).left .pf{left:12%}
:is(.lantern,.stone).right .pf{left:88%}
:is(.lantern,.stone).left .p1{--x:30%;--y:-20%;--s:1.6}
:is(.lantern,.stone).left .p2{--x:-40%;--y:-70%;--s:2.2;transition-delay:.06s}
:is(.lantern,.stone).left .p3{--x:95%;--y:-80%;--s:1.9;transition-delay:.1s}
:is(.lantern,.stone).left .p4{--x:-10%;--y:-150%;--s:2.6;transition-delay:.16s}
:is(.lantern,.stone).left .p5{--x:110%;--y:-160%;--s:1.8;transition-delay:.2s}
:is(.lantern,.stone).left .p6{--x:40%;--y:-215%;--s:2.4;transition-delay:.26s}
:is(.lantern,.stone).right .p1{--x:-30%;--y:-20%;--s:1.6}
:is(.lantern,.stone).right .p2{--x:40%;--y:-70%;--s:2.2;transition-delay:.06s}
:is(.lantern,.stone).right .p3{--x:-95%;--y:-80%;--s:1.9;transition-delay:.1s}
:is(.lantern,.stone).right .p4{--x:10%;--y:-150%;--s:2.6;transition-delay:.16s}
:is(.lantern,.stone).right .p5{--x:-110%;--y:-160%;--s:1.8;transition-delay:.2s}
:is(.lantern,.stone).right .p6{--x:-40%;--y:-215%;--s:2.4;transition-delay:.26s}
:is(.lantern,.stone) .reveal{position:absolute;left:50%;bottom:4%;transform:translate(-50%,24px) scale(.94);width:112%;display:flex;gap:26px;align-items:center;
  opacity:0;filter:blur(10px);transition:opacity .55s ease .28s,transform .9s cubic-bezier(.2,.7,.2,1) .28s,filter .7s ease .28s}
:is(.lantern,.stone).right .reveal{flex-direction:row-reverse}
:is(.lantern,.stone) .reveal .info{flex:1;min-width:0;text-align:left;text-shadow:0 1px 12px rgba(0,0,0,.95)}
:is(.lantern,.stone) .reveal .hd{display:flex;align-items:center;gap:12px}
:is(.lantern,.stone) .reveal .ic{width:58px;height:58px;border-radius:13px;box-shadow:0 6px 18px rgba(0,0,0,.6),0 0 0 1px rgba(233,225,205,.15);flex:none}
:is(.lantern,.stone) .reveal .ttl{display:flex;flex-direction:column;gap:3px;min-width:0}
:is(.lantern,.stone) .reveal .nm{font-family:var(--head);font-size:clamp(20px,1.8vw,27px);letter-spacing:.08em;text-transform:uppercase;color:var(--washi);line-height:1.1;overflow-wrap:anywhere}
:is(.lantern,.stone) .reveal .rd{font-family:var(--jp);font-weight:600;font-size:clamp(14px,1.15vw,17px);letter-spacing:.1em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,1),0 0 14px rgba(0,0,0,.9)}
:is(.lantern,.stone) .reveal p{margin:14px 0 0;font-family:var(--mincho);font-size:clamp(14px,1.1vw,16.5px);line-height:1.6;color:var(--washi)}
:is(.lantern,.stone) .reveal .row{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;align-items:baseline}
:is(.lantern,.stone) .reveal .pl,:is(.lantern,.stone) .reveal .ln{font-family:var(--head);font-weight:700;font-size:clamp(14px,1.15vw,17px);letter-spacing:.06em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(233,225,205,.55);background:rgba(10,11,15,.7);padding:7px 12px 6px;border-radius:2px}
:is(.lantern,.stone) .reveal .u{display:inline-block;margin-top:14px;font-family:var(--head);font-size:clamp(14px,1.15vw,17px);font-weight:700;letter-spacing:.04em;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,#d9432f,#b52f1f);padding:8px 14px 7px;border-radius:2px;box-shadow:0 6px 18px rgba(0,0,0,.5);width:max-content;max-width:100%;overflow-wrap:anywhere}
:is(.lantern,.stone) .reveal .u:hover{background:linear-gradient(180deg,#e5533f,#c1382a)}
:is(.lantern,.stone) .reveal .shot{flex:0 0 37%;width:37%;height:auto;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 0 1px rgba(233,225,205,.12);transform:rotate(-3deg)}
:is(.lantern,.stone) .reveal .shot.ph{flex-basis:30%;width:30%;border-radius:22%;transform:rotate(-2deg)}
:is(.lantern,.stone).lit:hover .pf,:is(.lantern,.stone).open .pf{opacity:1;transform:translate(calc(-50% + var(--x)),var(--y)) scale(var(--s))}
:is(.lantern,.stone).lit:hover .reveal,:is(.lantern,.stone).open .reveal{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)}
:is(.lantern,.stone).lit:hover .smoke,:is(.lantern,.stone).open .smoke{pointer-events:auto}
:is(.lantern,.stone).lit:hover .lbl,:is(.lantern,.stone).open .lbl{opacity:0}
/* phone: no smoke. A tap on a lit lantern opens its project as a plain card over the hall: .lsheet in index.html,
   filled by house.js from the lantern's own .reveal. Ink card, hairline edge, the same type and the same red link */
.lsheet{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  background:rgba(10,11,15,.68);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s ease}
.lsheet[hidden]{display:none}
.lsheet.on{opacity:1}
.lcard{position:relative;width:100%;max-width:400px;max-height:100%;overflow:auto;overscroll-behavior:contain;background:#101116;
  border:1px solid rgba(233,225,205,.22);border-radius:4px;padding:22px 20px;box-shadow:0 24px 70px rgba(0,0,0,.7);
  transform:translateY(12px);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.lsheet.on .lcard{transform:none}
.lcard:focus{outline:none}
.lx{position:absolute;top:4px;right:4px;width:44px;height:44px;padding:0;border:0;background:none;color:var(--washi-dim);font:400 26px/1 var(--head);cursor:pointer}
.lx:focus-visible{outline:1px solid var(--shu-soft);outline-offset:-8px}
.lcard .reveal{display:flex;flex-direction:column;gap:20px}
.lcard .hd{display:flex;align-items:center;gap:12px;padding-right:34px}
.lcard .ic{width:54px;height:54px;border-radius:12px;flex:none;box-shadow:0 0 0 1px rgba(233,225,205,.15)}
.lcard .ttl{display:flex;flex-direction:column;gap:3px;min-width:0}
.lcard .nm{font-family:var(--head);font-size:22px;letter-spacing:.08em;text-transform:uppercase;color:var(--washi);line-height:1.1;overflow-wrap:anywhere}
.lcard .rd{font-family:var(--jp);font-weight:600;font-size:14px;letter-spacing:.1em;color:#fff}
.lcard p{margin:14px 0 0;font-family:var(--mincho);font-size:15px;line-height:1.6;color:var(--washi)}
.lcard .row{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:14px}
.lcard .pl,.lcard .ln{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(233,225,205,.4);padding:6px 10px 5px;border-radius:2px}
.lcard .u{display:inline-block;margin-top:16px;font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:.04em;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,#d9432f,#b52f1f);padding:10px 16px 9px;border-radius:2px;max-width:100%;overflow-wrap:anywhere}
.lcard .shot{display:block;width:52%;max-height:34svh;object-fit:cover;object-position:top;margin:0 auto;border-radius:12px;box-shadow:0 0 0 1px rgba(233,225,205,.12)}
.lcard .shot.ph{width:34%;max-height:none;border-radius:22%}

/* the kakejiku in the alcove: About. Unrolls top-down as you walk up to it */
.kake{width:300px;transform-origin:50% 0;opacity:0;filter:drop-shadow(0 22px 44px rgba(0,0,0,.7));container-type:inline-size}
.kake img{display:block;width:100%;height:auto}
.kake .km{background:url('/assets/mobile/kake_mid.webp') center/100% 100% no-repeat;margin:-1px 0;overflow:hidden;
  height:var(--unroll,0px);transition:none}
.kake .kin{padding:24px calc(13% + 24px) calc(2cqw + 24px);color:#2a2521}
.kake .k{display:flex;align-items:center;gap:2cqw;font-family:var(--mono);font-size:2.9cqw;letter-spacing:.2em;text-transform:uppercase;color:#8a2a1e}
.kake .k .jp{font-family:var(--jp);letter-spacing:.12em;color:#5a4f45;text-transform:none}
.kake h2{margin:.4em 0 0;font-family:var(--head);font-weight:400;font-size:4.6cqw;line-height:1.2;color:#2a2521}
.kake h2 em{font-style:normal;color:#b8321f}
.kake p{margin:.75em 0 0;font-family:var(--mincho);font-size:2.8cqw;line-height:1.45;color:#3a332c}
.kake p .hi{color:#1a1613}.kake p .term{color:#b8321f}
.kake .seal{display:flex;align-items:center;gap:3cqw;margin-top:1.4em;text-decoration:none;color:#2a2521;pointer-events:auto}
.kake .seal .han{width:12cqw;height:auto;flex:none}
.kake .seal > span{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.kake .seal .who{display:block;white-space:nowrap;font-family:var(--mincho);font-size:3.4cqw;color:#2a2521;margin-bottom:.3em}
.kake .seal .mail{font-family:var(--mono);font-size:3.2cqw;letter-spacing:.14em;color:#2a2521;border-bottom:1px solid rgba(184,50,31,.6);padding-bottom:3px}
.kake .seal .mail .at{color:#b8321f}
.kake .kin > *{opacity:var(--ink,0);transition:opacity .5s}

/* ---- dust, air, leaves ---- */
.depth-leaves{position:absolute;inset:0;z-index:7;pointer-events:none;perspective:650px;overflow:hidden}
.depth-leaf{position:absolute;left:0;top:0;will-change:transform;filter:drop-shadow(0 2px 4px #0004)}
.depth-leaf svg{width:100%;height:100%;overflow:visible}
.depth-leaf .lf{fill:var(--leaf-color,#8f3c26)}
.air{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 42% 75%,#a9b3b216,transparent 52%);filter:blur(25px);animation:air-drift 18s ease-in-out infinite alternate}
.air-two{background:radial-gradient(ellipse at 80% 90%,#bc9b6720,transparent 50%);animation-delay:-9s;z-index:3}
@keyframes air-drift{from{transform:translateX(-5%) scale(1)}to{transform:translateX(8%) scale(1.15)}}
.journey .grain{position:absolute;z-index:9}

/* ---- out the side opening: the garden stream. Games are the stepping stones ----
   One painting (assets/scenes/stream.webp, 2752x1536) panned by house.js as you cross;
   each stone is a hotspot at the painted stone's image fractions (inline style), the
   game's kanji carved into its top, lit while you stand on it, the same ink smoke
   and card as a lantern in the hall. A new game = the next stone along. */
.stream{position:absolute;inset:0;z-index:7;opacity:0;pointer-events:none;overflow:hidden;background:#0a0b0f;will-change:opacity}
.stream .sart{position:absolute;left:0;top:0;width:2752px;height:1536px;transform-origin:0 0;will-change:transform}
.stream .sart > img{display:block;width:100%;height:100%}
.stream .sart::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,11,15,.7) 0,rgba(10,11,15,.3) 18%,transparent 34%),linear-gradient(0deg,rgba(10,11,15,.75),transparent 26%),linear-gradient(180deg,rgba(10,11,15,.55),transparent 22%)}
.stream .stone{position:absolute;transform:translate(-50%,-50%);container-type:inline-size;z-index:2;pointer-events:none}
.stream .stone .body{display:block;position:relative;width:100%;height:100%;pointer-events:auto;cursor:pointer;border-radius:50%}
/* the lantern light pooled on the stone top: warmer on the stone you are standing on */
.stream .stone .body::before{content:"";position:absolute;left:-6%;right:-6%;top:-14%;bottom:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,150,.6),rgba(255,170,80,.25) 58%,transparent 100%);
  mix-blend-mode:screen;opacity:var(--lit,0);filter:blur(5px);transition:opacity .6s}
/* the glow the lit stone throws on the water */
.stream .stone .body::after{content:"";position:absolute;left:-40%;right:-40%;top:40%;bottom:-120%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,180,90,.28),rgba(255,150,60,.1) 50%,transparent 74%);
  mix-blend-mode:screen;opacity:var(--halo,0);transition:opacity .6s}
/* a standing stone marker (michishirube) on each stone, the game's kanji carved down its panel;
   marker.webp is 553x1100, its blank panel runs x 40-84%, y 9.5-76% */
.stream .stone .mk{position:absolute;left:50%;bottom:46%;width:62%;transform:translateX(-50%);pointer-events:auto;cursor:pointer;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.65))}
.stream .stone .mk img{display:block;width:100%;height:auto;transition:filter .6s}
.stream .stone.lit .mk img{filter:brightness(1.18) saturate(1.1)}
.stream .stone .k{position:absolute;left:62%;top:42.5%;transform:translate(-50%,-50%);writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--jp);font-weight:700;font-size:21cqw;line-height:1;letter-spacing:.1em;color:#e6d9bd;opacity:.72;transition:opacity .6s,color .6s;
  text-shadow:0 1px 0 rgba(0,0,0,.9),0 -1px 0 rgba(0,0,0,.5),0 0 8px rgba(0,0,0,.8)}
.stream .stone.lit .k{opacity:1;color:#fff1d2;text-shadow:0 1px 0 rgba(0,0,0,.9),0 -1px 0 rgba(0,0,0,.5),0 0 8px rgba(0,0,0,.8),0 0 18px rgba(255,190,110,.45)}
/* the stones sit mid-screen, so the card grows from below the stone, beside it, not above it */
.stream .stone .smoke{bottom:-170%}
.stream .stone.left .smoke{left:104%}
.stream .stone.right .smoke{right:104%}
/* the card of the stone you are on sits above every other stone and marker */
.stream .stone.lit:hover,.stream .stone.open{z-index:6}
.lantern.lit:hover,.lantern.open{z-index:900!important}
/* while a card is up, the other markers sink into the smoke so the words read */
.stream .stone .mk{transition:opacity .6s}
/* the door stone (data-href): one big marker, roughly 2.4x the game markers, no card */
.stream .stone.go{z-index:3}
.stream .stone.go .mk{width:104%;bottom:36%;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .6s}
.stream .stone.go .mk img{transform:scaleX(1.5);transform-origin:50% 100%}   /* a wide marker: the panel stretched, the kanji drawn on top stays crisp */
.stream .stone.go .k{font-size:46cqw;left:calc(57% + 6px);top:40%}
.stream .stone.go.lit:hover .mk{transform:translateX(-50%) translateY(-4px) scale(1.03)}
.stream .stone.go.lit .k{opacity:.92;color:#fff1d2}
.stream .stone.go .lbl{top:94%}
.stream:has(.stone.lit:hover,.stone.open) .stone:not(.lit) .mk{opacity:.22}
.stream .stone .lbl{top:100%}
.stream .stone .lbl .n{font-size:clamp(13px,1.1vw,17px);letter-spacing:.1em}
.stream .scopy{z-index:3}
.stream .scopy .all{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--shu-soft);text-decoration:none;pointer-events:auto;width:max-content;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.stream .scopy .all:hover{transform:translateX(6px)}

/* ---- out the back: the shrine ---- */
.mist{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 60% 55%,rgba(190,196,196,.9),rgba(120,126,128,.75) 45%,rgba(30,32,36,.9) 100%)}
.shrine{position:absolute;inset:0;z-index:8;opacity:0;pointer-events:none;overflow:hidden;background:#0a0b0f;will-change:transform,opacity;transform-origin:50% 45%}
.shrine .sbg{position:absolute;inset:0;background:url('/assets/scenes/shrine.webp') 50% 38%/cover no-repeat}
.shrine .sbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,11,15,.82) 0,rgba(10,11,15,.45) 24%,transparent 44%),linear-gradient(0deg,rgba(10,11,15,.75),transparent 30%)}
.shrine .rack{position:absolute;inset:0}
/* the ema: name and roles carved on the front; tap and it turns over, the bio is carved into the back */
.shrine .ema{position:absolute;top:26%;width:26%;transform-origin:50% 0;container-type:inline-size;opacity:0;transform:translateY(-18%);perspective:1400px;cursor:pointer;outline:none}
.shrine .e1{left:11%}.shrine .e2{left:37%}.shrine .e3{left:63%}
.shrine .ema .card{position:relative;width:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.shrine .ema.flip .card{transform:rotateY(180deg)}
.shrine .ema:focus-visible .card{filter:drop-shadow(0 0 0 2px var(--shu))}
.shrine .ema .front,.shrine .ema .back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.shrine .ema .front{position:relative}
.shrine .ema .back{position:absolute;inset:0;transform:rotateY(180deg)}
.shrine .ema .front > img,.shrine .ema .back > img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.shrine .ema .back > img{transform:scaleX(-1)}
.shrine .ema .fam,.shrine .ema .carve{position:absolute;left:0;right:0;text-align:center;color:rgba(28,22,18,.66);mix-blend-mode:multiply;
  text-shadow:0 1px 0 rgba(255,246,228,.5),0 -1px 1px rgba(0,0,0,.6),0 2px 3px rgba(0,0,0,.25)}
.shrine .ema .fam{top:26.5%;font-family:var(--jp);font-weight:700;font-size:8.6cqw;line-height:1;letter-spacing:.02em}
/* front: the name, then the roles centred between it and the board's bottom */
.shrine .ema .front .carve{top:46%;bottom:7%;left:23%;right:22%;display:flex;flex-direction:column;align-items:center}
.shrine .ema .carve .nm{font-family:var(--head);font-weight:700;font-size:6.1cqw;letter-spacing:.06em;text-transform:uppercase;line-height:1.05}
/* the roles: one per line, burned into the wood: a darker red, scorched edge above, a lit edge below */
.shrine .ema .carve .role{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.1em;font-family:var(--jp);font-weight:700;font-size:3.6cqw;letter-spacing:.12em;text-transform:uppercase;line-height:1.15;
  color:rgba(128,24,8,.92);mix-blend-mode:multiply;
  text-shadow:0 1px 0 rgba(255,236,214,.42),0 -1px 1px rgba(30,4,0,.8),0 0 6px rgba(150,30,8,.45),0 2px 3px rgba(0,0,0,.3)}
/* a burned dot between the roles */
.shrine .ema .carve .role span + span::before{content:"·";display:block;font-size:1.25em;line-height:.8;margin:.02em 0 .08em;opacity:.9}
/* back: the bio carved across the board, under the roof */
.shrine .ema .back .carve{top:34%;bottom:10%;left:24%;right:23%;display:flex;align-items:center;justify-content:center}
.shrine .ema .carve .bio{margin:0;font-family:var(--jp);font-weight:600;font-size:3.8cqw;line-height:1.4;color:rgba(28,22,18,.8)}
.shrine .ema.e3 .carve .bio{font-size:3.35cqw}
/* phone only: the rack holds one plaque, these pick it */
.shrine .ema-tabs{display:none}
.shrine .scopy,.stream .scopy{position:absolute;left:var(--gutter);bottom:clamp(60px,10vh,110px);max-width:30ch;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(10px)}
.shrine .scopy .jp,.stream .scopy .jp{font-family:var(--brush);font-size:clamp(16px,1.6vw,22px);letter-spacing:.2em;color:var(--shu-soft)}
.shrine .scopy .ttl,.stream .scopy .ttl{font-family:var(--head);font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--washi);text-shadow:0 2px 24px rgba(0,0,0,.9)}
.shrine .scopy .ln,.stream .scopy .ln{margin-top:6px;font-family:var(--mincho);font-size:clamp(13px,1.15vw,16px);line-height:1.6;color:var(--washi-dim)}
.shrine .scopy .hint,.stream .scopy .hint{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--washi-faint)}
.shrine .scopy .all{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--shu-soft);text-decoration:none;pointer-events:auto;width:max-content;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.shrine .scopy .all:hover{transform:translateX(6px)}

/* ---- chrome: the signpost (Back · where you are · Continue), meter, top nav ----
   The signpost is the way from room to room: it stands at the foot of every room but the yard
   (the yard has its door), names the next area on the Continue button, and steps aside while
   you walk. house.js writes the names and fades it. */
.walk-nav{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;z-index:10;opacity:0;text-shadow:0 2px 12px #000;max-width:calc(100% - 2*var(--gutter))}
.wn-here{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:12ch;text-align:center}
.chapter-jp{font-family:var(--brush);font-size:28px;color:var(--washi)}
.chapter-en{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--washi-dim);white-space:nowrap}
.wn{display:inline-flex;align-items:center;gap:12px;padding:10px 16px 9px;border:1px solid rgba(233,225,205,.32);border-radius:2px;
  background:rgba(10,11,15,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--washi);cursor:pointer;font:inherit;text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.45);transition:border-color .3s,background .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.wn[hidden]{display:none}
.wn .lbl{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.wn .k{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--washi-dim)}
.wn .n{font-family:var(--head);font-size:clamp(14px,1.2vw,17px);letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.1}
.wn .arw{font-family:var(--mono);font-size:18px;line-height:1;color:var(--shu-soft);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.wn:hover,.wn:focus-visible{border-color:rgba(233,225,205,.7);background:rgba(10,11,15,.8);outline:none}
.wn-next:hover .arw,.wn-next:focus-visible .arw{transform:translateX(5px)}
.wn-prev:hover .arw,.wn-prev:focus-visible .arw{transform:translateX(-5px)}
.wn-next{border-color:rgba(207,59,43,.55);background:linear-gradient(180deg,rgba(217,67,47,.28),rgba(181,47,31,.28)),rgba(10,11,15,.62)}
.wn-next:hover,.wn-next:focus-visible{border-color:var(--shu-soft);background:linear-gradient(180deg,rgba(217,67,47,.5),rgba(181,47,31,.5)),rgba(10,11,15,.7)}
.wn-next .k{color:var(--shu-soft)}
/* while a card is up over a stone or lantern, the signpost stays out of its way */
.journey-viewport:has(.lantern.open,.stone.open) .walk-nav{opacity:0!important;pointer-events:none!important}
.journey-meter{position:absolute;bottom:0;left:0;right:0;height:2px;background:#e9e1cd0d;z-index:10}
.journey-meter span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:#b15035}
.topnav{z-index:20}

@media(max-width:980px){
}
@media(max-width:640px){
  .journey .scene{background-position:78% 50%}
  .journey .hero-fig{height:min(52vh,106vw);bottom:1vh;right:50%}
  .journey .hero-copy{padding-top:95px}
  .journey .scene-shade{background:linear-gradient(180deg,#0a0b0fd9 0%,#0a0b0f70 40%,transparent 65%),linear-gradient(0deg,#0a0b0faa,transparent 28%)}
  .journey .hero-copy .next{margin-top:22px}
  .journey .meta.br{right:20px}.journey .meta.br .fate{font-size:14px}
  /* phone: the smoke card is off (it floated the words over the other lanterns); a tap opens the .lsheet card instead.
     A touch leaves :hover stuck on the lantern it tapped, so its name must not stay hidden behind that */
  :is(.lantern,.stone) .smoke{display:none}
  :is(.lantern,.stone).lit:hover .lbl{opacity:1}
  :is(.lantern,.stone) .lbl{top:95%}
  .lantern .k{font-size:26cqw}
  .kake p{font-size:3.5cqw;line-height:1.5}.kake h2{font-size:5.6cqw}

  .shrine .sbg{background-position:50% 30%}
  /* phone: one plaque at a time on the rack (house.js windows them by q), header under the nav */
  .shrine .ema{width:min(84vw,360px);top:24%}
  .shrine .e1,.shrine .e2,.shrine .e3{left:50%;margin-left:min(-42vw,-180px)}
  .shrine .ema .carve .bio{font-size:3.9cqw}.shrine .ema.e3 .carve .bio{font-size:3.5cqw}
  .shrine .ema-tabs{position:absolute;left:16px;right:16px;bottom:148px;display:flex;justify-content:center;gap:8px;z-index:4}
  .shrine .ema-tabs button{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--washi-dim);cursor:pointer;
    padding:9px 13px 8px;border:1px solid rgba(233,225,205,.3);border-radius:2px;background:rgba(10,11,15,.62);transition:color .3s,border-color .3s}
  .shrine .ema-tabs button.on{color:#fff;border-color:var(--shu-soft)}
  .shrine .scopy,.stream .scopy{top:84px;bottom:auto;max-width:none;right:var(--gutter);gap:2px}
  .shrine .scopy .ttl,.stream .scopy .ttl{font-size:30px}
  .shrine .scopy .ln,.stream .scopy .ln{margin-top:2px;font-size:13px}
  /* phone: the painting is panned so the stone you are on sits at the screen's centre; the card rises over it */
  .stream .stone .k{font-size:21cqw}
  .stream .stone.go .k{font-size:46cqw}
  .stream .stone .lbl .n{font-size:12px}
  .lantern .lbl .n{font-size:13px;letter-spacing:.08em}
  .lantern .lbl .t{font-size:9px}
  .stream .sart::after{background:linear-gradient(0deg,rgba(10,11,15,.8),transparent 30%),linear-gradient(180deg,rgba(10,11,15,.7),transparent 30%)}
  .stream .scopy .all{margin-top:6px}
  .stream:has(.stone.open) .scopy{visibility:hidden}
  /* phone: where you are on top, Back and Continue side by side under it */
  .walk-nav{bottom:22px;flex-wrap:wrap;justify-content:center;gap:10px 8px;width:calc(100% - 32px);max-width:none}
  .wn-here{flex:1 0 100%;order:-1;gap:4px}.chapter-jp{font-size:22px}.chapter-en{font-size:8px}
  .wn{padding:9px 12px 8px;gap:9px}
  .wn-prev .lbl{display:none}.wn-prev{padding:12px 13px}
  .wn .n{font-size:13px}.wn .k{font-size:8px}
  .shrine .scopy .all{margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
  .journey .hero-fig{transition:none}.air,.depth-leaves{display:none}
  .journey .enter{animation:none;opacity:1;transform:none;filter:none}
.pf,.reveal,.lsheet,.lcard,.kake .kin > *,.lantern .body::before,.lantern .body::after,.stream .stone .body::before,.stream .stone .body::after,.lantern .lbl,.shrine .ema .card{transition:none}
}