:root {
  --bg: #f5f4f0;
  --panel: #ffffff;
  --panel-alt: #f8f7f4;
  --border: #e3ded3;
  --text: #201e1a;
  --text-muted: #6b665c;
  --accent: #d0006f; /* rosso Accor/ibis */
  --accent-rgb: 208, 0, 111;
  --accent-styles: #ff6a13; /* arancio ibis Styles */
  --shadow: 0 2px 10px rgba(0, 0, 0, .08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .18);
  --radius: 12px;
  --radius-sm: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16151a;
    --panel: #1e1d23;
    --panel-alt: #26242b;
    --border: #35333c;
    --text: #f1efe9;
    --text-muted: #a29e97;
    --shadow: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

/* Colonna flex invece di calcolare a mano l'altezza di layout/footer da
   sottrarre a 100vh: quel calcolo dipendeva da variabili CSS che potevano
   disallinearsi dall'altezza reale renderizzata di topbar/tabs/footer
   (metriche del font, safe-area-inset, min-height che cresce col contenuto),
   causando il taglio del footer fuori viewport su alcuni browser (Chrome). */
body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); }

::selection { background: rgba(var(--accent-rgb), .25); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .9rem;
  padding-top: calc(.55rem + env(safe-area-inset-top));
  padding-left: calc(.9rem + env(safe-area-inset-left));
  padding-right: calc(.9rem + env(safe-area-inset-right));
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  min-height: 56px;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

.topbar h1 {
  font-size: 1.05rem;
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar h1 span { color: var(--accent); }
.topbar h1 .fr { color: var(--text-muted); font-weight: 400; }

.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.brand-mark { flex-shrink: 0; display: block; }
.brand-name { color: var(--text); }
.brand .fr {
  font-size: .8rem;
  font-weight: 400;
  color: var(--text-muted);
  padding-left: .5rem;
  border-left: 1px solid var(--border);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
}

.stats {
  font-size: .78rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.stats .warn { color: var(--accent-styles); font-weight: 600; }

.lang-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-switch button {
  border: none;
  background: var(--panel-alt);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
  padding: .3rem .5rem;
  cursor: pointer;
  letter-spacing: .02em;
}
.lang-switch button + button { border-left: 1px solid var(--border); }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---------- Mobile view tabs ---------- */

.view-tabs {
  display: none;
  flex-shrink: 0;
  gap: .4rem;
  padding: .5rem .7rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 19;
}

.view-tabs button {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 600;
  padding: .55rem .6rem;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  transition: background .15s, color .15s, border-color .15s;
}

.view-tabs button svg { width: 16px; height: 16px; flex-shrink: 0; }

.view-tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- Layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

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

.footer {
  flex-shrink: 0;
  padding: .35rem .9rem;
  padding-bottom: calc(.35rem + env(safe-area-inset-bottom));
  padding-left: calc(.9rem + env(safe-area-inset-left));
  padding-right: calc(.9rem + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  background: var(--panel);
  border-top: 1px solid var(--border);
  font-size: .74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  z-index: 20;
}

.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--accent); text-decoration: underline; }

.footer-legal {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-shrink: 0;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
}
.footer-link svg { flex-shrink: 0; }

.footer-link.footer-btn {
  background: none;
  border: none;
  font: inherit;
  color: var(--text-muted);
  padding: 0;
  cursor: pointer;
}
.footer-link.footer-btn:hover { color: var(--accent); text-decoration: underline; }

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.controls {
  padding: .8rem .8rem .6rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.filters-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: .2rem 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  user-select: none;
}
.filters-toggle::-webkit-details-marker { display: none; }
.filters-toggle:hover { color: var(--text); }

.filters-chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform .15s; }
.filters[open] .filters-chevron { transform: rotate(180deg); }

.filters-badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.filters-badge[hidden] { display: none; }

.filters-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding-top: .6rem;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.search-field svg {
  position: absolute;
  left: .65rem;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.controls input:not([type="range"]), .controls select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  background: var(--panel-alt);
  color: var(--text);
  font-family: inherit;
}
.controls input:not([type="range"]):focus, .controls select:focus { border-color: var(--accent); }

/* #search invece di .search-field input: la specificita' di
   ".controls input:not([type=range])" (classe + tipo + attributo dentro
   :not) batteva quella di ".search-field input" (classe + tipo) e la sua
   "padding: .55rem .7rem" vinceva su "padding-left: 2.1rem", lasciando il
   testo digitato sotto l'icona della lente. */
#search { padding-left: 2.1rem; }

.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
/* min-width fissa sulle etichette: senza, ogni riga (Ordina per/Dipartimento/
   UNESCO) lascia allo <select> uno spazio "flex: 1" diverso a seconda della
   lunghezza del proprio testo, risultando in dropdown di larghezze diverse. */
.control-row label { font-size: .76rem; color: var(--text-muted); white-space: nowrap; min-width: 5.2rem; flex-shrink: 0; }
/* min-width: 0 permette allo <select> di restringersi sotto la larghezza
   della sua opzione piu' lunga (es. i nomi dei dipartimenti): senza,
   flex:1 non basta a garantire la stessa larghezza tra le varie select. */
.control-row select, .control-row input { width: auto; flex: 1; min-width: 0; }

.control-block { display: flex; flex-direction: column; }

.maxpop-value {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.maxpop-slider {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  margin-top: .15rem;
}

.maxpop-track, .maxpop-fill {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 999px;
  pointer-events: none;
}
.maxpop-track { right: 0; background: var(--border); }
.maxpop-fill { width: 0%; background: var(--accent); transition: width .12s; }

.maxpop-dots {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.maxpop-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
}

.maxpop-slider input[type="range"] {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}
.maxpop-slider input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 5px;
  background: transparent;
}
.maxpop-slider input[type="range"]::-moz-range-track {
  height: 5px;
  background: transparent;
  border: none;
}
.maxpop-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.maxpop-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.maxpop-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.maxpop-slider input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.maxpop-ticks {
  display: flex;
  justify-content: space-between;
  font-size: .66rem;
  color: var(--text-muted);
  margin-top: -.1rem;
}

.list-meta {
  padding: .55rem .9rem;
  font-size: .75rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
}

.city-list {
  list-style: none;
  margin: 0;
  padding: .4rem;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.city-list li {
  padding: .65rem .75rem;
  margin-bottom: .3rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  align-items: center;
  min-height: 44px;
  transition: background .12s;
}
.city-list li:hover { background: var(--panel-alt); }
.city-list li.active { background: rgba(var(--accent-rgb), .12); }
.city-list li.active .city-name { color: var(--accent); }

.city-name { font-weight: 600; font-size: .92rem; }
.city-meta { font-size: .74rem; color: var(--text-muted); text-align: right; white-space: nowrap; }

.empty-state {
  padding: 2rem 1.2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .88rem;
}

/* ---------- Map ---------- */

.map-pane { position: relative; height: 100%; width: 100%; }
#map { width: 100%; height: 100%; background: var(--panel-alt); }

.locate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
.locate-btn.locating { color: var(--accent); animation: locate-pulse 1s infinite; }
@keyframes locate-pulse {
  50% { opacity: .35; }
}

.leaflet-popup-content-wrapper { background: var(--panel); color: var(--text); }
.leaflet-popup-tip { background: var(--panel); }
.leaflet-popup-content { font-size: .85rem; }
.leaflet-popup-content button {
  margin-top: .4rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Detail panel ---------- */

.detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 400;
  display: none;
}

.detail {
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(400px, 92vw);
  max-height: calc(100% - 24px);
  overflow-y: auto;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.2rem 1.4rem;
  z-index: 500;
  -webkit-overflow-scrolling: touch;
}

.detail-close {
  position: absolute;
  top: .5rem;
  right: .6rem;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--panel-alt);
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail h2 { margin: 0 1.6rem .1rem 0; font-size: 1.25rem; }
.detail .subtitle { color: var(--text-muted); font-size: .85rem; margin-bottom: .8rem; }

.detail-section { margin-top: 1rem; }
.detail-section h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 .45rem; }
.detail-section p { margin: 0; font-size: .92rem; line-height: 1.55; }

.gallery-section .gallery-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .45rem;
}
.gallery-section .gallery-header h3 { margin: 0; }
.gallery-google-link {
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.gallery-google-link:hover { text-decoration: underline; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .4rem;
}
.gallery-item {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.gallery-item:hover img { transform: scale(1.08); }

.gallery-loading, .gallery-empty { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--text-muted); }

.gallery-credit { margin: .5rem 0 0; font-size: .68rem; color: var(--text-muted); }
.gallery-credit a { color: inherit; text-decoration: underline; }

.attractions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.attractions li {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .3rem .75rem;
  font-size: .82rem;
}

.hotel-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .65rem .75rem;
  margin-bottom: .5rem;
  background: var(--panel-alt);
}
.hotel-card .name { font-weight: 600; font-size: .92rem; }
.hotel-card .address { font-size: .82rem; color: var(--text-muted); margin-top: .2rem; }
.hotel-card .links { margin-top: .35rem; font-size: .78rem; display: flex; gap: .9rem; flex-wrap: wrap; }
.hotel-card .links a { font-weight: 600; text-decoration: none; }
.hotel-card .links a:hover { text-decoration: underline; }

.hotel-card .book-links { margin-top: .5rem; gap: .5rem; }
.book-link {
  display: inline-flex;
  align-items: center;
  font-size: .76rem !important;
  font-weight: 600;
  padding: .32rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent) !important;
  text-decoration: none !important;
  transition: background .12s, color .12s;
}
.book-link:hover { background: var(--accent); color: #fff !important; }

.badge {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 4px;
  color: #fff;
  margin-left: .4rem;
  vertical-align: middle;
  letter-spacing: .01em;
}
.badge.ibis { background: var(--accent); }
.badge.styles { background: var(--accent-styles); }
.badge.unesco { background: #a67c00; font-size: .62rem; cursor: help; }

.attractions.monuments li { background: transparent; border-style: dashed; }

/* ---------- Welcome modal (intro al primo accesso) ---------- */

.welcome-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 600;
}
.welcome-backdrop[hidden] { display: none; }

.welcome-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
  max-height: calc(100% - 24px);
  overflow-y: auto;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem 1.4rem 1.3rem;
  z-index: 601;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

.welcome-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-icon svg { width: 28px; height: 28px; }

.welcome-title { font-size: 1.12rem; margin: 0 0 .5rem; }
.welcome-text { font-size: .9rem; line-height: 1.55; color: var(--text-muted); margin: 0; }

.welcome-footer { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; }

.welcome-dots { display: flex; gap: .4rem; }
.welcome-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.welcome-dot.active { width: 18px; border-radius: 999px; background: var(--accent); transition: width .15s; }

.welcome-nav { display: flex; gap: .6rem; width: 100%; }
.welcome-btn {
  border-radius: 999px;
  padding: .6rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  flex: 1;
}
.welcome-btn.ghost:hover { background: var(--border); }
.welcome-btn.ghost[hidden] { display: none; }
.welcome-btn.primary { flex: 2; background: var(--accent); border-color: var(--accent); color: #fff; }
.welcome-btn.primary:hover { opacity: .92; }

/* ---------- Scrollbars (desktop, webkit) ---------- */

.city-list::-webkit-scrollbar, .detail::-webkit-scrollbar { width: 8px; }
.city-list::-webkit-scrollbar-thumb, .detail::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* ==================================================
   Tablet: sidebar più stretta, tutto ancora affiancato
   ================================================== */
@media (max-width: 1024px) and (min-width: 861px) {
  .layout { grid-template-columns: 280px 1fr; }
}

/* ==================================================
   Mobile: tab Elenco/Mappa, dettaglio come bottom-sheet
   ================================================== */
@media (max-width: 860px) {
  .topbar h1 { font-size: .95rem; }
  .stats { display: none; }

  .view-tabs { display: flex; }

  .layout { grid-template-columns: 1fr; grid-template-rows: 1fr; }

  .sidebar, .map-pane { display: none; width: 100%; height: 100%; }
  .layout[data-view="list"] .sidebar { display: flex; }
  .layout[data-view="map"] .map-pane { display: block; }

  .city-list li { min-height: 52px; padding: .75rem .8rem; }

  .detail-backdrop { display: block; }
  .detail-backdrop[hidden] { display: none; }

  /* Lo sheet di dettaglio copre fino all'82% dello schermo dal basso: i
     controlli +/- (in alto a sinistra) e l'attribuzione Leaflet/OSM (in
     basso) finiscono a cavallo del suo bordo e, avendo z-index piu' alto
     di quello dello sheet, ci galleggiano sopra in modo fastidioso. Si
     nascondono mentre lo sheet e' aperto, dato che in quel momento resta
     visibile solo una piccola porzione di mappa in alto. */
  .layout:has(#detail:not([hidden])) .leaflet-control-zoom,
  .layout:has(#detail:not([hidden])) .leaflet-control-locate,
  .layout:has(#detail:not([hidden])) .leaflet-control-attribution {
    display: none;
  }

  .detail {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 82vh;
    border-radius: 16px 16px 0 0;
    padding: 1.1rem 1.1rem calc(1.6rem + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-lg);
  }
  .detail::before {
    content: "";
    position: sticky;
    top: -.2rem;
    display: block;
    width: 40px;
    height: 4px;
    margin: -.4rem auto .7rem;
    border-radius: 999px;
    background: var(--border);
  }

  /* Footer più comodo al tocco, sempre con il link alle note legali visibile */
  .footer { min-height: 48px; justify-content: center; gap: 1.5rem; }
  .footer-legal { display: none; }
  .footer-links { gap: 1.5rem; }
  .footer-link {
    font-size: .8rem;
    padding: .5rem .2rem;
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  .topbar h1 .fr { display: none; }
  .footer-links { gap: 1.2rem; }
  .footer-repo-text { display: none; }
  .footer-welcome-text { display: none; }
  .topbar-right { gap: .4rem; }
  .lang-switch button { padding: .3rem .4rem; }
}

/* Rispetta chi ha disabilitato le animazioni */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Pagina statica (es. About) ---------- */

body.page {
  height: auto;
  min-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

body.page .topbar a.brand { color: inherit; }

.page-wrap {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.6rem 1.2rem 3rem;
  padding-left: calc(1.2rem + env(safe-area-inset-left));
  padding-right: calc(1.2rem + env(safe-area-inset-right));
}

.page-wrap h1 {
  font-size: 1.4rem;
  margin: .4rem 0 .6rem;
}

.page-wrap h2 {
  font-size: 1rem;
  margin: 1.8rem 0 .5rem;
  color: var(--text);
}

.page-wrap p, .page-wrap li {
  font-size: .93rem;
  line-height: 1.65;
  color: var(--text);
}

.page-wrap .lead { color: var(--text-muted); }

.page-wrap ul { padding-left: 1.2rem; }
.page-wrap li { margin-bottom: .3rem; }

.back-link { margin: 0 0 .8rem; }
.back-link a { font-size: .85rem; font-weight: 600; text-decoration: none; }
.back-link a:hover { text-decoration: underline; }

body.page .footer { position: static; }