:root {
  --ink: #120a08;
  --cream: #f6ecd2;
  --accent: #b8302a;                 /* wuzhay's smoke red (sampled) */
  --pool: 21, 15, 15;                /* wuzhay's dark ground, as rgb parts */
  color-scheme: dark;
}
body[data-artwork="behemoth"] {
  --accent: #2c86b4;                 /* behemoth's smoke blue (sampled) */
  --pool: 13, 12, 13;
}

* { box-sizing: border-box; }
/* present for screen readers and crawlers, drawn for nobody (the rooms' nav in index.html) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: "Space Grotesk", system-ui, sans-serif;
  overflow: hidden;
}

.hero {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
/* Company (eyes.js turn with a veil): under the scene, a black ground and a
   picture that fills the screen at low opacity — the artwork's layers fade
   out over it while the girl, in the scene, stays on top. */
.hero > .veil { position: absolute; inset: 0; background: #000; }
.hero > .veil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; display: block; }   /* fitted to the width; a taller window crops it from the bottom, its top always in view */

/* The scene keeps the artwork's aspect ratio and covers the viewport the way
   background-size: cover would, so every layer can be placed in artwork
   coordinates as percentages and stays registered at any window size. */
.scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--scene-w, 100vw);
  height: var(--scene-h, 100vh);
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.scene.ready { opacity: 1; }

/* The girl (and the patch under her) drawn over the plate — eyes.js, from
   assets/explore/geometry.json's girl_home. */
/* the artwork's layers as one group (eyes.js build): faded as one for the Company veil */
.scene > .artwork { position: absolute; inset: 0; }
.scene .figure {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.scene .base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: translateZ(0);            /* its own layer: Chrome left the plate black otherwise (eyes.js, the nudge after decode) */
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* One box per eye: its own alpha mask (the eye opening) clips the moving
   parts so a pupil sliding sideways disappears under the lid, never over it. */
.eye {
  position: absolute;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

.eye > .part {
  position: absolute;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---- Title ----------------------------------------------------------------
   Placed against the viewport like the sketch: left margin ~7 % of the width,
   the three lines centred a little above the middle. The size follows the
   viewport's smaller dimension so it never outgrows a short or narrow window. */
.hero-copy {
  position: absolute;
  left: clamp(24px, 6.5vw, 132px);
  top: 50%;
  transform: translateY(-50.5%);      /* sits lower than centre: a clear gap
                                         under the brand, per the sketch */
  z-index: 1;
  font-size: clamp(36px, min(6vw, 10.7vh), 136px);   /* the title's em */
}
.title {
  margin: 0;
  font-family: "Newsreader", "Times New Roman", Times, serif;
  font-weight: 400;
  font-optical-sizing: auto;          /* the display cut at this size */
  font-size: clamp(36px, min(6vw, 10.7vh), 136px);
  line-height: 0.98;
  letter-spacing: -0.005em;
  color: var(--cream);
  pointer-events: none;
}
.title-line { display: block; }
.breathes {
  font-style: italic;
  color: var(--accent);
  display: inline-block;
  animation: breathe 5.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* Breathing: a slow inhale (brighter, a soft glow) and a
   longer exhale, the way breath is uneven. Opacity never drops far. */
@keyframes breathe {
  0%   { opacity: .72; text-shadow: 0 0 0 transparent; }
  38%  { opacity: 1;   text-shadow: 0 0 .28em color-mix(in srgb, var(--accent) 55%, transparent); }
  52%  { opacity: 1;   text-shadow: 0 0 .28em color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { opacity: .72; text-shadow: 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .breathes { animation: none; opacity: 1; }
}
/* ---- Explore button: an outlined pill under the title, as in the sketch ---- */
/* A touch device (html.mobile, common.js): Wuzhay's artwork, the home alone —
   the Explore button gives way to this line, Company goes; Get App stays */
.desktop-only {
  display: none;
  margin: 0.5em 0 0;
  max-width: 13em;
  font-family: "Newsreader", "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 0.36em;                  /* in title ems */
  line-height: 1.3;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
html.mobile .desktop-only { display: block; }
html.mobile .explore, html.mobile .menu a[href="#company"], html.mobile .menu .menu-dot, html.mobile .review { display: none !important; }
/* on a phone the ink pool under the title grows to cover the title AND the
   line, darker, and the line reads larger (the user's call, 2026-09-23) */
html.mobile .desktop-only { font-size: 0.52em; max-width: 15em; margin-top: 0.7em; }
html.mobile .hero-copy { top: 63%; }             /* lower: the block ends at the cat's head, away from her face */
html.mobile .title-pool {
  top: 63%;
  left: calc(clamp(24px, 6.5vw, 132px) - 2.4em);
  width: 118vw;
  height: 16em;
  transform: translateY(-42%);
  /* the ellipse fits INSIDE the box (radii under the distance to its edges),
     so the gradient reaches nothing before the box ends — an ellipse larger
     than its box is cut by it, a hard line above her eye (2026-09-23) */
  background:
    radial-gradient(ellipse 46% 44% at 40% 48%,
      rgba(var(--pool), .97) 0%,
      rgba(var(--pool), .9) 36%,
      rgba(var(--pool), .55) 64%,
      rgba(var(--pool), 0) 100%);
}

.explore {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  margin-top: 0.42em;                 /* in title ems */
  padding: 0.95em 1.7em;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(13px, 1.15vw, 20px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--cream);
  text-decoration: none;
  border: 2px solid var(--cream);
  border-radius: 999px;
  pointer-events: auto;
  transition: background-color 220ms, color 220ms, transform 220ms;
}
.explore-arrow {
  width: 1.5em;
  height: 0.75em;
  display: block;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.explore:hover, .explore:focus-visible {
  background: var(--cream);
  color: var(--ink);
  outline: none;
}
.explore:hover .explore-arrow, .explore:focus-visible .explore-arrow { transform: translateX(0.25em); }

/* The pool of ink under the title: an ellipse of the artwork's own dark
   ground fading to nothing, so the smoke dims into it with no edge. */
.title-pool {
  position: absolute;
  left: calc(clamp(24px, 6.5vw, 132px) - 1.4em);
  top: 50%;
  width: min(62vw, 7.2em);
  height: 6.9em;
  transform: translateY(-52%);
  font-size: clamp(36px, min(6vw, 10.7vh), 136px);   /* em-sized to the title */
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 50% at 42% 50%,
      rgba(var(--pool), .94) 0%,
      rgba(var(--pool), .82) 34%,
      rgba(var(--pool), .42) 64%,
      rgba(var(--pool), 0) 100%);
}

/* ---- Loading curtain --------------------------------------------------------
   A full-bleed sheet of ink with the brand centred and a hairline beneath it
   (sized by eyes.js to the brand's width) that fills with the download of
   both artworks. On reveal the sheet slides up, the brand glides to its
   header spot, and the page's chrome fades in. ---- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.curtain-bg {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transition: transform 900ms cubic-bezier(.7, 0, .2, 1);
}
.curtain.lift .curtain-bg { transform: translateY(-100%); }
/* ---- The stages (app.js): the Explore and Growth roots sit over the home
   hero, laid out at all times (their stages are BUILT while the curtain is
   down, and an SVG must be laid out to be measured) but shown only when
   active. ---- */
.stage-root {
  position: fixed;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.stage-root.active { visibility: visible; pointer-events: auto; }
#explore { z-index: 5; }
#growth { z-index: 6; }
/* the painting pages' stage: a page that scrolls (its root is the scroller),
   fading in over the Growth room when a painting opens it */
#page { z-index: 7; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity 450ms ease-out, visibility 0s linear 450ms; }
#page.active { opacity: 1; transition: opacity 450ms ease-out; }

/* ---- The one close button of the Explore and Growth stages (top-right):
   back to the home under the drape ---- */
.close {
  position: fixed;
  right: clamp(12px, 2vw, 36px);
  top: clamp(10px, 1.8vw, 28px);
  box-sizing: content-box;            /* the border outside the box */
  width: clamp(38px, 3.2vw, 56px);
  height: clamp(38px, 3.2vw, 56px);
  display: grid;
  place-items: center;
  color: #f4e7cf;                     /* the Growth stage's cream */
  border: 2px solid #f4e7cf;
  border-radius: 50%;
  z-index: 8;
  /* the fade-in on the Explore stage's arrival + the hover motion */
  transition: opacity 600ms ease-out, background-color 200ms, color 200ms, transform 200ms;
}
.close[hidden] { display: none; }
.close.entering { opacity: 0; }
.close svg { width: 46%; height: 46%; display: block; }
.close:hover, .close:focus-visible { background: #f4e7cf; color: #720607; outline: none; transform: rotate(90deg); }

/* ---- The theater drape (velvet in Behemoth's blues): above everything,
   parked above the top edge until a close slides it down over the stage
   (app.js, DRAPE_MS), then on down through the bottom, uncovering the home
   from the top; taller than the viewport so its scalloped hem (cut into
   drape.webp) hangs below the edge when closed ---- */
.drape {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: max(106vh, 100vw * 864 / 1536);
  z-index: 20;
  display: block;
  pointer-events: none;
  transform: translateY(-101%);
  will-change: transform;
}
.drape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }   /* the valance stays in view */
/* its top edge fades once it starts to leave (app.js animates --drape-fade
   from 0, a hard edge, to a soft band) */
@property --drape-fade { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.drape {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--drape-fade, 0%));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--drape-fade, 0%));
}
.brand.brand--curtain {              /* outranks .brand's corner offsets */
  position: fixed;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.loader {
  position: absolute;
  height: 2px;
  transition: opacity 300ms;
}
.curtain.lift .loader { opacity: 0; }
.loader-bar {
  height: 100%;
  background: var(--cream);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 160ms ease-out;
}
/* Nothing but the curtain shows while loading; the header brand stays hidden
   until the curtain brand has landed on it. */
body.loading .hero-copy, body.loading .title-pool, body.loading .menu, body.loading .review,
body.loading .scene { opacity: 0 !important; }
.hero-copy, .title-pool, .menu { transition: opacity 700ms ease-out 350ms; }
.brand:not(.brand--curtain) { visibility: hidden; }
body.revealed .brand:not(.brand--curtain) { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .curtain-bg, .brand--curtain { transition: none !important; }
}
/* Leaving for the Explore stage: the artwork stays (the Explore stage opens
   on it), only the chrome dims; it comes back once the drape has brought the
   home back. */
body.leaving .hero-copy, body.leaving .title-pool,
body.leaving .menu, body.leaving .brand, body.leaving .review {
  opacity: 0 !important;
  transition: opacity 240ms ease-in !important;
}

/* The Company state (app.js goCompany): the title and the Explore button go
   while her scroll is up; the brand and the menu stay. Back home they return
   with the artwork (the transition above). */
body.revealed .brand:not(.brand--curtain) { transition: opacity 700ms ease-out 350ms; }   /* its return, with the title's */
body.company .hero-copy, body.company .title-pool, body.company .brand:not(.brand--curtain),
body.company .review {           /* the review switch sits under the close button and shows on hover: a cream pill flashing there */
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 500ms ease-out !important;
}

/* ---- Brand (top-left): the mark + the wordmark in the presentation face ---- */
.brand {
  position: fixed;
  left: clamp(24px, 6.5vw, 132px);   /* the title's left edge */
  top: clamp(18px, 3vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  color: var(--cream);
  text-decoration: none;
  z-index: 2;
}
.brand-mark {
  width: clamp(34px, 3.2vw, 58px);
  height: auto;
  display: block;
}
.brand-name {
  font-family: "Anton", "Archivo Black", sans-serif;
  font-size: clamp(22px, 2.1vw, 38px);
  letter-spacing: 0.06em;
  line-height: 1;
  transform: translateY(0.04em);
}

/* ---- Menu (bottom-right) ---- */
.menu {
  position: fixed;
  right: clamp(24px, 4vw, 80px);
  bottom: clamp(22px, 4vw, 72px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 40px);
  z-index: 2;
  color: var(--ink);                  /* both artworks put the cream floor here */
}
.menu a {
  position: relative;
  display: inline-grid;               /* the bold ghost reserves the width so
                                         the hover weight change never shifts
                                         the row */
  color: inherit;
  text-decoration: none;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(13px, 1.1vw, 20px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding-bottom: 0.55em;             /* room for the rule */
  transition: font-weight 120ms;
}
.menu a::before {                     /* ghost: same text, bold, invisible */
  content: attr(data-text);
  grid-area: 1 / 1;
  font-weight: 700;
  visibility: hidden;
}
.menu a > span { grid-area: 1 / 1; }  /* the visible text, over the ghost */
.menu a::after {                      /* the hover rule */
  content: "";
  position: absolute;
  left: 0;
  right: 0.18em;                      /* trailing letter-spacing is not text */
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.menu a:hover, .menu a:focus-visible, .menu a[aria-current="page"] { font-weight: 700; outline: none; }
.menu a:hover::after, .menu a:focus-visible::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu-dot {
  width: 0.45em;
  height: 0.45em;
  font-size: clamp(13px, 1.1vw, 20px);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  margin-bottom: 0.55em;              /* align with the text, not the rule */
  opacity: 0.9;
}

.review {
  position: fixed;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
  opacity: 0;                        /* invisible — and inert — unless the pointer has rested on it (eyes.js: 7 s) */
  transition: opacity 200ms;
}
.review.unlocked { opacity: 1; }
.review:not(.unlocked) button { pointer-events: none; }   /* no accidental switch by the public: the buttons take no click until shown */
.review button {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(246, 236, 210, 0.5);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.review button[aria-current="true"] {
  background: var(--cream);
  color: var(--ink);
}