/* Tokens follow dyu.sh: warm paper, ink, burnt orange. */
:root {
  --bg: #f4f1ea; --card: #fbfaf6; --ink: #1c1a17; --muted: #6b665e; --faint: #b4aec1;
  --border: #e7e2d7; --accent: #c2410c; --shadow: rgba(40, 30, 15, .07);
  --serif: 'Instrument Serif', 'Songti SC', 'Noto Serif SC', 'STSong', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.2, 0, 0, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e0c0b; --card: #181513; --ink: #f0ede6; --muted: #928c81; --faint: #6b655c; --border: #2a2622; --accent: #e8804f; --shadow: rgba(0, 0, 0, .5); }
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { ::selection { color: #1c1a17; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.page { max-width: 1280px; margin: 0 auto; padding: 26px 28px 32px; }

/* header */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 8px; }
.eyebrow { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .18em; color: var(--accent); }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
h1 { margin: 10px 0 0; font: 400 46px/1 var(--serif); letter-spacing: -.01em; }
h1 .latin { font-style: italic; color: var(--accent); }
.lede { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.status { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--muted); text-align: right; }
.index-link { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-decoration: none; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); transition: border-color 120ms var(--ease), color 120ms var(--ease); }
.index-link:hover { border-color: var(--accent); color: var(--accent); }

/* stage */
.stage { position: relative; width: min(100%, calc((100svh - 330px) * 1672 / 941)); min-width: min(100%, 720px); margin: 0 auto; aspect-ratio: 1672 / 941; overflow: hidden; touch-action: manipulation; }
.world { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1672 / 941; transform-origin: 0 0; }
.world > * { position: absolute; }
.sky { z-index: 1; }
.room { z-index: 2; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.clock { z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cat { z-index: 4; height: auto; pointer-events: none; user-select: none; transition: opacity 220ms var(--ease); }
/* Room lighting: a multiply wash masked by the room's own alpha, so the live sky is never tinted. */
.tint { z-index: 5; inset: 0; pointer-events: none; background: var(--tint, transparent); mix-blend-mode: multiply;
  -webkit-mask: url(/assets/room.webp) center / 100% 100% no-repeat; mask: url(/assets/room.webp) center / 100% 100% no-repeat;
  transition: background 1.2s linear; }
.lamp-glow { z-index: 6; pointer-events: none; border-radius: 50%; opacity: var(--lamp, 0); mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .55), rgba(255, 170, 90, .18) 55%, transparent 100%); transition: opacity 1.2s linear; }
.screen-glow { z-index: 6; inset: 0; pointer-events: none; opacity: var(--screens, 0); mix-blend-mode: screen; transition: opacity 1.2s linear; }
.screen-glow i { position: absolute; border-radius: 6px; background: rgba(150, 200, 255, .35); box-shadow: 0 0 24px 8px rgba(120, 180, 255, .25); }
.shimmer { z-index: 6; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 58%, rgba(255, 190, 130, .22) 72%, transparent 86%);
  animation: shimmer 3.4s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { transform: scale(.97); opacity: .55; } 50% { transform: scale(1.04); opacity: 1; } }
.lens { z-index: 7; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hole-css { z-index: 7; width: 8.5%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #000 0 34%, rgba(255, 190, 120, .9) 37%, rgba(194, 65, 12, .6) 44%, transparent 62%); }

/* hotspots */
.hotspots { z-index: 8; inset: 0; pointer-events: none; }
.hotspot { position: absolute; pointer-events: auto; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  transition: background 120ms var(--ease), box-shadow 120ms var(--ease); }
.hotspot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%;
  background: rgba(251, 250, 246, .85); box-shadow: 0 0 0 1.5px rgba(28, 26, 23, .45); opacity: .7; transition: opacity 120ms var(--ease); }
.world[data-period="night"] .hotspot::after { opacity: .35; background: rgba(205, 210, 225, .7); }
.world[data-period="dusk"] .hotspot::after { opacity: .5; }
.stage.overview .hotspot::after, .hotspot[aria-hidden="true"]::after, .hotspot.quiet::after, .hotspot.cat-hit::after { display: none; }
.hotspot:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
/* a white + accent double ring reads on any part of the illustration; the transparent outline shows in forced colours */
.hotspot:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); outline: 2px solid transparent; outline-offset: -2px; }
.hotspot.quiet:hover, .hotspot.cat-hit:hover { background: transparent; box-shadow: none; }
.hotspot.quiet:focus-visible, .hotspot.cat-hit:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
/* tiny objects get a slightly bigger invisible touch area on touch screens */
@media (pointer: coarse) { .hotspot.small::before { content: ''; position: absolute; inset: -8px; } }
.hole-handle { z-index: 9; position: absolute; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 0; background: transparent; cursor: grab; touch-action: none; }
.hole-handle:active { cursor: grabbing; }

/* dialogue */
.dialogue:focus { outline: none; }
.dialogue:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dialogue { position: relative; margin: 14px auto 0; max-width: 760px; padding: 16px 20px 18px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px var(--shadow); min-height: 92px; }
.speaker { margin: 0 0 8px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dialogue-body p { margin: 0; font-size: 15.5px; line-height: 1.65; }
.dialogue-body > * + * { margin-top: 10px; }
.cat-perch { position: absolute; right: 36px; bottom: calc(100% - 6px); width: 64px; height: auto; pointer-events: none; }
.card { display: flex; align-items: center; gap: 12px; padding: 10px 0 0; border-top: 1px solid var(--border); }
.card .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.card-text { flex: 1; min-width: 0; }
.card-name { font-weight: 600; }
.card-desc { color: var(--muted); font-size: 14px !important; }
.tag { margin-left: 8px; font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 7px; vertical-align: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  font: 500 12.5px/1 var(--mono); text-decoration: none; cursor: pointer; transition: border-color 120ms var(--ease), color 120ms var(--ease); }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { color: #fff; filter: brightness(1.08); }
@media (prefers-color-scheme: dark) { .btn.primary, .btn.primary:hover { color: #1c1a17; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* footer */
.foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; font: 400 11.5px/1.5 var(--mono); color: var(--muted); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* dialogs */
.sheet { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 26px 26px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.sheet::backdrop { background: rgba(14, 12, 11, .45); }
.sheet[open] { animation: rise 240ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.sheet-close { position: absolute; right: 14px; top: 12px; margin: 0; }
.sheet-close button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; color: var(--muted); }
.sheet-close button:hover { color: var(--accent); }
.kicker { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--accent); }
.sheet h2 { margin: 10px 0 14px; font: 400 30px/1.15 var(--serif); }
.project-list { list-style: none; margin: 0; padding: 0; }
.project-list li + li { border-top: 1px solid var(--border); }
.row-link { display: grid; grid-template-columns: 10px auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 11px 4px; text-decoration: none; }
.row-link .dot { width: 10px; height: 10px; border-radius: 50%; grid-row: 1 / 3; }
.row-name { font-weight: 600; }
.row-desc { grid-column: 2 / 4; color: var(--muted); font-size: 13.5px; }
.row-host { justify-self: end; font: 400 11.5px var(--mono); color: var(--muted); }
.row-link:hover .row-name, .row-link:hover .row-host { color: var(--accent); }
.sheet-foot { margin: 14px 0 0; font: 500 12px var(--mono); }
.sheet-foot a { text-decoration: none; color: var(--accent); }

/* the seal: a shipping label */
.seal { --accent: #c2410c; --muted: #7a6f5c; color-scheme: light; background: #fbf6e9; color: #1c1a17; border: 1px dashed #b9a98a; }
.seal .btn.primary, .seal .btn.primary:hover { color: #fff; }
.seal .seal-to { margin: 6px 0 0; font: 400 12px var(--mono); color: #7a6f5c; }
.seal-line { margin: 22px 0 6px !important; font: 400 44px/1.1 var(--serif) !important; letter-spacing: .04em; }
.seal-word { position: relative; padding: 0 6px; border: 0; border-bottom: 2px solid #c2410c; background: transparent; font: inherit; color: #c2410c; cursor: pointer; }
.seal-word::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 3px; background: #1c1a17; transform: scaleX(0); transform-origin: left; transition: transform 120ms var(--ease); }
.seal-word.struck::after { transform: scaleX(1); }
.seal-word.final { border-bottom-color: transparent; cursor: default; color: #1c1a17; }
.seal-en { margin: 0; font: 400 13px var(--mono); color: #7a6f5c; }
.seal-en span { color: #c2410c; }
.seal-note { margin: 16px 0 0; font-size: 15px; line-height: 1.6; min-height: 1.6em; }
.seal-hint { margin-top: 14px; font-size: 13px; color: #7a6f5c; }
.seal-hint summary { cursor: pointer; }
.seal-open { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #b9a98a; }
.seal-open p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.seal-open a { color: #c2410c; }

/* mobile: zones first */
.zones, .zone-back { position: absolute; z-index: 10; }
.zones { inset: auto 0 10px 0; display: flex; justify-content: center; gap: 10px; }
.zones button, .zone-back { min-width: 52px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--card) 92%, transparent); font: 500 14px/1 var(--sans); cursor: pointer; }
.zone-back { left: 10px; top: 10px; font: 500 12px var(--mono); }
.zones[hidden], .zone-back[hidden] { display: none; }
@media (max-width: 720px) {
  .page { padding: 20px 14px 28px; }
  .head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .head-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .status { text-align: left; }
  h1 { font-size: 40px; }
  .stage { width: 100%; }
  .stage.zoomed { aspect-ratio: 4 / 5; }
  .stage.zoomed .world { width: 240%; }
  .hotspot::after { width: 11px; height: 11px; }
  .stage.zoomed .hotspot.small::before { content: ''; position: absolute; inset: -8px; }
  .foot { flex-direction: column; }
  .cat-perch { right: 18px; width: 54px; }
}

/* ?debug: show every hit area */
.debug .hotspot { box-shadow: 0 0 0 1.5px rgba(255, 0, 180, .9); background: rgba(255, 0, 180, .06); }
.debug .hotspot[data-debug]::before { content: attr(data-debug); position: absolute; left: 4px; top: 3px; font: 10px var(--mono); color: #ff00b4; }

.noscript { padding: 24px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
}