/* Celebrating Joseph: Option D "Colorado". Private draft styles. No build step. */

/* ---------- Fonts (self-hosted, SIL OFL 1.1; licenses in fonts/) ---------- */
@font-face { font-family: "Bitter"; src: url("fonts/bitter-normal-400-800.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("fonts/bitter-italic-400-800.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-normal-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-normal-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-normal-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-normal-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-normal-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Base is white. Accents: alpenglow, sky, pine. Contrast measured on white. */
  --paper: #ffffff;
  --mist: #f3f6fa;
  --sky-tint: #e6eff7;
  --hairline: #dfe5ec;
  --ink: #1c2230;          /* 15.9:1 */
  --ink-soft: #4a5263;     /* 7.8:1 */
  --alpenglow: #b93a26;    /* 5.7:1; white on it 5.7:1 */
  --alpenglow-deep: #9a2f1e;
  --sky: #245f8f;          /* 6.8:1 */
  --pine: #2f6b5a;         /* 6.2:1 */
  --pine-deep: #1d4a3c;    /* 10:1 with white */
  --gold: #f2b54a;         /* decoration and dark-bar text only */

  --display: "Bitter", "Rockwell", "Roboto Slab", Georgia, serif;
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", "Barlow", sans-serif;

  --fs-small: 0.9375rem;
  --fs-body: 1.25rem;       /* 20px: older readers */
  --fs-lede: 1.4375rem;
  --fs-h2: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --fs-h1: clamp(3.5rem, 1.5rem + 9vw, 8rem);

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;

  --gutter: 1rem;
  --wrap: 72rem;
  --radius: 6px;
  --radius-card: 14px;
  --header-h: 6.25rem;
}
@media (min-width: 48rem) { :root { --gutter: 2rem; --header-h: 4.25rem; } }
@media (min-width: 80rem) { :root { --gutter: 3rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6;
  overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.12; text-wrap: balance; }
cite, em { font-style: italic; }
a { color: var(--alpenglow); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--alpenglow-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-small); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 30; background: var(--ink); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--radius); text-decoration: none; }
.skip:focus { top: var(--s4); color: #fff; }

/* ---------- TBD chip ---------- */
.tbd {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--label); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  color: var(--alpenglow-deep); background: #fff;
  border: 1.5px dashed var(--alpenglow-deep); border-radius: 999px;
  padding: 0.4em 0.8em 0.35em; vertical-align: 0.1em; white-space: nowrap;
}
.tbd::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
.sign .tbd, .board .tbd, .tbd-dark { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.9); }

/* ---------- Draft bar ---------- */
.draft-bar { background: var(--ink); color: #fff; font-size: var(--fs-small); line-height: 1.45; text-align: center; padding: var(--s2) var(--gutter); }
.draft-bar p { margin: 0; }
.draft-bar strong { color: var(--gold); font-weight: 700; }

/* ---------- Header + sticky jump nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--hairline);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(1.4) blur(10px); }
}
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s5); padding-block: var(--s1); }
.wordmark { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; }
.wordmark:hover { color: var(--ink); text-decoration: none; }
.wordmark-mark { width: 2rem; height: 1.4rem; fill: var(--pine); }
.wordmark-mark circle { fill: var(--alpenglow); }
.jump { flex: 1 1 100%; order: 3; }
.nav-links { display: flex; align-items: stretch; justify-content: space-between; gap: 0.125rem; }
.nav-links a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 0.3rem;
  font-family: var(--label); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; border-radius: 999px; white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: var(--sky-tint); text-decoration: none; }
.nav-links a[aria-current="true"] { color: var(--sky); background: var(--sky-tint); }
.nav-links a.nav-share { background: var(--alpenglow); color: #fff; padding-inline: 0.75rem; }
.nav-links a.nav-share:hover { background: var(--alpenglow-deep); color: #fff; }
@media (min-width: 48rem) {
  .jump { flex: 0 1 auto; order: 0; }
  .nav-links { gap: var(--s2); }
  .nav-links a { padding: 0 0.9rem; font-size: 1.25rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.7rem 1.5rem;
  font-family: var(--sans); font-size: 1.125rem; font-weight: 700; line-height: 1.2;
  color: #fff; background: var(--alpenglow); border: 2px solid var(--alpenglow); border-radius: 999px;
  text-decoration: none; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:hover { background: var(--alpenglow-deep); border-color: var(--alpenglow-deep); color: #fff; text-decoration: none; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn[disabled] { cursor: not-allowed; }
.btn-sign { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85); }
.btn-sign[disabled] { opacity: 0.9; }
.btn-small { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 1rem; }
.link-button { font: inherit; font-size: 1.0625rem; font-weight: 700; color: var(--sky); background: none; border: 0; padding: 0.6rem 0; min-height: 2.75rem; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.link-button:hover { color: var(--ink); }

/* ---------- Shared headings ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 0.55em; margin: 0 0 var(--s3);
  font-family: var(--label); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--alpenglow);
}
.eyebrow::before { content: ""; width: 0.9em; height: 0.65em; background: currentColor; clip-path: polygon(0 100%, 38% 12%, 56% 52%, 72% 0, 100% 100%); flex: none; }
.section { position: relative; padding-block: var(--s8); }
@media (min-width: 48rem) { .section { padding-block: var(--s9); } }
.section-tight { padding-block: var(--s7); }
.section h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.015em; }
.section-intro { margin-top: var(--s4); font-size: var(--fs-lede); color: var(--ink-soft); max-width: 36rem; line-height: 1.5; }
.section-head-wide { margin-bottom: var(--s6); }
.grid { display: grid; gap: var(--s6); }
@media (min-width: 64rem) { .grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; } }
.minor-head { font-family: var(--label); font-weight: 600; font-size: 1.375rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: var(--s7) 0 var(--s3); }

/* ---------- Elevation divider: a labeled contour line ---------- */
.elev { display: flex; align-items: center; gap: var(--s4); max-width: var(--wrap); margin: var(--s5) auto; padding-inline: var(--gutter); }
.elev-line {
  flex: 1 1 0; height: 16px; background: var(--sky); opacity: 0.55;
  -webkit-mask: url("images/contour-line.svg") repeat-x left center / 240px 16px; mask: url("images/contour-line.svg") repeat-x left center / 240px 16px;
}
.elev-tag { flex: none; font-family: var(--label); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.elev-tag b { color: var(--ink); font-weight: 600; margin-right: 0.35em; }

/* ---------- Hero: the trailhead ---------- */
.hero { position: relative; padding-block: var(--s6) var(--s7); overflow: hidden; }
.hero-topo {
  position: absolute; inset: 0; background: url("images/topo-hero.svg") right center / cover no-repeat; opacity: 0.55; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.hero-grid { position: relative; display: grid; gap: var(--s6); }
.kicker { font-family: var(--label); font-weight: 600; font-size: 1.375rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pine); margin: 0 0 var(--s3); }
.hero h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s5) 0 var(--s6); font-family: var(--label); font-weight: 500; font-size: 1.375rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.hero-meta .dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--alpenglow); }
.hero-quote { margin: 0 0 var(--s6); max-width: 32rem; }
.hero-quote p { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.3; margin-bottom: var(--s3); }
.hero-quote footer { font-size: var(--fs-small); color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero-photo { width: 100%; max-width: 40rem; justify-self: center; margin: 0; }
/* Square photo filling its whole column; the old sky-and-ridge top is dropped so the photo can be big. */
.ridge-frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: var(--mist, #eef2f6); }
.ridge-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 46% 38%; }
.hero-photo figcaption { margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 63.99rem) {
  .hero-grid { gap: 0; }
  .hero-text { display: contents; }
  .hero-photo { order: 4; margin-block: var(--s6); }
  .hero-quote { order: 5; }
  .hero-actions { order: 6; }
}
@media (min-width: 64rem) {
  .hero { padding-block: var(--s8) var(--s9); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
  .hero-photo { max-width: none; justify-self: stretch; }
}

/* ---------- Update ---------- */
.update { background: var(--sky-tint); }
.update-inner { display: grid; gap: var(--s2); padding-block: var(--s5); }
@media (min-width: 48rem) { .update-inner { grid-template-columns: 17rem 1fr; gap: var(--s6); align-items: baseline; } }
.update-label time { white-space: nowrap; }
.update-label { font-family: var(--label); font-weight: 600; font-size: 1.1875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0; }
.update-kicker { color: var(--sky); margin-right: 0.5em; }
.update-label time { color: var(--ink-soft); font-weight: 500; }
.update p { margin: 0; font-size: 1.1875rem; }

/* ---------- What he gave us: waypoints ---------- */
.impact { padding-top: var(--s7); }
.impact-grid { display: grid; gap: var(--s7); }
.impact-photo { margin-top: var(--s6); }
.impact-photo img { width: 100%; border-radius: var(--radius); }
.impact-photo figcaption, .tribute-photo figcaption, .words-photo figcaption, .dad-photo figcaption, .places figcaption, .masonry figcaption, .closing-photo figcaption { font-size: var(--fs-small); margin-top: var(--s2); color: var(--ink-soft); }
.waypoints { position: relative; display: grid; gap: var(--s6); }
.waypoints::before {
  content: ""; position: absolute; left: 1.4rem; top: 1.5rem; bottom: 1.5rem; width: 6px; margin-left: -3px;
  background: var(--pine); -webkit-mask: url("images/trail-dash.svg") repeat-y center top / 6px 24px; mask: url("images/trail-dash.svg") repeat-y center top / 6px 24px;
}
.waypoints li { position: relative; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: var(--s4); align-items: start; }
.wp-num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: var(--pine); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.375rem; box-shadow: 0 0 0 6px #fff;
}
.wp-body h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -0.01em; margin: 0.15rem 0 var(--s2); }
.wp-body p { font-size: 1.25rem; color: var(--ink-soft); max-width: 34rem; }
@media (min-width: 64rem) {
  .impact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s9); align-items: start; }
  .impact-side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .waypoints { gap: var(--s7); padding-top: var(--s3); }
}

/* ---------- Tribute ---------- */
.tribute { display: grid; gap: var(--s6); margin-top: var(--s8); }
.tribute-photo img { width: 100%; border-radius: var(--radius); }
.draft-badge {
  display: inline-block; font-family: var(--label); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sky); background: #fff; border: 1.5px dashed var(--sky); border-radius: 999px; padding: 0.3em 0.9em; margin-bottom: var(--s4);
}
.tribute-title { font-size: 2rem; font-weight: 800; margin-bottom: var(--s4); }
.tribute-text .lede { font-size: var(--fs-lede); line-height: 1.5; }
@media (min-width: 64rem) { .tribute { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s8); align-items: center; } }

/* ---------- In his words ---------- */
.words { background: var(--mist); overflow: hidden; }
.words-topo { position: absolute; inset: 0; background: url("images/topo-soft.svg") center / cover no-repeat; opacity: 0.6; pointer-events: none; }
.words-grid { position: relative; display: grid; gap: var(--s6); align-items: center; }
.words-photo { max-width: 22rem; }
.peak-frame { clip-path: polygon(50% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); background: linear-gradient(180deg, #bcd6ec, var(--sky-tint)); padding-top: 13%; }
.peak-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.words-intro { font-family: var(--label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.25rem; color: var(--ink-soft); }
.pull { margin: var(--s3) 0 var(--s5); }
.pull p { font-family: var(--display); font-style: italic; font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: var(--s4); }
.pull footer { font-weight: 600; }
.words-more { max-width: 34rem; }
@media (min-width: 64rem) { .words-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s9); } }

/* ---------- Dad ---------- */
.dad-grid { display: grid; gap: var(--s6); align-items: center; }
.dad-line { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); line-height: 1.3; }
.family-slot { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s5); padding: var(--s4); border: 1.5px dashed #8b94a5; border-radius: var(--radius-card); color: var(--ink-soft); }
.family-slot p { margin: 0; font-size: 1.125rem; }
.family-slot-icon { width: 1.75rem; height: 1.75rem; flex: none; fill: none; stroke: var(--alpenglow); stroke-width: 3; stroke-linejoin: round; }
.dad-photo img { width: 100%; border-radius: var(--radius); }
@media (min-width: 48rem) { .dad-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); } }

/* ---------- Summer of fourteeners: a trail-like strip ---------- */
.peaks { padding-bottom: var(--s8); }
.peaks .section-head-wide { margin-bottom: var(--s2); }
.strip-wrap { padding-inline: var(--gutter); }
.strip-hint { margin: var(--s3) 0 0; font-family: var(--label); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); }
@media (min-width: 56rem) { .strip-hint { display: none; } }
.strip { overflow-x: auto; padding-bottom: var(--s4); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.strip-track { position: relative; width: max-content; padding-top: 1.25rem; }
.strip-profile { position: absolute; left: 0; top: 1.25rem; width: 100%; height: 5.5rem; overflow: visible; pointer-events: none; }
.strip-profile polyline { fill: none; stroke: var(--pine); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.strip-list { display: flex; align-items: flex-start; }
.strip-list li { position: relative; scroll-snap-align: start; padding-inline: 0.5rem; }
.s-lead { flex: 0 0 19rem; margin-top: 0.5rem; }
.s-bier { flex: 0 0 13rem; margin-top: 5rem; }
.s-dem { flex: 0 0 13rem; margin-top: 3.06rem; }
.strip-list figure { position: relative; }
.strip-list img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--mist); }
.flag {
  position: absolute; z-index: 2; top: 0; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--label); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: var(--alpenglow); border: 2px solid #fff; border-radius: 999px; padding: 0.25em 0.85em 0.2em;
}
.flag b { font-weight: 600; }
.strip-list figcaption { margin-top: var(--s2); line-height: 1.3; }
.strip-list .peak { display: block; font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.strip-list .when { display: block; font-size: var(--fs-small); color: var(--ink-soft); }
@media (min-width: 56rem) {
  .strip-track { margin-inline: auto; }
  .s-lead { flex-basis: 22rem; } .s-bier, .s-dem { flex-basis: 14rem; }
}

/* ---------- Celebration: trailhead sign ---------- */
.sign {
  position: relative; background: var(--pine-deep); color: #fff; border-radius: var(--radius-card); padding: var(--s6) var(--s5);
  box-shadow: 0 18px 40px -26px rgba(29, 74, 60, 0.7);
}
.sign::after { content: ""; position: absolute; inset: 0.6rem; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: calc(var(--radius-card) - 4px); pointer-events: none; }
@media (min-width: 48rem) { .sign { padding: var(--s7) var(--s7); } }
.sign-lead { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.25; margin-bottom: var(--s5); }
.event-list { margin: 0; display: grid; }
.event-row { display: grid; gap: var(--s1); padding: var(--s4) 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
@media (min-width: 40rem) { .event-row { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s5); align-items: baseline; } }
.event-row dt { font-family: var(--label); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; color: #cfe8de; }
.event-row dd { margin: 0; }
.sign-note { color: #e3f0ea; font-size: 1.0625rem; }
.event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, 0.28); }
.gatherings { display: grid; gap: var(--s3); }
.gatherings li { display: grid; gap: var(--s1); padding: var(--s4); background: var(--mist); border-radius: var(--radius-card); }
@media (min-width: 40rem) { .gatherings li { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s4); align-items: baseline; } }
.gatherings .when { font-family: var(--label); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); }

/* ---------- Stories: the register ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.chip {
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; min-height: 2.75rem; padding: 0.4rem 1.05rem; color: var(--ink);
  background: #fff; border: 1.5px solid #8b94a5; border-radius: 999px; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
.story-count { font-size: 1.0625rem; margin-bottom: var(--s5); }
.stories { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 48rem) { .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.story { padding: var(--s5); background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: 0 10px 26px -20px rgba(28, 34, 48, 0.4); }
@media (min-width: 48rem) { .story { padding: var(--s6); } }
.story[hidden] { display: none; }
.entry-no { font-family: var(--label); font-weight: 600; font-size: 1.1875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pine); margin-bottom: var(--s3); }
.example-badge { display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--sky); background: #fff; border: 1.5px dashed var(--sky); border-radius: 8px; padding: 0.45em 0.75em; margin-bottom: var(--s4); }
.story-title { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--s3); }
.story p { font-size: 1.125rem; }
.story-by { margin-top: var(--s4); font-size: 1rem; color: var(--ink-soft); }
.story-name { font-weight: 700; color: var(--ink); }

/* ---------- Share ---------- */
.share { background: var(--sky-tint); overflow: hidden; }
.share-topo { position: absolute; inset: 0; background: url("images/topo-soft.svg") left bottom / cover no-repeat; opacity: 0.55; pointer-events: none; }
.share .grid { position: relative; }
.prompts { margin-top: var(--s6); padding: var(--s5); background: #fff; border-radius: var(--radius-card); max-width: 30rem; }
.prompts-title { font-family: var(--label); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--s3); }
.prompt-list li { display: flex; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--hairline); font-size: 1.125rem; }
.prompt-list li::before { content: ""; width: 0.7rem; height: 0.5rem; margin-top: 0.6em; background: var(--alpenglow); clip-path: polygon(0 100%, 40% 0, 100% 100%); flex: none; }
.prompt-list li:last-child { border-bottom: 0; }
.memory-form { display: grid; gap: var(--s5); padding: var(--s5); background: #fff; border-radius: var(--radius-card); box-shadow: 0 18px 40px -28px rgba(28, 34, 48, 0.5); }
@media (min-width: 48rem) { .memory-form { padding: var(--s7); } }
.field { display: grid; gap: var(--s1); }
.field > label { font-weight: 700; font-size: 1.1875rem; }
.optional { font-weight: 400; color: var(--ink-soft); font-size: 1rem; margin-left: 0.25em; }
.hint { font-size: 1.0625rem; color: var(--ink-soft); margin: 0 0 var(--s1); line-height: 1.45; }
.hint:empty { display: none; }
input[type="text"], textarea {
  width: 100%; font: inherit; font-size: 1.1875rem; color: var(--ink); background: #fff; border: 1.5px solid #8b94a5; border-radius: 8px;
  padding: 0.8rem 0.9rem; min-height: 3.25rem; transition: border-color 160ms ease, box-shadow 160ms ease;
}
textarea { resize: vertical; line-height: 1.55; min-height: 11rem; }
input[type="text"]:focus, textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(36, 95, 143, 0.25); }
.field.invalid input, .field.invalid textarea { border-color: var(--alpenglow); }
.error-text { color: var(--alpenglow); font-size: 1.0625rem; font-weight: 700; margin: var(--s1) 0 0; }
input[type="file"] { font: inherit; font-size: 1.0625rem; max-width: 100%; width: 100%; padding: var(--s3); border: 1.5px dashed #8b94a5; border-radius: 8px; background: #fff; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 700; font-size: 1rem; margin-right: var(--s3); padding: 0.55rem 1rem; min-height: 2.75rem; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
.check { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s3); }
.check input { width: 1.5rem; height: 1.5rem; margin: 0.2rem 0 0; accent-color: var(--alpenglow); flex: none; }
.check label { font-size: 1.0625rem; }
.counter { font-size: 1rem; text-align: right; margin: var(--s1) 0 0; font-variant-numeric: tabular-nums; }
.fine-print { font-size: 1.0625rem; color: var(--ink-soft); margin: 0; max-width: 38rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.form-actions p { margin: 0; }
.form-status:empty { display: none; }
.form-status { background: var(--mist); border-radius: var(--radius-card); padding: var(--s5); display: grid; gap: var(--s2); }
.form-status .status-title { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.3; margin: 0; color: var(--ink); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.preview-pill { font-family: var(--label); font-size: 1rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--pine); border-radius: 999px; padding: 0.35em 0.85em; }
.form-status p:not(.status-title) { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; }
.form-status.error .status-title { color: var(--alpenglow); }

/* ---------- Photos ---------- */
.places { display: grid; gap: var(--s5); }
.places img { width: 100%; border-radius: var(--radius); background: var(--mist); }
.places figure:last-child img { aspect-ratio: 1 / 1; object-fit: cover; }
.dunes-banner { margin-bottom: var(--s6); }
.dunes-banner img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius); background: var(--mist); }
.dunes-banner figcaption { margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-soft); }
@media (min-width: 48rem) { .places { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .places figure:first-child img { aspect-ratio: 5 / 4; object-fit: cover; } }
.masonry { margin-top: var(--s7); columns: 2; column-gap: var(--s3); }
@media (min-width: 48rem) { .masonry { columns: 3; column-gap: var(--s5); } }
.masonry figure { break-inside: avoid; margin-bottom: var(--s5); }
.masonry img { width: 100%; border-radius: var(--radius); background: var(--mist); }
.album { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); margin-top: var(--s6); padding: var(--s5); background: var(--mist); border-radius: var(--radius-card); }
.album-title { font-family: var(--display); font-weight: 800; font-size: 1.5rem; margin-bottom: var(--s1); }
.album-text p { margin: 0; }

/* ---------- Getting there: signposts ---------- */
.signpost { display: grid; gap: var(--s4); max-width: 40rem; }
.board { position: relative; color: #fff; padding: var(--s5) 4.25rem var(--s5) var(--s5); display: grid; gap: var(--s2); justify-items: start; }
.board h3 { font-size: 1.75rem; font-weight: 800; }
.board p { margin: 0; font-size: 1.1875rem; }
.board-pine { background: var(--pine); clip-path: polygon(0 0, calc(100% - 2.5rem) 0, 100% 50%, calc(100% - 2.5rem) 100%, 0 100%); }
.board-sky { background: var(--sky); padding: var(--s5) var(--s5) var(--s5) 4.25rem; clip-path: polygon(2.5rem 0, 100% 0, 100% 100%, 2.5rem 100%, 0 50%); }
.board-glow { background: var(--alpenglow-deep); clip-path: polygon(0 0, calc(100% - 2.5rem) 0, 100% 50%, calc(100% - 2.5rem) 100%, 0 100%); }
@media (min-width: 48rem) { .signpost { gap: var(--s5); } .board { padding-right: 5.5rem; } .board-sky { padding-right: var(--s5); padding-left: 5.5rem; margin-left: var(--s7); } }

.later-list { display: grid; gap: 0; max-width: 40rem; }
.later-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); font-size: 1.1875rem; }
.later-list li:first-child { border-top: 1px solid var(--hairline); }

/* ---------- Closing ---------- */
.closing { position: relative; padding-block: var(--s8) var(--s9); overflow: hidden; }
.closing-grid { display: grid; gap: var(--s6); align-items: center; }
.closing-photo { max-width: 25rem; width: 100%; }
.closing-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--radius-card) var(--radius-card); }
.closing h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.015em; margin-bottom: var(--s4); }
.closing-line { font-size: var(--fs-lede); line-height: 1.5; max-width: 30rem; color: var(--ink-soft); margin-bottom: var(--s5); }
@media (min-width: 48rem) { .closing-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); } .closing-photo { justify-self: end; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: var(--s4); }
.footer-ridge { display: block; width: 100%; height: 5rem; }
@media (min-width: 48rem) { .footer-ridge { height: 8rem; } .footer-sun { top: 3rem; width: 2.25rem; height: 2.25rem; } }
.footer-ridge .ridge-back { fill: #bcd3e4; }
.footer-ridge .ridge-mid { fill: var(--pine-deep); }
.footer-sun { position: absolute; top: 1.4rem; right: 18%; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #e8745a; opacity: 0.95; z-index: 0; }
.footer-ridge { position: relative; z-index: 1; }
.footer-body { position: relative; background: var(--pine-deep); color: #fff; margin-top: -1px; padding-block: var(--s6) var(--s8); overflow: hidden; }
.footer-topo { position: absolute; inset: 0; background: url("images/topo-footer.svg") center / cover no-repeat; opacity: 0.35; pointer-events: none; }
.footer-inner { position: relative; }
.footer-mark { font-family: var(--display); font-weight: 800; font-size: 2.25rem; letter-spacing: -0.015em; margin-bottom: var(--s2); }
.footer-love { font-size: 1.1875rem; color: #e3f0ea; }
.footer-small { font-size: 1.0625rem; color: #e3f0ea; margin-top: var(--s3); }
.footer-988 { color: #fff; font-weight: 600; font-size: 1.1875rem; padding-top: var(--s4); margin-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, 0.35); max-width: 38rem; }

/* ---------- Motion: one gentle reveal; skipped for reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media print { .draft-bar, .site-header { display: none; } }

/* Tonight banner (Oct 29, 2026; swap to past tense on Oct 30) */
.tonight { background: #1A1A1A; color: #FFFFFF; padding: 14px 16px; }
.tonight-inner { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 1rem; line-height: 1.5; }
.tonight-label { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: #FFB4A6; }
.tonight-text { flex: 1 1 22rem; min-width: 0; }
.tonight-text strong { color: #FFFFFF; }
.tonight-link { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.tonight-link:focus-visible { outline: 3px solid #FFB4A6; outline-offset: 3px; }

/* Find Joseph online (Oct 29) */
.online { padding: 56px 16px; border-top: 1px solid rgba(0,0,0,.08); }
.online-wrap { max-width: 56rem; margin: 0 auto; }
.online h2 { margin: 0 0 .4em; }
.online-lede { margin: 0 0 1.2em; opacity: .8; }
.online-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 10px; }
.online-list a { display: block; padding: 14px 16px; border: 1px solid rgba(0,0,0,.14); border-radius: 10px; text-decoration: none; color: inherit; font-weight: 600; min-height: 48px; }
.online-list a:hover { border-color: currentColor; }
.online-list a:focus-visible { outline: 3px solid #C5402D; outline-offset: 2px; }

/* Option D: yellow RSVP link (Rich, Oct 29) */
.tonight .tonight-link { color: #FFD24A; }

.draft-bar .draft-family { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; margin-left: .4em; }

/* ---------- Rich's album photos (Oct 29) ---------- */
.friends-photo { max-width: 46rem; margin: var(--s8) auto 0; }
.friends-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--mist); }
.friends-photo figcaption, .lv-pair figcaption { font-size: var(--fs-small); margin-top: var(--s2); color: var(--ink); }
/* Leadville: medal + Mosquito Pass. Column widths follow the photos' shapes (827:952 and 1170:948),
   so both come out the same height and nothing is cropped. */
.lv-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s7); }
.lv-pair figure { margin: 0; }
.lv-pair img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--mist); }
@media (min-width: 48rem) {
  .lv-pair { grid-template-columns: minmax(0, 0.8687fr) minmax(0, 1.2342fr); gap: var(--s5); align-items: start; }
}