/* ==========================================================================
   VIMEDCELL — Cinematic Digital Museum (Monochrome Edition)
   Pure black & white. Greek antiquity × stem cell science × film-grade motion.
   ========================================================================== */

:root{
  --c-black: #000000;
  --c-void: #050505;
  --c-white: #ffffff;
  --c-ivory: #f2f2f0;
  --c-marble: #d8d8d6;
  --c-grey: #8a8a88;
  --c-grey-dim: #4a4a48;
  --c-line: rgba(255,255,255,0.14);
  --c-line-strong: rgba(255,255,255,0.32);
  --serif: "Playfair Display", "Times New Roman", serif;
  --serif-italic: "Cormorant Garamond", serif;
  --sans: "Inter", sans-serif;
  --ease-lux: cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  background: var(--c-black);
  scroll-behavior: auto;
}

body{
  margin:0;
  background: var(--c-black);
  color: var(--c-ivory);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

a{ color: inherit; text-decoration: none; }
ul,ol{ list-style: none; margin:0; padding:0; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; cursor: none; }
::selection{ background: var(--c-white); color: #000; }

.italic-accent{ font-family: var(--serif-italic); font-style: italic; font-weight: 500; }
em{ font-family: var(--serif-italic); font-style: italic; font-weight: 500; color: var(--c-white); border-bottom: 1px solid var(--c-line-strong); }

/* ============ WEBGL BACKGROUND ============ */
#webgl-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.grain-overlay{
  position: fixed; inset:0; z-index: 2; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette-overlay{
  position: fixed; inset:0; z-index: 3; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.75) 100%);
}

/* speed-lines: velocity-driven motion streaks for a "buttery inertia" filmic feel */
.speed-lines{
  position: fixed; inset:0; z-index: 4; pointer-events:none; opacity: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.5) 3px 4px);
  mix-blend-mode: overlay;
  will-change: opacity;
}

/* cinematic scene-cut flash */
.scene-flash{
  position: fixed; inset:0; z-index: 7000; pointer-events:none;
  background: var(--c-white); opacity: 0;
  mix-blend-mode: overlay;
}

/* letterbox cinema bars — start fully closed (cinematic curtain), open on load,
   then pinch back in briefly during the manifesto "widescreen" moment */
.letterbox{
  position: fixed; left:0; right:0; background: #000; z-index: 6000; pointer-events:none;
}
.letterbox-top{ top:0; height: 50vh; }
.letterbox-bottom{ bottom:0; height: 50vh; }

/* scroll progress rail */
.scroll-progress{
  position: fixed; top:0; left:0; height: 2px; width: 0%; z-index: 6500;
  background: var(--c-white); pointer-events:none;
  box-shadow: 0 0 12px rgba(255,255,255,.6);
}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; z-index: 9999;
  pointer-events: none; border-radius: 50%;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor-dot{ width:6px; height:6px; background: var(--c-white); }
.cursor-ring{ width:34px; height:34px; border: 1px solid var(--c-white); transition: width .3s var(--ease-soft), height .3s var(--ease-soft), opacity .3s; }
.cursor-ring.is-active{ width: 64px; height: 64px; opacity: .6; }
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
  body{ cursor: auto; }
}

/* ============ PRELOADER ============ */
#preloader{
  position: fixed; inset:0; z-index: 10000;
  background: var(--c-black);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 1s var(--ease-lux), visibility 1s;
}
#preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader-inner{ text-align:center; }
.preloader-mark{
  display:block; font-family: var(--serif); font-size: 2.2rem; letter-spacing: .3em;
  color: var(--c-white); margin-bottom: 1.6rem;
}
.preloader-bar{ width: 220px; height:1px; background: var(--c-line); margin: 0 auto; position:relative; }
.preloader-bar span{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--c-white); }
.preloader-pct{ display:block; margin-top: .8rem; font-size: .7rem; letter-spacing: .2em; color: var(--c-marble); opacity:.6; }

/* ============ NAV ============ */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.6rem clamp(1.5rem, 4vw, 4rem);
  mix-blend-mode: difference;
  transition: padding .4s var(--ease-soft);
}
.site-nav.scrolled{ padding: 1rem clamp(1.5rem, 4vw, 4rem); }
.nav-logo{
  font-family: var(--serif); font-size: 1.1rem; letter-spacing: .28em; color: var(--c-ivory);
}
.nav-logo span{ color: var(--c-white); opacity:.65; }
.nav-links{ display:flex; gap: 2.4rem; align-items:center; }
.nav-links a{
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ivory); opacity: .75; position:relative; padding-bottom: 2px;
  transition: opacity .3s;
}
.nav-links a span{ color: var(--c-white); opacity:.6; margin-right: .3em; font-family: var(--serif); }
.nav-links a:hover{ opacity: 1; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background: var(--c-white);
  transition: width .35s var(--ease-soft);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{ border:1px solid var(--c-line); padding: .5rem 1rem !important; border-radius: 999px; }

.nav-burger{ display:none; background:none; border:none; width: 32px; height:20px; position:relative; }
.nav-burger span{ position:absolute; left:0; right:0; height:1px; background: var(--c-ivory); transition: all .3s; }
.nav-burger span:nth-child(1){ top:0; }
.nav-burger span:nth-child(2){ top:50%; transform: translateY(-50%); }
.nav-burger span:nth-child(3){ bottom:0; }

.mobile-menu{
  position: fixed; inset:0; z-index: 400; background: var(--c-black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 1.6rem;
  transform: translateY(-100%); transition: transform .6s var(--ease-lux);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{ font-family: var(--serif); font-size: 1.6rem; color: var(--c-ivory); }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
}

/* ============ SECTION SHELL ============ */
.panel-scene{
  position: relative; z-index: 10;
  padding: clamp(6rem,10vw,9rem) clamp(1.5rem,5vw,5rem);
}
.section-index{
  font-family: var(--serif-italic); font-style: italic; font-size: 1.1rem;
  color: var(--c-grey); opacity:.85; margin-bottom: 1.2rem; letter-spacing: .1em;
}
.section-index.light{ color: var(--c-white); }

.section-title{
  font-family: var(--serif); font-weight: 600; line-height: 1.02;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem); margin: 0 0 1.6rem;
  letter-spacing: -0.01em; overflow: hidden;
}
.section-title.light{ color: var(--c-ivory); }
.section-title.center{ text-align:center; }
.section-title .split-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.section-title .split-word span{ display:inline-block; will-change: transform; }

.eyebrow{
  text-transform: uppercase; letter-spacing: .35em; font-size: .68rem; color: var(--c-white);
  opacity: .7;
  margin: 0 0 1.4rem;
}

.body-lg{ font-family: var(--serif-italic); font-size: clamp(1.15rem,1.8vw,1.6rem); line-height: 1.5; font-weight: 400; max-width: 40em; color: var(--c-marble); }
.body-lg.light{ color: rgba(242,242,240,.92); }
.body-md{ font-size: .98rem; line-height: 1.85; max-width: 34em; color: rgba(216,216,214,.6); margin-top: 1.4rem; font-weight: 300;}
.body-md.light{ color: rgba(242,242,240,.55); }

/* ============ REVEAL ANIMATION HELPERS (GSAP targets) ============ */
.reveal-up{ opacity:0; transform: translateY(40px); }
.reveal-mask{ overflow:hidden; display:block; }
.reveal-mask span{ display:inline-block; transform: translateY(110%); }
.reveal-lines{ opacity: 0; }

/* clip-path curtain reveal targets for imagery */
.clip-reveal{ clip-path: inset(0 0 100% 0); }

/* ============ HERO ============ */
.hero{
  min-height: 100vh; min-height: 100svh;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding-bottom: 6rem;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.hero-bg-img{ width:100%; height:100%; object-fit:cover; object-position: center 20%; opacity:.5; transform: scale(1.25); }
.hero::after{
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 55%, var(--c-black) 100%);
}
.hero-content{ position:relative; z-index: 5; max-width: 900px; }
.hero-title{ font-family: var(--serif); font-weight: 700; font-size: clamp(3.6rem, 12vw, 9.5rem); line-height: .88; margin: 0 0 1.6rem; letter-spacing: -0.02em; }
.hero-title .line{ }
.hero-sub{ font-family: var(--serif-italic); font-size: clamp(1rem,1.6vw,1.35rem); max-width: 34em; color: var(--c-marble); opacity:.85; }

.scroll-cue{
  position:absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.scroll-cue span{ font-size: .65rem; letter-spacing: .3em; text-transform:uppercase; color: var(--c-marble); opacity:.65; }
.cue-line{ width:1px; height: 50px; background: var(--c-line); overflow:hidden; position:relative; }
.cue-line i{ position:absolute; top:-50px; left:0; width:100%; height:50%; background: var(--c-white); animation: cueMove 2.2s var(--ease-soft) infinite; }
@keyframes cueMove{ 0%{ top:-50%; } 100%{ top:100%; } }

.hero-frame-corner{ position:absolute; width: 40px; height:40px; border-color: var(--c-line); z-index:5; }
.hero-frame-corner.tl{ top: 6rem; left: clamp(1.5rem,5vw,5rem); border-top:1px solid; border-left:1px solid; }
.hero-frame-corner.br{ bottom: 2rem; right: clamp(1.5rem,5vw,5rem); border-bottom:1px solid; border-right:1px solid; }

/* ============ MARQUEE ============ */
.marquee-strip{
  position: relative; z-index: 10;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  padding: 1.1rem 0; overflow:hidden; background: rgba(255,255,255,0.015);
}
.marquee-track{ display:flex; width: fit-content; }
.marquee-track span{
  font-family: var(--serif-italic); font-style: italic; font-size: 1.1rem; white-space: nowrap;
  padding-right: 0; color: var(--c-white); opacity:.7;
}

/* ============ ORIGINS ============ */
.origins-grid{ display:grid; grid-template-columns: 1fr 0.85fr; gap: 5vw; align-items:center; }
.origins-meta{ display:flex; gap: 3rem; margin-top: 2.6rem; }
.origins-meta div{ display:flex; flex-direction:column; }
.meta-num{ font-family: var(--serif); font-size: 1.7rem; color: var(--c-white); }
.meta-label{ font-size: .68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-top:.3rem; }

.origins-visual{ position: relative; }
.origins-frame{
  position:relative; border: 1px solid var(--c-line); padding: 1.2rem;
  background: rgba(255,255,255,0.02); overflow:hidden;
}
.origins-frame img{ width:100%; height: 480px; object-fit:cover; }
.plaque{
  position:absolute; bottom: -1px; left: -1px; right:-1px; text-align:center;
  padding: .6rem; font-size: .65rem; letter-spacing:.14em; text-transform:uppercase;
  background: rgba(0,0,0,.75); backdrop-filter: blur(4px); color: var(--c-white);
  border-top: 1px solid var(--c-line);
}
.origins-orb{
  position:absolute; width: 220px; height:220px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(255,255,255,.08) 60%, transparent 75%);
  filter: blur(6px); top: -60px; right: -60px; z-index:-1; opacity:.6;
}

/* ============ GALLERY ============ */
.gallery-section{ padding-left:0; padding-right:0; }
.gallery-intro{ padding: 0 clamp(1.5rem,5vw,5rem); margin-bottom: 3.5rem; }
.gallery-track-wrap{
  overflow-x: auto; overflow-y: hidden;
  cursor: grab;
  -webkit-user-select:none; user-select:none;
  touch-action: pan-y;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery-track-wrap::-webkit-scrollbar{ display:none; }
.gallery-track-wrap.is-dragging{ cursor: grabbing; scroll-behavior:auto; }
.gallery-track{
  display:flex; gap: 2.2rem; width: max-content;
  padding: 0 clamp(1.5rem,5vw,5rem) 2rem;
}
.frame-card{
  position: relative; width: min(62vw, 460px); flex-shrink:0;
  border: 1px solid var(--c-line); background: rgba(255,255,255,0.02);
  overflow:hidden;
  scroll-snap-align: start;
}
.frame-card img{ width:100%; height: 560px; object-fit: cover; transition: transform 1.2s var(--ease-lux); pointer-events:none; -webkit-user-drag:none; }
.frame-card:hover img{ transform: scale(1.06); }
.frame-caption{
  position:absolute; left:0; right:0; bottom:0; padding: 1.4rem 1.6rem;
  background: linear-gradient(0deg, rgba(0,0,0,.9), transparent);
}
.frame-caption span{ font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color: var(--c-white); opacity:.7; }
.frame-caption h3{ font-family: var(--serif); font-size: 1.6rem; margin: .4rem 0 .2rem; }
.frame-caption p{ font-size: .78rem; opacity:.55; margin:0; }
.frame-card--cell .frame-caption span{ color: var(--c-white); }

/* gallery drag controls: arrows + progress rail + hint */
.gallery-controls{
  display:flex; align-items:center; gap: 1.6rem;
  padding: 2.2rem clamp(1.5rem,5vw,5rem) 0;
  max-width: 640px;
}
.gallery-arrow{
  width: 46px; height:46px; border-radius:50%; flex-shrink:0;
  border: 1px solid var(--c-line); background: transparent; color: var(--c-ivory);
  display:flex; align-items:center; justify-content:center; font-size: .85rem;
  transition: border-color .3s, background .3s, color .3s, transform .3s var(--ease-soft);
}
.gallery-arrow:hover{ border-color: var(--c-white); background: var(--c-white); color: var(--c-black); transform: scale(1.06); }
.gallery-progress{ flex:1; height: 1px; background: var(--c-line); position:relative; }
.gallery-progress-fill{ position:absolute; left:0; top:-1px; height:3px; width: 20%; background: var(--c-white); box-shadow: 0 0 10px rgba(255,255,255,.5); transition: width .1s linear; }
.gallery-hint{
  padding: 1.1rem clamp(1.5rem,5vw,5rem) 0; margin:0;
  font-size: .68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.4;
  display:flex; align-items:center; gap:.6rem;
}

/* ============ MONOCHROME IMAGE TREATMENT ============ */
.duotone-img{
  filter: grayscale(1) contrast(1.25) brightness(.88);
  transition: filter .6s var(--ease-soft);
}
.duotone-img--cell{
  filter: grayscale(1) contrast(1.45) brightness(.82);
}

/* ============ REGENERATION ============ */
.regeneration{
  position: relative; min-height: 100vh; display:flex; align-items:center;
  overflow: hidden;
}
.regen-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.regen-media img{ width:100%; height:100%; object-fit:cover; opacity: .4; }
.regeneration::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(0,0,0,.96) 15%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.88) 100%);
}
.regen-content{ position:relative; z-index:2; max-width: 780px; }
.stat-row{ display:flex; gap: 3.5rem; margin-top: 3rem; flex-wrap:wrap; }
.stat-item{ display:flex; flex-direction:column; }
.stat-num{ font-family: var(--serif); font-size: 3.2rem; color: var(--c-white); display:inline-block; }
.stat-suffix{ font-family: var(--serif); font-size: 1.6rem; color: var(--c-white); }
.stat-label{ font-size: .68rem; letter-spacing:.1em; text-transform:uppercase; opacity:.55; margin-top:.5rem; max-width: 12em; }

/* ============ HELIX ============ */
.helix{
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: 4vw; min-height: 100vh;
  position: relative; overflow: hidden;
}
.helix-visual{ position:relative; height: 620px; border: 1px solid var(--c-line); overflow:hidden; }
.helix-visual img{ width:100%; height:100%; object-fit:cover; }
.precision-meter{ display:flex; align-items:center; gap: 1.2rem; margin-top: 2.6rem; }
.precision-line{ position:relative; width: 140px; height:1px; background: var(--c-line); overflow:hidden; display:block; }
.precision-line i{ position:absolute; left:0; top:0; height:100%; width: 0%; background: var(--c-white); display:block; }
.precision-meter-label{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; opacity:.5; }

/* ============ MANIFESTO ============ */
.manifesto{
  position: relative; min-height: 100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
.manifesto-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.manifesto-bg img{ width:100%; height:100%; object-fit:cover; opacity:.15; }
.manifesto::after{ content:""; position:absolute; inset:0; background: var(--c-black); opacity:.6; z-index:1; }
.manifesto-quote{ position:relative; z-index:2; max-width: 900px; margin:0; }
.quote-mark{ font-family: var(--serif); font-size: 5rem; color: var(--c-white); line-height:0; display:block; margin-bottom: 1.4rem; opacity:.6; }
.manifesto-quote p{ font-family: var(--serif-italic); font-style:italic; font-size: clamp(1.6rem,3.4vw,2.8rem); line-height:1.35; color: var(--c-ivory); margin:0 0 1.6rem; }
.manifesto-quote cite{ font-size: .72rem; letter-spacing:.2em; text-transform:uppercase; opacity:.5; font-style:normal; }

/* ============ ACCESS / FORM ============ */
.access{
  position:relative; min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.05), transparent 60%);
  overflow:hidden;
}
.access-inner{ position:relative; z-index:2; max-width: 640px; width:100%; text-align:center; }
.access-glow{
  position:absolute; z-index:1; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  left:50%; top:50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  filter: blur(20px); pointer-events:none;
}
.access-inner .section-title{ text-align:center; }
.access-inner .body-lg{ margin: 0 auto 2.6rem; }
.access-form{ display:flex; flex-direction:column; gap: 1.4rem; text-align:left; }
.form-row{ display:flex; flex-direction:column; gap:.5rem; }
.form-row label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.form-row input, .form-row select{
  background: transparent; border:none; border-bottom: 1px solid var(--c-line);
  color: var(--c-ivory); font-family: var(--sans); font-size: 1rem; padding: .7rem 0;
  outline:none; transition: border-color .3s;
}
.form-row select option{ background: var(--c-black); }
.form-row input:focus, .form-row select:focus{ border-color: var(--c-white); }
.btn-submit{
  margin-top: .8rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap: .8rem;
  background: var(--c-ivory); color: var(--c-black); border:none;
  padding: 1rem 2rem; font-size: .78rem; letter-spacing:.14em; text-transform:uppercase;
  border-radius: 999px; transition: background .3s, color .3s, transform .3s var(--ease-soft);
}
.btn-submit:hover{ background: var(--c-white); transform: translateX(4px); }
.form-status{ font-size: .8rem; opacity:.7; min-height: 1.2em; margin: 0; }

/* ============ FOOTER ============ */
.site-footer{
  position:relative; z-index: 10; overflow:hidden;
  padding: 8rem clamp(1.5rem,5vw,5rem) 2rem;
  border-top: 1px solid var(--c-line);
  background: var(--c-black);
}
.footer-media{
  position:absolute; inset:0; z-index:0; overflow:hidden; opacity: .22;
}
.footer-media img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.3) brightness(.55); }
.site-footer::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, var(--c-black) 0%, rgba(0,0,0,.75) 35%, var(--c-black) 100%);
}
.footer-top, .footer-grid, .footer-bottom{ position:relative; z-index:2; }
.footer-logo{ font-family: var(--serif); font-size: 2.6rem; letter-spacing:.1em; margin: 0 0 1.2rem; }
.footer-logo span{ color: var(--c-white); opacity:.6; }
.footer-top p{ max-width: 34em; opacity:.6; line-height:1.7; font-size: .92rem; }
.footer-grid{ display:grid; grid-template-columns: repeat(4,minmax(120px,200px)); gap:2rem; margin: 3.5rem 0 3rem; }
.footer-grid h4{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--c-white); opacity:.7; margin: 0 0 1rem; }
.footer-grid a{ display:block; font-size:.88rem; opacity:.65; margin-bottom:.7rem; transition: opacity .3s; }
.footer-grid a:hover{ opacity:1; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.72rem; opacity:.4; border-top:1px solid var(--c-line); padding-top:1.6rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px){
  .origins-grid{ grid-template-columns: 1fr; }
  .origins-visual{ margin-top: 2rem; }
  .helix{ grid-template-columns: 1fr; }
  .helix-visual{ height: 380px; order:-1; }
  .stat-row{ gap: 2rem; }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .letterbox-top, .letterbox-bottom{ height: 5vh; }
}
@media (max-width: 560px){
  .frame-card{ width: 82vw; }
  .frame-card img{ height: 420px; }
  .origins-frame img{ height: 340px; }
  .gallery-controls{ max-width: none; }
  .precision-meter{ flex-wrap: wrap; }
  .precision-line{ width: 90px; }
}

.br-desktop{ display:inline; }
@media (max-width:640px){ .br-desktop{ display:none; } }

/* ============ STATIC LEGAL PAGES (Impressum / Terms) ============ */
.legal-page{ cursor:auto; }
.legal-page .site-nav{ position: relative; mix-blend-mode: normal; border-bottom: 1px solid var(--c-line); }
.legal-header{
  padding: 9rem clamp(1.5rem,5vw,5rem) 3rem;
  border-bottom: 1px solid var(--c-line);
}
.legal-header .section-index{ margin-bottom: 1rem; }
.legal-header h1{
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem,5.2vw,4rem);
  margin: 0 0 1rem; letter-spacing: -0.01em;
}
.legal-header p{ font-family: var(--serif-italic); font-style: italic; font-size: 1.1rem; color: var(--c-marble); opacity:.85; max-width: 40em; margin:0; }
.legal-body{
  padding: 4rem clamp(1.5rem,5vw,5rem) 7rem;
  max-width: 860px;
}
.legal-body h2{
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  margin: 2.6rem 0 1rem; color: var(--c-white);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ font-size: .95rem; line-height: 1.85; color: rgba(216,216,214,.72); margin: 0 0 1.2rem; font-weight: 300; }
.legal-body a{ color: var(--c-white); border-bottom: 1px solid var(--c-line-strong); transition: opacity .3s; }
.legal-body a:hover{ opacity:.7; }
.legal-body ul{ margin: 0 0 1.2rem; padding-left: 1.3rem; list-style: disc; }
.legal-body li{ font-size: .95rem; line-height: 1.85; color: rgba(216,216,214,.72); margin-bottom: .5rem; font-weight: 300; }
.legal-body strong{ color: var(--c-ivory); font-weight: 500; }
.legal-back{
  display:inline-flex; align-items:center; gap:.6rem; margin-top: 3rem;
  font-size: .75rem; letter-spacing:.14em; text-transform:uppercase; color: var(--c-white); opacity:.75;
}
.legal-back:hover{ opacity:1; }

@media (hover:none), (pointer:coarse){ .legal-page{ cursor:auto; } }