/* =========================================================
   MOON ART GROUNDS — Shared site header + hamburger menu overlay
   Used across every page. Keep in sync with index.html inline copy.
   Vanilla CSS supplement — Tailwind CDN provides layout utilities
   used in the header markup.
   ========================================================= */

/* =========================================================
   Sitewide --content-inset.
   Edge-to-content offset for header positioning + section copy.
   Desktop: 80px. Mobile (<768px): 0 — existing tight spacing wins.
   Index.html has its own identical declaration inline because it
   doesn't load this stylesheet.
   ========================================================= */
:root { --content-inset: 80px; }
@media (max-width: 767px) {
  :root { --content-inset: 0px; }
}

/* Push content below the fixed header on pages that don't have
   their own pinned hero (i.e. every page except index.html). */
body.has-fixed-header { padding-top: clamp(72px, 9vh, 100px); }

/* Header sits inset from the top + left + right edges on desktop.
   Mobile: --content-inset is 0 so Tailwind's top-0 left-0 right-0
   classes stay flush. Header `top` is 40% of the inset (matches
   index.html) so the bar sits closer to the top than the full
   left/right gutter would suggest. */
@media (min-width: 768px) {
  #site-header {
    top: calc(var(--content-inset) * 0.4);
    left: var(--content-inset);
    right: var(--content-inset);
  }
}

/* =========================================================
   Custom red-ball cursor (sitewide, brand red #C0392B).
   Exhibition.html overrides with its coral inline cursor.
   ========================================================= */
body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='6' fill='%23C0392B'/></svg>") 10 10, auto;
}
a, button, [role="button"], .nav-link, .info-link, .pane-handle, .spaces-panel {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='10' fill='%23C0392B'/></svg>") 14 14, pointer;
}
input, textarea, select, [contenteditable] { cursor: text; }
input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='10' fill='%23C0392B'/></svg>") 14 14, pointer;
}

/* ---------- Header sizing (locked sitewide) ---------- */
#site-header img { max-height: 70px; height: auto; width: auto; max-width: 120px; object-fit: contain; }
#site-header .plus-icon { width: 22px; height: 22px; }

/* ---------- Header (default = dark text on light pages) ---------- */
#site-header {
  transition: color 280ms ease, border-color 280ms ease,
              transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 320ms ease;
  color: #1A1A1A;
}
#site-header.header--dark { color: #1A1A1A; }
#site-header .stroke-current { stroke: currentColor; }
#site-header svg { fill: currentColor; }

/* ============================================================
   Scroll-aware header (rolled out sitewide).
   - Mobile (≤768px): hide logo + wordmark once scrolled past the top,
     so they don't follow the user down the page.
   - Desktop (≥769px): hide the entire header on scroll-down, slide
     back in on scroll-up. Always fully visible at the very top.
   Classes toggled by js/site-header.js scroll observer.
   ============================================================ */
@media (max-width: 768px) {
  #site-header .header-emblem,
  #site-header .header-wordmark {
    transition: opacity 280ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.is-scrolled #site-header .header-emblem,
  body.is-scrolled #site-header .header-wordmark {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
  }
}
@media (min-width: 769px) {
  body.header-hidden #site-header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
}

/* ---------- Per-page header contrast (Option A) ----------
   Add `class="header-on-light"` to <body> when the page's hero/initial scroll
   position is light/white (header text should be near-black).
   Add `class="header-on-dark"` when it sits over a dark/photographic hero
   (header text should be white).
   Body-class selectors carry higher specificity than the base #site-header rule
   so they win on initial paint. Index's scroll-driven .header--dark still
   overrides via its higher-specificity compound selector below. */
body.header-on-light #site-header { color: #1C1A17; }
body.header-on-dark  #site-header { color: #FFFFFF; }
/* When scrolled past hero, header switches dark regardless of body class
   (index.html's inline JS adds .header--dark on scroll). */
body.header-on-dark #site-header.header--dark { color: #1A1A1A; }

/* ---------- Header typography (canonical sitewide) ----------
   The header markup ships with Tailwind's `font-serif` utility, which the
   CDN resolves to a Georgia fallback stack — not the project face. Re-point
   the wordmark to Cormorant Garamond and the Search/Menu controls to
   Montserrat so every page shares the same premium type treatment. */
.header-wordmark {
  font-family: 'Cormorant Garamond', serif;
}
#site-header #search-btn,
#site-header #menu-btn {
  font-family: 'Montserrat', sans-serif;
}

/* ---------- Header layout — emblem LEFT, wordmark absolute-CENTER, buttons RIGHT ---------- */
.header-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header-emblem {
  display: inline-flex;
  align-items: center;
}
.header-wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);          /* true center, both axes, independent of siblings */
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  width: max-content;
  pointer-events: auto;
  z-index: 1;
}

/* ---------- Mobile header (≤768px): wordmark text replaced with the centred white logo ----------
   Lifted from the approved index.html mobile pattern so every page shares the same
   premium-mobile bar (centred logo, Search/Menu cluster on the right, no wordmark text). */
@media (max-width: 768px) {
  /* Bump top padding so the bar sits a touch lower from the phone's top edge.
     The inline shorthand on #site-header sets padding-top including env(safe-area-inset-top);
     this longhand !important wins for the mobile breakpoint and adds breathing room. */
  #site-header {
    padding-top: calc(clamp(2rem, 6vw, 3rem) + env(safe-area-inset-top, 0px)) !important;
  }

  /* Search/Menu cluster stays right of the bar; emblem floats absolute-centre.
     min-height matches the logo's max-height (95px) so the absolute-positioned emblem
     fits INSIDE the bar instead of extending above it — fixes top-clipping on pages
     whose inline header padding doesn't include env(safe-area-inset-top). */
  #site-header .header-bar { justify-content: flex-end; min-height: 95px; }

  /* Hide the wordmark text on mobile — the logo carries the brand now */
  #site-header .header-wordmark { display: none; }

  /* Show and centre the white logo emblem */
  #site-header .header-emblem {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    z-index: 1;
  }
  /* Override both the inline `max-height: 70px` on the <img> tag and the sitewide
     `#site-header img { max-height: 70px; max-width: 120px; }` rule above. */
  #site-header .header-emblem img {
    max-height: 95px !important;
    max-width: none !important;
    height: auto;
    width: auto;
    object-fit: contain;
    transition: filter 280ms ease;
  }
  /* Colour-adaptive logo: the existing scroll JS toggles .header--dark when the bar
     sits over a light section — invert the white PNG so it reads as black there. */
  #site-header.header--dark .header-emblem img { filter: invert(1); }
}

/* ---------- Plus icon rotation ---------- */
.plus-icon {
  display: inline-block;
  transition: transform 300ms ease;
  width: 18px;
  height: 18px;
}
[data-menu-open="true"] .plus-icon { transform: rotate(45deg); }

/* ---------- Hidden Search button — fades in only when menu open ---------- */
#search-btn {
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
[data-menu-open="true"] #search-btn {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ---------- Menu overlay (white left, dark right) ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  background: #FFFFFF;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}
.menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.menu-pane-left {
  background: #FFFFFF;
  color: #1C1A17;
  padding: clamp(5rem, 9vw, 7rem) clamp(1.5rem, 4vw, 4rem) clamp(2rem, 4vw, 3rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Three+ nav groups with extra space between them */
.menu-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}
.nav-group {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1vw, 0.8rem);
}

/* Circle-X close button — bottom-left of left pane, fills on hover */
.menu-close-circle {
  margin-top: auto;
  align-self: flex-start;
  width: 48px;
  height: 48px;
  border: 1.5px solid #1C1A17;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1C1A17;
  padding: 0;
  transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
              color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-close-circle:hover,
.menu-close-circle:focus-visible {
  background-color: #1C1A17;
  color: #FFFFFF;
}
.menu-pane-right {
  background: #0F0F0F;
  color: #F4EFE6;
  padding: 0;
  overflow-y: auto;
  display: grid;
  grid-template-rows: 6fr 4fr;
}

/* ---------- Stagger entry ---------- */
.stagger-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms ease, transform 380ms ease;
}
.menu-overlay.is-open .stagger-item {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Nav links — Korean dominant, English small below ---------- */
.nav-link {
  display: block;
  text-decoration: none;
  color: #1C1A17;
  padding: 0.1em 0;
  line-height: 1.0;
}
.nav-link-ko {
  display: block;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #1C1A17;
}
.nav-link-en {
  display: block;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8C7B6B;
  margin-top: 0.4rem;
}
.nav-link:hover .nav-link-ko {
  text-decoration: underline;
  text-decoration-color: #C0392B;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1.5px;
}
/* Red active-page underline */
.nav-link[aria-current="page"] .nav-link-ko {
  text-decoration: underline;
  text-decoration-color: #C0392B;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* ---------- Bottom-of-left-pane location/social links ---------- */
.info-link {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1C1A17;
  text-decoration: none;
  padding: 0.4rem 0;
  border-top: 1px solid rgba(28, 26, 23, 0.18);
}
.info-link:hover { color: #8C7B6B; }
.info-link .info-sub {
  display: block;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(28, 26, 23, 0.55);
  margin-top: 0.35rem;
}

/* ---------- Right pane sections ---------- */
.pane-r-top, .pane-r-bottom {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
}
.pane-r-top {
  padding-top: clamp(5rem, 9vw, 7rem);
  border-bottom: 1px solid rgba(244, 239, 230, 0.08);
}
.pane-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C8BFB0;
}
.pane-handle {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(244, 239, 230, 0.7);
  text-decoration: none;
  margin-top: 0.35rem;
  display: inline-block;
}
.pane-handle:hover { color: #F4EFE6; }

.insta-feed {
  flex: 1 1 auto;
  margin-top: 1.25rem;
  min-height: 240px;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---------- Stay-in-touch (right pane bottom) ---------- */
.stay-heading-en {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: 0.02em;
  color: #F4EFE6;
}
.stay-heading-ko {
  font-family: 'Noto Serif KR', serif;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(244, 239, 230, 0.7);
  margin-top: 0.25rem;
}
.stay-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(244, 239, 230, 0.55);
  margin-top: 0.85rem;
  line-height: 1.7;
}
.stay-form {
  display: flex;
  gap: 0;
  margin-top: 1.25rem;
  border: 1px solid rgba(244, 239, 230, 0.4);
}
.stay-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0.85rem 0.9rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; /* keep ≥16px so iOS Safari doesn't auto-zoom on focus */
  color: #F4EFE6;
  outline: none;
}
.stay-form input[type="email"]::placeholder {
  color: rgba(244, 239, 230, 0.4);
  letter-spacing: 0.04em;
}
.stay-form button {
  flex: 0 0 auto;
  padding: 0 1.4rem;
  border: none;
  border-left: 1px solid rgba(244, 239, 230, 0.4);
  background: #F4EFE6;
  color: #0F0F0F;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.stay-form button:hover { background: #C8BFB0; }
.stay-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  color: rgba(244, 239, 230, 0.55);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.stay-consent input { accent-color: #C8BFB0; margin-top: 3px; }

/* ---------- Custom newsletter consent checkbox (sitewide) ----------
   Every consent checkbox uses name="consent" — this rule overrides each
   page's individual treatment so the box looks identical everywhere:
   16px square, 1px solid black border, no border-radius, white when
   unchecked, red (#C0392B) fill + white checkmark when checked. The
   surrounding <label> is forced to center-align so the box sits on the
   first line of consent text. */
label:has(> input[type="checkbox"][name="consent"]),
.stay-consent,
.exhibition-newsletter-consent,
.contact-subscribe-consent,
.faq-newsletter__consent,
.index-newsletter__consent,
.newsletter-consent,
.vp-subscribe-consent {
  align-items: center !important;
}
input[type="checkbox"][name="consent"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-grid !important;
  place-content: center !important;
  flex: none !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
input[type="checkbox"][name="consent"]::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity 120ms ease;
}
input[type="checkbox"][name="consent"]:checked {
  background: #C0392B !important;
  border-color: #C0392B !important;
}
input[type="checkbox"][name="consent"]:checked::before { opacity: 1; }
input[type="checkbox"][name="consent"]:focus-visible {
  outline: 2px solid #B07A4A;
  outline-offset: 2px;
}

/* ---------- Focus rings ---------- */
#site-header button:focus-visible,
#site-header a:focus-visible,
.menu-overlay button:focus-visible,
.menu-overlay a:focus-visible,
.menu-overlay input:focus-visible {
  outline: 2px solid #B07A4A;
  outline-offset: 3px;
  border-radius: 2px;
}
/* Nav links inside the menu drawer get a subtle red-underline focus treatment
   instead of the heavy orange box (which otherwise sticks on the first link —
   typically HOME — as soon as the menu opens). Matches the hover system. */
.menu-overlay .nav-link:focus-visible {
  outline: none;
  border-radius: 0;
}
.menu-overlay .nav-link:focus-visible .nav-link-ko {
  text-decoration: underline;
  text-decoration-color: #C0392B;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1.5px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #site-header, .menu-overlay, .stagger-item, .plus-icon, #search-btn,
  .nav-link, .nav-link-ko, .info-link, .pane-handle, .stay-form button {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Mobile: stack overlay panes vertically ---------- */
@media (max-width: 767px) {
  .menu-overlay {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow-y: auto;
  }
  .menu-pane-left { padding-top: 6rem; }
  .menu-pane-right { grid-template-rows: auto auto; }
  /* .nav-link-en uses 0.7rem base — no mobile bump needed */
  .menu-nav { gap: clamp(28px, 6vw, 44px); }
  .pane-r-top { padding-top: 2rem; }
  .insta-feed { min-height: 320px; }
}

/* =========================================================
   Mobile Improvements — Samsung Galaxy / iPhone first
   Targets the 63% mobile audience.
   ========================================================= */

/* Remove blue tap-highlight flash on Android / Samsung Internet */
* { -webkit-tap-highlight-color: transparent; }

/* iOS Safari: prevent text auto-resize when phone rotates */
html { -webkit-text-size-adjust: 100%; }

/* Touch devices: kill the custom red-ball cursor (no hover state on touch) */
@media (hover: none), (pointer: coarse) {
  body, a, button, [role="button"], .nav-link, .info-link,
  .pane-handle, .spaces-panel {
    cursor: auto !important;
  }
  input, textarea, select { cursor: text !important; }
  input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"] {
    cursor: pointer !important;
  }
}

/* Prevent iOS auto-zoom-to-input — any input <16px triggers it on focus */
@media (max-width: 767px) {
  input[type="email"],
  input[type="text"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Touch-friendly menu nav targets — minimum 44×44 hit area */
@media (max-width: 767px) {
  .nav-link {
    padding: 0.5em 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .info-link {
    padding: 0.9rem 0;
    min-height: 44px;
  }
  .pane-handle {
    padding: 0.5rem 0;
    display: inline-block;
  }
}

/* Header: shrink wordmark + logo on very narrow screens to stop crowding */
@media (max-width: 480px) {
  #site-header { padding: 0.85rem 1rem !important; }
  #site-header img { max-height: 50px !important; }
  #site-header [id="menu-btn"] { font-size: 1.1rem !important; }
  #site-header [id="search-btn"] { display: none !important; } /* free up space */
}

/* Korean text: prevent ugly word-breaks mid-syllable on narrow screens.
   `[lang="ko"]` catches the bilingual <span lang="ko"> pattern used in
   accordions, FAQ items, and card titles across the site. */
@media (max-width: 767px) {
  body, p, h1, h2, h3, h4, .nav-link-ko, [lang="ko"] {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  /* Defensive: prevent any rogue full-bleed (100vw, negative margins)
     element from triggering horizontal scroll on mobile. */
  html, body { overflow-x: hidden; }
}

/* Menu overlay: prevent scroll-chaining to the page behind it */
.menu-overlay {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Loader: more compact on small phones (≤380px) */
@media (max-width: 380px) {
  #mag-loader {
    width: 120px;
    transform: translateX(-60px);
    bottom: 12px;
  }
  .loader-counter { font-size: 9px; }
}

/* Avoid horizontal scroll caused by 100vw children + scrollbar gutters */
html, body { overflow-x: hidden; max-width: 100%; }

/* Skip-to-content link (a11y) */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: #1C1A17;
  color: #FFFFFF;
  padding: 12px 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skip-to-content:focus {
  left: 0;
  top: 0;
  outline: 3px solid #C0392B;
  outline-offset: -3px;
}

/* =========================================================
   ROUND 2 — Deep mobile + Samsung Internet improvements
   Targets Galaxy phones (Samsung Internet) as primary mobile.
   ========================================================= */

/* Eliminate 300ms tap delay + faster touch response */
a, button, input, label, [role="button"], .nav-link, .info-link,
.exp-card, .tile, .anchor-pill, .pill, .cta-pill {
  touch-action: manipulation;
}

/* Samsung Internet sometimes keeps text-size-adjust on. Lock it. */
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Samsung Internet supports dvh in v19+. Use it for true mobile viewport,
   100vh fallback for older. Apply to anything that should fill the screen. */
@supports (height: 100dvh) {
  .h-vh, .min-h-vh, .menu-overlay, .hero { min-height: 100dvh; }
}

/* Korean glyphs benefit from looser leading + jamo composition hints */
:lang(ko) {
  word-break: keep-all;            /* don't break mid-syllable */
  line-break: strict;
  overflow-wrap: anywhere;          /* still wrap on long URLs/words */
  font-feature-settings: "halt";    /* tighter Korean punctuation */
}

/* Mobile portrait — primary Galaxy use case */
@media (max-width: 767px) {
  /* Larger Korean line-height for readability on small screens */
  :lang(ko) { line-height: 1.85; }

  /* Compact hero h1 wrap behavior — never overflow viewport */
  h1 { hyphens: manual; max-width: 100%; }

  /* Form inputs need 16px to avoid iOS auto-zoom — already in round 1, reinforce */
  input, textarea, select { font-size: max(16px, 1em) !important; }

  /* Menu overlay: smoother stacked layout, easier thumb close */
  .menu-overlay {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
  }
  .menu-pane-left {
    padding: 5rem 1.25rem 2rem !important;
  }
  .menu-pane-right {
    grid-template-rows: 1fr auto !important;
  }
  .pane-r-top { padding-top: 1.5rem !important; }

  /* Bigger menu close button hit area */
  #menu-btn { padding: 8px 4px; }

  /* Cap the Behold Instagram widget in the slide-in menu so nav stays visible */
  .menu-overlay .insta-feed {
    min-height: 200px !important;
    max-height: 280px !important;
  }
  .menu-overlay behold-widget { max-height: 280px; display: block; overflow: hidden; }

  /* Tiny phones (≤320px Galaxy Fold inner): relax menu top padding so nav lands above fold */
  .menu-pane-left { padding: max(3rem, 10vh) 1.25rem 2rem !important; }
}

@media (max-width: 767px) {
  /* Skip-to-content visible larger on mobile */
  .skip-to-content { font-size: 13px; padding: 14px 22px; }
}

/* Small phones (≤380px — Galaxy S22 base / older) */
@media (max-width: 380px) {
  #site-header { padding: 0.7rem 0.85rem !important; }
  #site-header img { max-height: 44px !important; }
  /* Wordmark gets ultra-compact */
  #site-header > div > a:first-child { font-size: 0.55rem !important; letter-spacing: 0.18em !important; }
  /* Loader smaller */
  #mag-loader { width: 110px; transform: translateX(-55px); bottom: 10px; }
}

/* Foldable Galaxy fold — narrow inner display ~280-320px */
@media (max-width: 320px) {
  body { font-size: 14px; }
  .nav-link-ko { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; }
  .menu-pane-left { padding: 4rem 1rem 1.5rem !important; }
}

/* Landscape phone — keep header lean */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  #site-header { padding: 0.5rem 1rem !important; }
  #site-header img { max-height: 40px !important; }
  .menu-pane-left { padding-top: 3rem !important; }
}

/* Samsung Internet sometimes paints scroll-bound elements late.
   Force GPU acceleration on key layers. */
.menu-overlay, #site-header, #mag-loader, .hero { transform: translateZ(0); }

/* Disable pull-to-refresh on the menu overlay (Samsung's gesture) */
body[data-menu-open="true"] { overscroll-behavior-y: contain; }
.menu-overlay { overscroll-behavior: contain; }

/* Better tap feedback on buttons (no flash, gentle scale) */
@media (hover: none) {
  a:active, button:active, .exp-card:active, .tile:active, .anchor-pill:active {
    opacity: 0.7;
    transition: opacity 80ms ease;
  }
}

/* Samsung Internet quirks — make sure focus rings are visible since
   default outlines often differ from Chromium */
:focus-visible {
  outline: 2px solid #C0392B;
  outline-offset: 2px;
}

/* Korean autocorrect/keyboard rendering — give breathing room around inputs */
@media (max-width: 767px) {
  form { padding-bottom: env(safe-area-inset-bottom, 0); }
  input, textarea {
    autocomplete-override: new-password;  /* hint Samsung keyboard */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;                      /* iOS rounds inputs by default */
  }
}

/* Safe-area insets for notch/punch-hole Galaxy phones */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  #mag-loader { bottom: max(16px, env(safe-area-inset-bottom)) !important; }
}

/* =========================================================
   ROUND 3 — Mobile best practices + accessibility extras
   ========================================================= */

/* Forced-colors / Windows High Contrast — keep red CTA visible */
@media (forced-colors: active) {
  .four-btn--primary, .stay-form button {
    forced-color-adjust: none;
    background: ButtonText;
    color: ButtonFace;
  }
  .nav-link[aria-current="page"] .nav-link-ko {
    text-decoration-color: Highlight;
  }
}

/* Save-Data: skip heavy media when user opted into data-saver mode */
@media (prefers-reduced-data: reduce) {
  video, .insta-feed { display: none; }
  .hero-bg-img, .hero-img { background-image: none !important; }
}

/* Print — strip nav/overlay/loader, ink-on-paper */
@media print {
  #site-header, .menu-overlay, #mag-loader, .skip-to-content,
  #search-btn, #menu-btn, .insta-feed,
  .anchor-nav, .ticker, .mag-intro-slide, #mag-intro {
    display: none !important;
  }
  body { background: #FFFFFF !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* Reduced data-aware images: hint browser when user has data-saver */
img[loading="lazy"] { content-visibility: auto; }

/* Native share button styling consistency (when used) */
button[data-share] { min-height: 44px; }

/* Inputs: better mobile keyboard UX (browser hints) */
input[type="email"]    { inputmode: email; }
input[type="tel"]      { inputmode: tel; }
input[type="search"]   { inputmode: search; }
input[type="number"]   { inputmode: numeric; }

/* Hover-capable devices only get hover lifts (no flicker on touch) */
@media (hover: hover) and (pointer: fine) {
  .exp-card:hover .exp-card-img img { transform: scale(1.03); }
  .tile:hover { transform: translateY(-4px); }
}

/* =========================================================
   ROUND 4 — Form validation feedback + Search modal
   ========================================================= */

/* Visual feedback on invalid inputs (only after user has interacted) */
input:user-invalid,
input:invalid:not(:placeholder-shown),
input:focus:invalid {
  border-bottom-color: #C0392B !important;
  outline-color: #C0392B;
}
input:user-valid,
input:valid:not(:placeholder-shown) {
  border-bottom-color: #2E7D32 !important;
}
.stay-form input[type="email"]:user-invalid {
  border-color: #C0392B !important;
}

/* Search dialog (used by sitewide #search-btn click handler in site-header.js) */
#mag-search-dialog {
  position: fixed; inset: 0;
  z-index: 80;
  background: rgba(15, 15, 15, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20vh, 25vh, 30vh) 1.5rem 0;
}
#mag-search-dialog.is-open { display: flex; }
.mag-search-inner {
  width: 100%; max-width: 640px;
  display: flex; flex-direction: column; gap: 18px;
}
.mag-search-inner input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(244,239,230,0.4);
  color: #F4EFE6;
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  padding: 0.6em 0;
  outline: none;
}
.mag-search-inner input::placeholder { color: rgba(244,239,230,0.3); }
.mag-search-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.4);
  text-align: center;
}
#mag-search-dialog kbd {
  background: rgba(244,239,230,0.08);
  border: 1px solid rgba(244,239,230,0.2);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
}

/* ============================================================
   Mobile hamburger menu — canonical right-side slide-in drawer,
   synced exactly from index.html. !important overrides the older
   scattered mobile-menu rules above. Desktop (>767px) untouched.
   ============================================================ */
@media (max-width: 767px) {
  .menu-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 82% !important;
    max-width: 360px !important;
    height: 100% !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    padding: 64px 24px 24px !important;
    overflow-y: auto !important;
    transform: translateX(100%) !important;
    opacity: 1 !important;
    transition: transform 380ms cubic-bezier(0.4,0,0.2,1) !important;
    pointer-events: none !important;
    z-index: 50 !important;
  }
  .menu-overlay.is-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  .menu-pane-right { display: none !important; }
  .menu-pane-left {
    padding: 0 !important;
    background: transparent !important;
    overflow-y: visible !important;
    min-height: 100% !important;
  }
  .menu-info-extras { display: none !important; }
  .menu-mobile-only { display: flex !important; flex-direction: column !important; margin-top: 1.4rem !important; }
  .nav-link-ko { font-size: clamp(1.0rem, 4.2vw, 1.2rem) !important; }
  .nav-link-en { font-size: 0.4rem !important; margin-top: 0.08rem !important; letter-spacing: 0.15em !important; }
  .nav-link { padding: 0 !important; }
  .menu-nav { gap: clamp(10px, 2.5vw, 16px) !important; }
  .nav-group { gap: 0.15rem !important; }
  .menu-overlay { padding: 44px 24px 16px !important; }
  .menu-mobile-only behold-widget { max-height: 200px !important; display: block !important; overflow: hidden !important; }
}

/* =========================================================
   Desktop hamburger menu (≥769px) — rolled out from index.html.
   1. Korean nav labels — larger (1.6rem) + un-bolded (weight 400).
   2. Overlay panel split 40 / 60 (left white pane / right black pane).
   The mobile drawer (≤767px) above is unaffected. Hover, color, and
   font-family stay exactly as defined in the base .nav-link-ko rule.
   ========================================================= */
@media (min-width: 769px) {
  .nav-link-ko { font-size: 1.6rem; font-weight: 400; }
  .menu-overlay { grid-template-columns: 40% 60%; }
}

/* =========================================================
   Mobile menu (≤767px) — mirrored from index.html.
   Floating "FAB" menu pill + dark backdrop scrim + the
   in-drawer Instagram block. Fixed pill colour — the scroll-
   driven light/dark recolour needs per-section tags (omitted).
   ========================================================= */

/* In-drawer Instagram — hidden by default; the existing ≤767px
   drawer rules hide .menu-pane-right and reveal .menu-mobile-only. */
.menu-mobile-only { display: none; flex-direction: column; margin-top: 1.5rem; }

/* Dark scrim behind the drawer */
#menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}
#menu-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) { #menu-backdrop { display: none; } }

@media (max-width: 767px) {
  /* #site-header carries `transform: translateZ(0)` (a GPU paint hint), which
     makes it the containing block for any position:fixed child — that would
     pin the pill to the ~90px header bar and push it off-screen. Clear it on
     mobile so the pill anchors to the viewport instead. */
  #site-header { transform: none !important; }

  /* Floating menu pill — fixed bottom-centre, same screen spot on every page */
  #menu-btn {
    position: fixed !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(88px, 14dvh, 132px)) !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 32px) !important;
    transform: none !important;
    z-index: 100 !important;
    padding: 14px 26px !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    background: #1C1A17 !important;
    color: #F4EFE6 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
    transition: background 360ms cubic-bezier(0.4, 0, 0.2, 1),
                color 360ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 360ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  /* Pill turns light while the drawer is open */
  [data-menu-open="true"] #menu-btn {
    background: #FFFFFF !important;
    color: #1C1A17 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important;
  }
  /* Pill tucks away while the footer is on screen */
  body.fab-hide:not([data-menu-open="true"]) #menu-btn {
    opacity: 0 !important;
    transform: translateY(14px) !important;
    pointer-events: none !important;
    transition: opacity 300ms ease, transform 300ms ease !important;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #menu-btn { transition: none !important; }
}