/* MapStack 2 — monospace-code default, warm-gray, light/dark. Accent handled
   per-dataset by the Lagrange palette (docs/VISUAL_STYLE.md).

   Type stacks from modernfontstacks.com:
     - body/mono:  Monospace Code
     - headings + small print: Industrial (Bahnschrift/DIN)
     - widgets:    system-ui (buttons, inputs, selects)

   Layout is mobile-first: one viewport breakpoint at 760px. Below it everything
   on the landing stacks vertically with no dividers; at >=760px rows & vertical
   dividers switch on (features, pricing, alternatives, map-sheet).*/

:root {
  font-size: 16px;

  /* Light scheme: warm beige, kept very subtle and airy. */
  --bg: #fbfaf6;        /* page: soft warm off-white */
  --panel: #ffffff;     /* card/panel */
  --panel-2: #f2efe7;   /* subtle fill */
  --border: #e4dfd2;
  --text: #282319;      /* warm near-black */
  --muted: #8a8171;     /* soft warm gray */
  --accent: #a05a18;    /* warm rust emphasis */
  --shadow: rgba(60, 50, 35, 0.08);

  /* Type stacks */
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;
  /* Body text: Geometric Humanist (modernfontstacks.com) — legible, warm and
     cleaner than monospace for paragraphs; headers use Industrial (below). */
  --font-body: Avenir, Montserrat, Corbel, "URW Gothic", "Source Sans Pro",
    "source-sans-pro", sans-serif;
  /* Headings + small print: Industrial (Bahnschrift/DIN/Franklin Gothic
     Narrow) — the page headings were too rough in monospace, so per the
     landing review they now render in Industrial too. */
  --font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
    "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171610;       /* warm near-black */
    --panel: #201d17;
    --panel-2: #292520;
    --border: #3b372c;
    --text: #ede7d8;     /* warm off-white */
    --muted: #a1967f;
    --accent: #e8a15c;
    --shadow: rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

html, body { 
  margin: 0; 
  background: var(--bg);
  /* Subtle gaussian noise so large fills aren't flat printer-white. The SVG
     feTurbulence filter is generated inline once; pan it so tiles don't align. */
  --noise-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.14'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-image: var(--noise-url);  
}

body {
  font-family: var(--font-body);
  line-height: 1.55;
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

.topbar {
  /* No box: just a subtle bottom rule separating it, with generous space
     above so it sits clear of the very top of the page. */
  max-width: 1080px; margin: 0 auto;
  border: 0; border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 4;
}
.topbar .inner {
  max-width: 1080px; margin: 0 auto; padding: 3rex 2rex;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.topbar .brand { font-weight: 800; font-size: 1.45rem; text-decoration: none; color: var(--text); letter-spacing: -0.02em; }
.topbar nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.92rem; text-align: right; }
.topbar nav a { color: var(--text); text-decoration: none; }
.topbar nav a:hover { text-decoration: underline; }

.inline { display: inline; margin: 0; }

/* Mobile-first: 760px is the single breakpoint. Below it (narrow) the landing
   stacks vertically; above it columns/dividers engage. .wrap side padding is
   set to 2rex per the landing review. (Header/footer keep their own 1.4rem
   padding; each box is independently centered at 1080px max-width.) */
.wrap { max-width: 1080px; margin: 0 auto; padding: 2rex; }

h1, h2, h3 { font-family: var(--font-industrial); font-weight: 700; line-height: 1.15; margin-block-end: 1rex;}
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; margin-top: 2rem; }

.muted { color: var(--muted); font-weight: 400; }
.danger { color: #b23b2b; }
.small-print { font-family: var(--font-industrial); font-size: 0.85rem; letter-spacing: 0.01em; }

/* Buttons + forms: system-ui widgets */
button, .btn { font-family: var(--font-ui); }
button, .btn {
  font: inherit;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  text-decoration: none;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
button.link { border: none; background: none; padding: 0; color: inherit; font-weight: 400; font-family: var(--font-mono); }
button.link.danger:hover { color: #b23b2b; }

input, textarea, select {
  font: inherit;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  border-radius: 4px;
  width: 100%;
}
textarea.mono, input.mono { font-family: var(--font-mono); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.form { max-width: 640px; display: grid; gap: 1rem; }
.form label { display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.92rem; }
.form label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.form label.check input { width: auto; }
.form .radio-group { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.form .grid2 { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form .actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.form .actions button[type=submit] { background: var(--text); color: var(--bg); border: none; }
.form .actions button[type=submit]:hover { background: var(--accent); color: var(--bg); }

/* Tables */
.rows { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.rows th, .rows td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); }
.rows th { color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.rows .empty { color: var(--muted); }

/* Page chrome */
.page-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.page-head .views { color: var(--muted); font-size: 0.85rem; }
.page-head .btn { margin-left: auto; }

.flash {
  max-width: 1080px; margin: 1rem auto 0; padding: 0.7rem 1.4rem;
  border: 1px solid; border-radius: 4px; font-weight: 700; font-size: 0.92rem;
}
.flash.ok { border-color: var(--accent); color: var(--accent); }
.flash.error { border-color: #b23b2b; color: #b23b2b; }

/* Landing: brochure, show-over-tell */
/* Generous vertical rhythm between adjacent top-level sections in the main
   content block (used on the homepage and the standalone preview page). */
main.wrap > section + section { margin-top: 4rem; }
.hero { margin: 2rem 0 0.5rem; }
.hero .sub { font-size: 1.15rem; max-width: 40rem; color: var(--text); }
/* Primary call to action (get in touch): a prominent, clickable lead-in. */
.cta { width: 100%; line-height: 1.6; padding: 1rem 1.25rem; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; }
.cta a { font-weight: 800; }
.cta a[href^="mailto:"] { text-underline-offset: 3px; }
/* Why-MapStack cards: boxless stacked list on narrow (no side padding / no
   dividers). At >=760px they become a grid sharing rows, each card separated
   from its left neighbour by a subtle vertical rule like the pricing tiers. */
.features { display: grid; grid-template-columns: 1fr; gap: 1.25rem 0; margin: 1.5rem 0 3rem; }
.features .feature { list-style: none; min-width: 0; }
.features .feature strong { display: block; margin-bottom: 0.2rem; }
.features .feature p { margin: 0.3rem 0 0; }
/* Each "Why MapStack" card is written but CSS-hidden until it is fulfilled;
   reveal one by one by dropping the "hidable" class (or unhiding it). */
.feature.hidable { display: none; }
.features .shots { color: var(--muted); font-family: var(--font-industrial); font-size: 0.85rem; }
.steps { line-height: 1.9; }
.contact { max-width: 560px; display: grid; gap: 0.9rem; }
.contact label { display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.92rem; }

/* Comparison table */
.table-wrap { margin: 0; overflow-x: auto; flex: 1 1 auto; }
.compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.compare th, .compare td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.compare thead th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); }
/* "Location" header: show the short "Loc." on narrow, the full word on wide. */
.compare thead th .long { display: none; }
.compare tbody tr:last-child td { border-bottom: none; }
.compare tr.me { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Product names must not break mid-word (no hyphenation inside "MapTiler",
   "Mapbox", "OpenMapTiles"): allow wrapping only at whitespace, overriding the
   table-wide overflow-wrap below. */
.compare .cmp-name { font-weight: 800; white-space: normal; overflow-wrap: normal; word-break: normal; }
.compare td { overflow-wrap: anywhere; word-break: normal; }
/* Muted links used inside the Comparison table (MapTiler pricing, Mittelstand,
   Mapbox pricing, the Google price-hike article): keep the underline but drop
   the accent colour so it reads as body text. */
a.muted-link { color: inherit; }
a.muted-link:hover { color: var(--accent); }

/* Vertical "Independent -> Corporate" arrow to the left of the alternatives
   table, echoing the gradient-axis that used to sit beside the list. The arrow
   stays to the side on narrow viewports too (it takes little width); only its
   labels sit above and below the stretched stem, so it never crowds the table. */
.alt-with-arrow { display: flex; align-items: stretch; gap: 1.25rem; }
.alt-arrow { display: none; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 2.6rem 0.3rem 0; color: var(--muted); }
.alt-arrow-top { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); writing-mode: horizontal-tb; }
.alt-arrow-bottom { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.alt-arrow-stem { display: flex; flex-direction: column; align-items: center; font-weight: 900; font-size: 1.1rem; line-height: 1; color: var(--muted); }
.alt-inst { width: 2px; flex: 1 1 auto; min-height: 120px; background: linear-gradient(to bottom, var(--accent), var(--muted)); margin: 0.25rem 0; }

/* Below the single 760px breakpoint each alternative becomes a stacked card:
   the Business cell drops out of the row and becomes a full-width line under
   the name/price/location, and the header row is hidden (the table border and
   wraps become the card borders; the arrow is hidden by the base rule above). */
@media (max-width: 759px) {
  .compare { display: block; border: 0; background: transparent; }
  .compare thead { display: none; }
  .compare tbody { display: block; }
  .compare tbody tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 1rem;
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .compare tbody tr td { border-bottom: 0; padding: 0; }
  .compare td { font-size: 0.9rem; }
  .compare td.cmp-name { font-size: 1rem; }
  /* Business description: full-width row under name / price / location. */
  .compare td:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--muted);
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
}

/* Pricing */
/* Pricing: boxless tiers. On narrow they stack with no dividers; at >=760px
   they sit side by side, separated by a subtle vertical rule. */
.pricing { display: flex; flex-direction: column; gap: 1.5rem 0; margin: 1.5rem 0; }
.pricing .tier { min-width: 0; padding: 0.25rem 0; }
.pricing .tier h3 { margin-top: 0; }
.pricing .price { font-size: 1.6rem; font-weight: 900; }
.pricing .price small { font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.pricing ul { margin: 0; padding: 0; }
.pricing li { margin: 0.3rem 0; list-style: none; }

/* Login card */
.login-card { max-width: 360px; margin: 4rem auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; }
.login-card form { display: grid; gap: 1rem; }
.login-card label { display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.92rem; }

/* Map sheet */
.map-sheet { display: grid; gap: 1rem; grid-template-columns: 1fr; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); }
.map-canvas { height: 62vh; min-height: 420px; }
.legend { padding: 1rem; border-left: 0; border-top: 1px solid var(--border); }
.map-sheet .legend { padding: 1rem; border-left: 0; border-top: 1px solid var(--border); }
.legend .legend-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0; cursor: pointer; font-size: 0.9rem; }
.legend .swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.legend input { width: auto; }

/* Modern full-bleed map with a floating, collapsible legend drawer (the
   "sheet" style from the 2026 example map). */
.map-stage { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); }
.map-stage .map-canvas { height: 68vh; min-height: 480px; border-radius: inherit; }
.legend-sheet { position: absolute; left: 0.9rem; top: 0.9rem; z-index: 5; width: min(320px, calc(100% - 1.8rem)); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 18px var(--shadow); }
.legend-sheet summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; cursor: pointer; list-style: none; font-weight: 800; }
.legend-sheet summary::-webkit-details-marker { display: none; }
.legend-sheet .summary-header { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-sheet .swipe-indicator { color: var(--muted); font-weight: 700; }
.legend-sheet details[open] summary { border-bottom: 1px solid var(--border); }
.legend-sheet .inner { padding: 0.6rem 0.9rem 0.8rem; max-height: 46vh; overflow: auto; }
.legend-sheet .legend-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0; cursor: pointer; font-size: 0.9rem; }

/* >=760px — the single mobile-first breakpoint. Rows share columns and the
   vertical dividers / left rules between them switch on. */
@media (min-width: 760px) {
  /* Why-MapStack cards share 3 columns; each card gets a left rule except the
     first in a row. The `:nth-child(An+B of :not(.hidable))` guard removes the
     divider only from cards that are actually visible first-in-row: hidden
     (.hidable) cards are display:none and collapse without a gap, so they must
     be excluded from the nth-child filter or the count would be thrown off. */
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features .feature { border-left: 1px solid var(--border); padding-left: 2.5rem; }
  .features .feature:first-child,
  .features .feature:nth-child(3n+1 of :not(.hidable)) { border-left: 0; padding-left: 0; }
  /* Alternatives arrow stays beside the table with a portrait stem and its
     labels flushed above/below (already the base layout on all widths). */
  /* Pricing tiers share a row, separated by a vertical rule. */
  .pricing { flex-direction: row; gap: 0 2.5rem; }
  .pricing .tier { flex: 1 1 220px; }
  .pricing .tier + .tier { border-left: 1px solid var(--border); padding-left: 2.5rem; }
  /* Map/legend share a row: legend moves to the right with a left rule. */
  .map-sheet { grid-template-columns: minmax(0, 1fr) 260px; }
  .legend { border-left: 1px solid var(--border); border-top: 0; }

  .alt-arrow { display: flex; }
  /* Expand the "Loc." header column header to "Location" on wide views. */
  .compare thead th .short { display: none; }
  .compare thead th .long { display: inline; }
}

.report { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.report .from { color: var(--muted); font-size: 0.85rem; }
.report pre { white-space: pre-wrap; }

/* Editing: wide map editor. The whole page widens to 1600px (the shared
   .wrap cap is lifted via .wrap-wide for editor pages), the map takes 2/3 and
   the form/legend 1/3, stacking vertically on narrow viewports. */
.wrap-wide { max-width: 1600px; }
/* On the wider editing pages the header/footer bars widen to match the page. */
body.wide-page .topbar { max-width: 1600px; }
body.wide-page .topbar .inner { max-width: 1600px; }
body.wide-page .foot-band { max-width: 1600px; }
.editor-shell { max-width: 1600px; margin: 0 auto; }
.editor-wide { max-width: 1600px; }
.editor-wrap { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.editor-form { display: grid; gap: 1rem; }
.editor-form h2 { margin-top: 0; }
.editor-map { position: sticky; top: 1rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); }
/* Landscape-tablet viewports and wider: the map fills the viewport height up
   to a reasonable maximum (so overscroll never leaves a gap under the bar). */
.editor-map .map-canvas { height: min(100vh, 52rem); min-height: 380px; }

/* Zoom radio buttons for Published/Draft: enlarged ~1.5x and the labels kept
   on the same line as the radio input. */
.editor-form .radio-group { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.editor-form .radio-group .check { display: flex; align-items: center; gap: 0.55rem; font-weight: 400; }
.editor-form .radio-group .check input[type="radio"] {
  width: 1.15rem; height: 1.15rem; cursor: pointer; accent-color: var(--accent);
}
.popup-save { margin-left: auto; align-self: center; text-align: right; }

/* Datasets list (below the map on the edit page): inline legend editing. */
.edit-legend { margin-top: 1.5rem; }
.edit-legend-form { display: grid; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.edit-legend-form label { display: grid; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; }
/* Bare preview / legend description paragraph. */
.legend-desc { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
/* Breadcrumb link in the map edit h1 (the map name stays non-link text). */
.crumb { color: var(--muted); font-weight: 600; }
a.crumb { color: var(--muted); text-decoration: none; }
a.crumb:hover { color: var(--accent); text-decoration: underline; }
.edit-datasets { margin-top: 1.5rem; }
.edit-dataset { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin-bottom: 0.75rem; overflow: hidden; }
.edit-dataset > summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; cursor: pointer; font-weight: 700; list-style: none; }
.edit-dataset > summary::-webkit-details-marker { display: none; }
.edit-dataset[open] > summary { border-bottom: 1px solid var(--border); }
.edit-dataset .ds-body { padding: 0.9rem 1rem; display: grid; gap: 0.75rem; }
.edit-dataset .ds-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.edit-dataset label { display: grid; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; }
.edit-dataset input[type="checkbox"] { width: auto; }

/* Spreadsheet table editing for a dataset's features. */
.sheet { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sheet th, .sheet td { border: 1px solid var(--border); padding: 0.2rem 0.4rem; text-align: left; vertical-align: top; }
.sheet th { background: var(--panel-2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: 0; }
.sheet td input { width: 100%; border: none; background: transparent; padding: 0; font-size: 0.82rem; }
.sheet td input:focus { outline: none; background: var(--panel-2); }
.sheet tr.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sheet-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.sheet-row-head { width: 2rem; color: var(--muted); font-size: 0.75rem; text-align: right; }

@media (max-width: 900px) {
  .editor-wrap { grid-template-columns: 1fr; }
  .editor-map { position: static; }
  /* Narrower viewports: shorter map (40vh) rather than the full-viewport fill. */
  .editor-map .map-canvas { height: 40vh; min-height: 260px; }
  .edit-dataset .ds-row { grid-template-columns: 1fr; }
}

/* Footer: no box — just a subtle top rule separating it, with generous space
   below so it sits clear of the very bottom of the page. It is a left-aligned
   block: the site links (Terms / Privacy / Security / Contact us) plus, when
   signed in, the account controls, then the copyright on its own line. Nothing
   is floated to the right. */
.foot-band {
  max-width: 1080px; margin: 2rex auto;
  border: 0; border-top: 1px solid var(--border);
}
.foot {
  max-width: 1080px; margin: 0 auto; padding: 1rem 1.4rem;
  color: var(--muted);
  font-family: var(--font-industrial); font-size: 0.85rem;
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); text-decoration: underline; }
.foot-links {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center;
  margin: 0;
}
.foot .who { color: var(--text); }
.foot .foot-copy { margin: 0.9rem 0 0; }
.foot form.inline button.footer-link {
  font-family: var(--font-industrial); font-size: 0.85rem;
  color: var(--muted); font-weight: 400; letter-spacing: inherit;
}
.foot form.inline button.footer-link:hover { color: var(--accent); text-decoration: underline; }

.admin-nav { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; }
.admin-nav a { font-weight: 700; }

/* Legal (Terms / Privacy) pages */
.legal { max-width: 760px; line-height: 1.6; }
.legal h1 { font-size: 2.2rem; }
.legal h2 { margin-top: 2rem; }
.legal ol, .legal ul { padding-left: 1.4rem; list-style: revert; }
.legal li { margin: 0.35rem 0; }

/* User created / last-login details */
.user-dates { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 0.5rem 0 1.25rem; }
.user-dates dt { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.user-dates dd { margin: 0.15rem 0 0; font-weight: 700; }