/* Shared immersive home and laboratory presentation. */
.stage, .grain { display:none; }
html, body { background:#030609; }
.field-world { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#000; }
.field-photo { position:absolute; left:50%; top:50%; width:min(115vw,114svh); aspect-ratio:1; transform:translate(-50%,-50%); will-change:transform,opacity; }
.field-photo img { width:100%; height:100%; display:block; }
.field-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.field-shade { position:absolute; inset:0; background:#000; opacity:0; }
.field-edge { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 46%,transparent 40%,rgba(0,0,0,.24) 100%); }
/* Readability is handled by the continuous fixed field-shade. A section-sized
   scrim would leave a rectangular trailing edge over the photographic entrance. */
.approach__stage { background:none; }
.field-station { position:relative; height:720svh; }
.field-caption { position:sticky; top:0; height:100svh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:8vh var(--gutter,5vw); width:100%; opacity:0; pointer-events:none; }
.field-caption { background:linear-gradient(90deg,rgba(0,0,0,.64),transparent 46%); }
.field-caption__inner { width:min(330px,30vw); margin-top:18vh; }
.field-caption .mark { font-size:.65rem; letter-spacing:.18em; margin-bottom:22px; color:#91a4b2; }
.field-caption h2 { font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.3vw,50px); line-height:1.04; letter-spacing:-.025em; text-wrap:balance; color:#e5ebee; }
.field-caption h2 em { display:block; font-style:italic; color:#afccdf; }
.field-caption a { display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:#b7c9d4; margin-top:24px; padding-bottom:5px; border-bottom:1px solid #547184; pointer-events:auto; }
.field-caption a:focus-visible { outline:2px solid #e6eef2; outline-offset:6px; }
.field-caption[aria-hidden="true"] a { pointer-events:none; }
.field-caption__line { width:46px; height:1px; background:#637e90; margin-bottom:28px; transform-origin:left; }
.field-fallback { display:none; }
.pupil-room { min-height:0; padding-bottom:clamp(32px,4vw,56px); }
.pupil-room__seal { isolation:isolate; }
.pupil-room__seal::before { content:""; position:absolute; inset:-6%; border-radius:50%; background:#000; z-index:-1; }
.house-band { padding-block:32px; background:#000; }
.foot { padding-block:32px 24px; background:#000; }
.foot__grid, .foot__base { margin-top:32px; }
@media(max-width:900px) {
  .field-caption { justify-content:flex-end; padding:0 7vw 10svh; }
  .field-caption { background:linear-gradient(0deg,rgba(0,0,0,.86),transparent 62%); }
  .field-caption__inner { width:min(440px,85vw); margin-top:0; }
  .field-caption h2 { font-size:clamp(29px,6vw,43px); max-width:14ch; }
  .field-caption__line { margin-bottom:16px; }
  .field-caption .mark { margin-bottom:12px; }
}
/* Fit the journey to a portrait screen instead of shrinking the wide view. */
@media(max-width:899px) and (max-aspect-ratio:17/20) {
  .field-photo { width:min(148vw,102svh); }
  .hero { min-height:72svh; }
  .approach { min-height:140svh; }
  .field-station { height:470svh; }
  .field-caption { padding-bottom:7svh; }
  .field-caption h2 { font-size:clamp(28px,7vw,36px); max-width:17ch; }
  .field-caption__line { margin-bottom:12px; }
}
.field-unavailable .field-station { height:auto; }
.field-unavailable .field-caption { position:relative; opacity:1; height:auto; padding:80px 7vw; }
.field-unavailable .field-caption__inner { width:min(500px,85vw); margin:0; }
.field-unavailable .field-fallback { display:block; width:180px; border-radius:50%; margin-bottom:24px; }

.field-unavailable .field-canvas { display:none; }
.field-unavailable .field-photo { opacity:.2!important; transform:translate(-50%,-50%)!important; }
.field-unavailable .field-shade { opacity:.4!important; }

/* Keep mobile navigation independent of the filtered WebGL compositing layers.
   A solid scrim also keeps the controls readable over the brightest fibers. */
@media(max-width:880px) {
  .hdr {
    position:fixed;
    inset:0 0 auto;
    width:100%;
    max-width:100%;
    height:calc(var(--hdr) + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px);
    padding-left:max(var(--pad),env(safe-area-inset-left,0px));
    padding-right:max(var(--pad),env(safe-area-inset-right,0px));
    z-index:100;
    isolation:isolate;
    background:rgba(7,13,17,.96);
    border-bottom:1px solid rgba(173,201,216,.15);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .hdr .brand { min-width:0; }
  .hdr .nav-b { flex-shrink:0; }
}

/* ============================================================
   CALM MODE — html[data-calm="1"]

   The journey as still pictures (lab/ojo-estaciones/calm.js decides
   which one is showing and fades between them). The station no longer
   needs the length of a camera move, only room for two stills, and its
   caption stays reachable while its still is not on screen.
   ============================================================ */
html[data-calm="1"] .field-station{ height:250svh; }
html[data-calm="1"] .field-caption[data-unseen] a{ pointer-events:none; }