/* ---------- Tokens ---------- */
:root {
  --bg: #FF99DD;        /* page background */
  --primary: #222222;   /* primary text */
  --secondary: #FFFFFF; /* on-image text / captions */
  --third: #FFFF00;     /* deco */
  --paper: #f5f5f5;     /* accordion boxes */
  --muted: #888888;     /* footnotes / references */

  --edge: 24px;         /* page edge padding */

  /* spacing scale – overridden for mobile further down */
  --space-sm: 40px;     /* rhythm within a section */
  --space-md: 80px;     /* hero gap / above photos */
  --space-lg: 120px;    /* between sections */

  /* shared Roboto Flex axes – only XOPQ differs between styles */
  --vf: 'GRAD' 0, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'slnt' 0;
}

/* ---------- Font ---------- */
@font-face {
  font-family: 'Roboto Flex';
  src: url('fonts/RobotoFlex.woff2') format('woff2');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--edge);                      /* even edge padding all around */
  overflow-x: clip;                          /* contain wider-than-content images */
  background: var(--bg);
  transition: background-color 0.4s ease;    /* quick switch into the dark party section */
  color: var(--primary);
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  font-variation-settings: 'XOPQ' 96, var(--vf);
}

a { color: var(--primary); }
a:hover { text-decoration: none; }

::selection { background: var(--third); color: var(--primary); }

/* ---------- Headings ---------- */
h1, h2 {
  font-weight: 1000;
  line-height: 0.85em;
  text-align: center;
  font-stretch: 49%;
  text-transform: uppercase;
  font-variation-settings: 'XOPQ' 27, var(--vf);
}
h1 { font-size: clamp(56px, 16vw, 104px); }
h2 { font-size: clamp(48px, 14vw, 80px); }

h3 {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;                 /* allow wrapping inside the summary */
  font-weight: 700;
  font-size: clamp(20px, 4vw, 24px);
  font-stretch: 120%;
}
.num { flex: none; }            /* number keeps its own column → hanging indent */

/* ---------- Text styles ---------- */
.feature-text {
  font-size: clamp(16px, 4vw, 24px);
  text-align: center;
  font-stretch: 120%;
}

.caption {
  font-size: clamp(13px, 3.6vw, 16px);
  text-align: center;
  font-stretch: 120%;
  color: var(--secondary);
}

.image-caption {
  font-size: 12px;
  line-height: 14px;
  text-align: right;
  font-stretch: 25%;
  color: var(--secondary);
}

.white  { color: var(--secondary); }
.yellow { color: var(--third); }

/* ---------- Media (figures, images) ---------- */
figure { position: relative; margin: 0; }
figure img,
.hero-header,
.party-header { display: block; width: 100%; height: auto; }

/* photo credit overlaid bottom-right */
figure .image-caption { position: absolute; right: 8px; bottom: 8px; }
figure .image-caption a { color: var(--secondary); text-decoration: none; }
figure .image-caption a:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.hero { position: relative; }
.hero-graphics { position: relative; z-index: 2; }
.hero-graphics picture { display: block; }

/* collision graphics behind the header (parallax handled in collision.js) */
.collision-bg,
.collision-fg {
  position: absolute;
  top: 24px;                 /* from the top edge of the header */
  left: 50%;
  width: 70%;                /* of the header width */
  transform: translateX(-50%);   /* centered; collision.js takes over */
  will-change: transform;
}
.collision-bg { z-index: -2; }   /* furthest back */
.collision-fg {
  z-index: -1;                   /* in front of bg, behind header.svg */
  transform: translate(calc(-50% + 5%), -2%) scale(0.4);   /* 40% size, offset 5% right / 2% up */
}

.hero-photo { z-index: 1; }  /* behind the header graphics; top offset set in hero.js */

/* ---------- Content ---------- */
.content {
  max-width: 800px;          /* content column cap */
  margin: var(--space-md) auto 0;   /* gap below the hero, centered */
}

/* reset default margins; spacing comes from the rhythm rules below */
.content :is(p, h1, h2, h3) { margin: 0; }

.content section + section { margin-top: var(--space-lg); }   /* between sections */
.content section > * + *    { margin-top: var(--space-sm); }   /* within a section */
.content .content-photo     { margin-top: var(--space-md); }   /* extra space above photos */
.content .map figcaption    { margin-top: 16px; }              /* map caption below the graphic */

/* photos break out beyond the 800px column, capped at 1100px and centered
   (the map stays at column width) */
.content .content-photo {
  width: min(1100px, 100vw - 2 * var(--edge));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ---------- Accordion ---------- */
.accordion { display: flex; flex-direction: column; gap: 2px; }

.accordion-item {
  background: var(--paper);
  padding: 24px;
  transition: padding-bottom 0.25s ease;
}
.accordion-item.is-open { padding-bottom: 32px; }   /* extra bottom space when open */

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;                                  /* remove disclosure marker */
}
.accordion-header::-webkit-details-marker { display: none; }

.accordion-arrow {
  flex: none;
  width: 24px;
  transition: transform 0.2s ease;
}
.accordion-item.is-open .accordion-arrow { transform: rotate(180deg); }

/* content wrapper: clipped for the height animation; text capped at 640px */
.accordion-content {
  overflow: hidden;
  max-width: 640px;
  line-height: 1.4;
}
.accordion .accordion-body { margin-top: 24px; }    /* heading → text */
.accordion .accordion-footnotes {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}
.accordion-footnotes a { color: inherit; }

/* footnote references – keep them from inflating the line height */
sup {
  color: var(--muted);
  font-size: 75%;
  line-height: 0;
  position: relative;
  top: -0.5em;
  vertical-align: baseline;
}

/* ---------- PDF downloads ---------- */
.content .downloads { margin-top: 32px; text-align: center; line-height: 1.4; }

/* ---------- Party (dark full-bleed section) ---------- */
.party {
  color: var(--secondary);                   /* white text */
  position: relative;                         /* containing block for the overlays */
  isolation: isolate;                         /* own stacking context for the z-order below */
  overflow: clip;                             /* contain the collision layers — no stray page scroll */
  overflow-clip-margin: var(--edge);          /* …but let them still bleed to the screen edges */
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.24);   /* drop shadow on all party text */
  /* full width within the edge padding; the dark comes from the body bg */
  margin: 0 calc(-1 * var(--edge));
  padding: var(--edge) var(--edge) 160px;     /* gap to the socket (80px on mobile) */
}
.party picture { display: block; }

/* both collision layers: centered, 70% wide (same proportion as collision-bg),
   moved by the mouse in collision.js */
.party-collision-inner,
.party-collision-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}
.party-collision-inner { z-index: -1; }       /* behind the header */
.party-collision-outer { z-index: 1; }        /* over the header */

/* page transition: past the scroll threshold (toggled in background.js) the
   background switches to dark, #positionen fades out and #party fades in */
body.party-active { background-color: var(--primary); }

#positionen,
.party { transition: opacity 0.4s ease; }
.party { opacity: 0; }
body.party-active #positionen { opacity: 0; }
body.party-active .party { opacity: 1; }

.party-inner {
  position: relative;
  z-index: 2;                                /* text stays above the outer overlay */
  max-width: 800px;
  margin: 160px auto 0;                      /* below the party header (80px on mobile) */
}
.party-inner > * { margin: 0; }
.party-inner > * + * { margin-top: var(--space-sm); }   /* 40px rhythm */
.party-inner h2 { margin-top: 16px; }                   /* tighter gap under the h1 */

/* line-up breaks out wider (like content photos) and sits behind the outer overlay */
.party-lineup {
  display: block;
  position: relative;
  z-index: 0;                                /* behind the outer overlay */
  width: min(1100px, 100vw - 2 * var(--edge));
  height: auto;
  margin: var(--space-sm) auto 0;            /* 40px gap, centered */
}

/* ---------- Socket ---------- */
.socket {
  margin: 0 calc(-1 * var(--edge)) calc(-1 * var(--edge));   /* full width, down to the page bottom */
  padding: var(--space-sm) var(--edge);
  background-color: var(--primary);          /* #222222 */
}
.socket a { color: inherit; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  :root {
    --edge: 16px;
    --space-sm: 32px;   /* tweak spacing for mobile here */
    --space-md: 56px;
    --space-lg: 80px;
  }
  .collision-bg,
  .collision-fg { top: 72px; }     /* 3× the desktop distance */
  .party-collision-inner,
  .party-collision-outer { width: 150vw; }   /* fill the narrow screen */
  .party { padding-bottom: 80px; }           /* smaller gap to the socket */
  .party-inner { margin-top: 80px; }         /* smaller gap before the h1 */
  .accordion-item { padding: 16px; }
}