@font-face{font-family:"Shippori Mincho B1";src:url(/fonts/shippori-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url(/fonts/zen-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url(/fonts/zen-700.woff2) format("woff2");font-weight:700;font-display:swap}

/* Fixed, verified tokens (§9.2). Text and controls only ever sit on --paper or --card. */
:root{
  --paper:#f3eee3;--card:#f3eee3;--ink:#141619;--ink2:#3f434b;--muted:#4f535c;--shu:#bf3329;--rule:rgba(20,22,25,.14);
  --gothic:"Zen Kaku Gothic New",system-ui,-apple-system,sans-serif;--mincho:"Shippori Mincho B1",Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--wash,var(--paper));transition:background-color 1.6s ease;color:var(--ink);font:500 16px/1.55 var(--gothic);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Watercolour wash from the room's colours, under everything */
#field{position:fixed;inset:0;width:100vw;height:100lvh;display:block;z-index:0;opacity:.7}

/* Ambient: the current work, huge and blurred, is the room's light */
#ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--wash,var(--paper));transition:background-color 1.6s ease}
#ambient .amb-in{position:absolute;inset:-12%;transform:scale(var(--pulse,1));transition:transform .25s ease-out}
#ambient img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(46px) saturate(1.35);transition:opacity 2.6s ease;
  animation:amb 26s ease-in-out infinite alternate}
#ambient img.on{opacity:.9}
#ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(10,10,14,.38) 100%)}
@keyframes amb{from{transform:scale(1) translate(-1.5%,-1%)}to{transform:scale(1.12) translate(1.5%,1.2%)}}
#field{mix-blend-mode:soft-light}
#ripples{position:fixed;inset:0;width:100vw;height:100lvh;z-index:0;pointer-events:none}
/* Paper/film grain over the scene (under the card text, which sits on opaque paper) */
#grain{position:fixed;inset:-50%;z-index:0;pointer-events:none;background:url(/grain.png);opacity:.07;mix-blend-mode:overlay;animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.page{position:relative;z-index:1;display:grid;grid-template-columns:360px minmax(0,1fr);gap:36px;
  padding:28px max(28px,env(safe-area-inset-right)) 60px max(28px,env(safe-area-inset-left));max-width:1680px;margin:0 auto}

/* The card: paper, ink border, hard print shadow (as on samhan.io) */
.card{position:sticky;top:28px;align-self:start;background:color-mix(in oklab,var(--card) 82%,var(--tint,var(--card)));transition:background-color 1.6s ease,box-shadow 1.6s ease;border:1.5px solid var(--ink);border-radius:4px;font-size:15px;
  box-shadow:9px 9px 0 color-mix(in oklab,var(--ink) 72%,var(--tint,var(--ink)));padding:26px 30px 22px;max-height:calc(100dvh - 56px);overflow:auto}
.top{display:flex;justify-content:space-between;align-items:flex-start}
.seal{display:grid;place-items:center;width:44px;height:44px;background:var(--shu);color:#fff;border-radius:6px;
  font:800 25px/1 var(--mincho);text-decoration:none;transform:rotate(-4deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.kana{writing-mode:vertical-rl;color:var(--shu);font:700 17px/1.1 var(--gothic);letter-spacing:.12em}
h1{font:800 54px/1 var(--mincho);letter-spacing:-.01em;margin:-6px 0 8px}
.lede{font:800 27px/1.2 var(--mincho);color:var(--shu);margin:0 0 10px}
.about{color:var(--ink2);margin:0 0 18px;font-size:14.5px}
.begun .about{display:none}

.ask{position:relative;margin:0 0 22px}
.ask input{width:100%;font:500 18px/1.3 var(--gothic);color:var(--ink);background:color-mix(in oklab,#fbf8f1 90%,var(--tint,#fbf8f1));border:1.5px solid var(--ink);border-radius:999px;
  padding:14px 20px;outline:none;-webkit-appearance:none;appearance:none;box-shadow:3px 3px 0 var(--ink);transition:box-shadow .15s,transform .15s}
.ask input::placeholder{color:#7a7d84;opacity:1}
.ask input::-webkit-search-cancel-button{display:none}
.ask input:focus-visible{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}
.busy{position:absolute;left:24px;right:24px;bottom:5px;height:2px;overflow:hidden;opacity:0;transition:opacity .2s}
.busy::after{content:"";position:absolute;inset:0;width:30%;background:var(--shu);animation:slide 1.1s ease-in-out infinite}
.ask.searching .busy{opacity:1}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.note{margin:-10px 0 18px;color:var(--shu);font-size:14px;font-weight:700}

.label{display:flex;align-items:center;gap:14px;margin:0 0 4px;font:700 12px/1 var(--gothic);letter-spacing:.24em;text-transform:uppercase;color:var(--shu)}
.label::after{content:"";flex:1;height:1.5px;background:var(--ink)}
.rooms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rooms button{display:flex;align-items:center;gap:6px;background:transparent;border:1.5px solid var(--ink);border-radius:999px;
  padding:4px 9px;font:inherit;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.rooms button:hover,.rooms button:focus-visible{background:rgba(20,22,25,.08);outline:none}
.rooms .n{font:700 11px/1 var(--mincho);color:var(--shu)}
.rooms b{font:800 13px/1.2 var(--mincho)}
.rooms button[aria-current="true"]{background:var(--ink);color:var(--card)}.rooms button[aria-current="true"] .n{color:#f08a80}
.rooms .sw{display:flex;gap:2px}.rooms .sw i{width:10px;height:18px;border-radius:2px}


.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px 0 20px}
.playing{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);min-height:1.45em}
.playing b{color:var(--ink);font-weight:700}
.sound{flex:none;display:flex;align-items:center;gap:8px;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;
  padding:9px 16px;font:700 12px/1 var(--gothic);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.sound svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sound svg path:first-child{fill:currentColor;stroke:none}
.sound[aria-pressed="false"] .w1,.sound[aria-pressed="false"] .w2{opacity:.15}
.sound:focus-visible,.seal:focus-visible{outline:2px solid var(--shu);outline-offset:3px}

/* The wall */
/* View switch */
.mode{display:flex;margin:-6px 0 20px;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;width:max-content}
.mode button{background:var(--card);color:var(--ink);border:0;padding:8px 16px;font:700 12px/1 var(--gothic);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.mode button[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.mode button:focus-visible{outline:2px solid var(--shu);outline-offset:-4px}
.view:not([data-mode="wall"]) .wall{display:none}
.view[data-mode="wall"] .show{display:none}

/* Slideshow: one work, large, slow drift and dissolve */
.show{position:sticky;top:28px;height:calc(100dvh - 56px);display:grid;grid-template-rows:1fr auto;gap:14px}
.frame{position:relative;margin:0;overflow:hidden;border-radius:3px}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.8s ease;
  filter:drop-shadow(0 18px 36px rgba(20,22,25,.32)) drop-shadow(0 1px 0 rgba(20,22,25,.3))}
.slide.on{opacity:1;animation:drift 11s ease-out both}
@keyframes drift{from{transform:scale(1.0) translate(0,0)}to{transform:scale(1.05) translate(var(--dx,0),var(--dy,0))}}
.show.previewing .slide.on{opacity:.25}
.cap{justify-self:center;display:grid;gap:3px;margin:0;background:var(--card);border:1.5px solid var(--ink);border-radius:10px;padding:10px 18px 11px;
  font-size:14px;color:var(--ink2);max-width:min(92%,760px);text-align:center;box-shadow:4px 4px 0 var(--ink);transition:opacity .6s}
.cap span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap .desc{color:var(--ink);font-size:14.5px;line-height:1.45}
.cap .desc:empty{display:none}
.cap b{color:var(--ink);font:800 16px/1 var(--mincho)}
.cap:empty{opacity:0}
.begin{position:absolute;z-index:3;left:50%;top:44%;transform:translate(-50%,-50%);background:var(--card);color:var(--ink);border:1.5px solid var(--ink);
  border-radius:999px;padding:14px 26px;font:800 20px/1 var(--mincho);box-shadow:5px 5px 0 var(--ink);cursor:pointer;display:grid;gap:6px;text-align:center;
  animation:breathe 3.2s ease-in-out infinite}
.begin small{font:700 11px/1 var(--gothic);letter-spacing:.2em;text-transform:uppercase;color:var(--shu)}
.begin[hidden]{display:none}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.04)}}
.prev,.next{position:absolute;top:0;bottom:60px;width:30%;background:none;border:0;cursor:pointer}
.prev{left:0;cursor:w-resize}.next{right:0;cursor:e-resize}
.prev:focus-visible,.next:focus-visible{outline:2px solid var(--shu);outline-offset:-6px}

/* Masonry: each work at its own shape */
.wall{columns:4;column-gap:16px;padding-top:2px}
@media (min-width:1500px){.wall{columns:5}}
.tile{position:relative;display:block;width:100%;aspect-ratio:var(--ar,4/5);border:0;padding:0;margin:0 0 16px;break-inside:avoid;background:transparent;cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tile:hover img.on{filter:brightness(1.05)}
.tile:focus-visible{outline:2px solid var(--shu);outline-offset:4px}
.tile .pal{position:absolute;inset:0;border-radius:2px;opacity:.9;transition:opacity .7s ease var(--d,0ms)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px;opacity:0;transform:scale(.985);
  transition:opacity .9s ease var(--d,0ms),transform 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
  box-shadow:0 1px 0 rgba(20,22,25,.25),0 12px 26px rgba(20,22,25,.22)}
.tile.art img.on{opacity:1;transform:none}
.tile.art img.on~.pal,.tile.art .pal{opacity:0}
.tile.art:not(:has(img.on)) .pal{opacity:.85}
.tile.empty{display:none}
.tile.stale{opacity:.5}

dialog{border:1.5px solid var(--ink);padding:0;max-width:min(920px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px);border-radius:4px;
  background:var(--card);color:var(--ink);box-shadow:9px 9px 0 var(--ink);overflow:auto}
dialog::backdrop{background:rgba(20,22,25,.45)}
dialog img{display:block;width:100%;max-height:66dvh;object-fit:contain;background:#ebe5d6;padding:18px}
dialog .meta{padding:18px 26px 24px}
dialog h2{font:800 25px/1.2 var(--mincho);margin:0 0 4px}
dialog p{margin:0 0 8px;color:var(--muted)}
dialog .mood{color:var(--ink);font-size:16px}
dialog .credit{font-size:13.5px}
dialog a{color:var(--shu);font-weight:700}
dialog .close{position:sticky;float:right;top:10px;margin:10px 10px -48px 0;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--ink);
  background:var(--card);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;z-index:2}

/* Phone and narrow screens: one compact card, the art visible in the same screen */
@media (max-width:900px){
  .page{grid-template-columns:1fr;gap:14px;padding:calc(env(safe-area-inset-top) + 10px) 12px 40px}
  .card{position:sticky;top:calc(env(safe-area-inset-top) + 6px);z-index:3;max-height:none;overflow:visible;padding:12px 14px 12px;box-shadow:5px 5px 0 var(--ink);
    display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"seal title sound" "ask ask ask" "play play mode" "rooms rooms rooms";align-items:center;column-gap:10px}
  .top,.foot{display:contents}
  .seal{grid-area:seal;width:32px;height:32px;font-size:18px}
  .kana,.lede,.about,.label{display:none}
  h1{grid-area:title;font-size:28px;margin:0}
  .sound{grid-area:sound;justify-self:end;width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}.sound span{display:none}
  .ask{grid-area:ask;margin:10px 0 8px}.ask input{font-size:16px;padding:11px 16px;box-shadow:2px 2px 0 var(--ink)}
  .note{grid-area:ask;align-self:end;margin:0 0 -4px}
  .playing{grid-area:play;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}
  .mode{grid-area:mode;margin:0}.mode button{padding:6px 10px;font-size:10.5px;letter-spacing:.12em}
  .rooms{grid-area:rooms;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;margin:10px -14px 0;padding:0 14px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rooms::-webkit-scrollbar{display:none}
  .rooms li{flex:none}
  .rooms button{grid-template-columns:auto auto;gap:6px;border:1.5px solid var(--ink);border-radius:999px;padding:6px 12px;width:auto}
  .rooms li:last-child button{border-bottom:1.5px solid var(--ink)}
  .rooms .n{font-size:13px}.rooms b{font-size:14px}
  .rooms button[aria-current="true"]{background:var(--ink);color:var(--card)}.rooms button[aria-current="true"] .n{color:#f08a80}
  .rooms button[aria-current="true"] b{text-decoration:none}
  .show{position:relative;top:0;height:calc(100svh - 268px);min-height:300px;gap:8px}
  .cap{font-size:12.5px;padding:7px 12px;box-shadow:3px 3px 0 var(--ink)}.cap .desc{font-size:13px}
  .wall{columns:2;column-gap:10px}.tile{margin-bottom:10px}
}
@media (min-width:600px) and (max-width:900px){.wall{columns:3}}
@media (prefers-reduced-motion:reduce){#grain{animation:none}#ambient img{animation:none}.slide.on{animation:none}*{transition-duration:0s!important;animation:none!important}}