/* redmond.ad: shared tokens, type, the paper, the top bar, the bell theme switch and the footer. */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fbf4e4;
  --paper-card: #fffaee;
  --paper-back: #f1e5c9;
  --ink: #23312a;
  --ink-soft: #46574d;
  --line: rgba(35, 49, 42, 0.16);
  --sky: #bfe6ff;
  --sky-low: #e4f4ff;
  --mount: #d4e7ee;
  --mount-snow: #f7fbfd;
  --hill-far: #b5dbbd;
  --hill: #8cc79a;
  --hill-deep: #6fb27f;
  --tree: #3f8f55;
  --tree-deep: #2f7646;
  --tree-light: #5aa86b;
  --trunk: #7a5a3c;
  --sand: #e8d3a6;
  --sand-deep: #d8be86;
  --bank: #a7d38a;
  --river: #3a8fc4;
  --river-deep: #2f78a8;
  --river-light: #8fcbec;
  --sun: #ffcf3f;
  --red: #e4473b;
  --red-text: #b8342a;
  --sign: #2f6e4a;
  --sign-ink: #fbf4e4;
  --shadow: rgba(52, 40, 18, 0.22);
  --shadow-soft: rgba(52, 40, 18, 0.12);
  --focus: #1d6fb8;
  --grain-opacity: 0.16;
  --grain-blend: multiply;
  --shadow-ink: #3a2a10;
  --cloud: #fffdf7;
  --snow: #ffffff;
  --mount-near: #c4dce6;
  --field: #b8d77a;
  --bank-deep: #8ec474;
  --track: #d9d6cb;
  --track-in: #efece2;
  --blueband: #74abd6;
  --barn: #c9493a;
  --barn-deep: #8e2f26;
  --wood: #c49766;
  --star: #fff6d8;
  --reed: #4f8f4a;
  --cattail: #7a5236;
  --centre: #fbf4e4;
  --ripple: #a9dbf5;
  --lamp: #f2e7c9;
  --glow: 0;
  --beam: 0;
  --jersey: #2f7d8c;
  --skin: #e9b48f;
  --helmet: #ffcf3f;
  --tyre: #23312a;
  --rim: #d7d2c4;
  --sky-top: #fbf4e4;
  --font-display: "Fredoka", "Avenir Next Rounded", "Nunito", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 16px;
  --bar-h: 56px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141a2b;
  --paper-card: #1f2842;
  --paper-back: #182037;
  --ink: #eef0e6;
  --ink-soft: #c3c8d8;
  --line: rgba(238, 240, 230, 0.16);
  --sky: #1a2238;
  --sky-low: #27335a;
  --mount: #2a3558;
  --mount-snow: #46527a;
  --hill-far: #253050;
  --hill: #2c3a63;
  --hill-deep: #243156;
  --tree: #1d2a47;
  --tree-deep: #17213a;
  --tree-light: #2a3a63;
  --trunk: #3a3348;
  --sand: #4a4a5e;
  --sand-deep: #3b3c51;
  --bank: #26335a;
  --river: #20325c;
  --river-deep: #18264a;
  --river-light: #50639a;
  --sun: #f6ecd0;
  --red: #e4473b;
  --red-text: #ff8a6b;
  --sign: #ffd88a;
  --sign-ink: #141a2b;
  --shadow: rgba(2, 4, 12, 0.5);
  --shadow-soft: rgba(2, 4, 12, 0.3);
  --focus: #ffd36b;
  --grain-opacity: 0.22;
  --grain-blend: overlay;
  --shadow-ink: #000000;
  --cloud: #29335a;
  --snow: #aab2cc;
  --mount-near: #2f3b62;
  --field: #2b3a60;
  --bank-deep: #223058;
  --track: #4a5274;
  --track-in: #5a6386;
  --blueband: #3d5d90;
  --barn: #6c3242;
  --barn-deep: #47202d;
  --wood: #5e4f5e;
  --star: #fff6d8;
  --reed: #1d2946;
  --cattail: #3b2d3c;
  --centre: #6d7090;
  --ripple: #6f87c2;
  --lamp: #ffe7a3;
  --glow: 0.5;
  --beam: 1;
  --jersey: #2f6a7c;
  --skin: #b98b72;
  --helmet: #e3bb4d;
  --tyre: #0b0f1c;
  --rim: #8a90a8;
  --sky-top: #141a2b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #141a2b;
    --paper-card: #1f2842;
    --paper-back: #182037;
    --ink: #eef0e6;
    --ink-soft: #c3c8d8;
    --line: rgba(238, 240, 230, 0.16);
    --sky: #1a2238;
    --sky-low: #27335a;
    --mount: #2a3558;
    --mount-snow: #46527a;
    --hill-far: #253050;
    --hill: #2c3a63;
    --hill-deep: #243156;
    --tree: #1d2a47;
    --tree-deep: #17213a;
    --tree-light: #2a3a63;
    --trunk: #3a3348;
    --sand: #4a4a5e;
    --sand-deep: #3b3c51;
    --bank: #26335a;
    --river: #20325c;
    --river-deep: #18264a;
    --river-light: #50639a;
    --sun: #f6ecd0;
    --red: #e4473b;
    --red-text: #ff8a6b;
    --sign: #ffd88a;
    --sign-ink: #141a2b;
    --shadow: rgba(2, 4, 12, 0.5);
    --shadow-soft: rgba(2, 4, 12, 0.3);
    --focus: #ffd36b;
    --grain-opacity: 0.22;
    --grain-blend: overlay;
    --shadow-ink: #000000;
    --cloud: #29335a;
    --snow: #aab2cc;
    --mount-near: #2f3b62;
    --field: #2b3a60;
    --bank-deep: #223058;
    --track: #4a5274;
    --track-in: #5a6386;
    --blueband: #3d5d90;
    --barn: #6c3242;
    --barn-deep: #47202d;
    --wood: #5e4f5e;
    --star: #fff6d8;
    --reed: #1d2946;
    --cattail: #3b2d3c;
    --centre: #6d7090;
    --ripple: #6f87c2;
    --lamp: #ffe7a3;
    --glow: 0.5;
    --beam: 1;
    --jersey: #2f6a7c;
    --skin: #b98b72;
    --helmet: #e3bb4d;
    --tyre: #0b0f1c;
    --rim: #8a90a8;
    --sky-top: #141a2b;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--paper-card);
  color: var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--shadow);
}
.skip:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* the paper: a grain that sits over everything, never catching a tap */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background-image: url("../img/grain.png");
  background-size: 180px 180px;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}

/* a cut-paper card: cream stock, a crisp shadow under the cut and a soft one further down */
.paper {
  background: var(--paper-card);
  border-radius: 14px;
  box-shadow:
    0 1px 0 var(--shadow-soft),
    0 3px 0 var(--shadow-soft),
    0 10px 24px var(--shadow-soft);
}

/* the top bar */
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
}
.bar.solid {
  position: sticky;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 21px;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--paper-card);
  box-shadow: 0 2px 0 var(--shadow-soft), 0 6px 14px var(--shadow-soft);
}
.wordmark svg {
  width: 30px;
  height: 20px;
}
.wordmark .dot {
  color: var(--red-text);
}

/* the theme switch: three little bike bells, the chosen one ringed red */
.theme-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--paper-card);
  box-shadow: 0 2px 0 var(--shadow-soft), 0 6px 14px var(--shadow-soft);
}
.theme-switch button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  width: 36px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-switch svg {
  width: 30px;
  height: 28px;
  overflow: visible;
}
.theme-switch .dome {
  fill: var(--paper-back);
  stroke: var(--ink);
  stroke-width: 1.4;
}
.theme-switch .base {
  fill: var(--ink);
}
.theme-switch .glyph {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-switch .glyph-fill {
  fill: var(--ink);
}
.theme-switch .ring {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.2;
  opacity: 0;
  transform-origin: 15px 14px;
  transform: scale(0.85);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.theme-switch .bell {
  transform-origin: 15px 6px;
}
.theme-switch button[aria-pressed="true"] .ring {
  opacity: 1;
  transform: scale(1);
}
.theme-switch button[aria-pressed="true"] .dome {
  fill: var(--sun);
}
:root[data-theme="dark"] .theme-switch button[aria-pressed="true"] .dome {
  fill: #ffd88a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-switch button[aria-pressed="true"] .dome {
    fill: #ffd88a;
  }
}
.theme-switch button[aria-pressed="true"] .glyph {
  stroke: #23312a;
}
.theme-switch button[aria-pressed="true"] .glyph-fill {
  fill: #23312a;
}
.theme-switch button.ding .bell {
  animation: ding 0.5s ease-out;
}
@keyframes ding {
  20% {
    transform: rotate(-14deg);
  }
  45% {
    transform: rotate(10deg);
  }
  70% {
    transform: rotate(-5deg);
  }
}

/* buttons that look like trail signs */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active {
  transform: translateY(2px);
}
.btn.primary {
  background: var(--red);
  color: #fffaf0;
  box-shadow: 0 3px 0 #a92d23, 0 10px 20px var(--shadow-soft);
}
.btn.quiet {
  background: var(--paper-card);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--shadow), 0 10px 20px var(--shadow-soft);
}
.btn.primary:active {
  box-shadow: 0 1px 0 #a92d23, 0 6px 12px var(--shadow-soft);
}

/* the trail-marker Maps link */
.maps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 8px;
  background: var(--sign);
  color: var(--sign-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 2px 0 var(--shadow);
}
.maps-link svg {
  width: 14px;
  height: 14px;
}

/* the footer: a strip of trail sand */
.foot {
  position: relative;
  z-index: 2;
  background: var(--sand);
  color: var(--ink);
  padding: 34px var(--gutter) calc(30px + env(safe-area-inset-bottom));
  box-shadow: 0 -3px 0 var(--sand-deep);
}
:root[data-theme="dark"] .foot {
  background: #1b2238;
  box-shadow: 0 -3px 0 #2c3a63;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foot {
    background: #1b2238;
    box-shadow: 0 -3px 0 #2c3a63;
  }
}
.foot-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}
.foot p {
  font-size: 15px;
}
.foot nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.foot nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
}
.foot nav a:hover {
  background: var(--paper-card);
}

.rise {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.js .rise:not(.in) {
  opacity: 0;
  transform: translateY(22px);
}

@media (min-width: 900px) {
  :root {
    --gutter: 32px;
    --bar-h: 72px;
  }
  .wordmark {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}