/* =================== REGISTER — Swiss discipline: grid, red, truth ========
   Design grammar:
   • Printed hairline 12-column grid under the WHOLE page (::before layer)
   • Three type sizes only: --rg-t1 poster · --rg-t2 lead · --rg-t3 text
   • Archivo Black display, DM Mono numerals, Inter body
   • Strong 2px ink rules open sections; 1px hairlines divide rows
   • Accent used as signal: Nr. columns, folios, squares, the poster band
   All selectors scoped to .pg-register.
=========================================================================== */

.pg-register {
  --rg-t1: clamp(2.9rem, 15cqw, 12.5rem);
  --rg-t2: clamp(1.25rem, 2.6cqw, 2.15rem);
  --rg-t3: clamp(.82rem, .5cqw + .68rem, .96rem);
  --rg-pad: clamp(16px, 4.5cqw, 52px);

  position: relative;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--rg-t3)/1.55 var(--font-body);
  overflow: clip;
}

/* ── The printed grid: hairline 12 columns under everything ────────────── */
.pg-register::before {
  content: '';
  position: absolute;
  inset: 0 var(--rg-pad);
  pointer-events: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    to right, var(--line) 0 1px, transparent 1px calc(100% / 12));
}
@container page (max-width: 620px) {
  .pg-register::before {
    background-image: repeating-linear-gradient(
      to right, var(--line) 0 1px, transparent 1px calc(100% / 6));
  }
}

.pg-register ::selection { background: var(--accent); color: var(--bg); }

.pg-register a { color: inherit; text-decoration: none; }
.pg-register img { max-width: 100%; display: block; }
.pg-register h1, .pg-register h2, .pg-register h3,
.pg-register p, .pg-register figure { margin: 0; }

/* Every band sits above the grid layer and carries the page gutter */
.pg-register > * {
  position: relative;
  padding-inline: var(--rg-pad);
}

/* ── The three sizes ───────────────────────────────────────────────────── */
.pg-register .rg-t1 {
  font: 400 var(--rg-t1)/.85 var(--font-black);
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.pg-register .rg-t2 {
  font: 400 var(--rg-t2)/1.28 var(--font-black);
  letter-spacing: -.01em;
}

/* mono micro-type */
.pg-register .rg-mono,
.pg-register .rg-tb-a, .pg-register .rg-tb-b, .pg-register .rg-tb-c,
.pg-register .rg-hs-c, .pg-register .rg-seclabel, .pg-register .rg-secnote,
.pg-register figcaption, .pg-register .rg-regfoot, .pg-register .rg-fn,
.pg-register .rg-colo {
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: calc(var(--rg-t3) * .88);
  line-height: 1.6;
}

.pg-register .rg-red,
.pg-register .rg-mono-red { color: var(--accent); }
.pg-register .rg-mono-red { font-family: var(--font-mono); }

.pg-register .rg-sq {
  display: inline-block;
  width: .62em; height: .62em;
  background: var(--accent);
  margin-right: .55em;
}

.pg-register .rg-grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.pg-register .rg-topbar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: baseline;
  padding-block: .7rem;
  border-bottom: 2px solid var(--ink);
}
.pg-register .rg-tb-a { grid-column: 1 / span 5; font-weight: 500; }
.pg-register .rg-tb-b { grid-column: 6 / span 4; color: var(--muted); }
.pg-register .rg-tb-c { grid-column: 10 / span 3; text-align: right; }
.pg-register .rg-logo { max-height: 30px; max-width: 140px; object-fit: contain; }

/* ── Section head: strong rule + accent folio + mono label ─────────────── */
.pg-register .rg-sechead {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  border-top: 2px solid var(--ink);
  padding-top: .6rem;
  margin-top: clamp(3rem, 8cqw, 7rem);
}
.pg-register .rg-folio {
  grid-column: 1 / span 2;
  font: 400 var(--rg-t2)/1 var(--font-black);
  letter-spacing: -.01em;
  color: var(--accent);
}
.pg-register .rg-seclabel {
  grid-column: 3 / span 6;
  font-weight: 400;
  color: var(--ink);
  padding-top: .3em;
}
.pg-register .rg-secnote {
  grid-column: 9 / span 4;
  text-align: right;
  color: var(--muted);
  padding-top: .3em;
}

/* ── Poster hero ───────────────────────────────────────────────────────── */
.pg-register .rg-hero { padding-top: clamp(2rem, 6cqw, 5rem); }
.pg-register .rg-name { grid-column: 1 / span 8; overflow-wrap: anywhere; }
.pg-register .rg-name .rg-line { display: block; }
.pg-register .rg-herofig { grid-column: 9 / span 4; align-self: end; }

.pg-register .rg-herosub {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: .75rem;
  margin-top: clamp(1.6rem, 4cqw, 3rem);
  border-top: 1px solid var(--ink);
  padding-top: .7rem;
}
.pg-register .rg-hs-a { grid-column: 1 / span 5; font-size: clamp(1rem, 1.8cqw, 1.45rem); }
.pg-register .rg-hs-b { grid-column: 6 / span 4; color: var(--muted); }
.pg-register .rg-hs-c { grid-column: 10 / span 3; text-align: right; }

/* ── Duotone figures: paper stays paper, shadows go ink, lights accent ─── */
.pg-register .rg-duo {
  background: var(--accent);
  position: relative;
  overflow: hidden;
}
.pg-register .rg-duo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(1.02);
  mix-blend-mode: multiply;
}
.pg-register .rg-duo-34 { aspect-ratio: 3 / 4; }
.pg-register .rg-duo-45 { aspect-ratio: 4 / 5; }

.pg-register figcaption {
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: .5rem;
  padding-top: .4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* ── Protokoll ─────────────────────────────────────────────────────────── */
.pg-register .rg-statement {
  grid-column: 1 / span 8;
  padding-top: clamp(1.4rem, 3cqw, 2.4rem);
  max-width: 58ch;
}
.pg-register .rg-statement .rg-t2 {
  font-size: clamp(1.1rem, 2.2cqw, 1.8rem);
  max-width: 26em;
  margin-bottom: .9em;
}
.pg-register .rg-statement p + p { margin-top: 1em; }
.pg-register .rg-sidefig {
  grid-column: 10 / span 3;
  padding-top: clamp(1.4rem, 3cqw, 2.4rem);
}

/* ── Register table ────────────────────────────────────────────────────── */
.pg-register .rg-reg { margin-top: clamp(1.2rem, 3cqw, 2.2rem); }
.pg-register .rg-row {
  display: grid;
  grid-template-columns: minmax(3.4rem, 1fr) 9fr minmax(3rem, 1fr);
  column-gap: .75rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-block: .55rem;
}
.pg-register .rg-row-head {
  border-bottom: 2px solid var(--ink);
  padding-block: .4rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: calc(var(--rg-t3) * .88);
  color: var(--muted);
}
.pg-register .rg-c-nr {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.pg-register .rg-row-head .rg-c-nr { color: var(--muted); }
.pg-register .rg-c-prod { font-weight: 700; }
.pg-register .rg-row-head .rg-c-prod { font-weight: 400; }
.pg-register .rg-c-fol {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--muted);
}
.pg-register .rg-row:not(.rg-row-head):hover { background: var(--surface); }

.pg-register .rg-regfoot {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: .75rem;
  padding-top: .7rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: .04em;
}
.pg-register .rg-regfoot > span:last-child { text-align: right; }

/* ── Diagonal poster interlude ─────────────────────────────────────────── */
.pg-register .rg-poster {
  margin-top: clamp(3rem, 8cqw, 7rem);
  padding-inline: 0;
  background: var(--accent);
  color: var(--bg);
  overflow: hidden;
  padding-block: clamp(4rem, 14cqw, 11rem);
}
.pg-register .rg-tilt {
  transform: rotate(-12deg);
  width: 130%;
  margin-left: -15%;
}
.pg-register .rg-tilt .rg-pline {
  display: block;
  white-space: nowrap;
  line-height: .9;
}
.pg-register .rg-tilt .rg-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--bg);
}
.pg-register .rg-p-meta {
  position: absolute;
  left: var(--rg-pad); bottom: 1rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: calc(var(--rg-t3) * .88);
}
.pg-register .rg-p-nr {
  position: absolute;
  right: var(--rg-pad); top: 1rem;
  font: 400 var(--rg-t2)/1 var(--font-black);
}

/* ── Bestand · stats ───────────────────────────────────────────────────── */
.pg-register .rg-stats {
  margin-top: clamp(1.2rem, 3cqw, 2.2rem);
  row-gap: clamp(1.4rem, 3cqw, 2.4rem);
}
.pg-register .rg-stat {
  grid-column: span 4;
  border-top: 1px solid var(--ink);
  padding-top: .6rem;
  padding-right: 1rem;
  min-width: 0;
}
.pg-register .rg-statnum {
  font-size: clamp(2.6rem, 10.5cqw, 9rem);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pg-register .rg-statlbl {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: calc(var(--rg-t3) * .88);
}
.pg-register .rg-statlbl i { font-style: normal; color: var(--accent); }

/* ── Abzüge · contact-print strip ──────────────────────────────────────── */
.pg-register .rg-strip {
  margin-top: clamp(1.2rem, 3cqw, 2.2rem);
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .8rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.pg-register .rg-cp {
  flex: 0 0 clamp(140px, 22cqw, 220px);
}
.pg-register .rg-cp img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  border: 1px solid var(--line);
  transition: filter .25s ease;
}
.pg-register .rg-cp:hover img { filter: grayscale(0) contrast(1); }
.pg-register .rg-cp figcaption { justify-content: flex-start; }
.pg-register .rg-cp-rest {
  display: flex;
  flex-direction: column;
}
.pg-register .rg-cp-rest span {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bg);
  font: 400 clamp(1.2rem, 3cqw, 2rem)/1 var(--font-mono);
  border: 1px solid var(--ink);
}

/* ── Sendeplan · tracks timetable (kit trackRows, restyled) ────────────── */
.pg-register .rg-tthead {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 5fr) minmax(0, 4fr) minmax(9rem, 3fr);
  column-gap: .75rem;
  margin-top: clamp(1.2rem, 3cqw, 2.2rem);
  border-bottom: 2px solid var(--ink);
  padding-block: .4rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: calc(var(--rg-t3) * .88);
  color: var(--muted);
}
.pg-register .rg-tthead span:last-child { text-align: right; }
.pg-register .tracks { display: block; }
.pg-register .track-row {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 5fr) minmax(0, 4fr) minmax(9rem, 3fr);
  column-gap: .75rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-block: .55rem;
}
.pg-register .track-row:hover { background: var(--surface); }
.pg-register .tr-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.pg-register .track-row strong {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.pg-register .tr-pub {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.pg-register .tr-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.pg-register .tr-links a,
.pg-register .tr-links .tr-play {
  font: 500 calc(var(--rg-t3) * .78)/1 var(--font-mono);
  letter-spacing: .08em;
  padding: .35em .6em;
  border: 1px solid var(--line);
  color: var(--ink);
  background: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pg-register .tr-links a:hover,
.pg-register .tr-links .tr-play:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Verzeichnis · factual prose block ─────────────────────────────────── */
.pg-register .rg-notes {
  grid-column: 1 / span 8;
  padding-top: clamp(1.2rem, 3cqw, 2.2rem);
  max-width: 62ch;
}
.pg-register .rg-notes p + p { margin-top: 1em; }
.pg-register .rg-fn { color: var(--accent); margin-right: .35em; }
.pg-register .rg-notes b { font-weight: 700; }
.pg-register .rg-notes i { font-style: italic; }

/* ── Vorführung · showreel ─────────────────────────────────────────────── */
.pg-register .rg-reel {
  grid-column: 1 / span 8;
  padding-top: clamp(1.2rem, 3cqw, 2.2rem);
}
.pg-register .yt {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ink);
  background: var(--ink);
}
.pg-register .yt iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ── Anhang · user sections zone ───────────────────────────────────────── */
.pg-register .rg-anhang-zone { padding-top: clamp(1.2rem, 3cqw, 2.2rem); }
.pg-register .xsec-h {
  font: 400 var(--rg-t2)/1.15 var(--font-black);
  text-transform: uppercase;
  letter-spacing: -.01em;
  border-top: 1px solid var(--ink);
  padding-top: .5rem;
  margin: 1.8rem 0 .8rem;
}
.pg-register .xsec-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--rg-t3) * .88);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  margin: 0 0 .7rem;
}
.pg-register .xsec { margin-block: 1.4rem; }
.pg-register .xsec-text p { max-width: 62ch; }
.pg-register .xsec-list ul { list-style: none; margin: 0; padding: 0; }
.pg-register .xsec-list li {
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  column-gap: .75rem;
  border-bottom: 1px solid var(--line);
  padding-block: .5rem;
}
.pg-register .xsec-list li span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.pg-register .xsec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
.pg-register .xsec-grid img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  border: 1px solid var(--line);
}
.pg-register .xsec-grid img:hover { filter: grayscale(0); }
.pg-register .xsec-more {
  font-family: var(--font-mono);
  font-size: calc(var(--rg-t3) * .88);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  background: none;
  border: 0;
  padding: .6rem 0 0;
  cursor: pointer;
}

/* ── Auskunft · departure board + colophon ─────────────────────────────── */
.pg-register .rg-fahr { margin-top: clamp(1.2rem, 3cqw, 2.2rem); }
.pg-register .rg-frow {
  display: grid;
  grid-template-columns: minmax(4.2rem, 2fr) 4fr 6fr;
  column-gap: .75rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-block: .65rem;
}
.pg-register .rg-frow-head {
  border-bottom: 2px solid var(--ink);
  padding-block: .4rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: calc(var(--rg-t3) * .88);
  color: var(--muted);
}
.pg-register .rg-f-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.pg-register .rg-frow-head .rg-f-time { color: var(--muted); }
.pg-register .rg-f-what {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pg-register .rg-frow-head .rg-f-what { font-weight: 400; letter-spacing: .12em; }
.pg-register .rg-f-link { overflow-wrap: anywhere; }
.pg-register .rg-f-link a {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color .15s ease;
}
.pg-register .rg-f-link a:hover { color: var(--accent); }
.pg-register .rg-f-link a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pg-register .rg-colo {
  margin-top: clamp(2.5rem, 6cqw, 4rem);
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: .75rem;
  padding-block: .7rem 0;
  color: var(--muted);
}
.pg-register .rg-cp-a { grid-column: 1 / span 5; }
.pg-register .rg-cp-b { grid-column: 6 / span 4; }
.pg-register .rg-cp-c { grid-column: 10 / span 3; text-align: right; }

.pg-register .colophon {
  padding: 1.6rem 0 3rem;
  font-family: var(--font-mono);
  font-size: calc(var(--rg-t3) * .82);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Scroll-reveal (gated on .stage.animate; app stamps .in per band) ──── */
.stage.animate .pg-register > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.stage.animate .pg-register > *.in {
  opacity: 1;
  transform: none;
}

/* ── Narrow container: 6-column world ──────────────────────────────────── */
@container page (max-width: 620px) {
  .pg-register .rg-tb-b { display: none; }
  .pg-register .rg-tb-a { grid-column: 1 / span 7; }
  .pg-register .rg-tb-c { grid-column: 8 / span 5; }

  .pg-register .rg-name { grid-column: 1 / span 12; }
  .pg-register .rg-herofig { grid-column: 4 / span 9; margin-top: 1.6rem; }
  .pg-register .rg-hs-a { grid-column: 1 / span 12; }
  .pg-register .rg-hs-b { grid-column: 1 / span 12; margin-top: .6rem; }
  .pg-register .rg-hs-c { grid-column: 1 / span 12; text-align: left; margin-top: .6rem; }

  .pg-register .rg-seclabel { grid-column: 3 / span 10; }
  .pg-register .rg-secnote { display: none; }

  .pg-register .rg-statement { grid-column: 1 / span 12; }
  .pg-register .rg-sidefig { grid-column: 3 / span 8; margin-top: 1.4rem; }

  .pg-register .rg-row {
    grid-template-columns: 3rem 1fr auto;
    grid-template-areas: "nr prod fol";
  }
  .pg-register .rg-c-nr { grid-area: nr; }
  .pg-register .rg-c-prod { grid-area: prod; }
  .pg-register .rg-c-fol { grid-area: fol; }
  .pg-register .rg-regfoot { grid-template-columns: 1fr; }
  .pg-register .rg-regfoot > span:last-child { text-align: left; }

  .pg-register .rg-tilt .rg-outline { -webkit-text-stroke: 1px var(--bg); }

  .pg-register .rg-stat { grid-column: span 12; padding-right: 0; }
  .pg-register .rg-statnum { font-size: clamp(3.4rem, 19cqw, 6rem); }

  .pg-register .rg-tthead { display: none; }
  .pg-register .track-row {
    grid-template-columns: 3rem 1fr;
    grid-template-areas: "nr title" "nr pub" "nr links";
    row-gap: .25rem;
  }
  .pg-register .tr-num { grid-area: nr; }
  .pg-register .track-row strong { grid-area: title; }
  .pg-register .tr-pub { grid-area: pub; }
  .pg-register .tr-links { grid-area: links; justify-content: flex-start; }

  .pg-register .rg-notes,
  .pg-register .rg-reel { grid-column: 1 / span 12; }

  .pg-register .xsec-grid { grid-template-columns: repeat(2, 1fr); }

  .pg-register .rg-frow {
    grid-template-columns: 4.2rem 1fr;
    grid-template-areas: "time what" "time link";
    row-gap: .15rem;
  }
  .pg-register .rg-f-time { grid-area: time; }
  .pg-register .rg-f-what { grid-area: what; }
  .pg-register .rg-f-link { grid-area: link; }
  .pg-register .rg-frow-head { grid-template-areas: "time what"; }
  .pg-register .rg-frow-head .rg-f-link { display: none; }

  .pg-register .rg-cp-a, .pg-register .rg-cp-b { grid-column: 1 / span 12; }
  .pg-register .rg-cp-b { margin-top: .4rem; }
  .pg-register .rg-cp-c { grid-column: 1 / span 12; text-align: left; margin-top: .4rem; }
}

/* ── Motion: hero lines rise once; reduced-motion honoured ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  .pg-register .rg-name .rg-line {
    opacity: 0;
    transform: translateY(.22em);
    animation: rg-rise .7s cubic-bezier(.2, .6, .2, 1) forwards;
  }
  .pg-register .rg-name .rg-line:nth-child(2) { animation-delay: .1s; }
  .pg-register .rg-herofig {
    opacity: 0;
    animation: rg-fade .9s ease .3s forwards;
  }
  @keyframes rg-rise { to { opacity: 1; transform: none; } }
  @keyframes rg-fade { to { opacity: 1; } }
}

/* phone: the tilted plate line was 46px and sheared off its plate */
@container page (max-width: 560px) {
  .pg-register .rg-pline { font-size: clamp(19px, 7.5cqw, 46px); }
}