/* Cold Light — clickonthemountain.com
   Palette is the subject: snow in sun, snow in open shade, and the 18%
   card a meter is built around. Nothing here is decorative. */

:root {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --paper: #F6F4EF;
  --panel: #ECE8E0;
  --ink: #14171A;
  --ink-soft: #4A5058;
  --rule: #DCD8CF;
  --shade: #2E4A6B;
  --shade-fill: #DDE4EC;
  --grey18: #7C7C7C;
  --alpenglow: #A8442A;

  --measure: 730px;
  --shell: 1180px;
  --wide: 1040px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101214;
    --panel: #171A1D;
    --ink: #E8E6E1;
    --ink-soft: #969CA3;
    --rule: #262A2E;
    --shade: #7FA8D4;
    --shade-fill: #1C2A3A;
    --grey18: #6E7276;
    --alpenglow: #D2705A;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.62;
  letter-spacing: -0.003em;
  font-synthesis-weight: none;
}

@media (max-width: 640px) {
  body { font-size: 17px; line-height: 1.65; }
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 48px; }
@media (max-width: 640px) { .shell { padding: 0 24px; } }

.measure { max-width: var(--measure); }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--rule); padding: 28px 0 0; }

.masthead__lockup { display: block; text-decoration: none; color: inherit; }

.masthead__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1;
}

.masthead__domain {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  margin: 6px 0 0;
}

.masthead__sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  margin: 12px 0 0;
  max-width: var(--measure);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.nav a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover, .nav a:focus { border-bottom-color: var(--shade); }
.nav a[aria-current="page"] { border-bottom-color: var(--shade); }

.nav--utility { border-top: 1px solid var(--rule); margin-top: 0; }
.nav--utility a { color: var(--ink-soft); }

/* ---------- article ---------- */

main { padding: 48px 0 96px; }

.kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--shade);
  margin: 0 0 12px;
  display: block;
  text-decoration: none;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.35rem + 2.3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: var(--measure);
}

/* The overline sits directly above the H1 and is where a headline block
   qualifies the publication. --alpenglow is the warm signal colour and means
   exactly that here, as everywhere else on the site. */
.overline {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--alpenglow);
  border-left: 2px solid var(--alpenglow);
  padding-left: 12px;
  margin: 0 0 14px;
  max-width: var(--measure);
}

.dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: var(--measure);
}

.byline {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  max-width: var(--measure);
}

.tagrail {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}
.tagrail a { color: var(--ink-soft); text-decoration: none; }
.tagrail a:hover { color: var(--shade); text-decoration: underline; }

.prose { max-width: var(--measure); }

.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2.4em 0 0.6em;
}

.prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 2em 0 0.5em;
}

.prose p { margin: 0 0 1.15em; }

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

.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.prose li { margin: 0 0 0.4em; }

.prose blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--grey18);
  color: var(--ink-soft);
  font-style: italic;
}

.prose strong { font-weight: 700; }

/* ---------- components ---------- */

.fieldnote, .ednote, .placecard {
  max-width: var(--wide);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.fieldnote {
  background: var(--panel);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 24px;
  margin: 2em 0;
}

.fieldnote__title,
.placecard__title {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--shade);
  margin: 0 0 12px;
  font-weight: 500;
}

.fieldnote dl, .placecard dl { margin: 0; display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 6px 16px; }
.fieldnote dt, .placecard dt { color: var(--ink-soft); }
.fieldnote dd, .placecard dd { margin: 0; }

.fieldnote__source, .placecard__source {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

.ednote {
  border-left: 2px solid var(--alpenglow);
  padding: 4px 0 4px 18px;
  margin: 2em 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 17px;
  font-style: italic;
  letter-spacing: 0;
  max-width: var(--measure);
}
.ednote p { margin: 0 0 0.6em; }
.ednote p:last-child { margin: 0; }

.placecard {
  border: 1px solid var(--rule);
  padding: 20px 24px;
  margin: 2em 0;
}

/* dormancy statement — the one warm thing on the site */
.dormancy {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--alpenglow);
  border-left: 2px solid var(--alpenglow);
  padding-left: 14px;
  margin: 16px 0;
}

figure { margin: 2.4em 0; max-width: var(--wide); }
figure img, figure svg { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }

figcaption {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 10px;
}
.credit { color: var(--grey18); }

table {
  width: 100%;
  max-width: var(--wide);
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  margin: 2em 0 0.6em;
}
th, td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { border-bottom: 1px solid var(--shade); color: var(--shade); text-transform: uppercase; letter-spacing: 0.1em; }
.table-source { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 2em; }

/* ---------- index rows ---------- */

.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--rule); padding: 22px 0; }
.row__meta { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 6px; }
.row__meta .col { color: var(--shade); text-transform: uppercase; letter-spacing: 0.14em; }
.row h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin: 0 0 6px; }
.row h3 a { color: inherit; text-decoration: none; }
.row h3 a:hover { text-decoration: underline; text-decoration-color: var(--shade); }
.row p { margin: 0; color: var(--ink-soft); font-size: 17px; }

.section-head {
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--shade);
  border-bottom: 1px solid var(--shade);
  padding-bottom: 8px;
  margin: 64px 0 0;
}
.section-head:first-of-type { margin-top: 40px; }

/* problem index */
.problems { list-style: none; margin: 24px 0 0; padding: 0; }
.problems li { border-bottom: 1px solid var(--rule); padding: 16px 0; max-width: var(--wide); }
.problems q { font-family: var(--font-body); font-size: 19px; font-style: italic; display: block; margin-bottom: 4px; }
.problems q::before, .problems q::after { content: none; }
.problems .answer { color: var(--ink-soft); font-size: 17px; }
.problems a { color: var(--shade); }

/* related */
.related { margin: 64px 0 0; max-width: var(--wide); border-top: 1px solid var(--shade); padding-top: 8px; }

/* corrections */
.corrections-line { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); margin: 48px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); max-width: var(--measure); }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--rule);
  margin-top: 96px;
  padding: 32px 0 64px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.footer a { color: var(--ink-soft); }
.footer p { margin: 0 0 10px; max-width: var(--wide); }

/* ---------- print ---------- */

@media print {
  .masthead nav, .nav, .related, .footer nav { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .fieldnote, .placecard { border: 1px solid #999; background: none; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .prose a::after { content: ""; }
}

/* ---------- a11y ---------- */

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

.skip {
  position: absolute; left: -9999px;
  font-family: var(--font-mono); font-size: 12.5px;
}
.skip:focus { left: 8px; top: 8px; background: var(--paper); padding: 10px 14px; border: 1px solid var(--shade); z-index: 10; }