:root {
  --mx: 0; --my: 0;
  --back-opacity: 1; --back-x: 0px; --back-y: 0px; --back-scale: 0.76;
  --bazaar-y: 20vh;
  --blur-px: 0px; --back-brightness: 1;
  --bazaar-blur-px: 0px; --bazaar-brightness: 1; --bazaar-saturation: 1;
  --shade-opacity: 1; --shade-z: 2;
  --shade-top-alpha: 0; --shade-mid-alpha: 0; --shade-bottom-alpha: 0;
  --blur-tint: 18, 16, 14;
  --title-y: 0px; --title-scale: 1; --title-opacity: 1;
  --bridge-x: -50%; --bridge-y: 0px; --bridge-bottom: 5vh;
  --bridge-width: 67.2vw; --bridge-scale: 1.02;
  --split-left-x: calc(-50% - 27vw);  --split-left-y: 0px;  --split-left-scale: 1;
  --split-right-x: calc(-50% + 27vw); --split-right-y: 0px; --split-right-scale: 1;
  --frame2-opacity: 0; --frame2-x: -50%; --frame2-y: -50%; --frame2-scale: 1.06;
  --bridge-z: 0px; --split-z: 0px; --frame2-z: 0px;
  --serv-opacity: 0; --serv-spread: 27vw; --serv-y: 0px; --serv-scale: 1; --serv-z: 0px;
  --digi-opacity: 0; --digi-spread: 27vw; --digi-y: 0px; --digi-scale: 1; --digi-z: 0px;
  --bridge-opacity: 1; --split-opacity: 1; --plate-dim: 1;
  --panel2-events: none; --panel3-events: none;
  --intro-copy-y: 0px; --intro-copy-opacity: 1;
  --panel1-opacity: 0; --panel1-y: calc(-50% + 58px); --panel1-events: none;
  --panel2-opacity: 0; --panel2-y: calc(-50% + 58px);
  --panel3-opacity: 0; --panel3-y: calc(-50% + 58px);
  --sights-opacity: 0; --sights-controls-opacity: 0; --sights-y: 0px;
  --sights-band-opacity: 0;
  --sights-enter-x: 420vw; --sights-visibility: hidden;
  --sights-shift: 0px; --sights-scale: 1; --sights-enter-shift: 0px;
  --sights-top: clamp(112px, 19vh, 220px);
  --sights-screen-top: clamp(112px, 19vh, 220px);
  --sight-card-h: 424px;

  --ink: #16130f;
  --paper: #f7f2ea;
  --accent: #d32f2f;
  --shadow: rgba(0, 0, 0, 0.42);

  /* One serif for everything, Latin included — so a line like "創業49周年" or
     "〒101-0021 東京都…" is never split across two typefaces mid-run. */
  --font-display: var(--font-ja);
  --font-ja: "Hiragino Mincho ProN", "Hiragino Mincho Pro",
             "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP",
             "Songti SC", "MS PMincho", serif;

  font-family: var(--font-ja);
  color: var(--paper);
  background: #0d0c0b;
  letter-spacing: 0.01em;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: #0d0c0b;
       scrollbar-gutter: stable; }
body { min-height: 100%; margin: 0; overflow-x: clip; background: #0d0c0b; }
button { border: 0; font: inherit; }
.site-shell { min-height: 100vh; }

/* ---------- scroll rig ---------- */

.cinema-scroll { position: relative; height: calc(100vh + 4600px); }

.stage {
  position: sticky; top: 0;
  height: 100vh; min-height: 620px;
  overflow: hidden; isolation: isolate;
  background: #0d0c0b;
}

.world, .back-stack, .sky-img, .sky-scrim, .shade, .scene-img, .scene-plate, .stage-vignette,
.site-header, .sights-slider, .sights-controls, .sights-label, .hero-title,
.intro-copy, .story-panel { position: absolute; }

.world {
  inset: 0; overflow: hidden; background: #16130f;
  /* the scene is a camera: plates sit at different depths and the vanishing point
     tracks the pointer, so the layers separate with real parallax */
  perspective: 1500px;
  perspective-origin: calc(50% + var(--mx, 0) * 16%) calc(50% + var(--my, 0) * 11%);
}

/* ---------- header ---------- */

.site-header {
  z-index: 10; top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 32px; padding: 32px;
  color: rgba(247, 242, 234, 0.86);
  pointer-events: auto;
}

.site-logo {
  justify-self: start;
  display: inline-flex; align-items: center;
  text-decoration: none;
}

.site-logo img {
  display: block; width: auto; height: 30px;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45));
}

.site-nav { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2vw, 40px); }

.site-nav a, .language-switcher {
  color: rgba(247, 242, 234, 0.86);
  font-weight: 700; line-height: 1;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.site-nav a {
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none; white-space: nowrap;
  transition: color 220ms ease;
}
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; }

.language-switcher {
  justify-self: end;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0; background: transparent;
  font-size: 14px; letter-spacing: 0.12em;
  cursor: pointer;
}
.language-switcher span { display: inline-flex; line-height: 1; }

/* ---------- scene layers ---------- */

.scene-img {
  display: block; user-select: none; -webkit-user-drag: none;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

.sky-img {
  z-index: 0; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* scaled a touch so the blur's soft edge stays off-screen */
  transform: scale(1.06);
  filter: blur(calc(var(--blur-px) + 10px))
          brightness(var(--back-brightness)) brightness(0.9) saturate(0.94);
}

/* permanent cinematic scrim: TUG's renders are bright, cream type needs a floor */
.sky-scrim {
  z-index: 0; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(13, 12, 11, 0.78) 0%,
      rgba(13, 12, 11, 0.34) 30%,
      rgba(13, 12, 11, 0.14) 54%,
      rgba(13, 12, 11, 0.62) 100%),
    radial-gradient(122% 82% at 50% 30%, rgba(13, 12, 11, 0) 38%, rgba(13, 12, 11, 0.6) 100%);
}

.back-stack {
  z-index: 1; top: 0; bottom: 0; left: -3vw; right: -3vw;
  opacity: var(--back-opacity);
  transform: translate3d(var(--back-x), var(--back-y), 0) scale(var(--back-scale));
  transform-origin: 50% 100%;
  will-change: transform, filter, opacity;
}

.back-img {
  inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(var(--blur-px)) brightness(var(--back-brightness));
}

.back-bazaar {
  top: auto; bottom: 0; left: 48%; right: auto;
  width: 112%; height: auto; object-fit: contain;
  z-index: 3; opacity: 0.92;
  /* held slightly out of focus so the foreground plates read as a separate plane */
  filter: blur(calc(var(--bazaar-blur-px) + 6px)) brightness(var(--bazaar-brightness))
          brightness(0.84) saturate(var(--bazaar-saturation));
  /* scale from the floor, not the centre — centre-scaling lifted the image's
     bottom edge into frame and left a dead band under it */
  transform-origin: 50% 100%;
  transform: translate3d(-50%, var(--bazaar-y), 0) scale(0.86);
}

/* WORKS gets its own backdrop so the rail doesn't sit on the previous beat's photo.
   The source is monochrome, so it is warmed to sit inside the site's palette. */
.back-works {
  inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 3; opacity: var(--works-bg-opacity, 0);
  filter: blur(9px) sepia(0.42) saturate(1.5) hue-rotate(-14deg) brightness(0.42);
  transform: scale(1.08);
  will-change: opacity;
}

/* ---------- photo plates (rectangular renders instead of cutout PNGs) ---------- */

.scene-plate {
  margin: 0; overflow: hidden;
  border-radius: 0;
  pointer-events: none;
  will-change: transform, opacity, filter;
  box-shadow: 0 44px 96px rgba(0, 0, 0, 0.52);
}

.scene-plate img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
  /* plates dim with the same ramp as the back layers so panel copy stays readable */
  filter: brightness(var(--plate-dim));
}

/* the flanking pairs come into focus as they open, on top of the shared dim */
.splitframe-plate img { filter: brightness(var(--plate-dim)) blur(var(--split-blur, 0px)); }
.servframe-plate img  { filter: brightness(var(--plate-dim)) blur(var(--serv-blur, 0px)); }
.digiframe-plate img  { filter: brightness(var(--plate-dim)) blur(var(--digi-blur, 0px)); }

.scene-plate::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(247, 242, 234, 0.18);
  border-radius: inherit; pointer-events: none;
}

.bridge-plate {
  z-index: 4; opacity: var(--bridge-opacity);
  left: 50%; bottom: var(--bridge-bottom);
  width: var(--bridge-width);       /* full bleed from the very top of the page */
  aspect-ratio: 16 / 9;
  /* grows to a full-bleed backdrop during the story beats so no second photo shows behind */
  min-height: var(--bridge-min-h, 0px);
  transform: translate3d(var(--bridge-x), var(--bridge-y), var(--bridge-z, 0px))
             rotateY(calc(var(--mx, 0) * 2.4deg))
             rotateX(calc(var(--my, 0) * -1.7deg))
             scale(var(--bridge-scale));
  transform-origin: 50% 48%;
}

.splitframe-plate {
  z-index: 6; opacity: var(--split-opacity);
  left: 50%; bottom: 19vh;
  width: min(26vw, 400px);
  aspect-ratio: 1 / 1;
}

.splitframe-left {
  transform: translate3d(var(--split-left-x), var(--split-left-y), var(--split-z, 0px))
             rotateY(calc(var(--mx, 0) * 3.2deg))
             scale(var(--split-left-scale));
  transform-origin: 21% 52%;
}

.splitframe-right {
  transform: translate3d(var(--split-right-x), var(--split-right-y), var(--split-z, 0px))
             rotateY(calc(var(--mx, 0) * 3.2deg))
             scale(var(--split-right-scale));
  transform-origin: 79% 52%;
}

.frame-two-plate {
  z-index: 5;
  filter: none !important; backdrop-filter: none;
  left: 50%; top: 50%;
  width: min(122vw, 2160px);
  aspect-ratio: 16 / 9;
  border-radius: 0;
  opacity: var(--frame2-opacity);
  transform: translate3d(var(--frame2-x), var(--frame2-y), var(--frame2-z, 0px))
             rotateY(calc(var(--mx, 0) * 2.4deg))
             rotateX(calc(var(--my, 0) * -1.7deg))
             scale(var(--frame2-scale));
  transform-origin: 50% 48%;
}
.frame-two-plate::after { border-color: transparent; }
/* the reveal shot carries panel copy, so it needs a darker floor than the side plates */
.frame-two-plate img { filter: brightness(0.58) saturate(0.92) !important; }

/* flanking plates for the SERVICE beat — same language as the hero triptych */
.servframe-plate {
  z-index: 7; opacity: var(--serv-opacity, 0);
  left: 50%; bottom: 19vh;
  width: min(26vw, 400px);          /* same as .splitframe-plate */
  aspect-ratio: 1 / 1;
}

.servframe-left {
  transform: translate3d(calc(-50% - var(--serv-spread, 27vw)), var(--serv-y, 0px), var(--serv-z, 0px))
             rotateY(calc(var(--mx, 0) * 3.4deg))
             scale(var(--serv-scale, 1));
  transform-origin: 21% 52%;
}

.servframe-right {
  transform: translate3d(calc(-50% + var(--serv-spread, 27vw)), var(--serv-y, 0px), var(--serv-z, 0px))
             rotateY(calc(var(--mx, 0) * 3.4deg))
             scale(var(--serv-scale, 1));
  transform-origin: 79% 52%;
}

/* flanking plates for the DIGITAL beat — same language as SERVICE's pair */
.digiframe-plate {
  z-index: 7; opacity: var(--digi-opacity, 0);
  left: 50%; bottom: 19vh;
  width: min(26vw, 400px);
  aspect-ratio: 1 / 1;
}

.digiframe-left {
  transform: translate3d(calc(-50% - var(--digi-spread, 27vw)), var(--digi-y, 0px), var(--digi-z, 0px))
             rotateY(calc(var(--mx, 0) * 3.4deg))
             scale(var(--digi-scale, 1));
  transform-origin: 21% 52%;
}

.digiframe-right {
  transform: translate3d(calc(-50% + var(--digi-spread, 27vw)), var(--digi-y, 0px), var(--digi-z, 0px))
             rotateY(calc(var(--mx, 0) * 3.4deg))
             scale(var(--digi-scale, 1));
  transform-origin: 79% 52%;
}

/* ---------- sights slider (WORKS) ---------- */

/* A rail bed the width of the screen, level with the tiles. It lands before the
   cards fly in, so the beat opens with a graphic rather than empty backdrop.
   Same z as the slider but earlier in the DOM, so the tiles paint over it. */
.sights-band {
  position: absolute; z-index: 4;
  left: -6vw; right: -6vw; top: var(--sights-top);
  height: var(--sight-card-h);
  background: linear-gradient(90deg,
    rgba(13, 12, 11, 0.82) 0%, rgba(13, 12, 11, 0.66) 42%,
    rgba(13, 12, 11, 0.38) 76%, rgba(13, 12, 11, 0.08) 100%);
  opacity: var(--sights-band-opacity);
  transform: scale(var(--sights-scale));
  transform-origin: 0 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* directional cue: the rail arrives from the right */
.sights-band::before {
  content: ""; position: absolute; top: 50%; right: calc(5vw + 26px);
  width: 52px; height: 1px; margin-top: -1px;
  background: linear-gradient(90deg, rgba(211, 47, 47, 0), var(--accent));
  animation: railRule 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sights-band::after {
  content: "→";
  position: absolute; top: 50%; right: 5vw;
  color: var(--accent);
  font-size: 23px; font-weight: 600; line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  transform: translateY(-50%);
  animation: railNudge 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes railNudge {
  0%, 100% { transform: translate(0, -50%); opacity: 0.78; }
  50%      { transform: translate(11px, -50%); opacity: 1; }
}

@keyframes railRule {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .sights-band::before, .sights-band::after { animation: none; }
}

/* z4: above .back-bazaar (z3). The original's bazaar layer is a bottom-anchored
   cutout that only grazes the cards; ours is a full-frame photo and would bury them. */
.sights-slider {
  z-index: 4; left: 0; right: 0; top: var(--sights-top);
  padding: 0; opacity: 1;
  visibility: var(--sights-visibility);
  transform: translate3d(var(--sights-enter-x), var(--sights-y), 0) scale(var(--sights-scale));
  transform-origin: 0 0;
  pointer-events: auto;
  will-change: transform;
}

.sights-track {
  display: flex; gap: clamp(16px, 1.15vw, 24px); align-items: stretch;
  /* --sights-enter-shift is a purely decorative extra offset: a filter switch
     nudges it positive then clears it in the same tick, so the new result set
     visibly arrives from the right without touching --sights-shift itself —
     the real card index the infinite-loop math tracks never moves. */
  transform: translate3d(calc(var(--sights-shift) - 18vw + var(--sights-enter-shift)), 0, 0);
  transition: transform 1050ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.sights-track.is-jumping { transition: none; }

/* photo-led editorial tile: the work is the hero, copy sits over it */
.sight-card {
  position: relative;
  flex: 0 0 clamp(268px, 21vw, 324px);
  height: var(--sight-card-h);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 242, 234, 0.2);
  border-radius: 0;
  background: #16130f;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
  cursor: pointer; pointer-events: auto; user-select: none;
  transition: border-color 420ms ease, box-shadow 420ms ease,
              transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  /* the card is the camera: the photo is pushed toward the lens on hover, and the
     vanishing point follows the cursor, so it reads as moving into the space
     rather than the picture simply getting bigger */
  perspective: 780px;
  perspective-origin: calc(50% + var(--cx, 0) * 26%) calc(50% + var(--cy, 0) * 26%);
}

.sight-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.74) saturate(0.94);
  transform: scale(1.02) translateZ(0);
  transition: transform 780ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease;
  pointer-events: none;
}

/* legibility floor for the copy at the foot of the tile */
.sight-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(13, 12, 11, 0.5) 0%, rgba(13, 12, 11, 0.08) 26%,
    rgba(13, 12, 11, 0.34) 56%, rgba(13, 12, 11, 0.9) 100%);
}
.sight-card::before { content: none; }

/* selected: a quiet lift, so it reads as "current" without looking hovered */
.sight-card.is-active .sight-photo {
  transform: scale(1.02) translateZ(26px);
  filter: brightness(0.82) saturate(0.98);
}
.sight-card.is-active {
  border-color: rgba(247, 242, 234, 0.42);
  box-shadow: 0 30px 66px rgba(0, 0, 0, 0.48);
}

/* hover: the viewpoint travels ~100px into the frame */
.sight-card:hover .sight-photo,
.sight-card:focus-visible .sight-photo {
  transform: scale(1.02) translateZ(104px);
  filter: brightness(1.18) saturate(1.06);
}
.sight-card:hover, .sight-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(247, 242, 234, 0.68);
  box-shadow: 0 40px 84px rgba(0, 0, 0, 0.58);
}
.sight-card:focus-visible { outline: none; border-color: var(--paper); }

.sight-num, .sight-kicker, .sight-card h3, .sight-card p {
  position: absolute; z-index: 2; text-shadow: none;
}

.sight-num {
  top: 22px; right: 22px;
  color: rgba(247, 242, 234, 0.62);
  font-size: 12px; font-weight: 500; line-height: 1;
  letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
}

.sight-kicker {
  top: 22px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--paper);
  font-size: 10px; font-weight: 700; line-height: 1;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.sight-kicker::before {
  content: ""; width: 16px; height: 1px; background: var(--accent);
}

.sight-card h3 {
  left: 22px; right: 22px;
  bottom: calc(22px + (14px * 1.62 * 2) + 12px);
  margin: 0; color: var(--paper);
  font-size: 21px; font-weight: 600; line-height: 1.25;
  letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sight-card p {
  left: 22px; right: 22px; bottom: 22px;
  margin: 0; color: rgba(247, 242, 234, 0.74);
  font-size: 14px; font-weight: 400; line-height: 1.62;
  display: -webkit-box; max-height: calc(2em * 1.62);
  overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

/* screen-space header row above the rail */
.sights-label {
  z-index: 5; left: 48px; right: 188px;
  top: calc(var(--sights-screen-top) - 132px);
  height: 50px;
  display: flex; align-items: center; gap: 18px;
  margin: 0;
  opacity: var(--sights-controls-opacity);
  transform: translate3d(0, var(--sights-y), 0);
  pointer-events: none;
}

.sights-label-en {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: 0.03em;
}

.sights-label-ja {
  color: rgba(247, 242, 234, 0.6);
  font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.22em;
}

.sights-rule { flex: 1; height: 1px; background: rgba(247, 242, 234, 0.22); }

.sights-controls {
  z-index: 5; left: auto; right: 48px;
  top: calc(var(--sights-screen-top) - 132px);
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  opacity: var(--sights-controls-opacity);
  transform: translate3d(0, var(--sights-y), 0);
  pointer-events: none;
  will-change: transform, opacity;
}
.sights-controls.is-ready { pointer-events: auto; }

.sight-nav {
  width: 50px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(247, 242, 234, 0.34);
  border-radius: 999px;
  color: var(--paper); background: rgba(13, 12, 11, 0.24);
  backdrop-filter: blur(10px);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: background 260ms ease, color 260ms ease, border-color 260ms ease;
}
.sight-nav:hover {
  color: var(--ink); background: var(--paper); border-color: var(--paper);
}

/* ---------- hero title ---------- */

.hero-title {
  z-index: 7; left: 50%; top: clamp(74px, 11vh, 138px);
  width: min(94vw, 1780px); margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 8.4vw, 9.4rem); font-weight: 600; line-height: 0.92;
  letter-spacing: 0.015em;
  text-align: center; text-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  transform: translate3d(-50%, var(--title-y), 0) scale(var(--title-scale));
  opacity: var(--title-opacity);
  will-change: transform, opacity;
}

/* ---------- shade ---------- */

.shade {
  inset: 0; z-index: var(--shade-z);
  pointer-events: none; opacity: var(--shade-opacity);
  background: linear-gradient(180deg,
    rgba(var(--blur-tint), var(--shade-top-alpha)) 0%,
    rgba(var(--blur-tint), var(--shade-mid-alpha)) 48%,
    rgba(var(--blur-tint), var(--shade-bottom-alpha)) 100%);
}

/* ---------- intro copy ---------- */

/* foreground vignette: keeps the lower-third copy legible over bright renders */
.stage-vignette {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(13, 12, 11, 0) 44%,
    rgba(13, 12, 11, 0.5) 74%,
    rgba(13, 12, 11, 0.9) 100%);
}

.intro-copy {
  z-index: 9; left: 50%; bottom: clamp(44px, 8vh, 96px);
  width: min(640px, calc(100vw - 40px));
  text-align: center;
  transform: translate3d(-50%, var(--intro-copy-y), 0);
  opacity: var(--intro-copy-opacity);
  will-change: transform, opacity;
}

.intro-copy p {
  margin: 0 auto; max-width: 640px;
  color: var(--paper);
  font-size: 1.02rem; font-weight: 500; line-height: 1.85;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

.intro-copy p em {
  display: block; margin-bottom: 4px;
  font-family: var(--font-ja);
  font-size: 1.2rem; font-style: normal; font-weight: 600;
  letter-spacing: 0.08em;
}

.hero-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; }

.hero-tags span {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 26px;
  color: var(--paper);
  border-radius: 0;
  background: linear-gradient(180deg,
    rgba(13, 12, 11, 0.3) 0%, rgba(13, 12, 11, 0.72) 100%);
  backdrop-filter: blur(6px);
  font-size: 0.92rem; font-weight: 500; letter-spacing: 0.06em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  box-shadow: none;
}

/* ---------- story panels ---------- */

.story-panel {
  z-index: 10; left: 50%; top: 39%;
  width: min(760px, calc(100vw - 42px));
  text-align: center; pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
}

/* soft scrim so panel copy reads over bright interior photography */
.story-panel::before {
  content: ""; position: absolute; inset: -20% -16%; z-index: 0;
  background: radial-gradient(66% 66% at 50% 46%,
    rgba(13, 12, 11, 0.9) 0%, rgba(13, 12, 11, 0.74) 38%,
    rgba(13, 12, 11, 0.32) 66%, rgba(13, 12, 11, 0) 84%);
  pointer-events: none;
}

.story-panel h2, .story-panel p, .story-panel .note-button {
  position: relative; z-index: 1;
}

.story-panel h2 {
  margin: 0; color: var(--paper);
  font-family: var(--font-ja);
  font-size: clamp(2.1rem, 4.1vw, 3.6rem); font-weight: 600; line-height: 1.32;
  letter-spacing: 0.04em;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 16px 38px var(--shadow);
}

.story-panel p {
  width: min(560px, 100%); margin: 26px auto 0;
  color: var(--paper);
  font-size: 1.02rem; font-weight: 500; line-height: 1.85;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72), 0 2px 20px rgba(0, 0, 0, 0.6);
}

.story-panel-concept {
  top: 39%;
  opacity: var(--panel1-opacity);
  transform: translate3d(-50%, var(--panel1-y), 0);
}
.story-panel-concept .note-button { pointer-events: var(--panel1-events); }

/* The only beat with flanking plates. The heading clears them vertically, so it keeps
   the full column; only the body text is solved from the gap between the photos. */
.story-panel-bridge {
  width: min(760px, calc(100vw - 42px));
  top: 39%;
  opacity: var(--panel2-opacity);
  transform: translate3d(-50%, var(--panel2-y), 0);
}

.story-panel-bazaar {
  top: 39%;
  opacity: var(--panel3-opacity);
  transform: translate3d(-50%, var(--panel3-y), 0);
}

.note-button {
  min-height: 50px; margin-top: 28px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 30px; border-radius: 0;
  color: var(--paper);
  background: linear-gradient(180deg,
    rgba(13, 12, 11, 0.3) 0%, rgba(13, 12, 11, 0.72) 100%);
  backdrop-filter: blur(6px);
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  box-shadow: none;
  /* panels are invisible for most of the scroll — don't let them swallow clicks */
  pointer-events: none; cursor: pointer;
  transition: transform 220ms ease, background 220ms ease;
}
.story-panel-bridge .note-button { pointer-events: var(--panel2-events); }
/* wide enough to run under the flanking photos on either side — the panel
   scrim already darkens that area, so the text stays readable over them */
.story-panel-bridge p { width: min(680px, calc(100vw - 64px)); }
.story-panel-bazaar .note-button { pointer-events: var(--panel3-events); }
.note-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg,
    rgba(13, 12, 11, 0.55) 0%, rgba(13, 12, 11, 0.9) 100%);
}
.note-button span:first-child { font-size: 1.15rem; line-height: 1; color: var(--accent); }

/* ---------- footer ---------- */

.site-foot {
  position: relative; z-index: 12;
  padding: clamp(72px, 12vh, 140px) clamp(24px, 5vw, 88px) 56px;
  background: #0d0c0b;
  border-top: 1px solid rgba(247, 242, 234, 0.12);
}

.foot-inner { max-width: 1180px; margin: 0 auto; }

.foot-lead {
  display: grid; grid-template-columns: minmax(240px, 420px) minmax(240px, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
}

.foot-kicker {
  margin: 0 0 22px;
  color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
}

.foot-lead h2 {
  margin: 0; color: var(--paper);
  font-family: var(--font-ja);
  font-size: clamp(0.85rem, 1.25vw, 1.06rem); font-weight: 600; line-height: 2;
  letter-spacing: 0.03em;
}

/* line-by-line curtain reveal when the footer scrolls into view */
.foot-line { display: block; overflow: hidden; }
.foot-line > span { display: block; }
.site-foot.is-armed .foot-line > span {
  transform: translateY(118%);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-foot.is-armed.is-revealed .foot-line > span { transform: none; }
.site-foot.is-armed.is-revealed .foot-line:nth-child(2) > span { transition-delay: 110ms; }
.site-foot.is-armed.is-revealed .foot-line:nth-child(3) > span { transition-delay: 220ms; }

.site-foot.is-armed .foot-mail {
  opacity: 0; transform: translateY(16px);
  transition: opacity 760ms ease 400ms,
              transform 760ms cubic-bezier(0.22, 1, 0.36, 1) 400ms,
              color 220ms ease;
}
.site-foot.is-armed.is-revealed .foot-mail { opacity: 1; transform: none; }

.foot-mail {
  display: inline-block; margin-top: 22px;
  color: rgba(247, 242, 234, 0.82);
  font-size: 1rem; letter-spacing: 0.06em;
  text-decoration: none; border-bottom: 1px solid rgba(247, 242, 234, 0.36);
  padding-bottom: 3px;
}
.foot-mail:hover { color: #fff; }

.foot-map {
  --tiltx: 0deg; --tilty: 0deg;
  position: relative; display: block; overflow: hidden;
  height: clamp(200px, 22vw, 260px);
  background: #131110;
  border: 1px solid rgba(247, 242, 234, 0.14);
  text-decoration: none;
  perspective: 560px;
}
.foot-map-frame-wrap {
  display: block; width: 100%; height: 100%;
  transform: rotateX(var(--tiltx)) rotateY(var(--tilty)) scale(1.12);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
  /* a real map (so it actually reads as a map), recoloured into the site's
     dark/monochrome palette via the standard invert-based dark-map trick
     rather than Google's own light, multicoloured tiles */
  filter: grayscale(1) invert(92%) contrast(88%) brightness(94%) hue-rotate(180deg);
}
.foot-map:hover .foot-map-frame-wrap { filter: grayscale(0.7) invert(92%) contrast(90%) brightness(100%) hue-rotate(180deg); }
.foot-map-frame { width: 100%; height: 100%; border: 0; pointer-events: none; }

/* Google's own marker for a bare-coordinate query renders as a near-invisible
   ghost, so the pin is drawn ourselves, fixed dead-centre — the map is
   already centred on the verified coordinates, this just makes that visible. */
.foot-map-marker {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -100%) rotateX(var(--tiltx)) rotateY(var(--tilty));
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--accent);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.foot-map-pin {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--paper);
}
.foot-map-pin span:first-child {
  color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
}
.foot-map-pin span:last-child {
  font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(247, 242, 234, 0.7);
}

.site-foot.is-armed .foot-map {
  opacity: 0; transform: translateY(16px);
  transition: opacity 760ms ease 480ms,
              transform 760ms cubic-bezier(0.22, 1, 0.36, 1) 480ms;
}
.site-foot.is-armed.is-revealed .foot-map { opacity: 1; transform: none; }

.foot-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(48px, 8vh, 88px);
  padding-top: 44px;
  border-top: 1px solid rgba(247, 242, 234, 0.12);
}

.foot-col h3 {
  margin: 0 0 18px; color: rgba(247, 242, 234, 0.5);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.foot-col-second { margin-top: 34px !important; }

.foot-col ul { margin: 0; padding: 0; list-style: none; }

.foot-col li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(247, 242, 234, 0.08);
  color: rgba(247, 242, 234, 0.8);
  font-size: 0.88rem; line-height: 1.6;
}
.foot-col li b { color: var(--paper); font-weight: 600; white-space: nowrap; }

.foot-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-tags li {
  display: inline-flex; padding: 7px 15px; border: 0;
  border-radius: 0; background: rgba(247, 242, 234, 0.08);
  color: rgba(247, 242, 234, 0.86);
  font-size: 0.78rem; letter-spacing: 0.1em;
}

.foot-copy {
  margin: 56px 0 0;
  color: rgba(247, 242, 234, 0.36);
  font-size: 0.72rem; letter-spacing: 0.12em;
}

/* ---------- media queries ---------- */

@media (max-width: 1100px) {
  .hero-title { top: 15vh; }
  .bridge-plate { width: 130vw; }
  .frame-two-plate { width: 132vw; }
  .splitframe-plate { width: 38vw; bottom: 15vh; }
  .sight-card { flex-basis: clamp(248px, 30vw, 300px); }
  .foot-lead { grid-template-columns: 1fr; }
  .foot-map { height: 220px; }
}

@media (max-width: 640px) {
  .stage { min-height: 640px; }
  .site-header { grid-template-columns: 1fr auto; gap: 18px; padding: 22px; }
  .site-nav {
    grid-column: 1 / -1; grid-row: 2; justify-content: flex-start;
    gap: 18px; overflow-x: auto; scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-logo img { height: 24px; }
  .hero-title { top: 16vh; }
  .intro-copy { width: calc(100vw - 32px); }
  .intro-copy p em { font-size: 1.12rem; }
  .bridge-plate { bottom: 2vh; width: 178vw; }
  .frame-two-plate { width: 176vw; }
  .splitframe-plate { width: 54vw; bottom: 13vh; }
  .intro-copy { bottom: 42px; }
  .intro-copy p, .story-panel p { font-size: 0.88rem; line-height: 1.75; }
  .hero-tags { gap: 8px; }
  .hero-tags span { min-height: 38px; padding: 0 16px; font-size: 0.82rem; }
  .sights-slider { padding: 0; }
  .sights-track { gap: 12px; }
  .sight-card { flex-basis: min(74vw, 290px); }
  .sights-label { left: 24px; right: 150px; }
  .sights-controls { right: 24px; gap: 10px; }
  .sights-label-en { font-size: 21px; }
  .sight-nav { width: 44px; height: 44px; }
  .sight-card h3 { font-size: 19px; }
  .foot-col li { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene-img, .scene-plate, .back-stack, .hero-title, .intro-copy,
  .story-panel, .sights-track, .sights-slider { transition: none; }
}

/* ---------- detail view (click a WORKS tile to open) ---------- */

.detail {
  position: fixed; inset: 0; z-index: 90;
  overflow: hidden;
  opacity: 0;
  /* exit: hold the frame while the media shrinks back, then fade at the very end */
  transition: opacity 200ms ease 400ms;
}
.detail[hidden] { display: none; }
.detail.is-open { opacity: 1; transition: opacity 260ms ease; }
.detail:focus { outline: none; }

.detail-scrim {
  position: absolute; inset: 0;
  background: #0d0c0b;
  opacity: 0;
  transition: opacity 460ms ease;                    /* exit */
}
.detail.is-open .detail-scrim { opacity: 1; transition: opacity 620ms ease; }

/* morphs from the tile's on-screen rect to full bleed */
.detail-media {
  position: absolute;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.98);
  transition: filter 480ms ease;                     /* exit */
}
.detail.is-open .detail-media {
  filter: brightness(0.94) saturate(1.02);
  transition: filter 760ms ease;
}

.detail-shade {
  position: absolute; inset: 0; pointer-events: none;
  /* dark under the copy on the left, clear on the right so the photo reads */
  background:
    linear-gradient(90deg,
      rgba(13, 12, 11, 0.92) 0%,
      rgba(13, 12, 11, 0.78) 26%,
      rgba(13, 12, 11, 0.2) 48%,
      rgba(13, 12, 11, 0) 68%,
      rgba(13, 12, 11, 0) 100%),
    linear-gradient(180deg,
      rgba(13, 12, 11, 0.5) 0%, rgba(13, 12, 11, 0.08) 32%,
      rgba(13, 12, 11, 0.2) 68%, rgba(13, 12, 11, 0.66) 100%);
  opacity: 0;
  transition: opacity 300ms ease;                    /* exit */
}
.detail.is-open .detail-shade { opacity: 1; transition: opacity 520ms ease 200ms; }

.detail-controls {
  position: absolute; top: 32px; right: 32px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
}

.detail-controls button {
  width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(247, 242, 234, 0.34);
  border-radius: 999px;
  color: var(--paper); background: rgba(13, 12, 11, 0.3);
  backdrop-filter: blur(10px);
  font-size: 15px; cursor: pointer;
  opacity: 0; transform: scale(0.86);
  /* exit: the controls are the first thing to go */
  transition: opacity 180ms ease, transform 180ms ease,
              background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.detail.is-open .detail-controls button {
  opacity: 1; transform: none;
  transition: opacity 400ms ease 320ms, transform 400ms ease 320ms,
              background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.detail-controls button:hover {
  color: var(--ink); background: var(--paper); border-color: var(--paper);
}
.detail-controls button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* a story-panel popup has nothing to page between */
.detail.is-single .detail-prev, .detail.is-single .detail-next { display: none; }
.detail.is-single .detail-index:empty { display: none; }

/* a hair of separation so ✕ never reads as part of the pager */
.detail-close { margin-left: 10px; }

.detail-body {
  position: absolute; z-index: 2;
  left: clamp(24px, 6vw, 96px); bottom: clamp(40px, 8vh, 96px);
  width: min(620px, calc(100vw - 48px));
}

/* exit: copy drops away quickly and together */
.detail-body > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.4, 0, 1, 1);
}
/* enter: staggered rise */
.detail.is-open .detail-body > * {
  opacity: 1; transform: none;
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.detail-body.is-swapping > * {
  opacity: 0; transform: translateY(26px); transition: none;
}
.detail.is-open .detail-index  { transition-delay: 260ms; }
.detail.is-open .detail-kicker { transition-delay: 320ms; }
.detail.is-open .detail-title  { transition-delay: 380ms; }
.detail.is-open .detail-text   { transition-delay: 460ms; }
.detail.is-open .detail-tags   { transition-delay: 540ms; }
.detail.is-open .detail-meta   { transition-delay: 600ms; }
.detail.is-open .detail-cta    { transition-delay: 680ms; }

.detail-index {
  display: block; margin-bottom: 14px;
  color: rgba(247, 242, 234, 0.5);
  font-family: var(--font-display);
  font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: 0.04em;
}

.detail-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  color: var(--paper);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
}
.detail-kicker::before { content: ""; width: 22px; height: 1px; background: var(--accent); }

.detail-title {
  margin: 0; color: var(--paper);
  font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 600; line-height: 1.28;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.detail-text {
  margin: 22px 0 0; color: rgba(247, 242, 234, 0.84);
  font-size: 1rem; font-weight: 400; line-height: 2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.detail-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.detail-tags li {
  padding: 8px 16px;
  border: 1px solid rgba(247, 242, 234, 0.28);
  border-radius: 0;
  color: rgba(247, 242, 234, 0.86);
  font-size: 0.78rem; letter-spacing: 0.08em;
}

.detail-meta {
  margin: 28px 0 0; padding: 0;
  display: grid; gap: 12px;
}
.detail-meta:empty { display: none; }

.detail-meta > div {
  display: grid; grid-template-columns: 92px 1fr; gap: 18px;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid rgba(247, 242, 234, 0.18);
}

.detail-meta dt {
  color: rgba(247, 242, 234, 0.5);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
}

.detail-meta dd {
  margin: 0; color: rgba(247, 242, 234, 0.9);
  font-size: 0.9rem; line-height: 1.8;
}

.detail-cta {
  min-height: 50px; margin-top: 30px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 30px; border-radius: 0;
  color: var(--paper);
  background: linear-gradient(180deg,
    rgba(13, 12, 11, 0.34) 0%, rgba(13, 12, 11, 0.76) 100%);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(247, 242, 234, 0.24);
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  box-shadow: none;
}
.detail-cta span:first-child { color: var(--accent); font-size: 1.15rem; line-height: 1; }
.detail-cta:hover {
  background: linear-gradient(180deg,
    rgba(13, 12, 11, 0.6) 0%, rgba(13, 12, 11, 0.92) 100%);
  border-color: rgba(247, 242, 234, 0.5);
}

@media (max-width: 640px) {
  .detail-close { top: 20px; right: 20px; width: 44px; height: 44px; }
  .detail-index { font-size: 30px; }
  .detail-text { font-size: 0.9rem; line-height: 1.85; }
  .detail-body { bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail, .detail-scrim, .detail-media, .detail-shade,
  .detail-video, .detail-controls button, .detail-body > * {
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
}

/* the scene keeps its scroll position, but nothing behind the detail view moves */
html.detail-open body { overflow: hidden; }

.detail-video {
  position: absolute;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.98);
  opacity: 0;
  transition: opacity 620ms ease;
  pointer-events: none;
}
.detail-video[hidden] { display: none; }
.detail.is-open .detail-video.is-playing { opacity: 1; }

/* ---------- contact form (inside the CONTACT popup) ---------- */

.detail-form { display: none; margin: 26px 0 0; }
.detail.is-form .detail-form { display: block; }
/* the form replaces the tag pills for this popup */
.detail.is-form .detail-tags { display: none; }

.detail-form .form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}

.detail-form label {
  display: block;
  color: rgba(247, 242, 234, 0.62);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.detail-form .form-full { display: block; margin-bottom: 16px; }

.detail-form input,
.detail-form textarea {
  width: 100%; margin-top: 7px; padding: 11px 13px;
  color: var(--paper);
  background: rgba(13, 12, 11, 0.55);
  border: 1px solid rgba(247, 242, 234, 0.26);
  border-radius: 0;
  font: inherit; font-size: 0.92rem; letter-spacing: 0.02em;
  -webkit-appearance: none; appearance: none;
  transition: border-color 220ms ease, background 220ms ease;
}
.detail-form textarea { resize: vertical; min-height: 76px; line-height: 1.7; }

.detail-form input:focus,
.detail-form textarea:focus {
  outline: none;
  border-color: rgba(247, 242, 234, 0.7);
  background: rgba(13, 12, 11, 0.72);
}
.detail-form input:user-invalid,
.detail-form textarea:user-invalid { border-color: rgba(211, 47, 47, 0.85); }

.detail-form .form-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px;
}

.form-send {
  min-height: 48px; padding: 0 30px;
  color: var(--paper);
  background: linear-gradient(180deg,
    rgba(13, 12, 11, 0.34) 0%, rgba(13, 12, 11, 0.76) 100%);
  border: 1px solid rgba(247, 242, 234, 0.34);
  border-radius: 0;
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease;
}
.form-send:hover { background: rgba(13, 12, 11, 0.9); border-color: rgba(247, 242, 234, 0.62); }
.form-send[disabled] { opacity: 0.5; cursor: default; }

.form-note {
  margin: 0; min-height: 1em;
  color: rgba(247, 242, 234, 0.72);
  font-size: 0.78rem; line-height: 1.6;
}
.form-note.is-error { color: #f08a8a; }

/* the contact popup carries a form, so it needs room and may scroll */
.detail.is-form .detail-body {
  top: 50%; bottom: auto; transform: translateY(-50%);
  width: min(680px, calc(100vw - 48px));
  max-height: calc(100vh - 120px);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 8px;
}
.detail.is-form .detail-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.detail.is-form .detail-text { margin-top: 18px; font-size: 0.94rem; line-height: 1.85; }
.detail.is-form .detail-meta { margin-top: 22px; }
.detail.is-form .detail-cta { display: none; }

@media (max-width: 640px) {
  .detail-form .form-row { grid-template-columns: 1fr; gap: 12px; }
  .detail.is-form .detail-body { width: calc(100vw - 32px); }
}

/* ---------- loading screen ---------- */

.site-loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; align-content: center; justify-items: center; gap: 40px;
  background: #0d0c0b;
  transition: opacity 620ms ease, visibility 0s linear 620ms;
}
.site-loader.is-done {
  opacity: 0; visibility: hidden; pointer-events: none;
}

.loader-logo {
  width: auto; height: 26px; opacity: 0.82;
}

/* two squares chasing each other around a 65px box */
.luma-spin { position: relative; width: 65px; aspect-ratio: 1 / 1; }

.luma-spin span {
  position: absolute;
  border-radius: 50px;
  box-shadow: inset 0 0 0 3px var(--paper);
  animation: loaderAnim 2.5s infinite;
}
.luma-spin span:nth-child(2) { animation-delay: -1.25s; }

@keyframes loaderAnim {
  0%    { inset: 0 35px 35px 0; }
  12.5% { inset: 0 35px 0 0; }
  25%   { inset: 35px 35px 0 0; }
  37.5% { inset: 35px 0 0 0; }
  50%   { inset: 35px 0 0 35px; }
  62.5% { inset: 0 0 0 35px; }
  75%   { inset: 0 0 35px 35px; }
  87.5% { inset: 0 0 35px 0; }
  100%  { inset: 0 35px 35px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .luma-spin span { animation-duration: 5s; }
}

/* ---------- WORKS filters ---------- */

.sights-filters {
  position: absolute; z-index: 5;
  left: 48px; top: calc(var(--sights-screen-top) - 60px);
  display: flex; gap: 10px;
  opacity: var(--sights-controls-opacity);
  transform: translate3d(0, var(--sights-y), 0);
  pointer-events: none;
  will-change: transform, opacity;
}
.sights-controls.is-ready ~ .sights-filters,
.sights-filters.is-ready { pointer-events: auto; }

.sight-filter {
  min-height: 34px; padding: 0 18px;
  color: rgba(247, 242, 234, 0.72);
  background: rgba(13, 12, 11, 0.34);
  border: 1px solid rgba(247, 242, 234, 0.26);
  border-radius: 0;
  backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  cursor: pointer;
  transition: color 240ms ease, background 240ms ease, border-color 240ms ease;
}
.sight-filter:hover { color: var(--paper); border-color: rgba(247, 242, 234, 0.5); }
.sight-filter.is-on {
  color: var(--ink); background: var(--paper); border-color: var(--paper);
}
.sight-filter[disabled] { opacity: 0.34; cursor: default; }
.sight-filter:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* brief dip while the rail is rebuilt. Only opacity is listed here so the
   transition shorthand doesn't clobber the base rule's transform transition
   while this class is on — the two run independently, on their own clocks. */
.sights-track.is-filtering {
  opacity: 0;
  transition: opacity 200ms ease, transform 1050ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 640px) {
  .sights-filters { left: 24px; gap: 8px; }
  .sight-filter { min-height: 30px; padding: 0 13px; font-size: 10px; }
}

.concept-plate {
  z-index: 4; opacity: var(--concept-bg-opacity, 0);
  left: 50%; bottom: 0vh;
  width: 105vw;
  aspect-ratio: 16 / 9;
  min-height: 100vh;
  transform: translate3d(-50%, var(--bridge-y), 0)
             rotateY(calc(var(--mx, 0) * 2.4deg))
             rotateX(calc(var(--my, 0) * -1.7deg))
             scale(var(--concept-bg-scale, 1.18));
  transform-origin: 50% 48%;
}

/* Both full-screen backdrops carry their own scrim: the footage and the photo are
   bright, and cream type would vanish on them. */
.bridge-plate img, .bridge-plate video,
.concept-plate img { z-index: 0; }
.bridge-plate .plate-video { z-index: 1; }

.bridge-plate::before, .concept-plate::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(13, 12, 11, 0.74) 0%,
      rgba(13, 12, 11, 0.3) 32%,
      rgba(13, 12, 11, 0.16) 56%,
      rgba(13, 12, 11, 0.66) 100%),
    radial-gradient(124% 82% at 50% 30%, rgba(13, 12, 11, 0) 38%, rgba(13, 12, 11, 0.58) 100%);
}
.bridge-plate::after, .concept-plate::after { z-index: 3; border-color: transparent; }

/* ---------- optional hero video ---------- */

/* sits over the plate's photo, which stays as poster and fallback */
.plate-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(var(--plate-dim));
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}
.plate-video[hidden] { display: none; }
.plate-video.is-playing { opacity: 1; }

/* some popups are informational and carry no contact button */
.detail.is-nocta .detail-cta { display: none; }

/* an embedded tour or player, shown instead of the still when a URL is set */
.detail-embed {
  position: absolute;
  border: 0;
  opacity: 0;
  transition: opacity 620ms ease;
}
.detail-embed[hidden] { display: none; }
.detail.is-open .detail-embed.is-ready { opacity: 1; }