/* Shared by the landing page and the text pages (/about, /import). It borrows the map's
   own look (styles/theme.yaml): Fira Sans for names, letter-spaced capitals for areas, a
   serif italic for water and ice, the hut red, and the F-road's dark brown line with
   ochre dashes as the rule. Light only, on purpose: it sits beside a light map. The
   fonts are declared in web/layouts/_partials/fonts.html, which knows where they are. */

/* One column of 68rem, text near 65 characters. */
:root {
  color-scheme: light;
  --paper: #f4f6f5;      /* glacier white, a touch of green */
  --terrain: #e4e8df;    /* the map's land tint, lightened */
  --card: #ffffff;
  --ink: #1d1d1b;        /* label */
  --muted: #565b55;
  --line: #d3d8d2;
  --road: #3d2a1a;       /* F-road */
  --ochre: #d08a3c;      /* F-road dash */
  --hut: #b3121a;        /* hut triangle and label */
  --water: #1f5fbf;      /* water label */
  --sans: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  /* the F-road: dark brown line, ochre dashes */
  --froad: repeating-linear-gradient(90deg, var(--ochre) 0 9px, transparent 9px 15px) center / 100% 2px no-repeat, var(--road);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-text-size-adjust: 100%; }
a { color: var(--road); text-decoration-color: var(--ochre); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--hut); }
a:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }

.top, .bottom .cols { max-width: 68rem; margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }

/* Header: the favicon mark (Iceland silhouette) and the name beside it. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; }
.mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.logo { display: block; width: 24px; height: 24px; }
.top nav { display: flex; gap: 20px; font-size: .95rem; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ochre); }

h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); }
h3 { font-size: 1.2rem; }
.route { display: block; height: 6px; background: var(--froad); }

/* Footer */
.bottom { padding-block: 0 40px; }
.bottom .route { margin: 0 0 28px; }
.bottom .cols { display: flex; flex-wrap: wrap; gap: 20px 48px; justify-content: space-between; font-size: .92rem; color: var(--muted); }
.bottom .cols p:first-child { max-width: 36rem; }
.mail { user-select: all; }