/* ==========================================================================
   The Nostalgic Traveller — brand site
   Mid-century, calm, cream paper. Tokens first.
   ========================================================================== */

/* self-hosted variable fonts (GDPR-clean, no Google roundtrip) */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jost.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/eb-garamond.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-italic.woff2") format("woff2");
}

:root {
  --paper: #f4eddd;
  --paper-deep: #e9dfc8;
  --ink: #2b3440;
  --ink-soft: #4d5868;
  --terracotta: #b04a26;
  --terracotta-deep: #943c1d;
  --teal: #2e6e73;
  --hairline: rgba(43, 52, 64, 0.18);

  --font-display: "Jost", "Futura", sans-serif;
  --font-body: "EB Garamond", Georgia, serif;
  --header-pull: calc(44px + 1.8rem + 1px);

  --track: 0.16em;
  --maxw: 72rem;

  /* shape system (one scale, applied everywhere — fixes mixed radii) */
  --radius-pill: 999px;   /* interactive: buttons, nav chips, toggle */
  --radius-card: 16px;    /* cards, tiles, media frames */
  --radius-input: 10px;   /* inputs, small fields */

  /* motion (emil: strong curves, not plain ease) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* depth (tinted to ink, never pure black) */
  --shadow-card: 0 1px 2px rgba(43, 52, 64, 0.06), 0 10px 28px -14px rgba(43, 52, 64, 0.30);
  --shadow-lift: 0 18px 40px -16px rgba(43, 52, 64, 0.40);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.1875rem; /* EB Garamond runs small; compensate */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.6rem;
  z-index: 300;
}

.skip-link:focus {
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
}

/* subtle lithographic paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track);
  line-height: 1.18;
  margin: 0 0 1rem;
}

h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }

a { color: var(--terracotta); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============ header ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.35s ease, border-color 0.35s ease;
}

.site-header.over-hero {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.site-header.over-hero .wordmark {
  opacity: 0;
  pointer-events: none;
}

/* keep the toggle readable over busy scene corners */
.site-header.over-hero .lang-toggle {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
}

.site-header.over-hero .lang-toggle:hover {
  background: var(--ink);
}

/* nav links need the same paper backing: future dioramas may be dark */
.site-header.over-hero .site-nav a {
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  border-bottom-color: transparent;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity 0.3s ease;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}

/* the 1950s camera-woman silhouette, recolourable via mask */
.wordmark .mark {
  height: 2rem;
  width: 0.82rem;            /* figure aspect ~ 337:833 */
  flex: none;
  background-color: var(--ink);
  -webkit-mask: url("../img/brand/figure-mark.png") center / contain no-repeat;
  mask: url("../img/brand/figure-mark.png") center / contain no-repeat;
}

.lang-toggle { border-radius: var(--radius-pill); }

.site-nav {
  display: flex;
  gap: 1.4rem;
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.site-nav a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.lang-toggle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 56px;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-toggle:hover {
  background: var(--ink);
  color: var(--paper);
}

.lang-toggle b {
  font-weight: 600;
  color: var(--terracotta);
}

.lang-toggle:hover b {
  color: #f2b596;
}

/* ============ hero: diorama stage ============ */

.dive {
  /* static by default (no JS = composed scene, no dead scroll); JS adds .dive--on */
  margin-top: calc(-1 * var(--header-pull)); /* stage runs underneath the sticky header */
}

.dive--on {
  height: 190svh;
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--header-pull); /* keep centered content clear of the overlaid header */
}

.diorama,
.diorama > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* no-JS fallback layers: plain cover images */
.diorama > img {
  object-fit: cover;
  will-change: transform;
  transform-origin: 50% 62%;
  user-select: none;
  -webkit-user-drag: none;
}

/* JS-composed stage: a fixed-ratio canvas, layers placed in canvas % */
.diorama-canvas {
  position: absolute;
}

.dlayer {
  position: absolute;
  will-change: transform;
  transform-origin: 50% 62%;
}

.dlayer img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.dlayer--clouds img {
  animation: cloud-drift 44s ease-in-out infinite alternate;
}

@keyframes cloud-drift {
  from { transform: translateX(-1.8%); }
  to { transform: translateX(1.8%); }
}

/* ---- lantern: breathing warm glow, hover flickers, click toggles ---- */

.dlayer--lantern {
  cursor: pointer;
  pointer-events: auto;
}

.lantern-glow {
  position: absolute;
  left: 50%;
  top: 11%;
  width: 420%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 216, 142, 0.6) 0%,
    rgba(255, 192, 104, 0.28) 34%,
    rgba(255, 182, 92, 0) 68%
  );
  mix-blend-mode: screen;
  animation: lantern-breathe 4.6s ease-in-out infinite;
  transition: opacity 0.45s ease;
}

.dlayer--lantern:hover .lantern-glow {
  animation-duration: 1.1s;
}

.dlayer--lantern.is-off .lantern-glow {
  animation: none;
  opacity: 0;
}

/* clickable lantern hotspot inside a wing layer */
.lantern-spot {
  position: absolute;
  width: 32%;
  height: 22%;
  cursor: pointer;
  pointer-events: auto;
}

@keyframes lantern-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ---- brand wordmark: staggered letterpress reveal ---- */

.hero-brand .word {
  display: block;
  white-space: nowrap;
}

.hero-brand .ltr {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(6px);
  animation: ltr-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 42ms + 0.2s);
}

@keyframes ltr-in {
  to { opacity: 1; transform: none; filter: none; }
}

.hero-content .eyebrow,
.hero-content .hero-sub,
.hero-content .hero-actions {
  opacity: 0;
  animation: soft-in 0.8s ease forwards;
}

.hero-content .eyebrow { animation-delay: 0.05s; }
.hero-content .hero-sub { animation-delay: 1.05s; }
.hero-content .hero-actions { animation-delay: 1.25s; }

@keyframes soft-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 68% 54% at 50% 44%,
    rgba(244, 237, 221, 0.92) 0%,
    rgba(244, 237, 221, 0.55) 50%,
    rgba(244, 237, 221, 0) 76%
  );
}

@media (max-width: 700px) {
  .hero-scrim {
    background: radial-gradient(
      ellipse 150% 54% at 50% 44%,
      rgba(244, 237, 221, 0.92) 0%,
      rgba(244, 237, 221, 0.55) 55%,
      rgba(244, 237, 221, 0) 80%
    );
  }
}

.hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 0 1.25rem;
  will-change: transform, opacity;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--terracotta);
  margin-bottom: 1.4rem;
}

.hero-brand {
  font-size: clamp(2.1rem, 1rem + 5.2vw, 4.4rem);
  letter-spacing: 0.2em;
  padding-left: 0.2em; /* optically recenters tracked, centered lines */
  margin: 0 0 1.2rem;
}

/* "THE NOSTALGIC" must survive 320-480px: tracking shrinks before type does */
@media (max-width: 480px) {
  .hero-brand {
    font-size: clamp(1.9rem, 0.9rem + 5.2vw, 4.4rem);
    letter-spacing: 0.12em;
    padding-left: 0.12em;
  }
}

.hero-sub {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink);
  max-width: 52ch;
  margin: 0 auto 2.4rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  color: var(--paper);
  background: rgba(31, 43, 53, 0.38);
  border-radius: 50%;
  text-decoration: none;
  opacity: 0.92;
}

.scroll-hint svg {
  width: 1.15rem;
  animation: hint-bob 2.2s ease-in-out infinite;
}

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============ buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
  /* strong ease-out (emil): snappier than plain ease */
  transition: background 0.2s ease, color 0.2s ease,
              transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

/* tactile press: compresses like a stamped ticket (covers both variants) */
.btn:active {
  transform: translateY(0) scale(0.97);
}

.btn-primary {
  background: var(--terracotta);
  color: #fdf8ec;
  /* stacked bottom edge + tinted (not black) shadow = physical ticket depth */
  box-shadow: 0 2px 0 var(--terracotta-deep), 0 7px 18px -7px rgba(122, 60, 38, 0.5);
}

.btn-primary:hover {
  background: var(--terracotta-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--terracotta-deep), 0 14px 26px -8px rgba(122, 60, 38, 0.55);
}

.btn-primary:active {
  box-shadow: 0 1px 0 var(--terracotta-deep), 0 4px 10px -7px rgba(122, 60, 38, 0.5);
}

.btn-ghost {
  color: var(--ink);
  border: 1.5px solid var(--ink);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px rgba(43, 52, 64, 0.45);
}

/* ============ sections ============ */

.section {
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem);
  max-width: var(--maxw);
  margin: 0 auto;
}

.section-tinted {
  max-width: none;
  background: var(--paper-deep);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.section-tinted > * {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 3rem;
}

.section-head p { color: var(--ink-soft); }

.narrow {
  max-width: 46rem;
  margin: 0 auto;
}

/* ============ gallery: a route, not a grid ============ */

.series-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--terracotta);
  margin: 1.1rem 0 0;
}

/* ── collection bands: each collection is its own staged zone ─────────────── */
.coll-intro { padding-bottom: clamp(1rem, 3vw, 2rem); }

.coll-bands {
  display: flow-root;
  counter-reset: collection;
}

.coll-band {
  counter-increment: collection;
  /* horizontal min lifted 0.6rem→1.25rem so band text/panel keep the same ~20px
     side margin as the accent line + collection intro on mobile (was hugging the
     edge at ~10px — "text klebt links" with the fan WIP) */
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 1.5rem);
  position: relative;
  /* outward push: title/panel go left, number/story go right → clears the
     middle so an opened card + the swung-aside cards never cover the text.
     Coupled to the real side gutter ((100vw − maxw)/2) so it only spreads into
     empty margin and never clips the title off the band edge. */
  --band-spread: clamp(0px, calc((100vw - var(--maxw, 72rem)) / 2 - 0.5rem), 2.5rem);
}

/* terracotta accent line — signals each new collection like a chapter rule */
.coll-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(1.25rem, 4vw, 2.5rem);
  right: clamp(1.25rem, 4vw, 2.5rem);
  height: 2px;
  background: linear-gradient(90deg, var(--terracotta) 0%, color-mix(in srgb, var(--terracotta) 0%, transparent) 100%);
  opacity: 0.55;
}

/* per-collection band colours */
[data-coll="whitePeaks"]    { --band-bg: #dce4ec; }
[data-coll="india"]         { --band-bg: #e8d4b0; }
[data-coll="rhine"]         { --band-bg: #d0ddd4; }
[data-coll="alpine"]        { --band-bg: #d8dfe8; }
[data-coll="classics"]      { --band-bg: #e8e2cc; }
[data-coll="quiet"]         { --band-bg: #d4dcd4; }
[data-coll="coast"]         { --band-bg: #c8dede; }
[data-coll="southamerica"]  { --band-bg: #ddd0c4; }
[data-coll="africa"]        { --band-bg: #dfd8c4; }

.coll-band {
  background: var(--band-bg, var(--paper-deep));
  /* NO overflow:hidden here (bug fix, owner-verified 2026-07-07): .band-bg below
     already clips its own scherenschnitt SVGs to itself (inset:0 + its own
     overflow:hidden), so this was redundant for the background — but it also
     clipped the hover-enlarged fan card, which is designed to bleed upward over
     the masthead (see .fan-group[data-active] .fan-card[data-hovered]'s
     transform-origin: 50% 40% below). That clip sliced the top off the enlarged
     poster on hover instead of letting it rise over the headline ("Karten oben
     verdeckt von den Balken"). html/body already has overflow-x: clip as the
     page-level safety net against any horizontal bleed. */
}

/* ── tone-on-tone scherenschnitt band background ───────────────────────────
   A paper-cut silhouette scene, drawn in a deeper nuance of the band's own
   hue, sitting far behind the card-fan. Abstract, barely-there, with a slow
   seichte drift. Honours prefers-reduced-motion (freezes). 0 credits. */
.band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* deeper nuance of the same band colour = true tone-on-tone */
  color: color-mix(in srgb, var(--band-bg) 62%, var(--ink));
}
.band-bg svg { position: absolute; display: block; }
.band-bg svg, .band-bg .sc-layer { fill: currentColor; }

.coll-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;   /* anchor for .band-panel (JS positions it per active fan-group) */
  z-index: 1;           /* card-fan + text sit above the scherenschnitt bg */
}

/* .coll-inner's own z-index:1 above is a STACKING CONTEXT (position + z-index)
   — it caps every descendant's z-index (incl. .fan-card[data-hovered]'s 150)
   at that single level:1 when compared against elements OUTSIDE .coll-inner,
   like the sticky .site-header (z-index:100). No descendant z-index, however
   high, can escape that trap. So while a card is actively hovered/enlarged
   (.fan-group[data-active]), lift .coll-inner itself above the header —
   scoped to just that moment so normal band content never outranks the
   header (owner: enlarged card must never be covered by the header "Balken",
   2026-07-07). */
.coll-inner:has(.fan-group[data-active]) {
  z-index: 200;
}

/* Rhine — flowing water: 3 stacked paper-cut wave svgs (each 200% wide),
   drifting left at different speeds = parallax current. The viewBox period
   (400) divides the half-width (800), so translateX(-50%) loops seamlessly. */
.band-bg--rhine .sc-wave {
  left: 0; bottom: 0; width: 200%;
  height: clamp(130px, 24vw, 250px);
}
.band-bg--rhine .sc-wave--1 { opacity: 0.06; animation: sc-drift 36s linear infinite; }
.band-bg--rhine .sc-wave--2 { opacity: 0.09; animation: sc-drift 25s linear infinite; }
.band-bg--rhine .sc-wave--3 { opacity: 0.12; animation: sc-drift 18s linear infinite; }

@keyframes sc-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── shared scherenschnitt scene primitives (used by the other 8 bands) ──────
   Drift svgs are 200% wide with their motif duplicated at +800 user units, so
   translateX(-50%) loops seamlessly (same trick as the Rhine waves). Sway/spin
   motifs stay put and animate an inner <g> around its own base. All motion is
   slow and shallow — a suggestion, never a distraction. */
.band-bg .sc-scene { left: 0; bottom: 0; width: 100%; height: clamp(150px, 30vw, 280px); }
.band-bg .sc-roam  { left: 0; bottom: 0; width: 200%; height: clamp(150px, 30vw, 280px); }
.band-bg .sc-roam.sc-anim { animation: sc-drift var(--sc-dur, 40s) linear infinite; }
.band-bg .sc-static { /* no motion layer (ridges, roads) */ }
.band-bg .sc-sway   { transform-box: fill-box; transform-origin: bottom center;
                      animation: sc-sway var(--sc-dur, 7s) ease-in-out infinite; }
.band-bg .sc-spin   { transform-box: fill-box; transform-origin: center;
                      animation: sc-spin var(--sc-dur, 26s) linear infinite; }
.band-bg .sc-flutter{ transform-box: fill-box; transform-origin: top center;
                      animation: sc-flutter var(--sc-dur, 5s) ease-in-out infinite; }

@keyframes sc-sway    { 0%,100% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } }
@keyframes sc-spin    { to { transform: rotate(360deg); } }
@keyframes sc-flutter { 0%,100% { transform: skewX(-3.5deg); } 50% { transform: skewX(3.5deg); } }

/* extra motion primitives for the reworked scenes */
.band-bg .sc-roam-slow { left: 0; bottom: 0; width: 100%; height: clamp(150px, 30vw, 280px); }
.band-bg .sc-bob { transform-box: fill-box; transform-origin: center;
                   animation: sc-bob 2s ease-in-out infinite; }
.band-bg .sc-snow { left: 0; top: 0; width: 100%; height: 100%;
                    animation: sc-snowfall var(--sc-dur, 16s) linear infinite; }
@keyframes sc-bob      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes sc-trudge   { 0%,100% { transform: translate(0,0); } 50% { transform: translate(11px,-5px); } }
@keyframes sc-swayBig  { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes sc-offset   { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes sc-melt     { 0% { transform: translateY(-6px) scaleY(0.5); opacity: 0; }
                         25% { opacity: 1; } 100% { transform: translateY(34px) scaleY(1.15); opacity: 0; } }
@keyframes sc-slide    { 0%,100% { transform: translateX(calc(-1 * var(--amp, 12px))); }
                         50% { transform: translateX(var(--amp, 12px)); } }

/* per-band opacities (kept in the 6–14% tone-on-tone range) + drift speeds */
.band-bg--rhine   .sc-castle { opacity: 0.085; --sc-dur: 90s; }   /* a castle drifts by now and then */

/* India — lush jungle, stronger sway */
.band-bg--india   .sc-sway   { animation-name: sc-swayBig; }
.band-bg--india   .sc-leaf--1 { opacity: 0.12; --sc-dur: 6s; }
.band-bg--india   .sc-leaf--2 { opacity: 0.095; --sc-dur: 5s; animation-delay: -1.5s; }
.band-bg--india   .sc-leaf--3 { opacity: 0.14; --sc-dur: 7s; animation-delay: -3s; }

.band-bg--alpine  .sc-ridge { opacity: 0.10; }
.band-bg--alpine  .sc-roam-slow { opacity: 0.14; animation: sc-trudge 9s ease-in-out infinite; }

/* Classics — a car drives along the serpentine road (follows the path) */
.band-bg--classics .sc-road    { opacity: 0.10; }
.band-bg--classics .sc-serpcar { opacity: 0.16; offset-rotate: auto;
                                 animation: sc-offset 20s linear infinite; }

/* Quiet — windmill + bigger tulips sliding left-right independently */
.band-bg--quiet   .sc-field  { opacity: 0.08; }
.band-bg--quiet   .sc-tulip  { transform-box: fill-box; transform-origin: bottom center;
                               animation: sc-slide 6s ease-in-out infinite; opacity: 0.12; }
.band-bg--quiet   .sc-mill   { opacity: 0.12; }
.band-bg--quiet   .sc-sails  { opacity: 0.12; --sc-dur: 26s; }

/* Coast — lighthouse on rocks (no beam); boat + shark fin in the water to its right */
.band-bg--coast   .sc-house { opacity: 0.13; }
.band-bg--coast   .sc-water { opacity: 0.07; }
/* boat + fin live only in the open water to the RIGHT of the lighthouse,
   clipped so they never sail across the tower (which reads as nonsense) */
.band-bg--coast   .sc-seazone { position: absolute; left: 23%; right: 0; bottom: 0;
                                height: clamp(150px, 30vw, 280px); overflow: hidden;
                                pointer-events: none; }
.band-bg--coast   .sc-seazone .sc-roam { left: 0; bottom: 0; width: 200%; height: 100%; }
.band-bg--coast   .sc-boat  { opacity: 0.12; --sc-dur: 46s; }
.band-bg--coast   .sc-fin   { opacity: 0.15; --sc-dur: 22s; }

/* White Peaks — overlapping varied peaks, snow caps, melt + a plane flying over */
.band-bg--whitePeaks .sc-peaks { opacity: 0.12; }
.band-bg--whitePeaks .sc-caps  { opacity: 0.85; }   /* band-bg fill = snowy white cap */
.band-bg--whitePeaks .sc-flow  { transform-box: fill-box; transform-origin: top center;
                                 animation: sc-melt 5.5s ease-in infinite; opacity: 0.8; }
/* plane flies at the vertical middle of the band, clear of the peaks below;
   aspect-true svg (meet) flown across via `left` so it is never stretched */
.band-bg--whitePeaks .sc-skywrap { position: absolute; left: 0; right: 0; top: 50%;
                                   transform: translateY(-50%); height: clamp(44px, 5.2vw, 62px);
                                   overflow: visible; pointer-events: none; }
.band-bg--whitePeaks .sc-plane { position: absolute; top: 0; height: 100%; width: auto;
                                 opacity: 0.15; animation: sc-planefly 34s linear infinite; }
@keyframes sc-planefly { from { left: 100%; } to { left: -20%; } }
/* owner silhouette recolour: body/accent inherit currentColor; windows = paper */
.band-bg--whitePeaks .sc-plane .st0 { fill: var(--band-bg); }
.band-bg--whitePeaks .sc-plane .st2 { opacity: 0.7; }

.band-bg--southamerica .sc-ridge--far { opacity: 0.07; }
.band-bg--southamerica .sc-terr { opacity: 0.12; }   /* inca terraces */
.band-bg--southamerica .sc-roam { opacity: 0.10; --sc-dur: 60s; }   /* condor */

/* Africa — acacia forest + a motorcycle with rider driving past */
.band-bg--africa  .sc-acacia { opacity: 0.13; }
.band-bg--africa  .sc-moto   { opacity: 0.15; --sc-dur: 22s; }

@media (prefers-reduced-motion: reduce) {
  .band-bg .sc-wave, .band-bg .sc-roam, .band-bg .sc-roam-slow, .band-bg .sc-sway,
  .band-bg .sc-spin, .band-bg .sc-bob, .band-bg .sc-sails, .band-bg .sc-leaf,
  .band-bg .sc-tulip, .band-bg .sc-plane, .band-bg .sc-fin, .band-bg .sc-flow,
  .band-bg .sc-serpcar {
    animation: none !important;
  }
}

.coll-masthead {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  /* widen the masthead symmetrically into both side gutters: the title/subtitle
     (left-aligned) move outward left, the ghost number (right-anchored) moves
     outward right — WITHOUT clipping, because the overflow box moves out too */
  margin-inline: calc(-1 * var(--band-spread));
  position: relative;
  /* clip only horizontal so ghost number bleeds right; vertical open so Umlauts show */
  overflow: hidden;
  padding-top: 0.2em;
}

/* large ghost collection number — bleeds right */
.coll-masthead::after {
  content: counter(collection, decimal-leading-zero);
  position: absolute;
  top: -0.1em;
  right: 0;   /* sits at the masthead's right edge, which is itself pushed outward */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 10.5vw, 7.4rem);   /* smaller again — more legible, less dominant */
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.055;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.coll-headline {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* collection name */
.coll-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 2.2rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;  /* extra room above for Ä Ö Ü diacritics */
}

/* motif count hidden — number of cards is self-evident from the fan */
.coll-count { display: none; }

.coll-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  margin: 0.7rem 0 0;
  letter-spacing: 0.01em;
  max-width: 40ch;
  position: relative;
  z-index: 1;
}

/* band-story: a faint, dreamy caption set into the lower-right of the band,
   behind the fan — invites the eye to wander without competing with posters */
.band-story {
  position: absolute;
  right: calc(-1 * var(--band-spread));   /* story outward to the right */
  bottom: clamp(0.5rem, 2vw, 1.5rem);
  max-width: 32ch;
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  text-align: right;
  color: var(--ink-soft);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;   /* behind the cards (z 5+), above the ghost number (z 0 paint order) */
}

@media (max-width: 700px) {
  /* on phones the fan fills the width — no outward spread, drop the story below */
  .coll-band { --band-spread: 0px; }
  .band-story {
    position: static;
    max-width: none;
    margin: clamp(1.2rem, 5vw, 2rem) auto 0;
    text-align: center;
    opacity: 0.6;
  }
}

/* ── card fan: compact overlapping stack, hover reveals full image ─────────── */

:root {
  --fan-card-w:  clamp(155px, 14.5vw, 200px);
  --fan-offset:  clamp(82px,  8.5vw,  108px);
  --fan-group-h: clamp(210px, 22vw,   272px);
  --fan-ease:    cubic-bezier(0.23, 1, 0.32, 1);
}

.fan-group {
  position: relative;
  height: var(--fan-group-h);
  /* JS sets --fan-start so the whole stack is centred; fallback = left-edge */
  margin-bottom: clamp(4rem, 9vw, 7rem);
  overflow: visible;
}

/* opt-in modifier for a fan-group whose card count doesn't reliably fit even
   the narrowest phones (e.g. a 7-card row) — plain overflow:visible clipped
   the excess with no way to reach it. Scoped to this class only, so bands
   using the default 5-and-under stack (the tested, proven layout) are
   untouched.
   CSS overflow spec quirk (verified 2026-07-09): when overflow-x and
   overflow-y differ and one of them is "visible", the visible one computes
   to "auto" too — so overflow-y here is NOT actually visible, it silently
   clips. The hover/tap "enlarge" pop-out uses transform-origin: 50% 40%
   (see .fan-group[data-active] .fan-card[data-hovered] below), which grows
   the card BOTH up (~40% of the size delta) and down (~60%) — not purely
   downward as originally assumed here. So this box needs real headroom on
   BOTH sides. A `padding-top` on the group does NOT create that headroom:
   .fan-card is position:absolute with top:0, and absolutely positioned
   children are placed relative to the PADDING EDGE — which sits at the same
   y-position as the box's own top regardless of padding (padding only
   reserves space for in-flow content). Confirmed by real-mouse test: card
   still clipped at the group's exact top after adding padding-top. The
   headroom has to come from moving the CARDS down instead — see
   `.fan-group--scroll .fan-card` below. */
.fan-group--scroll {
  height: calc(var(--fan-group-h) + clamp(4rem, 10vw, 6rem) + clamp(4rem, 12vw, 7rem));
  margin-bottom: clamp(2rem, 6vw, 4rem);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* the actual headroom fix: shift the cards' own top-anchor down within the
   (now taller) box, so their resting AND hover-enlarged position both stay
   clear of the box's top edge — measured ~57px upward growth on desktop,
   clamp below is a generous margin over that. */
.fan-group--scroll .fan-card {
  top: clamp(4rem, 10vw, 6rem);
}

.fan-card {
  position: absolute;
  top: 0;
  left: calc(var(--fan-start, 0px) + var(--i) * var(--fan-offset));
  width: var(--fan-card-w);
  cursor: pointer;
  transform-origin: top center;
  transform: rotate(calc((var(--i) - var(--mid)) * 1.6deg));
  transition: transform 0.42s var(--fan-ease), box-shadow 0.42s ease;
  z-index: calc(5 + var(--i));
}

.fan-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 1px;
  box-shadow: 0 2px 4px rgba(43,52,64,.15), 0 6px 18px rgba(43,52,64,.18);
  transition: box-shadow 0.38s ease;
}

/* fan-info: hidden in DOM — used only as data template by JS, not rendered */
.fan-info { display: none; }

/* fan-route: the dotted travel line threading the band's posters (JS-built).
   Sits behind the cards (z 1 < card z 5+), above the opaque band background;
   terracotta like an old map route, kept faint so the posters stay the focus. */
.fan-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;        /* cards fan wider than the box — let the line follow */
  pointer-events: none;
  z-index: 1;
  color: var(--terracotta);
  opacity: 0.42;
}

/* band-panel: info overlay, positioned to the right of the fan-group that's
   currently active (owner 2026-07-09: was one shared bottom-left-of-coll-inner
   position for every fan-group in a band — broke as soon as a band had more
   than one group, e.g. Rhine's 3 sub-groups, since all their panels rendered
   in the same spot and only the lowest one read as visible). `left`/`top` are
   set inline by JS per activation (see main.js `activate()`), relative to
   .coll-inner's own box — `top: 0; left: 0` here are just the reset default
   before JS positions it. */
.band-panel {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(244, 237, 221, 0.94);
  border-radius: 3px;
  padding: 0.55rem 0.8rem 0.6rem;
  text-align: left;
  box-shadow: 0 2px 6px rgba(43,52,64,.14), 0 6px 20px rgba(43,52,64,.20);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;
  transform: translateY(-50%) translateX(0.4rem) scale(0.96);
  transition: opacity 0.26s ease, transform 0.26s var(--fan-ease);
  z-index: 20;
}
.band-panel.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0.9rem) scale(1);
}
/* narrow viewports: right-of-group would run off the edge of the screen, so
   JS anchors below the group instead (bottom-center of its box) and toggles
   this modifier; also drop the nowrap + cap the width so a long place name
   doesn't itself overflow a phone screen. */
.band-panel--below {
  text-align: center;
  white-space: normal;
  max-width: min(85vw, 220px);
  transform-origin: center top;
  transform: translateX(-50%) translateY(0.4rem) scale(0.96);
}
.band-panel--below.is-visible {
  transform: translateX(-50%) translateY(0.9rem) scale(1);
}
.band-panel strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink);
}
.band-panel span {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.08rem;
}
.band-panel em {
  display: block;
  font-style: italic;
  font-family: var(--font-body);
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 0.3rem;
  white-space: normal;
  max-width: 20ch;
}

/* active states set by JS */
.fan-group[data-active] .fan-card[data-dir="left"] {
  transform: translateX(clamp(-110px,-12vw,-70px)) rotate(-2.5deg);
}
.fan-group[data-active] .fan-card[data-dir="right"] {
  transform: translateX(clamp(60px,7vw,96px)) rotate(2deg);
}
.fan-group[data-active] .fan-card[data-hovered] {
  transform-origin: 50% 40%;
  /* 150, not 99: must beat .site-header's sticky z-index:100 — Rhine is the
     first band, so the enlarged card grows toward the header right after the
     hero scroll and was rendering BEHIND it (owner: "Karten... nicht von den
     Balken verdeckt", 2026-07-07). */
  z-index: 150 !important;
}
.fan-group[data-active] .fan-card[data-hovered] img {
  box-shadow: 0 8px 28px rgba(43,52,64,.28), 0 2px 4px rgba(43,52,64,.18);
}

@media (prefers-reduced-motion: reduce) {
  .fan-card, .band-panel { transition: none; }
}

.gallery-status {
  text-align: center;
  margin: 2.25rem 0 0;
  color: var(--ink-soft);
}

.gallery-status a {
  white-space: nowrap;
}

.gallery-note {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  margin: 1rem 0 0;
}

/* ============ curation strip (story) ============ */

.curation-strip {
  margin-top: 2.6rem;
  text-align: center;
}

.strip-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.4rem, 1.6vw, 1.1rem);
}

.draft {
  display: block;
  width: clamp(48px, 10.5vw, 116px);
  background: #fbf7ed;
  padding: 0.3rem 0.3rem 0.9rem;
  box-shadow: 0 6px 16px rgba(43, 52, 64, 0.18);
  transform: rotate(-2.4deg);
  position: relative;
}

.draft:nth-child(2n) { transform: rotate(1.8deg); }

.draft img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.draft.is-out {
  filter: grayscale(1) contrast(0.85);
  opacity: 0.55;
}

/* red-pencil cross over the rejects */
.draft.is-out::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, transparent 47.5%, rgba(176, 74, 38, 0.85) 48.5%, rgba(176, 74, 38, 0.85) 51.5%, transparent 52.5%),
    linear-gradient(to bottom right, transparent 47.5%, rgba(176, 74, 38, 0.85) 48.5%, rgba(176, 74, 38, 0.85) 51.5%, transparent 52.5%);
}

.draft.keeper {
  transform: rotate(0deg) translateY(-10px) scale(1.06);
  box-shadow: 0 14px 28px rgba(43, 52, 64, 0.26);
  z-index: 1;
}

.draft.keeper::after {
  content: "KEEPER";
  position: absolute;
  left: 50%;
  bottom: -0.7rem;
  transform: translateX(-50%) rotate(-3deg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  color: #fdf8ec;
  background: var(--terracotta);
  padding: 0.18rem 0.45rem;
  border-radius: 2px;
  white-space: nowrap;
}

html[data-lang="de"] .draft.keeper::after { content: "BLEIBT"; }

.curation-note {
  font-style: italic;
  color: var(--ink-soft);
  margin: 1.7rem 0 0;
}

/* drafts pin up one after another once the strip is in view */
.curation-strip.reveal .draft {
  opacity: 0;
  transition: opacity 0.55s ease;
}

.curation-strip.reveal.visible .draft { opacity: 1; }
.curation-strip.reveal.visible .draft.is-out { opacity: 0.55; }
.curation-strip.reveal.visible .draft:nth-child(2) { transition-delay: 0.12s; }
.curation-strip.reveal.visible .draft:nth-child(3) { transition-delay: 0.24s; }
.curation-strip.reveal.visible .draft:nth-child(4) { transition-delay: 0.36s; }
.curation-strip.reveal.visible .draft:nth-child(5) { transition-delay: 0.48s; }

/* ============ poster lightbox ============ */

.poster-dialog {
  border: none;
  border-radius: 4px;
  padding: clamp(0.9rem, 2.5vw, 1.5rem);
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(29, 36, 44, 0.45);
  max-width: 92vw;
  max-height: 94vh;
}

.poster-dialog::backdrop {
  background: rgba(29, 36, 44, 0.72);
}

.poster-dialog img {
  display: block;
  max-width: 100%;
  max-height: min(72vh, 120vw); /* leave room for the caption on any screen */
  width: auto;
  height: auto;
  margin: 0 auto;
}

.poster-dialog figcaption {
  margin-top: 0.8rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.poster-dialog figcaption span {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.poster-dialog .dialog-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 85%, var(--ink));
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.poster-dialog .dialog-close:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ============ luggage tags (coming soon) ============ */

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  max-width: 56rem;
  margin: 0 auto;
}

/* a real kraft luggage tag: die-cut corner, punched eyelet, rubber stamp on hover */
.card {
  position: relative;
  background: #ead9b0;
  border: 1px solid rgba(105, 84, 48, 0.25);
  border-radius: 6px;
  clip-path: polygon(2.4rem 0, 100% 0, 100% 100%, 0 100%, 0 2.4rem);
  padding: 2.4rem 2rem 1.9rem 2.4rem;
  text-align: left;
  /* clip-path swallows box-shadow; drop-shadow applies after clipping.
     rotate (not transform) so the reveal's transform reset can't flatten it */
  filter: drop-shadow(0 9px 12px rgba(43, 52, 64, 0.2));
  rotate: -1.6deg;
  transition: transform 0.25s ease, rotate 0.25s ease, filter 0.25s ease;
}

.card + .card {
  rotate: 1.2deg;
}

.card:hover {
  rotate: 0deg;
  transform: translateY(-3px);
  filter: drop-shadow(0 14px 18px rgba(43, 52, 64, 0.26));
}

/* punched eyelet near the die-cut corner */
.card::before {
  content: "";
  position: absolute;
  left: 1.45rem;
  top: 1.45rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid #b89a62;
  box-shadow: inset 0 1px 2px rgba(43, 52, 64, 0.3);
}

/* rubber stamp appears on hover */
.card::after {
  content: "SOON";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  border: 2px solid var(--terracotta);
  border-radius: 3px;
  padding: 0.3rem 0.45rem 0.28rem 0.62rem;
  transform: rotate(9deg) scale(1.3);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

html[data-lang="de"] .card::after { content: "BALD"; }

.card:hover::after {
  opacity: 0.8;
  transform: rotate(9deg) scale(1);
}

.card p { color: var(--ink-soft); margin: 0; }

.card-cta {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 2px;
}

.card-cta:hover {
  color: var(--terracotta-deep);
  border-bottom-color: var(--terracotta-deep);
}

/* ============ FAQ ============ */

#faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 0.4rem 0;
}

#faq details:first-of-type { border-top: 1px solid var(--hairline); margin-top: 2rem; }

#faq summary {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 0.9rem 2.2rem 0.9rem 0.2rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

#faq summary::-webkit-details-marker { display: none; }

#faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

#faq details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

#faq details p {
  padding: 0 0.2rem 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ============ closing scene (contact) ============ */

.closing {
  position: relative;
  background: var(--ink);
  text-align: center;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 6.5rem) clamp(1.25rem, 4vw, 2.5rem) 0;
}

.closing-inner {
  position: relative;
  z-index: 2;
  padding-bottom: calc(clamp(150px, 22vw, 280px) + 1.5rem);
}

.closing .eyebrow { color: #e0a886; }
.closing h2 { color: var(--paper); }
.closing p { color: rgba(232, 226, 210, 0.78); margin-bottom: 2rem; }

.closing .contact-copy { margin-bottom: 0; }
.closing .contact-copy .addr { color: var(--paper); }

.closing .copy-btn {
  color: #9fc6c9;
  border-color: rgba(159, 198, 201, 0.45);
}

.closing .copy-btn:hover {
  background: #9fc6c9;
  color: var(--ink);
}

.closing-sky {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(150px, 22vw, 280px);
  display: block;
  z-index: 1;
}

.closing-glow {
  mix-blend-mode: screen;
  animation: lantern-breathe 4.6s ease-in-out infinite;
}

/* plain-text fallback: webmail users get nothing from a mailto */
.contact-copy {
  margin: 1.4rem 0 0;
  font-size: 0.95rem;
}

.contact-copy .addr {
  user-select: all;
  color: var(--ink);
}

.copy-btn {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--teal);
  background: none;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  margin-left: 0.7rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.copy-btn:hover {
  background: var(--teal);
  color: var(--paper);
}

/* ============ footer ============ */

.site-footer {
  /* matches the near-ridge of the closing skyline: one continuous night scene */
  background: #151b23;
  color: #e8e2d2;
  text-align: center;
  padding: 2.4rem 1.25rem 2.5rem;
}

.footer-tagline {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  margin-bottom: 1.4rem;
}

.site-footer nav {
  display: flex;
  gap: 1.8rem;
  justify-content: center;
  margin-bottom: 1.4rem;
}

.site-footer a {
  color: #e8e2d2;
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 226, 210, 0.4);
  padding-bottom: 2px;
}

.site-footer a:hover { color: #fff; border-bottom-color: #fff; }

.footer-copy {
  font-size: 0.85rem;
  color: rgba(232, 226, 210, 0.65);
  margin: 0;
}

/* ============ legal pages ============ */

.legal-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 4vw, 2.5rem) 5rem;
}

.legal-page h1 { font-size: 1.6rem; margin-top: 2rem; }
.legal-page h2 { font-size: 1.05rem; margin-top: 2.2rem; }

.todo {
  background: #fbe9d7;
  border: 1px dashed var(--terracotta);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
}

/* ============ reveal animation ============ */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* collection masthead slides in from left — directional, editorial */
.coll-masthead.reveal { transform: translateX(-32px); }
.coll-masthead.reveal.visible { transform: none; }

/* fan cards: no reveal class needed — JS handles enter animation */
#story .narrow.reveal { transform: translateX(-22px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .fan-card, .fan-info { transition: none; }
  .dive { height: auto; }
  .hero-stage { position: relative; }
  .scroll-hint svg { animation: none; }
  .site-header { transition: none; }
  .dlayer--clouds img { animation: none; }
  .lantern-glow { animation: none; opacity: 0.85; }
  .hero-brand .ltr { animation: none; opacity: 1; transform: none; filter: none; }
  .hero-content .eyebrow,
  .hero-content .hero-sub,
  .hero-content .hero-actions { animation: none; opacity: 1; }
  .closing-glow { animation: none; }
  .card, .card::after { transition: none; }
  .curation-strip.reveal .draft { opacity: 1; transition: none; }
  .curation-strip.reveal .draft.is-out { opacity: 0.55; }
}

/* ============ responsive ============ */

@media (max-width: 900px) {
  :root {
    --fan-card-w:  clamp(120px, 16vw, 155px);
    --fan-offset:  clamp(64px,  8.5vw, 82px);
    --fan-group-h: clamp(165px, 22vw, 210px);
  }
}

@media (max-width: 760px) {
  :root { --header-pull: calc(44px + 1.8rem + 1px + 2.1rem); }
  .site-header { flex-wrap: wrap; row-gap: 0.15rem; padding-bottom: 0.55rem; }
  .site-nav {
    order: 4;
    width: 100%;
    justify-content: center;
    /* wrap instead of clipping both ends when the 5 links exceed the row
       (below ~430px they no longer fit on one line) */
    flex-wrap: wrap;
    column-gap: 0.9rem;
    row-gap: 0.15rem;
  }
  .site-nav a { font-size: 0.7rem; padding: 0.25rem 0; white-space: nowrap; }
  /* per-link chips overflow 320px: one shared paper backing for the row */
  .site-header.over-hero .site-nav a { padding: 0.25rem 0; background: none; }
  .site-header.over-hero .site-nav {
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    border-radius: var(--radius-pill);
  }
  .lang-toggle { margin-left: auto; }
  .cards { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  :root {
    --fan-card-w:  clamp(100px, 22vw, 130px);
    --fan-offset:  clamp(52px,  11vw, 68px);
    --fan-group-h: clamp(138px, 30vw, 176px);
  }
  .fan-group { margin-bottom: clamp(5rem, 14vw, 8rem); }
  .flamenco-embed { height: 560px; }
}

/* interactive flamenco turntable in the closing scene (iframe-isolated) */
.flamenco-embed {
  display: block;
  width: 600px;
  max-width: 100%;
  height: 680px;
  border: 0;
  margin: 2.5rem auto 0;
}

/* ============ create-your-own teaser ============ */
.create-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .create-wrap { grid-template-columns: 1.05fr 1fr; }
}
.create-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.4rem);
}
.create-shot {
  margin: 0;
  flex: 1 1 0;
  max-width: 16rem;
}
.create-shot img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.create-shot figcaption {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 0.6rem;
}
.create-poster { transform: rotate(1.5deg); }
.create-poster img { box-shadow: var(--shadow-lift); }
.create-arrow {
  flex: none;
  color: var(--terracotta);
}
.create-arrow svg { width: 28px; height: 28px; }
.create-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 0.9rem;
}
@media (max-width: 819px) {
  .create-arrow { transform: rotate(90deg); }
}

/* ============ foggy signature wash (subtle brand presence below the hero) ============ */
#story, .closing { position: relative; overflow: hidden; }
#story::before, .closing::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: url("../img/brand/signature-fog.png") center / contain no-repeat;
  opacity: 0.22;
  mix-blend-mode: multiply;   /* sits into the paper like real ink */
}
#story::before {
  right: -2%;
  top: 4%;
  width: min(58%, 560px);
  aspect-ratio: 1200 / 1298;
  transform: rotate(-4deg);
}
.closing::before {
  left: 50%;
  top: 6%;
  width: min(74%, 680px);
  aspect-ratio: 1200 / 1298;
  transform: translateX(-50%) rotate(-2deg);
  opacity: 0.16;
}
/* keep content above the wash */
#story .narrow, #story .curation-strip,
.closing .closing-inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #story::before, .closing::before { filter: none; }
}

/* ============ contact form (DSGVO, no third party) ============ */
.contact-form { max-width: 34rem; margin: 1.5rem auto 0; text-align: left; }
.cf-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .cf-row { grid-template-columns: 1fr; } }
.contact-form .field { margin-bottom: 1rem; display: flex; flex-direction: column; }
.contact-form label { font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 0.4rem; }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 70%, #fff);
  border: 1.5px solid var(--hairline); border-radius: var(--radius-input);
  padding: 0.6rem 0.8rem; width: 100%; }
.contact-form textarea { resize: vertical; line-height: 1.45; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-color: var(--ink); }
.contact-form .consent { flex-direction: row; align-items: flex-start; gap: 0.6rem;
  text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 0.95rem;
  color: var(--ink-soft); margin: 0.4rem 0 1.1rem; cursor: pointer; }
.contact-form .consent input { margin-top: 0.25rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--terracotta); }
.contact-form .consent a { color: var(--terracotta); }
.contact-form button[type=submit] { width: 100%; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin: 0.8rem 0 0; text-align: center; }
/* honeypot: off-screen, not display:none (bots skip display:none) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* flamenco closing moment */
.flamenco-block { margin-top: 2.5rem; text-align: center; }
.flamenco-cap { max-width: 30rem; margin: 0 auto 0.6rem; color: var(--ink-soft); font-style: italic; }