/*
Theme Name: Vita Coenen
Theme URI: https://vitacoenen.nl
Author: Vita Coenen
Author URI: https://vitacoenen.nl
Description: Personal portfolio theme for Vita Coenen — a playful clear-the-desk landing with four interactive hands surrounding a Vita centerpiece. Sections (Vrij werk, Blog, Ontwerp, Onderzoek, Contact) are managed in WordPress; navigation between them is animated client-side without page reloads.
Version: 0.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: All rights reserved
Text Domain: vita-coenen
*/

/* =========================================================
   Vita Coenen — landing
   Plain HTML/CSS/JS. Desktop-first. Mobile comes later.
   Will be ported to a WordPress theme; keep markup/CSS
   framework-agnostic and asset paths relative.
   ========================================================= */

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

html, body { margin: 0; padding: 0; }

html {
  /* token: type scale base */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Vina Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #111;
  background: #fff;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ---------- Design tokens ---------- */
:root {
  --color-ink: #111;
  --color-bg: #fff;
  --color-vrij-werk: #4fb6b1;   /* teal scissors */
  --color-blog: #2540d6;        /* blue pen */
  --color-ontwerp: #ee5a26;     /* orange house */
  --color-onderzoek: #1f8a5a;   /* green eye */
}

/* ---------- Stage ---------- */
.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

/* ---------- Centerpiece (single SVG: Vita wordmark + star + tagline + Contact) ---------- */
/* Visually-hidden helper for accessible labels */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.centerpiece {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Width is the controlling dimension; SVG aspect (808:573) handles height */
  width: clamp(360px, 38vw, 720px);
  cursor: pointer;
  display: block;
  outline: none;
}

.centerpiece:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 8px;
  border-radius: 6px;
}

.centerpiece__frames {
  position: relative;
  display: block;
  width: 100%;
}

.centerpiece__frame {
  display: block;
  opacity: 0;
  /* Hard cut — no fade */
  transition: none;
}

.centerpiece__frame--rest {
  opacity: 1;
  position: relative;
}

.centerpiece__frame--hover {
  position: absolute;
  inset: 0;
}

.centerpiece__frame svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Hover: swap rest -> hover, hard cut */
.centerpiece:hover .centerpiece__frame--rest,
.centerpiece:focus-visible .centerpiece__frame--rest { opacity: 0; }

.centerpiece:hover .centerpiece__frame--hover,
.centerpiece:focus-visible .centerpiece__frame--hover { opacity: 1; }

/* ---------- Hands ---------- */
.hand {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  /* one box for the artwork + label */
  pointer-events: auto;
  outline: none;
}

.hand:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 8px;
  border-radius: 6px;
}

.hand__frames {
  position: relative;
  display: block;
  width: clamp(var(--hand-size-min), var(--hand-size-pref), var(--hand-size-max));
  /* aspect ratio handled by SVG viewBox */
}

.hand__frame {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  /* Hard cut between frames — no fade. Stop-motion feel. */
  transition: none;
}

.hand__frame svg {
  display: block;
  width: 100%;
  height: auto;
}

/* First frame in flow establishes the box height */
.hand__frame--rest {
  position: relative;
  opacity: 1;
}

/* ----- Swap mode (CSS only): rest <-> hover ----- */
.hand[data-hover-mode="swap"]:hover .hand__frame--rest,
.hand[data-hover-mode="swap"]:focus-visible .hand__frame--rest { opacity: 0; }

.hand[data-hover-mode="swap"]:hover .hand__frame--hover,
.hand[data-hover-mode="swap"]:focus-visible .hand__frame--hover { opacity: 1; }

/* ----- Loop mode (JS-driven): show frame matching data-active-frame ----- */
.hand[data-hover-mode="loop"] .hand__frame { opacity: 0; }
.hand[data-hover-mode="loop"] .hand__frame--rest { opacity: 1; }

.hand[data-hover-mode="loop"][data-active-frame="0"] .hand__frame[data-frame="0"] { opacity: 1; }
.hand[data-hover-mode="loop"][data-active-frame="1"] .hand__frame[data-frame="1"] { opacity: 1; }
.hand[data-hover-mode="loop"][data-active-frame="2"] .hand__frame[data-frame="2"] { opacity: 1; }
.hand[data-hover-mode="loop"][data-active-frame="3"] .hand__frame[data-frame="3"] { opacity: 1; }

.hand[data-hover-mode="loop"][data-active-frame="0"] .hand__frame--rest,
.hand[data-hover-mode="loop"][data-active-frame="1"] .hand__frame--rest,
.hand[data-hover-mode="loop"][data-active-frame="2"] .hand__frame--rest,
.hand[data-hover-mode="loop"][data-active-frame="3"] .hand__frame--rest { opacity: 0; }

.hand[data-hover-mode="loop"][data-active-frame="0"] .hand__frame[data-frame="0"] { opacity: 1; }

/* ---------- Per-hand placement (labels are baked into each SVG) ---------- */

/* Top-left: scissors → "VRIJ WERK" label is baked into the SVG */
.hand--vrij-werk {
  top: 0;
  left: 12vw;
}
/* Vrij werk SVG is tall portrait; size by visual weight similar to Ontwerp */
.hand--vrij-werk .hand__frames {
  width: clamp(140px, 18vw, 432px);
}

/* Top-right: pen-holding hand → "BLOG" label is baked into the SVG */
.hand--blog {
  top: 2vw;
  right: 0;
}
/* The Blog SVG is wider than the default square frame; give it more horizontal room. */
.hand--blog .hand__frames {
  width: clamp(240px, 31.5vw, 760px);
}

/* Bottom-left: house in hand → "ONTWERP" label is baked into the SVG */
.hand--ontwerp {
  bottom: 0;
  left: 0;
  /* SVG has its own whitespace; no padding needed */
}
/* Ontwerp SVG is portrait-oriented; size by height to keep visual weight similar to Blog */
.hand--ontwerp .hand__frames {
  width: clamp(180px, 24vw, 580px);
}

/* Bottom-right: eye in hand → "ONDERZOEK" label is baked into the SVG */
.hand--onderzoek {
  bottom: 0;
  right: 0;
  /* SVG has its own whitespace; no padding needed */
}
.hand--onderzoek .hand__frames {
  width: clamp(240px, 31.5vw, 760px);
}

/* ---------- Section panels + clear-the-desk transitions ---------- */

/* Items have a baseline translate of 0; transition is enabled so the
   "off-screen" state animates in/out smoothly. */
.hand,
.centerpiece {
  transition: transform 400ms cubic-bezier(0.6, 0.05, 0.2, 0.9),
              opacity 400ms ease;
}

/* When `no-anim` is set on the stage (during initial state restoration
   after a soft-nav or direct visit), suppress transitions so items snap
   into the open state instead of animating from default → off-screen. */
.stage.no-anim,
.stage.no-anim .hand,
.stage.no-anim .centerpiece,
.stage.no-anim .section,
.stage.no-anim .close-btn {
  transition: none !important;
}

/* When a section is open, every non-active item slides off in its corner direction.
   The clicked item gets `data-active` and stays put. */
.stage.is-section-open .hand:not([data-active]) {
  pointer-events: none;
}
.stage.is-section-open .hand--vrij-werk:not([data-active]) {
  transform: translate(-110%, -110%);
}
.stage.is-section-open .hand--blog:not([data-active]) {
  transform: translate(110%, -110%);
}
.stage.is-section-open .hand--ontwerp:not([data-active]) {
  transform: translate(-110%, 110%);
}
.stage.is-section-open .hand--onderzoek:not([data-active]) {
  transform: translate(110%, 110%);
}
/* Centerpiece (when not the active item) drifts up and fades */
.stage.is-section-open .centerpiece:not([data-active]) {
  transform: translate(-50%, -50%) translateY(-30vh);
  opacity: 0;
  pointer-events: none;
}

/* Centerpiece (when IT IS the active item, i.e. Contact is open):
   shrink it and slide it to the top so it acts as a mini-header.
   We animate via `transform` only — that way scale + translate are
   smooth (transform is in the transition list; width/top are not). */
.stage.is-section-open .centerpiece[data-active] {
  /* From its base position (top:50%, left:50%, transform: translate(-50%,-50%))
     we scale down and slide upward. The translateY uses negative vh to
     move toward the top edge of the viewport. */
  transform: translate(-50%, -50%) translateY(-38vh) scale(0.32);
  transform-origin: center center;
}

/* Disable hover swap on the active centerpiece — clicking it again
   would close the section (handled in JS), so the rest SVG should stay
   stable and not flip to hover state on mouseover. */
.stage.is-section-open .centerpiece[data-active]:hover .centerpiece__frame--rest,
.stage.is-section-open .centerpiece[data-active]:focus-visible .centerpiece__frame--rest {
  opacity: 1;
}
.stage.is-section-open .centerpiece[data-active]:hover .centerpiece__frame--hover,
.stage.is-section-open .centerpiece[data-active]:focus-visible .centerpiece__frame--hover {
  opacity: 0;
}

/* Stagger the exits so it feels alive (50ms apart in clockwise-from-top-left order) */
.stage.is-section-open .hand--vrij-werk { transition-delay: 0ms; }
.stage.is-section-open .hand--blog      { transition-delay: 50ms; }
.stage.is-section-open .hand--onderzoek { transition-delay: 100ms; }
.stage.is-section-open .hand--ontwerp   { transition-delay: 150ms; }
.stage.is-section-open .centerpiece     { transition-delay: 100ms; }

/* When closing (no .is-section-open), reset delays so the return is uniform & quick */
.stage:not(.is-section-open) .hand,
.stage:not(.is-section-open) .centerpiece { transition-delay: 0ms; }

/* Section content panels */
.section {
  position: absolute;
  inset: 0;
  /* Scroll when content overflows the viewport */
  overflow-y: auto;
  overflow-x: hidden;
  /* Hidden by default; JS unhides + adds .is-visible */
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease 250ms; /* fade in after items have started leaving */
  /* Subtle scrollbar styling so it doesn't fight the design */
  scrollbar-width: thin;
}

.section.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Close button ---------- */
.close-btn {
  position: fixed;
  top: clamp(1rem, 2.5vh, 2rem);
  left: clamp(1rem, 2.5vw, 2.5rem);
  right: auto;
  z-index: 50;

  width: clamp(36px, 3.5vw, 56px);
  height: clamp(36px, 3.5vw, 56px);
  padding: 0;

  background: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  transform-origin: center center;

  /* Hidden by default; shown when a section is open */
  opacity: 0;
  pointer-events: none;
  /* opacity fades in after other items leave; transform is hard-cut
     (no transition) so hover/unhover both snap instantly */
  transition: opacity 250ms ease 350ms;
}

.stage.is-section-open .close-btn {
  opacity: 1;
  pointer-events: auto;
}

.stage.is-section-open .close-btn:hover,
.stage.is-section-open .close-btn:focus-visible {
  transform: rotate(15deg);
  transition: none;
}

.close-btn:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 6px;
  border-radius: 4px;
}

.close-btn svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Back arrow (detail pages) ---------- */
.back-btn {
  position: fixed;
  top: clamp(1rem, 2.5vh, 2rem);
  left: clamp(1rem, 2.5vw, 2.5rem);
  z-index: 50;

  /* Wider than the close button — back-arrow SVG is landscape (229:137) */
  width: clamp(56px, 5.5vw, 88px);
  height: auto;

  display: block;
  cursor: pointer;
  outline: none;
  transform-origin: left center;
  /* No animated transitions — hard-cut hover, matches the site feel. */
}

.back-btn svg {
  display: block;
  width: 100%;
  height: auto;
}

.back-btn:hover,
.back-btn:focus-visible {
  /* Hard-cut nudge to the left, signalling "back". */
  transform: translateX(-6px);
  transition: none;
}

.back-btn:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 6px;
  border-radius: 4px;
}



.section__inner {
  max-width: 72ch;
  margin: 0 auto;
  /* Generous top/bottom padding so content clears the centerpiece area */
  padding: clamp(8rem, 14vh, 14rem) clamp(1.5rem, 4vw, 4rem) clamp(4rem, 8vh, 8rem);
  text-align: left;
}

/* Wider variant for image grids — leaves safe space for the still-visible
   active hand on whichever corner, but generous on big screens. */
.section__inner--wide {
  max-width: min(1500px, 92vw);
}

/* Per-section safe-area padding so content doesn't slide under the
   still-visible active hand. Each variant reserves space on the corner
   that the section's hand occupies. */
.section--vrij-werk .section__inner {
  /* hand top-left → reserve top + left */
  padding-top: clamp(10rem, 22vh, 20rem);
  padding-left: clamp(220px, 22vw, 480px);
}
.section--blog .section__inner {
  /* hand top-right → reserve mainly top, modest right inset.
     Wider reading column for long-form posts. */
  max-width: 110ch;
  padding-top: clamp(12rem, 26vh, 24rem);
  padding-right: clamp(1.5rem, 4vw, 4rem);
  padding-left: clamp(1.5rem, 4vw, 4rem);
}
.section--ontwerp .section__inner {
  /* hand bottom-left → reserve bottom + left */
  padding-bottom: clamp(10rem, 22vh, 20rem);
  padding-left: clamp(220px, 26vw, 600px);
}
.section--onderzoek .section__inner {
  /* hand bottom-right → reserve bottom + right */
  padding-bottom: clamp(10rem, 22vh, 20rem);
  padding-right: clamp(280px, 33vw, 780px);
}
.section--contact .section__inner {
  /* The centerpiece stays visible but shrinks to a top header when
     contact is active. Reserve enough top space for it to sit above
     the section content. */
  padding-top: clamp(12rem, 28vh, 22rem);
  max-width: min(1400px, 88vw);
}

.section__lead {
  font-family: "Vina Sans", sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  line-height: 1.4;
  margin: 0 0 2em;
  letter-spacing: 0.02em;
}

.section p {
  font-size: clamp(1rem, 1.1vw, 1.25rem);
  line-height: 1.6;
  margin: 0 0 1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Image grid (masonry via CSS columns) ---------- */
.image-grid {
  column-count: 3;
  column-gap: clamp(0.75rem, 1.4vw, 1.5rem);
}

.image-grid__item {
  /* break-inside prevents items splitting between columns */
  break-inside: avoid;
  margin: 0 0 clamp(0.75rem, 1.4vw, 1.5rem);
  display: block;
  position: relative;
  overflow: hidden;
  background: #f3f3f3;
  transition: transform 200ms ease;
}

.image-grid__item img {
  display: block;
  width: 100%;
  height: auto;
}

.image-grid__item:hover {
  transform: translateY(-2px);
}

/* Responsive column count for narrower viewports */
@media (max-width: 1100px) {
  .image-grid { column-count: 2; }
}
@media (max-width: 600px) {
  .image-grid { column-count: 1; }
}

/* ---------- WordPress Gallery block compatibility ----------
   The block editor outputs `<figure class="wp-block-gallery">` with an
   inner `<ul>` of items. The vita_render_gallery_block() filter in
   functions.php tags the outer figure with .image-grid and each inner
   figure with .image-grid__item — these overrides neutralise the
   block's default flex/grid layout so our CSS columns can take over. */
.image-grid.wp-block-gallery,
.image-grid.wp-block-gallery.is-layout-flex,
.image-grid.wp-block-gallery.is-layout-grid {
  display: block;
  gap: 0;
  margin: 0;
  padding: 0;
}

.image-grid.wp-block-gallery > ul,
.image-grid.wp-block-gallery .blocks-gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.image-grid .wp-block-image {
  /* Already has .image-grid__item via the filter; reset block defaults */
  display: block;
  width: auto !important;
  flex: none !important;
  margin: 0 0 clamp(0.75rem, 1.4vw, 1.5rem);
}

.image-grid .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hide the block-editor caption styling we don't want; caption text still
   appears (we wrap it ourselves in figcaption). */
.image-grid figcaption {
  font-family: "Vina Sans", sans-serif;
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666;
  margin: 0.5em 0 0;
}

/* ---------- Project tiles (auto-listed child pages with featured images) ---------- */
.image-grid--projects {
  /* Inherits column-count etc. from .image-grid */
}

.image-grid__item--project {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.image-grid__item--project .image-grid__figure {
  margin: 0;
  position: relative;
  background: #f3f3f3;
  overflow: hidden;
}

.image-grid__item--project img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 300ms ease;
}

.image-grid__item--project:hover img,
.image-grid__item--project:focus-visible img {
  transform: scale(1.03);
}

.image-grid__caption {
  font-family: "Vina Sans", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0.6em 0 0;
  padding: 0;
  line-height: 1.1;
}

.image-grid__item--project:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

/* Section intro text above the project grid (parent page's own content) */
.section__intro {
  margin-bottom: clamp(1.5rem, 3vh, 3rem);
}

/* ---------- Detail pages (single project / single blog post) ----------
   The matching section hand stays in its corner as a back link.
   The page's main content sits in the section panel as usual. */
.section--detail {
  /* Always visible; no opacity transition. */
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
}

/* ---------- Soft-navigation fade (stage-only) ----------
   When the JS swaps stage contents during a soft navigation, fade the
   stage out -> swap -> fade in. The body never goes blank, so the
   browser never paints a flash of white. */
.stage {
  transition: opacity 180ms ease;
}
.stage.is-swapping {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .stage { transition: none !important; }
  .stage.is-swapping { opacity: 1; }
}

/* On detail pages we don't need the landing's per-section safe-area
   padding (which reserves space for the active hand). The hand sits in
   its corner, content centers naturally — give it a comfortable column
   with even padding. */
.section--detail .section__inner {
  max-width: 110ch;
  margin: 0 auto;
  padding: clamp(6rem, 12vh, 10rem) clamp(1.5rem, 4vw, 4rem) clamp(4rem, 8vh, 8rem) !important;
}

/* Override the per-section safe-area rules specifically for detail pages */
.section--detail.section--vrij-werk .section__inner,
.section--detail.section--ontwerp .section__inner,
.section--detail.section--onderzoek .section__inner,
.section--detail.section--blog .section__inner,
.section--detail.section--contact .section__inner {
  padding-left: clamp(1.5rem, 4vw, 4rem) !important;
  padding-right: clamp(1.5rem, 4vw, 4rem) !important;
  padding-top: clamp(8rem, 16vh, 14rem) !important;
  padding-bottom: clamp(4rem, 8vh, 8rem) !important;
}

/* Project article styling */
.project {
  /* Same rhythm as .post but no border separator (single project per page) */
}

.project__header {
  margin: 0 0 1.5em;
}

.project__feature {
  margin: 0 0 2em;
  padding: 0;
}

.project__feature img {
  display: block;
  width: 100%;
  height: auto;
}

.project__body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.project__body p {
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.65;
  margin: 0 0 1em;
}

/* On a single-blog detail, also show the featured image neatly */
.post--single .post__feature {
  margin: 0 0 2em;
  padding: 0;
}

.post--single .post__feature img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Blog posts (long-scroll feed) ---------- */
.post {
  padding: 2.5em 0;
  border-bottom: 1px solid #eaeaea;
}

.post:first-of-type {
  padding-top: 0.5em;
}

.post:last-of-type {
  border-bottom: 0;
}

.post__header {
  margin: 0 0 1.2em;
}

.post__date {
  display: block;
  font-family: "Vina Sans", sans-serif;
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 0.4em;
}

.post__title {
  font-family: "Vina Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-ink);
}

.post__title-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.post__title-link:hover,
.post__title-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.08em;
}

.post__body p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.65;
  margin: 0 0 1em;
}

.post__more {
  margin: 0.8em 0 0;
}

.post__more-link {
  font-family: "Vina Sans", sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--color-ink);
  padding-bottom: 0.05em;
  display: inline-block;
}

.post__more-link:hover,
.post__more-link:focus-visible {
  /* Hard-cut nudge to match the rest of the site's stop-motion vibe */
  transform: translateX(4px);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hand[data-hover-mode="loop"] .hand__frame { transition: none; }
  /* Loop falls back to swap-style: rest vs first non-rest frame */
  .hand[data-hover-mode="loop"]:hover .hand__frame--rest,
  .hand[data-hover-mode="loop"]:focus-visible .hand__frame--rest { opacity: 0; }
  .hand[data-hover-mode="loop"]:hover .hand__frame[data-frame="1"],
  .hand[data-hover-mode="loop"]:focus-visible .hand__frame[data-frame="1"] { opacity: 1; }
  .contact-star { transition: none; }

  /* Sections still appear, but instantly */
  .hand,
  .centerpiece,
  .section { transition: none !important; }
}

/* ---------- Mobile gate ---------- */
/* Hidden on desktop by default; revealed under the breakpoint, where
   the desktop stage is hidden in turn. */
.mobile-gate {
  display: none;
}

@media (max-width: 900px) {
  .stage,
  .close-btn { display: none !important; }

  .mobile-gate {
    display: flex;
    position: fixed;
    inset: 0;
    background: #fff;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 999;
  }

  .mobile-gate__inner {
    max-width: 24rem;
    text-align: center;
  }

  .mobile-gate__icon {
    display: block;
    width: clamp(120px, 35vw, 200px);
    height: auto;
    margin: 0 auto 1.5rem;
  }

  .mobile-gate__text {
    font-family: "Vina Sans", sans-serif;
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--color-ink);
    margin: 0;
    text-transform: uppercase;
  }
}

/* ---------- Print (just in case) ---------- */
@media print {
  .stage { min-height: auto; }
}