/* ============================================
   SCHATZ-DOSSIER DRESDEN
   Full dossier/case-file aesthetic
   ============================================ */

/* --- Pre-paint hide for the hero block ---
   The HTML element starts with class="hero-loading". This rule keeps
   the hero elements invisible until the JS-driven entry animation
   takes over (heroReveal in script.js removes the class). Without
   this, there's a brief flash where the elements render in their
   final state before GSAP springs them back to the from-state.
   The <noscript> override in index.html ensures the page is still
   visible if JavaScript is disabled. */
.hero-loading [data-reveal="title"],
.hero-loading .hero-teaser-wrap,
.hero-loading .hero-tagline,
.hero-loading .hero-countdown,
.hero-loading .hero-rule,
.hero-loading .hero-stats,
.hero-loading .hero-meta-top {
  opacity: 0;
}

/* --- Custom properties --- */
:root {
  --paper: #efe7d4;
  --paper-deep: #e6dcc2;
  --paper-dark: #d8cba8;
  --ink: #1a1613;
  --ink-soft: #3a332c;
  --ink-faint: #6d665a;
  --manila: #d4b878;
  --manila-dark: #a88c54;
  --manila-deep: #7a5f33;
  --stamp-red: #b82727;
  --stamp-red-deep: #851818;
  --accent-blue: #3a5a8a;
  --seal-green: #4a6b3f;
  --line: rgba(26, 22, 19, 0.12);
  --line-strong: rgba(26, 22, 19, 0.28);
  --shadow-soft: 0 2px 8px rgba(26, 22, 19, 0.08);
  --shadow-med: 0 8px 24px rgba(26, 22, 19, 0.18);
  --shadow-deep: 0 24px 60px rgba(26, 22, 19, 0.35);
  
  --font-display: 'Special Elite', 'Courier New', monospace;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-type: 'Cutive Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-mono);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  /* overflow-x: clip statt hidden — verhindert horizontales Scrollen
     genauso zuverlässig, macht den Body aber NICHT zum Scroll-Container.
     `hidden` hatte genau das getan und damit position:sticky des
     Headers gebrochen: Der Viewport scrollt über <html>, der Header
     klebte aber am (nicht scrollenden) Body und scrollte deshalb mit
     aus dem Bild. html behält overflow-x: hidden als Fallback für
     ältere Browser ohne clip-Support (Safari < 16). */
  overflow-x: clip;
  max-width: 100vw;
  position: relative;
}

/* Paper background with fibers and tint */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(168, 140, 84, 0.08), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(184, 39, 39, 0.035), transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(58, 90, 138, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Grain overlay */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* The rotation is combined with translateZ to keep the layer promotion */
/* Vier FESTE Spuren-Slots: neben dem Hero (sofort sichtbar beim
   Oeffnen), Seitenmitte, im Ticket-Bereich, und rechts neben dem
   Regeln-Korkbrett (Slot 3 lebt als Kind der .rules-section, damit
   er unabhaengig von Layout-Verschiebungen daran klebt; er haengt
   halb ueber den Seitenrand hinaus — overflow-x: clip auf dem Body
   schneidet ihn sauber ab, wie ein Fleck, der ueber die Blattkante
   laeuft). Das MOTIV je Slot setzt js/26-papier-spuren.js zufaellig
   (src + as-*-Klasse); die Positionen sind immer dieselben. */
.trace-slot {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  height: auto;
  mix-blend-mode: multiply;
}
/* Insets bewusst in Viewport-Prozent statt festen Pixeln: Die Spuren
   sollen MITTIG in der leeren Flaeche zwischen Inhalt und Seitenrand
   sitzen, nicht an die Kante gequetscht (mit right: 30px klebte z.B.
   der Bueroklammer-Geist am Viewport-Rand, waehrend links davon viel
   Leerflaeche war). Prozente wachsen mit dem Monitor mit; auf
   schmaleren Desktops rutschen die Spuren ggf. leicht unter den
   Inhalt — unkritisch, sie liegen auf z-index 1 UNTER allem
   (Sektionen haben z-index 5) und wirken dann wie hervorlugende
   Flecken. */
.trace-slot.slot-1 { top: 330px; right: 12%; transform: rotate(-8deg); }
.trace-slot.slot-2 { top: 2600px; left: 10%; transform: rotate(14deg); }
/* Slot 3: left-Verankerung + transform-origin: left center! Ohne den
   Origin dreht die Rotation das Motiv um seine Mitte und schwenkt
   die linke Kante je nach Motivgroesse bis zu ~40px nach links —
   breite Motive ragten so doch wieder aufs Korkbrett. Mit Origin an
   der linken Kante bleibt diese exakt am Anker (18px vor dem
   Sektionsrand, das Brett liegt 32px innen) und die Drehung
   schwenkt nur nach rechts ueber die Blattkante hinaus. */
.trace-slot.slot-3 { top: 44%; left: calc(100% - 18px); transform: rotate(-19deg); transform-origin: left center; }
.trace-slot.slot-4 { top: 3650px; right: 11%; transform: rotate(23deg); }
/* Motiv-Eigenschaften (Groesse/Deckkraft je Asset — die Spuren sind
   unterschiedlich grossflaechig und unterschiedlich dicht) */
.trace-slot.as-kaffeefleck    { width: 170px; opacity: 0.55; }
.trace-slot.as-fingerabdruck  { width: 84px;  opacity: 0.6; }
.trace-slot.as-stockflecke    { width: 250px; opacity: 0.85; }
.trace-slot.as-tinte          { width: 150px; opacity: 0.85; }
.trace-slot.as-klebstoff      { width: 215px; opacity: 0.95; }
.trace-slot.as-rostgeist      { width: 68px;  opacity: 0.8; }

/* Sichtbarkeitssteuerung: standardmaessig versteckt, JS setzt
   .trace-on sobald Motiv + src gesetzt sind. Ohne JS: keine
   Spuren — verschmerzbar. */
.bg-trace { display: none; }
.bg-trace.trace-on { display: block; }
/* Handy UND Tablet: komplett aus. Auf <=1024px werden die Seiten-
   raender so schmal, dass die Spuren unter den Inhalt rutschen und
   wie Schmutz AUF den Karten wirken statt daneben. !important, damit
   .trace-on das nicht wieder aufmacht. */
@media (max-width: 1024px) {
  .bg-trace { display: none !important; }
}

main, header, section, footer { position: relative; z-index: 5; }

/* --- Typography --- */
h1, h2, h3 { font-weight: 400; letter-spacing: -0.01em; }

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
}
.section-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
}
.section-sub {
  margin-top: 0.5rem;
  color: var(--ink-faint);
  font-size: 0.9rem;
  font-style: italic;
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Fully opaque background instead of backdrop-filter blur — the
     header is always on-screen and the blur was being computed every
     paint frame. Visual difference is minimal because the gradient
     was already 90% opaque at the bottom. */
  background: linear-gradient(to bottom, var(--paper) 60%, var(--paper) 100%);
}
/* Scroll-Offset für Anker-Navigation: weil der Header sticky ist,
   verdecken die obersten ~92px jede angesprungene Section sonst.
   scroll-margin-top schiebt den Scroll-Stop um diese Höhe nach unten,
   sodass die Section-Header sichtbar bleiben statt unter dem Header
   zu verschwinden. */
section[id] {
  scroll-margin-top: 92px;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.header-rule {
  height: 3px;
  background:
    linear-gradient(to right, transparent, var(--ink) 3%, var(--ink) 97%, transparent),
    linear-gradient(to right, transparent, var(--ink-soft) 5%, var(--ink-soft) 95%, transparent);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 3px;
  background-repeat: no-repeat;
}
.monogram {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
}
.monogram-letters {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  letter-spacing: 1px;
  font-weight: 400;
  transition: transform 0.35s ease;
}
.monogram:hover .monogram-letters { transform: rotate(-8deg); }
.monogram-name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.monogram-name strong { font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; }
.monogram-name span { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-faint); letter-spacing: 0.2em; margin-top: 2px; }

.site-nav {
  display: flex;
  gap: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.2s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stamp-red);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--stamp-red);
  border-radius: 2px;
}
.pulse {
  width: 7px;
  height: 7px;
  background: var(--stamp-red);
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(184, 39, 39, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 8px rgba(184, 39, 39, 0); }
}

/* Paused state — when no hunt is currently active. Kills the pulse animation
   and switches to a muted grey so the page doesn't claim "live" when it isn't. */
.live-badge.paused {
  color: var(--ink-faint, #746c5f);
  border-color: var(--ink-faint, #746c5f);
}
.live-badge.paused .pulse {
  background: var(--ink-faint, #746c5f);
  animation: none;
  opacity: 0.7;
  box-shadow: none;
}

/* --- Hero --- */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 2rem 2rem;
  position: relative;
  min-height: 75vh;
}
.hero-meta-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 3rem;
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 580px;
  gap: 2.5rem;
  align-items: start;
}
.hero-content {
  min-width: 0;
}

/* Wrapper keeps grid placement tidy and lets GSAP animate the whole teaser block */
.hero-teaser-wrap {
  position: relative;
  width: 580px;
  margin-top: 0;
  justify-self: start;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  position: relative;
}
.hero-title-line {
  display: block;
  overflow: hidden;
}
.hero-title-line span {
  display: inline-block;
}

.hero-tagline {
  max-width: 550px;
  font-family: var(--font-type);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.hero-countdown {
  display: inline-flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem 2.25rem;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 3rem;
  position: relative;
}
.hero-countdown::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px;
  width: 24px; height: 24px;
  border-left: 3px solid var(--ink);
  border-top: 3px solid var(--ink);
}
.hero-countdown::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 24px; height: 24px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

/* "Jagd läuft"-Hervorhebung. Wird per JS via .is-live gesetzt, sobald
   der Hunt-State aktiv ist. Im Idle-Zustand bleibt die Box neutral
   (alle .is-live-Regeln greifen nicht), ohne dass Standard-Werte
   redundant wiederholt werden müssen. */
.hero-countdown.is-live {
  border-color: var(--stamp-red);
}
.hero-countdown.is-live::before {
  border-left-color: var(--stamp-red);
  border-top-color: var(--stamp-red);
}
.hero-countdown.is-live::after {
  border-right-color: var(--stamp-red);
  border-bottom-color: var(--stamp-red);
}
/* Pulsing roter Punkt oben rechts in der Box. Im Default unsichtbar
   (display:none), wird nur bei .is-live eingeblendet. Ähnlich dem
   alten live-badge, aber direkt mit dem Countdown verbunden. */
.hero-countdown-pulse {
  display: none;
  position: absolute;
  top: 12px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--stamp-red);
}
.hero-countdown.is-live .hero-countdown-pulse {
  display: block;
  animation: hero-countdown-pulse-anim 1.6s ease-out infinite;
}
@keyframes hero-countdown-pulse-anim {
  0%   { box-shadow: 0 0 0 0 rgba(184, 39, 39, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(184, 39, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 39, 39, 0); }
}
.hero-countdown-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
  text-align: center;
}
.countdown-display {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}
.cd-num {
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cd-unit-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 4px;
}
.cd-sep {
  font-size: 2.5rem;
  color: var(--ink-faint);
  transform: translateY(-8px);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 500px;
  padding-top: 1.5rem;
}
/* Decorative ornament above the hero stats — looks like a dotted rule
   but the symbol pattern carries a message for those who look closely. */
.hero-rule {
  display: block;
  width: 100%;
  max-width: 500px;
  height: 6px;
  margin: 0.5rem 0 0;
  color: var(--line-strong);
  opacity: 0.5;
}
.hero-rule rect,
.hero-rule circle {
  fill: currentColor;
}
.stat {
  display: flex;
  flex-direction: column;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 4px;
}

/* -------- Hero teaser dossier (right column) -------- */
.hero-teaser {
  position: relative;
  width: 580px;
  padding: 2.2rem 2rem 1.5rem;
  /* Dedizierte Hero-Mappen-Illustration (assets/hero-akte.webp,
     charaktervoller als die kleinen akte-mappe-* — Eselsohr oben
     rechts, doppelte Falzrille links), auf denselben Manila-Ton
     farbnormalisiert. KEINE background-color darunter (Saum-Falle,
     siehe Notizzettel). Das fruehere Diagonal-Linienmuster
     (::after) ist ersatzlos raus — Papierstruktur kommt jetzt aus
     der Illustration. */
  background: url("/assets/hero-akte.webp") center / 100% 100% no-repeat;
  /* KEIN border und KEINE box-shadows: Die Illustration endet durch
     ihre unregelmaessigen Papierkanten ein paar Pixel INNERHALB des
     rechteckigen Elements — Rahmenlinie und rechteckige Schatten
     zeichnen dann einen sichtbaren Saum um die Mappe (zweite
     Auflage des Notizzettel-Bugs, diesmal via border statt
     background-color). drop-shadow folgt stattdessen der echten
     Silhouette der Illustration. */
  border: none;
  /* CHROMIUM-WORKAROUND: drop-shadow auf grossen Elementen erzeugt in
     Chromium Kompositing-Artefakte (Pixel-Fragmente ueber der Seite),
     sobald benachbarte Inhalte repainten (Countdown-Tick, GSAP).
     Firefox ist nicht betroffen. Gegenmittel: (1) nur EIN drop-shadow
     statt zwei gestapelter (Stapelung ist der Haupt-Trigger), (2) das
     Element per translateZ(0) + will-change auf eine eigene GPU-Ebene
     zwingen, damit der Filter gecacht komponiert statt neu gerechnet
     wird — gleiches Rezept wie frueher bei den feTurbulence-Ringen. */
  transform: rotate(0deg) translateZ(0);
  will-change: filter;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.2));
  z-index: 2;
}

.hero-teaser-tab {
  position: absolute;
  top: -14px;
  left: 28px;
  padding: 4px 14px 6px;
  background:
    linear-gradient(to bottom, #dfc48a 0%, var(--manila) 100%);
  border: 1px solid var(--manila-dark);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, 0.35);
  z-index: 3;
}

.hero-teaser-clip {
  position: absolute;
  /* Die Klammer hält das Foto AN DER AKTE fest: Der Bogen greift über
     die Oberkante des Akten-Deckels (Teaser-Oberkante = 0), die
     vordere Schlaufe läuft über den Aktenrand hinweg und reicht bis
     auf das Foto (Fotokante bei ~45px). Die "Papierkante" liegt im
     Bild bei ~15% der Höhe — bei 74px Breite (≙ ~109px Höhe) ergibt
     top:-16px genau diese Geometrie, die Schlaufe überlappt das Foto
     dann um ~48px. */
  top: -16px;
  left: 55%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 5;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}
.hero-teaser-clip img {
  display: block;
  /* Asset ist eng auf den Draht beschnitten (kein Schatten-Halo mehr),
     Papierkante im Bild bei ~14% der Höhe: 40px Breite ≙ ~112px Höhe,
     mit top:-16px liegt die Kante auf der Aktenkante, die Schlaufe
     überlappt das Foto um ~50px. Drahtdicke ≈ 9% der Breite. */
  width: 40px;
  height: auto;
}

.hero-teaser-photo {
  position: relative;
  background: #f4ecd6;
  border: 12px solid #f4ecd6;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  transform: rotate(0.5deg);
  margin: 0.6rem 0 1.5rem;
  z-index: 2;
}
.hero-teaser-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.92) sepia(0.08);
}
.hero-teaser-photo::after {
  content: "";
  position: absolute;
  inset: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 30% 30%, transparent 40%, rgba(26, 22, 19, 0.12) 100%);
  pointer-events: none;
}

.hero-teaser-stamp {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-9deg);
  font-family: var(--font-display);
  color: var(--stamp-red);
  border: 4px double var(--stamp-red);
  padding: 0.6rem 1.4rem;
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
  pointer-events: none;
  background: rgba(244, 236, 214, 0.35);
  text-shadow: 0 0 2px rgba(244, 236, 214, 0.7);
  z-index: 3;
  white-space: nowrap;
}
.hero-teaser-stamp::before,
.hero-teaser-stamp::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  height: 1px;
  background: var(--stamp-red);
  opacity: 0.55;
}
.hero-teaser-stamp::before { top: 5px; }
.hero-teaser-stamp::after { bottom: 5px; }

.hero-teaser-meta {
  position: relative;
  z-index: 2;
  margin-bottom: 1.1rem;
}
.hero-teaser-case-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--manila-deep);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.hero-teaser-note {
  font-family: var(--font-type);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.45;
}

.hero-teaser-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--manila-deep);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--manila-deep);
  text-transform: uppercase;
}

/* --- Current clue section --- */
.current-clue-section {
  max-width: 1280px;
  margin: 6rem auto 0;
  padding: 0 2rem;
}

