/* Self-hosted fonts (from Fontsource, the Google Fonts files on npm).
   Latin + Latin Extended subsets; the browser only downloads a file
   when the page uses that weight and those characters. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/newsreader-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/newsreader-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/newsreader-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/newsreader-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/newsreader-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/newsreader-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/newsreader-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/newsreader-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/newsreader-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/newsreader-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/newsreader-latin-ext-500-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/newsreader-latin-500-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/public-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/public-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/public-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/public-sans-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/public-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/public-sans-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/public-sans-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/public-sans-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* self-hosted fonts (src/fonts) */
/* ============ SITE FOOTER ============
   Bio, Site links, Projects, and the search & rescue note.
   Everything is scoped to .site-footer (plus the floating .to-top button
   and .toast), so none of it leaks into the rest of the page. Colors and
   fonts come from the site's own tokens in style.css. The previous
   version of this file is kept in footer.less.bak. */
.site-footer {
  /* footer palette, mapped onto the site tokens */
  --ft-accent: var(--rust);
  --ft-accent-soft: color-mix(in srgb, var(--rust) 14%, transparent);
  --ft-text: var(--ink);
  --ft-muted: var(--ink-soft);
  --ft-line: var(--line);
  --ft-danger: var(--red-500);
  --ft-live: var(--moss);
  display: block;
  /* the generic footer rule in style.css is a flex row */
  margin-top: 56px;
  padding: 32px 0 24px;
  border-top: 1px solid var(--ft-line);
  color: var(--ft-text);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 15px;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer svg {
  display: block;
}
.site-footer p {
  margin: 0;
}
.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px 40px;
  align-items: start;
  width: 100%;
  padding: 0 16px;
}
.footer-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ft-accent);
}
.footer-col h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ft-line), transparent);
}
/* ---------- BIO ---------- */
.bio-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}
.avatar-wrap {
  position: relative;
  flex: none;
  width: 84px;
  height: 84px;
  padding: 3px;
  border-radius: 50%;
  isolation: isolate;
}
.avatar-wrap::before,
.avatar-wrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--rust), #f2c46d, var(--moss), var(--rust));
  animation: ft-spin 6s linear infinite;
}
.avatar-wrap::before {
  inset: 0;
}
.avatar-wrap::after {
  inset: -8px;
  filter: blur(14px);
  opacity: 0.3;
  z-index: -1;
}
.avatar {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid var(--panel);
  border-radius: 50%;
  background: var(--panel);
  object-fit: cover;
}
.status-dot {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--panel);
  border-radius: 50%;
  background: var(--ft-live);
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--ft-live);
  border-radius: 50%;
  animation: ft-ping 2s ease-out infinite;
}
.bio-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bio-role {
  min-height: 1.4em;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ft-muted);
}
.bio-role .caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--ft-accent);
  animation: ft-blink 1s steps(1) infinite;
}
.footer-bio p {
  max-width: 52ch;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ft-muted);
}
.email-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 9px 14px 9px 12px;
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ft-text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.email-chip:hover,
.email-chip:focus-visible {
  border-color: var(--ft-accent);
  background: var(--ft-accent-soft);
  box-shadow: 0 0 24px color-mix(in srgb, var(--rust) 25%, transparent);
  outline: none;
}
.email-chip svg {
  width: 16px;
  height: 16px;
  stroke: var(--ft-accent);
}
.email-chip .copy-ico {
  opacity: 0.55;
  transition: opacity 0.2s;
}
.email-chip:hover .copy-ico {
  opacity: 1;
}
.coords {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ft-muted);
  opacity: 0.75;
}
.coords svg {
  width: 14px;
  height: 14px;
  stroke: var(--ft-accent);
}
/* ---------- LINK LISTS (Site, Projects) ---------- */
.link-list {
  /* the two project logos are full-colour flags, not line icons */
}
.link-list li + li {
  margin-top: 6px;
}
.link-list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: -10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ft-text);
  font-size: 0.95rem;
  transition: background 0.25s, color 0.25s;
}
.link-list a:hover,
.link-list a:focus-visible {
  background: var(--ft-accent-soft);
  outline: none;
}
.link-list .ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ft-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.25s, border-color 0.25s, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.link-list .ico svg {
  width: 16px;
  height: 16px;
  stroke: var(--ft-accent);
}
.link-list a:hover .ico,
.link-list a:focus-visible .ico {
  border-color: var(--ft-accent);
  background: color-mix(in srgb, var(--rust) 18%, transparent);
  transform: rotate(-8deg) scale(1.08);
}
.link-list .arrow {
  width: 14px;
  height: 14px;
  margin-left: auto;
  stroke: var(--ft-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s, transform 0.25s;
}
.link-list a:hover .arrow,
.link-list a:focus-visible .arrow {
  opacity: 1;
  transform: none;
}
.link-list a.alert .ico svg {
  stroke: var(--ft-danger);
}
.link-list a.alert:hover .ico {
  border-color: var(--ft-danger);
  background: color-mix(in srgb, var(--red-500) 15%, transparent);
}
.link-list a.fourteener .ico,
.link-list a.grand-canyon .ico {
  overflow: hidden;
  border: none;
  border-radius: 50%;
  background: none;
}
.link-list a.fourteener .ico svg {
  width: 32px;
  height: 32px;
}
.link-list a.grand-canyon .ico svg {
  width: 52px;
  height: 52px;
  margin: -10px 0 0 -9px;
}
.link-list a.timber-valley .ico svg {
  width: 32px;
  height: 32px;
}
.badge {
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--rust) 40%, transparent);
  border-radius: 5px;
  background: var(--ft-accent-soft);
  color: var(--ft-accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge.live {
  border-color: color-mix(in srgb, var(--moss) 45%, transparent);
  background: color-mix(in srgb, var(--moss) 14%, transparent);
  color: var(--moss);
}
/* ---------- SEARCH & RESCUE NOTE (full width) ---------- */
.site-footer .sar {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px dotted var(--rust);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ft-muted);
}
.site-footer .sar svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  stroke: var(--ft-accent);
}
.site-footer .sar strong {
  color: var(--ft-text);
  font-weight: 600;
}
.site-footer .sar a {
  color: var(--ft-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--rust) 45%, transparent);
}
.site-footer .sar a:hover {
  border-color: var(--ft-accent);
}
/* ---------- BOTTOM BAR ---------- */
.footer-bottom {
  margin-top: 24px;
  padding: 16px 16px 0;
  border-top: 1px solid var(--ft-line);
  font-size: 0.85rem;
  color: var(--ft-muted);
}
/* ---------- BACK TO TOP (floating; only if the page has #toTop) ---------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.to-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.to-top .ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.to-top .ring circle {
  fill: none;
  stroke-width: 2.5;
}
.to-top .ring .track {
  stroke: var(--line);
}
.to-top .ring .bar {
  stroke: var(--rust);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}
.to-top .chev {
  width: 20px;
  height: 20px;
  stroke: var(--ink);
  transition: transform 0.25s;
}
.to-top:hover .chev {
  transform: translateY(-3px);
}
.to-top:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}
/* ---------- TOAST ("Email copied") ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--panel);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 30px);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes ft-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ft-blink {
  50% {
    opacity: 0;
  }
}
@keyframes ft-ping {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
  .footer-bio {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after,
  .to-top,
  .toast {
    animation: none !important;
    transition: none !important;
  }
}
/*
@import "styles/chart-cause.less";
@import "styles/chart-sex.less";
@import "styles/chart-age.less";
@import "styles/header.less";
*/
@layer base {
  html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }
  * {
    box-sizing: inherit;
  }
  *:before,
  *:after {
    box-sizing: inherit;
  }
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: top;
    display: flex;
  }
  ::selection {
    background: var(--sky);
    color: var(--panel-bg);
  }
  a {
    color: var(--rust);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
  }
  a:hover {
    color: var(--rust);
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
  }
  button {
    font-family: inherit;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/*
@import "styles/table.less";
@import "styles/style.less";
*/
:root {
  /* Widest the site gets; the page is centred inside it. On the main page
		this includes the 252px peak sidebar. */
  --max-page-width: 1280px;
  --ink: #23261f;
  --black-ink: #212121;
  /* #010101 */
  --ink-soft: #5b5f52;
  --panel: #efece3;
  --panel-bg: #f7f5ee;
  --panel-bg: transparent;
  --sky: #1c7dbe;
  --sky-ink: #0e5c8e;
  --rust: #b0532a;
  --rust-soft: #b0532a;
  --tequila-sunrise: red;
  --moss: #5b6e4f;
  --line: #c9c3b4;
  --line-strong: #a69e89;
  --shadow: 0 1px 0 rgba(35, 38, 31, 0.06);
  /* Cause tag palette -- fixed-lightness OKLCH swatches, evenly
		spaced by hue, so they stay legible with dark text in both
		light and dark theme (unlike --ink/--panel, these don't need
		a dark-mode override). One color per cause, assigned in
		CAUSE_ORDER; "Unclear" intentionally has no swatch and falls
		back to the neutral .cause-tag style below. */
  --red-500: oklch(0.72 0.15 0);
  --mustard-500: oklch(0.72 0.15 40);
  --turquoise-500: oklch(0.71 0.15 80);
  --azure-500: oklch(0.7 0.15 120);
  --fuchsia-500: oklch(0.69 0.15 160);
  --electric-blue-500: oklch(0.69 0.15 200);
  --steel-500: oklch(0.7 0.15 240);
  --iris-500: oklch(0.72 0.15 280);
  /* Mountain-range palette -- used only to color the small range
		icon in the peak list, one fixed color per range. Same
		fixed-lightness OKLCH approach as the cause palette above, so
		no dark-mode override is needed. */
  --range-orange: oklch(0.72 0.16 55);
  --range-blue: oklch(0.62 0.13 250);
  --range-red: oklch(0.6 0.19 25);
  --range-green: oklch(0.64 0.12 145);
  --range-yellow: oklch(0.83 0.15 95);
  --range-purple: oklch(0.58 0.15 305);
  --radius-s: 3px;
  --radius-m: 6px;
  --font-display: "Newsreader", Georgia, "Iowan Old Style", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  /*}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
	*/
  --ink: #e8e4d8;
  --ink-soft: #a6a190;
  --panel: #1d1a15;
  --panel-bg: rgba(29, 26, 21, 0.95);
  /* #232720 */
  --sky: #3e90c9;
  --sky-ink: #8fc4e8;
  --rust: #cf8100;
  /* #d9773f; */
  --rust-soft: #4F3100;
  /* #d9773f; */
  --moss: #86a06e;
  --line: #3a3d33;
  --line-strong: #4c5044;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
/*
}

:root[data-theme="dark"] {
    --ink: #e8e4d8;
    --ink-soft: #a6a190;
    --panel: #1b1d18;
    --panel-bg: #232720;
    --sky: #3e90c9;
    --sky-ink: #8fc4e8;
    --rust: #d9773f;
    --rust-soft: #d9773f;
    --moss: #86a06e;
    --line: #3a3d33;
    --line-strong: #4c5044;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
*/
/*
{
    outline: 2px solid var(--sky);
    outline-offset: 2px;
}
.wrap {
    max-width: var(--max-page-width);
    margin: 0 auto;
    padding: 0 28px 64px;
    min-width: 0;
}
*/
.eyebrow {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tequila-sunrise);
  /*color: var(--rust); */
  margin: 0 0 14px;
}
.deck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--tequila-sunrise);
  /* color: var(--ink-soft);*/
  margin: 0 0 18px;
}
.lede {
  max-width: 62ch;
  font-size: 15.5px;
  color: var(--ink-soft);
  margin: 0;
}
.lede strong {
  color: var(--ink);
  font-weight: 600;
}
.leaflet-control-zoom.leaflet-bar.leaflet-control a {
  background-color: var(--rust);
}
.stat {
  flex: 1;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}
.stat:last-child {
  border-right: none;
}
.stat-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
.stat-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
}
/* Masthead key figures: three database-driven stats stacked in one
	panel, separated by dotted rules. The panel stretches to the height
	of the intro panel beside it. */
.masthead .stat-panel {
  align-self: stretch;
}
.stat-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 4px 20px;
}
.stat-list .stat {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  /* caption (dt) comes first in the markup; show the number above it */
  justify-content: center;
  gap: 4px;
  padding: 16px 0;
  border-right: none;
  border-bottom: 1px dotted var(--rust);
}
.stat-list .stat:last-child {
  border-bottom: none;
}
.stat-list dd {
  margin: 0;
}
.stat-value--text {
  font-size: 18px;
}
.stat-caption {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}
/* ============ PEAK SIDEBAR ============ */
.neatline {
  display: flex;
  align-items: flex-start;
  /* sidebar + content, never wider than --max-page-width, centred */
  max-width: var(--max-page-width);
  margin: 0 auto;
}
.neatline > .wrap {
  flex: 1;
  min-width: 0;
}
.peak-sidebar {
  flex: none;
  width: 252px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--panel-bg);
  padding: 20px 14px 24px;
}
.peak-sidebar-head {
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  padding-bottom: 12px;
}
.peak-sidebar-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 10px;
}
.peak-sort {
  display: flex;
  gap: 4px;
}
.peak-sort-btn {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 3px;
  border-radius: var(--radius-s);
  cursor: pointer;
  text-align: center;
}
.peak-sort-btn:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}
.peak-sort-btn.is-active {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}
.peak-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.peak-item {
  display: flex;
  flex-direction: column;
}
.peak-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-s);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.peak-row:hover,
.peak-row:focus-visible {
  background: var(--panel);
}
.peak-row.is-active {
  background: var(--rust);
}
.peak-row.is-active .peak-row-name,
.peak-row.is-active .peak-row-elev {
  color: #fff;
}
.peak-icon {
  flex: none;
  color: var(--line-strong);
}
.peak-icon polygon {
  fill: currentColor;
}
.peak-icon[data-range="orange"] {
  color: var(--range-orange);
}
.peak-icon[data-range="blue"] {
  color: var(--range-blue);
}
.peak-icon[data-range="red"] {
  color: var(--range-red);
}
.peak-icon[data-range="green"] {
  color: var(--range-green);
}
.peak-icon[data-range="yellow"] {
  color: var(--range-yellow);
}
.peak-icon[data-range="purple"] {
  color: var(--range-purple);
}
.peak-row-name {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peak-row-elev {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
}
.peak-dropdown-wrap {
  display: none;
}
.peak-dropdown-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.peak-dropdown {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
}
/* ============ ATLAS ============ */
/* Single column now that Selection has moved into the peak list --
	this just wraps the map panel. */
.atlas {
  display: grid;
}
.panel {
  /* border: 1px solid var(--line); */
  border: 1px dashed var(--rust);
  border-radius: var(--radius-m);
  background: var(--panel-bg);
  /* box-shadow: var(--shadow); */
  box-shadow: var(--shadow), 0 0 24px 0 rgba(255, 132, 84, 0.25);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.panel-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0;
}
.panel-title .n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 8px;
}
.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.switch {
  width: 34px;
  height: 19px;
  border-radius: 10px;
  background: var(--line-strong);
  position: relative;
  transition: background 0.15s ease;
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--panel-bg);
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.toggle input:checked + .switch {
  background: var(--rust);
}
.toggle input:checked + .switch::after {
  transform: translateX(15px);
}
.toggle input:focus-visible + .switch {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}
.map-body {
  padding: 10px 14px 18px;
}
svg#map {
  width: 100%;
  height: auto;
  display: block;
}
.peak-context {
  fill: var(--line-strong);
  opacity: 0.55;
}
.peak-death {
  fill: var(--ink);
  stroke: var(--panel-bg);
  stroke-width: 1px;
}
.peak-death.is-dim {
  opacity: 0.28;
}
.peak-hit {
  fill: transparent;
}
.peak-death,
.peak-context {
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
/* Default marker color follows the mountain's range, same palette
	as the .peak-icon glyphs in the sidebar -- peak-death (has a
	recorded death) is fully opaque, peak-context (no recorded
	death) stays a quieter, more transparent echo of the same hue,
	so size/opacity still carries that distinction now that color
	doesn't. */
.peak-death[data-range="orange"],
.peak-context[data-range="orange"] {
  fill: var(--range-orange);
}
.peak-death[data-range="blue"],
.peak-context[data-range="blue"] {
  fill: var(--range-blue);
}
.peak-death[data-range="red"],
.peak-context[data-range="red"] {
  fill: var(--range-red);
}
.peak-death[data-range="green"],
.peak-context[data-range="green"] {
  fill: var(--range-green);
}
.peak-death[data-range="yellow"],
.peak-context[data-range="yellow"] {
  fill: var(--range-yellow);
}
.peak-death[data-range="purple"],
.peak-context[data-range="purple"] {
  fill: var(--range-purple);
}
.peak-death.is-hover,
.peak-context.is-hover {
  fill: #fff;
  opacity: 1;
  transform: scale(1.01);
}
.heat-circle {
  fill: var(--rust);
  pointer-events: none;
  transition: opacity 0.15s ease, stroke-width 0.15s ease;
}
.heat-circle.is-hover {
  opacity: 0.95;
  stroke: var(--ink);
  stroke-width: 2px;
}
.range-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: var(--ink-soft);
  opacity: 0.85;
  text-transform: uppercase;
}
.range-label[data-range="orange"] {
  fill: var(--range-orange);
}
.range-label[data-range="blue"] {
  fill: var(--range-blue);
}
.range-label[data-range="red"] {
  fill: var(--range-red);
}
.range-label[data-range="green"] {
  fill: var(--range-green);
}
.range-label[data-range="yellow"] {
  fill: var(--range-yellow);
}
.range-label[data-range="purple"] {
  fill: var(--range-purple);
}
.map-caption {
  font-family: var(--font-body);
  font-size: 10px;
  fill: var(--ink-soft);
  opacity: 0.6;
  letter-spacing: 0.04em;
}
/* ============ PEAK LIST DETAIL (was the Selection panel) ============ */
.peak-row-detail {
  padding: 2px 8px 10px 31px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peak-detail-summary {
  font-size: 12px;
  color: var(--ink-soft);
}
.peak-detail-summary b {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}
.breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-soft);
}
.breakdown-row b {
  color: var(--ink);
  font-weight: 600;
}
/* ============ CHARTS ============ */
.charts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}
.chart-card {
  padding: 16px 18px 18px;
}
.bar-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
}
.bar-row {
  display: grid;
  grid-template-columns: 74px 1fr 24px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 0;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.bar-label {
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  height: 9px;
  background: var(--line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--rust);
  border-radius: 2px;
  opacity: 0.85;
  transition: opacity 0.15s ease, width 0.2s ease;
}
.bar-row.is-active .bar-fill {
  opacity: 1;
}
.bar-row.is-dim .bar-fill {
  opacity: 0.28;
}
.bar-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.bar-row.is-active .bar-count {
  color: var(--rust);
  font-weight: 600;
}
.year-card {
  grid-column: span 4;
  padding: 18px 18px 8px;
  /* Grid items default to a content-based min-width, which
		overrides a descendant's overflow-x:auto and lets the year
		chart force this whole panel (and the grid track) wider than
		the viewport. min-width:0 lets it shrink to the track's
		actual width so #chartYear's own scroller can do its job. */
  min-width: 0;
}
.year-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Year pager: the arrows and range label beside "Fatalities by Year".
	The chart shows as many years as fit its width; the arrows page
	through the rest (see yearPager in script.js). */
.year-pager {
  display: flex;
  align-items: center;
  gap: 6px;
}
.year-pager[hidden] {
  display: none;
}
.year-pager-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.year-pager-btn:hover:not(:disabled) {
  border-color: var(--rust);
  color: var(--rust);
}
.year-pager-btn:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}
.year-pager-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.year-pager-btn svg {
  width: 14px;
  height: 14px;
}
.year-pager-range {
  min-width: 92px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.year-chart {
  height: 150px;
  margin-top: 16px;
  padding: 0 0 10px;
  /* A fixed window onto the year columns: no scrollbar. The pager
		slides .year-chart-inner left/right a page at a time, and
		swipes are handled in JS, so only vertical panning is left to
		the browser. */
  overflow: hidden;
  touch-action: pan-y;
  outline: none;
}
.year-chart:focus-visible {
  box-shadow: 0 0 0 2px var(--rust);
  border-radius: 4px;
}
.year-chart-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
  width: max-content;
  position: relative;
  /* gap is overwritten by the pager so a page fills the width exactly */
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .year-chart-inner {
    transition: none;
  }
}
.year-chart-inner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  height: 1px;
  background: var(--line);
}
.year-col {
  flex: 0 0 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
  cursor: pointer;
}
.year-bar-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.year-bar {
  width: 100%;
  max-width: 22px;
  background: var(--rust);
  border-radius: 3px 3px 2px 2px;
  opacity: 0.85;
  transition: opacity 0.15s ease, height 0.2s ease;
}
.year-col.is-active .year-bar {
  opacity: 1;
}
.year-col.is-dim .year-bar {
  opacity: 0.25;
}
.year-col.is-active .year-bar-value {
  color: var(--rust);
}
.year-label {
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-top: 2px;
  white-space: nowrap;
}
/* ============ LOG TABLE ============ */
.log {
  margin-top: 22px;
}
.log-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 1em 1em 0 1em;
}
.count-readout {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.clear-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.clear-btn:not(:disabled):hover {
  border-color: var(--rust);
  color: var(--rust);
}
.clear-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rust);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--rust);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.submit-btn:hover {
  opacity: 0.88;
}
/* pushes the toolbar's copy of the button to the far right, past
	the title/count/clear-filter group */
.log-toolbar .submit-btn {
  margin-left: auto;
}
.log-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding: 0 1em 1em 1em;
}
.table-scroll {
  overflow-x: auto;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 680px;
  box-shadow: var(--shadow), 0 0 24px 0 rgba(255, 132, 84, 0.25);
}
thead th {
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  text-align: left;
  padding: 0;
  border-bottom: 1px solid var(--line-strong);
  z-index: 1;
}
thead th button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 11px 14px;
  width: 100%;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
thead th button:hover {
  color: var(--ink);
}
thead th .arrow {
  font-size: 9px;
  opacity: 0;
  transition: opacity 0.1s ease;
}
thead th.sorted .arrow {
  opacity: 1;
  color: var(--rust);
}
thead th.sorted button {
  color: var(--ink);
}
tbody td,
tbody th[scope="row"] {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 400;
  text-align: left;
}
tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: none;
}
tbody tr:hover {
  background: var(--panel);
}
tbody tr.is-match {
  background: color-mix(in srgb, var(--rust) 8%, transparent);
}
td.num,
th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
td.id-cell {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
}
.cause-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}
/* Per-cause color, keyed off the same string stored in the
	database -- set once here rather than computed in JS. Text is
	a fixed dark color rather than var(--ink) since these swatches
	are a fixed mid-high lightness regardless of site theme, and a
	theme-following color wouldn't keep enough contrast against
	them in dark mode. "Unclear" has no rule here, so it keeps the
	neutral fallback style above. */
.cause-tag[data-cause="Fall"] {
  background: var(--red-500);
  border-color: transparent;
  color: #000;
}
.cause-tag[data-cause="Falling rock/ice"] {
  background: var(--mustard-500);
  border-color: transparent;
  color: #000;
}
.cause-tag[data-cause="Avalanche"] {
  background: var(--turquoise-500);
  border-color: transparent;
  color: #000;
}
.cause-tag[data-cause="Cardiac event"] {
  background: var(--azure-500);
  border-color: transparent;
  color: #000;
}
.cause-tag[data-cause="Lightning"] {
  background: var(--fuchsia-500);
  border-color: transparent;
  color: #000;
}
.cause-tag[data-cause="Weather exposure"] {
  background: var(--electric-blue-500);
  border-color: transparent;
  color: #000;
}
.cause-tag[data-cause="Accident, other"] {
  background: var(--steel-500);
  border-color: transparent;
  color: #000;
}
.cause-tag[data-cause="Intentional"] {
  background: var(--iris-500);
  border-color: transparent;
  color: #000;
}
.muted-cell {
  color: var(--ink-soft);
  opacity: 0.6;
}
tbody tr.has-story {
  cursor: pointer;
}
.chevron {
  display: inline-block;
  font-size: 10px;
  color: var(--rust);
  margin-left: 4px;
  transition: transform 0.15s ease;
  opacity: 0.75;
}
tr.expanded .chevron {
  transform: rotate(90deg);
}
tr.story-row td {
  padding: 16px 20px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.story-body {
  /* max-width: 68ch;*/
  width: 100%;
}
.story-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  margin: 0 0 10px;
  color: var(--ink);
}
.story-body p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.65;
}
.story-body p:last-child {
  margin-bottom: 0;
}
.story-list {
  margin: 4px 0 0;
  padding-left: 19px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.story-list li {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}
.story-list li strong {
  color: var(--ink);
}
footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}
footer .src {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11.5px;
  max-width: 52ch;
}
.story-body h3 {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.65;
}
@media (max-width: 860px) {
  .peak-sidebar {
    display: none;
  }
  .peak-dropdown-wrap {
    display: block;
    margin: 0 0 20px;
  }
  .map-panel {
    display: none;
  }
  .atlas {
    grid-template-columns: 1fr;
  }
  .charts {
    grid-template-columns: repeat(2, 1fr);
  }
  .year-card {
    grid-column: span 2;
  }
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .stat:last-child {
    border-bottom: none;
  }
}
@media (max-width: 520px) {
  .charts {
    grid-template-columns: 1fr;
  }
  .year-card {
    grid-column: span 1;
  }
  .lede {
    max-width: 32ch;
  }
}
html,
aside {
  scrollbar-color: var(--rust) var(--line);
  /* var(--panel-bg) */
  scrollbar-width: thin;
}
@media (min-width: 320px) {
  .wrap {
    width: 100%;
    padding: 0 0.5em 64px;
    min-width: 320px;
    background-image: url(bg.webp);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: contain;
  }
  .masthead {
    padding: 3em 0 0 0;
    /* border-bottom: 1px solid var(--line); */
    display: grid;
    align-items: end;
    grid-template-columns: 1fr;
    grid-template-rows: fit-content fit-content fit-content;
    padding: 16px 0 0;
  }
  .masthead-sub {
    height: 100%;
    padding: 16px;
    grid-column: 1;
    grid-row: 2;
  }
  .stat-panel {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 3;
    margin-top: 22px;
  }
  h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(26px, 5.4vw, 56px);
    line-height: 1.02;
    margin: 0 0 8px;
    text-wrap: balance;
    letter-spacing: -0.01em;
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
  }
  h1 em {
    font-style: italic;
    font-weight: 500;
    color: #eee;
    /* var(--rust); */
  }
  h1 img {
    width: 75px;
    aspect-ratio: 1;
    margin-right: 32px;
  }
  .atlas {
    margin-top: 22px;
  }
}
@media (min-width: 801px) {
  .masthead {
    padding: 16px 0 32px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 32px;
    margin: 0;
  }
  h1 {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .masthead-sub {
    grid-column: 1;
    grid-row: 2;
  }
  .stat-panel {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
  .atlas {
    margin-top: 40px;
  }
}
@media (min-width: 1024px) {
  .wrap {
    padding: 0 28px 64px;
  }
  h1 img {
    width: 100px;
  }
}
/* ============ SCOPE TOGGLE (14er climbing | All) ============ */
/* Segmented radio control: the two radios are visually hidden, their
	labels are the segments, and .seg-thumb slides under the checked one. */
.cause-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dotted var(--rust);
  font-family: var(--font-body);
}
.cause-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cause-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-bg);
}
.cause-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.cause-seg label {
  position: relative;
  z-index: 1;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}
.cause-seg label:hover {
  color: var(--ink);
}
.cause-seg input:checked + label {
  color: #fff;
  cursor: default;
}
.cause-seg input:focus-visible + label {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}
.seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--rust);
  transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
}
#causeAll:checked ~ .seg-thumb {
  transform: translateX(100%);
}
.cause-desc {
  /* reserve two lines so layout doesn't jump on swap */
  min-height: calc(2 * 1.5em);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.cause-desc p {
  margin: 0;
}
.cause-desc strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 420px) {
  .cause-seg {
    width: 100%;
  }
  .cause-seg label {
    padding-inline: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .seg-thumb,
  .cause-seg label {
    transition: none;
  }
}
/* ============ SUBPAGES (about, contact, submit, lightning) ============ */
/* These pages share the main page's tokens, background, panels and
	footer. Everything here is scoped to body.subpage so the main
	page is unaffected. */
.subpage .wrap {
  width: 100%;
  max-width: var(--max-page-width);
  margin: 0 auto;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0 28px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.site-brand img {
  flex: none;
  width: clamp(56px, 9vw, 76px);
  aspect-ratio: 1;
}
.site-brand em {
  font-style: italic;
  font-weight: 500;
  color: #eee;
}
.site-brand:hover span {
  text-decoration: underline;
  text-decoration-color: var(--rust);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.page-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px;
}
.page-panel--narrow {
  max-width: 560px;
}
/* the main page's h1 rules lay out the site title; reset them here */
.subpage .page-panel h1 {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.page-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.page-panel p {
  margin: 0 0 14px;
}
.page-panel > p:last-child {
  margin-bottom: 0;
}
.page-lede {
  margin: 0 0 24px;
  padding-bottom: 18px;
  /* border-bottom: 1px dotted var(--rust); */
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
}
.subpage .prose h1 {
  margin-bottom: 18px;
}
.prose p {
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}
.subpage footer {
  /*
	max-width: 760px;
	*/
  margin-inline: auto;
}
/* ---- forms ---- */
.page-panel label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
/*
.page-panel input[type="email"],
.page-panel input[type="text"],
.page-panel input[type="number"],
.page-panel select,
.page-panel textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    color-scheme: dark;
}

.page-panel input::placeholder,
.page-panel textarea::placeholder {
    color: var(--ink-soft);
    opacity: 0.8;
}

.page-panel input:hover,
.page-panel select:hover,
.page-panel textarea:hover {
    border-color: var(--ink-soft);
}

.page-panel input:focus,
.page-panel select:focus,
.page-panel textarea:focus {
    outline: 2px solid var(--sky);
    outline-offset: 1px;
    border-color: var(--line-strong);
}

.page-panel textarea {
    min-height: 120px;
    resize: vertical;
}
*/
.field {
  margin-top: 16px;
}
.field:first-child {
  margin-top: 0;
}
.form-row {
  display: flex;
  gap: 12px;
}
.form-row .field {
  flex: 1;
  min-width: 0;
  margin-top: 16px;
}
.page-panel button {
  width: 100%;
  margin-top: 20px;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--rust);
  border: 1px solid var(--rust);
  border-radius: 20px;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.page-panel button:hover {
  opacity: 0.88;
}
.page-panel button:disabled {
  opacity: 0.6;
  cursor: default;
}
.page-panel .btn-quiet {
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--line-strong);
}
.page-panel .btn-quiet:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
  opacity: 1;
}
.msg {
  display: none;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  border-left: 3px solid currentColor;
  font-size: 14px;
  line-height: 1.5;
}
.msg.show {
  display: block;
}
.msg.info {
  background: color-mix(in srgb, var(--sky) 14%, transparent);
  color: var(--sky-ink);
}
.msg.error {
  background: color-mix(in srgb, var(--red-500) 14%, transparent);
  color: var(--red-500);
}
.msg.success {
  background: color-mix(in srgb, var(--moss) 16%, transparent);
  color: var(--moss);
}
.signed-in-email {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink);
}
.form-note {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}
@media (max-width: 520px) {
  .page-panel {
    padding: 22px 18px;
  }
  .form-row {
    flex-wrap: wrap;
    gap: 0 12px;
  }
  .form-row .field {
    flex-basis: calc(50% - 6px);
  }
  .form-row .field:first-child:nth-last-child(3) {
    flex-basis: 100%;
  }
}
/* ============ RESPONSIVE TABLE ============
	Ported from the Grand Canyon site. Below 768px each record becomes
	a stacked card: the date (row header) leads, and every other cell
	shows its column name from data-title. The header row turns into a
	wrapping strip of sort buttons. At 768px and up it's a normal table. */
.responsive-table tr[hidden] {
  /* hidden story rows must stay hidden when rows are display:block */
  display: none !important;
}
@media (max-width: 767.98px) {
  .responsive-table {
    overflow-x: visible;
  }
  .responsive-table table {
    display: block;
    min-width: 0;
  }
  /* header row -> wrapping strip of sort buttons */
  .responsive-table thead {
    display: block;
  }
  .responsive-table thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--line-strong);
  }
  .responsive-table thead th {
    display: block;
    position: static;
    border-bottom: 0;
    background: transparent;
  }
  .responsive-table thead th button {
    width: auto;
    padding: 8px;
    font-size: 10.5px;
  }
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table th,
  .responsive-table td {
    display: block;
    text-align: left;
    white-space: normal;
  }
  /* one record = one card */
  .responsive-table tbody tr:not(.story-row) {
    padding: 4px 0 8px;
    border-top: 1px dashed var(--rust);
  }
  .responsive-table tbody tr:first-child {
    border-top: 0;
  }
  .responsive-table tbody th[scope="row"] {
    padding: 10px 14px 6px;
    border-bottom: 0;
    font-size: 14px;
    font-weight: 600;
  }
  .responsive-table tbody td {
    position: relative;
    padding: 6px 14px 6px 106px;
    /* 92px label column + 14px gutter */
    border-bottom: 0;
    max-width: none;
  }
  .responsive-table tbody td:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.025);
  }
  .responsive-table tbody td[data-title]::before {
    content: attr(data-title);
    position: absolute;
    left: 14px;
    top: 6px;
    width: 92px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.9;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  /* the story opens right under its card */
  .responsive-table tr.story-row td {
    padding: 14px 14px 18px;
    border-bottom: 0;
    background: var(--panel);
  }
  .responsive-table tbody tr:hover {
    background: transparent;
  }
  .responsive-table tbody tr.expanded {
    background: var(--panel);
  }
}