/* ==========================================================================
   DASH — the walk
   ========================================================================== */
@font-face { font-family: 'Fraunces'; src: url(../fonts/fraunces-latin-full-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(../fonts/fraunces-latin-full-italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #1c1a16;
  --ink-2: #3a362e;
  --ink-3: #6b6559;
  --paper: #f3eee3;
  --paper-2: #e9e2d2;
  --cream: #f6f2ea;
  --stone: #a89f8f;
  --fog: #c9c6be;
  --redwood: #6e3621;
  --forest: #3c4838;
  --grass: #c2a66b;
  --poppy: #d9662a;
  --rule: rgba(28, 26, 22, .16);
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Hanken', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --t: var(--ink);
  --t-soft: rgba(28, 26, 22, .72);
  --halo: 0 0 28px rgba(243, 238, 227, .55), 0 0 2px rgba(243, 238, 227, .35);
  --gut: clamp(16px, 3vw, 40px);
}
html.tone-dark .ch-body { text-shadow: 0 0 18px rgba(20, 22, 18, .7), 0 0 4px rgba(20, 22, 18, .6); }
html.tone-dark {
  --t: #f3eee3;
  --t-soft: rgba(243, 238, 227, .78);
  --halo: 0 0 26px rgba(14, 16, 12, .72), 0 1px 3px rgba(14, 16, 12, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings: 'wght' 400;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--poppy); outline-offset: 3px; }
[hidden] { display: none !important; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .9rem;
  opacity: .8;
}
.ln { display: block; overflow: hidden; padding-bottom: .08em; }
.ln > span { display: block; }

/* ============ Loader ============ */
.loader {
  position: fixed; inset: 0; z-index: 3000;
  background: #1c1a16; color: #e9e2d2;
  display: grid; place-items: center;
  transition: opacity 1.4s var(--ease), visibility 0s linear 1.4s;
}
.loader-inner { width: min(300px, 70vw); text-align: center; }
.loader-mark { width: 100%; height: auto; opacity: .92; }
.loader-line { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin: 1.6rem 0 1rem; opacity: .75; }
.loader-dots i { font-style: normal; animation: dot 1.4s infinite; opacity: 0; }
.loader-dots i:nth-child(2) { animation-delay: .2s; }
.loader-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 30%, 70% { opacity: 1; } }
.loader-trail svg { width: 100%; height: 20px; overflow: visible; }
.loader-trail path { fill: none; stroke: #c2a66b; stroke-width: 1.2; stroke-dasharray: 260; stroke-dashoffset: calc(260 - 260 * var(--p, 0)); transition: stroke-dashoffset .4s var(--ease); }
html:not(.is-loading) .loader { opacity: 0; visibility: hidden; }
html.is-plain .loader { display: none; }

/* ============ Stage ============ */
.stage { position: fixed; inset: 0; pointer-events: none; }
.layer { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.layer-bg { z-index: 1; }
.layer-fg { z-index: 900; }
.grain {
  position: fixed; inset: -50%; z-index: 901; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }
html.is-plain .stage { display: none; }

/* ============ HUD ============ */
.hud { position: fixed; inset: 0; z-index: 1000; pointer-events: none; color: var(--t); }
.hud > * { pointer-events: auto; }
.hud-logo { position: absolute; left: var(--gut); top: calc(var(--gut) - 4px); display: block; padding: 8px 0; }
.hud-logo img { height: 22px; width: auto; transition: filter .6s var(--ease); }
html.tone-dark .hud-logo img { filter: invert(1) sepia(.15) brightness(1.05); }
.hud-right { position: absolute; right: var(--gut); top: var(--gut); display: flex; gap: 10px; }
.hud-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 16px; border-radius: 40px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(243, 238, 227, .5); color: var(--ink);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(28, 26, 22, .08);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.hud-btn:hover { background: rgba(243, 238, 227, .85); }
.burger { display: grid; gap: 4px; width: 16px; }
.burger i { display: block; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.hud-menu:hover .burger i:first-child { transform: translateX(3px); }
.hud-menu:hover .burger i:last-child { transform: translateX(-3px); }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.bars i { width: 2px; height: 3px; background: currentColor; transition: height .3s; }
.hud-sound[aria-pressed="true"] .bars i { animation: bar 1.1s ease-in-out infinite; }
.hud-sound[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: .2s; }
.hud-sound[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: .45s; }
.hud-sound[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: .1s; }
@keyframes bar { 50% { height: 12px; } }

.hud-meter, .hud-map {
  background: rgba(243, 238, 227, .5); color: var(--ink);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(28, 26, 22, .08); border-radius: 40px;
}
.hud-meter {
  position: absolute; left: var(--gut); bottom: var(--gut); margin: 0;
  display: flex; gap: 12px; align-items: center; height: 34px; padding: 0 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.hud-meter span + span::before { content: '·'; margin-right: 12px; opacity: .5; }
.hud-map {
  position: absolute; right: var(--gut); bottom: var(--gut);
  display: grid; grid-template-columns: repeat(4, auto); column-gap: 16px; row-gap: 7px; padding: 9px 18px 8px; border-radius: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.hud-map a { text-decoration: none; position: relative; color: rgba(28, 26, 22, .55); transition: color .3s; }
.hud-map a:hover, .hud-map a.on { color: var(--ink); }
.hud-map-line { grid-column: 1 / -1; grid-row: 1; height: 1px; background: rgba(28, 26, 22, .25); position: relative; }
.hud-map-line i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--poppy); transform: translateX(-50%); }
.hud-map a { grid-row: 2; }
.hud-notes {
  position: absolute; left: 50%; bottom: var(--gut); transform: translate(-50%, 0);
  display: inline-flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 8px 0 16px; border-radius: 40px;
  background: rgba(28, 26, 22, .78); color: #f3eee3;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 13px; white-space: nowrap; max-width: calc(100vw - 2 * var(--gut));
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.in-camp .hud-meter, .in-camp .hud-map { opacity: 0; pointer-events: none; }
.hud-meter, .hud-map { transition: opacity .5s var(--ease); }
.hud-notes.is-off { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.hud-notes-k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.hud-notes i { font-style: normal; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(243, 238, 227, .14); transition: transform .4s var(--ease); }
.hud-notes:hover i { transform: rotate(90deg); }

html.is-plain .hud { position: sticky; top: 0; height: 64px; inset: auto; background: rgba(243, 238, 227, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); color: var(--ink); }
html.is-plain .hud-meter, html.is-plain .hud-map, html.is-plain .hud-sound, html.is-plain .hud-notes { display: none !important; }
html.is-plain .hud-logo { top: 13px; }
html.is-plain .hud-right { top: 13px; }

/* ============ Menu ============ */
.menu {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(28, 26, 22, .9); color: #f3eee3;
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  clip-path: circle(0% at var(--mx, 95%) var(--my, 5%));
  transition: clip-path .9s var(--ease-io);
  overflow-y: auto;
}
.menu.is-open { clip-path: circle(150% at var(--mx, 95%) var(--my, 5%)); }
.menu-inner { min-height: 100%; display: grid; grid-template-columns: 1.6fr 1fr; gap: 6vw; padding: 110px var(--gut) 60px; max-width: 1400px; margin: 0 auto; }
.menu-nav ol { list-style: none; margin: 0; padding: 0; }
.menu-nav li { border-top: 1px solid rgba(243, 238, 227, .14); overflow: hidden; }
.menu-nav li:last-child { border-bottom: 1px solid rgba(243, 238, 227, .14); }
.menu-nav a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px;
  padding: 14px 0; text-decoration: none;
  transform: translateY(105%); transition: transform .9s var(--ease), color .3s;
}
.menu.is-open .menu-nav a { transform: none; }
.menu-nav li:nth-child(2) a { transition-delay: .04s; } .menu-nav li:nth-child(3) a { transition-delay: .08s; }
.menu-nav li:nth-child(4) a { transition-delay: .12s; } .menu-nav li:nth-child(5) a { transition-delay: .16s; }
.menu-nav li:nth-child(6) a { transition-delay: .2s; } .menu-nav li:nth-child(7) a { transition-delay: .24s; }
.mi { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; opacity: .5; }
.mt { font-family: var(--serif); font-size: clamp(1.8rem, 4.4vw, 3.8rem); line-height: 1; font-weight: 300; letter-spacing: -.02em; font-variation-settings: 'opsz' 144, 'SOFT' 50; transition: font-variation-settings .5s, letter-spacing .5s; }
.md { font-size: 13px; opacity: .55; text-align: right; }
.menu-nav a:hover .mt { font-style: italic; letter-spacing: -.01em; }
.menu-nav a:hover .md { opacity: .9; }
.menu-side { padding-top: 14px; }
.menu-side .eyebrow { color: #c2a66b; opacity: 1; margin-top: 2.2rem; }
.menu-side .eyebrow:first-child { margin-top: 0; }
.menu-notes { list-style: none; margin: 0; padding: 0; }
.menu-notes button { padding: 6px 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 300; text-align: left; }
.menu-notes button::after { content: ' +'; opacity: .5; }
.menu-notes button:hover { font-style: italic; }
.menu-view { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-view a { padding: 9px 14px; border-radius: 40px; border: 1px solid rgba(243, 238, 227, .25); text-decoration: none; font-size: 13px; }
.menu-view a.on { background: #f3eee3; color: var(--ink); }
.menu-small { font-size: 13px; opacity: .55; max-width: 32ch; }
.menu-close { position: fixed; right: var(--gut); top: var(--gut); height: 38px; padding: 0 16px; border-radius: 40px; border: 1px solid rgba(243, 238, 227, .25); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ============ Walk mode: stations ============ */
.is-walk .walk { height: 0; }
.is-walk .chapter { display: contents; }
.is-walk .st {
  position: fixed; left: 0; top: 0; z-index: 100; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  will-change: transform, opacity;
  color: var(--t);
  text-shadow: var(--halo);
}
.is-walk .st.is-live { visibility: visible; }
.is-walk .st.is-touch { pointer-events: auto; }
.is-walk .spacer { height: var(--walk-h, 3000vh); }

/* reveals */
.st .ln > span { transform: translateY(105%); transition: transform 1.2s var(--ease); }
.st.is-near .ln > span { transform: none; }
.st .ln + .ln > span { transition-delay: .08s; }

/* Opening */
.st-open { text-align: center; width: min(92vw, 820px); }
.open-mark { margin: 0 auto; width: clamp(240px, 46vw, 660px); }
.open-mark img { width: 100%; height: auto; filter: drop-shadow(0 0 30px rgba(243, 238, 227, .45)); }
html.tone-dark .open-mark img { filter: invert(1) drop-shadow(0 0 30px rgba(0, 0, 0, .4)); }
.open-line { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.5rem, 3.1vw, 2.9rem); line-height: 1.1; margin: 1.6rem 0 2.2rem; letter-spacing: -.01em; font-variation-settings: 'opsz' 96, 'SOFT' 80; }
.open-cta {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  padding: 12px 6px; border-bottom: 1px solid currentColor;
  opacity: 0; transition: opacity 1.2s var(--ease) .6s;
}
.st-open.is-near .open-cta { opacity: 1; }
.open-cta i { font-style: normal; display: inline-block; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(6px); } }
.is-plain .open-cta { opacity: 1; }

/* whispers */
.st-whisper p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.4; color: var(--t-soft); max-width: 26ch; }

/* Chapter titles */
.st-title { text-align: center; width: min(96vw, 1400px); }
.ch-word {
  margin: 0; font-family: var(--serif); font-weight: 300; line-height: .82;
  font-size: clamp(4.6rem, 19vw, 18.5rem);
  letter-spacing: calc(.02em + var(--ls, 0) * .3em);
  font-variation-settings: 'opsz' 144, 'SOFT' calc(var(--soft, 0) * 100), 'wght' calc(220 + var(--k, 1) * 140);
  white-space: nowrap; color: var(--t);
}
.ch-word .cw { display: inline-block; white-space: nowrap; }
.ch-word .cw > span { display: inline-block; transform: translateY(calc((1 - var(--k, 1)) * var(--o, 30%))); opacity: calc(.15 + var(--k, 1) * .85); }
.ch-word--long { font-size: clamp(3.2rem, 11.5vw, 11.5rem); line-height: .9; letter-spacing: calc(.005em + var(--ls, 0) * .22em); }
.ch-word--two { font-size: clamp(2.8rem, 9.4vw, 9.6rem); }
.ch-word--two .cw { display: block; }
.ch-eyebrow, .open-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1.2rem; color: var(--t-soft); }
.open-eyebrow { margin-bottom: 1.6rem; }
.ch-line { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.35rem, 2.5vw, 2.3rem); line-height: 1.15; margin: 1.4rem auto .8rem; font-variation-settings: 'opsz' 72, 'SOFT' 60; }
.ch-body { margin: 0 auto; max-width: 40ch; font-size: clamp(14.5px, 1.1vw, 17px); font-weight: 450; font-variation-settings: 'wght' 450; color: var(--t); text-shadow: 0 0 18px rgba(243, 238, 227, .85), 0 0 4px rgba(243, 238, 227, .7); opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease) .35s, transform 1.2s var(--ease) .35s; }
.st.is-near .ch-body { opacity: 1; transform: none; }

/* Places: photos */
.st-photo { width: clamp(240px, 29vw, 440px); }
.photo { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: #2a2620; cursor: none; box-shadow: 0 30px 60px -30px rgba(20, 18, 14, .5); clip-path: inset(0 0 0 0); }
.photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08) translate(var(--px, 0), var(--py, 0)); transition: transform 1.4s var(--ease), filter 1s; filter: saturate(.92) contrast(1.02); }
.st-photo:hover .photo img { transform: scale(1.14) translate(var(--px, 0), var(--py, 0)); filter: saturate(1) contrast(1.04); }
.st-photo .photo { clip-path: inset(var(--clip, 100%) 0 0 0); transition: clip-path 1.4s var(--ease); }
.st-photo.is-near .photo, .is-plain .st-photo .photo { --clip: 0%; }
.st-photo figcaption { display: block; margin-top: 12px; }
.pc-no { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; opacity: .7; }
.pc-name { font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 400; }
.pc-more > * { overflow: hidden; }
.pc-more { display: flex; flex-wrap: wrap; gap: 0 16px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .7s var(--ease), opacity .5s; font-size: 13px; font-weight: 500; font-variation-settings: 'wght' 500; color: var(--t); text-shadow: 0 0 14px rgba(243, 238, 227, .95), 0 0 3px rgba(243, 238, 227, .8); }
.pc-more b { display: block; font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-top: 6px; }
.st-photo:hover .pc-more, .st-photo:focus-within .pc-more, .is-plain .pc-more, .is-touchdev .st-photo.is-near .pc-more { max-height: 140px; opacity: 1; }

/* Before / after */
.st-before { display: grid; grid-template-columns: auto minmax(0, 300px); gap: 28px; align-items: end; }
.ba { position: relative; width: clamp(200px, 22vw, 330px); aspect-ratio: 3 / 4; overflow: hidden; cursor: none; touch-action: pan-y; user-select: none; box-shadow: 0 30px 60px -30px rgba(20, 18, 14, .5); --cut: 50%; }
.ba img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 1px; background: #f3eee3; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2); }
.ba-handle::after { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: #f3eee3; color: var(--ink); display: grid; place-items: center; font-size: 14px; text-shadow: none; }
.ba-tag { position: absolute; top: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #f3eee3; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.ba-tag-b { left: 10px; } .ba-tag-a { right: 10px; }
.ba-title { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 300; line-height: 1.1; margin: 0 0 .7rem; }
.ba-body { margin: 0; font-size: 14px; color: var(--t-soft); max-width: 32ch; }

/* wide photo */
.st-wide { width: clamp(300px, 54vw, 860px); }
.st-wide img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; box-shadow: 0 40px 80px -40px rgba(20, 18, 14, .6); }
.st-wide figcaption { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2.6vw, 2.4rem); line-height: 1.1; margin-top: 1rem; }

/* asides: trail signs */
.st-aside {
  width: min(400px, 84vw); padding: 26px 28px 24px;
  background: rgba(243, 238, 227, .78); color: var(--ink); text-shadow: none;
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(28, 26, 22, .08);
}
.st-aside .eyebrow { color: var(--redwood); opacity: 1; }
.aside-title { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; font-weight: 350; margin: 0 0 .8rem; }
.aside-body { font-size: 14.5px; margin: 0 0 1.1rem; color: var(--ink-2); }
.text-link { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.text-link i { font-style: normal; display: inline-block; transition: transform .4s var(--ease); }
.text-link:hover i { transform: rotate(90deg); }

/* ============ Gallery (Things) ============ */
.st-gallery { width: 100vw; text-shadow: none; }
.gal-head { width: min(1200px, 92vw); margin: 0 auto 2.4vh; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--t); text-shadow: var(--halo); }
.gal-head .eyebrow { margin: 0; padding: 8px 14px; border-radius: 30px; background: rgba(243, 238, 227, .55); color: var(--ink); text-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 1; }
.gal-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.gal-filter button {
  height: 32px; padding: 0 14px; border-radius: 32px; font-size: 12.5px;
  background: rgba(243, 238, 227, .55); color: var(--ink); text-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(28, 26, 22, .1); transition: background .3s, color .3s;
}
.gal-filter button:hover { background: rgba(243, 238, 227, .9); }
.gal-filter button.on { background: var(--ink); color: #f3eee3; }
.gal-stage { position: relative; height: calc(var(--cw) * 1.36 + 80px); perspective: 1600px; perspective-origin: 50% 40%; --cw: clamp(176px, 16.5vw, 250px); }
.gal-track { position: absolute; left: 50%; top: 40px; width: var(--cw); height: calc(var(--cw) * 1.32); transform-style: preserve-3d; }
.gal-hint { width: min(1200px, 92vw); margin: 1.4vh auto 0; display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t); text-shadow: 0 0 14px rgba(243, 238, 227, .9); }
.gal-progress { flex: 1; height: 1px; background: rgba(28, 26, 22, .2); position: relative; max-width: 260px; }
html.tone-dark .gal-progress { background: rgba(243, 238, 227, .3); }
.gal-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: currentColor; }

/* the specimen card */
.card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: calc(var(--cw) * 1.32);
  text-decoration: none; color: var(--ink);
  transform-style: preserve-3d;
  cursor: none;
  will-change: transform, opacity;
}
.card-face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%),
    #f4efe4;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 0 0 1px rgba(28, 26, 22, .07), 0 24px 44px -26px rgba(20, 18, 14, .55);
  padding: 14px 14px 13px;
  transform: translateZ(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
  isolation: isolate; overflow: hidden;
}
.card-face::before { /* paper fibre */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
}
.card-face::after { /* light that follows the cursor */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 30%), rgba(255, 250, 240, .55), transparent 60%);
}
.card:hover .card-face::after, .card:focus-visible .card-face::after { opacity: 1; }
.card-top { display: flex; justify-content: flex-start; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.card-logo { flex: 1; display: grid; place-items: center; position: relative; margin: 8px 4px; }
.card-logo::before { content: ''; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(28, 26, 22, .09); }
.logo { position: relative; display: block; width: calc(var(--lw) * 100%); aspect-ratio: var(--ar); overflow: hidden; transition: transform .7s var(--ease); }
.logo img {
  position: absolute; max-width: none;
  width: calc(100% / var(--kw)); height: calc(100% / var(--kh));
  left: calc(-100% * var(--x0) / var(--kw)); top: calc(-100% * var(--y0) / var(--kh));
}
.t-mult img { filter: url(#knockout); }
.t-plate { border-radius: 3px; }
.plate-ink { display: block; width: calc(var(--lw) * 100%); background: #25221d; padding: 11% 9%; border-radius: 3px; transition: transform .7s var(--ease); }
.logo-text { font-family: var(--sans); font-weight: 800; font-size: calc(var(--cw) * .115); letter-spacing: .04em; line-height: 1; font-variation-settings: 'wght' 800; }
.card-meta { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid var(--rule); }
.card-name { font-family: var(--serif); font-size: calc(var(--cw) * .07); line-height: 1.1; font-weight: 400; }
.card-tag { font-size: calc(var(--cw) * .05); color: var(--ink-3); line-height: 1.3; min-height: 2.6em; }
.card-visit {
  position: absolute; right: 13px; bottom: 13px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  background: var(--ink); color: #f3eee3; padding: 5px 8px 4px; border-radius: 2px;
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.card-visit i { font-style: normal; display: inline-block; transition: transform .4s var(--ease); }
.card:hover .card-visit, .card:focus-visible .card-visit { opacity: 1; transform: none; }
.card:hover .card-visit i { transform: translateX(3px); }
.card:hover .card-face, .card:focus-visible .card-face { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 0 0 1px rgba(28, 26, 22, .1), 0 40px 70px -30px rgba(20, 18, 14, .7); }
.card:hover .logo, .card:hover .plate-ink { transform: translateZ(0) scale(1.04); }
.card-peek {
  position: absolute; z-index: -1; right: 6%; top: 4%; width: 62%; aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 2px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55);
  transform: translateZ(-30px) rotate(3deg); transition: transform .8s var(--ease);
  pointer-events: none;
}
.card-peek img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card-peek, .card:focus-visible .card-peek { transform: translate3d(42%, -16%, -30px) rotate(9deg); }
.card.is-out { pointer-events: none; }

/* ============ People ============ */
.st-title + .st-marker {}
.st-marker { width: min(380px, 80vw); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.st-marker::after { content: ''; position: absolute; left: 7px; top: 34px; width: 1px; height: 46vh; background: linear-gradient(currentColor, transparent); opacity: .35; }
.mk-no { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; padding-top: .55em; opacity: .75; }
.st-marker p { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 2.1vw, 1.95rem); line-height: 1.18; font-variation-settings: 'opsz' 72; }
.st-quote { width: min(860px, 88vw); margin: 0; text-align: center; }
.st-quote p { text-wrap: balance; margin: 0 auto 1.4rem; max-width: 26ch; font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; }
.st-quote footer { max-width: 50ch; margin: 0 auto; font-size: 14.5px; color: var(--t-soft); }
.st-slug { width: 54px; color: #d8b64a; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); cursor: none; text-shadow: none; }
.st-slug svg { width: 100%; height: auto; overflow: visible; }
.st-slug path { fill: currentColor; }
.st-slug .ey { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.st-slug:hover { color: #e7c65a; }

/* ============ Ideas ============ */
.st-viz { width: min(960px, 88vw, 125vh); }
.is-walk .st-viz::before { content: ''; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(236, 228, 210, .62), rgba(236, 228, 210, .35) 60%, rgba(236, 228, 210, 0)); }
.viz-copy { max-width: 560px; }
.viz-l1 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1.1; margin: 0 0 .4rem; }
.viz-l2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.45rem); color: var(--t-soft); margin: 0; opacity: 0; transition: opacity 1s; }
.st-viz.v-2 .viz-l2 { opacity: 1; }
.viz-canvas { display: block; width: 100%; aspect-ratio: 2.3 / 1; margin-top: 10px; }
.viz-facts { list-style: none; margin: 0; padding: 0; position: absolute; right: 2%; top: 30%; width: min(300px, 40%); }
.viz-facts li { position: absolute; right: 0; top: 0; width: 100%; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.viz-facts li.on { opacity: 1; transform: none; }
.viz-facts b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.02em; font-variation-settings: 'opsz' 144; }
.viz-facts span { display: block; font-size: 14px; margin-top: .4rem; }
.viz-facts small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-soft); margin-top: .5rem; }
.viz-link { margin-top: 6px; }


/* ============ Summit ============ */
.st-summit { text-align: center; width: min(94vw, 1000px); }
.sm-line { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5.6vw, 5.2rem); line-height: 1; margin: 0 0 1.4rem; letter-spacing: -.02em; font-variation-settings: 'opsz' 144, 'SOFT' 40; }
.sm-list { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 2.2rem; }
.sm-list span { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.st-summit.is-near .sm-list span { opacity: 1; transform: none; }
.st-summit.is-near .sm-list span:nth-child(2) { transition-delay: .25s; }
.st-summit.is-near .sm-list span:nth-child(3) { transition-delay: .5s; }
.st-summit.is-near .sm-list span:nth-child(4) { transition-delay: .75s; }
.sm-mark { width: clamp(200px, 24vw, 360px); height: auto; margin: 0 auto; opacity: 0; transition: opacity 1.4s var(--ease) 1.1s; }
.st-summit.is-near .sm-mark { opacity: 1; }
.sm-elev { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin: 1.8rem 0 0; color: var(--t); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; text-shadow: 0 0 12px rgba(243, 238, 227, .9); opacity: 0; transition: opacity 1.2s var(--ease) 1.4s; }
.st-summit.is-near .sm-elev, .is-plain .sm-elev { opacity: 1; }

/* ============ Camp: about + contact ============ */
.camp { position: relative; z-index: 950; background: var(--paper); }
.is-walk .camp::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 60vh; pointer-events: none;
  background: linear-gradient(to bottom, rgba(243, 238, 227, 0), rgba(243, 238, 227, .85) 70%, var(--paper));
}
.wrap { width: min(1180px, 100% - 2 * var(--gut)); margin: 0 auto; }
.about { padding: 14vh 0 10vh; }
.about-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 6vh; max-width: 16ch; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.about-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 6vw; align-items: start; }
.about-text p { margin: 0 0 1.1rem; max-width: 56ch; color: var(--ink-2); }
.about-text .lead, .note .lead { font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.3; font-weight: 350; color: var(--ink); }
.about-sign { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink) !important; }
.about-firsts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.about-firsts figure { margin: 0; }
.about-firsts figure:nth-child(2) { margin-top: 18%; }
.about-firsts img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.about-firsts figcaption { font-size: 13px; margin-top: 8px; }
.about-firsts b { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.people-row { list-style: none; margin: 8vh 0 0; padding: 0; display: flex; gap: 48px; border-top: 1px solid var(--rule); padding-top: 22px; }
.pr-name { font-family: var(--serif); font-size: 1.6rem; font-weight: 300; display: block; }
.pr-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.contact { padding: 10vh 0 12vh; background: var(--ink); color: #f3eee3; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; }
.contact .eyebrow { color: #c2a66b; opacity: 1; }
.contact-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.04; margin: 0 0 1.4rem; letter-spacing: -.02em; max-width: 14ch; }
.contact-body { color: rgba(243, 238, 227, .72); max-width: 40ch; margin: 0 0 2rem; }
.contact-mail { display: inline-flex; gap: 14px; align-items: center; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 2rem); text-decoration: none; border-bottom: 1px solid rgba(243, 238, 227, .35); padding-bottom: 6px; }
.contact-mail i { font-style: normal; transition: transform .4s var(--ease); }
.contact-mail:hover i { transform: translateX(6px); }
.contact-links { margin-top: 1.6rem; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.contact-links a { text-decoration: none; opacity: .7; }
.contact-links a:hover { opacity: 1; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; align-content: start; }
.contact-form label { display: grid; gap: 6px; }
.contact-form label.full { grid-column: 1 / -1; }
.contact-form span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 238, 227, .55); }
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit; color: #f3eee3; background: transparent; border: 0; border-bottom: 1px solid rgba(243, 238, 227, .25);
  padding: 8px 0; border-radius: 0; outline: none; transition: border-color .3s;
}
.contact-form select option { color: var(--ink); }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #c2a66b; }
.form-send { justify-self: start; display: inline-flex; gap: 12px; align-items: center; height: 44px; padding: 0 20px; border-radius: 44px; background: #f3eee3; color: var(--ink); font-size: 14px; }
.form-note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: rgba(243, 238, 227, .45); }

.foot { background: var(--ink); color: rgba(243, 238, 227, .55); padding: 0 0 40px; }
.foot-grid { display: grid; grid-template-columns: auto auto 1fr; gap: 24px 40px; align-items: center; border-top: 1px solid rgba(243, 238, 227, .12); padding-top: 28px; }
.foot-logo { height: 18px; width: auto; filter: invert(1); opacity: .6; }
.foot-copy { margin: 0; font-size: 12px; }
.foot-legal { margin: 0; font-size: 11px; line-height: 1.6; max-width: 70ch; justify-self: end; text-align: right; }

/* ============ Field notes ============ */
.notes-scrim { position: fixed; inset: 0; z-index: 1199; background: rgba(28, 26, 22, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .6s var(--ease); }
.notes-scrim.is-on { opacity: 1; }
.note {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
  width: min(620px, 100vw); background: var(--paper); color: var(--ink);
  box-shadow: -40px 0 80px -40px rgba(0, 0, 0, .45);
  transform: translateX(104%); transition: transform .8s var(--ease-io);
  overflow-y: auto; overscroll-behavior: contain;
}
.note-wide { width: min(760px, 100vw); }
.note.is-open { transform: none; }
.note-body { padding: 84px clamp(22px, 4vw, 52px) 80px; }
.note .eyebrow { color: var(--redwood); opacity: 1; }
.note h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 1.4rem; }
.note h4 { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 2.6rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.note p { color: var(--ink-2); margin: 0 0 1rem; }
.note a { color: var(--redwood); }
.note-list { margin: 0; }
.note-list dt { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; margin-top: 1rem; }
.note-list dd { margin: .25rem 0 0; color: var(--ink-2); font-size: 15px; }
.note-list dd a, .note-stats a { font-size: 12px; white-space: nowrap; }
.note .src { font-size: 12.5px; color: var(--ink-3); }
.note-quote { font-family: var(--serif); font-style: italic; font-size: 1.35rem !important; line-height: 1.3; color: var(--ink) !important; margin-top: 2.4rem !important; padding-left: 18px; border-left: 2px solid var(--redwood); }
.note-fig { margin: 1.8rem 0; }
.note-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.note-fig figcaption { font-family: var(--serif); font-style: italic; font-size: 15px; margin-top: .6rem; color: var(--ink-2); }
.note-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.note-stats li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.note-stats b { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.7rem; line-height: 1.1; }
.note-close { position: sticky; top: 0; float: right; margin: 18px 18px 0 0; height: 36px; padding: 0 14px; border-radius: 36px; border: 1px solid var(--rule); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--paper); z-index: 2; }

/* ============ Lightbox ============ */
.lightbox { position: fixed; inset: 0; z-index: 1300; background: rgba(20, 18, 14, .92); display: grid; place-items: center; padding: 6vh 5vw; opacity: 0; transition: opacity .5s var(--ease); }
.lightbox.is-on { opacity: 1; }
.lightbox figure { margin: 0; max-width: 1400px; }
.lightbox img { max-height: 80vh; width: auto; margin: 0 auto; transform: scale(.97); transition: transform .9s var(--ease); }
.lightbox.is-on img { transform: none; }
.lightbox figcaption { color: #e9e2d2; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; text-align: center; }
.lb-close { position: fixed; top: var(--gut); right: var(--gut); color: #e9e2d2; height: 38px; padding: 0 16px; border-radius: 40px; border: 1px solid rgba(233, 226, 210, .3); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ============ Cursor ============ */
.cursor { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; display: none; mix-blend-mode: normal; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .ba, .has-cursor .card { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.cursor-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--t); transition: opacity .3s, background .4s; }
.cursor-ring {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid var(--t); display: grid; place-items: center;
  transition: width .5s var(--ease), height .5s var(--ease), margin .5s var(--ease), background .4s, border-color .4s;
}
.cursor-label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #f3eee3; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cursor.is-label .cursor-ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: rgba(28, 26, 22, .86); border-color: transparent; }
.cursor.is-label .cursor-label { opacity: 1; transition-delay: .1s; }
.cursor.is-label .cursor-dot { opacity: 0; }
.cursor.is-down .cursor-ring { transform: scale(.88); }
.cursor.is-hidden { opacity: 0; }
.menu-open .cursor-dot, .notes-open .cursor-dot { background: #c2a66b; }
.menu-open .cursor-ring { border-color: #c2a66b; }
.notes-open .cursor-ring { border-color: var(--ink); }

/* ============ Whisper ============ */
.whisper {
  position: fixed; left: 50%; top: 22%; z-index: 1001; margin: 0; transform: translate(-50%, 10px);
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--t); text-shadow: var(--halo); opacity: 0; pointer-events: none;
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.whisper.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ============ Plain view (and reduced motion) ============ */
.is-plain body { background: var(--paper); }
.is-plain .walk { display: block; }
.is-plain .chapter { padding: 12vh var(--gut); border-bottom: 1px solid var(--rule); max-width: 1240px; margin: 0 auto; }
.is-plain .st { position: relative; margin: 0 auto 8vh; color: var(--ink); }
.is-plain .st-whisper p { color: var(--ink-2); max-width: 46ch; }
.is-plain .ch-open { padding-top: 16vh; text-align: center; }
.is-plain .st-title { text-align: left; width: auto; }
.is-plain .ch-word { font-size: clamp(3.6rem, 13vw, 10rem); --k: 1; --ls: 0; }
.is-plain .ch-line, .is-plain .ch-body { margin-left: 0; }
.is-plain .ch-body { opacity: 1; transform: none; }
.is-plain .ln > span { transform: none; }
.is-plain .ch-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4vw; }
.is-plain .ch-places > .st-title, .is-plain .ch-places > .st-before, .is-plain .ch-places > .st-wide, .is-plain .ch-places > .st-aside, .is-plain .ch-places > .st-whisper { grid-column: 1 / -1; }
.is-plain .st-photo { width: auto; }
.is-plain .st-wide { width: auto; }
.is-plain .st-aside { width: auto; max-width: 640px; margin-left: 0; background: var(--paper-2); }
.is-plain .st-before { grid-template-columns: auto 1fr; }
.is-plain .st-gallery { width: auto; }
.is-plain .gal-head, .is-plain .gal-hint { width: auto; }
.is-plain .gal-hint { display: none; }
.is-plain .gal-stage { height: auto; perspective: none; --cw: 100%; }
.is-plain .gal-track { position: static; width: auto; height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.is-plain .card { position: relative; width: auto; height: auto; aspect-ratio: 1 / 1.32; --cw: 220px; transform: none !important; opacity: 1 !important; }
.is-plain .card.is-filtered { display: none; }
.is-plain .st-marker { width: auto; max-width: 640px; margin-left: 0; }
.is-plain .st-marker::after { display: none; }
.is-plain .st-slug { display: none; }
.is-plain .st-quote { text-align: left; margin-left: 0; }
.is-plain .st-quote footer { margin-left: 0; }
.is-plain .st-viz { width: auto; }
.is-plain .viz-l2 { opacity: 1; }
.is-plain .viz-facts { position: static; width: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.is-plain .viz-facts li { position: static; opacity: 1; transform: none; }
.is-plain .ch-summit { text-align: center; }
.is-plain .st-summit { width: auto; }
.is-plain .sm-list span, .is-plain .sm-mark { opacity: 1; transform: none; }
.is-plain .spacer { display: none; }

/* ============ Responsive ============ */
@media (max-width: 860px) {
  .menu-inner { grid-template-columns: 1fr; padding-top: 90px; }
  .md { display: none; }
  .menu-nav a { grid-template-columns: 1fr; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-legal { justify-self: start; text-align: left; }
  .hud-map { display: none; }
  .hud-meter { font-size: 9.5px; gap: 10px; }
  .hud-meter span + span::before { margin-right: 10px; }
  .hud-notes { bottom: calc(var(--gut) + 46px); }
  .hud-notes-k { display: none; }
  .hud-btn-label { display: none; }
  .hud-btn { padding: 0 12px; }
  .hud-sound .hud-btn-label { display: none; }
  .st-before { grid-template-columns: 1fr; gap: 14px; width: min(78vw, 340px); }
  .ba { width: 100%; aspect-ratio: 4 / 4.2; }
  .st-photo { width: min(78vw, 360px); }
  .st-wide { width: 86vw; }
  .viz-facts { position: relative; right: auto; top: auto; width: 100%; height: 120px; margin-top: 10px; }
  .viz-facts li { right: auto; left: 0; }
  .viz-canvas { aspect-ratio: 1.5 / 1; }
  .st-marker::after { height: 30vh; }
  .is-plain .ch-places { grid-template-columns: 1fr; }
  .is-plain .viz-facts { grid-template-columns: 1fr 1fr; height: auto; }
  .note-stats { grid-template-columns: 1fr; }
}
@media (hover: none) {
  .card-visit { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============ Additions: intro, specs, credit, thesis ============ */
.st-intro { width: min(460px, 84vw); }
.st-intro .intro-body, .st-intro .intro-title { color: var(--ink); }
.st-intro .intro-list { color: var(--ink-2); }
.st-intro .intro-list b { color: var(--redwood); }
.intro-title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.1; margin: 0 0 .9rem; }
.intro-body { margin: 0 0 1.2rem; font-size: 15px; color: var(--t); }
.intro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--t-soft); }
.intro-list b { display: block; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--t); margin-bottom: 2px; }
.st-whisper-lg p { font-size: clamp(1.25rem, 2vw, 1.8rem); max-width: 30ch; color: var(--t); line-height: 1.25; }
.specs { margin: 0 0 1rem; display: grid; gap: 0; }
.specs > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); }
.specs > div:last-child { border-bottom: 1px solid var(--rule); }
.specs dt { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.specs dd { margin: 0; font-size: 14px; color: var(--ink); }
.st-specs { width: min(440px, 86vw); }
.aside-body.small { font-size: 13px; color: var(--ink-3); margin: 0; }
.st-credit { width: min(460px, 86vw); }
.aside-quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.15rem; line-height: 1.35; margin: 0 0 .9rem; color: var(--ink); }
.st-thesisq { width: min(520px, 86vw); }
.st-thesisq .aside-quote { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.ba-meta { margin: .9rem 0 0; font-size: 13px; color: var(--t-soft); }
.ba-meta b { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-right: 10px; }
.st-thesis { width: min(1080px, 92vw); text-shadow: none; }
.st-thesis > .eyebrow { color: var(--t); text-shadow: var(--halo); }
.thesis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.thesis li {
  padding: 20px 20px 22px; font-size: 14px; line-height: 1.5; color: var(--ink-2);
  background: rgba(243, 238, 227, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(28, 26, 22, .08);
  opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.thesis li:nth-child(2) { transition-delay: .1s; } .thesis li:nth-child(3) { transition-delay: .2s; } .thesis li:nth-child(4) { transition-delay: .3s; }
.st-thesis.is-near .thesis li, .is-plain .thesis li { opacity: 1; transform: none; }
.thesis b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.15; color: var(--ink); margin-bottom: .6rem; }
.st-marker b { font-weight: 500; }
.is-plain .st-intro, .is-plain .st-specs, .is-plain .st-credit, .is-plain .st-thesis, .is-plain .st-thesisq { width: auto; max-width: 760px; margin-left: 0; }
.is-plain .st-thesis { max-width: none; }
@media (max-width: 860px) {
  .thesis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .thesis li { padding: 14px; font-size: 13px; }
  .specs > div { grid-template-columns: 1fr; gap: 2px; }
}
.is-walk .st-marker {
  padding: 18px 22px 20px; color: var(--ink); text-shadow: none;
  background: rgba(243, 238, 227, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(28, 26, 22, .08);
}
.is-walk .st-marker::after { left: 29px; top: 100%; }
.ch-word--two { margin-top: .6rem; }
.st-quote footer { color: var(--t); }
.st-help { width: min(440px, 86vw); }

/* ============ Round 3 ============ */
.ch-line--lg { font-size: clamp(1.6rem, 3.1vw, 3rem); max-width: 26ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.ch-word--mid { font-size: clamp(2.8rem, 9vw, 9rem); }
.st-title--credit .ch-eyebrow { color: var(--redwood); }
.st-title--credit .ch-word { color: var(--redwood); }
.st-credit { width: min(480px, 88vw); }
.st-credit .aside-body { font-size: 15.5px; }
.aside-line { font-family: var(--serif); font-size: 1.12rem; line-height: 1.35; color: var(--ink); margin: 0 0 1.1rem; }
.st-wide { width: clamp(260px, 38vw, 600px); text-align: center; }
.st-wide figcaption { text-align: center; font-size: clamp(1.15rem, 2vw, 1.9rem); max-width: 22ch; margin: 1rem auto 0; text-wrap: balance; }
.gal-head { justify-content: center; }
.is-plain .st-wide { margin-left: auto; margin-right: auto; max-width: 640px; }

/* ============ Type system (round 4) ============
   Display: Fraunces, light, upright — only for the big words.
   Labels:  Plex Mono, small caps.
   Everything else: Hanken Grotesk. No italics. */
.open-line, .ch-line, .ch-line--lg, .st-whisper p, .aside-title, .aside-quote, .aside-line, .pc-name,
.st-wide figcaption, .st-marker p, .st-quote p, .viz-l1, .viz-l2, .sm-line, .card-name, .thesis b,
.about-text .lead, .note .lead, .note-list dt, .note-quote, .menu-notes button, .contact-mail, .pr-name,
.about-sign, .ba-title, .whisper, .note-fig figcaption, .lightbox figcaption, .pair-card, .invite-title {
  font-family: var(--sans); font-style: normal; font-variation-settings: normal;
}
.open-line { font-weight: 400; font-size: clamp(1.1rem, 1.7vw, 1.5rem); letter-spacing: .005em; margin: 1.4rem 0 2rem; }
.ch-line { font-weight: 400; font-size: clamp(1.1rem, 1.75vw, 1.6rem); line-height: 1.3; letter-spacing: -.005em; margin: 1.3rem auto .7rem; max-width: 34ch; text-wrap: balance; }
.ch-line--lg { font-size: clamp(1.25rem, 2.2vw, 2rem); max-width: 30ch; }
.ch-body { font-weight: 400; font-variation-settings: 'wght' 400; }
.st-whisper p { font-weight: 400; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.45; color: var(--t); max-width: 34ch; }
.aside-title { font-weight: 500; font-size: 1.22rem; line-height: 1.3; letter-spacing: -.005em; }
.aside-quote, .aside-line { font-weight: 400; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.aside-line { padding-top: .2rem; }
.pc-name { font-weight: 500; font-size: 1rem; letter-spacing: .005em; }
.st-wide figcaption { font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.35; }
.st-quote p { font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.35; letter-spacing: -.01em; max-width: 32ch; }
.viz-l1 { font-weight: 400; font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.25; }
.viz-l2 { font-weight: 400; font-size: clamp(.95rem, 1.2vw, 1.1rem); }
.intro-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.015em; font-variation-settings: 'opsz' 144; margin-bottom: 1rem; }
.about-text .lead, .note .lead { font-weight: 400; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; }
.note-list dt { font-weight: 600; font-size: 1rem; }
.note-quote { font-weight: 400; font-size: 1.1rem !important; }
.menu-notes button { font-weight: 400; font-size: 1.1rem; padding: 7px 0; }
.contact-mail { font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.6rem); }
.pr-name { font-weight: 500; font-size: 1.25rem; }
.whisper { font-weight: 400; font-size: clamp(1rem, 1.4vw, 1.2rem); }

/* gallery cards and filters */
.card-name { font-weight: 600; font-size: calc(var(--cw) * .064); letter-spacing: -.005em; }
.card-tag { font-size: calc(var(--cw) * .05); letter-spacing: .005em; }
.card-cat { font-size: 9.5px; letter-spacing: .16em; }
.gal-filter { gap: 4px; padding: 4px; border-radius: 40px; background: rgba(243, 238, 227, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(28, 26, 22, .08); }
.gal-filter button { height: 32px; padding: 0 16px; font-family: var(--sans); font-weight: 500; font-size: 12.5px; letter-spacing: .01em; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink-2); }
.gal-filter button:hover { background: rgba(255, 255, 255, .55); }
.gal-filter button.on { background: var(--ink); color: #f3eee3; }
.gal-hint { font-size: 10px; }

/* philosophy: two tiles together, no numbers */
.st-pair { width: min(820px, 90vw); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-shadow: none; }
.pair-card { padding: 22px 24px 24px; background: rgba(243, 238, 227, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(28, 26, 22, .08); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.pair-card p { margin: 0; }
.pair-title { font-weight: 600; color: var(--ink); font-size: 1.05rem; margin-bottom: .5rem !important; }
.is-walk .st-quote { padding: 34px 38px 32px; background: rgba(243, 238, 227, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(28, 26, 22, .08); color: var(--ink); text-shadow: none; width: min(720px, 88vw); }
.is-walk .st-quote footer { color: var(--ink-2); }

/* invitation after the portfolio */
.st-invite { width: min(420px, 84vw); padding: 24px 26px 24px; background: rgba(243, 238, 227, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(28, 26, 22, .08); color: var(--ink); text-shadow: none; }
.invite-title { font-weight: 500; font-size: 1.22rem; margin: 0 0 .35rem; }
.invite-body { margin: 0 0 1.1rem; color: var(--ink-2); font-size: 15px; }
.invite-link { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; height: 40px; padding: 0 18px; border-radius: 40px; background: var(--ink); color: #f3eee3; font-size: 13.5px; font-weight: 500; }
.invite-link i { font-style: normal; transition: transform .4s var(--ease); }
.invite-link:hover i { transform: translateX(4px); }
.is-plain .st-pair, .is-plain .st-invite { margin-left: 0; }
@media (max-width: 860px) { .st-pair { grid-template-columns: 1fr; gap: 8px; } }

/* ============ Device-specific layout (round 5) ============ */
/* Phones (portrait) */
@media (max-width: 600px) {
  :root { --gut: 14px; }
  .ch-word--long { font-size: 15.5vw; line-height: .92; }
  .ch-word--long .cw { display: block; }
  .ch-word--two { font-size: 13vw; }
  .ch-line, .ch-line--lg { font-size: 1.12rem; max-width: 24ch; }
  .ch-body { font-size: 14.5px; max-width: 30ch; }
  .open-mark { width: 72vw; }
  .open-line { font-size: 1.08rem; }
  .st-photo { width: 84vw; }
  .st-photo .pc-more { max-height: 140px; opacity: 1; }
  .st-wide { width: 84vw; }
  .st-aside, .st-intro, .st-specs, .st-credit, .st-help, .st-invite { width: 88vw; padding: 20px 20px 20px; }
  .specs > div { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
  .st-pair { width: 88vw; grid-template-columns: 1fr; gap: 8px; }
  .pair-card { padding: 16px 18px 18px; font-size: 14px; }
  .is-walk .st-quote { width: 88vw; padding: 24px 22px; }
  .st-quote p { font-size: 1.15rem; }
  .st-thesis { width: 88vw; }
  .thesis { grid-template-columns: 1fr; gap: 8px; }
  .thesis li { padding: 14px 16px; font-size: 13.5px; }
  .thesis b { font-size: 1rem; margin-bottom: .3rem; }
  /* gallery: one swipeable row of filters, cards a touch larger, a quiet arrow instead of the VISIT label */
  .gal-head { width: 100vw; padding: 0 14px; justify-content: flex-start; }
  .gal-filter { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gal-filter::-webkit-scrollbar { display: none; }
  .gal-filter button { flex: none; padding: 0 14px; }
  .gal-stage { --cw: 58vw; }
  .gal-hint { width: auto; padding: 0 14px; }
  .card-visit { right: 10px; bottom: 10px; padding: 4px 7px; font-size: 0; letter-spacing: 0; }
  .card-visit i { font-size: 12px; }
  /* Why Utah chart: readable on a small screen */
  .st-viz { width: 92vw; padding: 18px 16px 14px; background: rgba(243, 238, 227, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(28, 26, 22, .08); color: var(--ink); text-shadow: none; }
  .is-walk .st-viz::before { display: none; }
  .viz-canvas { aspect-ratio: 1.35 / 1; }
  .viz-l1 { font-size: 1.15rem; }
  .viz-facts { height: 112px; }
  .viz-facts b { font-size: 2.4rem; }
  .viz-link { display: none; }
  .sm-list { font-size: 10.5px; letter-spacing: .16em; line-height: 1.8; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; }
  .st-summit { width: 92vw; }
  .sm-mark { width: 62vw; }
  .hud-meter { font-size: 9px; padding: 0 12px; gap: 8px; height: 30px; }
  .hud-meter span + span::before { margin-right: 8px; }
  .hud-logo img { height: 19px; }
  .menu-inner { padding: 80px 18px 40px; gap: 28px; }
  .mt { font-size: 2rem; }
  .about { padding: 9vh 0 7vh; }
  .about-title { font-size: 2.1rem; margin-bottom: 4vh; }
  .about-firsts { gap: 10px; }
  .people-row { gap: 28px; }
  .note-body { padding: 70px 20px 60px; }
  .note h3 { font-size: 1.9rem; }
  .lightbox { padding: 10vh 4vw; }
}
/* Phones held sideways and other short screens */
@media (max-height: 520px) and (orientation: landscape) {
  .ch-word, .ch-word--long, .ch-word--two { font-size: 12vh; }
  .ch-word--long .cw { display: inline-block; }
  .ch-line, .ch-line--lg { font-size: 1rem; margin-top: .6rem; }
  .ch-body { display: none; }
  .st-photo { width: 40vw; }
  .st-wide { width: 42vw; }
  .st-aside, .st-intro, .st-specs, .st-credit, .st-help, .st-invite, .is-walk .st-quote { width: 56vw; padding: 14px 18px; font-size: 13px; }
  .intro-list { display: none; }
  .gal-stage { --cw: 26vh; }
  .viz-canvas { aspect-ratio: 3 / 1; }
  .hud-map, .hud-notes { display: none !important; }
  .open-mark { width: 38vw; }
}
/* Tablets */
@media (min-width: 601px) and (max-width: 1100px) {
  .ch-word--long { font-size: 11vw; }
  .st-photo { width: 44vw; }
  .st-wide { width: 56vw; }
  .gal-stage { --cw: 26vw; }
  .st-thesis { width: 94vw; }
  .thesis { grid-template-columns: repeat(3, 1fr); }
}
/* Large desktop screens: keep everything at a comfortable reading size */
@media (min-width: 1700px) {
  .st-photo { width: 480px; }
  .st-aside, .st-intro, .st-specs, .st-credit, .st-help, .st-invite { width: 480px; }
  .ch-body { font-size: 18px; }
  .gal-stage { --cw: 270px; }
}
@media (hover: none) {
  .cursor { display: none !important; }
}
/* Tablets held upright */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .st-viz { width: 86vw; padding: 24px 26px 18px; background: rgba(243, 238, 227, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(28, 26, 22, .08); color: var(--ink); text-shadow: none; }
  .is-walk .st-viz::before { display: none; }
  .viz-facts { position: relative; right: auto; top: auto; width: 100%; height: 120px; margin-top: 10px; }
  .viz-facts li { right: auto; left: 0; }
  .ch-word--long { font-size: 12.5vw; }
  .ch-line, .ch-line--lg { font-size: 1.5rem; }
  .st-photo { width: 62vw; }
  .st-aside, .st-intro, .st-specs, .st-credit, .st-help, .st-invite { width: 64vw; }
  .st-pair { width: 80vw; }
}
/* the Why Utah chart sits on its own card on every device */
.is-walk .st-viz { padding: 26px 30px 20px; background: rgba(243, 238, 227, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(28, 26, 22, .08); color: var(--ink); text-shadow: none; }
.is-walk .st-viz::before { display: none; }
.is-walk .st-viz .viz-l2, .is-walk .st-viz .viz-facts small { color: var(--ink-3); }
@media (max-height: 520px) and (orientation: landscape) {
  .gal-stage { --cw: 30vh; height: calc(var(--cw) * 1.36 + 50px); }
  .gal-head { margin-bottom: 1vh; }
  .ch-word--long, .ch-word--two { font-size: 12vh; }
  .st-photo { width: 40vw; }
  .st-viz { width: 70vw; padding: 12px 18px; }
  .viz-canvas { aspect-ratio: 3.2 / 1; }
  .viz-facts { position: absolute; right: 18px; top: 16px; width: 34%; height: auto; }
  .viz-l2 { display: none; }
  .st-thesis { width: 90vw; }
  .thesis { grid-template-columns: repeat(3, 1fr); }
}
@media (hover: none) {
  .card-visit { right: 10px; bottom: 10px; padding: 4px 7px; font-size: 0; letter-spacing: 0; }
  .card-visit i { font-size: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) { .viz-facts { top: 48%; } }

/* Round 6: only "What we do" keeps a panel; everything after sits on the scene */
.is-walk .st-aside:not(.st-intro), .is-walk .st-quote, .is-walk .st-invite {
  background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--t); text-shadow: var(--halo); padding-left: 0; padding-right: 0;
}
.is-walk .st-aside:not(.st-intro) .eyebrow { color: var(--t); opacity: .8; }
.is-walk .st-aside:not(.st-intro) .specs dt, .is-walk .st-aside:not(.st-intro) .specs dd, .is-walk .st-aside:not(.st-intro) .aside-body, .is-walk .st-aside:not(.st-intro) .aside-title { color: var(--t); }
.is-walk .st-aside:not(.st-intro) .specs div { border-color: rgba(255, 255, 255, .28); }
.is-walk .st-quote footer, .is-walk .st-quote footer b { color: var(--t); font-weight: 500; }
.is-walk .st-quote footer b { display: block; margin-bottom: .3em; font-family: var(--serif); font-weight: 400; font-size: 1.2em; }
.is-walk .invite-title, .is-walk .invite-body { color: var(--t); }
.is-walk .thesis li { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--t); text-shadow: var(--halo); padding-left: 4px; padding-right: 4px; }
.is-walk .thesis b { color: var(--t); }
:root { --haze: 236, 228, 210; }
html.tone-dark { --haze: 14, 16, 12; }
.is-walk .st-aside:not(.st-intro)::before, .is-walk .st-quote::before, .is-walk .st-invite::before, .is-walk .st-thesis::before {
  content: ''; position: absolute; inset: -22% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--haze), .8), rgba(var(--haze), .5) 62%, rgba(var(--haze), 0));
}
.is-walk .st-aside:not(.st-intro), .is-walk .st-quote, .is-walk .st-invite, .is-walk .st-thesis { text-shadow: none; }

/* ==========================================================================
   Round 7 — one system for every pane
   Three voices only:
     Label     small, tracked, uppercase sans
     Headline  Fraunces, light, upright
     Body      Hanken, 15.5px, relaxed leading
   Every pane on the walk shares the same width, alignment and rhythm.
   ========================================================================== */
:root { --mono: 'Hanken', 'Helvetica Neue', Arial, sans-serif; --pane: 460px; }

/* Label */
.eyebrow, .ch-eyebrow, .open-eyebrow, .specs dt, .intro-list b, .text-link, .open-cta, .sm-elev, .sm-list,
.pc-more b, .viz-facts small, .contact-form span, .note h4, .gal-hint, .card-top, .ba-meta b, .about-firsts b, .pr-role,
.hud-meter, .hud-btn, .hud-notes, .hud-map, .contact-links, .menu-close, .mi, .loader-line {
  font-family: var(--sans); font-weight: 600; font-variation-settings: 'wght' 600; letter-spacing: .2em;
}
.eyebrow, .ch-eyebrow, .open-eyebrow { font-size: 11px; text-transform: uppercase; }
.st .eyebrow { margin: 0 0 14px; color: var(--t-soft); opacity: 1; }
.st-intro .eyebrow { color: var(--ink-3); }

/* Headline */
.aside-title, .invite-title, .intro-title, .st-quote p, .viz-l1, .thesis b, .st-wide figcaption, .ch-line, .open-line, .st-whisper p {
  font-family: var(--serif); font-weight: 300; font-style: normal; letter-spacing: -.01em;
  font-variation-settings: 'opsz' 72, 'SOFT' 30;
}
.aside-title, .invite-title, .intro-title, .st-quote p {
  font-size: clamp(1.55rem, 2.05vw, 1.95rem); line-height: 1.16; margin: 0 0 14px; max-width: none; text-wrap: balance; text-align: left;
}
.st-whisper p { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.3; }
.ch-line, .ch-line--lg { font-size: clamp(1.25rem, 2vw, 1.85rem); line-height: 1.25; }
.open-line { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.thesis b { font-size: 1.25rem; line-height: 1.2; margin: 0 0 6px; color: inherit; }

/* Body */
.aside-body, .invite-body, .intro-body, .st-quote footer, .thesis li, .aside-line, .specs dd {
  font-family: var(--sans); font-weight: 400; font-variation-settings: 'wght' 400; font-size: 15.5px; line-height: 1.6; letter-spacing: 0;
}
.aside-body, .invite-body, .intro-body, .aside-line { margin: 0 0 16px; }
.specs dd { font-size: 15px; }
.st-quote footer { max-width: none; margin: 0; text-align: left; }
.is-walk .st-quote footer b { display: inline; margin: 0; font: inherit; font-weight: 600; }

/* Panes: one width, left aligned, same rhythm */
.st-intro, .st-specs, .st-credit, .st-help, .st-invite, .st-aside, .st-thesis, .is-walk .st-quote, .st-quote {
  width: min(var(--pane), 88vw); text-align: left;
}
.is-walk .st-aside:not(.st-intro), .is-walk .st-quote, .is-walk .st-invite, .is-walk .st-thesis { padding: 8px 0; }
.st-intro { padding: 30px 32px 28px; }
.specs { margin: 0 0 18px; }
.specs > div { grid-template-columns: 9.5em 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); }
.specs dt { font-size: 10.5px; padding-top: 4px; color: var(--t-soft); }
html.tone-dark .specs > div { border-color: rgba(243, 238, 227, .22); }

/* "How we choose" reads like the other panes: one column, hairlines */
.thesis { display: block; }
.is-walk .thesis li { padding: 14px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.is-walk .thesis li:last-child { border-bottom: 1px solid var(--rule); }

/* Links: one style everywhere */
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; text-transform: uppercase; text-decoration: none; color: inherit;
  border-bottom: 1px solid currentColor; padding: 0 0 5px; }
.text-link i { font-style: normal; transition: transform .4s var(--ease); }
.text-link:hover i { transform: translateX(3px); }

/* Why Utah: the longer version, surfaced */
.pill-link { display: inline-flex; align-items: center; gap: 12px; height: 42px; padding: 0 8px 0 20px; margin-top: 14px; border-radius: 42px;
  background: var(--ink); color: #f3eee3; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  transition: background .3s, transform .4s var(--ease); }
.pill-link i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 238, 227, .16); font-style: normal; font-size: 15px; letter-spacing: 0; transition: transform .4s var(--ease); }
.pill-link:hover { background: var(--redwood); }
.pill-link:hover i { transform: rotate(90deg); }
.viz-link { display: inline-flex !important; position: relative; z-index: 3; }

/* Contact form */
.form-honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form.is-check input:invalid { border-bottom-color: var(--poppy); }
.form-send:disabled { opacity: .6; cursor: default; }
.form-note { line-height: 1.55; max-width: 52ch; }
.form-note a { color: inherit; }
.contact-form.is-sent { display: block; }
.form-done-t { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0 0 .6rem; }
.form-done-b { margin: 0; color: rgba(243, 238, 227, .72); max-width: 44ch; }

/* Plain view keeps the same system */
.is-plain .st-quote p, .is-plain .aside-title { text-align: left; }

@media (max-width: 600px) {
  .aside-title, .invite-title, .intro-title, .st-quote p { font-size: 1.45rem; }
  .aside-body, .invite-body, .intro-body, .st-quote footer, .thesis li, .aside-line { font-size: 14.5px; }
  .st-intro { padding: 22px 20px; }
  .specs > div { grid-template-columns: 1fr; gap: 2px; }
  .is-walk .thesis li { padding: 10px 0; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .st-intro, .st-specs, .st-credit, .st-help, .st-invite, .st-aside, .st-thesis, .is-walk .st-quote { width: 56vw; }
  .aside-title, .invite-title, .intro-title, .st-quote p { font-size: 1.2rem; }
  .aside-body, .invite-body, .intro-body, .st-quote footer, .thesis li, .aside-line, .specs dd { font-size: 13px; }
}
.contact-form .form-send .fs-l { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }

/* ============ Round 8: easier browsing ============ */
/* walk ⇄ page switch, always in reach */
.hud-view { text-decoration: none; }
.hud-btn-short { display: none; }
html.is-walk .hud-view--walk, html.is-plain .hud-view--plain { display: none; }
@media (max-width: 860px) {
  .hud-view .hud-btn-short { display: inline; }
}
.open-alt { display: block; width: max-content; margin: 18px auto 0; font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--t-soft); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 3px; opacity: 0; transition: opacity 1.2s var(--ease) 1s, border-color .3s; }
.st-open.is-near .open-alt { opacity: 1; }
.open-alt:hover { border-color: currentColor; }
.is-plain .open-alt { display: none; }

/* brand carousel: arrows, drag, swipe */
.gal-stage { touch-action: pan-y; }
.gal-stage.is-dragging { cursor: grabbing; }
.gal-stage.is-dragging .card { pointer-events: none; }
.gal-arrow { position: absolute; top: calc(var(--cw) * .68); z-index: 30; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px; line-height: 1; color: #f3eee3; background: rgba(28, 26, 22, .82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s; }
.gal-arrow:hover { background: var(--redwood); transform: scale(1.06); }
.gal-arrow--prev { left: max(16px, calc(50% - 46vw)); }
.gal-arrow--next { right: max(16px, calc(50% - 46vw)); }
.gal-arrow.is-off { opacity: .25; pointer-events: none; }
.is-plain .gal-arrow { display: none; }
.gal-hint { pointer-events: auto; flex-wrap: wrap; row-gap: 8px; }
.gal-all { margin-left: auto; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; font-weight: 600; letter-spacing: .2em; }
.gal-all:hover { color: var(--redwood); }
.is-plain .gal-hint { display: none; }
@media (max-width: 600px) {
  .gal-arrow { width: 42px; height: 42px; margin-top: -21px; font-size: 16px; }
  .gal-arrow--prev { left: 10px; } .gal-arrow--next { right: 10px; }
  .gal-hint-how { display: none; }
  .gal-all { margin-left: 0; }
}

/* ============ Work with us ============ */
.work { padding: 14vh 0 4vh; }
.work-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1.6rem; max-width: 16ch; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.work-lead { font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.4; font-weight: 350; color: var(--ink-2); max-width: 46ch; margin: 0 0 6vh; }
.work-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 28px; }
.wk { display: flex; flex-direction: column; border-top: 1px solid var(--ink); padding-top: 18px; }
.wk-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; }
.wk h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 .7rem; }
.wk p:not(.wk-k) { font-size: 14.5px; color: var(--ink-2); margin: 0 0 1.4rem; }
.wk .text-link { margin-top: auto; align-self: flex-start; text-decoration: none; }
.wk .text-link:hover i { transform: translateX(4px); }
@media (max-width: 1100px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; } }
@media (max-width: 600px) { .work { padding: 9vh 0 2vh; } .work-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 30px; } }

/* stronger property photos: larger frames, true color */
@media (min-width: 1101px) {
  .st-photo { width: clamp(300px, 35vw, 560px); }
  .st-wide { width: clamp(300px, 46vw, 760px); }
}
@media (min-width: 1700px) { .st-photo { width: 600px; } }
.photo img { filter: saturate(1.04) contrast(1.05); }
.st-photo:hover .photo img { filter: saturate(1.08) contrast(1.07); }
.photo { box-shadow: 0 40px 70px -32px rgba(20, 18, 14, .55); }
.about-firsts figure:nth-child(2) { margin-top: 0; }
/* three property photos sit in one even row on the page view */
@media (min-width: 861px) { .is-plain .ch-places { grid-template-columns: repeat(3, minmax(0, 1fr)); } }