/* ArtInSight — visitor page ("LIQUID GALLERY").
   Ported from the standalone waitlist app (AIS-Exhibition-App) so the visitor
   side lives inside this site. The app's own header, side rail and footer are
   dropped: assets/ais-shell.js supplies the shared nav and footer instead, and
   the EN / 中文 toggle is the site-wide one driving [data-i18n].
   Loaded after ais-shell.css; nothing here targets an .ais-* class.          */

/* ============================================================
   ArtInSight — "LIQUID GALLERY"
   Design system: museum-black ground, oil-iridescent chroma,
   editorial serif display, mono metadata, fluid rhythm.
   ============================================================ */



:root {
  /* ---- ink scale (dark ground) ---- */
  --ink-900: #0a0c0b;
  --ink-800: #0f1211;
  --ink: #131615;
  --ink-700: #1a1e1c;
  --ink-600: #242927;
  --line: #2f3532;
  --line-soft: rgb(244 241 232 / 0.12);
  --line-hair: rgb(244 241 232 / 0.07);

  /* ---- paper scale (light ground) ---- */
  --paper: #f1ede3;
  --paper-2: #e8e3d6;
  --paper-3: #ded8c8;
  --paper-ink: #14110d;
  --paper-line: #c6c1b0;
  --paper-muted: #4f544a;

  /* ---- type colour ---- */
  --fg: #f4f1e8;
  --fg-dim: #cdccbf;
  --muted: #9ba095;

  /* ---- chroma: oil-slick palette ---- */
  --coral: #f4703a;
  --coral-hot: #ff9159;
  --coral-deep: #c14c1f;
  --acid: #dcee8e;
  --lake: #7fd3d9;
  --blue: #0e2f4c;
  --blue-lit: #17466e;
  --gilt: #d7b06a;
  --violet: #8a7ad6;
  --accent: var(--coral);

  /* ---- typography ---- */
  --font-display: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;
  --font-body: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas,
    monospace;

  /* fluid type scale (major-third-ish, viewport aware) */
  --step--2: clamp(10px, 0.58rem + 0.12vw, 11.5px);
  --step--1: clamp(11.5px, 0.66rem + 0.2vw, 13.5px);
  --step-0: clamp(15px, 0.86rem + 0.28vw, 17.5px);
  --step-1: clamp(17px, 0.95rem + 0.5vw, 21px);
  --step-2: clamp(21px, 1.05rem + 1vw, 30px);
  --step-3: clamp(27px, 1.1rem + 2.1vw, 44px);
  --step-4: clamp(33px, 1.05rem + 3.5vw, 62px);
  --step-5: clamp(40px, 0.9rem + 5.3vw, 88px);

  /* ---- rhythm ---- */
  --gutter: clamp(22px, 5.4vw, 108px);
  --bay: clamp(70px, 9vw, 150px);
  --nav-h: 78px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: calc(var(--nav-h) + 18px);
  /* JS drives smooth scrolling; keep native instant so the two never fight. */
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button,
input {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button,
summary {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
img {
  display: block;
  max-width: 100%;
}
button,
a,
input,
summary {
  touch-action: manipulation;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
  border-radius: 2px;
}
::selection {
  background: var(--accent);
  color: var(--ink-900);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.012em;
}
h1 span,
h2 span {
  display: block;
}
section[id],
div[id] {
  scroll-margin-top: calc(var(--nav-h) + 14px);
}

/* ============================================================
   Global overlays: film grain + scroll progress + cursor
   ============================================================ */
.grain {
  position: fixed;
  inset: -120%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: overlay;
  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.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain-drift 7s steps(6) infinite;
}
@keyframes grain-drift {
  0% {
    transform: translate(0, 0);
  }
  16% {
    transform: translate(-2%, 1.5%);
  }
  33% {
    transform: translate(1.5%, -2%);
  }
  50% {
    transform: translate(-1%, 2.5%);
  }
  66% {
    transform: translate(2.5%, 1%);
  }
  83% {
    transform: translate(-2.5%, -1.5%);
  }
  100% {
    transform: translate(0, 0);
  }
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 50;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(
    90deg,
    var(--coral),
    var(--gilt) 26%,
    var(--acid) 48%,
    var(--lake) 70%,
    var(--violet) 88%,
    var(--coral)
  );
  background-size: 220% 100%;
  animation: sheen 6s linear infinite;
}
@keyframes sheen {
  to {
    background-position: 220% 0;
  }
}

/* custom cursor — fine pointers only, injected by motion engine */
.cursor-ring,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 65;
  pointer-events: none;
  will-change: transform;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgb(244 241 232 / 0.55);
  transition:
    opacity 0.35s ease,
    width 0.4s var(--ease-spring),
    height 0.4s var(--ease-spring),
    margin 0.4s var(--ease-spring),
    background 0.35s ease,
    border-color 0.35s ease,
    backdrop-filter 0.35s ease;
}
.cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--coral);
}
body.cursor-live .cursor-ring,
body.cursor-live .cursor-dot {
  opacity: 1;
}
body.cursor-liquid .cursor-ring {
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  border-color: rgb(244 241 232 / 0.34);
  background: radial-gradient(
    circle at 38% 34%,
    rgb(255 255 255 / 0.17),
    rgb(255 255 255 / 0.03) 55%,
    transparent 70%
  );
  backdrop-filter: blur(2px) saturate(1.5);
}
body.cursor-link .cursor-ring {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgb(244 112 58 / 0.16);
  border-color: var(--coral);
}
body.cursor-live,
body.cursor-live a,
body.cursor-live button,
body.cursor-live summary,
body.cursor-live label {
  cursor: none;
}

/* ============================================================
   Reveal primitives (driven by the motion engine)
   ============================================================ */
[data-reveal] {
  will-change: transform, opacity, filter;
}
.no-motion [data-reveal],
.no-motion [data-split] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.split-line > i {
  display: block;
  font-style: inherit;
  will-change: transform;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  height: var(--nav-h);
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right))
    0 max(var(--gutter), env(safe-area-inset-left));
  background: rgb(11 13 12 / 0.42);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(1.3);
  transition:
    background 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    transform 0.55s var(--ease-out),
    backdrop-filter 0.5s var(--ease-out);
}
.site-header.is-solid {
  background: rgb(11 13 12 / 0.86);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(22px) saturate(1.5);
}
.site-header.is-hidden {
  transform: translateY(-104%);
}
.brand {
  width: 196px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
  position: relative;
}
.brand img {
  width: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.93;
  transition:
    opacity 0.3s ease,
    transform 0.5s var(--ease-out);
}
.brand:hover img {
  opacity: 1;
  transform: translateX(2px);
}
.desktop-nav {
  display: flex;
  gap: 34px;
  margin-left: auto;
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.desktop-nav a {
  padding: 14px 0;
  position: relative;
  transition: color 0.3s ease;
}
.desktop-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease-out);
}
.desktop-nav a:hover {
  color: var(--fg);
}
.desktop-nav a:hover::after,
.desktop-nav a.is-current::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.desktop-nav a.is-current {
  color: var(--fg);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}
.language {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 70px;
  height: 44px;
  border: 0;
  background: none;
  color: #9ea099;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}
.language span {
  transition: color 0.3s ease;
}
.language .active {
  color: var(--fg);
}
.language:hover span {
  color: var(--fg-dim);
}
.language:hover .active {
  color: var(--coral);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 0 2px;
  font-size: var(--step--1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: var(--accent);
}
.nav-cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.55s var(--ease-out);
}
.nav-cta:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.menu-trigger {
  display: none;
  background: none;
  border: 0;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 80;
  transform: translateY(-220%);
  background: var(--paper);
  color: var(--paper-ink);
  padding: 12px 20px;
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
}

/* ============================================================
   Section rail (click-to-scroll navigator)
   ============================================================ */
.rail {
  position: fixed;
  right: clamp(14px, 1.9vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
.rail.is-live {
  opacity: 1;
  pointer-events: auto;
}
.rail button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border: 0;
  background: none;
  padding: 7px 0;
  color: var(--muted);
  font: 400 var(--step--2) / 1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rail button span {
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    color 0.3s ease;
  white-space: nowrap;
}
.rail button i {
  display: block;
  width: 26px;
  height: 1px;
  background: rgb(244 241 232 / 0.3);
  transition:
    width 0.5s var(--ease-out),
    background 0.4s ease;
}
.rail button:hover span,
.rail button.is-active span {
  opacity: 1;
  transform: translateX(0);
}
.rail button:hover i {
  width: 42px;
  background: var(--fg);
}
.rail button.is-active i {
  width: 52px;
  background: var(--coral);
}
.rail button.is-active span {
  color: var(--fg);
}

/* ============================================================
   Hero — the liquid painting
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  height: 100svh;
  max-height: 1180px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 104px;
}
.hero-art,
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.liquid-hero {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #1d3a37;
  cursor: none;
  /* The painting is scenery, not content: pressing and dragging on it must
     disturb the surface, never start a native image drag or a selection. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.liquid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.4s var(--ease-out);
  pointer-events: none;
}
.liquid-canvas.is-ready {
  opacity: 1;
  transform: scale(1);
}
/* fallback still: hidden once WebGL paints so the two never double-expose */
.liquid-hero.is-live .hero-art {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.hero-shade {
  z-index: -1;
  background:
    radial-gradient(
      120% 90% at 78% 46%,
      transparent 24%,
      rgb(10 12 11 / 0.42) 74%,
      rgb(10 12 11 / 0.8) 100%
    ),
    linear-gradient(
      90deg,
      #0c0e0d 1%,
      rgb(12 14 13 / 0.93) 21%,
      rgb(12 14 13 / 0.6) 48%,
      rgb(12 14 13 / 0.04) 79%
    ),
    linear-gradient(0deg, #101312 0%, transparent 34%, rgb(12 14 13 / 0.14));
  pointer-events: none;
}
.hero-copy {
  width: 56%;
  max-width: 780px;
  padding-bottom: 12px;
  position: relative;
  z-index: 2;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
.hero .eyebrow {
  color: #ded9cd;
  margin-bottom: 30px;
}
.hero h1 {
  font-size: var(--step-5);
  line-height: 1.26;
  white-space: nowrap;
  text-shadow: 0 2px 40px rgb(8 10 9 / 0.55);
}
.hero-sub {
  color: #dcdcd2;
  font-size: var(--step-0);
  line-height: 1.92;
  margin: 26px 0 36px;
  max-width: 26em;
  text-shadow: 0 1px 24px rgb(8 10 9 / 0.55);
}

/* ---- buttons: liquid fill ---- */
.button {
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 16px 26px;
  border: 0;
  border-radius: 2px;
  font-size: var(--step-0);
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.4s var(--ease-out);
  will-change: transform;
}
.button > * {
  position: relative;
  z-index: 2;
}
.primary {
  background: var(--coral);
  color: #120f0d;
}
.primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    108deg,
    var(--coral-hot),
    var(--gilt) 44%,
    var(--acid) 78%,
    var(--coral-hot)
  );
  background-size: 220% 100%;
  transform: translateY(101%);
  transition: transform 0.62s var(--ease-out);
}
.primary:hover::before {
  transform: translateY(0);
  animation: sheen 4.5s linear infinite;
}
.primary:active {
  transform: translateY(1px) scale(0.99);
}
.button-magnetic {
  transition:
    color 0.4s var(--ease-out),
    transform 0.5s var(--ease-out);
}

/* ---- art window / liquid hint ---- */
.art-window {
  width: 25vw;
  height: 38vw;
  max-height: 540px;
  position: absolute;
  top: 49%;
  right: 10%;
  transform: translateY(-50%) rotate(3deg);
  pointer-events: none;
  z-index: 1;
}
.corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgb(244 241 232 / 0.72);
  border-style: solid;
  border-width: 0;
}
.tl {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}
.tr {
  top: 0;
  right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}
.bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.br {
  bottom: 0;
  right: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.art-window-line {
  height: 1px;
  width: 94%;
  position: absolute;
  top: 58%;
  left: 3%;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(244 241 232 / 0.72),
    transparent
  );
}
.liquid-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: 152px;
  color: rgb(255 255 255 / 0.9);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}
.liquid-hint::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 7px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.6));
  transform-origin: 100% 50%;
  animation: hint-sweep 2.8s var(--ease-in-out) infinite;
}
@keyframes hint-sweep {
  0%,
  100% {
    transform: scaleX(0.25);
    opacity: 0.35;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}
/* coarse pointers never see a "move your cursor" prompt */
@media (pointer: coarse), (max-width: 767px) {
  .liquid-hint {
    display: none;
  }
}

.hero-bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: #cbcdc1;
  font-size: var(--step--1);
  z-index: 2;
}
.hero-bottom a {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.hero-bottom a:hover {
  color: var(--fg);
}
.hero-bottom a svg {
  animation: nudge-down 2.4s var(--ease-in-out) infinite;
}
@keyframes nudge-down {
  0%,
  100% {
    transform: translateY(-3px);
    opacity: 0.55;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}
.hero-bottom > span {
  max-width: 45%;
  text-align: right;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ============================================================
   Intro marquee band
   ============================================================ */
.intro {
  position: relative;
  background: var(--coral);
  color: #140f0c;
  padding: 46px 0;
  overflow: hidden;
  border-block: 1px solid rgb(20 15 12 / 0.2);
}
.intro::before,
.intro::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 150px);
  z-index: 2;
  pointer-events: none;
}
.intro::before {
  left: 0;
  background: linear-gradient(90deg, var(--coral), transparent);
}
.intro::after {
  right: 0;
  background: linear-gradient(270deg, var(--coral), transparent);
}
.marquee {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee-group span {
  display: flex;
  align-items: center;
  gap: clamp(26px, 3.4vw, 60px);
  padding-right: clamp(26px, 3.4vw, 60px);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.2;
  white-space: nowrap;
}
.marquee-group span i {
  display: block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: #140f0c;
  transform: rotate(45deg);
  opacity: 0.8;
}
.marquee-group span:nth-child(even) {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.62;
}

/* ============================================================
   Story (pinned scroll chapter)
   ============================================================ */
.story {
  position: relative;
  overflow: clip;
  padding: 0 var(--gutter);
  background:
    radial-gradient(
      circle at 82% 42%,
      rgb(127 211 217 / 0.13),
      transparent 36%
    ),
    radial-gradient(circle at 8% 88%, rgb(244 112 58 / 0.09), transparent 38%),
    var(--ink);
}
.story::before {
  content: 'ART';
  position: absolute;
  left: -0.07em;
  bottom: -0.22em;
  color: rgb(255 255 255 / 0.028);
  font-family: var(--font-body);
  font-size: min(42vw, 620px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.8;
  pointer-events: none;
}
.story-stage {
  min-height: 780px;
  position: relative;
  max-width: 1480px;
  margin: auto;
  padding: 24px 1.6vw 36px;
}
.story-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.story-top > span:last-child {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}
.story-composition {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 680px;
  gap: 30px;
}
.story-copy {
  padding-right: 20px;
}
.chapter {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.6;
  letter-spacing: 0.16em;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 26px;
}
.chapter::before {
  content: '';
  width: 34px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.story h2 {
  font-size: var(--step-4);
  line-height: 1.34;
  white-space: pre-line;
}
.story-copy p {
  color: var(--fg-dim);
  font-size: var(--step-0);
  line-height: 1.88;
  max-width: 27em;
  margin-top: 26px;
}
.ask-copy {
  margin-top: 40px;
}
.story-device-zone {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.story-device-zone::before {
  content: '';
  position: absolute;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(127 211 217 / 0.15),
    transparent 62%
  );
  pointer-events: none;
  animation: halo-breathe 9s var(--ease-in-out) infinite;
}
@keyframes halo-breathe {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
.phone {
  position: relative;
  padding: 7px;
  background: #0b0d0c;
  border: 1px solid #5d625a;
  box-shadow:
    0 0 0 2px #1c1f1b,
    0 30px 70px rgb(0 0 0 / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
  border-radius: 40px;
  width: 300px;
  overflow: hidden;
}
.phone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px;
  pointer-events: none;
  background: linear-gradient(
    128deg,
    rgb(255 255 255 / 0.13) 0%,
    transparent 32%,
    transparent 68%,
    rgb(255 255 255 / 0.07) 100%
  );
}
.phone img {
  width: 100%;
  height: auto;
  border-radius: 32px;
}
.story-phone {
  width: clamp(240px, 23vw, 345px);
  will-change: transform;
}
.story-phone .screen-ai {
  position: absolute;
  left: 7px;
  top: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: cover;
}
.question-escape {
  position: absolute;
  bottom: 80px;
  left: -45px;
  width: 340px;
  padding: 22px 48px 22px 24px;
  border: 0;
  background: var(--acid);
  color: var(--ink-900);
  border-radius: 6px;
  box-shadow: 8px 8px 0 rgb(0 0 0 / 0.34);
  transform: rotate(-2deg);
  z-index: 2;
}
.question-escape > span {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #4a5230;
}
.question-escape p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.65;
  margin-top: 8px;
}
.question-escape svg {
  position: absolute;
  right: 20px;
  top: 40%;
  color: var(--coral-deep);
}
.preview-note {
  font-size: var(--step--1);
  line-height: 1.7;
  color: #a9aca1;
  text-align: center;
  padding: 12px 16px 0;
}
.story.is-animated .story-stage {
  height: 100svh;
  min-height: 680px;
}
.story.is-animated .story-composition {
  height: calc(100% - 75px);
  min-height: 0;
}
.story.is-animated .story-copy {
  position: relative;
}
.story.is-animated .ask-copy {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}
.story.is-animated .preview-note {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
}

/* ============================================================
   Explore
   ============================================================ */
.explore {
  padding: var(--bay) var(--gutter) calc(var(--bay) * 0.78);
  background:
    radial-gradient(
      120% 70% at 50% -10%,
      rgb(23 70 110 / 0.85),
      transparent 62%
    ),
    var(--blue);
  overflow: clip;
  position: relative;
}
.explore-heading {
  max-width: 780px;
  margin-bottom: clamp(46px, 5.6vw, 86px);
}
.explore h2 {
  font-size: var(--step-4);
  line-height: 1.32;
}
.explore-heading > p {
  color: #b7c6d2;
  font-size: var(--step-0);
  line-height: 1.9;
  max-width: 30em;
  margin-top: 26px;
}
.explore-gallery {
  display: grid;
  grid-template-columns: 1fr 0.95fr 1fr;
  gap: 5.2vw;
  align-items: start;
}
.explore-figure {
  transform: rotate(-2.1deg);
}
.map-figure {
  transform: rotate(2.4deg);
  padding-top: 80px;
}
.explore-gallery figure {
  margin: 0;
  will-change: transform;
}
.explore-gallery .phone {
  width: 100%;
  max-width: 310px;
  margin: auto;
}
.explore-gallery figcaption {
  font-size: var(--step--1);
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 26px;
  letter-spacing: 0.04em;
}
.explore-gallery figcaption > span {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--lake);
  letter-spacing: 0.14em;
}
.explore-gallery figcaption svg {
  margin-left: auto;
  transition: transform 0.5s var(--ease-out);
}
.explore-gallery figure:hover figcaption svg {
  transform: translate(4px, -4px);
}
.gallery-art {
  margin-top: 170px;
  position: relative;
  transform: translateY(26px);
}
.gallery-art img {
  aspect-ratio: 1.2;
  object-fit: cover;
  clip-path: polygon(5% 0, 100% 6%, 94% 100%, 0 92%);
  filter: saturate(1.2) contrast(1.05);
  transition:
    clip-path 0.8s var(--ease-out),
    transform 0.8s var(--ease-out),
    filter 0.8s var(--ease-out);
}
.gallery-art:hover img {
  clip-path: polygon(0 4%, 96% 0, 100% 94%, 5% 100%);
  transform: scale(1.03) rotate(-1deg);
  filter: saturate(1.35) contrast(1.1);
}
.gallery-art p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.75;
  margin: 26px 0;
}
.gallery-art > span {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--lake);
  letter-spacing: 0.24em;
}
.explore > .preview-note {
  margin-top: 45px;
  color: #9fb0bd;
}

/* ============================================================
   Paper half — invitation, FAQ, footer
   ============================================================ */
.paper {
  --paper-lip: clamp(22px, 3.6vw, 56px);
  /* Reveal tweens translate horizontally in here; clip so they never
     widen the document. `clip` (not `hidden`) keeps sticky/fixed working. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--paper-ink);
  color-scheme: light;
  position: relative;
  z-index: 2;
  border-radius: var(--paper-lip) var(--paper-lip) 0 0;
  margin-top: calc(var(--paper-lip) * -1);
}
.invitation {
  padding: var(--bay) var(--gutter) calc(var(--bay) * 0.8);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 8vw;
  max-width: 1640px;
  margin: auto;
}
.invitation .eyebrow {
  color: #8a4d2c;
  margin-bottom: 26px;
}
.invitation h2 {
  font-size: var(--step-4);
  line-height: 1.38;
}
.invitation-copy > p:last-child {
  font-size: var(--step-0);
  line-height: 1.88;
  margin-top: 26px;
  max-width: 24em;
  color: var(--paper-muted);
}
.form-wrap {
  padding-top: 8px;
}
.form-wrap label,
.form-wrap legend {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  display: block;
  color: #3d4139;
}
.form-wrap input[type='email'] {
  margin: 14px 0 28px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #8b8f83;
  background: transparent;
  border-radius: 0;
  height: 62px;
  font-size: var(--step-1);
  padding: 0 0 12px;
  color: var(--paper-ink);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.form-wrap input[type='email']:focus {
  border-color: var(--coral-deep);
  box-shadow: 0 1px 0 var(--coral-deep);
  outline-offset: 8px;
}
.form-wrap input::placeholder {
  color: #6b7064;
}
.form-wrap input[aria-invalid='true'] {
  border-color: #a43216;
}
.form-wrap fieldset {
  padding: 0;
  border: 0;
  margin: 0 0 28px;
}
.form-wrap legend {
  margin-bottom: 13px;
}
.role-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.role-choice {
  display: flex !important;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: var(--step-0) !important;
  color: var(--paper-ink);
}
.submit-button {
  width: 100%;
}
.submit-button svg,
.nav-cta svg,
.hero .button svg,
.text-link svg {
  transition: transform 0.45s var(--ease-out);
}
.submit-button:hover svg,
.nav-cta:hover svg,
.hero .button:hover svg,
.text-link:hover svg {
  transform: translate(4px, -4px);
}
.data-promise,
.consent {
  color: #5b6055;
  font-size: var(--step--1);
  line-height: 1.85;
}
.data-promise {
  margin-top: 20px;
}
.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: var(--step--1);
  border: 0;
  background: none;
  padding: 8px 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.3s ease;
}
.text-link:hover {
  color: var(--coral-deep);
}
.form-feedback {
  min-height: 24px;
  margin-top: 8px;
}
.form-error {
  color: #982c12;
  font-size: var(--step--1);
  line-height: 1.7;
}
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.success {
  display: block;
  padding: 30px 0;
  animation: gentle-rise 0.9s var(--ease-out) both;
}
.success > svg {
  color: #4d6038;
}
.success h3 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  margin: 24px 0 16px;
}
.success p {
  font-size: var(--step-0);
  line-height: 1.9;
  color: var(--paper-muted);
}
.faq {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 8vw;
  margin: 0 var(--gutter);
  padding: 72px 0 calc(var(--bay) * 0.75);
  border-top: 1px solid var(--paper-line);
}
.faq h2 {
  font-size: var(--step-3);
  line-height: 1.3;
}
.faq details {
  border-bottom: 1px solid #c3c7ba;
  transition:
    padding 0.4s var(--ease-out),
    background 0.4s ease;
}
.faq details:hover,
.faq details[open] {
  padding-inline: 18px;
  background: rgb(220 238 142 / 0.3);
}
.faq summary {
  list-style: none;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: var(--step-0);
  padding: 20px 0;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary svg {
  flex-shrink: 0;
  transition: transform 0.45s var(--ease-spring);
}
.faq details[open] summary svg {
  transform: rotate(135deg);
  color: var(--coral-deep);
}
.faq details p {
  color: var(--paper-muted);
  font-size: var(--step-0);
  line-height: 1.92;
  padding: 0 40px 28px 0;
}
.faq details[open] p {
  animation: gentle-rise 0.55s var(--ease-out) both;
}
.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -12px 0 28px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color 0.3s ease;
}
.faq-link svg {
  transition: transform 0.45s var(--ease-out);
}
.faq-link:hover {
  color: var(--paper-ink);
}
.faq-link:hover svg {
  transform: translate(4px, -4px);
}
.faq details[open] .faq-link {
  animation: gentle-rise 0.65s 0.06s var(--ease-out) both;
}
.visitor-outro {
  padding: 0 var(--gutter) 10px;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  padding: 54px 0;
  border-top: 1px solid var(--paper-line);
}
.footer-main img {
  width: 200px;
}
.footer-main p {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.footer-main address {
  font-size: var(--step--1);
  line-height: 1.95;
  font-style: normal;
  display: flex;
  flex-direction: column;
  max-width: 380px;
  color: var(--paper-muted);
}
.footer-main address a {
  margin-top: 8px;
  color: var(--paper-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* copyright + privacy always share one row, every breakpoint */
.footer-bottom {
  border-top: 1px solid #cbcec1;
  padding-top: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #5b6055;
}
.footer-bottom > span {
  flex: 0 1 auto;
  min-width: 0;
}
.footer-bottom button {
  border: 0;
  background: none;
  padding: 0;
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex: 0 0 auto;
  font: inherit;
  color: inherit;
  transition: color 0.3s ease;
}
.footer-bottom button:hover {
  color: var(--coral-deep);
}

/* ============================================================
   Dialogs
   ============================================================ */
.privacy-dialog {
  width: calc(100% - 32px) !important;
  max-width: 640px !important;
  max-height: 85svh;
  overflow: auto;
  padding: 44px !important;
  border-radius: 8px !important;
  background: var(--paper) !important;
  color: var(--paper-ink) !important;
}
.privacy-dialog h2 {
  font-size: var(--step-2) !important;
  line-height: 1.45 !important;
}
.privacy-dialog p {
  font-size: var(--step--1);
  line-height: 1.95;
  color: var(--paper-muted);
}
.privacy-dialog a {
  text-decoration: underline;
}
.dialog-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  transition: background 0.3s ease;
}
.dialog-close:hover {
  background: rgb(20 17 13 / 0.08);
}
.menu-dialog {
  padding: 48px 30px !important;
  background: var(--paper) !important;
  color: var(--paper-ink) !important;
}
.menu-dialog > a {
  font-family: var(--font-display);
  font-size: var(--step-2);
  padding: 16px 0;
  border-bottom: 1px solid #cbcec1;
}

/* ============================================================
   English typography variant
   ============================================================ */
html[lang='en'] {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', Arial, sans-serif;
}
html[lang='en'] .hero h1 {
  font-size: clamp(52px, 6.6vw, 100px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
html[lang='en'] h2 {
  letter-spacing: -0.025em;
  line-height: 1.14;
}
html[lang='en'] .hero-sub {
  line-height: 1.72;
  max-width: 25em;
}
html[lang='en'] .marquee-group span {
  letter-spacing: -0.02em;
}
html[lang='en'] .question-escape p {
  line-height: 1.35;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-height: 780px) and (min-width: 768px) {
  .hero {
    min-height: 640px;
  }
  .story.is-animated .story-stage {
    min-height: 600px;
  }
  .story-phone {
    width: 260px;
  }
  .story-top {
    padding-top: 12px;
  }
  .story h2 {
    font-size: clamp(30px, 3.4vw, 44px);
  }
}

@media (max-width: 1279px) {
  .rail {
    display: none;
  }
}

@media (max-width: 1023px) {
  .site-header {
    gap: 20px;
  }
  .desktop-nav {
    gap: 20px;
  }
  .nav-actions {
    gap: 20px;
  }
  .brand {
    width: 160px;
  }
  .hero-copy {
    width: 62%;
  }
  .art-window {
    right: 6%;
    width: 28vw;
  }
  .question-escape {
    width: 290px;
    left: -15px;
    bottom: 70px;
  }
  .explore-gallery {
    gap: 30px;
  }
  .gallery-art {
    margin-top: 130px;
  }
  .invitation {
    gap: 6vw;
  }
  .faq {
    gap: 5vw;
  }
}

@media (max-width: 767px) {
  :root {
    --nav-h: 70px;
    --gutter: 24px;
    --bay: clamp(62px, 13vw, 96px);
  }
  .site-header {
    padding-left: 22px;
    padding-right: 14px;
    gap: 10px;
  }
  .brand {
    width: 158px;
  }
  .desktop-nav,
  .nav-cta {
    display: none;
  }
  .nav-actions {
    margin-left: auto;
    gap: 6px;
  }
  .menu-trigger {
    display: flex;
  }
  .language {
    min-width: 60px;
    gap: 6px;
  }
  .cursor-ring,
  .cursor-dot {
    display: none;
  }
  .grain {
    opacity: 0.22;
  }

  .hero {
    height: 100svh;
    min-height: 640px;
    max-height: 960px;
    align-items: flex-start;
    padding: calc(var(--nav-h) + 42px) var(--gutter) 92px;
  }
  .liquid-hero {
    cursor: auto;
  }
  .hero-art img {
    object-position: 62% center;
  }
  .hero-shade {
    background:
      linear-gradient(
        180deg,
        #0d100f 0%,
        rgb(13 16 15 / 0.84) 27%,
        rgb(13 16 15 / 0.3) 63%,
        #101312 100%
      ),
      linear-gradient(90deg, rgb(13 16 15 / 0.34), transparent);
  }
  .hero-copy {
    width: 100%;
    max-width: 520px;
  }
  .hero .eyebrow {
    margin-bottom: 20px;
    gap: 10px;
  }
  .hero .eyebrow::before {
    width: 20px;
  }
  .hero h1 {
    font-size: clamp(36px, 8.8vw, 60px);
    line-height: 1.3;
  }
  .hero-sub {
    line-height: 1.82;
    max-width: 24em;
    margin: 20px 0 26px;
  }
  .button {
    min-height: 54px;
    padding: 14px 22px;
    gap: 24px;
  }
  .art-window {
    width: 44%;
    height: 26%;
    top: auto;
    bottom: 66px;
    right: 10%;
    transform: rotate(3deg);
    max-height: 200px;
  }
  .hero-bottom {
    left: var(--gutter);
    right: var(--gutter);
    bottom: 14px;
  }
  .hero-bottom > span {
    max-width: 48%;
    line-height: 1.7;
  }
  .hero-bottom a {
    gap: 12px;
  }

  .intro {
    padding: 30px 0;
  }
  .marquee-group span {
    gap: 22px;
    padding-right: 22px;
    font-size: clamp(21px, 6.2vw, 30px);
  }
  .marquee-group span i {
    width: 8px;
    height: 8px;
  }

  .story {
    padding: 0 var(--gutter);
  }
  .story-stage {
    min-height: 0;
    padding: 20px 0 26px;
  }
  .story-top {
    padding-top: 18px;
  }
  .story-composition {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
    padding: 40px 0 10px;
  }
  .story-copy {
    padding: 0;
  }
  .chapter {
    margin-bottom: 15px;
    gap: 10px;
  }
  .chapter::before {
    width: 22px;
  }
  .story h2 {
    font-size: clamp(29px, 7.6vw, 45px);
    line-height: 1.38;
  }
  .story-copy p {
    line-height: 1.82;
    margin-top: 14px;
    max-width: 28em;
  }
  .story-device-zone {
    margin-top: 15px;
  }
  .story-phone {
    width: 230px;
    border-radius: 31px;
    padding: 5px;
  }
  .phone img {
    border-radius: 25px;
  }
  .phone::after {
    border-radius: 31px;
  }
  .story-phone .screen-ai {
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
  .question-escape {
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%) rotate(-1.2deg);
    width: min(300px, 92%);
    padding: 15px 44px 15px 18px;
  }
  .preview-note {
    padding: 18px 0 0;
  }
  .story.is-animated .story-stage {
    min-height: 660px;
    height: 100svh;
    padding-top: calc(var(--nav-h) + 8px);
  }
  .story.is-animated .story-top {
    display: none;
  }
  .story.is-animated .story-composition {
    height: 100%;
    padding: 14px 0 45px;
    grid-template-rows: 165px 1fr;
    gap: 10px;
  }
  .story.is-animated .story-copy {
    align-self: start;
  }
  .story.is-animated .story-phone {
    width: clamp(180px, calc((100svh - 320px) * 0.5625), 245px);
  }
  .story.is-animated .story-device-zone {
    align-self: center;
    margin: 0;
  }
  .story.is-animated .preview-note {
    bottom: 12px;
  }
  .story.is-animated .question-escape {
    bottom: 18px;
  }

  .explore {
    padding: var(--bay) var(--gutter) calc(var(--bay) * 0.8);
  }
  .explore-heading {
    margin-bottom: 42px;
  }
  .explore h2 {
    font-size: clamp(30px, 7.8vw, 46px);
  }
  .explore-heading > p {
    line-height: 1.85;
    margin-top: 20px;
  }
  .explore-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .explore-gallery .phone {
    padding: 4px;
    border-radius: 23px;
  }
  .explore-gallery .phone::after {
    border-radius: 23px;
  }
  .explore-gallery .phone img {
    border-radius: 18px;
  }
  .gallery-art {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 26px;
  }
  .gallery-art p {
    font-size: clamp(18px, 5.2vw, 23px);
    margin: 0;
  }
  .gallery-art > span {
    display: none;
  }
  .map-figure {
    padding-top: 52px;
  }
  .explore-gallery figcaption {
    gap: 8px;
    margin-top: 18px;
  }
  .explore-gallery figcaption svg {
    display: none;
  }
  .explore > .preview-note {
    margin-top: 24px;
  }

  .invitation {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .invitation h2 {
    font-size: clamp(32px, 8.4vw, 49px);
  }
  .invitation-copy > p:last-child {
    margin-top: 20px;
  }
  .invitation .eyebrow {
    margin-bottom: 20px;
  }
  .form-wrap {
    padding: 0;
  }
  .role-group {
    gap: 8px 18px;
  }
  .faq {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 50px 0 var(--bay);
    margin: 0 var(--gutter);
  }
  .faq h2 {
    font-size: clamp(26px, 7vw, 34px);
  }
  .faq summary {
    min-height: 68px;
  }
  .faq details p {
    padding-right: 12px;
  }
  .faq-link {
    margin: -8px 0 24px;
    min-height: 44px;
    letter-spacing: 0.06em;
  }
  footer {
    padding: 0 var(--gutter) 26px;
  }
  .footer-main {
    flex-direction: column;
    gap: 28px;
    padding: 40px 0;
  }
  .footer-main img {
    width: 172px;
  }
  .footer-main p {
    margin-top: 16px;
  }
  /* single row on phones too — shrink type before wrapping */
  .footer-bottom {
    gap: 12px;
    font-size: clamp(9px, 2.6vw, 11px);
    letter-spacing: 0.02em;
    align-items: center;
  }
  .privacy-dialog {
    padding: 46px 24px 28px !important;
  }
  html[lang='en'] .hero h1 {
    font-size: clamp(44px, 11.4vw, 70px);
  }
  html[lang='en'] .story h2 {
    font-size: clamp(33px, 9vw, 48px);
  }
  html[lang='en'] .invitation h2 {
    font-size: clamp(34px, 9.4vw, 55px);
  }
}

@media (max-width: 374px) {
  :root {
    --gutter: 20px;
  }
  .brand {
    width: 138px;
  }
  .site-header {
    padding-left: 16px;
    padding-right: 8px;
  }
  .story h2 {
    font-size: 27px;
  }
  .story.is-animated .story-composition {
    grid-template-rows: 158px 1fr;
  }
  .role-group {
    gap: 4px 12px;
  }
  .footer-bottom {
    gap: 8px;
    font-size: 9px;
  }
}

/* ============================================================
   Keyframes + entrance choreography
   ============================================================ */
@keyframes hero-art-arrive {
  from {
    opacity: 0.3;
    transform: scale(1.1);
    filter: saturate(0.6) blur(9px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1) blur(0);
  }
}
@keyframes hero-copy-arrive {
  from {
    opacity: 0;
    transform: translateY(38px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0);
  }
}
@keyframes gentle-rise {
  from {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes gentle-unmask {
  from {
    opacity: 0.4;
    clip-path: inset(0 0 42% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art img {
    animation: hero-art-arrive 2s var(--ease-out) both;
  }
  .hero .eyebrow,
  .hero-sub,
  .hero .button {
    animation: hero-copy-arrive 1.1s var(--ease-out) both;
  }
  .hero-sub {
    animation-delay: 0.28s;
  }
  .hero .button {
    animation-delay: 0.4s;
  }
  .art-window {
    animation: hero-copy-arrive 1.3s 0.42s var(--ease-out) both;
  }
  .explore-figure,
  .map-figure {
    transition: transform 0.7s var(--ease-out);
  }
  .explore-figure:hover {
    transform: rotate(-0.5deg) translateY(-16px) scale(1.02);
  }
  .map-figure:hover {
    transform: rotate(0.7deg) translateY(-16px) scale(1.02);
  }
}

/* CSS scroll-driven fallback for browsers without the JS engine running */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.no-js .story-top,
    html.no-js .scan-copy,
    html.no-js .explore-heading,
    html.no-js .invitation-copy,
    html.no-js .form-wrap,
    html.no-js .faq h2,
    html.no-js .faq-list,
    html.no-js .footer-main {
      animation: gentle-rise 1s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 5% cover 27%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .art-window-line,
  .grain {
    display: none;
  }
  html {
    scroll-behavior: auto;
  }
}

.paper :focus-visible,
.privacy-dialog :focus-visible,
.menu-dialog :focus-visible {
  outline-color: #b04a24;
}

/* ============================================================
   Site-port adjustments
   Everything below exists because this page now runs as static HTML inside
   the ArtInSight site: native radios and <dialog> replace the React
   components, and headings ship pre-split so [data-i18n] can own each line.
   ============================================================ */

/* the shared language toggle rewrites textContent, so the marquee word sits in
   its own element and the diamond separator survives the swap */
.marquee-group b {
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* a caption is "01" in mono plus its label in body type */
.explore-gallery figcaption > span + span {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: inherit;
  letter-spacing: 0.04em;
}

/* .success sets display:block, which would beat a bare [hidden] */
[hidden] {
  display: none !important;
}

/* native radios, drawn to match the rest of the form */
.role-choice input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--paper-line);
  border-radius: 50%;
  background: transparent;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.role-choice input[type='radio']:checked {
  border-color: var(--coral-deep);
  box-shadow: inset 0 0 0 4.5px var(--coral-deep);
}
.role-choice:hover input[type='radio'] {
  border-color: var(--coral-deep);
}

/* native dialog: the shadcn overlay and centring are gone */
dialog.privacy-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  color: var(--paper-ink);
}
dialog.privacy-dialog::backdrop {
  background: rgb(10 12 11 / 0.74);
  backdrop-filter: blur(3px);
}
dialog.privacy-dialog > * + * {
  margin-top: 16px;
}

/* The app this came from hid its own header on the way down, so the pinned
   story chapter could start at the very top of the viewport. The shared nav
   stays put, so the stage is pushed clear of it. Below 768px the existing
   responsive rule already does this and hides .story-top. */
@media (min-width: 768px) {
  .story.is-animated .story-stage {
    padding-top: 78px;
  }
}

/* ── small phones (iPhone SE and narrower) ──
   The pinned chapter used to give its copy a fixed 165px row. Two lines of
   heading plus a two-line paragraph need ~182px at 375px wide, so the phone
   mockup was drawn over the last line of the paragraph. The row is sized to
   its content instead — .ask-copy is absolutely positioned inside .story-copy,
   so the height is set by .scan-copy alone and the device never shifts between
   chapter 01 and 02 — and the phone is allowed to go smaller to pay for it. */
@media (max-width: 767px) {
  .story.is-animated .story-composition {
    grid-template-rows: auto 1fr;
    gap: 14px;
  }
  .story.is-animated .story-phone {
    width: clamp(150px, calc((100svh - 370px) * 0.5625), 245px);
  }

  /* the artwork credit is one line or it is nothing: "· 1889" alone on a
     second row reads as a separate caption */
  .hero-bottom > span {
    max-width: none;
    white-space: nowrap;
    font-size: 10.5px;
  }
  .hero-bottom a {
    flex: none;
  }
}

@media (max-width: 374px) {
  /* the narrower 374px block still pinned the row; keep it content-sized */
  .story.is-animated .story-composition {
    grid-template-rows: auto 1fr;
  }
  .hero-bottom > span {
    font-size: 9.5px;
  }
}