:root { --bg: #101418; --fg: #e8e6e0; --accent: #7fb8a4; --panel: rgba(12, 16, 20, 0.72); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, sans-serif; }
a { color: var(--accent); }
/* Scene pages: the video is the page. No page scroll; the About sheet scrolls internally. */
body:has(.scene) { overflow: hidden; height: 100dvh; }
.scene { height: 100dvh; position: relative; overflow: hidden; }
.scene-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; background: #10151a; }

/* Liquid glass */
:root { --glass: rgba(255, 255, 255, 0.01); --glass-border: rgba(255, 255, 255, 0.16); }
.player-panel, .scene-about, .glass-chip {
  background: var(--glass);
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
@supports not (backdrop-filter: blur(1px)) {
  .player-panel, .scene-about, .glass-chip { background: rgba(12, 16, 20, 0.85); }
}

.player-panel {
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 2;
  border-radius: 24px;
  padding: 0.75rem;
  max-width: min(420px, calc(100vw - 2rem));
}
.player-bar { display: flex; align-items: center; gap: 0.75rem; }
.play-button {
  flex: none;
  width: 3rem; height: 3rem;
  font-size: 1.1rem; line-height: 1;
  border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, 0.85); color: #10151a;
  cursor: pointer; text-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
/* One icon shows at a time, chosen by data-state. SVG rather than ▶/⏸ glyphs:
   U+23F8 is emoji by default, so phones rendered it in colour on the white pill. */
.play-button svg { width: 1.3rem; height: 1.3rem; fill: currentColor; display: block; }
.play-button .icon-pause, .play-button .icon-loading { display: none; }
.play-button[data-state="playing"] .icon-play { display: none; }
.play-button[data-state="playing"] .icon-pause { display: block; }
.play-button[data-state="loading"] .icon-play,
.play-button[data-state="loading"] .icon-pause { display: none; }
.play-button[data-state="loading"] .icon-loading { display: block; }
.player-heading { min-width: 0; margin-right: auto; }
.scene-name { margin: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.track-title { margin: 0.1rem 0 0; font-size: 1rem; font-weight: 600; min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-toggle { flex: none; background: none; border: 0; color: #fff; font-size: 1rem; cursor: pointer; padding: 0.4rem; opacity: 0.8; }
.player-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.player-panel.collapsed { border-radius: 999px; }
.player-panel.collapsed .player-heading, .player-panel.collapsed .player-extras { display: none; }

.glass-chip { border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.85rem; cursor: pointer; }
select.glass-chip option { color: #10151a; text-shadow: none; }
.glass-chip:focus-visible, .play-button:focus-visible, .panel-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.volume-control { width: 6rem; max-width: 30vw; accent-color: var(--accent); }

.scene-nav { position: fixed; top: calc(0.75rem + env(safe-area-inset-top)); right: 0.75rem; z-index: 2; display: flex; gap: 0.5rem; }
.home-chip { display: inline-flex; align-items: center; padding: 0.45rem 0.6rem; color: #fff; }
.home-chip svg { display: block; }
.scene-about {
  position: fixed; z-index: 3;
  inset: auto 0.75rem calc(1rem + env(safe-area-inset-bottom)) 0.75rem;
  margin: 0 auto; max-width: 640px; max-height: 75dvh;
  overflow-y: auto; border-radius: 24px; padding: 1.25rem;
}
.scene-about[hidden] { display: none; }
.about-close { position: sticky; top: 0; float: right; }
.scene-about .site-footer { padding: 1rem 0 0; }
.scene-copy { max-width: 640px; }

/* On phones the solid white pill read as a separate UI object stuck onto the
   scene. Give it the same liquid glass as the panel and chips so the whole
   player is one piece of glass over the video. The icon keeps a drop shadow,
   mirroring the panel's text-shadow, so it stays legible over bright frames. */
@media (max-width: 767px) {
  .play-button {
    background: var(--glass);
    backdrop-filter: blur(6px) saturate(150%);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #fff;
  }
  .play-button svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); }
  @supports not (backdrop-filter: blur(1px)) {
    .play-button { background: rgba(12, 16, 20, 0.85); }
  }
}

@media (min-width: 768px) { .player-panel { left: 2rem; bottom: 2rem; } }
@media (min-width: 768px) and (pointer: fine) {
  .player-panel { cursor: grab; }
  .player-panel.dragging { cursor: grabbing; user-select: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .player-panel { transition: border-radius 0.2s ease; }
}
.site-footer { padding: 2rem 1rem; text-align: center; display: grid; gap: 0.75rem; position: relative; z-index: 1; }
/* wraps because five links no longer fit one line on a narrow phone */
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center; }
.article, .article-list { max-width: 640px; margin: 0 auto; padding: 1rem; }
.article-card { display: block; padding: 1rem; border-radius: 12px; background: #1a2027; margin: 1rem 0; }
.affiliate-disclosure { font-size: 0.85rem; opacity: 0.8; }
/* SVG rather than ♥/♡ glyphs: U+2665 is emoji-capable, and where a phone draws
   it from the colour emoji font the CSS colour below is ignored entirely. */
.favorite { background: none; border: 0; padding: 0; line-height: 0; color: #fff; cursor: pointer; }
.favorite svg { width: 1.15rem; height: 1.15rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; }
.favorite.is-favorite { color: #ff8fa3; }
.favorite.is-favorite svg { fill: currentColor; }
.related-scenes a { display: inline-block; margin-right: 1rem; }

/* Home: the inn signboard. Tokens scoped to .inn; scene pages are untouched.
   Reference mockup: docs/superpowers/specs/2026-08-03-home-page-inn-signboard-mockup.html */
.inn {
  --night: #0b0e16;
  --parchment: #efe6d3;
  --parchment-dim: #b3ab99;
  --lantern: #e6b06a;
  --plaque-line: rgba(239, 230, 211, 0.28);
  color: var(--parchment);
}
body:has(.inn) { background: #0b0e16; }
.inn .display { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
.inn > :not(.fog):not(.grain) { position: relative; z-index: 1; }

/* drifting fog + film grain backdrops */
.inn .fog { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.inn .fog i {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5;
  background: radial-gradient(circle, rgba(38, 48, 74, 0.65), transparent 65%);
}
.inn .fog i:nth-child(1) { width: 60vw; height: 40vh; top: -8vh; left: -12vw; }
.inn .fog i:nth-child(2) { width: 55vw; height: 45vh; top: 28vh; right: -18vw; opacity: 0.4; }
.inn .fog i:nth-child(3) { width: 70vw; height: 40vh; bottom: -10vh; left: 8vw; opacity: 0.35; }
.inn .grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* arrival: the hanging sign */
.inn .arrival { text-align: center; padding: clamp(2.5rem, 8vh, 5rem) 1.25rem clamp(2rem, 6vh, 4rem); }
.inn .sign-post { display: inline-block; position: relative; padding-top: 46px; }
.inn .sign-post::before, .inn .sign-post::after {
  content: ""; position: absolute; top: 0; width: 1px; height: 44px;
  background: linear-gradient(var(--plaque-line), rgba(239, 230, 211, 0.12));
}
.inn .sign-post::before { left: 22%; }
.inn .sign-post::after { right: 22%; }
.inn .sign {
  border: 1px solid var(--plaque-line); border-radius: 10px;
  padding: 1.5rem clamp(1.6rem, 6vw, 3rem) 1.3rem; position: relative;
  background: linear-gradient(180deg, rgba(24, 30, 48, 0.6), rgba(13, 17, 28, 0.85));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(239, 230, 211, 0.1);
}
.inn .sign::after {
  content: ""; position: absolute; inset: 5px; border-radius: 7px;
  border: 1px solid rgba(239, 230, 211, 0.12); pointer-events: none;
}
.inn .est { font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--parchment-dim); margin: 0 0 0.5rem; }
.inn .sign h1 { margin: 0; font-size: clamp(2.4rem, 8vw, 3.8rem); font-weight: 500; letter-spacing: 0.01em; }
.inn .sign h1 em { font-style: italic; color: var(--lantern); text-shadow: 0 0 26px rgba(230, 176, 106, 0.4); }
.inn .open-lamp {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem;
  font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent);
}
.inn .open-lamp::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 30px rgba(127, 184, 164, 0.5);
}
.inn .welcome {
  max-width: 46ch; margin: 2.2rem auto 0; color: var(--parchment-dim);
  font-size: clamp(1rem, 1.8vw, 1.12rem); line-height: 1.7; font-style: italic;
}
.inn .welcome b { color: var(--parchment); font-weight: 500; }

/* the lit rooms */
.inn .rooms {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 1080px; margin: 0 auto; padding: 1rem clamp(1.1rem, 4vw, 2rem) 3rem;
}
.inn .room { position: relative; text-decoration: none; color: var(--parchment); display: block; text-align: center; }
.inn .room-link { color: inherit; text-decoration: none; }
/* The name's link stretches over the whole card, so the card is one click
   target while the favourite button stays outside the anchor. Nesting a button
   inside <a> is invalid HTML and the W3C validator rejects it. */
.inn .room-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.inn .room-window {
  position: relative; border-radius: 46% 46% 14px 14px / 24% 24% 14px 14px; overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(239, 230, 211, 0.2);
  box-shadow: 0 0 0 6px rgba(13, 17, 28, 0.8), 0 10px 60px rgba(230, 176, 106, 0.13), inset 0 0 60px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.inn .room-window img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.92); transition: filter 0.35s ease, transform 0.9s ease;
}
.inn .room-window::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at center 40%, transparent 55%, rgba(11, 14, 22, 0.55) 100%);
}
.inn .room:hover .room-window, .inn .room:has(.room-link:focus-visible) .room-window {
  border-color: rgba(230, 176, 106, 0.55);
  box-shadow: 0 0 0 6px rgba(13, 17, 28, 0.8), 0 14px 90px rgba(230, 176, 106, 0.28), inset 0 0 40px rgba(0, 0, 0, 0.25);
}
.inn .room:hover .room-window img { filter: brightness(1.04); transform: scale(1.03); }
.inn .room-plaque { margin-top: 1rem; }
.inn .plaque-title { display: flex; align-items: center; justify-content: center; gap: 0.55rem; }
.inn .room-plaque h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 500; }
/* above the stretched link so the heart stays clickable */
.inn .favorite { position: relative; z-index: 2; flex: none; padding: 0.35rem; color: var(--parchment-dim); transition: color 0.2s ease; }
.inn .room:hover .favorite { color: var(--parchment); }
.inn .favorite:hover, .inn .favorite.is-favorite { color: #ff8fa3; }
.inn .note { margin: 0.3rem 0 0.75rem; color: var(--parchment-dim); font-style: italic; font-size: 0.92rem; }
.inn .step-inside {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(127, 184, 164, 0.35); border-radius: 999px;
  padding: 0.5rem 1.1rem; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.inn .room:hover .step-inside { background: var(--accent); color: #0b120e; border-color: var(--accent); }

/* house rules + parting line */
.inn .house {
  text-align: center; max-width: 560px; margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) 1.25rem 2rem;
  border-top: 1px solid rgba(239, 230, 211, 0.1);
}
.inn .house h2 { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--parchment-dim); font-weight: 600; margin: 0 0 1.2rem; }
.inn .house ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.inn .house li { font-style: italic; opacity: 0.9; }
.inn .house li::before { content: "\2014  "; color: var(--lantern); font-style: normal; }
.inn .parting { text-align: center; font-style: italic; color: var(--parchment-dim); margin: 0; padding: 1.5rem 1rem 0.5rem; }

.inn a:focus-visible, .inn .favorite:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

@media (prefers-reduced-motion: no-preference) {
  .inn .fog i { animation: inn-drift 26s ease-in-out infinite alternate; }
  .inn .fog i:nth-child(2) { animation-duration: 34s; animation-delay: -8s; }
  .inn .fog i:nth-child(3) { animation-duration: 42s; animation-delay: -16s; }
  @keyframes inn-drift { from { transform: translateX(-4vw); } to { transform: translateX(5vw); } }
  .inn .sign-wrap { animation: inn-sway 7s ease-in-out infinite alternate; transform-origin: top center; }
  @keyframes inn-sway { from { transform: rotate(-0.5deg); } to { transform: rotate(0.6deg); } }
  .inn .open-lamp::before { animation: inn-breathe 3.5s ease-in-out infinite; }
  @keyframes inn-breathe { 50% { box-shadow: 0 0 5px var(--accent), 0 0 14px rgba(127, 184, 164, 0.3); } }
}

@media (max-width: 760px) {
  .inn .rooms { grid-template-columns: 1fr; max-width: 420px; }
  .inn .arrival { padding-top: 3rem; }
}