:root {
  --spruce:#27774A; --leaf:#5ABC34; --tint:#CFE7C2;
  --slate:#3F4A44; --granite:#8A938C; --scree:#DDE1DC;
  --paper:#F5F4EF; --signal:#C1441E;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --text:'Montserrat',Arial,'Helvetica Neue',sans-serif;
  --measure:66ch;
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--slate);
  font-family:var(--text); font-size:16px; line-height:1.65; }
img,svg { max-width:100%; }
a { color:var(--spruce); }
a:focus-visible, button:focus-visible { outline:2px solid var(--leaf); outline-offset:3px; }

h1,h2,h3 { font-family:var(--display); font-weight:600; line-height:1.15;
  text-wrap:balance; margin:0 0 .5em; }
h1 { font-size:clamp(34px,5vw,56px); }
h2 { font-size:clamp(24px,3vw,34px); }
h3 { font-size:20px; }
p { max-width:var(--measure); margin:0 0 1.1em; }
/* Small type is Slate, not Granite (2026-09-29, Mathew, council review
   sitewide item 8): Granite measures about 3.2:1 on white and 2.9:1 on Paper,
   under the 4.5:1 floor for small text. Granite stays for rules and large type. */
.eyebrow { font-size:11px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--slate); margin-bottom:10px; }

/* ---------- header ---------- */
.rule { height:4px; background:linear-gradient(90deg,var(--spruce),var(--leaf)); }
header.site { background:var(--paper); border-bottom:1px solid var(--scree); }
header.site .bar { max-width:none; flex-wrap:nowrap; }
header.site nav.site ul { flex-wrap:nowrap; }
.bar { max-width:1180px; margin:0 auto; padding:16px var(--gutter);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.lockup { display:flex; align-items:center; gap:12px; text-decoration:none; }
.lockup .name { font-family:var(--display); font-size:25px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate); }
nav.site ul { list-style:none; display:flex; gap:26px; margin:0; padding:0;
  flex-wrap:wrap; }
/* Nav in caps with open letterspacing, Montserrat Medium, per the locked
   brand's interface type (2026-09-29, council review sitewide item 7). */
nav.site a { color:var(--slate); text-decoration:none; font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
nav.site a:hover, nav.site a[aria-current="page"] { color:var(--spruce); font-weight:700; }
.spacer { flex:1 1 auto; }
/* Header action on every page (2026-09-29, Home decision A): a phone number
   you can tap and one button to the Connect page. */
/* V33 (2026-10-01, Mathew): the phone number sits under the button, centred. */
.act { display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
.act .tel { color:var(--slate); font-size:13px; font-weight:500; letter-spacing:.04em;
  text-decoration:none; white-space:nowrap; }
.act .tel:hover { color:var(--spruce); }
.btn--sm { padding:11px 18px; font-size:11.5px; white-space:nowrap; }

/* ---------- sections ---------- */
main { max-width:1180px; margin:0 auto; padding:0 var(--gutter); }
section { padding:clamp(40px,6vw,76px) 0; border-bottom:1px solid var(--scree); }
section:last-of-type { border-bottom:0; }
.hero { padding-top:clamp(48px,7vw,88px); }
.lede { font-size:clamp(17px,2vw,20px); color:var(--slate); }

.cards { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:28px; }
.card { background:#fff; border:1px solid var(--scree); padding:24px; }
.card h3 { color:var(--spruce); }
.card p { font-size:14.5px; color:var(--slate); margin-bottom:0; }

.creds { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; padding:0; list-style:none; }
.creds li { background:var(--scree); color:var(--slate); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; padding:7px 12px; }

.btn { display:inline-block; background:var(--spruce); color:var(--paper);
  text-decoration:none; font-size:13px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; padding:14px 26px; border:0; cursor:pointer; }
.btn:hover { background:var(--leaf); color:var(--slate); }
.btn--ghost { background:transparent; color:var(--slate);
  box-shadow:inset 0 0 0 2px var(--slate); }
.btn--ghost:hover { background:var(--slate); color:var(--paper); }

form.inquiry { max-width:620px; display:grid; gap:14px; margin-top:24px; }
label { font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate); }
.optional { text-transform:none; letter-spacing:0; font-weight:400; }
input,select,textarea { font-family:var(--text); font-size:15px; padding:12px;
  border:1px solid var(--scree); background:#fff; color:var(--slate); width:100%; }
textarea { min-height:120px; }
/* testimonial page: radio and tick-box rows (2026-09-28) */
.hint { font-size:13px; color:var(--slate); margin:6px 0 0; }
fieldset.choices { border:0; padding:0; margin:0; display:grid; gap:10px; }
fieldset.choices legend { font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate); margin-bottom:8px; padding:0; }
.choice { display:flex; gap:12px; align-items:flex-start; font-size:15px;
  letter-spacing:0; text-transform:none; color:var(--slate); cursor:pointer; }
.choice input { width:auto; margin:4px 0 0; flex:0 0 auto; accent-color:var(--spruce); }
.permission { background:#fff; border:1px solid var(--scree); padding:16px 18px; }
/* intro and form share one section, so no divider and one gap (Mathew, 2026-09-28) */
.lead-in { margin-top:clamp(28px,4vw,44px); }

.note { background:#fff; border-left:4px solid var(--signal); padding:16px 18px;
  font-size:14px; }
.ph { background:var(--scree); border-left:4px solid var(--granite);
  padding:12px 16px; font-size:13.5px; color:var(--slate); max-width:none; }

footer.site { background:var(--slate); color:#FAFAF8;
  margin-top:40px; }
footer.site .bar { align-items:flex-start; }
footer.site a { color:#FAFAF8; text-decoration:underline; text-underline-offset:3px; }
footer.site a:hover { color:var(--tint); }
/* V42 (2026-10-17, Mathew): footer type near-white for legibility on Slate. It was 60% and 80%
   Paper and read 86.8% on the dark-background gate, under its 92% floor. */
footer.site .fine { font-size:12.5px; color:#FAFAF8; }
/* pale footer type must never be used on a light page; use .aside there */
.aside { font-size:13.5px; color:var(--slate); }

/* ---------- V16 additions (2026-09-29) ---------- */
/* Home: one headline across the top of the two-way banner (decision A). */
.band { max-width:1180px; margin:0 auto; padding:clamp(34px,5vw,60px) var(--gutter) clamp(26px,3.5vw,40px);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px 40px; }
.band > div { flex:1 1 520px; }
.band h1 { margin:0 0 .3em; max-width:24ch; }
.band p { margin:0; }
/* Rates: one row per group size, price right-aligned. */
table.rates { border-collapse:collapse; width:100%; max-width:460px; margin:14px 0 8px;
  font-size:15px; background:#fff; border:1px solid var(--scree); }
table.rates th, table.rates td { text-align:left; padding:10px 16px; border-bottom:1px solid var(--scree); }
table.rates th { font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
table.rates td:last-child, table.rates th:last-child { text-align:right; }
table.rates tr:nth-child(even) td { background:var(--paper); }
.rate-grid { display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
/* Lists that read as a checklist or a two-column included / not included. */
ul.check { list-style:none; padding:0; margin:14px 0 18px; max-width:var(--measure); }
ul.check li { position:relative; padding:0 0 10px 28px; }
ul.check li::before { content:""; position:absolute; left:2px; top:.55em; width:12px; height:7px;
  border-left:2px solid var(--spruce); border-bottom:2px solid var(--spruce); transform:rotate(-45deg); }
ul.plain { padding-left:1.1em; margin:10px 0 18px; max-width:var(--measure); }
ul.plain li { margin-bottom:6px; }
.two { display:grid; gap:clamp(20px,4vw,48px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.cred-line { font-size:14.5px; border-left:3px solid var(--spruce); padding:4px 0 4px 14px; }
.creds-group h3 { font-family:var(--text); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; margin:26px 0 0; }
/* The forwardable group-day sheet prints on one page. */
.sheet h2 { font-size:24px; margin-top:6px; }
@media print {
  .rule, header.site, footer.site, .noprint { display:none !important; }
  body { background:#fff; font-size:11.5pt; }
  main { padding:0; max-width:none; }
  section { padding:10pt 0; }
  a { color:var(--slate); text-decoration:none; }
  /* V20: the group day sheet ran about 4% past one Letter page (measured
     2026-09-29 in Chrome with these print rules applied at the printable
     width: 1,018 px of content against about 979 px). These bring it to
     about 933 px. */
  section.hero.sheet { padding:0 0 4pt; }
  .sheet h1 { font-size:26pt; margin:4pt 0 6pt; }
  .sheet .lede { margin-bottom:6pt; }
  .sheet h2 { margin-top:8pt; margin-bottom:4pt; }
}

@media (max-width:1180px) {
  .act .tel { display:none; }   /* the footer and Connect still carry the number */
}
@media (max-width:1080px) {
  nav.site ul { gap:18px; }
}
@media (max-width:560px) {
  .lockup .name { display:none; }   /* mark alone carries it; stays above the 90px floor */
  .lockup img { width:118px; height:auto; }
  .btn--sm { padding:10px 12px; font-size:10.5px; letter-spacing:.08em; }
}
.lockup { flex:0 0 auto; }
.lockup img { flex:0 0 auto; }
/* V18 (2026-09-29, found in the V18 walk): with the V16 phone number and
   button, the one-row header needs about 1,590 px, so from about 1,180 to
   1,590 px wide the page scrolled sideways. The header now takes two rows
   (mark, name and button; then the menu) up to 1,600 px. Was 1,080 px. */
/* V28 (2026-09-30, found on the V27 walk): with the 10% larger logo the one-row header needs
   about 1,720 px, so from 1,601 to 1,719 px the page scrolled sideways. Two rows up to 1,760 px. */
/* V34 (2026-10-01, Mathew): with Connect off the menu and a smaller header button, the one-row
   header needs about 1,444 px, so it holds one row down to 1,461 px. Was 1,760 px. */
@media (max-width:1460px) {
  header.site .bar { flex-wrap:wrap; }
  header.site nav.site ul { flex-wrap:wrap; }
  .bar { gap:14px; }
  header.site .spacer { display:none; }
  .act { margin-left:auto; }
  nav.site { order:3; flex:1 0 100%; }
  nav.site ul { gap:10px 18px; }
  nav.site a { font-size:11.5px; letter-spacing:.12em; }
}
/* ---------- hero: the two-way split ---------- */
.split { display:grid; grid-template-columns:1fr 1fr;
  padding:0; border-bottom:0; }
.half { position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(420px,58vh,640px); padding:clamp(28px,4vw,56px) clamp(24px,3.5vw,52px);
  text-decoration:none; color:#FAFAF8; overflow:hidden; isolation:isolate; }
.half::before { content:""; position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center top; transform:scale(1.02);
  transition:transform .6s ease; }
.half::after { content:""; position:absolute; inset:0; z-index:-1; transition:opacity .3s ease; }
.half:hover::before { transform:scale(1.06); }
.half:hover::after { opacity:.92; }
.half--guiding::before { background-image:url('../img/home-guiding-autumn.jpg');
  background-position:70% 62%; }
.half--guiding::after  { background:linear-gradient(180deg,
  rgba(39,119,74,.66) 0%, rgba(39,119,74,.80) 55%, rgba(30,92,57,.90) 100%); }
.half--education::before { background-image:url('../img/hero-education.jpg'); }
.half--education::after  { background:linear-gradient(180deg,
  rgba(63,74,68,.68) 0%, rgba(63,74,68,.82) 55%, rgba(45,54,49,.92) 100%); }
.half .eyebrow { font-size:11px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:#FAFAF8; opacity:.92; margin:0 0 14px; max-width:none; }
.half .eyebrow span { display:block; width:44px; height:3px; margin-top:12px;
  background:linear-gradient(90deg,var(--leaf),rgba(250,250,248,.35)); }
.half h2 { font-size:clamp(28px,3.4vw,44px); margin:0 0 .45em; color:#FAFAF8; }
.half p { margin:0 0 22px; max-width:42ch; font-size:clamp(14.5px,1.15vw,16px);
  color:rgba(250,250,248,.94); }
.half .go { display:inline-flex; align-items:center; gap:10px; font-size:13px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#FAFAF8;
  border-bottom:2px solid rgba(250,250,248,.5); padding-bottom:5px; align-self:flex-start;
  transition:border-color .25s ease, gap .25s ease; }
.half:hover .go { border-bottom-color:var(--leaf); gap:16px; }
.half:focus-visible { outline:3px solid var(--leaf); outline-offset:-6px; }
.seam { position:absolute; top:0; bottom:0; left:0; width:1px;
  background:rgba(250,250,248,.22); z-index:1; }
@media (max-width:820px) {
  .split { grid-template-columns:1fr; }
  .half { min-height:clamp(360px,46vh,460px); }
  .seam { display:none; }
}

/* ---------- photographs (Noah's approved album, added 2026-09-23) ---------- */
.pair { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,48px); align-items:center; }
.pair--top { align-items:start; }
.pair > div > :last-child { margin-bottom:0; }
.photo { margin:0; }
.photo img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.photo--wide img { aspect-ratio:3/2; }
.card .shot { display:block; width:calc(100% + 48px); max-width:none; margin:-24px -24px 18px;
  aspect-ratio:4/3; object-fit:cover; }
.inline { margin:6px 0 26px; max-width:var(--measure); }
.inline img { display:block; width:100%; height:auto; }
.trio { display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:24px; }
.trio img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
@media (max-width:820px) {
  .pair { grid-template-columns:1fr; }
  .trio { grid-template-columns:1fr; }
}
/* V17 (2026-09-29, Noah's item 4): photos carry the real place. Captions are
   small type, so Slate, per the small-text rule. */
figcaption { font-size:13px; line-height:1.5; color:var(--slate); margin-top:8px; }
.trio figure { margin:0; }
/* Rates: the cancellation schedule (V17). */
table.rates.terms th:first-child, table.rates.terms td:first-child { width:70%; }

/* V17 header fix (V16 walk): between about 561 and 760 px the header ran to
   three rows (mark and name, then the button, then the menu). The name steps
   down a size first, so it still shows on a tablet; below 561 px it hides, as
   before. */
@media (min-width:561px) and (max-width:760px) {
  .lockup .name { font-size:17px; letter-spacing:.1em; }
  .lockup img { width:126px; height:auto; }
  .btn--sm { padding:10px 14px; font-size:11px; letter-spacing:.1em; }
}

/* ---------- V18 (2026-09-29) ---------- */
/* Guiding's second tier: opens on pointer or keyboard focus on a computer.
   Hidden on touch screens and narrow windows, where the Guiding overview's
   link strip does the same job. CSS only. */
nav.site li.has-sub { position:relative; }
nav.site ul.sub { display:none; position:absolute; top:100%; left:-16px; z-index:20;
  flex-direction:column; gap:0; min-width:230px; padding:10px 0; margin-top:10px;
  background:var(--paper); border:1px solid var(--scree); box-shadow:0 8px 24px rgba(63,74,68,.12); }
nav.site ul.sub::before { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
nav.site ul.sub a { display:block; padding:8px 16px; font-size:11.5px; }
nav.site li.has-sub:hover > ul.sub, nav.site li.has-sub:focus-within > ul.sub { display:flex; }
@media (max-width:1080px), (hover:none) {
  nav.site ul.sub, nav.site li.has-sub:hover > ul.sub, nav.site li.has-sub:focus-within > ul.sub { display:none; }
}
/* The link strip across the Guiding pages. */
.subnav { display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 26px; padding:0; list-style:none; }
.subnav a { display:inline-block; font-size:11.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--slate); background:#fff;
  border:1px solid var(--scree); padding:7px 11px; }
.subnav a:hover, .subnav a[aria-current="page"] { border-color:var(--spruce); color:var(--spruce); }
/* Facts card on each offering page. */
dl.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0;
  margin:22px 0 0; background:#fff; border:1px solid var(--scree); max-width:none; }
dl.facts > div { padding:14px 18px; border-bottom:1px solid var(--scree); }
dl.facts dt { font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); margin:0 0 4px; }
dl.facts dd { margin:0; font-size:15px; }
/* Where We Climb. */
.jump { display:flex; flex-wrap:wrap; gap:6px 18px; padding:0; list-style:none; margin:10px 0 0; }
.key { background:var(--scree); padding:16px 20px; font-size:14.5px; max-width:var(--measure); }
.key p { margin:0 0 .5em; }
.crag { padding:18px 0; border-top:1px solid var(--scree); }
.crag h3 { margin:0 0 .25em; }
.crag p { margin:0 0 .4em; }
.crag ul { margin:6px 0 0; padding-left:1.1em; font-size:14.5px; }
.crag li { margin-bottom:3px; }
/* ---------- V22 additions (2026-09-30, Noah's review of V20) ---------- */
/* Colour bands: every other section sits on a Scree band, full width. */
main > section:nth-of-type(even) { background:var(--scree); box-shadow:0 0 0 100vmax var(--scree);
  clip-path:inset(0 -100vmax); border-bottom:0; }
.hero--tight { padding-top:clamp(28px,4vw,44px); padding-bottom:28px; }
.state { margin-top:22px; }
.state h3 { margin:0 0 .2em; }
.crag h4 { font-family:var(--display); font-size:21px; font-weight:600; margin:0 0 .25em; }
/* "What the day looks like" centred on the offering pages. */
.day { max-width:720px; margin:0 auto; }
.cardfig { margin:0; }
.card figcaption { margin:6px 0 0; font-size:12.5px; }
.band .btn--lg { font-size:14px; padding:20px 40px; }
.band > p { align-self:center; }
/* SPARC team band: SPARC colours (BrandGuidelines: Deep Navy, Mid Orange eyebrow
   on dark, Off White text), inside the VCG page. */
.sparc { background:#00263E; color:#FAFAF8; padding:clamp(24px,4vw,40px); margin-top:18px; }
.sparc .eyebrow { color:#FF8200; }
.sparc h3 { color:#FAFAF8; margin-top:0; }
.sparc p { color:#FAFAF8; }
.sparc a { color:#FAFAF8; }
.sparc .btn { background:#D73F09; border-color:#D73F09; color:#FAFAF8; }

/* ---------- V27 (2026-09-30, Mathew: "can we go 10% larger"): the header logo 10% larger
   than V22 at every width. Mark 170 to 187 px, name 25 to 27.5 px; tablet 126 to 139 px and
   17 to 18.7 px; phone 118 to 130 px. The media rules are restated here so they still win. */
.lockup img { width:187px; height:auto; }
.lockup .name { font-size:27.5px; }
@media (min-width:561px) and (max-width:760px) {
  .lockup .name { font-size:18.7px; }
  .lockup img { width:139px; }
}
@media (max-width:560px) {
  .lockup img { width:130px; }
}
/* ---------- V29 (2026-09-30, Mathew: "can we go up 10% more and stack vertical connection"):
   the header logo another 10% larger (mark 187 to 206 px; tablet 139 to 153; phone 130 to 143)
   and the wordmark set on two lines, VERTICAL over CONNECTION, beside the mark. A usage choice in
   the site header on Mathew's word; no identity asset changed. */
/* V31 (2026-09-30, Mathew): the mark alone another 10%, 206 to 227 px; tablet 153 to 168; phone
   143 to 157. The wordmark is unchanged. */
/* V32 (2026-09-30, Mathew: "10% more"): the mark alone, 227 to 250 px; tablet 168 to 185; phone
   157 to 173. The wordmark is unchanged. */
.lockup img { width:250px; height:auto; }
.lockup .name { font-size:30px; line-height:1.04; }
.lockup .name span { display:block; }
/* V30 (2026-09-30, Mathew: "center vertical over connection"). */
.lockup .name { text-align:center; }
@media (min-width:561px) and (max-width:760px) {
  .lockup .name { font-size:20.5px; }
  .lockup img { width:185px; }
}
@media (max-width:560px) {
  .lockup img { width:173px; }
}
/* ---------- V26 (2026-09-30, Mathew): the Home hero text starts at the same left edge as the
   header logo. The header bar runs full width (max-width:none); the band now does too. ---------- */
.band { max-width:none; }
/* ---------- V25 additions (2026-09-30, packing-list download) ---------- */
.packing { max-width:720px; margin:0 auto; background:#fff; border:1px solid var(--scree); padding:clamp(22px,4vw,34px); }
.packing h2 { margin-top:0; }
.packing-form .row { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.packing-form .row input { flex:1 1 240px; width:auto; }
.packing-form .hint { margin-top:10px; }
#pk-msg { margin:0; }
/* ---------- V23 additions (2026-09-30, Noah's photo picks) ---------- */
.gallery { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:8px 0 26px; }
.gallery figure { margin:0; }
.gallery img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.gallery--story { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.gallery--story img { aspect-ratio:3/4; }
details.place { border-top:1px solid var(--granite); padding:0; }
details.place:last-of-type { border-bottom:1px solid var(--granite); }
details.place summary { cursor:pointer; list-style:none; font-family:var(--display); font-size:23px;
  font-weight:600; padding:14px 0; display:flex; justify-content:space-between; align-items:center; }
details.place summary::-webkit-details-marker { display:none; }
details.place summary::after { content:"+"; font-family:var(--text); font-size:22px; color:var(--spruce); }
details.place[open] summary::after { content:"\2212"; }
details.place .cats { display:grid; gap:4px 28px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
details.place h4 { font-family:var(--text); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; margin:6px 0 4px; }
details.place ul.plain { margin:0 0 14px; font-size:14.5px; }
details.place .gallery { margin-top:4px; }

/* ---------- V34 (2026-10-01, Mathew): the header button smaller on computers, the same size it
   already takes on a tablet (V17). 249 to about 190 px wide. Phones keep their own sizes. ---------- */
@media (min-width:761px) {
  header.site .act .btn { font-size:11px; letter-spacing:.1em; padding:10px 14px; }
}
/* V34 (2026-10-01, Mathew: close the logo-to-Home gap by half): on one row the menu sits centred
   between the logo and the button, so the space either side of it is equal. At 1,512 px the gap
   goes from 140 to 82 px; at 1,920 px from 548 to 286 px. */
@media (min-width:1461px) {
  header.site .spacer { display:none; }
  header.site nav.site { flex:1 1 auto; }
  header.site nav.site > ul { justify-content:center; }
}

/* ---------- V35 (2026-10-01, Mathew): Home banner, the three states in the space to the right of
   the headline, touching, no labels. (V35 to V37 also carried Signal red arrows, Mathew's approved
   exception; V38 took them off, see build_home_states.py.) Off on phones and small tablets,
   where the banner stacks and the outline would sit under the text. ---------- */
.band h1 { max-width:none; }
.band { align-items:center; }
.states-fig { flex:0 1 440px; margin:0; }
.states-fig svg { display:block; width:100%; height:auto; }
@media (max-width:900px) {
  .states-fig { display:none; }
  .lede br.wide { display:none; }
}

/* ---------- V40 (2026-10-02, Noah's audit of the live site, 2 Oct) ---------- */
/* Gallery tiles follow the photo's own shape, so a tall photo is no longer cut to a wide
   frame (the Katahdin, Glass Menagerie and dropdown crops Noah flagged). The class is set
   at build time from the web copy's pixels. */
.gallery { align-items:start; }
.gallery img.tall { aspect-ratio:3/4; }
.gallery img.wide { aspect-ratio:4/3; }
/* A photo shown whole at its own shape (the Ice page's main photo lost its right side). */
.photo--natural img { aspect-ratio:auto; }
/* For Organizations: the three card photos shown whole (heads were cut off). */
.card .shot--whole { aspect-ratio:3/4; }
/* Where We Climb: a state heading stands above its crag names (they were the same size). */
.state h3 { font-size:clamp(26px,2.6vw,32px); display:inline-block; padding-top:10px;
  border-top:3px solid var(--spruce); }
/* About: the story runs as text beside a photo, the photo side alternating. */
.pair--flip > figure { order:-1; }
.story .pair { margin-bottom:clamp(28px,4vw,44px); }
.story .pair:last-child { margin-bottom:0; }
@media (max-width:820px) { .pair--flip > figure { order:0; } }

/* ---------- V41 (2026-10-17, Direction A): the climbing progression on Home ---------- */
.divider { text-align:center; margin:0 0 clamp(28px,4vw,44px); }
.divider svg { display:inline-block; max-width:300px; height:auto; }
.progress-head h2 { margin-bottom:.3em; }
.progress-head p { margin:0 0 .4em; }
.flow { display:block; width:100%; height:auto; margin-top:30px; }
.flow-list { display:none; margin-top:22px; }
.flow-list .path { border-top:3px solid var(--spruce); padding:14px 0 18px; }
.flow-list h3 { font-family:var(--text); font-size:12px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; margin:0 0 8px; }
.flow-list ol { margin:0 0 12px; padding-left:1.2em; }
.flow-list li { margin-bottom:6px; }
.flow-list .dest { background:var(--slate); color:#FAFAF8; padding:14px 16px; margin:0; font-size:14.5px; max-width:none; }
.flow-list .dest span { display:block; font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:4px; }
.steps-foot { font-size:14.5px; margin:16px 0 14px; }
.convo { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 40px;
  background:#fff; border:1px solid var(--scree); border-left:4px solid var(--spruce);
  padding:24px 28px; margin-top:clamp(36px,5vw,56px); }
.convo h2 { margin:0 0 .2em; font-size:28px; }
.convo p { margin:0; }
@media (max-width:760px) {
  .flow { display:none; }
  .flow-list { display:block; }
}

@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }