/* ============================================================
   VOREL — immersive architecture landing
   Warm quiet-luxury · bilingual EN/GR · scroll-scrubbed canvas
   ============================================================ */

:root{
  /* — type — */
  --serif: 'EB Garamond', 'GFS Didot', Georgia, 'Times New Roman', serif;
  --sans:  'Commissioner', 'Helvetica Neue', Arial, sans-serif;

  /* — warm overlay palette (never pure #fff / neutral black) — */
  --txt:      #F4EFE6;
  --txt-hero: #FBF7F0;
  --txt-dim:  rgba(244,239,230,.74);
  --warm-black: 26,22,18;     /* #1A1612 */
  --warm-shadow: 38,28,18;

  /* — scrims (gradients, not boxes) — */
  --scrim-top:    linear-gradient(to bottom, rgba(var(--warm-black),.46) 0%, rgba(var(--warm-black),.16) 52%, rgba(var(--warm-black),0) 100%);
  --scrim-bottom: linear-gradient(to top,    rgba(var(--warm-black),.50) 0%, rgba(var(--warm-black),.16) 54%, rgba(var(--warm-black),0) 100%);
  --scrim-vig:    radial-gradient(125% 125% at 50% 46%, rgba(var(--warm-black),0) 55%, rgba(var(--warm-black),.20) 100%);

  /* — premium warm-glass text card — */
  --card-bg:     rgba(30,26,22,.58);
  --card-blur:   saturate(116%) blur(11px);
  --card-border: 1px solid rgba(244,239,230,.11);
  --card-shadow: 0 28px 70px -22px rgba(var(--warm-shadow),.52),
                 0 3px 10px rgba(var(--warm-shadow),.22),
                 inset 0 1px 0 rgba(255,250,242,.06);

  /* — hairlines — */
  --divider:        rgba(244,239,230,.55);
  --divider-shadow: 0 1px 0 rgba(var(--warm-black),.45);

  /* — legibility halos — */
  --sh-hero: 0 1px 30px rgba(var(--warm-black),.48), 0 1px 2px rgba(var(--warm-black),.4);
  --sh-ui:   0 1px 12px rgba(var(--warm-black),.42);

  --ease: cubic-bezier(.22,.61,.36,1);          /* expo-ish out */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:auto; }
/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  background:#1A1612;
  color:var(--txt);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{ background:rgba(244,239,230,.16); color:var(--txt-hero); }

/* ─────────────────────────  LOADER  ───────────────────────── */
#loader{
  position:fixed; inset:0; z-index:100;
  background:#1A1612;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-inner{ width:min(74vw,340px); text-align:center; }
.loader-mark{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:.42em; text-indent:.42em;
  color:var(--txt-hero); opacity:.92;
}
.loader-track{
  margin:1.5rem auto 0; height:1px; width:100%;
  background:rgba(244,239,230,.16); overflow:hidden;
}
#loader-fill{ display:block; height:100%; width:0%; background:var(--txt-hero); transition:width .25s linear; }
.loader-meta{
  margin-top:.9rem; font-size:.66rem; letter-spacing:.34em; text-indent:.34em;
  color:var(--txt-dim); font-weight:400;
}
.loader-unit{ opacity:.6; }

/* ─────────────────────────  CANVAS BG  ───────────────────────── */
#bg{
  position:fixed; inset:0; z-index:1;
  width:100vw; height:100svh; height:100vh;
  display:block;
  transform-origin:50% 48%;
  will-change:transform;
}

/* ─────────────────────────  SCRIMS  ───────────────────────── */
.scrim{ position:fixed; inset:0; z-index:2; pointer-events:none; }
.scrim-vignette{ background:var(--scrim-vig); }
.scrim-top{ height:42vh; inset:0 0 auto 0; background:var(--scrim-top); }
.scrim-bottom{ height:58vh; inset:auto 0 0 0; background:var(--scrim-bottom); }
.grain{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────────────  NAV  ───────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1.1rem,2.4vw,1.9rem) clamp(1.3rem,5vw,3.4rem);
}
.nav-rule{
  position:absolute; left:clamp(1.3rem,5vw,3.4rem); right:clamp(1.3rem,5vw,3.4rem);
  bottom:0; height:1px; background:var(--divider); box-shadow:var(--divider-shadow);
  transform:scaleX(.0); transform-origin:left; transition:transform 1.4s var(--ease) .4s;
}
.nav.ready .nav-rule{ transform:scaleX(1); }
.brand{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.05rem,1.5vw,1.3rem);
  letter-spacing:.34em; text-indent:.34em; color:var(--txt-hero);
  text-decoration:none; text-shadow:var(--sh-ui);
}
.nav-links{ display:flex; gap:clamp(1.4rem,3vw,2.8rem); }
.nav-links a{
  font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt); text-decoration:none; opacity:.86; text-shadow:var(--sh-ui);
  position:relative; padding-bottom:.25em; transition:opacity .4s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.lang{
  background:none; border:none; cursor:pointer; color:var(--txt);
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.18em;
  display:flex; gap:.35em; align-items:center; text-shadow:var(--sh-ui); opacity:.86;
  transition:opacity .4s var(--ease);
}
.lang:hover{ opacity:1; }
.lang-sep{ opacity:.4; }
.lang .lang-on{ color:var(--txt-hero); }
.lang.el .lang-on{ color:var(--txt-dim); }
.lang.el .lang-off{ color:var(--txt-hero); }
.lang .lang-off{ color:var(--txt-dim); }

/* ─────────────────────────  PROGRESS HAIRLINE  ───────────────────────── */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:30; }
#progress-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(to right, rgba(251,247,240,.2), var(--txt-hero));
}

/* ─────────────────────────  STAGE / ROOMS  ───────────────────────── */
.stage{ position:fixed; inset:0; z-index:12; pointer-events:none; }

.room{
  position:fixed; z-index:12;
  left:clamp(1.4rem,5vw,3.6rem);
  bottom:clamp(2.6rem,7vh,5rem);
  max-width:min(92vw,560px);
  opacity:0; visibility:hidden; pointer-events:none;
  will-change:opacity;   /* opacity is driven per-frame by the scroll envelope in JS */
}

/* hero sits a touch higher and wider */
.hero{ max-width:min(94vw,900px); bottom:clamp(3.4rem,11vh,7rem); }

.kicker{
  font-size:.74rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--txt-dim); margin-bottom:1.15rem; text-shadow:var(--sh-ui);
}
.title{
  font-family:var(--serif); font-weight:500; color:var(--txt-hero);
  line-height:1.03; letter-spacing:-.012em;
  white-space:normal; overflow-wrap:normal; word-break:keep-all; hyphens:none;
  text-shadow:var(--sh-hero);
}
.hero .title{ font-size:clamp(2.6rem,6.4vw,5.8rem); }
.card .title{ font-size:clamp(2rem,4.6vw,3.7rem); }
.lede{
  margin-top:1.5rem; max-width:34ch;
  font-size:clamp(.95rem,1.05vw,1.08rem); font-weight:300; line-height:1.62;
  color:var(--txt); text-shadow:var(--sh-ui);
}

/* glass cards for rooms 2 & 3 */
.card .card-body{
  background:var(--card-bg);
  -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:var(--card-border); border-radius:2px;
  box-shadow:var(--card-shadow);
  padding:clamp(1.6rem,2.6vw,2.4rem) clamp(1.7rem,2.8vw,2.7rem);
}
.rule{
  display:block; width:54px; height:1px; margin:1.4rem 0;
  background:var(--divider); box-shadow:var(--divider-shadow);
  transform-origin:left;
}
.desc{
  font-size:clamp(.95rem,1.05vw,1.06rem); font-weight:300; line-height:1.6;
  color:var(--txt); max-width:40ch;
}
.works{
  font-weight:400; line-height:2.0; letter-spacing:.005em;
  font-size:clamp(.9rem,1vw,1.02rem); max-width:46ch;
}
.meta{
  margin-top:1.5rem; font-size:.7rem; font-weight:400; letter-spacing:.13em;
  text-transform:uppercase; color:var(--txt-dim);
}

/* reveal masks (SplitText lines get wrapped; this hides overflow pre-anim) */
.reveal{ will-change:transform,opacity; }
.split-mask{ overflow:hidden; display:block; }

/* ─────────────────────────  SCROLL CUE  ───────────────────────── */
.scroll-cue{
  position:fixed; z-index:14; right:clamp(1.4rem,5vw,3.4rem); bottom:clamp(2.4rem,6vh,4rem);
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--txt-dim);
  text-shadow:var(--sh-ui); transition:opacity .6s var(--ease);
}
.cue-line{ width:1px; height:46px; background:linear-gradient(var(--txt-dim), transparent); position:relative; overflow:hidden; }
.cue-line::after{
  content:''; position:absolute; top:-50%; left:0; width:1px; height:50%;
  background:var(--txt-hero); animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }
.scroll-cue.hide{ opacity:0; }

/* ─────────────────────────  CONTACT  ───────────────────────── */
.contact{
  position:fixed; z-index:13; left:0; right:0; bottom:clamp(2rem,6vh,4rem);
  display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center;
  opacity:0; visibility:hidden; transition:opacity .8s var(--ease), visibility .8s;
  pointer-events:none;
}
.contact.on{ opacity:1; visibility:visible; pointer-events:auto; }
.contact-line{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim); }
.contact-mail{
  font-family:var(--serif); font-size:clamp(1.3rem,3vw,2rem); font-weight:400; font-style:italic;
  color:var(--txt-hero); text-decoration:none; text-shadow:var(--sh-hero);
  border-bottom:1px solid rgba(244,239,230,.28); padding-bottom:.1em;
}
.contact-copy{ font-size:.62rem; letter-spacing:.24em; color:rgba(244,239,230,.4); margin-top:.4rem; }

/* ─────────────────────────  WORK LIST (clickable doors)  ───────────────────────── */
.works{ list-style:none; }
.work-item{
  display:inline-block; color:var(--txt); text-decoration:none;
  font-size:clamp(.95rem,1.05vw,1.08rem); line-height:2.0; letter-spacing:.005em;
  position:relative; transition:color .4s var(--ease);
}
.work-item i{ font-style:italic; color:var(--txt-dim); transition:color .4s var(--ease); }
.work-item::after{
  content:''; position:absolute; left:0; bottom:.16em; width:100%; height:1px;
  background:var(--divider); box-shadow:var(--divider-shadow);
  transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease);
}
.work-item:hover{ color:var(--txt-hero); }
.work-item:hover i{ color:var(--txt); }
.work-item:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ─────────────────────────  PROJECT LAYER  ───────────────────────── */
.veil{
  position:fixed; inset:0; z-index:40; pointer-events:none; opacity:0;
  background:radial-gradient(125% 125% at 50% 44%, rgba(var(--warm-black),.86), rgba(12,9,6,.98));
}
.project{
  position:fixed; inset:0; z-index:45; overflow-y:auto; overflow-x:hidden;
  opacity:0; visibility:hidden; color:var(--txt); -webkit-overflow-scrolling:touch;
  background:#15110c;   /* fully opaque — no canvas/nav bleed at the gutters */
}
.project.open{ pointer-events:auto; }

.p-back{
  position:fixed; top:clamp(1.1rem,2.4vw,1.9rem); left:clamp(1.3rem,5vw,3.4rem); z-index:48;
  display:inline-flex; align-items:center; gap:.7em; background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-hero); text-shadow:var(--sh-ui); opacity:.9; transition:opacity .4s var(--ease);
}
.p-back:hover{ opacity:1; }
.p-back .ln{ width:28px; height:1px; background:currentColor; display:inline-block; transition:width .4s var(--ease); }
.p-back:hover .ln{ width:38px; }

.p-hero{ position:relative; width:100%; height:80vh; overflow:hidden; background:#1a1612; }
.p-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.p-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(16,12,9,.88) 0%, rgba(16,12,9,.1) 48%, rgba(16,12,9,.3) 100%); }
.p-head{ position:absolute; left:clamp(1.4rem,5vw,3.6rem); right:clamp(1.4rem,5vw,3.6rem); bottom:clamp(2rem,5vh,3.6rem); z-index:2; }
.p-kicker{ font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:1rem; text-shadow:var(--sh-ui); }
.p-title{ font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,5.5vw,4.6rem); line-height:1.02; letter-spacing:-.012em; color:var(--txt-hero); text-shadow:var(--sh-hero); }

.p-body{ max-width:1080px; margin:0 auto; padding:clamp(2.6rem,7vh,6rem) clamp(1.4rem,5vw,3.6rem) clamp(4rem,12vh,9rem); background:linear-gradient(to bottom, rgba(16,12,9,.92), rgba(16,12,9,.97)); }
.p-facts{ display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,3.5rem); padding-bottom:2.4rem; border-bottom:1px solid rgba(244,239,230,.14); }
.p-fact dt{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:.5rem; }
.p-fact dd{ font-family:var(--serif); font-size:1.12rem; color:var(--txt); }
.p-statement{ max-width:60ch; margin:clamp(2.4rem,5vh,3.6rem) 0; }
.p-statement p{ font-family:var(--serif); font-size:clamp(1.05rem,1.4vw,1.32rem); font-weight:400; line-height:1.7; color:var(--txt); margin-bottom:1.2rem; }
.p-sec-h{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:1.1rem; }
.p-materials{ margin:2.6rem 0; }
.p-materials ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; }
.p-materials li{ font-size:.98rem; color:var(--txt); position:relative; padding-left:1.2rem; }
.p-materials li::before{ content:''; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--divider); }
.p-gallery{ display:grid; grid-template-columns:1fr; gap:clamp(.8rem,2vw,1.4rem); margin:clamp(2.6rem,6vh,4.5rem) 0; }
.p-gallery img{ width:100%; height:auto; display:block; border-radius:2px; }
.p-credits{ margin-top:3rem; padding-top:2.4rem; border-top:1px solid rgba(244,239,230,.14); display:flex; flex-wrap:wrap; gap:2.6rem; }
.p-cred dt{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:.4rem; }
.p-cred dd{ font-size:.96rem; color:var(--txt); }
.p-next{ margin-top:clamp(3rem,7vh,5rem); padding-top:2.4rem; border-top:1px solid rgba(244,239,230,.14); display:flex; justify-content:flex-end; align-items:baseline; gap:1.2rem; }
.p-next-label{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-dim); }
.p-next button{ background:none; border:none; cursor:pointer; font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,2.1rem); color:var(--txt-hero); font-style:italic; padding:0; }
.p-next button:hover{ border-bottom:1px solid rgba(244,239,230,.32); }
@media (min-width:920px){ .p-gallery.two{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .p-hero{ height:64vh; } .p-facts{ gap:1.4rem 2rem; } }

/* ─────────────────────────  NAV RIGHT + MENU TOGGLE  ───────────────────────── */
.nav-right{ display:flex; align-items:center; gap:1.4rem; }
.menu-toggle{
  display:none; background:none; border:none; cursor:pointer; color:var(--txt);
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:var(--sh-ui); opacity:.86; transition:opacity .4s var(--ease);
}
.menu-toggle:hover{ opacity:1; }

/* ─────────────────────────  FULLSCREEN MENU  ───────────────────────── */
.menu{
  position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,8vw,5rem); opacity:0; visibility:hidden;
  background:rgba(16,12,9,.96); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.menu.open{ visibility:visible; }
.menu-list{ list-style:none; }
.menu-list li{ overflow:hidden; }
.menu-item{
  display:inline-block; font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,9vw,5rem); line-height:1.2; letter-spacing:-.01em;
  color:var(--txt-hero); text-decoration:none; opacity:.92; transition:opacity .35s var(--ease);
}
.menu-item:hover{ opacity:1; }
.menu-close{
  position:absolute; top:clamp(1.1rem,2.4vw,1.9rem); right:clamp(1.3rem,5vw,3.4rem);
  background:none; border:none; cursor:pointer; color:var(--txt);
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; opacity:.8;
}
.menu-close:hover{ opacity:1; }

/* ─────────────────────────  OVERLAY PANEL (Model A)  ───────────────────────── */
.panel{
  position:fixed; inset:0; z-index:46; overflow-y:auto; overflow-x:hidden;
  opacity:0; visibility:hidden; color:var(--txt); -webkit-overflow-scrolling:touch;
  background:rgba(18,14,10,.93); -webkit-backdrop-filter:saturate(115%) blur(16px); backdrop-filter:saturate(115%) blur(16px);
}
.panel.open{ pointer-events:auto; }
.panel-inner{ max-width:1040px; margin:0 auto; padding:clamp(5rem,14vh,9rem) clamp(1.4rem,5vw,3.6rem) clamp(4rem,12vh,8rem); }
.panel-eyebrow{ font-size:.72rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:1.6rem; }
.panel-title{ font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,5vw,4rem); line-height:1.04; letter-spacing:-.012em; color:var(--txt-hero); margin-bottom:1.8rem; }
.panel-lead{ font-family:var(--serif); font-size:clamp(1.1rem,1.6vw,1.5rem); font-weight:400; line-height:1.6; color:var(--txt); max-width:46ch; margin-bottom:clamp(2.5rem,6vh,4rem); }
.panel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(1.8rem,4vw,3rem); padding-top:2.6rem; border-top:1px solid rgba(244,239,230,.14); }
.panel-grid section{ min-width:0; }
.panel-h{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:.9rem; }
.panel-p{ font-size:1rem; line-height:1.6; color:var(--txt); font-weight:300; }
.panel-list{ list-style:none; }
.panel-list li{ font-size:.96rem; line-height:1.9; color:var(--txt); }
.panel-foot{ margin-top:clamp(3rem,8vh,5rem); padding-top:2.4rem; border-top:1px solid rgba(244,239,230,.14); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:1rem; }
.panel-foot-l{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-dim); }
.panel-mail{ font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.8rem); color:var(--txt-hero); text-decoration:none; border-bottom:1px solid rgba(244,239,230,.26); padding-bottom:.06em; }
.panel-mail:hover{ border-color:rgba(244,239,230,.6); }
.ev-tabs{ display:flex; gap:1.8rem; margin-bottom:2.5rem; }
.ev-tab{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim); cursor:pointer; }
.ev-tab.is-on{ color:var(--txt-hero); }
.ev-list, .jr-list{ display:flex; flex-direction:column; }
.ev-card{ padding:clamp(1.6rem,4vh,2.4rem) 0; border-top:1px solid rgba(244,239,230,.14); display:grid; gap:.7rem; }
.ev-type{ font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-dim); }
.ev-title{ font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--txt-hero); line-height:1.06; }
.ev-meta{ font-size:.9rem; letter-spacing:.04em; color:var(--txt); }
.ev-cta{ justify-self:start; margin-top:.4rem; background:none; border:none; cursor:pointer; padding:0 0 .35em; font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--txt); position:relative; }
.ev-cta::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--divider); }
.ev-cta:hover{ color:var(--txt-hero); }
.jr-item{ padding:clamp(1.8rem,4vh,2.6rem) 0; border-top:1px solid rgba(244,239,230,.14); }
.jr-date{ font-size:.66rem; letter-spacing:.24em; color:var(--txt-dim); margin-bottom:.8rem; }
.jr-title{ font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.8rem); color:var(--txt-hero); line-height:1.06; margin-bottom:.6rem; }
.jr-x{ font-size:1rem; color:var(--txt-dim); line-height:1.55; max-width:50ch; }
@media (max-width:760px){ .menu-toggle{ display:inline-block; } .panel-inner{ padding-top:6rem; } }

/* ─────────────────────────  RUNWAY  ───────────────────────── */
.runway{ height:850vh; width:1px; pointer-events:none; }

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width:760px){
  .nav{ padding:1rem 1.3rem; }
  .nav-links{ display:none; }                 /* brand + language only on mobile (no hamburger) */
  .room{ left:1.3rem; right:1.3rem; max-width:none; bottom:clamp(2rem,8vh,3.2rem); }
  .hero{ max-width:none; }
  .hero .title{ font-size:clamp(2.3rem,10vw,3.2rem); }
  .card .title{ font-size:clamp(1.8rem,8vw,2.6rem); }
  .card .card-body{ padding:1.4rem 1.4rem; }
  .lede{ max-width:none; }
  .desc, .works{ max-width:none; }
  .scroll-cue{ display:none; }
}

/* ─────────────────────────  REDUCED MOTION  ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cue-line::after{ animation:none; }
  #bg{ transition:none !important; }
  .room{ transition:opacity .25s linear; }
}