/* ============================================================
   MANNHULLET · 110 ÅR
   "Alle finner veien ned hit."
   A single continuous building, seen from a glass elevator.
   Scroll position is the elevator's position — nothing here
   fakes the descent with transforms; the browser's native
   scroll carries you straight down through the section.
   ============================================================ */

/* Palette, fonts, base reset, the NTH watermark, and the shared header-logo/
   social-links components all live in background.css, shared with
   om-jubileet.html and kontakt.html. This file only holds what's specific
   to the scrolling elevator experience on this page (plus a faithful port
   of the countdown reference page's hero content, colored with its own
   --accent/--accent-dim tokens rather than this page's --amber). */

/* ============ Global overlays ============ */
/* .grain and .vignette now live in background.css — every page shares them. */

/* ============ Sound toggle (index-only; header-logo/social-links chrome is in background.css) ============ */
.sound-toggle {
  display: flex; align-items: center; gap: 9px;
  background: none; border: none; cursor: pointer;
  color: rgba(147, 166, 194, 0.8);
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.2em;
  transition: color 0.2s ease;
}
.sound-toggle:hover, .sound-toggle:focus-visible { color: var(--amber); }
.sound-bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.sound-bars i { width: 2px; height: 4px; background: currentColor; opacity: 0.6; }
.sound-toggle[aria-pressed="true"] .sound-bars i { animation: eq 0.9s ease-in-out infinite; opacity: 1; }
.sound-bars i:nth-child(2){ animation-delay: 0.15s; } .sound-bars i:nth-child(3){ animation-delay: 0.3s; } .sound-bars i:nth-child(4){ animation-delay: 0.45s; }
@keyframes eq { 0%,100%{ height: 4px; } 50%{ height: 13px; } }

/* ============ Descent progress — always on screen, not just once you've scrolled ============
   A row of labelled floor stops down the left edge, spaced to match how far
   0 M / -4 M / -8 M / -14 M sit along the descent (--t per stop, 0 → 1).
   Every stop — including Kjelleren — lights up from --silver-dim to --amber
   the same way, purely as --depth reaches its own --t; nothing is forced on
   early, so Kjelleren only goes amber once you've actually arrived. */
.depth {
  position: fixed; left: calc(clamp(20px, 4vw, 48px) + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.depth-arrow {
  color: var(--amber); font-size: 13px; line-height: 1;
  animation: depth-arrow-bob 1.8s ease-in-out infinite;
}
@keyframes depth-arrow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* row-reverse puts the line first (flush against the left edge) and the
   labels second (extending inward), mirroring how the line sat flush
   against the right edge before */
.depth-row { display: flex; flex-direction: row-reverse; gap: 16px; }

.depth-line {
  position: relative; width: 1px; height: 34dvh; border-radius: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.depth-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--amber); border-radius: 1px; }

.depth-stops {
  list-style: none; height: 34dvh; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
}
.depth-stop {
  position: relative; font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in oklab, var(--caption), var(--amber) clamp(0%, calc((var(--depth) - var(--t) + 0.06) * 1600%), 100%));
  transition: color 0.3s var(--ease);
}
.depth-stop::before {
  content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 1px; background: currentColor; opacity: 0.7;
}
.depth-stop-name { display: block; font-size: 9.5px; opacity: 0.85; margin-top: 2px; letter-spacing: 0.24em; }
.depth-stop--dest { font-weight: 600; }

/* ============ The building ============ */
/* One plain gradient painted the full length of the page — dark navy into
   black, nothing else. No scenery, no objects to pass — just the wall
   slowly losing what little light it had. */
.building {
  position: relative;
  /* stops are tuned to this page's actual floor heights (atrium 100vh / transition
     260vh / cellar 100vh = 460vh total) so the tone reaches the cellar's own dark
     value by ~78% — exactly where the real photo begins — with no brightness jump
     at that seam. If the floor heights below change, shift these stops to match.
     Recomputed (linear RGB interpolation from --navy down to --concrete) so the
     fade stays smooth now that --navy is a proper, brighter navy blue rather
     than a near-black tone. */
  background: linear-gradient(to bottom,
    var(--navy) 0%,
    var(--navy) 24%,
    #0f1c30 36%,
    #0e1724 48%,
    #0d131b 58%,
    #0c0e11 68%,
    #0b0b0b 75%,
    var(--concrete) 78%,
    var(--concrete) 100%
  );
}

.floor { position: relative; width: 100%; }

/* ---- Floor 1: the hero — NTH watermark (shared, background.css) behind a countdown ---- */
.floor--atrium {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ---- Hero content: a faithful port of the countdown reference page's
   .content/.eyebrow/.countdown/.unit/.footer, dropped into this floor.
   Colors use --accent/--accent-dim (the reference's own blue accent) rather
   than --amber, matching that page exactly. ---- */
.content {
  position: relative; z-index: 2; text-align: center;
  /* padding-bottom offsets everything sitting above the countdown (eyebrow
     +.hero-title) so the countdown itself — not the whole centered block —
     lands on the floor's true center: .floor--atrium centers .content as a
     box, so anything added above the countdown needs matching weight added
     below it to keep the countdown itself centered rather than pushed down.
     3.5rem covers the eyebrow alone (its own rendered height); the extra
     4.5rem approximates .hero-title's height (including its own
     margin-bottom) across its clamp() range — not pixel-exact, but close
     enough that the deviation is a few px. */
  padding: 2rem; padding-bottom: 8rem;
  width: 100%; max-width: 1200px;
}

/* mobile-only stand-in for the fixed corner .header-logo (background.css) —
   hidden here by default so it never renders on desktop; shown and enlarged
   in its place at the top of the hero stack below <=600px, where
   .header-logo itself is hidden and .sound-toggle takes over its corner
   spot instead (see that query further down). */
.hero-logo { display: none; }

.hero-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.1;
  color: var(--platinum);
  margin-bottom: 1.75rem;
}

/* Same color, font, and size as .footer p below — the two bookend the
   countdown as one matching pair, rather than the top reading heavier or
   lighter than the bottom. */
.eyebrow {
  position: relative; top: -1rem;
  font-size: 1rem; font-weight: 500; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 2.5rem;
}

.countdown {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(0.8rem, 4vw, 3.5rem); margin-bottom: 4.5rem;
}
.unit { display: flex; flex-direction: column; align-items: center; min-width: clamp(3.5rem, 12vw, 9rem); }
.unit .value {
  font-family: var(--display); font-weight: 700; font-size: clamp(3.2rem, 10vw, 8.5rem);
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--platinum);
}
.unit .label { margin-top: 1rem; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase; color: var(--caption); }
.separator { display: flex; flex-direction: column; gap: 0.9rem; padding-top: clamp(1rem, 3.5vw, 3rem); }
.separator span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-dim); }

.footer {
  position: absolute;
  /* min() keeps the footer pinned just below the watermark on tall viewports,
     but stops it drifting all the way down to the bottom edge on short/wide
     ones — 8.5rem keeps a little breathing margin under it. */
  top: min(calc(50% + clamp(5rem, 20vw, 15rem) + 1.5rem), calc(100% - 8.5rem));
  left: 0; right: 0; text-align: center; z-index: 2;
}
.footer hr { border: none; border-top: 1px solid rgba(147, 166, 194, 0.25); width: 160px; margin: 0 auto 1.6rem; }
.footer p { font-size: 1rem; font-weight: 500; letter-spacing: 0.45em; text-transform: uppercase; color: var(--accent); }
/* .save-date intentionally has no typography of its own — it fully inherits
   .footer p so "Hold av datoen" reads as the same design system as the
   eyebrow and the date line, just spaced above it */
.footer .save-date { margin-bottom: 0.5rem; }

/* .header-nav (Les mer / Kontakt oss / Returnerende) is now a shared
   component in background.css — om-jubileet.html/kontakt.html/returnerende.html
   use the same fixed top nav, not just this page. */

/* ---- Entrance fade — same choreography as the countdown reference page ---- */
.hero-logo, .hero-title, .eyebrow, .countdown, .footer, .header-logo, .header-nav, .corner-right {
  opacity: 0;
  animation: fadeUp 0.9s ease forwards;
}
.header-logo, .header-nav, .corner-right { animation-delay: 0.2s; }
/* .hero-logo leads the stack (no delay override — 0s, same as the base
   rule) so it fades in first, ahead of the title, on mobile. */
.hero-title { animation-delay: 0.1s; }
.eyebrow { animation-delay: 0.2s; }
.countdown { animation-delay: 0.4s; }
.footer { animation-delay: 0.6s; }
/* @keyframes fadeUp is shared, defined once in background.css */

/* ---- The descent: an empty stretch of the same wall, just dimming. No
   scenery, no objects — the fade itself is the whole effect. ---- */
.floor--transition { min-height: 260dvh; }

/* a plaque on the wall you pass on the way down — static, no fade choreography needed */
.waypoint {
  position: absolute; left: 50%; top: var(--wy); transform: translate(-50%, -50%);
  z-index: 2; text-align: center; padding: 0 26px; max-width: 640px;
}
.waypoint-lead { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 5.2vw, 58px); line-height: 1.1; color: #f1e6d8; opacity: 0.85; }
.waypoint-body { margin-top: clamp(14px, 2.6vh, 26px); font-size: clamp(12px, 1.6vw, 17px); font-weight: 300; letter-spacing: 0.13em; color: rgba(241,230,216,0.6); line-height: 1.7; }

/* ---- The cellar: not a scene that appears, but an image that slowly
   surfaces out of the same darkness the whole page has been fading into ---- */
/* shares --concrete with the gradient above it (rather than a separate #000)
   so the two are never a color apart at the seam. overflow:hidden (matching
   .floor--atrium above) clips .cellar-img's own transform:scale(1.06) bleed
   to this floor's box — without it, that 6% scale adds ~27px of the image's
   overflow to the *document's* scrollable height, which lets the page
   scroll 27px past where this floor's real bottom edge is. Everything not
   itself transformed (the .cellar-hint text + its shadow scrim below) stays
   pinned to that real edge, so at true max-scroll it end up 27px short of
   the viewport bottom — a gap that exposes raw, unshadowed photo beneath
   the caption instead of the scrim reaching all the way down. */
.floor--cellar { min-height: 100dvh; background: var(--concrete); overflow: hidden; }
.cellar-img {
  position: absolute; inset: 0;
  background-image: url("img/kjelleren.jpg");
  background-size: cover; background-position: 50% 42%;
  transform: scale(1.06);
  /* emerges very gradually, starting almost indistinguishable from the
     surrounding dark and only fully resolving right at the last moment —
     a longer, darker overlap than a simple scroll-into-view reveal */
  opacity: clamp(0, calc((var(--depth) - 0.74) * 3.85), 1);
  filter: saturate(1.05) contrast(1.05) brightness(clamp(0.3, calc(0.3 + (var(--depth) - 0.74) * 2.7), 1));
  /* a shadow framing the sides of the photo, growing in as it arrives — gives
     the image its own edge and a clearer sense of "you've reached a room",
     rather than it just being an extension of the fade behind it */
  box-shadow:
    inset 0 0 100px 20px rgba(0,0,0, calc(var(--depth) * 0.45)),
    inset 90px 0 90px -70px rgba(0,0,0, calc(var(--depth) * 0.6)),
    inset -90px 0 90px -70px rgba(0,0,0, calc(var(--depth) * 0.6));
  /* the photo's own top edge is a hard rectangle no matter how slowly its
     opacity fades in over scroll — this masks that edge into a gradient so
     it blends into the wall above it instead of cutting straight across */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 32%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 32%, black 100%);
}

/* hotspots — dots are positioned in percentages of .floor--cellar (via --x/--y,
   set inline per-dot from the HOTSPOTS config in script.js), the same box
   .cellar-img fills with background-size:cover — so a dot placed on an object
   in the photo tracks that object at any viewport width, never viewport px. */
.hotspots { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; transition: opacity 0.9s var(--ease); }
body.menu-live .hotspots { opacity: 1; pointer-events: auto; }

/* The top nav (Les mer / Kontakt oss / Returnerende) leads back to the
   site's other top-level pages — once the cellar photo starts resolving,
   it recedes so Kjelleren reads as a self-contained domain rather than
   just more page. Triggered by nav-recede (depth >= 0.74, the same point
   .cellar-img itself starts fading in) rather than menu-live (0.93, when
   the hotspots go interactive) so the nav's exit is paced with the photo's
   own arrival instead of lagging behind it until the very end.
   `animation: none` drops the entrance fadeUp (whose forwards fill would
   otherwise keep pinning opacity to 1, outranking a plain opacity rule)
   so the transition below is free to animate opacity on its own; leaving
   nav-recede re-triggers fadeUp from scratch, echoing the original reveal. */
.header-nav { transition: opacity 0.9s var(--ease); }
body.nav-recede .header-nav { animation: none; opacity: 0; pointer-events: none; }
/* Each dot is a <button> with a fixed 44x44 hit area (WCAG target-size) —
   the visible core stays 8px; the hit box grows around it, never the dot
   itself. .hot-name is positioned absolutely off the dot's own center
   rather than sitting in the flex flow, so it never pulls the dot itself
   off-target while invisible (the old row-centering approach did exactly
   that — a big part of why dots used to drift off their objects). */
.hot {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
}
.hot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 50%; }

.hot-dot {
  position: relative; width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--amber);
  /* resting glow — without this the dot only stood out on hover, which
     doesn't help before someone's found it in the first place */
  box-shadow: 0 0 10px 2px rgba(255,122,30,0.5);
  transition: background 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.15s ease-out;
}
/* the pulsing ring — the only thing on this page that pulses. Static chrome
   (depth scale, nav) stays flat; motion is reserved for "this is clickable". */
.hot-dot::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid rgba(255,122,30,0.5);
  transform: translate(-50%, -50%) scale(1);
  animation: hot-pulse 3s var(--ease) infinite;
  animation-delay: var(--delay, 0s);
  transition: width 0.15s ease-out, height 0.15s ease-out, border-color 0.15s ease-out;
}
@keyframes hot-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.25; }
}

.hot:hover .hot-dot, .hot:focus-visible .hot-dot {
  background: #ff9142; box-shadow: 0 0 14px 3px rgba(255,122,30,0.85);
}
.hot:hover .hot-dot::before, .hot:focus-visible .hot-dot::before {
  width: 40px; height: 40px; border-color: rgba(255,122,30,0.6);
  animation-play-state: paused;
}

/* visited: dims permanently for the session (JS-tracked, not localStorage)
   so people can see at a glance what they've already opened */
.hot.visited .hot-dot { opacity: 0.5; }

.hot-name {
  position: absolute; top: 50%; left: 100%; transform: translate(8px, -50%);
  white-space: nowrap; padding: 6px 12px; border-radius: 100px;
  background: rgba(10,8,6,0.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,180,120,0.22);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.hot:hover .hot-name, .hot:focus-visible .hot-name { opacity: 1; transform: translate(14px, -50%); }
/* dots past 70% left get this class from script.js so the label opens toward
   the left instead of running off the edge of the frame */
.hot--flip .hot-name { left: auto; right: 100%; transform: translate(-8px, -50%); }
.hot--flip:hover .hot-name, .hot--flip:focus-visible .hot-name { transform: translate(-14px, -50%); }

/* .hotspot-list used to be a <=768px stacked-list fallback for the overlay
   dots (a plain menu, not the photo itself, to dodge crowding on small
   screens) — dropped once the current 3-hotspot layout proved to have
   plenty of clearance between dots even on the narrowest phones, so mobile
   now gets the same tap-the-photo interaction as desktop. Left rendered
   (renderHotspots() in script.js still builds it) but permanently hidden,
   rather than ripping the markup/JS out, in case a future layout with more
   hotspots needs the fallback again. */
.hotspot-list { display: none; }

.cellar-hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; justify-content: center;
  padding: clamp(28px, 8vh, 56px) 20px clamp(20px, 5vh, 42px);
  /* scrim behind the caption — it's the only text explaining the whole
     mechanic, so it needs to hold contrast over a busy photo, not just a
     flat dark background */
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0) 100%);
  opacity: 0; transition: opacity 0.9s var(--ease) 0.3s; pointer-events: none;
}
.cellar-hint span {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: #fdf3ea; /* near-white against the scrim — clears 4.5:1 with room to spare */
}
body.menu-live .cellar-hint { opacity: 1; }

/* ============ Modal ============ */
.modal-root { position: fixed; inset: 0; z-index: 100; display: none; }
.modal-root.open { display: block; }
.modal-scrim { position: absolute; inset: 0; background: rgba(4,7,12,0.72); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.4s var(--ease); }
.modal-root.open .modal-scrim { opacity: 1; }
.modal {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(520px, 92vw);
  background: linear-gradient(180deg, #17120d, #0d0a07);
  border-left: 1px solid rgba(255,150,80,0.18);
  padding: clamp(28px, 5vw, 56px); overflow-y: auto;
  padding-right: calc(clamp(28px, 5vw, 56px) + env(safe-area-inset-right, 0px));
  transform: translateX(100%); transition: transform 0.5s var(--ease);
  box-shadow: -40px 0 80px rgba(0,0,0,0.6);
}
.modal-root.open .modal { transform: none; }
.modal-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: var(--silver-dim); font-size: 30px; line-height: 1; cursor: pointer; transition: color 0.3s; }
.modal-close::before { content: ""; position: absolute; inset: -8px; }
.modal-close:hover { color: var(--amber); }
.modal-kicker { font-size: 11px; letter-spacing: 0.4em; color: var(--amber); text-transform: uppercase; margin-bottom: 14px; }
.modal-title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 6vw, 52px); color: var(--platinum); line-height: 1; margin-bottom: 26px; }
.modal-body { font-weight: 300; font-size: 15px; line-height: 1.75; color: #cbb8a6; }
.modal-body p { margin-bottom: 16px; }
.modal-body strong { color: #f3e6d8; font-weight: 500; }
/* .btn and .tl (timeline) are shared components from background.css */

/* ============ Lightbox — full-size gallery viewer, above the modal
   (z-index 200 > .modal-root's 100) so it visibly layers on top of the
   still-open gallery modal rather than replacing it ============ */
.lightbox-root { position: fixed; inset: 0; z-index: 200; display: none; }
.lightbox-root.open { display: block; }
.lightbox-scrim { position: absolute; inset: 0; background: rgba(4,7,12,0.85); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.3s var(--ease); }
.lightbox-root.open .lightbox-scrim { opacity: 1; }
.lightbox {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: clamp(16px, 5vw, 48px);
  opacity: 0; transform: scale(0.97); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox-root.open .lightbox { opacity: 1; transform: none; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.lightbox-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: var(--silver-dim); font-size: 30px; line-height: 1; cursor: pointer; transition: color 0.3s; }
.lightbox-close::before { content: ""; position: absolute; inset: -8px; }
.lightbox-close:hover, .lightbox-close:focus-visible { color: var(--amber); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,150,80,0.25); border-radius: 50%;
  width: 44px; height: 44px; color: var(--platinum); font-size: 24px; line-height: 1;
  cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible { color: var(--amber); border-color: var(--amber); background: rgba(0,0,0,0.55); }
.lightbox-prev { left: clamp(8px, 3vw, 32px); }
.lightbox-next { right: clamp(8px, 3vw, 32px); }

/* featured track — dashed border marks it clearly as a placeholder until
   a real file/embed is added (see FEATURED_TRACK in script.js) */
.featured-track {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; margin: 14px 0;
  border: 1px dashed rgba(255,150,80,0.35); border-radius: 8px;
  background: rgba(255,122,30,0.05);
}
.featured-track-label { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); }
.featured-track-name { font-family: var(--serif); font-size: 18px; color: var(--platinum); }
.featured-track-status { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-dim); font-style: italic; }

/* gallery / program / merch */
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.gal .cell {
  aspect-ratio: 4/3; background-color: #1c1510; background-size: cover; background-position: center;
  position: relative; overflow: hidden;
  display: block; width: 100%; padding: 0; border: none; border-radius: 4px; cursor: pointer;
  transition: opacity 0.15s ease-out;
}
.gal .cell:hover, .gal .cell:focus-visible { opacity: 0.85; }
.gal .cell:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.gal .cell.ph { display: flex; align-items: center; justify-content: center; color: #6b5947; font-size: 11px; letter-spacing: 0.24em; }
.prog { list-style: none; }
.prog li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.prog .t { font-family: var(--serif); font-size: 20px; color: var(--amber); flex: none; width: 70px; }
.merch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.merch .item { border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 16px; }
.merch .item .nm { color: #f3e6d8; margin-bottom: 4px; }
.merch .item .pr { font-family: var(--serif); font-size: 22px; color: var(--amber); }
/* .contact-row is a shared component from background.css */

/* ============ Responsive ============ */
/* watermark breakpoint is in background.css */
@media (max-width: 720px) {
  .depth { display: none; }
}

/* Kept (not deleted) in case the list fallback comes back for a future,
   busier hotspot layout — see the .hotspot-list comment above. Styling is
   preserved here, just no longer wired to any breakpoint that shows it. */
.hotspot-list {
  position: absolute; left: 50%; bottom: clamp(70px, 16vh, 120px);
  transform: translateX(-50%);
  width: min(320px, 86vw); z-index: 4;
  background: rgba(10,8,6,0.78); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,180,120,0.18); border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
}
.hotspot-list li + li { border-top: 1px solid rgba(255,255,255,0.08); }
.hotspot-list button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 18px; background: none; border: none; color: #fff;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: left; cursor: pointer;
}
.hotspot-list button::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); transition: opacity 0.15s ease-out;
}
.hotspot-list button:hover, .hotspot-list button:focus-visible { color: var(--amber); }
.hotspot-list button.visited::before { opacity: 0.5; }
/* .header-nav's own <=960px breakpoint is shared, in background.css */

/* ---- Mobile tweaks (matches the countdown reference page) ---- */
@media (max-width: 600px) {
  /* The corner .header-logo (background.css) moves into the hero stack
     here instead — bigger, sitting where "Jubileum" used to start, which
     also pushes the title/eyebrow/countdown/watermark down a bit for free
     (see the .hero-logo comment above .hero-title for why: growing .content
     from the top shifts its flex-centered midpoint, and everything below
     it, down by roughly half of .hero-logo's own height). .sound-toggle
     takes over the vacated corner spot (see .corner-right below, which is
     what actually moves it there). */
  .header-logo { display: none; }
  .hero-logo {
    display: inline-block;
    width: clamp(100px, 30vw, 170px);
    height: auto;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 30px rgba(91, 130, 196, 0.18));
  }
  /* combines with .watermark's own translateX(0.044em) optical-centering
     correction (background.css) rather than overwriting it — a bare
     translateY here would silently drop that fix. */
  .watermark { transform: translateX(0.044em) translateY(4.5rem); }

  /* .sound-toggle (markup order: Lyd, then .social-links — see index.html)
     moves to the opposite corner via plain flexbox rather than its own
     position:fixed: stretching .corner-right edge-to-edge and switching to
     space-between pushes the first child to the left padded edge and the
     last to the right one, using ordinary flex layout instead of a
     position:fixed element nested inside another position:fixed container
     — which in testing did not reliably escape the row on-device. */
  .corner-right {
    left: 0;
    right: 0;
    justify-content: space-between;
    padding: 0 calc(clamp(0.9rem, 3vw, 1.75rem) + env(safe-area-inset-right, 0px)) 0 calc(clamp(0.9rem, 3vw, 1.75rem) + env(safe-area-inset-left, 0px));
  }

  .separator span { width: 6px; height: 6px; }
  .separator { gap: 0.6rem; }
  .countdown { margin-bottom: 3rem; }
  /* the desktop top:min(...) formula pins the footer just below the
     watermark, which reads fine on wide/short desktop viewports but leaves
     a big empty gap under it on tall phones, where 50%-of-viewport sits
     nowhere near the bottom. Simpler on mobile: anchor from the bottom
     directly, so "Hold av datoen" always sits near the true bottom edge. */
  .footer {
    top: auto;
    bottom: calc(clamp(1.5rem, 5vh, 3rem) + env(safe-area-inset-bottom, 0px));
  }
  .eyebrow, .footer p { font-size: 0.73rem; letter-spacing: 0.28em; }
  .footer .save-date { margin-bottom: 0.35rem; }
}

/* ---- Small phones: prevent the countdown row from overflowing ---- */
@media (max-width: 420px) {
  .content { padding-left: 1rem; padding-right: 1rem; }
  .countdown { gap: 0.5rem; }
  .unit { min-width: 2.4rem; }
  .unit .value { font-size: 2.2rem; }
  .unit .label { font-size: 0.6rem; letter-spacing: 0.2em; margin-top: 0.6rem; }
  .separator { gap: 0.5rem; padding-top: 0.7rem; }
}

/* ---- Narrowest phones (e.g. iPhone SE, ~320px) ---- */
@media (max-width: 360px) {
  .content { padding-left: 0.75rem; padding-right: 0.75rem; }
  .countdown { gap: 0.3rem; }
  .unit { min-width: 2rem; }
  .unit .value { font-size: 1.7rem; }
  .unit .label { font-size: 0.5rem; letter-spacing: 0.14em; }
}

/* ---- Landscape phones: shrink vertical rhythm so countdown + footer don't
   collide when height is short ---- */
@media (orientation: landscape) and (max-height: 500px) {
  .content { padding: 1rem 1rem 1.75rem; }
  .eyebrow { margin-bottom: 1rem; }
  .countdown { margin-bottom: 1.5rem; gap: clamp(0.5rem, 2vw, 1.5rem); }
  .unit { min-width: 2.8rem; }
  .unit .value { font-size: clamp(2rem, 9vh, 4rem); }
  .unit .label { margin-top: 0.4rem; font-size: 0.62rem; letter-spacing: 0.2em; }
  .separator { gap: 0.5rem; padding-top: 0.6rem; }
  .watermark { font-size: clamp(5rem, 34vh, 11rem); }
  .footer { top: calc(50% + clamp(5rem, 34vh, 11rem) / 2 + 0.8rem); padding-bottom: 1rem; }
  .footer hr { margin-bottom: 0.8rem; }
  .eyebrow, .footer p { font-size: 0.8rem; letter-spacing: 0.32em; }
  .footer .save-date { margin-bottom: 0.4rem; }
}

/* ---- Shortest phones (e.g. iPhone SE landscape, 320px tall) ---- */
@media (orientation: landscape) and (max-height: 360px) {
  .footer { top: calc(50% + clamp(5rem, 34vh, 11rem) / 2 + 0.4rem); padding-bottom: 0.5rem; }
  .footer hr { margin-bottom: 0.4rem; }
  .eyebrow, .footer p { font-size: 0.7rem; }
  .footer .save-date { margin-bottom: 0.3rem; }
}

/* shorter, faster descent — same continuous building, less scroll distance */
@media (prefers-reduced-motion: reduce) {
  .floor--atrium { min-height: 50dvh; }
  .floor--transition { min-height: 100dvh; }
  .floor--cellar { min-height: 50dvh; }
  .hot-dot::before, .sound-bars i, .grain { animation: none !important; }
  .hot-dot::before { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  .hero-logo, .hero-title, .eyebrow, .countdown, .footer, .header-logo, .header-nav, .nav-toggle, .corner-right {
    animation: none;
    opacity: 1;
  }
}