/* =====================================================================
   Leglerhütte SAC — "Modern Alpine" theme
   Editorial layout · handwritten CSS, no build step.

   Farbwelt und Formensprache folgen dem Hüttenlogo: ein monochromes
   Petrolblau in feiner Strichzeichnung auf cremefarbenem Papier,
   als Siegel gefasst, beschriftet in gesperrten Versalien.
     · Petrolblau (--blue) trägt Flächen, Links und Überschriften
     · Kupfer (--accent) ist der einzige warme Gegenton, reserviert
       für Handlungsaufforderungen — im Logo selbst kommt er nicht vor
     · gesperrte Versalien für Wortmarke, Kicker, Navigation, Buttons

   Die Token heissen aus Gründen der Abwärtskompatibilität weiter
   --green*: die Theme-Einstellungen im Admin und base.html.twig
   bilden color_primary/soft/deep genau auf diese Namen ab.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light;

  /* Palette — Tinte des Logos auf seinem Papier.
     --paper ist die durchgehende Fläche von Kopfzeile und Inhalt, --surface
     die hellere der abgesetzten Elemente: Karten, Schaltflächen, Kacheln. */
  --paper:      #f6f2ea;
  --surface:    #fffdf8;
  --ink:        #1b2530;
  --muted:      #5c6f80;
  --line:       #ded9cd;
  --green:      #184063;  /* Petrolblau des Logos */
  --green-deep: #0f2c44;
  --green-soft: #446e8c;
  --accent:     #b04f28;  /* Kupfer */
  --accent-hov: #92401e;

  /* Abdunklung im Titelbild. Deutlich zurückgenommen (vorher .30/.74) und
     zusätzlich seitlich statt flächig verteilt — siehe .hero::before. */
  --overlay-a:  rgba(12,30,46,.26);
  --overlay-b:  rgba(12,30,46,.58);

  /* Kopfzeile und aufgeklapptes Mobilmenü teilen sich einen Namen: das Menü
     hängt sichtbar an der Kopfzeile und muss denselben Ton haben. */
  --header-bg: var(--paper);

  --serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Versalien-Sperrung aus dem Siegel */
  --track:      .18em;
  --track-wide: .24em;

  /* Höhe der Kopfzeile. Daran hängen die Position des Mobilmenüs und der
     Klebeabstand der Randbilder — deshalb eine Variable und keine drei
     einzeln gepflegten Werte.
     Das Siegel trägt „LEGLERHÜTTE SAC“ und „2273 M.Ü.M.“ in sich; es ersetzt
     den Schriftzug daneben und muss deshalb gross genug sein, dass man das
     liest. Darum die grosszügige Höhe: das Logo bestimmt sie, nicht umgekehrt.
     Der Abstand oben und unten bleibt bei je 10px. */
  --header-h: 132px;
  --logo-h: 112px;

  --wrap: 1180px;
  /* Breite der Textspalte. Vorher 40rem (640px): rechts daneben lag eine
     Bildspalte, die nie an ein Template angeschlossen wurde — der Platz stand
     also leer. Jetzt nutzt ihn der Text und die Spalte füllt --wrap aus. */
  --prose: 100%;
  --radius: 14px;
  --shadow: 0 18px 50px -20px rgba(15,44,68,.32);
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  transition: background .3s var(--ease), color .3s var(--ease);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; }
::selection { background: var(--accent); color: #fff; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.kicker {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--green-soft);
  margin: 0 0 1rem;
}

/* ---------- Header ---------- */
/* Die Kopfzeile scrollt mit der Seite weg, sie klebt nicht mehr oben.
   Damit entfällt auch der Weichzeichner: er hatte nur die Aufgabe, den
   darunter durchlaufenden Inhalt zu beruhigen.

   position: relative muss bleiben, obwohl hier nichts verschoben wird — das
   aufgeklappte Mobilmenü ist absolut positioniert und braucht die Kopfzeile
   als Bezugsrahmen. Ohne diese Zeile hängte es am Seitenrahmen und rutschte
   beim Scrollen von der Kopfzeile weg. */
.site-header {
  position: relative; z-index: 60;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.brand:hover { color: inherit; }
.brand-mark { color: var(--green); flex: none; }
/* Siegel und hochgeladenes Logo teilen sich dieselbe Höhe, damit der
   Wechsel zwischen Original und eingebauter Marke die Kopfzeile nicht
   springen lässt. */
.brand-logo, .brand-seal { height: var(--logo-h); width: auto; flex: none; display: block; }
.brand-seal { color: var(--green); transition: color .2s var(--ease); }
.brand:hover .brand-seal { color: var(--accent); }
/* Das Siegel ist rund und wirkt neben eckigen Nachbarn optisch kleiner als es
   ist — ein Hauch Vergrösserung beim Überfahren, sonst passiert nichts. */
.brand-logo { transition: transform .25s var(--ease); }
.brand:hover .brand-logo { transform: scale(1.04); }

/* Wortmarke in gesperrten Versalien — die Typografie des Siegels */
.brand-text { display: flex; flex-direction: column; gap: .22rem; line-height: 1; }
.brand-text strong {
  font-family: var(--sans); font-weight: 600; font-size: 1.02rem;
  text-transform: uppercase; letter-spacing: var(--track); color: var(--ink);
}
.brand-text small {
  font-family: var(--sans); font-size: .62rem; font-weight: 500;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted);
}

/* Das Siegel trägt „LEGLERHÜTTE SAC“ und „2273 M.Ü.M.“ bereits in sich. In
   dieser Grösse ist es lesbar, der Schriftzug daneben wäre eine Dopplung —
   also bleibt er im Markup, aber unsichtbar. So hat der Link weiterhin einen
   Namen für Screenreader und Suchmaschinen, auch wenn das Bild nicht lädt.

   Soll der Schriftzug wieder sichtbar werden: diesen Block löschen und in
   base.html.twig das leere alt="" wieder durch den Markennamen ersetzen. */
.brand .brand-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: .5rem .7rem; border-radius: 8px;
  font-size: .82rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.site-nav a:hover { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.site-nav a[aria-current="page"] { color: var(--green); }
.site-nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 3px; border-radius: 2px;
  background: var(--accent);
}

/* Schaltflächen im Kopf — nur noch das Mobilmenü, seit der Farbschema-Umschalter
   weg ist. --surface hebt sie leicht vom Sandton der Kopfzeile ab. */
.icon-btn {
  flex: none; width: 42px; height: 42px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); cursor: pointer; transition: border-color .2s, transform .1s;
}
.icon-btn:hover { border-color: var(--green-soft); }
.icon-btn:active { transform: scale(.94); }

.nav-toggle { display: none; }
.nav-burger { display: none; }

/* ---------- Notice bar ---------- */
.notice-bar { background: var(--green-deep); color: #f2efe5; font-size: .95rem; }
.notice-bar .wrap { padding-block: .7rem; }
.notice-bar a { color: #fff; }

/* Warnfassung, geschaltet über die Checkbox „als Warnung einfärben“ auf der
   Startseite. Bewusst das Kupfer der Marke und kein fremdes Signalrot: die
   Farbe ist im Theme bereits der Ton für „hier hinschauen“ (Buttons, aktiver
   Menüpunkt) und lässt sich in den Theme-Einstellungen mitpflegen. Gegen das
   Petrolblau der Normalfassung steht sie deutlich genug ab, um den Unterschied
   auch ohne Nebeneinander zu erkennen. */
/* Reines Weiss statt des gebrochenen #f2efe5 der Normalfassung: auf dem
   helleren Kupfer läge der Kontrast damit bei 4,57:1 und damit hart an der
   Grenze von 4,5:1. Mit #fff sind es 5,06:1 — Reserve für den Fall, dass
   jemand den Akzentton in den Theme-Einstellungen aufhellt. */
.notice-bar.is-warning { background: var(--accent); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: min(80vh, 720px);
  display: flex; align-items: flex-end;
  background: var(--green-deep) center/cover no-repeat;
  color: #f7f3ea;
}
/* Der Verlauf läuft waagrecht statt senkrecht. Vorher lag er als Band über
   dem gesamten unteren Bilddrittel und verdunkelte die Hütte gleich mit,
   obwohl nur die Schrift links Kontrast braucht. Jetzt sitzt das Dunkel dort,
   wo der Text steht, und ist ab knapp zwei Dritteln vollständig verschwunden —
   die rechte Bildhälfte mit der Hütte bleibt unberührt. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(95deg,
    var(--overlay-b) 0%,
    var(--overlay-a) 32%,
    transparent 64%);
}
/* Auf schmalen Fenstern läuft der Text über die volle Breite — ein waagrechter
   Verlauf liesse seine rechte Hälfte ungeschützt. Dort bleibt es beim
   senkrechten Verlauf von unten. */
@media (max-width: 820px) {
  .hero::before {
    background: linear-gradient(180deg, transparent 34%, var(--overlay-b) 100%);
  }
}
.hero-inner { padding-block: 4rem 4.5rem; }
/* Die Breite wird an den Kindern begrenzt, nicht am Element selbst: .hero-inner
   trägt auch .wrap, und das zentriert per margin-inline: auto. Ein max-width
   hier oben würde den Textblock in die Bildmitte rücken statt ihn links zu
   halten — genau vor der Hütte. So bleibt der Container über die volle
   Satzbreite gespannt und der Text sitzt an dessen linker Kante. */
.hero-inner > * { max-width: 34rem; }
.hero .kicker { color: #cfe0ee; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem); margin: 0 0 1rem; color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero-sub { font-size: clamp(1.05rem, 2.4vw, 1.35rem); max-width: 34rem; margin: 0 0 1.8rem; color: #eae4d8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--accent); --fg: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bg); color: var(--fg);
  padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: 600; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none; transition: transform .12s var(--ease), background .2s var(--ease);
}
.btn:hover { background: var(--accent-hov); color: #fff; transform: translateY(-2px); }
.btn-ghost { --bg: transparent; --fg: #fff; border: 1.5px solid rgba(255,255,255,.65); }
.btn-ghost:hover { --bg: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- Facts strip ---------- */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--line); border-block: 1px solid var(--line);
}
.facts div { background: var(--paper); padding: 1.4rem 1.2rem; text-align: center; }
/* „2273 M.Ü.M." steht im Siegel in gesperrten Versalien, nicht in der Serife */
.facts b {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 1.5rem;
  letter-spacing: .04em; color: var(--green); line-height: 1;
}
.facts span {
  display: block; margin-top: .45rem; font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track); color: var(--muted);
}

/* ---------- Sections & prose ---------- */
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.lead { font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.5; font-family: var(--serif); font-weight: 400; color: var(--ink); }

.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1.1rem; }
.prose h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: .3rem; }
.prose h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--green); margin-top: 2.6rem;
}
.prose h3 { font-size: 1.25rem; margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .35rem; }
.prose blockquote {
  margin: 1.6rem 0; padding-left: 1.2rem; border-left: 3px solid var(--accent);
  font-family: var(--serif); font-size: 1.2rem; color: var(--muted);
}
.prose a { color: var(--green); }
.signature { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--green); margin-top: 1.6rem; }

.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.page-head .kicker { color: var(--green-soft); }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 20ch; }
/* tighten the gap between the page title and the content below it */
.page-head + .section { padding-top: 1.75rem; }

/* Zweispalter: Text links, Randspalte rechts. Unter 900px fallen die Spalten
   untereinander, die Randspalte landet also unter dem Text — auf dem Telefon
   soll der Willkommenstext zuerst kommen, nicht die Partnerlogos. */
.layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .layout.has-aside { grid-template-columns: minmax(0,1fr) 22rem; } }
.aside-images { position: sticky; top: 1rem; display: grid; gap: 1rem; }

/* ---------- Partner-Spalte (Startseite) ---------- */
.partner-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.partner-aside li { margin: 0; }
.partner-aside a { display: block; text-decoration: none; color: inherit; }

/* Helle Platte unter dem Logo, gleiche Überlegung wie in der Fusszeile: hier
   stehen fremde Marken, die man weder einfärben noch aufhellen darf. Viele
   Partnerlogos sind mehrfarbig oder bringen einen weissen Hintergrund mit —
   die Platte trägt beides, ohne dass man der Datei ansehen muss, was sie ist. */
.partner-plate {
  display: block; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* object-fit: contain, damit hohe und breite Logos gleich behandelt werden:
   kein Beschnitt, keine Verzerrung, nur unterschiedlich viel Luft daneben. */
.partner-aside img { width: 100%; height: auto; max-height: 130px; object-fit: contain; }
.partner-text {
  display: block; margin-top: .6rem;
  font-size: .9rem; line-height: 1.5; color: var(--muted);
}
/* Nur verlinkte Einträge reagieren auf den Zeiger — ein Hover-Effekt an einer
   Kachel ohne Ziel verspricht etwas, das nicht passiert. */
.partner-aside a:hover .partner-plate { border-color: var(--green-soft); box-shadow: var(--shadow); }
.partner-aside a:hover .partner-text { color: var(--green); }

/* ---------- Editorial index (home links) ---------- */
.index { margin-top: 3rem; border-top: 1px solid var(--line); }
.index a {
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: baseline; gap: 1rem;
  padding: 1.3rem .3rem; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink); transition: padding .25s var(--ease), color .2s;
}
.index a:hover { padding-left: 1rem; color: var(--green); }
.index .num { font-family: var(--sans); font-weight: 600; letter-spacing: .1em; color: var(--green-soft); font-size: .82rem; }
.index .t { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.index .d { color: var(--muted); font-size: .95rem; justify-self: end; text-align: right; }
.index a:hover .arrow { transform: translateX(5px); }
.index .arrow { color: var(--accent); transition: transform .25s var(--ease); }

/* ---------- Images / figures ---------- */
figure { margin: 0; }
figure.framed img { border-radius: var(--radius); box-shadow: var(--shadow); }
figcaption { font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--muted); margin-top: .6rem; }
.ratio { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-radius: var(--radius); }

/* ---------- Gallery ---------- */
.gallery { columns: 3 240px; column-gap: 1rem; margin-top: 2.5rem; }
.gallery a { display: block; margin-bottom: 1rem; break-inside: avoid; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery img { width: 100%; transition: transform .5s var(--ease), filter .3s; }
.gallery a:hover img { transform: scale(1.04); filter: saturate(1.1); }
.empty-hint { color: var(--muted); font-style: italic; margin-top: 2rem; }

/* ---------- Downloads ---------- */
.downloads { margin-top: 2.8rem; }
.downloads h2 { margin-bottom: 1rem; }
.downloads ul { list-style: none; padding: 0; margin: 0; }
.downloads li { margin-bottom: .6rem; }
.downloads a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), transform .12s var(--ease);
}
.downloads a:hover { border-color: var(--green-soft); transform: translateX(3px); }
.dl-name { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; }
.dl-name svg { color: var(--accent); flex: none; }
.dl-meta { color: var(--muted); font-size: .82rem; white-space: nowrap; }

/* ---------- Partner list ---------- */
.partner-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.partner-list li {
  padding: .9rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.2rem;
}
.partner-list li:first-child { border-top: 1px solid var(--line); }

/* ---------- Lightbox ---------- */
.lb-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 4vmin;
  background: rgba(8,13,19,.93); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s var(--ease);
}
.lb-overlay.open { display: flex; opacity: 1; }
.lb-overlay img { max-width: 100%; max-height: 84vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb-cap { position: absolute; bottom: 3vmin; left: 0; right: 0; text-align: center; color: #e9e3d6; font-family: var(--serif); font-style: italic; }
.lb-close, .lb-nav { position: absolute; background: rgba(255,255,255,.1); border: none; color: #fff; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 1.4rem; display: grid; place-items: center; transition: background .2s; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-close { top: 3vmin; right: 3vmin; }
.lb-nav.prev { left: 3vmin; top: 50%; transform: translateY(-50%); }
.lb-nav.next { right: 3vmin; top: 50%; transform: translateY(-50%); }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: #c3d1dd; margin-top: clamp(3rem,8vw,6rem); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding-block: clamp(2.5rem,5vw,4rem); }
.footer-seal { max-width: 132px; height: auto; margin: 0 0 1.1rem; display: block; color: #c3d1dd; }
/* In der Fusszeile steht in der Regel ein fremdes Logo — Sektion, Partner,
   Verband. Das darf weder eingefärbt noch aufgehellt werden (das Tödi-Wappen
   ist rot-schwarz-weiss). Stattdessen bekommt es eine helle Platte: die
   trägt mehrfarbige Logos ebenso wie solche mit weissem Hintergrund, ohne
   dass man dem Bild ansehen muss, was es ist. */
.footer-logo {
  max-width: 190px; height: auto; margin: 0 0 1.2rem; display: block;
  background: #fff; border-radius: 8px; padding: .6rem .7rem;
}
.footer-col h3 {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track);
  color: #fff; margin: 0 0 .8rem;
}
.footer-col p { margin: 0; font-size: .95rem; line-height: 1.8; }
.footer-col a { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-block: 1.1rem; font-size: .82rem; color: #96abbe; }

/* Hier stand eine Animation, die Texte erst beim Heranscrollen einblendete.
   Entfernt: sie setzte den Inhalt auf opacity 0 und machte ihn erst per
   JavaScript sichtbar — blieb das Skript aus, war die Seite dauerhaft leer.
   Inhalt gehört von Anfang an auf den Schirm. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Mobile nav ---------- */
@media (max-width: 860px) {
  :root { --header-h: 104px; --logo-h: 84px; }
  .nav-burger { display: inline-grid; }
  /* Das Menü erscheint und verschwindet, es klappt nicht auf. Vorher lief das
     über eine Höhen-Animation (grid-template-rows 0fr → 1fr). Die sah auf dem
     Telefon unruhig aus und hatte einen zweiten Nachteil: im geschlossenen
     Zustand war die Liste zwar 0 Pixel hoch, ihre Links blieben aber im
     Tab-Fokus — man tabbte durch acht unsichtbare Einträge. Mit display: none
     sind sie sauber aus der Bedienreihenfolge. */
  .site-nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--header-bg); border-bottom: 1px solid var(--line);
  }
  .site-nav > ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .6rem max(1.25rem, calc((100% - var(--wrap))/2)) 1.1rem;
  }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .site-nav a { padding: .85rem .4rem; border-bottom: 1px solid var(--line); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .brand-text strong { font-size: .92rem; }
}