/* ============================================================
   gallr Web — Main Styles
   All values use tokens from tokens.css.
   No hardcoded colours, fonts, radii, or border widths.
   ============================================================ */

/* ── Reset ───────────────────────────────────────────────── */

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

/* ── Base ────────────────────────────────────────────────── */

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  line-height: 1.6;
  min-height: 100vh;
  /* Prevent horizontal overflow at all viewports */
  overflow-x: hidden;
}

/* ── Skip link (accessibility) ───────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-meta);
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  border-radius: var(--radius);
  z-index: 9999;
}

.skip-link:focus {
  top: var(--space-md);
}

/* ── Reveal hidden state (paired with [data-reveal] in main.js) ──
   Hidden until the IntersectionObserver adds .is-revealed, OR until
   prefers-reduced-motion / <noscript> overrides kick in.
   ── */

[data-reveal],
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-med) var(--ease-gallery),
              transform var(--duration-med) var(--ease-gallery);
}

[data-reveal].is-revealed,
[data-reveal-stagger].is-revealed > *,
[data-reveal-stagger] > *.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Layout helpers ───────────────────────────────────────── */

.downloads__inner,
.about__inner,
.coming-soon__inner,
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius);
  cursor: pointer;
  /* Minimum touch target: 44px height */
  min-height: 44px;
  line-height: calc(44px - 2 * var(--space-sm));
  transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-paper);
  border: 1px solid var(--color-accent);
}

.btn--primary:hover {
  background-color: color-mix(in srgb, var(--color-accent) 80%, black);
  color: var(--color-paper);
}

.btn--outline {
  background-color: var(--color-paper);
  color: var(--color-ink);
  border: var(--border-ink);
}

.btn--outline:hover {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── CTA pair (used in hero + downloads) ─────────────────────
   Below 480px, stack full-width — two cramped CTAs on a 360px
   phone is wrong. Above 480px, two equal columns. */

.cta-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

@media (min-width: 480px) {
  .cta-pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* ── sr-only utility (re-used) ─── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Section meta rows (eyebrow + date) ──────────────────────
   On mobile, collapse these into the natural flow so they don't
   eat half the viewport before the headline appears. On desktop,
   they restore to a full editorial row with their own rule. */

.feature-block__meta,
.now-showing__meta,
.about__meta,
.downloads__meta {
  display: contents;
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .feature-block__meta,
  .now-showing__meta,
  .about__meta,
  .downloads__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: var(--border-hairline);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-xl);
  }
}

/* ── Hero ────────────────────────────────────────────────── */

.hero {
  padding-block: var(--space-3xl);
  background-color: var(--color-paper);
  min-height: 92vh;
  display: flex;
  align-items: stretch;
}
/* Mobile: stack the three hero children vertically. The row layout below
   is an editorial 3-column composition that only makes sense ≥ 768px;
   at smaller widths it shrinks every child to min-content and the Korean
   headline collapses to one word per line. */
@media (max-width: 767px) {
  .hero { flex-direction: column; }
}

.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
}

.hero__rule-thick {
  border: none;
  border-top: var(--border-section);
  margin: 0;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: var(--space-md) 0 0;
}

.hero__headline-line {
  display: block;
}

.hero__kinetic {
  /* Inline grid stack: all words occupy the same track, so the host
     sizes to the widest word ("정확한") and never reflows when the
     active word changes. */
  display: inline-grid;
  grid-template-areas: "kinetic";
  vertical-align: baseline;
  color: var(--color-accent);
}

.hero__kinetic > span {
  grid-area: kinetic;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity var(--duration-fast) var(--ease-gallery),
              transform var(--duration-fast) var(--ease-gallery);
}

.hero__kinetic > span.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__kinetic > span { transition: none; }
}

.hero__subhead {
  font-size: var(--type-body-lg);
  color: var(--color-ink-secondary);
  margin-top: var(--space-md);
  line-height: 1.4;
  max-width: 28ch;
}

.hero__rule {
  border: none;
  border-top: var(--border-ink);
  width: 6rem;
  margin: var(--space-md) 0 0;
  transform-origin: left;
}

/* Override [data-reveal] default: hero rule draws left-to-right rather
   than fading + sliding up. */
.hero__rule[data-reveal] {
  opacity: 1;
  transform: scaleX(0);
  transition: transform var(--duration-fast) var(--ease-gallery);
}

.hero__rule[data-reveal].is-revealed {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero__rule[data-reveal] {
    transform: scaleX(1) !important;
  }
}

.hero__cta {
  font-family: var(--font-display);
  font-size: var(--type-body-lg);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.5em;
  padding: var(--space-sm) 0;
  transition: transform var(--duration-fast) var(--ease-gallery);
}

.hero__cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-gallery);
}

.hero__cta:hover::after { transform: scaleX(1); }

.hero__cta-arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-gallery);
}

.hero__cta:hover .hero__cta-arrow { transform: translateX(8px); }

.hero__marquee {
  margin-top: var(--space-2xl);
  border-top: var(--border-section);
  border-bottom: var(--border-hairline);
  padding: var(--space-md) 0;
  overflow: hidden;
  /* full-bleed: escapes .hero__inner padding */
  position: relative;
}

.hero__marquee-track {
  width: 100%;
  overflow: hidden;
}

.hero__marquee-inner {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  transform: translateX(var(--marquee-x, 0));
  will-change: transform;
}

.hero__marquee-tile {
  flex: 0 0 auto;
  width: 140px;
  height: 180px;
  margin: 0;
  border: var(--border-ink);
  background-color: var(--color-paper-alt);
  overflow: hidden;
}

.hero__marquee-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero__marquee-inner { transform: none !important; }
}

.hero__count {
  max-width: var(--max-width);
  margin: var(--space-md) auto 0;
  padding: 0 var(--page-padding-x);
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

/* ── Status badge (closing-soon / opening-soon) ─── */

.status-badge {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 500;
}

.status-badge--accent {
  color: var(--color-accent);
}

/* In figcaption / grid-tile contexts the badge is placed on a white
   background. Orange text (#FF5400) on white = 3.1:1 — fails WCAG AA.
   Fix: render as pill (orange bg, black text) → 6.77:1 contrast. */
.feature-block__caption .status-badge--accent,
.grid-tile__badge.status-badge--accent {
  background-color: var(--color-accent);
  color: var(--color-ink);
  padding: 2px 6px;
}

/* ── Features (gallery-wall blocks) ─────────────────────── */

.features {
  border-top: var(--border-section);
}

.feature-block {
  border-bottom: var(--border-section);
  padding-block: var(--space-3xl);
}

.feature-block__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}


.feature-block__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .feature-block__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }
}

.feature-block__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.feature-block__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-headline);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}

.feature-block__headline-line { display: block; }

.feature-block__subhead {
  font-family: var(--font-display);
  font-size: var(--type-body-lg);
  line-height: 1.4;
  color: var(--color-ink-secondary);
  margin: 0;
}

.feature-block__body {
  font-family: var(--font-display);
  font-size: var(--type-body);
  line-height: 1.7;
  color: var(--color-ink);
  max-width: 38ch;
}

.feature-block__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.feature-block__image {
  width: 100%;
  height: auto;
  /* No fixed aspect-ratio: poster covers come in wildly different shapes
     (4:5, 2:1, square), and forcing one ratio means either cropping the
     edges (object-fit: cover) or letterboxing onto blank background
     (object-fit: contain). Letting the image set its own height keeps
     the figure tight to the artwork — no empty bars. */
  border: var(--border-ink);
  background-color: var(--color-paper-alt);
  display: block;
}

.feature-block__caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.feature-block__caption-title {
  color: var(--color-ink);
  font-weight: 500;
}

.feature-block__caption-venue {
  color: var(--color-ink-secondary);
}

/* ── Now Showing grid ─────────────────────────────────────── */

.now-showing {
  border-top: var(--border-hairline);
  padding-block: var(--space-3xl);
  background-color: var(--color-paper);
}

@media (min-width: 768px) {
  .now-showing {
    border-top: var(--border-section);
  }
}

.now-showing__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}


.now-showing__heading {
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
  font-weight: 500;
}

.now-showing__date {
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

.now-showing__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* phone: 2-up */
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .now-showing__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .now-showing__grid { grid-template-columns: repeat(4, 1fr); }
}

.grid-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.grid-tile__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  border: var(--border-ink);
  overflow: hidden;
  background-color: var(--color-paper-alt);
}

.grid-tile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-med) var(--ease-gallery);
}

.grid-tile:hover .grid-tile__image { transform: scale(1.03); }

/* Image fallback — when an <img> fails to load, the parent gets the
   --missing class via inline onerror. The class swaps the broken
   icon for a centered title on alt-paper. */
.grid-tile__image-wrap--missing img,
.feature-block__figure--missing img,
.hero__marquee-tile--missing img {
  opacity: 0;
}

.grid-tile__image-wrap--missing,
.feature-block__figure--missing,
.hero__marquee-tile--missing {
  position: relative;
}

.grid-tile__image-wrap--missing::after,
.feature-block__figure--missing::after,
.hero__marquee-tile--missing::after {
  content: attr(data-fallback-title);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ink);
  background: var(--color-paper-alt);
}

.grid-tile__badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background-color: var(--color-paper);
  padding: 2px 6px;
  border: 1px solid var(--color-accent);
}

.grid-tile__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.grid-tile__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.3;
}

.grid-tile__venue {
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

.grid-tile__dates {
  font-family: var(--font-meta);
  font-size: var(--type-meta);
  color: var(--color-ink-secondary);
}

.now-showing__footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--border-hairline);
  text-align: center;
}

.now-showing__cta {
  font-family: var(--font-display);
  font-size: var(--type-body-lg);
  color: var(--color-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: transform var(--duration-fast) var(--ease-gallery);
}

.now-showing__cta:hover { text-decoration: underline; }

.now-showing__cta-arrow {
  transition: transform var(--duration-fast) var(--ease-gallery);
}

.now-showing__cta:hover .now-showing__cta-arrow { transform: translateX(8px); }

/* ── Downloads (full-bleed black) ─────────────────────────── */

.downloads {
  background-color: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--space-3xl);
}

.downloads__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}


.downloads__rule-thick {
  border: none;
  border-top: 4px solid var(--color-paper);
  margin: var(--space-md) 0 var(--space-xl);
}

.downloads__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-paper);
  margin: 0;
}

.downloads__headline-line { display: block; }

.downloads__subhead {
  font-size: var(--type-body-lg);
  color: var(--color-ink-on-dark-secondary);
  line-height: 1.4;
  margin-top: var(--space-md);
}

.downloads__rule {
  border: none;
  border-top: 1px solid var(--color-paper);
  width: 6rem;
  margin: var(--space-xl) 0 0;
}


.downloads__cta {
  font-family: var(--font-display);
  font-size: var(--type-body-lg);
  font-weight: 500;
  color: var(--color-paper);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.5em;
  padding: var(--space-sm) 0;
  transition: transform var(--duration-fast) var(--ease-gallery);
}

.downloads__cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-gallery);
}

.downloads__cta:hover::after { transform: scaleX(1); }

.downloads__cta-arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-gallery);
}

.downloads__cta:hover .downloads__cta-arrow { transform: translateX(8px); }

/* ── About ───────────────────────────────────────────────── */

.about {
  border-top: var(--border-hairline);
  padding-block: var(--space-3xl);
  background-color: var(--color-paper);
}

@media (min-width: 768px) {
  .about {
    border-top: var(--border-section);
  }
}

.about__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}


.about__rule-thick {
  border: none;
  border-top: var(--border-section);
  margin: var(--space-md) 0 var(--space-xl);
}

.about__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display-sm);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}

.about__headline > span { display: block; }

.about__body {
  margin-top: var(--space-xl);
  max-width: 56ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about__paragraph {
  font-family: var(--font-display);
  font-size: var(--type-body-lg);
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0;
}

.about__paragraph.bi-en {
  font-size: var(--type-body);
  color: var(--color-ink-secondary);
  margin-top: 0;
}

.about__rule {
  border: none;
  border-top: var(--border-hairline);
  margin: var(--space-2xl) 0 0;
}

/* ── Coming Soon page ────────────────────────────────────── */

.coming-soon {
  padding: var(--space-2xl) 0;
}

.coming-soon__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.coming-soon__body {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-lg);
  max-width: 40ch;
}

/* ── Site Header ─────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  padding: var(--space-md) 0;
  background-color: transparent;
  transition: background-color var(--duration-fast) var(--ease-gallery),
              border-color var(--duration-fast) var(--ease-gallery);
}

.site-header.is-stuck {
  background-color: var(--color-paper);
  border-bottom-color: var(--color-ink-secondary);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.site-header__cta {
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-gallery);
}

.site-header.is-stuck .site-header__cta {
  opacity: 1;
  pointer-events: auto;
}

.site-header__cta:hover { text-decoration: underline; }

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-ink);
}

.site-logo__mark {
  display: block;
  flex-shrink: 0;
}

.site-logo__wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
  border-top: var(--border-hairline);
  padding: var(--space-xl) 0 var(--space-md);
  background-color: var(--color-paper);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .site-footer__columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer__heading {
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 500;
  margin: 0;
}

.site-footer__brand-line {
  font-family: var(--font-display);
  font-size: var(--type-body);
  color: var(--color-ink-secondary);
  line-height: 1.5;
  margin: 0;
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__list a {
  font-family: var(--font-display);
  font-size: var(--type-body);
  color: var(--color-ink);
  text-decoration: none;
}

.site-footer__list a:hover { text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--border-hairline);
  font-family: var(--font-meta);
  font-size: var(--type-meta);
  color: var(--color-ink-secondary);
}

.site-footer__copy,
.site-footer__location { margin: 0; }

/* ── Focus rings (accessibility) ─────────────────────────── */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

/* Top-nav links (added by multi-page catalog) */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  justify-content: center;
}
.site-nav__link {
  position: relative;
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
/* Editorial pipe divider between every adjacent pair of nav links.
   Sits in the gap to the left of each link except the first. */
.site-nav__link + .site-nav__link::before {
  content: "|";
  position: absolute;
  left: calc(var(--space-md) * -0.5);
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-ink-secondary);
  opacity: 0.4;
  pointer-events: none;
}
.site-nav__link[aria-current="page"] {
  color: var(--color-accent);
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
}
.site-nav__link[aria-current="page"] .bi-en { color: var(--color-accent); opacity: 0.7; }
.site-nav__link:hover { opacity: 0.7; }
.site-nav .bi-en {
  display: inline;
  margin-left: 0.4em;
  color: var(--color-ink-secondary);
  font-size: 0.85em;
}
@media (max-width: 640px) {
  /* Compact bilingual nav — single row, right-aligned, no pipe dividers. */
  .site-nav {
    flex: 0 0 auto;
    gap: var(--space-sm);
    justify-content: flex-end;
  }
  .site-nav .bi-en {
    /* Hide the English half on the narrowest screens to guarantee a single row. */
    display: none;
  }
  .site-nav__link + .site-nav__link::before {
    content: none; /* drop pipe dividers — gap is the separator on mobile */
  }
  .site-header__cta { display: none; } /* reclaim horizontal room; CTA stays desktop-only */
  .site-header__inner { gap: var(--space-md); }
}

/* Restore the English half once there's more horizontal room. */
@media (min-width: 421px) and (max-width: 640px) {
  .site-nav .bi-en { display: inline; }
}

/* Status chip */
.status-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-ink);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-chip__en { font-size: 0.85em; color: var(--color-ink-secondary); }

.status-chip--default { background: transparent; color: var(--color-ink); }
.status-chip--inverted {
  background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink);
}
.status-chip--inverted .status-chip__en { color: var(--color-ink-on-dark-secondary); }
.status-chip--accent {
  background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent);
}
.status-chip--accent .status-chip__en { color: rgba(255,255,255,0.75); }

/* Meta pair */
.meta-pair { display: flex; flex-direction: column; gap: var(--space-xs); }
.meta-pair__label {
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 700;
}
.meta-pair__label .bi-en { color: var(--color-ink-secondary); margin-left: 0.4em; font-size: 0.85em; }
.meta-pair__value { font-size: var(--type-body); color: var(--color-ink); }
.meta-pair__value .bi-en { display: block; color: var(--color-ink-secondary); font-size: 0.9em; margin-top: 2px; }

/* Exhibition card */
.exhibition-card { border: var(--border-ink); background: var(--color-paper); }
.exhibition-card__link { display: block; color: inherit; text-decoration: none; }
.exhibition-card__image-wrap {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--color-paper-alt);
  border-bottom: var(--border-ink);
}
.exhibition-card__image {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter var(--duration-med) var(--ease-gallery);
}
.exhibition-card:hover .exhibition-card__image { filter: grayscale(0); }
.exhibition-card__image-wrap--missing::after {
  content: attr(data-fallback-title);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--space-md); text-align: center; color: var(--color-ink-secondary);
}
.exhibition-card__chip {
  position: absolute; top: var(--space-sm); left: var(--space-sm);
}
.exhibition-card__caption {
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-xs);
}
.exhibition-card__title {
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.25rem); /* ~16-20px */
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0;
}
.exhibition-card__title .bi-en {
  display: block; font-size: 0.8em; font-weight: 500;
  color: var(--color-ink-secondary); margin-top: 2px;
}
.exhibition-card__venue { font-size: var(--type-meta); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.exhibition-card__venue .bi-en { color: var(--color-ink-secondary); margin-left: 0.4em; font-size: 0.9em; }
.exhibition-card__dates { font-size: var(--type-meta); color: var(--color-ink-secondary); margin: 0; }
.exhibition-card__excerpt { font-size: var(--type-body); margin: var(--space-sm) 0 0; color: var(--color-ink); }
.exhibition-card--featured { grid-column: span 2; }

/* Filter list */
.filter-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.filter-list__heading {
  font-size: var(--type-eyebrow); letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase; font-weight: 700;
  margin: 0 0 var(--space-sm);
}
.filter-list__heading .bi-en { color: var(--color-ink-secondary); margin-left: 0.4em; font-size: 0.85em; }
.filter-list__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.filter-list__link {
  display: block; padding: var(--space-sm) var(--space-md);
  color: var(--color-ink); text-decoration: none;
  border: var(--border-ink); background: transparent;
  font-size: var(--type-meta); text-transform: uppercase; letter-spacing: 0.05em;
}
.filter-list__link.is-active {
  background: var(--color-accent);
  color: var(--color-paper);
  border-color: var(--color-accent);
}
.filter-list__link:hover:not(.is-active) { background: var(--color-paper-alt); }
.filter-list__link .bi-en { color: var(--color-ink-secondary); margin-left: 0.4em; font-size: 0.9em; }
.filter-list__link.is-active .bi-en { color: rgba(255,255,255,0.75); }

/* Sheet (mobile overlay) */
.sheet {
  position: fixed; inset: 0; z-index: 50;
  background: var(--color-paper); overflow-y: auto;
}
.sheet[hidden] { display: none; }
.sheet__inner { padding: var(--space-lg); }
.sheet__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-md); }
.sheet__title { font-size: var(--type-headline); font-weight: 700; margin: 0; }
.sheet__title .bi-en { color: var(--color-ink-secondary); margin-left: 0.4em; font-size: 0.7em; }
.sheet__close {
  background: transparent; border: var(--border-ink); width: 44px; height: 44px;
  font-size: 24px; cursor: pointer;
}

/* Sticky mobile CTA */
.sticky-mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--color-accent); color: var(--color-paper);
  padding: var(--space-md); text-align: center;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  text-decoration: none;
  display: none; /* shown on detail page only via .has-sticky-cta */
}
.has-sticky-cta .sticky-mobile-cta { display: block; }
/* Mobile only: the sticky bar IS the primary CTA, hide the in-flow one
   and leave room at the bottom so content can scroll clear of the bar. */
@media (max-width: 767px) {
  .has-sticky-cta .detail-page__cta-primary { display: none; }
  .has-sticky-cta { padding-bottom: calc(var(--space-md) * 2 + 1.25rem); }
}
@media (min-width: 768px) {
  .has-sticky-cta .sticky-mobile-cta { display: none; }
}
.sticky-mobile-cta .bi-en { color: rgba(255,255,255,0.75); margin-left: 0.4em; font-size: 0.9em; }

/* Detail page */
.detail-page__inner {
  display: grid; gap: var(--space-xl);
  padding: var(--space-xl) var(--page-padding-x);
  max-width: var(--max-width); margin: 0 auto;
}
@media (min-width: 768px) {
  .detail-page__inner {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }
}
.detail-page__hero {
  position: relative; aspect-ratio: 4/3;
  background: var(--color-paper-alt); overflow: hidden;
  border: var(--border-ink);
}
.detail-page__hero-image {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter var(--duration-med) var(--ease-gallery);
}
.detail-page__hero:hover .detail-page__hero-image { filter: grayscale(0); }
.detail-page__hero--missing::after {
  content: attr(data-fallback-title);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--space-md); color: var(--color-ink-secondary);
}
.detail-page__info { display: flex; flex-direction: column; gap: var(--space-lg); }
.detail-page__title-block { display: flex; flex-direction: column; gap: var(--space-md); }
.detail-page__title {
  font-size: var(--type-display-sm); font-weight: 700;
  letter-spacing: -0.02em; margin: 0; line-height: 1.1;
}
.detail-page__title .bi-en {
  display: block; font-size: 0.55em; font-weight: 500;
  color: var(--color-ink-secondary); margin-top: var(--space-sm);
}
.detail-page__meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
}
.detail-page__about-heading {
  font-size: var(--type-eyebrow); letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase; font-weight: 700;
  margin: 0 0 var(--space-md);
}
.detail-page__about-heading .bi-en { color: var(--color-ink-secondary); margin-left: 0.4em; font-size: 0.85em; }
.detail-page__about-prose {
  font-size: var(--type-body);
  line-height: 1.7;
  margin: 0 0 var(--space-md);
  max-width: 64ch;
  white-space: pre-wrap; /* respect newlines inside description_ko/_en */
}
.detail-page__about-prose.bi-en { color: var(--color-ink-secondary); font-size: var(--type-meta); }

.detail-page__actions { display: flex; flex-direction: column; gap: var(--space-md); }
.detail-page__cta-primary {
  display: block; padding: var(--space-md); text-align: center;
  background: var(--color-accent); color: var(--color-paper);
  text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid var(--color-accent);
}
.detail-page__cta-primary .bi-en { color: rgba(255,255,255,0.8); margin-left: 0.4em; font-size: 0.9em; }
.detail-page__action-row { display: flex; gap: var(--space-sm); }
.detail-page__cta-outline {
  flex: 1; padding: var(--space-md); text-align: center;
  background: transparent; color: var(--color-ink);
  border: var(--border-ink); cursor: pointer;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-family: inherit; font-size: var(--type-meta);
}
.detail-page__cta-filled {
  flex: 1; padding: var(--space-md); text-align: center;
  background: var(--color-ink); color: var(--color-paper);
  text-decoration: none;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: var(--type-meta);
}
.detail-page__cta-text {
  display: inline-block; color: var(--color-ink); text-decoration: underline;
  font-size: var(--type-meta); text-transform: uppercase; letter-spacing: 0.05em;
}
.detail-page__cta-text .bi-en, .detail-page__cta-outline .bi-en, .detail-page__cta-filled .bi-en {
  color: var(--color-ink-secondary); margin-left: 0.4em; font-size: 0.9em;
}
.detail-page__cta-filled .bi-en { color: rgba(255,255,255,0.7); }

/* ── Submission form ─────────────────────────────────────── */

.submit-page {
  border-top: var(--border-section);
  padding-block: var(--space-3xl);
}

.submit-page__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
}

.submit-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.submit-page__eyebrow {
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

.submit-page__title {
  font-size: var(--type-headline);
  line-height: 1.05;
  margin: 0;
}

.submit-page__intro {
  color: var(--color-ink-secondary);
  max-width: 42rem;
}

.submit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.submit-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 760px) {
  .submit-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.submit-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.submit-field--full {
  grid-column: 1 / -1;
}

.submit-field span,
.submit-more summary {
  font-family: var(--font-meta);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.submit-field input,
.submit-field textarea {
  width: 100%;
  border: var(--border-ink);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  min-height: 44px;
  padding: var(--space-sm);
}

.submit-field textarea {
  resize: vertical;
}

.submit-field input:focus,
.submit-field textarea:focus {
  outline: 2px solid var(--color-ink);
  outline-offset: 0;
}

.submit-field small {
  min-height: 1.25rem;
  color: var(--color-ink-secondary);
  font-size: var(--type-meta);
}

.submit-field small[data-active-error] {
  color: var(--color-ink);
}

.submit-more {
  border-top: var(--border-hairline);
  padding-top: var(--space-md);
}

.submit-more summary {
  cursor: pointer;
  min-height: 44px;
}

.submit-form__button {
  min-height: 52px;
  border: var(--border-ink);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-paper);
  cursor: pointer;
  font-family: var(--font-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.submit-form__button:disabled {
  background: var(--color-paper-alt);
  color: var(--color-ink-secondary);
  cursor: wait;
}

.submit-form__banner {
  border: var(--border-ink);
  padding: var(--space-md);
}

.submit-success {
  border-top: var(--border-section);
  padding-top: var(--space-xl);
}

/* Discover page */
.discover-page { padding: var(--space-xl) var(--page-padding-x); max-width: var(--max-width); margin: 0 auto; }
.discover-page__header {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: var(--border-section); padding-bottom: var(--space-md); margin-bottom: var(--space-lg);
}
.discover-page__title { font-size: var(--type-display); font-weight: 800; margin: 0; letter-spacing: -0.04em; }
.discover-page__title .bi-en { display: block; font-size: 0.3em; color: var(--color-ink-secondary); font-weight: 500; }
.discover-page__count { font-size: var(--type-meta); color: var(--color-ink-secondary); margin: 0; }
.discover-page__layout { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) {
  .discover-page__layout { grid-template-columns: 240px 1fr; }
}
.discover-page__sidebar { display: flex; flex-direction: column; gap: var(--space-lg); }
.discover-page__grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 768px) { .discover-page__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .discover-page__grid { grid-template-columns: 1fr 1fr 1fr; } }
.discover-page__empty {
  grid-column: 1 / -1; padding: var(--space-3xl) var(--space-md);
  text-align: center; color: var(--color-ink-secondary);
}
.discover-page__empty[hidden] { display: none; }
.discover-page__reset {
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md);
  background: transparent; border: var(--border-ink); cursor: pointer; font-family: inherit;
}
.exhibition-card[hidden] { display: none !important; }

/* Map page */
.map-page {
  display: grid; grid-template-columns: 1fr;
  height: calc(100vh - 60px);
}
@media (min-width: 768px) {
  .map-page { grid-template-columns: 320px 1fr; }
}
.map-page__sidebar {
  border-right: var(--border-ink); overflow-y: auto;
  background: var(--color-paper);
}
.map-page__sidebar-header { padding: var(--space-md); border-bottom: var(--border-ink); }
.map-page__sidebar-title { font-size: var(--type-eyebrow); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; margin: 0; }
.map-page__sidebar-count { color: var(--color-ink-secondary); }
.map-page__list { list-style: none; margin: 0; padding: 0; }
.map-page__list-item {
  border-bottom: var(--border-ink);
  display: flex;
  align-items: stretch;
  position: relative;
}
/* Accent stripe on the active row (matches the active-filter and
   active-nav treatment elsewhere). Avoids the heavy black fill that
   was originally here, which fought with the orange status-chips. */
.map-page__list-item.is-active {
  background: var(--color-paper-alt);
  box-shadow: inset 4px 0 0 0 var(--color-accent);
}
.map-page__list-link {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-md); color: inherit; text-decoration: none;
  flex: 1; min-width: 0; /* allow long Korean titles to wrap */
}
.map-page__list-title { font-weight: 700; }
.map-page__list-venue { font-size: var(--type-meta); text-transform: uppercase; letter-spacing: 0.05em; }
/* Focus button (sidebar → pin) — small text-only affordance on the
   right edge of each row. Visually quiet so it doesn't compete with
   the row's primary link. */
.map-page__list-focus {
  flex: 0 0 auto;
  border: none; background: transparent;
  font-family: inherit;
  font-size: var(--type-meta); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-ink-secondary);
  padding: var(--space-md) var(--space-md);
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
  border-left: var(--border-hairline);
}
.map-page__list-focus:hover { color: var(--color-accent); }
.map-page__list-focus .bi-en { color: var(--color-ink-secondary); margin-left: 0.4em; opacity: 0.7; font-size: 0.85em; }
.map-page__list-focus:hover .bi-en { color: var(--color-accent); }
.map-page__map {
  background: var(--color-paper-alt);
  filter: grayscale(1) contrast(1.05);
  position: relative;
}
/* SDK failed to load (referrer not allowlisted, network blocked, ad
   blocker). The map container is empty; explain why. */
.map-page__map.map-failed::after {
  content: "지도를 불러올 수 없습니다.";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-secondary);
  font-size: var(--type-meta);
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: var(--space-md);
  text-align: center;
}
/* Hide tile imagery during initial load to avoid the brief flash where
   Naver's auth-fail placeholder PNG renders before real tiles arrive.
   Targets children (> *) so .map-failed::after (rendered on the
   container itself) still surfaces if both classes coexist. */
.map-page__map.map-loading > * { visibility: hidden; }
/* No exhibitions had lat/lng. */
.map-page__map.map-empty::after {
  content: "표시할 전시가 없습니다.";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-secondary);
  font-size: var(--type-meta);
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: var(--space-md);
  text-align: center;
}
/* Map pins. The Naver SDK injects our <span> as the marker icon; we
   give it a small accent-bordered dot and a fill on .is-active. */
.map-pin {
  display: block;
  width: 12px; height: 12px;
  background: var(--color-ink);
  border: 2px solid var(--color-paper);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-gallery),
              transform var(--duration-fast) var(--ease-gallery);
}
.map-pin:hover { transform: scale(1.3); }
.map-pin.is-active {
  background: var(--color-accent);
  transform: scale(1.5);
}

/* Hero marquee tile link wrapper (added by multi-page catalog) */
.hero__marquee-tile-link { display: block; color: inherit; text-decoration: none; }