/* ==========================================================================
   Oliver macht Sport -- Basis-Stylesheet
   Design-Tokens uebernommen von der Live-WordPress-Seite (Freestyle-Theme):
   Akzent #fe4f00 auf #111111, Fjalla One (Headlines) + Montserrat (Fliesstext).
   ========================================================================== */

@font-face {
  font-family: "Fjalla One";
  src: url("/assets/fonts/fjalla-one/FjallaOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat/Montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat/Montserrat-700italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Hauptseite ist HELL (weiss/dunkler Text), nur der Footer ist dunkel --
     siehe .site-footer weiter unten, das diese Tokens lokal auf die dunklen
     Werte umbiegt. Urspruenglich hatte ich hier faelschlich das ganze Theme
     dunkel angelegt (die Live-Seite ist nur im Footer dunkel). */
  --color-bg: #ffffff;
  --color-bg-raised: #f7f7f7;
  --color-bg-inset: #f0f0f0;
  --color-border: #e5e5e5;
  --color-text: #1a1a1a;
  --color-text-muted: #767676;
  --color-accent: #fe4f00;
  --color-accent-contrast: #ffffff;
  /* Dunkler Charcoal-Ton fuer Nav-im-Scroll-Zustand + Submenues (heller als
     der Footer, so wie auf der Live-Seite gemessen: rgb(48,48,48)) */
  --color-charcoal: #303030;
  --color-on-charcoal: #f2f2f2;
  --side-menu-width: min(360px, 90vw);
  /* Header-Zeilenhoehe (2x Padding + 40px Logo + 1px Border) -- aus
     denselben Tokens berechnet statt einer freistehenden Magic Number,
     damit eine kuenftige Aenderung an der Header-Groesse automatisch
     mitzieht. Wird sowohl vom .about-hero-Negativ-Margin als auch vom
     Such-Overlay (css/search.css) verwendet. */
  --site-header-height: calc(var(--space-2) * 2 + 40px + 1px);

  --font-headline: "Fjalla One", "Arial Narrow", sans-serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

  --content-max-width: 1140px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) var(--color-charcoal);
}

/* Webkit-Pendant zu scrollbar-width/-color oben (Safari < 18.2, aeltere
   Chromium-Versionen kennen nur die -webkit-Pseudo-Elemente). */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-charcoal);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-accent);
  border-radius: 5px;
  border: 2px solid var(--color-charcoal);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* .page-wrap schiebt sich beim offenen Seitenmenue per transform nach
     links raus -- ohne das haette der ungenutzte Streifen rechts einen
     horizontalen Scrollbalken erzeugt. */
  overflow-x: hidden;
  /* Lange Woerter (Impressum/Datenschutz-Fachbegriffe, Challenge-Texte)
     sollen umbrechen statt auf schmalen Screens ueber den rechten Rand
     hinauszulaufen -- ohne das faellt der rechte Container-Rand durch
     overflow-x:hidden optisch weg, obwohl das Padding korrekt gesetzt ist. */
  overflow-wrap: break-word;
}

/* Schiebt die komplette Seite (Header/Main/Footer) nach links, waehrend
   das Fly-in-Panel von rechts hereinfaehrt -- die Seite bleibt dabei aktiv
   bedienbar (kein dimmendes Overlay), siehe .side-menu weiter unten. */
.page-wrap {
  transition: transform 0.4s ease;
}

.page-wrap.is-shifted {
  transform: translateX(calc(-1 * var(--side-menu-width)));
}

img,
video {
  max-width: 100%;
  display: block;
}

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

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* --------------------------------------------------------------------
   Header / Navigation
   -------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Beim Scrollen wird die Nav dunkel (wie der Footer/die Submenues) --
   analog zum "edgtf-sticky-nav"-Zustand des Originals (dort gemessen:
   rgb(48,48,48) Hintergrund, weisse Schrift). Wird per JS (main.js) auf
   .site-header umgeschaltet. */
.site-header.is-scrolled {
  background: var(--color-charcoal);
  border-bottom-color: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-logo {
  display: inline-flex;
  /* Logo ist ein in sich farbiges Icon auf transparentem Grund -- braucht
     anders als der fruehere Text-Platzhalter keine eigene Farbvariante fuer
     den dunklen is-scrolled-Zustand. */
}

.site-logo img {
  display: block;
}

.site-logo:hover {
  opacity: 0.8;
  text-decoration: none;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

/* Ab Tablet+ (Desktop-Dropdown-Verhalten des Submenues): Nav-Zeile auf
   Logo-Hoehe strecken, damit die Nav-Eintraege luecken los bis zur
   unteren Header-Kante reichen. ">" statt Nachfahren-Selektor, sonst
   trifft die Regel auch das verschachtelte .submenu-<ul> und quetscht
   dessen Hoehe auf 40px zusammen. Auf Mobil (siehe media.css) bleibt die
   Nav eine normale vertikale Liste, ungestreckt. */
@media (min-width: 768px) {
  .main-nav > ul {
    align-items: stretch;
    height: 40px;
  }

  .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

/* Normalzustand (helle Nav): Charcoal, im gescrollten/dunklen Zustand auf
   Weiss umgeschaltet, damit es auf dem dunklen Hintergrund lesbar bleibt.
   Der aktive Eintrag (geladene Seite, siehe .is-active/inc/header.php)
   ist in beiden Zustaenden Standard-Orange -- dient als Indikator, welche
   Seite gerade geladen ist. */
.main-nav a {
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header.is-scrolled .main-nav a {
  color: var(--color-on-charcoal);
}

.main-nav a.is-active,
.site-header.is-scrolled .main-nav a.is-active {
  color: var(--color-accent);
}

.main-nav a:hover {
  text-decoration: none;
}

.main-nav .has-submenu {
  position: relative;
}

@media (min-width: 768px) {
  /* Unsichtbare Hover-Bruecke als Pseudo-Element statt Padding auf den Link
     -- Padding+height:100% wuerde bei box-sizing:border-box den Textbereich
     nur zusammenstauchen (Text rutscht nach oben) statt die Box wirklich zu
     verlaengern. Das ::after schliesst stattdessen exakt die Luecke
     zwischen Nav-Zeile und Submenu (= Header-Padding-Bottom + Border-
     Breite, siehe .submenu top-Offset unten), sodass der :hover-Zustand
     auf .has-submenu beim Runterbewegen der Maus nicht abreisst. */
  .main-nav .has-submenu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(var(--space-2) + 1px);
  }
}

/* Submenue-Optik uebernimmt bewusst den dunklen Look des Originals
   (dort: dunkle Box, weisser Text, oranger Top-Rand), unabhaengig davon
   ob die Hauptnav gerade hell oder dunkel ist. */
.main-nav .submenu {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-charcoal);
  border: none;
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  display: none;
}

@media (min-width: 768px) {
  .main-nav .submenu {
    /* Buendig mit der unteren Header-Kante (Header-Padding-Bottom + Border-
       Breite), nicht direkt unter dem Nav-Eintrag -- wie im Original. */
    top: calc(100% + var(--space-2) + 1px);
  }
}

.main-nav .has-submenu:hover .submenu,
.main-nav .has-submenu:focus-within .submenu {
  display: block;
}

.main-nav .submenu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  color: var(--color-on-charcoal);
}

/* Minimal hellgrauer Hintergrund fuer den Eintrag unter dem Mauszeiger --
   dezentes Aufhellen des dunklen Grunds statt einer eigenen Graustufe,
   bleibt so unabhaengig vom exakten Charcoal-Ton konsistent. */
.main-nav .submenu a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.main-nav .submenu a.is-active {
  color: var(--color-accent);
}

.nav-toggle {
  display: none;
}

/* Hamburger-Icon fuer das rechts einfliegende Seitenmenue (Logo/Mission-
   Text/Social-Links) -- auf allen Breakpoints sichtbar, unabhaengig vom
   mobilen Nav-Collapse oben. */
.side-menu-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-accent);
  flex-shrink: 0;
}

.site-header.is-scrolled .side-menu-toggle,
.site-header.is-scrolled .site-search__opener {
  color: var(--color-on-charcoal);
}

.side-menu-toggle__bars,
.side-menu-toggle__bars::before,
.side-menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.side-menu-toggle__bars::before {
  transform: translate(-50%, -50%) translateY(-7px);
}

.side-menu-toggle__bars::after {
  transform: translate(-50%, -50%) translateY(7px);
}

/* --------------------------------------------------------------------
   Fly-in-Seitenmenue
   -------------------------------------------------------------------- */

.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--side-menu-width);
  background: #111111;
  color: #f2f2f2;
  padding: 88px var(--space-4) var(--space-4);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  z-index: 300;
  overflow-y: auto;
}

.side-menu.is-open {
  transform: translateX(0);
}

.side-menu__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  color: #f2f2f2;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.side-menu__tagline {
  font-size: 15px;
  line-height: 1.7;
  color: #d8d8d8;
  margin-bottom: var(--space-4);
}

.side-menu__follow-title {
  font-family: var(--font-headline);
  font-size: 16px;
  color: #f2f2f2;
  margin-bottom: var(--space-2);
}

.side-menu__social {
  display: flex;
  gap: var(--space-3);
}

.side-menu__social a {
  color: #f2f2f2;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.side-menu__social a:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------
   Startseite -- bewusst sehr reduziert, wie im Original: randlose
   Vollbild-Bloecke, kein .container/max-width. Aktuell nur die eine
   Challenge, fuer die wir schon Assets haben; sobald mehr Challenges
   existieren, wird das eine Liste von .home-feature-Sections (siehe
   [[project-build-sequencing]]-Memory zum geplanten PHP-Aggregator).
   -------------------------------------------------------------------- */

.home-feature {
  position: relative;
}

.home-feature__link {
  display: block;
  position: relative;
  overflow: hidden;
  color: var(--color-accent-contrast);
}

.home-feature__link:hover {
  text-decoration: none;
}

/* Ueberdimensioniert (130% Hoehe, mittig ueberstehend) + per JS (js/parallax.js)
   vertikal verschoben -- das "Hintergrund hinkt beim Scrollen hinterher"
   des Originals, dort per CSS background-position gebaut, hier per
   transform, weil wir <picture>/<img> statt background-image nutzen
   (fuer responsive srcset). Der Ueberstand ist der Spielraum, in dem sich
   das Bild verschieben kann, ohne dass Raender sichtbar werden. */
.home-feature__bg {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  z-index: 0;
  will-change: transform;
}

/* Halbtransparenter Farb-Overlay -- die Farbe (rot/grau) haengt NICHT am
   Bild, sondern rein an der Position in der (spaeter nach Datum sortierten)
   Liste der .home-feature-Sections, siehe :nth-of-type unten. Damit macht
   ein Terminwechsel (= andere Sortierposition) nie ein Bild-Update noetig. */
.home-feature__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-accent);
  opacity: 0.58;
}

.home-feature:nth-of-type(even) .home-feature__tint {
  background: #3c3c3c;
}

.home-feature__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 11% var(--space-3);
}

.home-feature__category {
  display: block;
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-2);
}

.home-feature__title {
  color: var(--color-accent-contrast);
  font-size: clamp(28px, 6vw, 64px);
  margin: 0 0 var(--space-2);
  transition: color 0.2s ease;
}

.home-feature__date {
  font-size: 15px;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
}

.home-feature__cta {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Normalzustand haengt wie die Tint-Farbe rein an der Listenposition
   (ungerade = rotes Overlay, gerade = graues Overlay), siehe .home-feature__tint
   oben. Hover-Umkehrung nur auf Geraeten mit echter Maus (siehe Media Query
   unten) -- auf Touch/Mobil bleibt es bei diesen Normalzustand-Farben. */
.home-feature:nth-of-type(odd) .home-feature__cta {
  background: var(--color-accent-contrast);
  color: var(--color-charcoal);
}

.home-feature:nth-of-type(even) .home-feature__cta {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

@media (hover: hover) and (pointer: fine) {
  .home-feature:nth-of-type(odd) .home-feature__link:hover .home-feature__title {
    color: var(--color-charcoal);
  }

  .home-feature:nth-of-type(odd) .home-feature__link:hover .home-feature__cta {
    background: var(--color-charcoal);
    color: var(--color-accent-contrast);
  }

  .home-feature:nth-of-type(even) .home-feature__link:hover .home-feature__title {
    color: var(--color-accent);
  }

  .home-feature:nth-of-type(even) .home-feature__link:hover .home-feature__cta {
    background: var(--color-accent-contrast);
    color: var(--color-accent);
  }
}

.home-cta-row {
  display: grid;
  grid-template-columns: 1fr;
}

.home-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 90px var(--space-3);
  font-family: var(--font-headline);
  font-size: 26px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  transition: opacity 0.2s ease;
}

.home-cta:hover {
  opacity: 0.85;
  text-decoration: none;
  color: #ffffff;
}

.home-cta--accent {
  background: var(--color-accent);
}

.home-cta--dark {
  background: #393939;
}

.home-cta__arrow {
  font-size: 26px;
}

/* --------------------------------------------------------------------
   Challenge hero banner
   -------------------------------------------------------------------- */

.challenge-hero {
  position: relative;
  /* Feste Hoehe statt Seitenverhaeltnis -- entspricht dem Original (dort
     CSS-Klasse "edgtf-title-image-not-responsive", height:500px auf allen
     Breakpoints, object-fit:cover schneidet die Seiten). Vorher proportional
     zur Breite skaliert, wirkte dadurch deutlich kleiner als im Original. */
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--color-bg-raised);
}

.challenge-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.challenge-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.challenge-hero__subtitle {
  display: block;
  color: var(--color-accent-contrast);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-1);
}

.challenge-hero__title {
  color: var(--color-accent-contrast);
  font-size: clamp(28px, 5vw, 56px);
  margin: 0;
}

/* --------------------------------------------------------------------
   Abgeschlossene Challenge -- ersetzt bei bereits versuchten/beendeten
   Challenges den Vollbild-Hero+Countdown (siehe
   challenges/burn-10000-kcal-in-24-hrs.php als erstes Beispiel): ein
   Ergebnis-Balken (Datum + geschafft/nicht geschafft) direkt ueber der
   normalen .challenge-top-Ueberschrift, das Beweisvideo wandert an die
   Bild-Stelle in .challenge-main (wiederverwendet .blog-hero).
   -------------------------------------------------------------------- */

.challenge-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.challenge-result__date {
  font-size: 14px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.challenge-result__status {
  font-family: var(--font-headline);
  font-size: clamp(22px, 4vw, 32px);
  text-transform: uppercase;
}

.challenge-result__status--success {
  color: var(--color-accent);
}

.challenge-result__status--failed {
  color: var(--color-text);
}

/* --------------------------------------------------------------------
   Challenge body layout
   -------------------------------------------------------------------- */

.challenge-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
  flex-wrap: wrap;
}

.challenge-top h2 {
  font-size: 22px;
  margin: 0;
}

.challenge-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.challenge-countdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-1);
  margin-bottom: var(--space-4);
}

/* Feste min-width statt Grid-1fr: 1fr haette die 5 Spalten ueber die volle
   Container-Breite gestreckt (auf Desktop entstehen dadurch riesige
   Zahl-Abstaende). Mit min-width bleibt jede Box nur so breit wie das
   laengste Label ("Minutes"/"Seconds") braucht -- alle 5 Boxen werden
   dadurch trotzdem gleich breit (keine ist schmaler als min-width), aber
   das Widget bleibt insgesamt kompakt statt ueber die ganze Seite zu
   ziehen. Werte an die Label-Groesse der jeweiligen Breakpoint-Version
   unten angepasst. */
.challenge-countdown__unit {
  min-width: 50px;
  text-align: center;
}

.challenge-countdown__value {
  font-family: var(--font-headline);
  font-size: 24px;
  color: var(--color-accent);
  display: block;
}

.challenge-countdown__label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Unter 768px (siehe Nav-Breakpoint oben) ist die kompakte Variante direkt
   im Basis-Stil hinterlegt, weil sonst 5 Einheiten inkl. 24px-Gap auf
   schmalen Phones (<= 412px CSS-Breite, z.B. Galaxy A32/S8) nicht in eine
   Zeile passen -- "Sekunden" rutscht dann alleine in Zeile 2 und der
   Zeilenumbruch-Gap wirkt neben dem Spalten-Gap wie ein groesserer Abstand.
   Ab Tablet+ ist genug Platz fuer die urspruengliche, groesszuegigere
   Groesse. */
@media (min-width: 768px) {
  .challenge-countdown {
    gap: var(--space-3);
  }

  .challenge-countdown__unit {
    min-width: 64px;
  }

  .challenge-countdown__value {
    font-size: 32px;
  }

  .challenge-countdown__label {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}

.challenge-copy h3 {
  font-size: 20px;
  color: var(--color-accent);
  text-wrap: balance;
}

.challenge-copy p {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  text-wrap: pretty;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-chars: 10 3 4;
  hyphenate-limit-chars: 10 3 4;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-lines: 2;
}

.challenge-copy p:last-of-type {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------
   About-Seite -- Hero (angelehnt an .challenge-hero, aber hoeher und mit
   Chaffle-Scramble-Headline statt der Revolution-Slider-Wort-Flug-Animation
   des Originals, siehe js/chaffle.js [data-chaffle-onload]).
   -------------------------------------------------------------------- */

.about-hero {
  position: relative;
  height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--color-charcoal);
  /* Zieht den Hero unter den Header (siehe body.page-about .site-header
     Transparenz-Override unten) -- der negative Margin entspricht exakt der
     Header-Zeilenhoehe, siehe --site-header-height. */
  margin-top: calc(-1 * var(--site-header-height));
}

/* Transparente Nav am Seitenanfang der About-Seite, weil der Hero (siehe
   negativer Margin oben) bis unter den Header reicht -- sobald gescrollt
   wird, uebernimmt wie ueberall sonst der normale dunkle .is-scrolled-
   Zustand (siehe main.js), das hier nicht extra behandelt werden muss.
   Textfarben spiegeln bewusst die is-scrolled-Werte, damit die Nav auch
   ueber dem dunklen Foto lesbar bleibt (Charcoal-Text waere dort unlesbar).
   Gilt auch fuer body.page-blog-list -- die Blog-Uebersichtsseite nutzt
   dieselbe .about-hero-Komponente 1:1 (nur anderes Foto/Text), siehe
   blog.php. */
body.page-about .site-header:not(.is-scrolled),
body.page-blog-list .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

body.page-about .site-header:not(.is-scrolled) .main-nav a,
body.page-blog-list .site-header:not(.is-scrolled) .main-nav a {
  color: var(--color-on-charcoal);
}

body.page-about .site-header:not(.is-scrolled) .main-nav a.is-active,
body.page-blog-list .site-header:not(.is-scrolled) .main-nav a.is-active {
  color: var(--color-accent);
}

body.page-about .site-header:not(.is-scrolled) .side-menu-toggle,
body.page-about .site-header:not(.is-scrolled) .nav-toggle,
body.page-about .site-header:not(.is-scrolled) .site-search__opener,
body.page-blog-list .site-header:not(.is-scrolled) .side-menu-toggle,
body.page-blog-list .site-header:not(.is-scrolled) .nav-toggle,
body.page-blog-list .site-header:not(.is-scrolled) .site-search__opener {
  color: var(--color-on-charcoal);
  border-color: rgba(255, 255, 255, 0.3);
}

.about-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dezentes Abdunkeln fuers Kontrast der weissen Headline gegen die hellen
   Himmelspartien des Fotos -- das Original braucht das nicht (Slider-Text
   hat eigene Schatten/Outline), unser schlichterer Text schon. */
.about-hero__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.22);
}

.about-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* min-width:0 noetig, weil .about-hero__content ein Flex-Item von
     .about-hero ist -- Flex-Items schrumpfen per Default nicht unter ihre
     Content-Mindestbreite (laengstes umbruchfreies "Wort" der Ueberschrift
     bei grosser Schrift), sonst wird der ganze .about-hero-Container auf
     Mobil breiter als der Viewport gedrueckt und reisst die komplette
     restliche Seite mit in den horizontalen Overflow. */
  min-width: 0;
  text-align: center;
}

.about-hero__title {
  color: var(--color-accent-contrast);
  font-size: clamp(32px, 6vw, 72px);
  margin: 0 0 var(--space-2);
}

.about-hero__subtitle {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: 0.05em;
  margin: 0;
}

.about-hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  animation: about-hero-scroll-bounce 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__scroll {
    animation: none;
  }
}

@keyframes about-hero-scroll-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

/* --------------------------------------------------------------------
   About-Seite -- "Ready for the challenge?" + About/Video
   -------------------------------------------------------------------- */

.about-cta {
  text-align: center;
  padding: var(--space-5) 0 var(--space-3);
}

.about-cta__title {
  color: var(--color-accent);
  font-size: clamp(32px, 6vw, 64px);
  margin: 0 0 var(--space-2);
}

.about-cta__subtitle {
  font-family: var(--font-headline);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.about-video {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0 var(--space-5);
}

.about-video__label {
  display: inline-block;
  position: relative;
  padding-left: var(--space-3);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.about-video__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--space-2);
  height: 2px;
  background: var(--color-accent);
}

.about-video__text p {
  margin: 0 0 var(--space-2);
}

.about-video__player video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

/* --------------------------------------------------------------------
   Rechtliche Seiten (Imprint / Data Privacy)
   -------------------------------------------------------------------- */

.legal-page {
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
  max-width: 780px;
}

.legal-page__title {
  margin-bottom: var(--space-3);
}

.legal-copy h2 {
  font-size: 24px;
  margin-top: var(--space-4);
}

.legal-copy h2:first-child {
  margin-top: 0;
}

.legal-copy h3 {
  font-size: 18px;
  color: var(--color-accent);
  margin-top: var(--space-3);
}

.legal-copy p {
  margin: 0 0 var(--space-2);
}

/* Scroll-Reveal fuer Aufzaehlungen (siehe js/scroll-reveal.js) -- Nachbau
   der Live-Seite: Listenpunkte starten unsichtbar/leicht versetzt und faden
   gemeinsam ein, sobald die Liste ins Blickfeld scrollt (kein Stagger pro
   Punkt im Original, nur ein einziger 0.4s-Uebergang fuer die ganze Liste). */
.animate-list ul {
  list-style: disc;
  margin: var(--space-2) 0;
  padding: 0 0 0 21px;
}

.animate-list li {
  position: relative;
  margin-bottom: 6px;
  opacity: 0;
  top: -40px;
  transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out;
}

.animate-list.is-visible li {
  opacity: 1;
  top: 0;
}

/* Nativer ::marker statt eigenem ::before-Pseudoelement: der Browser
   zentriert den Punkt von sich aus zur ersten Zeile -- unabhaengig davon,
   ob der Listenpunkt ein- oder mehrzeilig ist -- ohne die Glyphen-Metrik-
   Ungenauigkeiten, die vertical-align bei einem Text-Bullet ("\25CF") hatte. */
.animate-list li::marker {
  color: var(--color-accent);
}

.challenge-info {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  padding: var(--space-3);
  align-self: start;
}

.challenge-info h5 {
  font-size: 14px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-1);
}

.challenge-info__item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: 13px;
  border-bottom: 1px dotted var(--color-border);
}

.challenge-info__item:last-child {
  border-bottom: none;
}

.challenge-info__item-title {
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.challenge-info__item-desc {
  color: var(--color-text);
  font-weight: 700;
  text-align: right;
}

.challenge-info__item-desc a {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------
   Related challenges
   -------------------------------------------------------------------- */

.related-challenges {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.related-challenges h3 {
  font-size: 20px;
}

.related-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.related-card {
  display: block;
  color: inherit;
  border: 1px solid var(--color-border);
  width: 100%;
  max-width: 340px;
}

.related-card:hover {
  text-decoration: none;
}

.related-card__media {
  aspect-ratio: 4 / 3;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--color-bg-raised);
  border-bottom: 2px solid var(--color-accent);
}

.related-card__body {
  padding: var(--space-2);
}

.related-card__category {
  color: var(--color-accent);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.related-card__title {
  font-size: 16px;
  margin: var(--space-1) 0;
}

.related-card__date {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* --------------------------------------------------------------------
   Prev / next event nav
   -------------------------------------------------------------------- */

.challenge-pagenav {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------
   Comments (see inc/comments.php)
   -------------------------------------------------------------------- */

.comment-section {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.comment-section h3 {
  font-size: 20px;
}

.comment {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.comment__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.comment.child-comment {
  margin-left: var(--space-4);
}

.comment-name {
  font-weight: 700;
}

.comment-meta {
  color: var(--color-text-muted);
  font-size: 12px;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.btn-reply {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.comment-body {
  margin: var(--space-1) 0 0;
}

.comment-form {
  margin-top: var(--space-3);
}

.comment-form label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100%;
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
}

.comment-form textarea {
  resize: vertical;
  min-height: 120px;
}

.comment-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.comment-form .field-error {
  color: var(--color-accent);
  font-size: 12px;
}

.btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: var(--font-headline);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.btn:hover {
  background: #e04600;
  text-decoration: none;
}

/* honeypot field, hidden from real visitors, left visible to bots that
   ignore CSS/aria */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  background: var(--color-bg-raised);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 14px;
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */

.site-footer {
  /* Einzige dunkle Zone der Seite (wie im Original) -- biegt die
     gemeinsamen Tokens lokal auf dunkle Werte um, alle Footer-Regeln
     unten benutzen dieselben var(--color-*) und erben das automatisch. */
  --color-bg: #111111;
  --color-bg-raised: #1a1a1a;
  --color-bg-inset: #161616;
  --color-border: #2a2a2a;
  --color-text: #f2f2f2;
  --color-text-muted: #9b9b9b;

  border-top: 1px solid var(--color-border);
  padding: var(--space-5) 0 var(--space-3);
  background: var(--color-bg);
  color: var(--color-text);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.footer-tagline {
  font-size: 13px;
  color: var(--color-accent-contrast);
}

.footer-widget-title {
  font-size: 13px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-2);
}

.footer-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-widget li {
  margin-bottom: var(--space-1);
  font-size: 13px;
}

.footer-contact {
  font-size: 13px;
}

.footer-portrait {
  display: block;
  max-width: 240px;
  overflow: hidden;
}

.footer-portrait img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.2s ease;
}

.footer-portrait:hover img {
  opacity: 0.85;
}

/* --------------------------------------------------------------------
   Blog-Detailseite
   -------------------------------------------------------------------- */

.blog-hero {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-3);
  border-bottom: 3px solid var(--color-accent);
}

.blog-post-title {
  font-size: clamp(24px, 4vw, 34px);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

/* Datum/Kommentare/Likes-Zeile unter dem Artikeltext (siehe inc/blog-posts
   Meta-Konzept) -- bewusst OHNE "Category: ..."-Angabe, siehe Absprache mit
   Oliver (Vereinfachung gegenueber der Live-Seite). */
.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
}

.post-meta__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.post-meta__actions a {
  color: var(--color-text-muted);
}

.like-button-form {
  display: inline-block;
}

.like-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.like-button:hover:not(:disabled) {
  color: var(--color-accent);
}

.like-button:disabled {
  cursor: default;
}

.like-button__icon {
  font-size: 16px;
  color: var(--color-border);
}

.like-button:hover:not(:disabled) .like-button__icon,
.like-button.is-liked .like-button__icon {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------
   Sidebar-Boxen (About Me / Latest Posts) -- Boxen mit vollflaechigem
   Farbbalken als Titel, uebernommen vom Live-Theme. Categories/Tags/Social
   bewusst weggelassen (Vereinfachung).
   -------------------------------------------------------------------- */

.blog-sidebar {
  align-self: start;
}

.sidebar-box {
  border: 1px solid var(--color-border);
}

.sidebar-box + .sidebar-box {
  margin-top: var(--space-3);
}

.sidebar-box__header {
  margin: 0;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
}

.sidebar-box__body {
  padding: var(--space-3);
}

.about-me-box__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin-bottom: var(--space-2);
}

.about-me-box__bio {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

.sidebar-post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-post-card {
  display: flex;
  gap: var(--space-2);
  color: inherit;
}

.sidebar-post-card:hover {
  text-decoration: none;
}

.sidebar-post-card__media {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Karten-Bild fuer Zitat-Posts (kein Bild/Video im Beitrag, siehe
   blog/50km-marsch-ins-ungewisse.php) -- Platzhalter statt <img>. */
.sidebar-post-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-family: var(--font-headline);
  font-size: 28px;
}

.sidebar-post-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-post-card__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.sidebar-post-card:hover .sidebar-post-card__title {
  color: var(--color-accent);
}

.sidebar-post-card__date {
  font-size: 11px;
  color: var(--color-accent);
}

/* --------------------------------------------------------------------
   Blog-Post-Typ "Zitat" -- ersetzt Bild/Video am Seitenanfang durch eine
   grosse Zitat-Box; der Post-Titel wandert als kleine Caption mit hinein
   (siehe blog/50km-marsch-ins-ungewisse.php), es gibt hier bewusst KEIN
   zweites <h1> wie bei den Bild-/Video-Posts. Das Anfuehrungszeichen-Symbol
   ist ein normales Unicode-Zeichen (siehe &ldquo; unten) statt eines Icon-
   Assets -- passt zu den anderen Mini-Icons der Seite (Hamburger &#9776;,
   Schliessen &times;, Like-Herz &hearts;), die alle genauso geloest sind,
   kein Icon-Font/SVG im Projekt noetig.
   -------------------------------------------------------------------- */

.quote-box {
  border: 1px solid var(--color-accent);
  padding: var(--space-4) var(--space-3);
  margin-bottom: var(--space-3);
  text-align: center;
}

.quote-box__mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 90px;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: -10px;
}

.quote-box__text {
  margin: 0 0 var(--space-2);
}

.quote-box__text p {
  font-family: var(--font-headline);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.3;
  margin: 0;
}

.quote-box__title {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0;
  text-wrap: balance;
}

/* --------------------------------------------------------------------
   Prev/Next-Post-Links -- Inhalt fuer das bereits vorhandene
   .challenge-pagenav-Grundgeruest (siehe "Prev / next event nav" oben).
   -------------------------------------------------------------------- */

.pagenav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 45%;
  color: inherit;
}

.pagenav-link:hover {
  text-decoration: none;
}

.pagenav-link--next {
  text-align: right;
  margin-left: auto;
}

.pagenav-link__label {
  color: var(--color-accent);
}

.pagenav-link__title {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
}

.pagenav-link:hover .pagenav-link__title {
  color: var(--color-accent);
}

.footer-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* --------------------------------------------------------------------
   Blog-Uebersichtsseite (siehe blog.php) -- Kartenraster fuer alle drei
   Post-Typen (Bild/Video/Zitat), Bild-Post-Typen liefern heroImageBase,
   der Zitat-Typ nicht (siehe inc/blog-posts.php) -- deshalb derselbe
   Platzhalter-Ansatz wie beim Sidebar-Widget (.sidebar-post-card__media--
   placeholder), nur in Karten-Groesse.
   -------------------------------------------------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-3);
  padding: var(--space-4) 0;
}

.blog-card {
  display: block;
  color: inherit;
}

.blog-card:hover {
  text-decoration: none;
}

.blog-card__media {
  aspect-ratio: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--color-bg-raised);
  margin-bottom: var(--space-2);
}

.blog-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 64px;
}

.blog-card__date {
  display: block;
  color: var(--color-accent);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.blog-card__title {
  font-size: 19px;
  margin: 0 0 var(--space-1);
}

.blog-card:hover .blog-card__title {
  color: var(--color-accent);
}

.blog-card__excerpt {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
  text-wrap: pretty;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-chars: 10 3 4;
  hyphenate-limit-chars: 10 3 4;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-lines: 2;
}

.blog-card__more {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.blog-card:hover .blog-card__more {
  color: var(--color-accent);
}

.blog-list-more {
  display: flex;
  justify-content: center;
  padding: 0 0 var(--space-5);
}

/* --------------------------------------------------------------------
   Challenges-Archiv (siehe challenges-archive.php) -- Kalender-Kacheln mit
   Hover-Reveal des jeweiligen Challenge-Hero-Bilds, Vorbild ist die
   Live-Seite (.edgtf-el-item* im Freestyle-Theme): Kachel zeigt per Default
   nur das gemeinsame, orange getoente Hintergrundfoto, beim Hover blendet
   das eigene (bereits vorhandene, orange getoente) Challenge-Hero-Bild ein
   und zoomt von 112% auf 100% -- Werte 1:1 aus der Live-Seite uebernommen
   (opacity 0->1 + scale 1.12->1, 0.4s, gleiche Cubic-Bezier-Kurve).
   -------------------------------------------------------------------- */

.archive-title-bar {
  background: var(--color-charcoal);
  padding: var(--space-4) 0;
}

.archive-title-bar__title {
  color: var(--color-on-charcoal);
  margin: 0;
}

.archive-browse {
  position: relative;
  background-image: url("/assets/images/site/challenge-archive.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: var(--space-5) 0 0;
  overflow: hidden;
}

.archive-browse::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(254, 79, 0, 0.75);
}

.archive-browse__intro {
  position: relative;
  text-align: center;
  padding: 0 var(--space-3) var(--space-4);
}

.archive-browse__eyebrow {
  display: block;
  color: var(--color-accent-contrast);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-1);
}

.archive-browse__title {
  color: var(--color-accent-contrast);
  font-size: clamp(22px, 4vw, 34px);
  margin: 0;
}

.archive-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.archive-tile {
  position: relative;
  display: block;
  aspect-ratio: 100 / 79;
  border: 1px solid rgba(255, 255, 255, 0.6);
  overflow: hidden;
  color: var(--color-accent-contrast);
  padding: var(--space-3);
  box-sizing: border-box;
}

.archive-tile:hover {
  text-decoration: none;
  color: var(--color-accent-contrast);
}

.archive-tile__hover-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.4s cubic-bezier(0.53, 0.01, 0.18, 1), transform 0.4s cubic-bezier(0.53, 0.01, 0.18, 1);
}

.archive-tile:hover .archive-tile__hover-bg {
  opacity: 1;
  transform: scale(1);
}

.archive-tile__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.archive-tile__day {
  display: block;
  font-family: var(--font-headline);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.archive-tile__month,
.archive-tile__year {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.archive-tile__title {
  font-family: var(--font-headline);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}