@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Sky and weather */
  --deck: #3a4a59;          /* chinook cloud deck: nav, arch */
  --deck-deep: #2c3a47;
  --sky-warm: #f4efe1;      /* bright slot under the arch */
  --sky: #d5e3eb;
  --sky-low: #b8cfdc;       /* horizon haze */
  /* Land */
  --far: #8aa0b1;           /* Rockies */
  --snow: #f2f6f8;
  --mid: #6f8b80;           /* foothills */
  --near: #3f5d4b;          /* spruce ridge */
  --ridge: #2f5242;         /* working ink: headings, markers */
  --ridge-deep: #24413a;
  --night: #17261f;
  /* Survey paper */
  --paper: #f8f7f2;
  --paper-alt: #eef1ea;
  --rule: #d5d9cd;
  --ink: #1d2622;
  --ink-soft: #4d5852;
  --mist: #eef2ec;          /* light text on dark grounds */
  --mist-dim: #c6d1c9;
  /* Fescue gold: commitment only (actions, chosen plan, focus, selection) */
  --gold: #d9a845;
  --gold-deep: #bf8f2e;

  --course: 2.75rem;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --wrap: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--mid) var(--paper-alt); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  font-variant-numeric: tabular-nums;
  caret-color: var(--ridge);
}
::selection { background: var(--gold); color: var(--ink); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* Cloud deck and nav */
.deck { background: var(--deck); position: relative; z-index: 2; }
.nav {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  height: calc(var(--course) * 1.5);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav-name { font: 800 1.25rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--mist); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.75rem, 2.5vw, 2rem); align-items: center; }
.nav li a { font: 600 1.0625rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--mist-dim); }
.nav li a:hover { color: var(--mist); text-decoration: underline; }
.nav .nav-quote { background: var(--gold); color: var(--ink); padding: .6rem .9rem; border-radius: 2px; }
.nav .nav-quote:hover { background: var(--gold-deep); color: var(--ink); text-decoration: none; }
.nav .nav-quote { white-space: nowrap; }
@media (max-width: 640px) {
  .nav li:not(:last-child) { display: none; }
  .nav-name { font-size: 1.05rem; }
  .nav .nav-quote { font-size: .95rem; padding: .55rem .7rem; }
}

/* The sky: chinook arch over clear sky, ridges at the foot */
.facade {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-warm) 0, var(--sky) 38%, var(--sky-low) 100%);
  padding: calc(var(--course) * 2.2) 0 clamp(4.5rem, 8vw, 7.5rem);
}
.facade::before {             /* the arch: the deck's curved lower edge */
  content: ""; position: absolute; z-index: 1;
  left: -12%; width: 124%; top: 0; height: clamp(2.25rem, 7vw, 5.5rem);
  background: var(--deck);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: 0 .6rem 1.2rem -.4rem rgba(44, 58, 71, .35);
}
.ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(8rem, 19vw, 17rem); display: block; }
.ridges path { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .ridges .r { animation: rise 1.4s cubic-bezier(.16, 1, .3, 1) both; }
  .ridges .r2 { animation-delay: .08s; }
  .ridges .r3 { animation-delay: .16s; }
  .ridges .r4 { animation-delay: .24s; }
  @keyframes rise { from { transform: translateY(14%); } }
}
.facade-inner {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.sign {
  font: 800 clamp(3.4rem, 9.2vw, 7.6rem)/.86 var(--display);
  text-transform: uppercase; letter-spacing: .005em; color: var(--ink);
}
.sign span { display: block; }
.sign span + span { color: var(--ridge); }
.sign-line {
  margin-top: calc(var(--course) * .5);
  font: 600 clamp(1.05rem, 1.8vw, 1.4rem)/1.2 var(--display);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.lede {
  margin-top: calc(var(--course) * 1);
  font: 800 clamp(1.9rem, 3.6vw, 2.9rem)/1.05 var(--display);
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink);
}
.lede-sub { margin-top: calc(var(--course) * .4); max-width: 38rem; font-size: 1.125rem; color: var(--ink-soft); }

/* The diagnostic card */
.ticket {
  position: relative;
  background: #fff; color: var(--ink);
  padding: calc(var(--course) * .6) 1.5rem 1.4rem;
  border-radius: 0 0 4px 4px;
  border-top: 6px solid var(--ridge);
  box-shadow: 0 1.5rem 3rem -1.25rem rgba(23, 38, 31, .45), 0 .15rem .4rem rgba(23, 38, 31, .12);
}
.ticket-title { font: 800 1.6rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; padding-bottom: .7rem; border-bottom: 2px solid var(--ink); }
.ticket-intro { margin-top: .9rem; font-size: 1.05rem; }
.ticket-list { list-style: none; margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.ticket-list li { position: relative; padding: .6rem 0 .6rem 1.6rem; border-bottom: 1px solid var(--rule); font-weight: 500; }
.ticket-list li::before, .check-list li::before, .teaser-list li::before {
  content: ""; position: absolute; left: .1rem; width: .75rem; height: .4rem;
  border-left: 2.5px solid var(--ridge); border-bottom: 2.5px solid var(--ridge); transform: rotate(-45deg);
}
.ticket-list li::before { top: 1rem; }
.ticket-price { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin: 1.1rem 0 1rem; }
.ticket-price .std { font-size: 3rem; }
.ticket-from { align-self: baseline; font: 600 1.15rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-right: -.5rem; }
.ticket-scale { margin: -.4rem 0 1rem; font-size: .92rem; line-height: 1.4; color: var(--ink-soft); }
.ticket-credit { font-size: .98rem; font-weight: 600; color: var(--ink-soft); max-width: 14rem; line-height: 1.3; }

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 3.25rem; padding: .8rem 1.25rem;
  background: var(--gold); color: var(--ink);
  font: 800 1.3rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 .35rem .8rem -.3rem rgba(23, 38, 31, .45);
  transition: background-color .2s ease-out, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.btn-gold:hover { background: var(--gold-deep); transform: translateY(-1px); }
.btn-gold:active { transform: translateY(1px); }
.ticket-foot { margin-top: .9rem; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }

/* Sections on survey paper */
.survey, .prices, .about, .report-section { padding: calc(var(--course) * 2.5) 0; }
.h2 { font: 800 clamp(2.4rem, 5vw, 3.75rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ridge-deep); }
.h3 { font: 800 1.75rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.section-lede { margin-top: calc(var(--course) * .45); max-width: 40rem; font-size: 1.2rem; color: var(--ink-soft); }
.small { font-size: .98rem; color: var(--ink-soft); max-width: 44rem; }

/* What I check */
.checks { margin-top: calc(var(--course) * 1.25); }
.check-list { list-style: none; margin: 1rem 0 0; padding: 0; columns: 2 22rem; column-gap: 3rem; }
.check-list li { break-inside: avoid; position: relative; padding: .55rem 0 .55rem 1.7rem; border-bottom: 1px solid var(--rule); }
.check-list li::before { top: .95rem; }

/* The trail: four steps, each at a survey benchmark */
.leg { list-style: none; margin: calc(var(--course) * 1.75) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--ink); }
.leg li { padding: 1.4rem 1.5rem 0 0; position: relative; }
.leg li + li { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.leg li::before {             /* benchmark marker */
  content: ""; position: absolute; top: -15px; left: 0; width: 18px; height: 14px;
  background: var(--ridge); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.leg li + li::before { left: 1.5rem; }
.leg h3 { font: 800 2.1rem/1 var(--display); text-transform: uppercase; color: var(--ridge); }
.leg p { margin-top: .6rem; }
@media (max-width: 860px) {
  .leg { grid-template-columns: 1fr; border-top: 0; border-left: 3px solid var(--ink); }
  .leg li, .leg li + li { padding: 0 0 1.5rem 1.5rem; border-left: 0; }
  .leg li::before, .leg li + li::before { left: -10.5px; top: .45rem; }
}

/* Prices on a topo sheet */
.prices {
  background-color: var(--paper-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%23d3dacd' stroke-width='1.2'%3E%3Cpath d='M960 170c70-40 170-10 175 60s-80 110-160 95-85-115-15-155z'/%3E%3Cpath d='M915 150c95-70 255-35 265 75s-120 170-245 145-125-160-20-220z'/%3E%3Cpath d='M865 125c120-100 340-60 355 95s-160 240-330 200-170-205-25-295z'/%3E%3Cpath d='M810 95c150-130 430-85 450 120s-205 310-420 255-215-255-30-375z'/%3E%3Cpath d='M750 60c180-165 520-110 545 145s-250 385-510 315-260-310-35-460z'/%3E%3Cpath d='M685 20c215-200 615-135 645 175s-300 465-605 380-305-365-40-555z'/%3E%3Cpath d='M140 640c60-30 140-5 140 45s-70 80-135 65-60-80-5-110z'/%3E%3Cpath d='M95 615c90-55 225-20 225 70s-115 135-215 110-100-125-10-180z'/%3E%3Cpath d='M45 585c120-80 310-35 315 95s-160 190-300 160-140-170-15-255z'/%3E%3Cpath d='M-10 550c155-105 400-50 410 120s-210 255-385 215'/%3E%3C/g%3E%3C/svg%3E");
  background-size: max(100%, 75rem) auto; background-position: center top; background-repeat: no-repeat;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.bins, .floors { margin-top: calc(var(--course) * 1.5); }
.schedule { margin: 1rem 0 .9rem; border-top: 2px solid var(--ink); }
.schedule > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--rule); }
.schedule dt { max-width: 44rem; }
.schedule dt strong { display: block; font: 800 1.35rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .2rem; }
.schedule dd { margin: 0; text-align: right; }
.std { display: block; font: 800 1.6rem/1.05 var(--display); white-space: nowrap; }
.est { display: block; font-size: .95rem; color: var(--ink-soft); white-space: nowrap; }
.per { display: block; font-size: .95rem; color: var(--ink-soft); }
.std-sm { font-size: 1.45rem; }

/* Plans as hills: height shows how much each holds */
.bins { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.bins legend { padding: 0; }
.bins-note { margin-top: .35rem; }
.bin-row { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.5rem); align-items: end; }
.bin { position: relative; cursor: pointer; display: block; }
.bin input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bin-body {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem;
  min-height: calc(13rem + 11rem * var(--fill));
  padding: 1.25rem 1.25rem 1.4rem;
  border: 2px dashed var(--ink-soft); border-radius: 50% 50% 4px 4px / 3.25rem 3.25rem 4px 4px;
  background: rgba(255, 255, 255, .55);
  transition: background-color .25s ease-out, border-color .25s ease-out;
}
.bin:hover .bin-body { border-color: var(--ink); background: #fff; }
.bin input:checked + .bin-body { border: 2px solid var(--ink); background: var(--gold); }
.bin input:focus-visible + .bin-body { outline: 3px solid var(--ridge); outline-offset: 3px; }
.bin-name { font: 800 2rem/1 var(--display); text-transform: uppercase; }
.bin-cap { font-weight: 600; }
.bin-price { margin: .5rem 0 .4rem; }
.bin-has { font-size: .95rem; line-height: 1.45; }
.bin input:checked + .bin-body .per { color: var(--ink); }
@media (max-width: 760px) {
  .bin-row { grid-template-columns: 1fr; }
  .bin-body { min-height: 0; border-radius: 4px; }
}
.bin-go { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.bin-go .btn-gold { width: auto; min-width: 15rem; }
@media (max-width: 600px) {
  .schedule > div { grid-template-columns: 1fr; gap: .35rem; }
  .schedule dd { text-align: left; }
  .schedule dd .std, .schedule dd .est { display: inline; margin-right: .4rem; }
}

/* Report teaser: bullets + a miniature of the sample report */
.teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.teaser-list { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.teaser-list li { position: relative; padding: .7rem 0 .7rem 1.7rem; border-bottom: 1px solid var(--rule); }
.teaser-list li::before { top: 1.1rem; }
.teaser-btn { width: auto; min-width: 15rem; margin-top: 1.5rem; }

.mini { position: relative; display: block; text-decoration: none; color: var(--ink); padding: 1rem 1rem 2.5rem; }
.mini-sheet { display: block; background: #fff; border-radius: 4px; }
.mini-back { position: absolute; inset: 1.6rem .2rem 3.1rem 1.8rem; transform: rotate(3deg); box-shadow: 0 1rem 2rem -1.2rem rgba(23, 38, 31, .4); border: 1px solid var(--rule); }
.mini-front {
  position: relative; padding: 1.25rem 1.35rem 1.4rem; border-top: 6px solid var(--ridge); border-radius: 0 0 4px 4px;
  box-shadow: 0 1.75rem 3rem -1.75rem rgba(23, 38, 31, .5), 0 .1rem .3rem rgba(23, 38, 31, .08);
  transform: rotate(-1.5deg); transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease-out;
}
.mini:hover .mini-front, .mini:focus-visible .mini-front { transform: rotate(0) translateY(-4px); box-shadow: 0 2.25rem 3.5rem -1.75rem rgba(23, 38, 31, .55), 0 .1rem .3rem rgba(23, 38, 31, .08); }
@media (prefers-reduced-motion: reduce) { .mini-front { transition: none; } }
.mini-head { display: flex; justify-content: space-between; align-items: start; gap: .75rem; }
.mini-biz { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.mini-month { display: block; font: 800 1.9rem/1 var(--display); text-transform: uppercase; }
.mini-stamp { font: 800 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ridge); border: 2px solid var(--ridge); padding: .3rem .45rem; border-radius: 2px; transform: rotate(4deg); }
.mini-line { display: block; margin-top: .8rem; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.mini-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .9rem; border-top: 2px solid var(--ink); }
.mini-figs > span { padding: .55rem .5rem .55rem 0; }
.mini-figs > span + span { padding-left: .6rem; border-left: 1px solid var(--rule); }
.mini-l { display: block; font-size: .75rem; color: var(--ink-soft); }
.mini-v { display: block; font: 800 1.35rem/1.05 var(--display); }
.mini-chart { display: flex; align-items: flex-end; gap: 6%; height: 5.5rem; margin-top: .6rem; padding: 0 2% .25rem; border-bottom: 1px solid var(--rule); }
.mini-chart span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.mini-chart span::before { content: ""; height: calc(var(--p) * 100%); background: #a8741a; border-radius: 3px 3px 0 0; }
.mini-chart span::after { content: ""; height: calc(var(--e) * 100%); background: #2f7bb0; }
.mini-rows { display: block; margin-top: .6rem; font-size: .82rem; }
.mini-rows > span { display: block; padding: .3rem 0; border-bottom: 1px solid var(--rule); }
.mini-rows b { display: inline-block; min-width: 3.6rem; font: 800 .82rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.mini-open { position: absolute; left: 1rem; bottom: 0; font: 600 1.05rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; } .mini { max-width: 28rem; } }

/* What I don't do */
.lane { background: var(--ridge-deep); color: var(--mist); padding: calc(var(--course) * 1.75) 0; }
.lane .h2 { color: var(--mist); }
.lane-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2rem; align-items: start; }
.lane p { font-size: 1.2rem; max-width: 42rem; color: var(--mist-dim); }
@media (max-width: 760px) { .lane-inner { grid-template-columns: 1fr; gap: 1rem; } }

/* About */
.about-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.about p { margin-top: 1rem; max-width: 40rem; font-size: 1.125rem; }
.portrait { display: block; width: clamp(9rem, 22vw, 15rem); }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; border-bottom: 6px solid var(--ridge); box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(23, 38, 31, .5); }
@media (max-width: 560px) { .about-inner { grid-template-columns: 1fr; } }

/* Close: the same ridges at dusk */
.close {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--deck-deep) 0, var(--deck) 55%, #4f5866 100%);
  color: var(--mist);
  padding: calc(var(--course) * 2.5) 0 clamp(8rem, 16vw, 14rem);
}
.close .ridges { height: clamp(6rem, 14vw, 12rem); }
.close-inner { position: relative; z-index: 1; }
.sign-close { font: 800 clamp(3rem, 9vw, 7rem)/.9 var(--display); text-transform: uppercase; max-width: 14ch; color: var(--mist); }
.close .lede-sub { color: var(--mist-dim); }
.close-actions { margin-top: calc(var(--course) * 1); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; }
.close-actions .btn-gold { width: auto; min-width: 15rem; }
.close-mail { font: 600 1.25rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--mist); overflow-wrap: anywhere; }

.foot { background: var(--night); color: var(--mist-dim); padding: 1.25rem 0; font-size: .95rem; }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }

@media (max-width: 960px) {
  .facade-inner { grid-template-columns: 1fr; }
  .ticket { max-width: 30rem; }
}