/* Tilt Neon (SIL Open Font License), self-hosted for the garage neons */
@font-face{ font-family:"Tilt Neon"; src:url("../fonts/tilt-neon.woff2") format("woff2"); font-weight:400; font-display:swap; }
/* =========================================================
   gallery.css — the 3D portfolio shell
   Same tokens as style.css. Square corners everywhere.
   ========================================================= */

:root{
  --ink:#1A1210; --deep:#EDE6DA; --paper:#FFFBF4; --white:#fff;
  --steel:#6B564C; --ember:#1B3A6B; --gold:#D9A441; --blue:var(--ink); --line:rgba(26,18,16,.20);
  --display:"Roboto","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; border-radius:0; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--deep); }
body{ font-family:var(--display); color:var(--ink); -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
#scene{ display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
#scene:active{ cursor:grabbing; }
:focus-visible{ outline:3px solid var(--ember); outline-offset:3px; }
a{ color:inherit; }

/* ---------- buttons ---------- */
.btn{
  position:relative; overflow:hidden; display:inline-block;
  font-family:var(--display); font-weight:600; font-size:.95rem;
  text-decoration:none; padding:.85rem 1.6rem;
  background:var(--ink); color:var(--white); border:2px solid var(--ink);
  cursor:pointer; z-index:0;
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--ember); transform:translateY(101%); transition:transform .4s var(--ease); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ border-color:var(--ember); }
.btn--big{ padding:1.05rem 2.2rem; font-size:1.02rem; }
.btn:disabled{ opacity:.55; cursor:progress; }
.btn:disabled::before{ display:none; }

/* ---------- landing ---------- */
#landing{
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to right, rgba(237,230,218,.97) 0%, rgba(237,230,218,.9) 55%, rgba(237,230,218,.5) 100%);
  padding:clamp(1.5rem,6vw,5rem);
  transition:opacity .8s var(--ease);
}
#landing.gone{ opacity:0; pointer-events:none; }
.landing__in{ max-width:620px; }
.landing__kicker{
  margin:0 0 1rem; font-size:.85rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue);
}
.landing__title{
  margin:0 0 1.25rem; font-weight:900;
  font-size:clamp(2.6rem,8vw,5.6rem); line-height:.92; letter-spacing:-.02em; text-transform:uppercase;
}
.landing__sub{ margin:0 0 2rem; font-family:var(--body); font-size:1.12rem; line-height:1.65; max-width:46ch; color:#3A2A24; }
.track{ width:min(320px,70vw); height:3px; background:var(--line); margin-bottom:1.25rem; }
#bar{ height:100%; width:0; background:var(--ember); transition:width .3s ease; }
.landing__alt{ margin:1.5rem 0 0; font-size:.82rem; color:var(--steel); }
.landing__alt a{ text-decoration-thickness:1px; text-underline-offset:3px; }
#landing.failed .landing__in{ display:none; }
#fail{ max-width:36ch; text-align:center; line-height:1.6; }

/* ---------- HUD ---------- */
.hud{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.1rem;
  background:linear-gradient(to bottom, rgba(237,230,218,.92), transparent);
  opacity:0; pointer-events:none; transition:opacity .6s ease;
}
.hud.show{ opacity:1; pointer-events:auto; }
.hud__name{ font-weight:900; text-transform:uppercase; letter-spacing:.02em; font-size:1rem; }
.name-blue{ color:var(--ink); }
.hud__nav{ display:flex; align-items:stretch; gap:.45rem; }
.hud__nav button, .hud__cta{
  display:inline-flex; align-items:center; justify-content:center; line-height:1; margin:0; height:2.25rem;
  font-family:inherit; font-size:.8rem; font-weight:600; color:var(--ink);
  background:rgba(255,251,244,.75); border:1px solid var(--line);
  padding:0 .85rem; cursor:pointer; text-decoration:none; -webkit-appearance:none; appearance:none;
  transition:background .25s ease, border-color .25s ease;
}
.hud__nav button:hover, .hud__cta:hover{ background:var(--ember); border-color:var(--ember); color:var(--white); }
.hud__cta{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* ---------- minimap ---------- */
/* the map lies along the bottom, faint until touched */
#map{
  position:fixed; left:1.1rem; bottom:1.1rem; z-index:18;
  background:rgba(255,251,244,.85); border:1px solid var(--line); border-radius:6px;
  cursor:pointer; opacity:0; transition:opacity .45s ease; pointer-events:none; touch-action:none;
}
#map.show{ opacity:.1; pointer-events:auto; }
#map.show.awake{ opacity:1; }
body.focused #map{ opacity:0 !important; pointer-events:none !important; }

/* ---------- hint ---------- */
#hint{
  position:fixed; bottom:1.25rem; left:50%; transform:translateX(-50%);
  z-index:19; font-size:.78rem; color:#3A2A24; text-align:center; line-height:1.7;
  background:rgba(255,251,244,.92); border:1px solid var(--line);
  padding:.65rem 1.1rem; max-width:calc(100vw - 2rem);
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
#hint.show{ opacity:1; }
#hint b{ color:var(--ink); }

/* ---------- info panel ---------- */
#panel{
  position:fixed; left:1.1rem; bottom:1.1rem; z-index:21;
  width:min(340px, calc(100vw - 2.2rem));
  background:rgba(255,251,244,.96); border-left:3px solid var(--ember);
  padding:1.2rem 1.35rem; box-shadow:0 6px 30px rgba(13,27,42,.12);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
#panel.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.panel__room{ margin:0 0 .35rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); }
#panel h2{ margin:0 0 .5rem; font-weight:800; font-size:1.15rem; line-height:1.2; }
.panel__proj{ margin:0 0 .9rem; font-size:.82rem; color:var(--steel); }
#panel button{
  font-family:inherit; font-size:.82rem; font-weight:600;
  background:var(--ink); color:var(--white); border:0; padding:.6rem 1.1rem; cursor:pointer;
  margin-top:.5rem; transition:background .2s ease, color .2s ease;
}
#panel button:hover{ background:var(--ember); }

/* ---------- hold to walk ---------- */
#walk{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:21;
  width:76px; height:76px; display:none;
  background:rgba(255,251,244,.85); border:1px solid var(--line);
  color:var(--ink); font-family:inherit; font-size:.66rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer; touch-action:none;
}
#walk.show{ display:block; }

/* ---------- overlays ---------- */
.ov{
  position:fixed; z-index:30; background:rgba(255,251,244,.97);
  border-left:3px solid var(--ember); box-shadow:0 10px 40px rgba(13,27,42,.14);
  padding:1.5rem 1.6rem 1.75rem;
  opacity:0; pointer-events:none; transform:translateX(18px);
  transition:opacity .35s ease, transform .35s var(--ease);
  overflow-y:auto; font-family:var(--body); line-height:1.6;
}
.ov.show{ opacity:1; pointer-events:auto; transform:translateX(0); }
.ov--side{ top:3.6rem; right:1.1rem; width:min(280px, calc(100vw - 2.2rem)); }
.ov--wide{ top:3.6rem; right:1.1rem; bottom:1.1rem; width:min(520px, calc(100vw - 2.2rem)); }
.ov h2{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:1.7rem; line-height:1; margin:0 0 1rem;
}
.ov p{ margin:0 0 1rem; color:#3A2A24; }
.ov strong{ color:var(--ink); font-weight:600; }
.ov__close{
  position:absolute; top:.6rem; right:.8rem; font-size:1.8rem; line-height:1;
  background:none; border:0; color:var(--ink); cursor:pointer; padding:.2rem .5rem;
}
.ov__note{ font-size:.85rem; color:var(--steel); margin-top:1rem; }
.ov__nda{ font-size:.92rem; border-top:1px solid var(--line); padding-top:1rem; }
.ov__legal{ font-size:.75rem; color:var(--steel); margin-top:1.5rem; }
.ov__legal a{ color:inherit; text-decoration:underline; }
.ov .btn{ margin-top:.5rem; }

.rooms{ list-style:none; margin:0; padding:0; }
.rooms li + li{ border-top:1px solid var(--line); }
.rooms button{
  width:100%; text-align:left; font-family:var(--display); font-size:1rem; font-weight:600;
  color:var(--ink); background:none; border:0; padding:.7rem 0; cursor:pointer;
  position:relative; transition:padding-left .3s var(--ease), color .2s ease;
}
.rooms button::before{
  content:""; position:absolute; left:0; top:50%; width:0; height:2px; background:var(--ember);
  transform:translateY(-50%); transition:width .3s var(--ease);
}
.rooms button:hover{ padding-left:1.4rem; color:var(--ember); }
.rooms button:hover::before{ width:.9rem; }

.facts{ list-style:none; margin:1.25rem 0; padding:1rem 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; font-family:var(--display); font-size:.8rem; line-height:1.35; }
.facts b{ display:block; font-weight:900; font-size:1.5rem; line-height:1; color:var(--ember); margin-bottom:.3rem; }

.contact__list{ list-style:none; margin:0 0 1.25rem; padding:1rem 0 0; border-top:1px solid var(--line); font-family:var(--display); font-size:.92rem; }
.contact__list li{ margin-bottom:.5rem; }
.contact__list a{ text-decoration:none; background-image:linear-gradient(var(--ember),var(--ember)); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .4s var(--ease); padding-bottom:2px; }
.contact__list a:hover{ background-size:100% 2px; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.form__row{ display:flex; flex-direction:column; gap:.3rem; }
.form__row--wide{ grid-column:1/-1; }
.form label{ font-family:var(--display); font-size:.75rem; font-weight:600; color:var(--steel); }
.form input, .form textarea{
  font-family:var(--body); font-size:.95rem; padding:.65rem .75rem;
  background:#fff; color:var(--ink); border:1px solid rgba(13,27,42,.35);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--ink); box-shadow:inset 0 -2px 0 var(--ember); }
.form textarea{ resize:vertical; }

/* ---------- wall-text tooltip ---------- */
#tip{
  position:fixed; z-index:22; pointer-events:none;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ember); color:var(--white); padding:.35rem .6rem;
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease;
}
#tip.show{ opacity:1; transform:translateY(0); }

/* ---------- full size ---------- */
#full-view{ position:fixed; inset:0; z-index:60; background:rgba(243,243,241,.97); display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); cursor:zoom-out; }
#full-view[hidden]{ display:none; }
#full-view img{ max-width:100%; max-height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-select:none; }
/* a clear sheet over the big picture, so right-click and drag land on it, not the image */
#full-view::before{ content:""; position:absolute; inset:0; z-index:1; }

.noscript{ position:fixed; inset:0; z-index:70; background:var(--deep); display:flex; align-items:center; justify-content:center; padding:2rem; text-align:center; line-height:1.6; }

@media (max-width:640px){
  .hud__nav{ gap:.3rem; }
  .hud__nav button, .hud__cta{ font-size:.72rem; padding:.45rem .6rem; }
  #hint{ font-size:.72rem; }
  .facts{ grid-template-columns:1fr 1fr; }
  #panel{ width:calc(100vw - 2.2rem - 90px); }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; }
}

/* ---------- the kiosk ---------- */
.ov--kiosk{
  top:3.6rem; right:1.1rem; bottom:1.1rem;
  width:min(420px, calc(100vw - 2.2rem));
  display:flex; flex-direction:column; padding:1.3rem 1.4rem 1.2rem;
  border-left:3px solid var(--gold);
}
.kiosk__head{ display:flex; align-items:center; gap:.9rem; padding-right:2rem; margin-bottom:1rem; flex:0 0 auto; }
.kiosk__face{
  width:62px; height:62px; object-fit:cover; object-position:50% 22%;
  border:1px solid var(--line); background:#EDE6DA; flex:0 0 auto;
}
.ov--kiosk h2{ margin:0; font-size:1.35rem; }
.kiosk__role{ margin:.2rem 0 0; font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }

.kiosk__log{
  flex:1 1 auto; overflow-y:auto; min-height:8rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1rem .1rem; display:flex; flex-direction:column; gap:.7rem;
}
.kmsg{ margin:0; font-family:var(--body); font-size:.95rem; line-height:1.55; max-width:92%; }
.kmsg--guide{ color:var(--ink); border-left:2px solid var(--gold); padding-left:.7rem; }
.kmsg--you{
  align-self:flex-end; text-align:right; color:var(--steel);
  font-family:var(--display); font-size:.86rem; font-weight:500;
  border-right:2px solid var(--ember); padding-right:.7rem;
}

.kiosk__ask{ display:flex; gap:.5rem; padding-top:.9rem; flex:0 0 auto; }
#kiosk-in{
  flex:1 1 auto; min-width:0; font-family:var(--body); font-size:.95rem;
  padding:.65rem .75rem; background:#fff; color:var(--ink);
  border:1px solid rgba(26,18,16,.35);
}
#kiosk-in:focus{ outline:none; border-color:var(--ink); box-shadow:inset 0 -2px 0 var(--gold); }
#kiosk-send{
  font-family:var(--display); font-size:.82rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; background:var(--ink); color:var(--white);
  border:0; padding:.65rem 1.1rem; cursor:pointer; transition:background .2s ease;
}
#kiosk-send:hover{ background:var(--ember); }
.kiosk__note{ margin:.75rem 0 0; font-family:var(--display); font-size:.7rem; line-height:1.5; color:var(--steel); }


/* ---------- slide-out panel details ---------- */
#fade{ position:fixed; inset:0; z-index:35; background:#000; opacity:0; pointer-events:none; transition:opacity .42s ease; }
#fade.on{ opacity:1; pointer-events:auto; }
.panel__byline{ margin:-.3rem 0 .8rem; font-family:var(--display); font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); }
.panel__line{ margin:0 0 .8rem; font-family:var(--body); font-size:.95rem; line-height:1.5; color:#3A2A24; }
.panel__facts{ margin:.6rem 0 .4rem; padding:.7rem 0 0; border-top:1px solid var(--line); font-size:.82rem; line-height:1.5; }
.panel__facts dt{ font-family:var(--display); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin-top:.55rem; }
.panel__facts dt:first-child{ margin-top:0; }
.panel__facts dd{ margin:0; font-family:var(--body); color:#3A2A24; }
.panel__btns{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.panel__go{
  display:inline-block; font-family:var(--display); font-size:.82rem; font-weight:600;
  background:var(--blue); color:var(--white); text-decoration:none; padding:.6rem 1.1rem; margin-top:.5rem;
  transition:background .2s ease;
}
.panel__go:hover{ background:var(--ink); }
.panel__ask{
  display:inline-block; font-family:var(--display); font-size:.82rem; font-weight:600; cursor:pointer;
  background:transparent; color:var(--blue); border:2px solid var(--blue); padding:.5rem 1rem; margin-top:.5rem;
  transition:background .2s ease, color .2s ease;
}
.panel__ask:hover{ background:var(--blue); color:var(--white); }
.panel__ask[disabled]{ opacity:.5; cursor:default; }
.panel__soon{ display:inline-block; font-family:var(--display); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  color:#F5EFE4; background:#141416; padding:.3rem .6rem; margin:0 0 .8rem; }
.panel__jonn{ margin-top:1rem; padding:.8rem .9rem; border-left:3px solid var(--blue); background:rgba(27,58,107,.06);
  font-family:var(--body); font-size:.95rem; line-height:1.55; color:#2A1E18; opacity:0; transition:opacity .5s ease; }
.panel__jonn.show{ opacity:1; }
/* on phones, while J'onn walks in, the panel folds down to a strip so you can see him */
#panel.peek{ max-height:none; padding:.7rem .9rem; bottom:.7rem; }
#panel.peek > *:not(h2):not(.panel__jonn):not(.panel__x){ display:none; }
#panel.peek h2{ font-size:.95rem; margin:0; }
#panel.peek h2::after{ content:"  \2191 tap to open"; font-size:.68rem; font-weight:600; letter-spacing:.06em; color:var(--steel); }
#panel.peek .panel__jonn{ margin-top:.5rem; font-size:.88rem; }
@media (max-width:640px){
  #panel{ max-height:62vh; overflow:auto; -webkit-overflow-scrolling:touch; }
}
/* on phones the panel steps out of the way while J'onn walks in, then comes back */
.panel.aside{ opacity:.12; pointer-events:none; transition:opacity .35s ease; }
.panel__jonn b{ display:block; font-family:var(--display); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:.3rem; }


/* ---------- phones ---------- */
@media (max-width:640px){
  .hud{ flex-wrap:wrap; gap:.4rem .6rem; padding:.6rem .7rem; }
  .hud__name{ font-size:.9rem; }
  .hud__nav{ flex-wrap:wrap; gap:.35rem; }
  .hud__nav button, .hud__cta{ padding:.4rem .6rem; font-size:.72rem; }
  #hint{ font-size:.7rem; bottom:12rem; left:auto; right:.7rem; transform:none; max-width:55vw; text-align:left; }
  #panel{ left:.7rem; right:.7rem; width:auto; bottom:6.2rem; }
  #walk{ display:none !important; }
}

#stick{
  position:fixed; left:1.1rem; bottom:1.1rem; z-index:21; width:72px; height:72px; display:none;
  border-radius:50%; background:rgba(255,251,244,.35); border:1.5px solid rgba(26,18,16,.35); touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  opacity:.18; transition:opacity .4s ease;
}
#stick.show{ display:block; }
#stick.intro, #stick.active{ opacity:1; }
#stick-hint{
  position:fixed; left:calc(1.1rem + 84px); bottom:calc(1.1rem + 24px); z-index:21;
  font-family:var(--display); font-size:.78rem; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6);
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
#stick-hint.show{ opacity:1; }
#stick::before, #stick::after{ content:""; position:absolute; background:rgba(26,18,16,.18); }
#stick::before{ left:50%; top:8px; bottom:8px; width:1px; }
#stick::after{ top:50%; left:8px; right:8px; height:1px; }
#knob{
  position:absolute; left:50%; top:50%; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%;
  background:var(--ink); opacity:.88; box-shadow:0 4px 14px rgba(0,0,0,.35); pointer-events:none;
  transition:transform .05s linear;
}


/* ---------- d-pad ---------- */
#dpad{
  position:fixed; left:1rem; bottom:1rem; z-index:21; display:none;
  width:168px; height:168px; touch-action:none;
  grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr;
}
#dpad.show{ display:grid; }
#dpad button{
  font-size:1.3rem; line-height:1; border:1px solid rgba(26,18,16,.35); background:rgba(255,251,244,.86); color:var(--ink);
  cursor:pointer; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
#dpad button.on{ background:var(--ink); color:#fff; }
#dpad button[data-dir=up]{ grid-column:2; grid-row:1; }
#dpad button[data-dir=left]{ grid-column:1; grid-row:2; }
#dpad button[data-dir=down]{ grid-column:2; grid-row:3; }
#dpad button[data-dir=right]{ grid-column:3; grid-row:2; }


/* ---------- full-size viewer ---------- */
#full-view.loading::after{
  content:"Loading full size\2026"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--display); font-size:.85rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#F5EFE4;
}
#full-view.loading img{ opacity:0; }
#full-view img{ transition:opacity .25s ease; }

/* anything marked hidden stays hidden */
[hidden]{ display:none !important; }

/* always there: a way out of the 3D gallery */
#flat-link{
  position:fixed; left:.9rem; bottom:.9rem; z-index:21;
  font-family:var(--display); font-size:.74rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink); text-decoration:none; background:rgba(255,251,244,.9); border:1px solid var(--line);
  padding:.4rem .7rem; padding-bottom:calc(.4rem + env(safe-area-inset-bottom, 0px));
}
#flat-link:hover{ background:var(--blue); color:var(--white); border-color:var(--blue); }
/* on phones the joystick lives bottom-left, so the way out moves to the bottom-right corner */
@media (hover: none) and (pointer: coarse){
  #flat-link{ left:auto; right:.9rem; }
}
/* while a piece is open, the walking controls get out of the panel's way */
body.focused #stick, body.focused #dpad{ display:none !important; }

/* a close button on every pop-up */
#panel .panel__x{
  position:absolute; top:.35rem; right:.45rem; width:2.2rem; height:2.2rem; padding:0; margin:0;
  font-size:1.6rem; line-height:1; background:none; color:var(--ink); border:0; cursor:pointer; border-radius:50%;
}
#panel .panel__x:hover{ background:rgba(26,18,16,.08); color:var(--ink); }
#panel{ padding-right:2.4rem; }
#full-view .fv__x{
  position:absolute; top:1rem; right:1.2rem; z-index:2; width:2.8rem; height:2.8rem; border:0; border-radius:50%;
  background:rgba(255,251,244,.92); color:var(--ink); font-size:1.9rem; line-height:1; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.15);
}
#full-view .fv__x:hover{ background:var(--ink); color:#fff; }

/* ---------- see-through windows ---------- */
.ov{ background:rgba(255,251,244,.72); -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); }
#panel{ background:rgba(255,251,244,.74); -webkit-backdrop-filter:blur(12px) saturate(1.15); backdrop-filter:blur(12px) saturate(1.15); }
#full-view{ background:rgba(243,243,241,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* ---------- phones: one menu, the map beside the walking circle ---------- */
.hud__menu{ display:none; }
.hud__flat{ display:none; }
@media (hover: none) and (pointer: coarse){
  #map{ left:calc(1.1rem + 72px + .6rem); bottom:calc(1.1rem + 4px); }
  #flat-link{ display:none !important; }
  #hint{ display:none !important; }
  .hud__menu{
    display:block; background:rgba(255,251,244,.85); border:1px solid var(--line); color:var(--ink);
    font-size:1.35rem; line-height:1; width:2.6rem; height:2.4rem; padding:0; cursor:pointer;
  }
  .hud__nav{ display:none !important; }
  .hud.open .hud__nav{
    display:flex !important; flex-direction:column; align-items:stretch; position:absolute; top:3.3rem; right:.7rem;
    background:rgba(255,251,244,.8); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid var(--line); padding:.45rem; gap:.35rem; min-width:11rem;
  }
  .hud.open .hud__nav button, .hud.open .hud__cta, .hud.open .hud__flat{ display:block; text-align:left; padding:.6rem .8rem; font-size:.9rem; }
  .hud__flat{ font-family:var(--display); font-weight:600; color:var(--ink); text-decoration:none; border:1px solid var(--line); background:rgba(255,251,244,.9); }
}

/* the map owns the bottom-left now; the way out moves to the bottom-right */
#flat-link{ left:auto; right:.9rem; }

/* ---------- the Say Hello form ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; margin:1.2rem 0 1.4rem; }
.form__row{ display:flex; flex-direction:column; gap:.3rem; }
.form__row--wide{ grid-column:1 / -1; }
.form label{ font-family:var(--display); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }
.form input, .form textarea{
  font:inherit; font-size:.95rem; color:var(--ink); background:rgba(255,255,255,.7);
  border:1px solid var(--line); border-radius:0; padding:.6rem .7rem; width:100%; box-sizing:border-box;
}
.form input:focus, .form textarea:focus{ outline:2px solid var(--blue); outline-offset:0; background:#fff; }
.form textarea{ resize:vertical; min-height:7rem; }
.form .btn{ justify-self:start; cursor:pointer; }
.form__row--wide:last-child{ flex-direction:row; align-items:center; gap:1rem; }
.form__status{ font-size:.9rem; color:var(--steel); }
.form__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } }

/* ---------- music: one small round button, bottom right ---------- */
/* music on/off. Drawn by its own rule once you're inside (v98), on top of
   everything in the play screen, solid so it reads over the dark carpet. */
#btn-music{
  position:fixed; right:1rem; bottom:1rem; z-index:50; width:2.8rem; height:2.8rem; border-radius:50%;
  display:none; align-items:center; justify-content:center; padding:0;
  background:rgba(255,251,244,.96); border:1px solid var(--line); color:var(--ink);
  font-size:1.3rem; line-height:1; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
body.music-ready #btn-music{ display:flex; }
#btn-music:hover{ transform:scale(1.08); }
#btn-music.off{ text-decoration:line-through; color:#8A7A70; }

/* ---------- v100 ---------- */
/* the way to the scroll page: blue, and hard to miss */
.landing__alt{ margin:1.6rem 0 0; font-size:1rem; color:var(--steel); }
.landing__alt a{ color:#2F6BFF; font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.landing__alt a:hover{ color:#0B2FA8; }
.landing__flat{ display:inline-block; margin-top:.4rem; color:#2F6BFF; font-weight:800; font-size:1.1rem; }
/* line breaks typed in the editor show as line breaks */
.landing__kicker, .landing__sub, #panel h2, #panel p, #panel dd, .kmsg, .panel__jonn, #about-body p, .facts li, .ov__nda{ white-space:pre-line; }
/* the music button steps aside while a panel is open */
body.ov-open #btn-music{ display:none !important; }