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

/* ── Tokens (from Figma variables) ─────────────────────────────────────── */
:root {
  --module:   24px;            /* Module */
  /* Staircase steps. Figma designs at 1728×1081 where each step = 48px:
     48/1416 ≈ 3.39% of content width, 48/1081 ≈ 4.44% of viewport height.
     Scaling the vertical step (and type) with viewport height keeps the
     Figma proportions on shorter windows so text never gets squeezed. */
  --hstep:    clamp(26px, 3.1vw, 48px);  /* horizontal — card left offset  */
  --vstep:    clamp(30px, 4.44vh, 48px); /* vertical — card height + top pad */
  --radius:   4px;             /* Corner Radius */
  --sidebar:  clamp(252px, 18vw, 312px);

  --bg:       #E5E5E5;         /* Gray */
  --ink:      #000000;
  --yellow-a: #FFB62F;         /* gradient start (right) */
  --yellow-b: #FFCF76;         /* gradient end (left) */

  /* Drop Shadow: #1F2134 @ 75%, radius 15 */
  --shadow-img:     0 0 15px 0 rgba(31, 33, 52, 0.55);
  --shadow-content: 0 0 12px 0 rgba(31, 33, 52, 0.32);

  --font: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Type ramp (size / line-height). Sizes scale with viewport height to
     match Figma's 1081px-tall proportions (e.g. 24px ≈ 2.22vh @ 1081). */
  --h1: clamp(38px, 5.55vh, 60px);  --h1-lh: 0.72;  /* section labels */
  --h2: clamp(38px, 5.55vh, 60px);  --h2-lh: 1.0;   /* event titles */
  --b1: clamp(18px, 2.22vh, 24px);  --b1-lh: 1.3;   /* body */
  --b2: clamp(15px, 1.85vh, 20px);  --b2-lh: 1.3;   /* small body / sidebar */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  text-size-adjust: 100%;
}
body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.55; }
em { font-style: italic; }

/* ── Lenis smooth scroll (vendored) ────────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Skip link ─────────────────────────────────────────────────────────── */
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 9999;
  padding: 8px 16px; background: var(--ink); color: var(--bg);
  font-family: var(--font); font-size: 16px; transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ── Sidebar (fixed identity) ──────────────────────────────────────────── */
.sidebar {
  position: fixed; left: 0; top: 0; z-index: 200;
  width: var(--sidebar); height: 100vh;
  padding: var(--module);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bg);
}
.sidebar__top { display: flex; flex-direction: column; gap: 20px; }
.sidebar__logo { display: block; width: 153px; max-width: 60%; }
.sidebar__logo img { display: block; width: 100%; height: auto; }
.sidebar__tagline {
  font-size: var(--b2); line-height: var(--b2-lh);
  max-width: 226px;
}
.sidebar__links {
  display: flex; flex-direction: column;
  font-size: var(--b2); line-height: var(--b2-lh);
}
.sidebar__links a { width: max-content; }
.sidebar__addr { opacity: 0.85; }
.sidebar__impressum { margin-top: 10px; opacity: 0.6; }

/* ── Scroll driver + sticky stage ──────────────────────────────────────── */
.scroll-driver {
  position: relative;
  margin-left: var(--sidebar);
  height: calc(9 * 100vh);
}
.cards-stage {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;          /* clips peeled cards; box-shadows still paint */
}

/* ── Cards: top-right anchored 48px staircase ──────────────────────────── */
.card {
  position: absolute; top: 0; right: 0;
  border-bottom-left-radius: var(--radius);
}
/* depth: 0 = base (Events), 8 = front (Intro). left & height step by --step. */
.card[data-card="8"] { left: calc(0 * var(--hstep)); height: calc(100% - 0 * var(--vstep)); z-index: 10; }
.card[data-card="7"] { left: calc(1 * var(--hstep)); height: calc(100% - 1 * var(--vstep)); z-index: 20; }
.card[data-card="6"] { left: calc(2 * var(--hstep)); height: calc(100% - 2 * var(--vstep)); z-index: 30; }
.card[data-card="5"] { left: calc(3 * var(--hstep)); height: calc(100% - 3 * var(--vstep)); z-index: 40; }
.card[data-card="4"] { left: calc(4 * var(--hstep)); height: calc(100% - 4 * var(--vstep)); z-index: 50; }
.card[data-card="3"] { left: calc(5 * var(--hstep)); height: calc(100% - 5 * var(--vstep)); z-index: 60; }
.card[data-card="2"] { left: calc(6 * var(--hstep)); height: calc(100% - 6 * var(--vstep)); z-index: 70; }
.card[data-card="1"] { left: calc(7 * var(--hstep)); height: calc(100% - 7 * var(--vstep)); z-index: 80; }
.card[data-card="0"] { left: calc(8 * var(--hstep)); height: calc(100% - 8 * var(--vstep)); z-index: 90; }

/* ── Content cards (gray, blend with background, defined by shadow) ─────── */
.card--content { background: var(--bg); box-shadow: var(--shadow-content); }
.card--base    { box-shadow: none; }

.card__inner {
  position: absolute; inset: 0;
  padding: var(--pt, 72px) var(--module) var(--module);
  display: flex; flex-direction: column; justify-content: space-between;
}
/* top padding scales with --vstep (matches Figma 24/72/120/168/216 @ 48px) */
.card[data-card="0"] { --pt: calc(0.5 * var(--vstep)); }  /* intro */
.card[data-card="2"] { --pt: calc(1.5 * var(--vstep)); }  /* dresdener */
.card[data-card="4"] { --pt: calc(2.5 * var(--vstep)); }  /* members */
.card[data-card="6"] { --pt: calc(3.5 * var(--vstep)); }  /* contacts */
.card[data-card="8"] { --pt: clamp(72px, 5.5 * var(--vstep), 264px); }  /* events — extra step clears the parked stack (4×vstep) with breathing room */

.card__body { max-width: min(506px, 100%); }
.card__body p { font-size: var(--b1); line-height: var(--b1-lh); }
.card__body p + p { margin-top: 0.65em; }
.card__body--intro { max-width: min(553px, 100%); }

/* CTA link (e.g. Members → Join) */
.card__cta {
  display: inline-block;
  margin-top: clamp(16px, 2.4vh, 28px);
  padding: 0.42em 1.4em;
  font-size: var(--b1); line-height: 1.1;
  border: 1px solid var(--ink); border-radius: var(--radius);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.card__cta:hover { background: var(--ink); color: var(--bg); opacity: 1; }

/* Section label — bottom-left of each card (also the click target to jump) */
.card__label-row { display: flex; align-items: center; width: 100%; }
.card__label {
  font-size: var(--h1); line-height: var(--h1-lh);
  text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: opacity 0.2s var(--ease);
}
.card__label:hover { opacity: 0.55; }

/* ── Image cards (full-bleed photo) ────────────────────────────────────── */
.card--image { overflow: hidden; box-shadow: var(--shadow-img); }
.card__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.card__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%);
}

/* ── Intro card (yellow gradient + anatomy) ────────────────────────────── */
.card--intro {
  background: linear-gradient(to left, var(--yellow-a), var(--yellow-b));
  overflow: hidden;
  box-shadow: var(--shadow-img);
}
.card--intro .card__inner { z-index: 2; }
.card__intro-logo { display: block; width: 188px; height: auto; }
.card__anatomy {
  position: absolute; z-index: 1;
  top: 220px; right: -110px; width: 557px; max-width: none; height: auto;
  transform: rotate(-1.17deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ── Events card ───────────────────────────────────────────────────────── */
/* footer carries its own bottom padding — drop the inner's so EVENTS sits
   at the very bottom (matches Figma) instead of floating 48px up */
.card--events .card__inner { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.events {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(12px, 1.8vh, 22px);
  padding: 0 var(--module);
  /* fits a screen normally; scrolls internally when more events are added.
     Desktop: `contain` keeps the native scroll from fighting Lenis — the JS
     wheel handler hands control back to the deck at the edges. Touch: allow
     native overscroll chaining so the page resumes past the list edges. */
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.28) transparent;
}
@media (pointer: coarse) { .events { overscroll-behavior: auto; } }
.events::-webkit-scrollbar { width: 6px; }
.events::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 3px; }
.events::-webkit-scrollbar-track { background: transparent; }
.event { position: relative; display: block; color: inherit; cursor: pointer; }
.event__content {
  display: flex; gap: clamp(28px, 5.5vw, 80px); align-items: stretch;
  transition: filter 0.4s var(--ease);
}
/* hover: blur the listing, fade a gray radial over the centre, reveal CTA */
.event__overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
  background: radial-gradient(58% 70% at 50% 50%,
    rgba(229,229,229,0.95) 38%, rgba(229,229,229,0) 92%);
}
.event__more { font-size: var(--h1); line-height: var(--h1-lh); text-transform: uppercase; white-space: nowrap; }
.event:hover .event__content,
.event:focus-visible .event__content { filter: blur(4px); }
.event:hover .event__overlay,
.event:focus-visible .event__overlay { opacity: 1; }
.event__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(4px, 0.9vh, 14px); }
.event__date { font-size: var(--b1); line-height: var(--b1-lh); }
.event__title { font-size: clamp(26px, 3.5vh, 44px); line-height: 1.05; font-weight: 400; }
.event__subtitle { font-size: var(--b1); line-height: var(--b1-lh); }
.event__body { font-size: var(--b2); line-height: var(--b2-lh); }
/* media + title scale with viewport height so three listings fit a screen
   without clipping; taller screens keep more breathing room */
.event__media { flex: 0 0 auto; width: clamp(104px, 16vh, 220px); height: clamp(104px, 16vh, 220px); }
.event__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card__label-row--events {
  position: relative;
  padding: clamp(14px, 3vh, 64px) var(--module) var(--module);
  background: url('../assets/images/figma/events-bg.png') center / cover no-repeat;
}

/* ── Scroll progress indicator ─────────────────────────────────────────── */
.scroll-progress {
  position: fixed; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(0, 0, 0, 0.08); z-index: 300;
}
.scroll-progress__bar { height: 100%; width: 0%; background: var(--ink); transition: width 0.1s linear; }

/* ── Accessible content (screen-reader only) ───────────────────────────── */
.a11y-content {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Legal pages (Impressum) — plain scrolling document, not the deck ───── */
.page-legal { background: var(--bg); }
.legal {
  max-width: 760px; margin: 0 auto;
  padding: clamp(40px, 8vh, 96px) clamp(20px, 5vw, 48px) 112px;
  color: var(--ink);
}
.legal__logo { display: block; width: 148px; margin-bottom: clamp(36px, 7vh, 72px); }
.legal__logo img { display: block; width: 100%; height: auto; }
.legal h1 { font-size: clamp(44px, 9vw, 68px); line-height: 0.95; font-weight: 400; margin-bottom: 0.7em; }
.legal h2 { font-size: 24px; line-height: 1.2; font-weight: 400; margin: 1.7em 0 0.35em; }
.legal h3 { font-size: 20px; line-height: 1.3; font-weight: 400; margin: 1.3em 0 0.3em; }
.legal p, .legal address { font-size: 18px; line-height: 1.55; max-width: 66ch; }
.legal address { font-style: normal; margin-bottom: 0.9em; }
.legal p { margin-bottom: 0.9em; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal__back { display: inline-block; margin-top: 2.6em; }

@media (max-width: 640px) {
  .legal h1 { font-size: clamp(36px, 12vw, 52px); }
  .legal p, .legal address { font-size: 17px; }
}

/* ── Mobile deck (≤820px): full-width portrait deck, brand pinned bottom ── */
@media (max-width: 820px) {
  :root {
    /* smaller steps → the active card is tall & wide in portrait */
    --hstep: clamp(9px, 3vw, 20px);
    --vstep: clamp(15px, 2.5vh, 24px);
    --h1: clamp(28px, 8vw, 42px);
    --h2: clamp(26px, 7vw, 38px);
    --b1: clamp(15px, 4.2vw, 18px);
    --b2: clamp(13px, 3.6vw, 16px);
    --bar-h: 92px;            /* fixed bottom brand bar */
  }

  /* driver + stage use svh so the deck is stable as the URL bar shows/hides;
     the stage is shortened to leave room for the bottom brand bar */
  .scroll-driver { margin-left: 0; height: calc(9 * 100svh); }
  .cards-stage { height: calc(100svh - var(--bar-h)); }

  /* sidebar → fixed bottom bar: wordmark left, links right */
  .sidebar {
    position: fixed; inset: auto 0 0 0; top: auto; width: auto; height: auto;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px var(--module); background: var(--bg);
  }
  .sidebar__top { flex-direction: row; align-items: center; gap: 0; }
  .sidebar__logo { width: 116px; max-width: 42vw; }
  .sidebar__tagline { display: none; }
  .sidebar__links { flex-flow: row wrap; justify-content: flex-end; gap: 2px 12px;
    font-size: 12px; line-height: 1.25; max-width: 52vw; }
  .sidebar__addr { display: none; }

  .card__inner { padding: var(--pt, 36px) 20px 20px; }
  .card__body, .card__body--intro { max-width: none; }
  .card__intro-logo { width: 132px; }
  /* subtle, low in the card so it reads as texture behind the wordmark */
  .card__anatomy { width: 86%; right: -8%; top: auto; bottom: 2%; opacity: 0.4; }

  /* compact event rows so several fit one screen: thumbnail + date/title/
     subtitle; the body paragraph is hidden (tap through to Luma for detail) */
  .events { gap: clamp(12px, 2.4vh, 22px); padding: 0 20px; }
  .event__content { flex-direction: row; gap: 14px; align-items: flex-start; }
  .event__text { gap: 4px; }
  .event__title { font-size: clamp(21px, 5.6vw, 30px); }
  .event__body { display: none; }
  .event__media { flex: 0 0 auto; width: clamp(60px, 19vw, 86px); height: clamp(60px, 19vw, 86px); }
  .event__more { font-size: clamp(26px, 8vw, 40px); }
  .card__label-row--events { padding: clamp(14px, 3vh, 36px) 20px 16px; }
}

/* ── Reduced motion: static stacked layout (no deck) ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --h1: 40px; --h2: 40px; --b1: 20px; --b2: 17px; }
  .card { will-change: auto; transform: none !important; }

  .sidebar {
    position: static; width: 100%; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: 24px;
    background: var(--bg); border-bottom: 1px solid rgba(0,0,0,0.12);
  }
  .sidebar__top { flex-direction: column; gap: 12px; }
  .sidebar__logo { width: 153px; }
  .sidebar__tagline { display: block; max-width: 340px; }
  .sidebar__links { flex-flow: row wrap; justify-content: flex-start; gap: 4px 20px; font-size: var(--b2); max-width: none; }
  .sidebar__addr { display: inline; }

  .scroll-driver { margin-left: 0; height: auto; }
  .cards-stage { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; }
  .card[data-card="0"] { order: 0; }
  .card[data-card="1"] { order: 1; }
  .card[data-card="2"] { order: 2; }
  .card[data-card="3"] { order: 3; }
  .card[data-card="4"] { order: 4; }
  .card[data-card="5"] { order: 5; }
  .card[data-card="6"] { order: 6; }
  .card[data-card="7"] { order: 7; }
  .card[data-card="8"] { order: 8; }

  .card {
    position: relative; left: 0 !important; height: auto !important;
    width: 100%; border-bottom-left-radius: 0;
    border-top: 1px solid rgba(0,0,0,0.12);
  }
  .card--content { box-shadow: none; }
  .card__label { cursor: auto; }
  .card__inner { position: relative; inset: auto; padding: 48px var(--module); }
  .card[data-card] { --pt: 48px; }
  .card__body, .card__body--intro { max-width: 640px; }
  .card--image { height: 56vw; min-height: 280px; }
  .card--intro { padding-bottom: 0; }
  .card__anatomy { position: relative; top: auto; right: auto; left: auto; bottom: auto;
    width: min(90%, 460px); margin: 16px 0 0 auto; transform: none; }
  .event__content { flex-direction: column; gap: 16px; }
  .event__overlay { display: none; }
  .event__media { width: 200px; height: 200px; }
}