/* ==========================================================================
   NOIR PURR STUDIO — v0.2 · base
   Tokens, accessibility helpers, the brand anchor and placeholder rooms
   (carried over unchanged from v0.1).
   off-white · black · grey · red (red only when it means something)
   ========================================================================== */
:root {
  --offwhite: #f1ede4;
  --paper: #e9e5dc;
  --black: #0a0a0a;
  --ink: #050505;
  --grey: #8a8784;
  --grey-dark: #2a2928;
  --red: #d40f16;
  --red-light: #ff2a2a;
  --font-display: 'Luckiest Guy', 'Arial Black', Impact, sans-serif;
  --font-balloon: 'Patrick Hand', 'Comic Sans MS', 'Chalkboard SE', cursive;
  --font-body: 'Work Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-grotesk: 'Space Grotesk', 'Work Sans', 'Helvetica Neue', Helvetica, sans-serif;

  /* ---- design system tokens (v0.3 · OPERA) ---- */
  --red-deep: #8a0b10;           /* the "controlled" red of large surfaces */
  --grey-panel: #bdb8b0;         /* light grey panels (ink text) */
  --grey-field: #1e1d1c;         /* dark artwork placeholder field */
  --paper-field: #dcd7cd;        /* light artwork placeholder field */

  --radius-small: 18px;
  --radius-medium: 26px;
  --radius-large: 34px;
  --radius-hero: 40px;

  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 32px;
  --space-l: 64px;
  --space-xl: 120px;
  --page-pad: clamp(20px, 4vw, 64px);       /* outer margin of a page / track */
  --page-pad-y: clamp(56px, 8vh, 96px);     /* top/bottom breathing room (clears the brand) */
  --panel-gap: clamp(40px, 6vw, 110px);     /* space between panels */
  --panel-pad: clamp(24px, 3.2vw, 56px);    /* inside a panel */

  --fs-meta: 12px;
  --fs-body: clamp(15px, 1.05vw, 18px);
  --fs-lead: clamp(20px, 1.8vw, 30px);
  --fs-display-m: clamp(40px, 5vw, 84px);
  --fs-display-l: clamp(72px, 10vw, 180px);
  --fs-display-xl: clamp(110px, 22vw, 380px);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .35, 1);
}
@media (max-width: 760px) {
  :root { --radius-small: 14px; --radius-medium: 18px; --radius-large: 24px; --radius-hero: 28px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); color: var(--offwhite); -webkit-text-size-adjust: 100%; }
html.is-locked, html.is-locked body { overflow: hidden; }
body { margin: 0; background: var(--black); font-family: var(--font-body); overscroll-behavior-y: none; }
img { display: block; user-select: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; }

.sr-only, .sr-only-focusable:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- skip link (keyboard / assistive tech only) ---------- */
.skip {
  position: fixed; left: 16px; top: 16px; z-index: 60; padding: 10px 14px;
  background: var(--offwhite); color: var(--black); font: 500 14px/1 var(--font-body);
  text-decoration: none; transform: translateY(-200%);
}
.skip:focus { transform: none; outline: 2px solid var(--red); }

.door-a11y:focus { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 40;
  background: var(--offwhite); color: var(--black); border: 0; padding: 10px 16px; font: 500 14px var(--font-body); }

/* ---------- brand: the first (and persistent) UI ---------- */
.brand {
  position: fixed; top: clamp(16px, 3vw, 34px); right: clamp(16px, 3.2vw, 40px); z-index: 50;
  display: inline-flex; align-items: baseline; gap: .5em;
  font: 400 clamp(13px, 1.15vw, 17px)/1 var(--font-display); letter-spacing: .16em;
  color: var(--offwhite); text-decoration: none; opacity: 0; pointer-events: none;
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.brand.is-on { pointer-events: auto; }
/* in TENET itself the brand would only lead to where you already are: hidden there (it stays in the
   intro, where it skips to TENET, and in every room, where it leads back) */
body.is-home:not(.in-room) .brand { visibility: hidden; pointer-events: none; }
.brand__arrow { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .35s ease, opacity .35s ease; }
.brand:hover .brand__text, .brand:focus-visible .brand__text { color: #fff; }
body.in-room .brand:hover .brand__arrow, body.in-room .brand:focus-visible .brand__arrow,
body:not(.is-home):not(.is-intro) .brand:hover .brand__arrow { max-width: 1.4em; opacity: 1; }
.brand:focus-visible { outline: 1px solid rgba(241,237,228,.5); outline-offset: 6px; }
/* the studio's icon under the name (ROTAS, OPERA: red · SATOR: black, transparent): part of the same link, so it also leads home */
.brand__icon { display: none; }
body.in-rotas .brand__icon--color, body.in-opera .brand__icon--color, body.in-sator .brand__icon--bw { display: block; position: absolute; top: calc(100% + 12px); right: calc(50% - .08em); translate: 50% 0;
  width: clamp(30px, 2.6vw, 42px); height: auto; transition: transform .35s var(--ease-out); }
body.in-rotas .brand:hover .brand__icon, body.in-rotas .brand:focus-visible .brand__icon,
body.in-sator .brand:hover .brand__icon, body.in-sator .brand:focus-visible .brand__icon,
body.in-opera .brand:hover .brand__icon, body.in-opera .brand:focus-visible .brand__icon { transform: translateY(-2px) scale(1.06); }
/* phones: in ROTAS the page fills the screen and the icon would sit on the pictures — not shown there */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  body.in-rotas .brand__icon--color { display: none; }
  /* the page number sits bottom right on the phone's single page: the speaker goes bottom left there */
  body.in-rotas .sound-toggle { right: auto; left: clamp(8px, 2.4vw, 32px); bottom: 8px; }
}

/* a letter mirrored horizontally inside a word (SHOP: the S and the P) — config `mirror`.
   The word's letter-spacing would be mirrored with the letter (it is drawn after the glyph, inside the box) and
   land on its left: so none inside, the same space outside on the right. --ls = the word's letter-spacing */
.mirror-l { display: inline-block; transform: scaleX(-1); letter-spacing: 0; margin-right: var(--ls, 0); }
.hs-label { --ls: .34em; }
.shop__title { --ls: .02em; }

/* ---------- sound on / off (js/core/sound.js): a small speaker, only once in the house ---------- */
.sound-toggle { position: fixed; z-index: 50; right: clamp(12px, 2.4vw, 32px); bottom: clamp(12px, 2.4vw, 30px); width: 48px; height: 48px;
  display: none; place-items: center; padding: 0; border: 0; background: none; color: var(--offwhite); cursor: pointer;
  opacity: .5; transition: opacity .3s ease; -webkit-tap-highlight-color: transparent; }
body.is-home .sound-toggle { display: grid; }
.sound-toggle:hover, .sound-toggle:focus-visible { opacity: 1; outline: none; }
.sound-toggle:focus-visible { box-shadow: 0 0 0 1px rgba(241, 237, 228, .6); border-radius: 50%; }
.sound-toggle svg { width: 30px; height: 30px; overflow: visible; }
.sound-toggle path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .st__body { fill: currentColor; }
.sound-toggle .st__off { display: none; stroke: var(--red); }
.sound-toggle.is-off .st__on { display: none; }
.sound-toggle.is-off .st__off { display: inline; }
body.in-sator .sound-toggle { color: #151413; }
/* waiting for the first gesture (the browser holds the sound back): a quiet invitation, a ring breathing out */
.sound-toggle.is-waiting { opacity: .85; }
.sound-toggle::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid currentColor;
  opacity: 0; pointer-events: none; }
.sound-toggle.is-waiting::after { animation: sound-invite 2.6s ease-out infinite; }
@keyframes sound-invite { 0% { opacity: .55; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(1.45); } }
.rm .sound-toggle.is-waiting::after { animation: none; opacity: .35; transform: none; }

/* ==========================================================================
   ROOMS — v0.1 placeholders
   ========================================================================== */
/* a room is open (SATOR, OPERA, ROTAS, …): the house underneath is covered — pause all its
   animations at once, and stop painting it once the room has faded in (1 s) */
html.deep-room .stage, html.deep-room [data-tenet] { visibility: hidden !important; }   /* opened straight into a room */
body.in-room .stage *, body.in-room [data-tenet] * { animation-play-state: paused !important; }
body.in-room .stage, body.in-room [data-tenet] { visibility: hidden; transition: visibility 0s 1.2s; }
.room { position: fixed; inset: 0; z-index: 30; background: #070707; opacity: 0; transition: opacity .45s ease; overflow: hidden; }
.room.is-open { opacity: 1; }
.room[hidden] { display: none; }
.room__inner { position: absolute; inset: 0; }
.room__word {
  position: absolute; margin: 0; font: 400 clamp(120px, 27vw, 520px)/.78 var(--font-display);
  letter-spacing: .02em; color: var(--offwhite); white-space: nowrap; outline: none;
}
.room--sator .room__word { left: -1.5vw; bottom: -5vw; }
.room--arepo .room__word { right: -3vw; top: 8vh; color: #1b1a19; -webkit-text-stroke: 1px rgba(241,237,228,.4); }
.room--opera .room__word { right: 3vw; top: 50%; transform: translateY(-50%); }
.room--rotas .room__word { right: -2vw; bottom: -4vw; }
.room--rotas .room__word span { display: inline-block; transform: rotate(180deg); transform-origin: 50% 55%; }
.room__note {
  position: absolute; left: clamp(16px, 4vw, 56px); top: clamp(20px, 4vw, 42px); margin: 0;
  font: 400 13px/1.4 var(--font-body); letter-spacing: .08em; color: var(--grey);
}
.room__back {
  position: absolute; left: clamp(16px, 5vw, 72px); top: 50%; transform: translateY(-50%);
  width: clamp(54px, 5vw, 76px); padding: 0; border: 0; background: none; color: var(--grey); cursor: pointer;
}
.room__back svg { display: block; width: 100%; height: auto; transition: color .3s; }
.room__back:hover, .room__back:focus-visible { color: var(--offwhite); outline: none; }
.room__backword {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); opacity: 0;
  font: 400 13px/1 var(--font-display); letter-spacing: .32em; padding-left: .32em; color: var(--offwhite);
  transition: opacity .35s;
}
.room__back:hover .room__backword, .room__back:focus-visible .room__backword { opacity: 1; }

.noscript { position: fixed; inset: 0; display: grid; place-content: center; font: 400 20px var(--font-body); }