/* ==========================================================================
   GÜROL KUYUMCULUK — ALTININ İZİ
   Global foundation stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color system */
  --color-obsidian: #0A0908;
  --color-ivory: #F2EEE5;
  --color-gold: #C6A447;
  --color-gold-muted: #8D7535;
  --color-gray: #AAA7A0;

  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Manrope', sans-serif;

  --fs-nav-link: clamp(0.7rem, 0.65rem + 0.2vw, 0.78rem);
  --fs-logo: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --fs-scroll-label: clamp(0.62rem, 0.6rem + 0.1vw, 0.7rem);

  /* Motion */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --nav-height: clamp(4.5rem, 4rem + 2vw, 6rem);
  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --container-max: 1680px;
  --container-pad: clamp(32px, 4vw, 80px);

  --z-noise: 5;
  --z-nav: 40;
  --z-mobile-menu: 50;
  --z-cursor: 60;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--color-obsidian);
  color-scheme: dark;
}

body {
  background: var(--color-obsidian);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
  overflow-x: hidden;
  min-height: 100svh;
}

/* Scroll lock state, toggled by JS while the mobile menu is open */
body.is-locked {
  overflow: hidden;
  height: 100svh;
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. GLOBAL NOISE TEXTURE
   Generated inline via SVG feTurbulence data-uri — no external image.
   Extremely subtle: must never resemble television static.
   -------------------------------------------------------------------------- */
.noise-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-noise);
  pointer-events: none;
  opacity: 0.018;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* --------------------------------------------------------------------------
   4. CUSTOM CURSOR (desktop / fine pointers only)
   -------------------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
}

body.has-custom-cursor .cursor {
  opacity: 1;
}

body.has-custom-cursor {
  cursor: none;
}

body.has-custom-cursor a,
body.has-custom-cursor button {
  cursor: none;
}

.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.cursor__dot {
  width: 6px;
  height: 6px;
  background: var(--color-ivory);
}

.cursor__ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(242, 238, 229, 0.45);
  transition: width 0.25s var(--ease-out-soft), height 0.25s var(--ease-out-soft), border-color 0.25s var(--ease-out-soft);
}

.cursor--active .cursor__ring {
  width: 46px;
  height: 46px;
  border-color: rgba(242, 238, 229, 0.75);
}

/* Hide custom cursor on touch devices / coarse pointers */
@media (pointer: coarse) {
  .cursor { display: none; }
  body.has-custom-cursor { cursor: auto; }
  body.has-custom-cursor a,
  body.has-custom-cursor button { cursor: pointer; }
}

/* --------------------------------------------------------------------------
   5. PRIMARY NAVIGATION
   -------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding-block: 36px;
  background: transparent;
  transition: padding-block 0.5s var(--ease-out-soft), background-color 0.5s var(--ease-out-soft), backdrop-filter 0.5s var(--ease-out-soft);
}

.site-nav.is-scrolled {
  padding-block: 18px;
  background: rgba(7, 7, 7, 0.55);
  backdrop-filter: blur(6px);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-nav__wordmark {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(198, 164, 71, 0.9);
}

.site-nav__links {
  display: flex;
  gap: clamp(32px, 3vw, 56px);
}

.site-nav__link {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(242, 238, 229, 0.82);
}

.site-nav__link:focus-visible,
.menu-trigger:focus-visible,
.mobile-menu__link:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* Mobile menu trigger — two lines, no circle */
.menu-trigger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 28px;
  height: 20px;
}

.menu-trigger__line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-ivory);
  transition: transform 0.4s var(--ease-in-out-soft), opacity 0.3s ease;
}

.menu-trigger[aria-expanded="true"] .menu-trigger__line:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.menu-trigger[aria-expanded="true"] .menu-trigger__line:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. MOBILE FULL-VIEWPORT MENU
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-menu);
  background: var(--color-obsidian);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-soft), visibility 0s linear 0.5s;
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s var(--ease-out-soft);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.3rem + 1vw, 1rem);
  text-align: center;
}

.mobile-menu__link {
  display: block;
}

.mobile-menu__link-mask {
  display: block;
  overflow: hidden;
}

.mobile-menu__link-text {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 1.6rem + 5vw, 4rem);
  letter-spacing: 0.02em;
  transform: translateY(110%);
}

/* --------------------------------------------------------------------------
   7. SCENE STRUCTURE (shared)
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  background: var(--color-obsidian);
}

/* --------------------------------------------------------------------------
   8. CHAPTER 01 — HERO — CINEMATIC VIDEO
   The video is the atmospheric/emotional layer only — the Hero itself is
   composed of video + typography + premium layout, per the approved
   direction. Three stacked layers: (1) full-bleed <video>, (2) a flat,
   subtle black overlay for text contrast (no gradient), (3) editorial
   content. No pin, no scroll lock, no parallax — this is a plain 100svh
   flow chapter; scrolling behaves exactly like any other section. The
   video itself has no JS dependency (autoplay/muted/loop/playsinline are
   native HTML attributes) — see initHeroVideo()/initHeroContentReveal()
   in main.js for the one-time content fade-in and an autoplay retry.
   -------------------------------------------------------------------------- */
.scene--hero {
  position: relative;
  height: 100svh;
  background: var(--color-obsidian);
}

.hero-stage {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--color-obsidian);
}

/* Layer 1 — the cinematic video, full-bleed, never stretched/distorted. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Layer 2 — a flat, subtle overlay for typography contrast only. No
   gradient, no vignette — just enough to read as a calm dark surface. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
  pointer-events: none;
}

/* Layer 3 — editorial content. No large brand name lives here (see nav
   monogram instead). Slightly left of center, capped well short of
   viewport width so it never reads as full-bleed over the video. */
.hero__content {
  position: absolute;
  left: clamp(64px, 9vw, 140px);
  top: 44%;
  max-width: 640px;
  transform: translateY(-50%);
  z-index: 2;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(198, 164, 71, 0.8);
}

.hero__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 68px);
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--color-ivory);
  margin-top: clamp(18px, 2vw, 26px);
}

/* Emphasis — restrained gold, subtle italic, deliberately not larger
   than the main statement; color and rhythm carry the emphasis. */
.hero__emphasis {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 46px);
  line-height: 1.15;
  color: var(--color-gold);
  margin-top: clamp(20px, 2.2vw, 28px);
}

/* Bottom editorial details */
.hero__detail {
  position: absolute;
  bottom: max(30px, 4vh);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: rgba(242, 238, 229, 0.55);
  z-index: 2;
}

.hero__detail--left {
  left: var(--container-pad);
}

.hero__detail--right {
  right: var(--container-pad);
}

.hero__detail-arrow {
  font-size: 10px;
}

/* --------------------------------------------------------------------------
   9. SCENE 02 — COLLECTION REVEAL
   The editorial opening chapter of the collection story. The frame begins
   as a shape inspired by Scene 01's ring opening and expands into a large,
   asymmetric editorial crop as the section scrolls in (see main.js) — no
   hard cut, same Obsidian background as Scene 01.
   -------------------------------------------------------------------------- */
.scene--collections {
  position: relative;
  min-height: 100svh;
  background: var(--color-obsidian);
  overflow: hidden;
  padding-block: clamp(90px, 11vh, 140px) 0;
}

.collections__inner {
  position: relative;
  min-height: 78vh;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Text occupies the left visual territory — deliberately narrow, well
   short of the image, so the two never read as a 50/50 split. */
.collections__text {
  position: relative;
  z-index: 2;
  max-width: 30ch;
  padding-top: clamp(16px, 3vh, 56px);
}

.collections__label {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(198, 164, 71, 0.85);
}

.collections__headline {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 6.2vw, 104px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--color-ivory);
}

.collections__paragraph {
  margin-top: clamp(28px, 3vw, 44px);
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.7;
  color: rgba(242, 238, 229, 0.72);
  max-width: 34ch;
}

/* Frame — large, asymmetric, allowed to bleed past the viewport's right
   edge. No border, no glow, no rounded-card chrome: the crop itself reads
   as intentional. Resting CSS state below is also the correct no-JS /
   reduced-motion state. Desktop only — tablet/mobile use a distinct
   full-bleed composition (see below). */
.collections__frame {
  position: absolute;
  top: 6vh;
  bottom: 6vh;
  right: clamp(-48px, -3.5vw, -16px);
  width: min(60vw, 980px);
  overflow: hidden;
  border-radius: 2px;
}

.collections__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Calms the source photo's blown-out background toward Obsidian at the
   edges without touching the subject — keeps the authentic, human feeling */
.collections__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(10, 9, 8, 0) 45%, rgba(10, 9, 8, 0.55) 100%);
  pointer-events: none;
}

/* Intentionally oversized within its clipped wrapper (20% taller, centered)
   so the scroll parallax in main.js has room to shift it without ever
   revealing an edge */
.collections__image {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: 50% 45%;
  /* subtle color grade toward the site's black-and-gold palette */
  filter: sepia(0.12) saturate(0.9) contrast(1.08) brightness(0.95);
}

/* Chapter preview — quiet editorial metadata, not a navigation list and
   not styled as clickable (plain spans, no links, no hover state). */
.collections__chapters {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  padding-inline: var(--container-pad);
  padding-block: clamp(28px, 4vh, 48px);
  max-width: var(--container-max);
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(242, 238, 229, 0.5);
}

.collections__chapter-sep {
  color: rgba(198, 164, 71, 0.5);
}

/* Tablet and mobile share a full-bleed composition: the image runs edge to
   edge above the text rather than bleeding asymmetrically off one side —
   a deliberately different treatment from desktop, not a scaled-down copy. */
@media (max-width: 1023px) {
  .scene--collections {
    padding-block: 0;
    display: flex;
    flex-direction: column;
  }

  .collections__frame {
    order: -1;
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: 0;
  }

  .collections__inner {
    min-height: 0;
    order: 1;
  }

  .collections__text {
    padding-inline: var(--container-pad);
    padding-top: clamp(40px, 6vh, 64px);
    padding-bottom: clamp(40px, 6vh, 64px);
    max-width: 60ch;
  }

  .collections__chapters {
    order: 2;
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .collections__frame {
    aspect-ratio: 4 / 5;
  }

  .collections__text {
    padding-top: clamp(32px, 6vh, 48px);
  }

  .collections__headline {
    font-size: clamp(40px, 12vw, 56px);
  }

  .collections__paragraph {
    max-width: none;
  }

  .collections__chapters {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   10. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE — LAPTOP (1024px – 1439px, landscape)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1439px) and (orientation: landscape) {
  .hero__content {
    left: clamp(48px, 7vw, 100px);
    max-width: 560px;
  }

  .hero__statement {
    font-size: clamp(32px, 4vw, 54px);
  }

  .hero__emphasis {
    font-size: clamp(22px, 2.6vw, 38px);
  }

  .site-nav__links {
    gap: clamp(24px, 2.4vw, 40px);
  }
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE — TABLET LANDSCAPE (768px – 1023px, landscape)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .hero__content {
    left: 6vw;
    max-width: 460px;
  }

  .hero__statement {
    font-size: clamp(28px, 4.4vw, 42px);
  }

  .hero__emphasis {
    font-size: clamp(20px, 3vw, 30px);
  }

  .site-nav__links {
    gap: clamp(18px, 2vw, 30px);
  }
}

/* --------------------------------------------------------------------------
   13. RESPONSIVE — TABLET PORTRAIT (max-width: 1024px, portrait)
   Covers both 768x1024 and 1024x1366 reference viewports. Editorial copy
   moves to middle-left, lower on the stage.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (orientation: portrait) {
  .site-nav__links {
    display: none;
  }

  .menu-trigger {
    display: flex;
  }

  .hero-stage {
    height: 100dvh;
  }

  .hero__content {
    left: 8vw;
    top: 60%;
    max-width: 74vw;
  }

  .hero__statement {
    font-size: clamp(30px, 6vw, 46px);
  }

  .hero__emphasis {
    font-size: clamp(22px, 4.4vw, 34px);
  }

  .hero__detail {
    bottom: max(20px, 3vh);
  }
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE — MOBILE (below 768px)
   Dedicated composition, not a scaled tablet-portrait copy: centered
   editorial copy over the full-bleed video. Bottom details inside safe
   viewport space (100dvh).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-nav__links {
    display: none;
  }

  .menu-trigger {
    display: flex;
  }

  .hero-stage {
    height: 100dvh;
  }

  .hero__content {
    left: 50%;
    top: calc(54% - 7vh);
    max-width: 86vw;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .hero__statement {
    font-size: clamp(26px, 8vw, 36px);
  }

  .hero__emphasis {
    font-size: clamp(20px, 6vw, 28px);
  }

  .hero__detail {
    font-size: 8px;
    bottom: max(16px, 3vh);
  }
}

/* ==========================================================================
   SCENE 01 AND SCENE 02 ARE FROZEN — nothing above this line was touched
   to build Scene 03. Everything below is new, additive, and scoped to its
   own .exhibit__ namespace.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. CHAPTER 03 — KOLEKSİYONLAR
   One pinned, dense editorial wall: a compact header sits above a single
   tight three-column row (left/center/right = ring/necklace/bracelet),
   all three always visible — an exhibition, not a sequence of pages. A
   single GSAP timeline shifts emphasis between them purely via
   scale/opacity/filter on each whole panel (image + its own overlaid
   caption move together as one composition, see buildExhibitTimeline in
   main.js); nothing ever fully hides. Mobile and reduced-motion do not
   pin; see the flow-fallback rules at the end of this section, which
   both share.
   -------------------------------------------------------------------------- */
.scene--exhibit {
  position: relative;
  background: var(--color-obsidian);
  height: 260vh;
}

.exhibit-stage {
  position: relative;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--color-obsidian);
  display: flex;
  flex-direction: column;
  /* Clears the fixed nav (~87px unscrolled, ~51px scrolled) so the
     chapter label is never partially hidden beneath it. Reset to 0 in
     the mobile/reduced-motion flow blocks below, which aren't pinned
     flush to the viewport top and don't need it. */
  padding-top: clamp(72px, 8.5vh, 104px);
}

/* Header — a compact, permanent editorial strip above the wall (not an
   overlay on the photography). Shown with a one-time rise/fade, then
   stays in place for the whole chapter. Aligns to the same 95vw grid as
   the gallery below it. */
.exhibit__header {
  flex: 0 0 auto;
  height: 16vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
  width: 95vw;
  margin-inline: auto;
}

.exhibit__label {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(198, 164, 71, 0.8);
}

.exhibit__intro-statement {
  margin-top: clamp(8px, 1vw, 14px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 38px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-ivory);
}

/* Gallery — one dense row, three columns, always all visible. The
   timeline only ever adjusts scale/opacity/filter on a whole
   .exhibit__panel, never hides one, never swaps layout. */
.exhibit__gallery {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 16px);
  width: 95vw;
  margin-inline: auto;
}

.exhibit__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  transform-origin: 50% 50%;
}

.exhibit__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 72vh;
  overflow: hidden;
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
}

/* .exhibit__frame is an <a> — the whole panel is the tap target, not just
   the caption text. Same restrained language as the rest of the site: a
   slow image scale on hover/focus, no new visual chrome. */
.exhibit__image {
  transition: transform 0.9s var(--ease-out-soft);
}

.exhibit__frame:hover .exhibit__image,
.exhibit__frame:focus-visible .exhibit__image {
  transform: scale(1.04);
}

.exhibit__frame:focus-visible {
  outline: 1px solid rgba(198, 164, 71, 0.6);
  outline-offset: -1px;
}

.exhibit__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.exhibit__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.85) 0%, rgba(10, 9, 8, 0.15) 32%, rgba(10, 9, 8, 0) 55%);
  pointer-events: none;
}

.exhibit__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.1) saturate(0.9) contrast(1.08) brightness(0.95);
}

.exhibit__panel--rings .exhibit__image {
  object-position: 50% 40%;
}

.exhibit__panel--necklaces .exhibit__image {
  object-position: 55% 40%;
}

.exhibit__panel--bracelets .exhibit__image {
  object-position: 50% 45%;
}

/* Caption is overlaid directly onto the lower third of its own frame,
   over the gradient above — title and jewellery are one composition,
   never a separate corner of the stage. One consistent system for all
   three panels. */
.exhibit__caption {
  position: absolute;
  left: clamp(16px, 1.6vw, 24px);
  right: clamp(16px, 1.6vw, 24px);
  bottom: clamp(18px, 2.2vw, 28px);
  z-index: 3;
}

.exhibit__index {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(10px, 0.78vw, 11.5px);
  font-weight: 500;
  letter-spacing: 0.26em;
  color: rgba(198, 164, 71, 0.9);
}

.exhibit__name {
  display: block;
  margin-top: clamp(6px, 0.7vw, 10px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.05;
  color: var(--color-ivory);
}

.exhibit__line {
  margin-top: clamp(6px, 0.7vw, 10px);
  font-family: var(--font-body);
  font-size: clamp(11px, 0.8vw, 12.5px);
  line-height: 1.5;
  color: rgba(242, 238, 229, 0.75);
}

/* Progress indicator — integrated into the compact header, tracking
   which collection currently holds focus. Not carousel navigation (no
   click handlers, aria-hidden, purely decorative). Active number is
   highlighted in restrained gold via main.js. */
.exhibit__progress {
  flex: 0 0 auto;
  display: flex;
  gap: clamp(16px, 1.6vw, 24px);
}

.exhibit__progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.exhibit__progress-number {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(242, 238, 229, 0.35);
}

.exhibit__progress-line {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0.3);
  transform-origin: 50% 50%;
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   16. CHAPTER 03 — TABLET
   Landscape tablet keeps the equal three-column wall, tighter and
   shorter. Portrait tablet uses one dominant central panel with two
   narrower, partially visible side panels — three equal columns don't
   read as immersive at this width.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .exhibit__gallery {
    gap: clamp(8px, 1vw, 14px);
  }

  .exhibit__frame {
    height: 64vh;
  }

  .exhibit__intro-statement {
    font-size: clamp(19px, 2.6vw, 28px);
  }

  .exhibit__name {
    font-size: clamp(18px, 2.6vw, 24px);
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .exhibit__header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(10px, 1.6vh, 16px);
    height: 18vh;
  }

  .exhibit__gallery {
    gap: clamp(8px, 1.8vw, 14px);
  }

  .exhibit__panel--rings,
  .exhibit__panel--bracelets {
    flex: 0.72 1 0;
  }

  .exhibit__panel--necklaces {
    flex: 1.3 1 0;
  }

  .exhibit__frame {
    height: 60vh;
  }

  .exhibit__intro-statement {
    font-size: clamp(20px, 3.6vw, 28px);
  }

  .exhibit__caption {
    left: clamp(10px, 2vw, 16px);
    right: clamp(10px, 2vw, 16px);
    bottom: clamp(12px, 1.8vh, 18px);
  }

  .exhibit__index {
    font-size: 9px;
  }

  .exhibit__name {
    margin-top: clamp(4px, 0.8vh, 8px);
    font-size: clamp(15px, 2.6vw, 20px);
  }

  .exhibit__line {
    margin-top: clamp(4px, 0.8vh, 8px);
    font-size: clamp(9.5px, 1.6vw, 11px);
  }
}

/* --------------------------------------------------------------------------
   17. CHAPTER 03 — MOBILE / FLOW FALLBACK
   No pin on touch — the gallery stacks into a natural vertical sequence
   (header, then one collection per block) rather than squeezing three
   full columns into a cramped row. The reduced-motion block that
   follows shares this same structural approach for any viewport width.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .scene--exhibit {
    height: auto;
    padding-block: clamp(56px, 8vh, 88px) clamp(72px, 9vh, 104px);
  }

  .exhibit-stage {
    position: relative;
    height: auto;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  .exhibit__header {
    height: auto;
    width: auto;
    margin-inline: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 3vh, 24px);
    padding-inline: var(--container-pad);
    padding-block: 0 clamp(32px, 5vh, 48px);
  }

  .exhibit__intro-statement {
    font-size: clamp(26px, 7vw, 34px);
  }

  .exhibit__gallery {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    margin-inline: 0;
    padding-inline: var(--container-pad);
    gap: clamp(40px, 8vh, 64px);
  }

  .exhibit__panel {
    flex: 0 0 auto;
    width: 100%;
  }

  .exhibit__frame {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* Restores the oversize budget the mobile-only scroll parallax in
     initExhibitFlow needs (see main.js) — the desktop wall has no
     per-image parallax, so the base rule stays flush at 100%. */
  .exhibit__image {
    top: -10%;
    height: 120%;
  }

  .exhibit__caption {
    left: clamp(14px, 4vw, 20px);
    right: clamp(14px, 4vw, 20px);
    bottom: clamp(16px, 4vh, 22px);
  }

  .exhibit__progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene--exhibit {
    height: auto;
    padding-block: clamp(56px, 8vh, 88px) clamp(72px, 9vh, 104px);
  }

  .exhibit-stage {
    position: relative;
    height: auto;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  .exhibit__header {
    height: auto;
    width: auto;
    margin-inline: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 3vh, 24px);
    padding-inline: var(--container-pad);
    padding-block: 0 clamp(32px, 5vh, 48px);
  }

  .exhibit__gallery {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 560px);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    gap: clamp(40px, 6vh, 56px);
  }

  .exhibit__panel {
    flex: 0 0 auto;
    width: 100%;
  }

  .exhibit__frame {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .exhibit__progress {
    display: none;
  }
}

/* ==========================================================================
   SCENE 01, SCENE 02 AND SCENE 03 ARE FROZEN — nothing above this line was
   touched to build Scene 04. Everything below is new, additive, and scoped
   to its own .legacy__ namespace.
   ========================================================================== */

/* --------------------------------------------------------------------------
   17. SCENE 04 — HİKÂYEMİZ
   A breathing space after the product sequence, not another product
   scene. Extremely minimal: no cards, no borders, no boxes, no
   gradients. An asymmetric split — quiet editorial typography on one
   side, one curated, uncropped photograph on the other, with generous
   margin around it. Reuses the same fonts, color tokens and spacing
   scale already established elsewhere on the site.
   -------------------------------------------------------------------------- */
.scene--legacy {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--color-obsidian);
  padding-block: clamp(80px, 10vh, 140px);
}

.legacy__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(48px, 6vw, 120px);
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.legacy__text {
  max-width: 46ch;
}

.legacy__label {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: rgba(198, 164, 71, 0.8);
}

.legacy__headline {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.4vw, 76px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--color-ivory);
}

.legacy__body {
  margin-top: clamp(28px, 3.2vw, 44px);
}

.legacy__body p {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.8;
  color: rgba(242, 238, 229, 0.7);
  max-width: 34ch;
}

.legacy__body p + p {
  margin-top: clamp(18px, 2vw, 28px);
}

/* Sized by width alone, height left to the image's own natural ratio —
   no forced crop, no object-fit trickery. Roughly 38-45% of the
   viewport width, generous margin on every side within its column. */
.legacy__media {
  flex: 0 0 auto;
  width: clamp(340px, 40vw, 860px);
}

/* The source photograph is a tall portrait (~2:3) — true zero-crop at
   38-45% of the viewport width would push the section noticeably past
   100vh. A moderate 4:5 ratio (the same restrained portrait crop used
   elsewhere on the site) keeps the width target and section height
   both honest without an aggressive or awkward crop. */
.legacy__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.legacy__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* --------------------------------------------------------------------------
   18. SCENE 04 — RESPONSIVE
   Tablet and mobile stack rather than scale: image first, then the text
   block, centered — a distinct composition from the desktop split.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .legacy__inner {
    flex-direction: column;
    text-align: center;
    gap: clamp(32px, 5vh, 56px);
  }

  .legacy__text {
    max-width: 60ch;
  }

  .legacy__body p {
    max-width: 44ch;
    margin-inline: auto;
  }

  .legacy__media {
    order: -1;
    width: min(70vw, 520px);
  }
}

@media (max-width: 767px) {
  .scene--legacy {
    padding-block: clamp(64px, 9vh, 96px);
  }

  .legacy__inner {
    gap: clamp(28px, 6vh, 44px);
  }

  .legacy__media {
    width: min(84vw, 420px);
  }

  .legacy__headline {
    font-size: clamp(32px, 9vw, 44px);
  }

  .legacy__body p {
    max-width: none;
  }
}

/* ==========================================================================
   CHAPTERS 01-04 ARE FROZEN — nothing above this line was touched to build
   Chapter 05. Everything below is new, additive, and scoped to its own
   .showcase__ namespace.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19. CHAPTER 05 — SEÇİLİ PARÇALAR
   One long pinned chapter (desktop/tablet): a single dark stage holds
   still while three pieces cross-fade through it, one dominant at a
   time — not three sections. One primary GSAP timeline drives all of
   it (see initShowcaseScene in main.js). Mobile and reduced-motion do
   not pin at all; see the flow-fallback rules at the end of this
   section, which both share.
   -------------------------------------------------------------------------- */
.scene--showcase {
  position: relative;
  background: var(--color-obsidian);
  height: 340vh;
}

.showcase-stage {
  position: relative;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--color-obsidian);
}

/* Intro — label + statement, centered; fades away once the first
   piece takes over the stage. */
.showcase__intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: var(--container-pad);
}

.showcase__label {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: rgba(198, 164, 71, 0.8);
}

.showcase__intro-statement {
  margin-top: clamp(18px, 2.2vw, 30px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 88px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--color-ivory);
}

/* Panels stack directly on top of one another; the timeline crossfades
   opacity/position between them — never more than one is meaningfully
   visible at a time. */
.showcase__panel {
  position: absolute;
  inset: 0;
  padding-inline: var(--container-pad);
  z-index: 2;
}

.showcase__frame {
  position: absolute;
  overflow: hidden;
  border-radius: 2px;
}

.showcase__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.showcase__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(10, 9, 8, 0) 45%, rgba(10, 9, 8, 0.45) 100%);
  pointer-events: none;
}

.showcase__image {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  filter: sepia(0.1) saturate(0.9) contrast(1.08) brightness(0.95);
}

.showcase__caption {
  position: absolute;
  z-index: 3;
  max-width: 30ch;
}

.showcase__index {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(198, 164, 71, 0.8);
}

.showcase__category {
  display: block;
  margin-top: clamp(10px, 1.2vw, 16px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 58px);
  line-height: 1;
  color: var(--color-ivory);
}

.showcase__sentence {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.7;
  color: rgba(242, 238, 229, 0.7);
}

/* ---- Panel 01 — Rings: image dominant right, caption in the left
   territory, vertically centered. ---- */
.showcase__panel--rings .showcase__frame {
  top: 10vh;
  bottom: 10vh;
  right: clamp(-40px, -3vw, -10px);
  width: min(58vw, 1020px);
}

.showcase__panel--rings .showcase__caption {
  left: var(--container-pad);
  top: 50%;
  transform: translateY(-50%);
}

.showcase__panel--rings .showcase__image {
  object-position: 55% 42%;
}

/* ---- Panel 02 — Necklaces: mirrored — image dominant left, caption
   right, a slightly smaller frame for a different rhythm. ---- */
.showcase__panel--necklaces .showcase__frame {
  top: 12vh;
  bottom: 12vh;
  left: clamp(-40px, -3vw, -10px);
  width: min(55vw, 960px);
}

.showcase__panel--necklaces .showcase__caption {
  right: var(--container-pad);
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

.showcase__panel--necklaces .showcase__image {
  object-position: 62% 38%;
}

/* ---- Panel 03 — Bracelets: the widest, most central frame — the
   strongest concluding composition — caption overlaid bottom-center. ---- */
.showcase__panel--bracelets .showcase__frame {
  top: 7vh;
  bottom: 7vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(66vw, 1180px);
}

.showcase__panel--bracelets .showcase__image-wrap::after {
  background: linear-gradient(to top, rgba(10, 9, 8, 0.72) 0%, rgba(10, 9, 8, 0) 40%);
}

.showcase__panel--bracelets .showcase__image {
  object-position: 48% 55%;
}

.showcase__panel--bracelets .showcase__caption {
  left: 50%;
  bottom: clamp(48px, 7vh, 88px);
  transform: translateX(-50%);
  text-align: center;
}

/* Progress indicator — a quiet chapter-position marker, not carousel
   navigation (no click handlers, aria-hidden, purely decorative). */
.showcase__progress {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 4vh, 44px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: clamp(20px, 2vw, 32px);
}

.showcase__progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.showcase__progress-number {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(242, 238, 229, 0.35);
}

.showcase__progress-line {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0.3);
  transform-origin: 50% 50%;
  opacity: 0.4;
}

/* Quiet text action — not a button: no fill, no pill shape, just a
   restrained underline. */
.showcase__action {
  position: absolute;
  left: 50%;
  bottom: clamp(80px, 11vh, 120px);
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--color-ivory);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(198, 164, 71, 0.5);
  transition: border-color 0.4s var(--ease-out-soft);
}

.showcase__action:hover,
.showcase__action:focus-visible {
  border-color: rgba(198, 164, 71, 0.95);
}

/* --------------------------------------------------------------------------
   20. CHAPTER 05 — TABLET
   Still pinned (stable at these sizes, same as Chapter 01's pin down to
   tablet portrait) — frames resize into the 55-70% range; portrait
   tablet moves the caption beneath the image instead of beside it.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .showcase__panel--rings .showcase__frame,
  .showcase__panel--necklaces .showcase__frame {
    width: min(62vw, 820px);
  }

  .showcase__panel--bracelets .showcase__frame {
    width: min(72vw, 900px);
  }

  .showcase__intro-statement {
    font-size: clamp(36px, 6vw, 60px);
  }

  .showcase__category {
    font-size: clamp(30px, 5vw, 44px);
  }
}

@media (max-width: 1023px) and (orientation: portrait) {
  .showcase__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: clamp(40px, 6vh, 72px);
  }

  .showcase__panel--rings .showcase__frame,
  .showcase__panel--necklaces .showcase__frame,
  .showcase__panel--bracelets .showcase__frame {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    width: min(78vw, 620px);
    aspect-ratio: 4 / 5;
  }

  .showcase__panel--rings .showcase__caption,
  .showcase__panel--necklaces .showcase__caption,
  .showcase__panel--bracelets .showcase__caption {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    margin-top: clamp(20px, 3vh, 32px);
    text-align: center;
    max-width: 40ch;
  }

  .showcase__panel--bracelets .showcase__image-wrap::after {
    background: none;
  }
}

/* --------------------------------------------------------------------------
   21. CHAPTER 05 — MOBILE / FLOW FALLBACK
   No pin on mobile — "do not use long unstable pinning; prioritize
   stable touch scrolling." A dedicated vertical editorial sequence:
   one piece per block, normal document flow. The reduced-motion block
   that follows shares this same structural approach (relative, stacked
   panels) for any viewport width.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .scene--showcase {
    height: auto;
    padding-block: clamp(64px, 9vh, 100px) clamp(80px, 10vh, 120px);
  }

  .showcase-stage {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .showcase__intro {
    position: relative;
    inset: auto;
    padding-block: 0 clamp(40px, 6vh, 64px);
  }

  .showcase__panel {
    position: relative;
    inset: auto;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(40px, 6vh, 64px);
  }

  .showcase__panel--rings .showcase__frame,
  .showcase__panel--necklaces .showcase__frame,
  .showcase__panel--bracelets .showcase__frame {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .showcase__panel--rings .showcase__caption,
  .showcase__panel--necklaces .showcase__caption,
  .showcase__panel--bracelets .showcase__caption {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    margin-top: clamp(24px, 5vh, 40px);
    max-width: none;
    text-align: left;
  }

  .showcase__panel--bracelets .showcase__image-wrap::after {
    background: none;
  }

  .showcase__progress {
    display: none;
  }

  .showcase__action {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    display: inline-block;
    margin-top: clamp(32px, 6vh, 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene--showcase {
    height: auto;
    padding-block: clamp(64px, 9vh, 100px) clamp(80px, 10vh, 120px);
  }

  .showcase-stage {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .showcase__intro {
    position: relative;
    inset: auto;
    padding-block: 0 clamp(40px, 6vh, 64px);
  }

  .showcase__panel {
    position: relative;
    inset: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(40px, 6vh, 64px);
  }

  .showcase__panel--rings .showcase__frame,
  .showcase__panel--necklaces .showcase__frame,
  .showcase__panel--bracelets .showcase__frame {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    width: min(100%, 720px);
    aspect-ratio: 4 / 5;
    margin-inline: auto;
  }

  .showcase__panel--rings .showcase__caption,
  .showcase__panel--necklaces .showcase__caption,
  .showcase__panel--bracelets .showcase__caption {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    margin-top: clamp(24px, 4vh, 36px);
    max-width: 44ch;
    margin-inline: auto;
    text-align: center;
  }

  .showcase__panel--bracelets .showcase__image-wrap::after {
    background: none;
  }

  .showcase__progress {
    display: none;
  }

  .showcase__action {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    display: block;
    width: fit-content;
    margin: clamp(32px, 6vh, 56px) auto 0;
  }
}

/* ==========================================================================
   CHAPTERS 01-05 ARE FROZEN — nothing above this line was touched to build
   Chapter 06 or the footer. Everything below is new, additive, and scoped
   to its own .visit__ / .site-footer__ namespaces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   22. CHAPTER 06 — VISIT THE HOUSE
   Not a contact form: an asymmetric editorial close, flowing normally
   (no pin — SCROLL-SYSTEM.md's flow-chapter pattern). The image is
   sized by width and clipped to a fixed, moderate aspect ratio so a
   future real store photograph can drop in without any layout change.
   -------------------------------------------------------------------------- */
.scene--visit {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--color-obsidian);
  padding-block: clamp(80px, 10vh, 140px);
}

.visit__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(48px, 6vw, 120px);
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visit__text {
  max-width: min(54vw, 820px);
}

.visit__label {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: rgba(198, 164, 71, 0.8);
}

/* Upper editorial composition — the headline and a short three-part
   editorial column sit side by side, sharing the text territory rather
   than stacking. The column fills the space the headline's own width
   leaves quiet, so the upper half of the chapter reads as one balanced
   block instead of a headline followed by empty air. */
.visit__upper {
  margin-top: clamp(24px, 2.8vw, 40px);
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3.4vw, 52px);
}

.visit__headline {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.2vw, 74px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--color-ivory);
}

.visit__editorial {
  flex: 1 1 240px;
  max-width: 30ch;
  padding-top: clamp(6px, 0.8vw, 12px);
}

.visit__editorial-group {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.75;
  color: rgba(242, 238, 229, 0.7);
}

.visit__editorial-mark {
  display: block;
  width: 5px;
  height: 5px;
  margin-block: clamp(22px, 2.6vw, 32px);
  background: var(--color-gold-muted);
  transform: rotate(45deg);
  opacity: 0.85;
}

/* Information row — four columns on one line, separated by thin gold
   rules rather than cards or gaps alone. No icons, no boxes: typography
   and the vertical hairlines are the only structure. Margin is generous
   on purpose: it's the breathing room that keeps the row's bottom edge
   sitting near the image's bottom edge rather than floating mid-frame. */
.visit__info {
  margin-top: clamp(80px, 9.4vw, 185px);
  display: flex;
  align-items: stretch;
}

.visit__info-col {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: clamp(14px, 1.6vw, 24px);
}

.visit__info-col:first-child {
  padding-left: 0;
}

.visit__info-col + .visit__info-col {
  border-left: 1px solid rgba(198, 164, 71, 0.25);
}

.visit__info-label {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(10px, 0.78vw, 11.5px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(198, 164, 71, 0.75);
}

.visit__info-detail {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-family: var(--font-body);
  font-size: clamp(12px, 0.86vw, 13.5px);
  line-height: 1.55;
  color: rgba(242, 238, 229, 0.85);
}

.visit__info-note {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-family: var(--font-body);
  font-size: clamp(10.5px, 0.76vw, 11.5px);
  line-height: 1.45;
  color: rgba(170, 167, 160, 0.75);
}

/* Underline appears only on hover/focus — never at rest, never a pill
   or button. A background-size trick rather than border/text-decoration
   so the animation itself stays a quiet, precise line. */
.visit__info-detail a,
.site-footer__nav-link {
  color: var(--color-ivory);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease-out-soft);
}

.visit__info-detail a:hover,
.visit__info-detail a:focus-visible,
.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
  background-size: 100% 1px;
}

.visit__media {
  flex: 0 0 auto;
  width: clamp(340px, 42vw, 760px);
}

.visit__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.visit__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: sepia(0.1) saturate(0.9) contrast(1.08) brightness(0.95);
}

/* --------------------------------------------------------------------------
   23. CHAPTER 06 — RESPONSIVE
   Tablet: image above, typography below (not a scaled desktop split).
   The upper editorial pair stacks and the info row becomes a 2x2 grid.
   Mobile stacks the four info groups vertically with generous spacing.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .visit__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(32px, 5vh, 56px);
  }

  .visit__media {
    order: -1;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }

  .visit__text {
    max-width: 60ch;
  }

  .visit__upper {
    flex-direction: column;
    gap: clamp(20px, 2.6vw, 28px);
  }

  .visit__editorial {
    max-width: 44ch;
    padding-top: 0;
  }

  .visit__info {
    flex-wrap: wrap;
  }

  .visit__info-col {
    flex: 1 1 50%;
    margin-top: clamp(20px, 2.6vw, 28px);
  }

  .visit__info-col:nth-child(-n + 2) {
    margin-top: 0;
  }

  .visit__info-col:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
}

@media (max-width: 767px) {
  .scene--visit {
    padding-block: clamp(64px, 9vh, 96px);
  }

  .visit__headline {
    font-size: clamp(32px, 9vw, 46px);
  }

  .visit__editorial {
    max-width: none;
  }

  .visit__info {
    flex-direction: column;
  }

  .visit__info-col {
    flex: 1 1 auto;
    padding-left: 0;
    border-left: none;
    margin-top: clamp(24px, 6vw, 32px);
  }

  .visit__info-col:first-child {
    margin-top: 0;
  }

  .visit__info-col + .visit__info-col {
    border-left: none;
    border-top: 1px solid rgba(198, 164, 71, 0.25);
    padding-top: clamp(20px, 5vw, 26px);
  }
}

/* --------------------------------------------------------------------------
   24. FOOTER — LUXURY EDITORIAL ENDING
   Not a traditional multi-column footer: one centered column, very
   generous spacing, text links only, no icons.
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--color-obsidian);
  padding-block: clamp(100px, 14vh, 180px) clamp(48px, 6vh, 80px);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(56px, 8vh, 96px);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.site-footer__tagline {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-family: var(--font-body);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(242, 238, 229, 0.6);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
}

.site-footer__nav-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(242, 238, 229, 0.4);
}

@media (max-width: 767px) {
  .site-footer {
    padding-block: clamp(72px, 11vh, 120px) clamp(40px, 6vh, 64px);
  }

  .site-footer__inner {
    gap: clamp(40px, 7vh, 64px);
  }

  .site-footer__wordmark {
    font-size: clamp(30px, 8vw, 42px);
  }

  .site-footer__nav {
    gap: clamp(16px, 4vw, 28px);
  }
}