:root {
  --ink: #14181F;
  --steam: #F1EBE0;
  --copper: #B87A4B;
  --mist: #8C8A84;

  /* motion: one easing, two durations */
  --ease: cubic-bezier(.37, 0, .63, 1);
  --dur: .6s;
  --dur-fast: .18s;

  /* tints of ink for the plan (not new brand colours) */
  --slab: #1B2129;
  --tile: #222A34;
  --water: #27394A;
  --wall-top: #3A4452;
  --wall-left: #1A2028;
  --wall-right: #2B3441;
}

* { box-sizing: border-box; margin: 0; }

body {
  background: radial-gradient(1400px 800px at 50% 28%, #1b222c 0%, var(--ink) 68%) fixed, var(--ink);
  color: var(--steam);
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.6;
}

.jp, .plate-jp, .mark-jp, h1, h2 { font-family: "Zen Antique", serif; font-weight: 400; }

/* header */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 28px; border-bottom: 1px solid #262d38;
}
.brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.brand .kanji { font-family: "Zen Antique", serif; font-size: 30px; letter-spacing: .12em; }
.brand .rule { width: 22px; height: 2px; background: var(--copper); margin: 6px 0; }
.brand .latin { font-family: "Zen Antique", serif; font-size: 11px; letter-spacing: .5em; }

.floors { display: flex; gap: 26px; }
.floors button {
  background: none; color: var(--mist); border: 0; border-bottom: 1px solid transparent; padding: 4px 0;
  font: inherit; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.floors button:hover { color: var(--steam); }
.floors button[aria-current="true"] { color: var(--steam); border-bottom-color: var(--copper); }
.floors button:disabled { color: #4a5666; cursor: not-allowed; }

/* layout */
main {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  max-width: 1560px; margin: 0 auto; padding: 16px 32px 24px;
}
.stage { min-width: 0; }
.stage h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.15; letter-spacing: .03em; margin-bottom: 6px; }
.stage h1 .jp { font-size: .55em; color: var(--mist); margin-left: .6em; letter-spacing: .12em; }
.stage .sub { color: var(--mist); font-size: 14px; margin-bottom: 6px; max-width: 46em; }
#plan {
  width: 100%; height: clamp(460px, calc(100vh - 200px), 1000px); display: block; transition: opacity .18s;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 2.5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 2.5%, #000 95%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
#plan.is-turning { opacity: 0; }

aside { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 861px) {
  aside {
    position: absolute; top: 120px; right: 32px; width: 260px; z-index: 6; padding: 18px 18px 6px;
    background: rgba(20, 24, 31, .94); border: 1px solid #262d38;
    transition: opacity var(--dur-fast), transform var(--dur-fast), visibility 0s linear var(--dur-fast);
  }
  aside.is-closed { visibility: hidden; opacity: 0; transform: translateX(10px); pointer-events: none; }
  aside:not(.is-closed) { transition: opacity var(--dur-fast), transform var(--dur-fast); }
}

/* plan faces */
.slab .f-top   { fill: var(--slab); }
.slab .f-left  { fill: var(--wall-left); }
.slab .f-right { fill: var(--wall-right); }

.tile .f-top   { fill: var(--tile); stroke: #2d3643; stroke-width: .6; }
.tile .f-left, .tile .f-right { fill: var(--wall-left); }
.tile.k-water .f-top  { fill: var(--water); }
.tile.k-wash  .f-top  { fill: #2a3340; }
.tile.k-rest  .f-top  { fill: #2c3441; }
.tile.k-service .f-top { fill: #1e242c; }

.w-outer .f-top, .w-part .f-top, .w-desk .f-top { fill: var(--wall-top); }
.w-outer .f-left, .w-part .f-left, .w-desk .f-left { fill: var(--wall-left); }
.w-outer .f-right, .w-part .f-right, .w-desk .f-right { fill: var(--wall-right); }
.w-desk .f-top { fill: #4a5666; }

.w-noren .f-top, .w-noren .f-left, .w-noren .f-right { fill: var(--steam); }
.w-noren .f-right { fill: #cfc8bb; }

.w-post .f-top, .w-post .f-left, .w-post .f-right { fill: #4a5666; }
.w-lintel .f-top, .w-lintel .f-left, .w-lintel .f-right { fill: var(--copper); }
.w-lintel .f-right { fill: #96603a; }

.lbl {
  fill: var(--steam); font-size: 9px; letter-spacing: .16em; text-anchor: middle; text-transform: uppercase;
  pointer-events: none; font-family: "Zen Kaku Gothic New", sans-serif;
}
.lbl-off { fill: var(--mist); }
.mark-jp { fill: var(--steam); font-size: 17px; text-anchor: middle; pointer-events: none; }
.mark-street { fill: var(--mist); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; text-anchor: middle; pointer-events: none; }

/* hit areas */
.hit { fill: transparent; stroke: transparent; stroke-width: 1.6; cursor: pointer; outline: none; transition: fill var(--dur-fast), stroke var(--dur-fast); }
.hit.is-hover  { fill: rgba(184, 122, 75, .18); stroke: var(--copper); }
.hit.is-active { fill: rgba(184, 122, 75, .34); stroke: var(--copper); }
.hit:focus-visible { stroke: var(--steam); stroke-width: 2; }

/* panel */
#panel { border: 1px solid #262d38; padding: 20px; min-height: 240px; }
#panel .eyebrow { color: var(--copper); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
#panel h2 { font-size: 22px; margin: 4px 0 12px; }
#panel h2 .jp { font-size: 16px; color: var(--mist); margin-left: 6px; }
#panel .draft, .hint { color: var(--mist); font-size: 14px; }

.plate {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 16px; padding: 14px 22px; background: var(--steam); color: var(--ink);
  border-top: 3px solid var(--copper);
}
.plate-step { font-family: "Zen Kaku Gothic New", sans-serif; font-size: 12px; letter-spacing: .2em; color: #6b5036; }
.plate-jp { font-size: 30px; letter-spacing: .12em; line-height: 1.2; }
.plate-en { font-family: "Zen Antique", serif; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }

/* space list */
#spaces h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); font-weight: 500; margin: 0 0 6px; }
#spaces ul { list-style: none; padding: 0; margin: 0 0 18px; }
#spaces button {
  width: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left;
  background: none; color: var(--steam); border: 0; border-bottom: 1px solid #262d38;
  padding: 8px 4px; font: inherit; font-size: 14px; cursor: pointer;
}
#spaces button .n { width: 20px; color: var(--copper); font-size: 12px; }
#spaces button .jp { margin-left: auto; color: var(--mist); font-size: 14px; }
#spaces button:hover, #spaces button[aria-pressed="true"] { color: var(--copper); }
#spaces button:focus-visible { outline: 2px solid var(--steam); outline-offset: -2px; }

footer { max-width: 1240px; margin: 0 auto; padding: 8px 24px 40px; color: var(--mist); font-size: 12px; }

@media (max-width: 860px) {
  main { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .top { padding: 16px; }
  footer { padding: 8px 16px 32px; }
}

/* labels get unreadable when the plan shrinks; the list below takes over */
@media (max-width: 560px) {
  .lbl, .mark-street { display: none; }
  .floors button { padding: 4px 10px; }
  .ctl-rot { display: none; }
  #plan { height: clamp(360px, 62vh, 560px); }
}

@media (prefers-reduced-motion: reduce) {
  .hit, .lv-hit, .level, #plan, .level .lbl, .stair-go circle, .stair-go polygon { transition: none; }
  .plaque, .elev { animation: none; }
  .view::before { display: none; }
  .m-dive .dt { transition: none; }
}

/* building scene (plan.js) */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
.controls [hidden] { display: none; }
.ctl {
  background: none; color: var(--steam); border: 1px solid #3a4452; padding: 6px 14px;
  font: inherit; font-size: 13px; letter-spacing: .06em; cursor: pointer;
}
.ctl:hover { border-color: var(--copper); color: var(--copper); }
.ctl:focus-visible { outline: 2px solid var(--steam); outline-offset: 2px; }
.ctl-rot { display: flex; gap: 6px; margin-left: auto; }
.ctl-rot .ctl { padding: 6px 12px; font-size: 16px; line-height: 1; }

.level { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.no-anim .level { transition: none; }

.lv-hit { fill: transparent; stroke: transparent; stroke-width: 1.6; pointer-events: none; cursor: pointer; outline: none; transition: fill var(--dur-fast), stroke var(--dur-fast); }
.m-burst .lv-hit { pointer-events: all; }
.m-burst .lv-hit:hover, .lv-hit:focus-visible { fill: rgba(184, 122, 75, .14); stroke: var(--copper); }
.lv-label { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.m-burst .lv-label { opacity: 1; transition-delay: .5s; }
.lv-label line { stroke: var(--mist); stroke-width: 1; }
.lv-label text { fill: var(--steam); font-size: 11px; letter-spacing: .22em; font-family: "Zen Kaku Gothic New", sans-serif; }
.m-burst .level:hover .lv-label text { fill: var(--copper); }

.level:not(.is-live) .hit { pointer-events: none; }
.level .lbl, .level .mark-jp, .level .mark-street { transition: opacity .4s; }
.level:not(.is-live) .lbl, .level:not(.is-live) .mark-jp, .level:not(.is-live) .mark-street { opacity: 0; }

/* signage plate pinned to the selected space (replaces the side panel on wide screens) */
.plaque { pointer-events: none; animation: pq-in .35s ease both; }
@keyframes pq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pq-card { fill: var(--steam); }
.pq-bar { fill: var(--copper); }
.pq-lead { fill: none; stroke: var(--copper); stroke-width: 1.3; }
.pq-lead-under { fill: none; stroke: var(--ink); stroke-opacity: .7; stroke-width: 4; }
.pq-dot { fill: var(--copper); }
.pq-eyebrow { fill: #6b5036; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-family: "Zen Kaku Gothic New", sans-serif; }
.pq-jp { fill: var(--ink); font-size: 26px; letter-spacing: .1em; font-family: "Zen Antique", serif; }
.pq-en { fill: var(--ink); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; font-family: "Zen Antique", serif; }
.pq-rule { stroke: #cfc8bb; stroke-width: 1; }
.pq-text { fill: #3a4452; font-size: 11px; font-family: "Zen Kaku Gothic New", sans-serif; }

/* the panel stays for screen readers; it shows again where the plate would be too small */
@media (min-width: 861px) {
  #panel { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 860px) {
  .plaque { display: none; }
}

/* stairs: arrows to the level above and below */
.stair-go { cursor: pointer; outline: none; }
.stair-go circle { fill: var(--ink); stroke: var(--steam); stroke-width: 1.4; transition: fill var(--dur-fast), stroke var(--dur-fast); }
.stair-go polygon { fill: var(--steam); transition: fill var(--dur-fast); }
.stair-go:hover circle, .stair-go:focus-visible circle { fill: var(--copper); stroke: var(--copper); }
.stair-go:hover polygon, .stair-go:focus-visible polygon { fill: var(--ink); }
.level:not(.is-live) .stair-go { pointer-events: none; }
.level:not(.is-live) .stair-go { opacity: 0; }

/* dive: one space, very close */
.dt { visibility: hidden; pointer-events: none; }
.m-dive .dt { visibility: visible; transition: visibility 0s linear calc(var(--dur) - .1s); }
.m-dive .stair-go { pointer-events: none; }
.m-dive .stair-go { opacity: 0; }
.m-dive .level .lbl, .m-dive .level .mark-jp, .m-dive .level .mark-street { opacity: 0; }
.elev { animation: pq-in .5s ease both; }
.ctl-rot[hidden] { display: none; }
.m-dive .hit.is-active { fill: transparent; stroke: transparent; }
.m-dive .hit.is-hover { fill: rgba(184, 122, 75, .08); stroke: rgba(184, 122, 75, .6); }

/* only the live level takes clicks; faded levels must not catch them (they sit on top of each other) */
.level { pointer-events: none; }
.level.is-live { pointer-events: auto; }

/* breadcrumb: where you are, and the way back out */
.view { position: relative; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 13px; letter-spacing: .04em; min-height: 30px; }
.crumb { color: var(--steam); background: none; border: 0; padding: 4px 6px; font: inherit; }
button.crumb { color: var(--mist); cursor: pointer; border-bottom: 1px solid transparent; }
button.crumb:hover { color: var(--copper); border-bottom-color: var(--copper); }
button.crumb:focus-visible { outline: 2px solid var(--steam); outline-offset: 1px; }
.sep { color: #4a5666; }

/* small map of the level, top right of a close view */
.minimap { position: absolute; top: 8px; right: 8px; width: 150px; padding: 6px; background: rgba(20, 24, 31, .82); border: 1px solid #262d38; }
.minimap[hidden] { display: none; }
.minimap svg { display: block; width: 100%; height: auto; }
.mm-off { fill: #1B2129; }
.mm-z { fill: #2d3643; stroke: var(--ink); stroke-width: .12; cursor: pointer; outline: none; transition: fill var(--dur-fast); }
.mm-z:hover, .mm-z:focus-visible { fill: #4a5666; }
.mm-z:focus-visible { stroke: var(--steam); stroke-width: .2; }
.mm-z.is-cur { fill: var(--copper); }
@media (max-width: 560px) { .minimap { width: 104px; } }
@media (prefers-reduced-motion: reduce) { .mm-z { transition: none; } }

/* the guided route controls sit over the bottom of the view, so they stay on screen */
.view > .pa-ui { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 10px 12px; background: rgba(20, 24, 31, .9); border: 1px solid #262d38; }
.view > .pa-ui[hidden] { display: none; }

/* narrow screens: no view rotation (D45), route controls back in the flow instead of over the plan */
@media (max-width: 860px) {
  .view > .pa-ui { position: static; margin-top: 8px; }
}
@media (max-width: 560px) {
  .ctl-rot { display: none; }
}
@media (max-width: 860px) {
  #plan.m-focus { height: calc((100vw - 32px) * .78); min-height: 240px; }
}

/* light and depth */
.view::before { content: ""; position: absolute; z-index: -1; inset: 4% 6%; pointer-events: none; background: radial-gradient(ellipse 55% 50% at 50% 55%, rgba(184, 122, 75, .09), transparent 70%); }
.lv-shadow { fill: #000; opacity: .16; pointer-events: none; }

/* the plate shows after the camera has arrived */
.plaque { animation: pq-in .5s var(--ease) .6s both; }

/* keyboard focus, visible on the dark ground */
button:focus-visible, a:focus-visible { outline: 2px solid var(--steam); outline-offset: 2px; }

/* keyboard hint, where the rotation buttons were */
.keys { margin: 0 0 0 auto; font-size: 12px; color: var(--mist); letter-spacing: .05em; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; justify-content: flex-end; }
.keys kbd { font: inherit; font-size: 11px; color: var(--steam); border: 1px solid #3a4452; border-radius: 3px; padding: 0 5px; min-width: 20px; text-align: center; margin-left: 5px; }
.keys kbd:first-child { margin-left: 0; }
@media (hover: none), (max-width: 860px) { .keys { display: none; } }

/* matter: grain over the stage, lit edges, blurred neighbours */
.view::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.lv-sheen, .lv-lamp { pointer-events: none; }
.slab .f-top { stroke: rgba(241, 235, 224, .10); stroke-width: .7; }
.w-outer .f-top, .w-part .f-top, .w-desk .f-top { stroke: rgba(241, 235, 224, .20); stroke-width: .7; }
.w-outer .f-left, .w-outer .f-right { stroke: rgba(241, 235, 224, .05); stroke-width: .5; }
.m-focus.is-settled .level:not(.is-live), .m-dive.is-settled .level:not(.is-live) { filter: blur(4px); }
.level { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) { .view::after { display: none; } .m-focus.is-settled .level:not(.is-live), .m-dive.is-settled .level:not(.is-live) { filter: none; } }

/* the space you are in, outlined in a fine copper line */
.m-dive .hit.is-cur { fill: transparent; stroke: rgba(184, 122, 75, .75); stroke-width: 1.6; }

/* stairs: the up / down choice, shown in the scene once you are inside */
.stair-choice { animation: pq-in .5s var(--ease) both; }
.sc-btn { cursor: pointer; outline: none; }
.sc-btn rect { fill: rgba(20, 24, 31, .92); stroke: var(--steam); stroke-width: 1.2; transition: fill var(--dur-fast), stroke var(--dur-fast); }
.sc-btn text { fill: var(--steam); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-family: "Zen Kaku Gothic New", sans-serif; transition: fill var(--dur-fast); }
.sc-btn .sc-arrow { font-size: 14px; letter-spacing: 0; }
.sc-btn:hover rect, .sc-btn:focus-visible rect { fill: var(--copper); stroke: var(--copper); }
.sc-btn:hover text, .sc-btn:focus-visible text { fill: var(--ink); }
@media (prefers-reduced-motion: reduce) { .stair-choice { animation: none; } .sc-btn rect, .sc-btn text { transition: none; } }

/* the list of spaces is a drawer on wide screens, opened by a quiet text link */
.spaces-toggle {
  background: none; border: 0; border-bottom: 1px solid transparent; color: var(--mist); cursor: pointer; padding: 2px 0; margin-left: 22px;
  font: inherit; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.spaces-toggle:hover, .spaces-toggle[aria-expanded="true"] { color: var(--steam); border-bottom-color: var(--copper); }
@media (max-width: 860px) { .spaces-toggle { display: none; } }

/* labels of the plan appear when you point at a space, not all the time */
@media (hover: hover) and (min-width: 861px) {
  .level.is-live .lbl { opacity: 0; }
}
.tip { pointer-events: none; animation: pq-in .18s var(--ease) both; }
.tip text { text-anchor: middle; paint-order: stroke; stroke: #14181F; stroke-width: 4px; stroke-linejoin: round; }
.tip-jp { fill: var(--steam); font-size: 17px; letter-spacing: .12em; font-family: "Zen Antique", serif; }
.tip-en { fill: var(--steam); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-family: "Zen Kaku Gothic New", sans-serif; }
@media (prefers-reduced-motion: reduce) { .tip { animation: none; } }

/* the keyboard hint fades out once you have it, and comes back when you press a key */
.keys { transition: opacity .8s ease; }
.keys.is-faded { opacity: 0; }
.controls:hover .keys.is-faded { opacity: 1; }

/* name of the space under the pointer, under the small map */
.mm-cap { margin: 6px 0 0; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); text-align: center; min-height: 14px; }

@media (max-width: 560px) {
  .floors { flex-wrap: wrap; gap: 6px 20px; }
  .floors button { letter-spacing: .14em; font-size: 11px; }
}