/* ─────────────────────────────────────────────────────────────
   ojasv issar · trail guide portfolio
   ───────────────────────────────────────────────────────────── */

:root {
  --cream: #f9f6ea;
  --cream-2: #efe8d4;
  --paper: #fbf8ee;
  --ink: #232b1c;
  --ink-2: #3b3a2e;
  --muted: #6d6a58;
  --rust: #a8481f;
  --forest: #232d1f;
  --gold: #d9a932;
  --wood: #6b4524;
  --display: "Bowlby One", "Arial Black", sans-serif;
  --sans: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
  --script: var(--hand);
  --hand: "Kalam", cursive;
  --mono: "DM Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --bar: 64px;
  --fiber: #fffdf6;
}

/* night: the same trail by moonlight */
:root[data-theme="night"] {
  --cream: #1a2218;
  --cream-2: #222b1f;
  --paper: #e4ddca;
  --ink: #efe7cf;
  --ink-2: #d2cab3;
  --muted: #9a967e;
  --rust: #e79a67;
  --forest: #0a0e09;
  --fiber: #1e261b;
}
/* things printed on paper keep daylight ink, whatever the hour */
.jn-stage, .stops > li, .field-notes, .rc {
  --ink: #232b1c; --ink-2: #3b3a2e; --rust: #a8481f; --cream: #f9f6ea; --paper: #fbf8ee;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 8px); }
body {
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .9s var(--ease), color .9s var(--ease);
}
/* paper grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .22 0 0 0 0 .15 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .09;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px dashed var(--rust); outline-offset: 3px; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 6px 12px; background: var(--ink); color: var(--cream); }
.skip:focus { top: 12px; }

.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--ink); line-height: 1.02; letter-spacing: .01em; transition: color .9s var(--ease); }
.caps { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .26em; font-size: 12px; line-height: 1.6; }
.script { font-family: var(--script); font-weight: 700; }
.mono { font-family: var(--mono); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in, html:not(.js) .reveal { opacity: 1; transform: none; }
/* entrance animations: [data-anim] gets .in when it scrolls into view */
.js [data-anim="up"] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js [data-anim="up"].in { opacity: 1; transform: none; }
.js [data-anim="stagger"] > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js [data-anim="stagger"].in > * { opacity: 1; transform: none; }
.js [data-anim="stagger"].in > :nth-child(2) { transition-delay: .08s; } .js [data-anim="stagger"].in > :nth-child(3) { transition-delay: .16s; }
.js [data-anim="stagger"].in > :nth-child(4) { transition-delay: .24s; } .js [data-anim="stagger"].in > :nth-child(5) { transition-delay: .32s; }
.js [data-anim="stagger"].in > :nth-child(6) { transition-delay: .4s; } .js [data-anim="stagger"].in > :nth-child(7) { transition-delay: .48s; }
.js [data-anim="left"] { opacity: 0; transform: translateX(-40px) rotate(-2deg); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js [data-anim="right"] { opacity: 0; transform: translateX(40px) rotate(1.5deg); transition: opacity .9s var(--ease) .15s, transform 1s var(--ease) .15s; }
.js [data-anim="left"].in, .js [data-anim="right"].in { opacity: 1; transform: none; }
.js .postcard[data-anim="left"].in { transform: rotate(-1.2deg); } .js .postcard[data-anim="left"].in:hover { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .js [data-anim], .js [data-anim] > * { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* torn paper edges (paths drawn by js) */
:root { --tear-h: 70px; }
.tear { position: absolute; left: 0; right: 0; height: var(--tear-h); z-index: 6; pointer-events: none; color: var(--cream); transition: color .9s var(--ease); }
.tear svg { width: 100%; height: 100%; }
.tear-b { bottom: -1px; }
.tear-t { top: -1px; }

/* ── top bar in the landing page's poster style: park badge, cream paper pill, spaced caps, a forest CTA ── */
.topbar {
  --nb-paper: rgba(247, 241, 224, .97); --nb-edge: rgba(111, 88, 46, .22); --nb-ink: #232b1c; --nb-soft: rgba(35, 43, 28, .07);
  --nb-cta: #2f5a3a; --nb-cta-ink: #f7f0dc; --nb-cta-hover: #24482e; --nb-mark: #d9a932;
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 16px clamp(12px, 2.4vw, 32px) 0;
  pointer-events: none;
  transition: transform .45s var(--ease);
}
:root[data-theme="night"] .topbar {
  --nb-paper: rgba(16, 24, 30, .95); --nb-edge: rgba(241, 234, 212, .14); --nb-ink: #efe7cf; --nb-soft: rgba(241, 234, 212, .08);
  --nb-cta: #d9a932; --nb-cta-ink: #1a1d1a; --nb-cta-hover: #ffc83d; --nb-mark: #d9a932;
}
.topbar > * { pointer-events: auto; }
.js .pill { animation: pill-in 1.1s cubic-bezier(.22, 1, .36, 1) .7s backwards; }
@keyframes pill-in {
  0% { opacity: 0; transform: translateY(-24px); clip-path: inset(0 calc(100% - 58px) 0 0 round 11px); }
  35% { opacity: 1; transform: none; clip-path: inset(0 calc(100% - 58px) 0 0 round 11px); }
  100% { clip-path: inset(0 0 0 0 round 11px); }
}
.js .pill > *:not(.brand):not(.menu), .js .menu > a { animation: link-in .5s var(--ease) backwards; }
.js .menu > a:nth-of-type(1) { animation-delay: 1.15s; } .js .menu > a:nth-of-type(2) { animation-delay: 1.2s; } .js .menu > a:nth-of-type(3) { animation-delay: 1.25s; }
.js .menu > a:nth-of-type(4) { animation-delay: 1.3s; } .js .menu > a:nth-of-type(5) { animation-delay: 1.35s; } .js .menu > a:nth-of-type(6) { animation-delay: 1.4s; } .js .menu > a:nth-of-type(7) { animation-delay: 1.45s; }
.js .pill > .pill-sep { animation-delay: 1.05s; } .js .pill > .daynight { animation-delay: 1.45s; } .js .pill > .menu-toggle { animation-delay: 1.45s; }
@keyframes link-in { from { opacity: 0; transform: translateY(-8px); } }
.brand-mark { animation: badge-in .8s cubic-bezier(.34, 1.5, .64, 1) .75s backwards; }
@keyframes badge-in { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .pill, .js .pill > *, .js .menu > a, .brand-mark { animation: none !important; } }
.topbar.hide { transform: translateY(-130%); }

.brand { display: flex; align-items: center; justify-content: center; width: 50px; height: 34px; border-radius: 7px; color: var(--nb-ink); transition: background-color .2s; }
.brand:hover { background: var(--nb-soft); }
.pill-sep { width: 1px; height: 18px; margin: 0 4px 0 3px; background: var(--nb-edge); }
.brand-mark {
  width: 40px; height: 34px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url(../assets/icons/logo.webp) center / contain no-repeat; mask: url(../assets/icons/logo.webp) center / contain no-repeat;
  transition: transform .5s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-4deg) translateY(-1px); }
.brand span { display: flex; flex-direction: column; line-height: 1; }
.brand b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.brand small { margin-top: 5px; font-family: var(--sans); font-weight: 700; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; opacity: .75; white-space: nowrap; }

.pill {
  position: relative; display: flex; align-items: center; gap: 1px; padding: 4px;
  border-radius: 11px;
  background-color: var(--nb-paper);
  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'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border: 1px solid var(--nb-edge);
  box-shadow: 0 4px 0 rgba(35, 43, 28, .1), 0 18px 34px -18px rgba(20, 30, 20, .5);
  transition: background-color .9s var(--ease), border-color .9s var(--ease);
}
.menu { position: relative; display: flex; align-items: center; gap: 0; }
.trail-ind { position: absolute; left: 0; bottom: 5px; width: 0; height: 0; border-bottom: 2px dashed var(--nb-mark); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.34, 1.3, .64, 1), width .5s cubic-bezier(.34, 1.3, .64, 1), opacity .25s; }
.trail-ind.show { opacity: 1; }
.menu a {
  position: relative; padding: 10px 11px 8px; border-radius: 7px;
  font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: var(--nb-ink); transition: background-color .2s, color .6s;
}
/* trail-marker hover: a dashed gold line, and a gold diamond on the section you're in */
.menu a::before { content: ""; position: absolute; left: 50%; top: 2px; width: 4px; height: 4px; background: var(--nb-mark); transform: translateX(-50%) rotate(45deg) scale(0); transition: transform .3s var(--ease); }
.menu a.here::before { transform: translateX(-50%) rotate(45deg) scale(1); }
.pill-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--nb-ink); transition: background-color .2s, color .6s; }
.pill-icon:hover { background: var(--nb-soft); }
.pill-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.daynight .i-moon { display: none; }
:root[data-theme="night"] .daynight .i-sun { display: none; }
:root[data-theme="night"] .daynight .i-moon { display: block; }
.daynight svg { animation: dn-spin .5s var(--ease); }
@keyframes dn-spin { from { transform: rotate(-70deg) scale(.6); opacity: 0; } }
.menu-toggle { display: none; }
.pill-cta { flex-shrink: 0; margin: 0 2px 0 6px; padding: 9px 14px 7px; border-radius: 7px; background: #1d2619; color: #f4ecd2; white-space: nowrap;
  font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s, transform .25s var(--ease); }
.pill-cta:hover, .pill-cta:focus-visible { background: var(--rust); transform: translateY(-1px); }
:root[data-theme="night"] .pill-cta { background: var(--gold); color: #1d2619; }
.js .pill > .pill-cta { animation-delay: 1.45s; }
@media (max-width: 420px) { .pill-cta { padding: 9px 10px 7px; letter-spacing: .1em; } }
.menu a:focus-visible, .pill-icon:focus-visible { outline: 2px dashed var(--nb-mark); outline-offset: 2px; }
@media (max-width: 680px) {
  .menu-toggle { display: flex; }
  .menu {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px;
    flex-direction: column; align-items: stretch; padding: 8px; border-radius: 14px;
    background-color: var(--nb-paper); background-image: inherit; border: 1px solid var(--nb-edge);
    box-shadow: 0 4px 0 rgba(35, 43, 28, .1), 0 22px 40px -18px rgba(20, 30, 20, .55);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s, transform .3s var(--ease), visibility .25s;
  }
  :root[data-theme="night"] .menu { background-color: rgba(14, 22, 42, .95); }
  .menu.open { opacity: 1; visibility: visible; transform: none; }
  .menu a { padding: 12px 12px 10px; border-bottom: 1px dashed var(--nb-edge); border-radius: 0; font-size: 11.5px; }
  .menu a:last-child { border-bottom: 0; }
  .trail-ind { display: none; }
  .menu a::before { left: auto; right: 14px; top: 50%; transform: translateY(-50%) rotate(45deg) scale(0); }
  .menu a.here::before { transform: translateY(-50%) rotate(45deg) scale(1); }
}
@media (max-width: 560px) {
  .topbar { padding-top: 12px; gap: 10px; }
  .pill { padding: 4px; border-radius: 10px; }
  .pill-icon { width: 32px; height: 32px; }
}

/* ── hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* one full screen of landscape, plus the torn edge hanging just below the fold */
  min-height: calc(max(100vh, 760px) + 70px);
  min-height: calc(max(100svh, 760px) + 70px);
  overflow: hidden;
  background: linear-gradient(180deg, #d9e6d6 0%, #e6ecdb 38%, #efeede 60%, #e9e6d2 100%);
  color: var(--ink);
  isolation: isolate;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #081022 0%, #13203a 40%, #2b3a55 72%, #3d4a60 100%); opacity: 0; transition: opacity 1.4s var(--ease); }
:root[data-theme="night"] .hero::before { opacity: 1; }
.hero-art { position: absolute; inset: 0; z-index: 0; }
.hero-art .layer { position: absolute; left: -2%; right: -2%; bottom: 0; height: 104%; will-change: transform; pointer-events: none; }
.hero-art .layer svg { width: 100%; height: 100%; }
.hero-art .range { position: absolute; left: 0; bottom: 0; width: 100%; height: 116%; filter: contrast(1.06) saturate(1.1) brightness(1.02); object-fit: cover; object-position: 50% 100%; transition: filter 1.4s var(--ease); }
/* the foothills only peek out between the pines, below the big range */
.hero-art .range.hills { transform: translateY(23%); }
.hero-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(20, 32, 22, 0), rgba(20, 32, 22, .32)); }

/* the name, dead centre of the first screen, on a soft haze so it reads over the mountain face */
.hello {
  position: absolute; z-index: 3; left: 50%; top: calc(50vh - 40px); top: calc(50svh - 40px);
  width: max-content; max-width: 92vw; transform: translate(-50%, -50%);
  text-align: center; color: var(--ink); transition: color 1.4s var(--ease); pointer-events: none;
}
.hello::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 135%; height: 215%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 238, 225, .58), rgba(240, 238, 225, .34) 58%, rgba(240, 238, 225, 0));
  filter: blur(6px); transition: background 1.4s var(--ease);
}
.hello-title { margin: 14px 0 12px; font-family: "Zilla Slab", Rockwell, serif; font-weight: 700; font-size: clamp(36px, 3.9vw, 60px); line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 252, 238, .55), 0 -1px 0 rgba(0, 0, 0, .12); }
:root[data-theme="night"] .hello-title { text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .06); }
/* location: a map-legend line with hairline rules either side */
.hello-loc { display: flex; align-items: center; justify-content: center; gap: 10px; color: currentColor; }
.hello-loc svg { width: 13px; height: 13px; fill: none; stroke: #a8481f; stroke-width: 1.8; }
.hello-loc .place { font-family: var(--sans); font-weight: 700; font-size: clamp(10px, .78vw, 12px); letter-spacing: .3em; text-transform: uppercase; margin-right: -.3em; }
.hello-loc .sep { width: 1px; height: 12px; background: currentColor; opacity: .4; }
.hello-loc .coord { font-family: "DM Mono", ui-monospace, monospace; font-weight: 500; font-size: clamp(10px, .76vw, 11.5px); letter-spacing: .06em; opacity: .85; }
/* tagline: the three fields as a small code set, echoing the chips on the peaks */
.hello-tag { display: inline-flex; align-items: baseline; justify-content: center; gap: .55em; font-family: "DM Mono", ui-monospace, monospace; font-weight: 500; font-size: clamp(11px, .9vw, 13.5px); letter-spacing: .04em; }
.hello-tag b { font-weight: 400; color: #a8481f; font-size: 1.25em; }
.hello-tag em { font-style: normal; color: #a8481f; opacity: .8; }
.hello-tag span { position: relative; }
.hello-tag .typed-empty { display: none; }
.type-caret { display: inline-block; width: .55em; height: 1.05em; margin: 0 -.1em 0 .05em; align-self: center; background: #a8481f; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.type-caret.rest { animation: caret 1.1s steps(1) infinite; opacity: .85; }
:root[data-theme="night"] .type-caret { background: #d9a932; }
.hello-tag span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; opacity: .25; }
:root[data-theme="night"] .hello-loc svg { stroke: #d9a932; }
:root[data-theme="night"] .hello-tag b, :root[data-theme="night"] .hello-tag em { color: #d9a932; }
/* landing buttons: small, in the painting's palette. terracotta like the sunlit rock, and a quiet paper outline */
.hello-actions { margin-top: 20px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; pointer-events: auto; }
.hbtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px 0 16px; border-radius: 7px;
  font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.hbtn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.34, 1.4, .64, 1); }
.hbtn-primary { padding: 0 16px 0 13px; background: #a8481f; color: #fbf3e6; box-shadow: 0 2px 0 #6e2c11; }
.hbtn-primary:hover { background: #bd5427; transform: translateY(-1px); box-shadow: 0 3px 0 #6e2c11; }
.hbtn-primary:hover svg { transform: translateY(-1px) rotate(-6deg); }
.hbtn-primary:active { transform: translateY(2px); box-shadow: 0 0 0 #6e2c11; }
.hbtn-ghost { padding: 0 16px 0 13px; color: #2e3826; background: rgba(247, 242, 226, .45); border: 1px solid rgba(46, 56, 38, .4); }
.hbtn-ghost:hover { background: rgba(247, 242, 226, .8); border-color: rgba(46, 56, 38, .75); transform: translateY(-1px); }
.hbtn-ghost:hover svg { transform: translateY(1px); }
.hbtn:focus-visible { outline: 2px dashed #a8481f; outline-offset: 3px; }
:root[data-theme="night"] .hbtn-primary { background: #d9a932; color: #1d2619; box-shadow: 0 2px 0 #8a6a1c; }
:root[data-theme="night"] .hbtn-primary:hover { background: #e8bb45; box-shadow: 0 3px 0 #8a6a1c; }
:root[data-theme="night"] .hbtn-primary:active { box-shadow: 0 0 0 #8a6a1c; }
:root[data-theme="night"] .hbtn-ghost { color: #efe7cf; background: rgba(12, 20, 40, .35); border-color: rgba(239, 231, 207, .35); }
:root[data-theme="night"] .hbtn-ghost:hover { background: rgba(12, 20, 40, .6); border-color: rgba(239, 231, 207, .7); }
.js .hello > * { opacity: 0; transform: translateY(12px); animation: hello-in .9s var(--ease) forwards; }
.js .hello .hello-loc { animation-delay: 1.3s; }
.js .hello .hello-title { animation-delay: 1.45s; }
.js .hello .hello-tag { animation-delay: 1.7s; }
.js .hello .hello-actions { animation-delay: 1.95s; }
.js .hello::before { opacity: 0; animation: haze-in 1.4s ease 1.1s forwards; }
@keyframes hello-in { to { opacity: 1; transform: none; } }
@keyframes haze-in { to { opacity: 1; } }
:root[data-theme="night"] .hello { color: #f3ecd6; }
:root[data-theme="night"] .hello::before { background: radial-gradient(closest-side, rgba(9, 14, 30, .62), rgba(9, 14, 30, .36) 58%, rgba(9, 14, 30, 0)); }
@media (prefers-reduced-motion: reduce) { .js .hello > *, .js .hello::before { opacity: 1; transform: none; animation: none !important; } }

/* the ridge read as data: each point gets a small field tag on one shared baseline */
.ridge-ds { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2;
  --ds-ink: #232b1c; --ds-soft: rgba(35, 43, 28, .55); --ds-tag: rgba(246, 243, 230, .82); --ds-edge: rgba(35, 43, 28, .22); --ds-acc: #a8481f; }
:root[data-theme="night"] .ridge-ds { --ds-ink: #efe8d2; --ds-soft: rgba(239, 232, 210, .6); --ds-tag: rgba(12, 20, 40, .72); --ds-edge: rgba(239, 232, 210, .2); --ds-acc: #d9a932; }
/* printed into the painting: faint paper chips, earthy ink, multiplied onto the art by day */
.ridge-ds { mix-blend-mode: multiply; }
.ridge-ds .chip { fill: rgba(246, 242, 228, .34); stroke: rgba(35, 43, 28, .16); stroke-width: .8; }
.ridge-ds .lead { stroke: rgba(35, 43, 28, .4); stroke-width: .8; stroke-dasharray: 2 3; }
.ridge-ds .pt { fill: rgba(246, 242, 228, .6); stroke: rgba(35, 43, 28, .7); stroke-width: 1.2; }
.ridge-ds .pt.key { stroke: #9a4a26; stroke-width: 1.5; }
.ridge-ds .pt-core { fill: rgba(35, 43, 28, .8); }
.ridge-ds .code { font-family: "DM Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .01em; }
.ridge-ds .fn { fill: #2f5a3a; } .ridge-ds .fn.key { fill: #9a4a26; }
.ridge-ds .arg { fill: #3b3a2e; }
.ridge-ds .cm { fill: #6f735c; font-size: 10px; font-style: italic; }
.ridge-ds .gd-dot { fill: #9a4a26; opacity: .8; }
/* by moonlight the ink turns pale and glows faintly instead */
:root[data-theme="night"] .ridge-ds { mix-blend-mode: screen; }
:root[data-theme="night"] .ridge-ds .chip { fill: rgba(20, 30, 52, .3); stroke: rgba(236, 229, 207, .14); }
:root[data-theme="night"] .ridge-ds .lead { stroke: rgba(236, 229, 207, .35); }
:root[data-theme="night"] .ridge-ds .pt { fill: rgba(20, 30, 52, .5); stroke: rgba(236, 229, 207, .7); }
:root[data-theme="night"] .ridge-ds .pt.key { stroke: #e6b04a; }
:root[data-theme="night"] .ridge-ds .pt-core { fill: rgba(236, 229, 207, .85); }
:root[data-theme="night"] .ridge-ds .fn { fill: #a9c9a0; } :root[data-theme="night"] .ridge-ds .fn.key { fill: #e6b04a; }
:root[data-theme="night"] .ridge-ds .arg { fill: #d9d3bf; }
:root[data-theme="night"] .ridge-ds .cm { fill: #9aa3b5; }
:root[data-theme="night"] .ridge-ds .gd-dot { fill: #e6b04a; }
/* the chips are a pointer shortcut to About (the nav link is the keyboard route), so no focus ring is left behind;
   the hover tint only applies where there's a real hover, so it can't stick after a tap */
.ridge-ds .ds-link { pointer-events: auto; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.ridge-ds .ds-link .chip { transition: fill .25s ease, stroke .25s ease; }
@media (hover: hover) {
  .ridge-ds .ds-link:hover .chip { fill: rgba(246, 242, 228, .78); stroke: rgba(154, 74, 38, .55); }
  :root[data-theme="night"] .ridge-ds .ds-link:hover .chip { fill: rgba(20, 30, 52, .7); stroke: rgba(230, 176, 74, .6); }
}
.ridge-ds .fit { fill: none; stroke: var(--ds-ink); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .3; }
.js .ridge-ds g { opacity: 0; animation: ds-in .7s ease forwards; animation-delay: var(--d, 2.2s); }
.js .ridge-ds .gd { opacity: 1; animation: none; }
.js .ridge-ds .gd-dot { opacity: 0; animation: ds-in .35s ease forwards; animation-delay: var(--dd, 3s); }
@keyframes ds-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .ridge-ds g, .js .ridge-ds .gd-dot { opacity: 1; animation: none; } }

/* soft clouds: hazy puffs at the edges, dimmed to slate by moonlight */
.soft-cloud.yield { opacity: 0 !important; }
.soft-cloud { position: absolute; opacity: var(--o, .85); animation: cloud-drift var(--cd, 90s) ease-in-out var(--cdl, 0s) infinite alternate; transition: filter 1.4s var(--ease), opacity 1.4s; will-change: transform; }
.soft-cloud svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes cloud-drift { from { transform: translateX(-3vw); } to { transform: translateX(3vw); } }
:root[data-theme="night"] .soft-cloud { filter: brightness(.36) sepia(.35) hue-rotate(180deg) saturate(1.1); opacity: calc(var(--o, .85) * .85); }
@media (max-width: 720px) { .soft-cloud { width: 48% !important; } .soft-cloud:nth-child(n+7) { display: none; } .soft-cloud:nth-child(4), .soft-cloud:nth-child(2) { display: none; } }

/* sun by day, moon by night: each sets behind the range as the other rises */
.hero-art .sun, .hero-art .moon { transition: transform 1.8s var(--ease), opacity 1.2s var(--ease); }
.hero-art .moon { transform: translateY(460px); opacity: 0; }
:root[data-theme="night"] .hero-art .sun { transform: translateY(460px); opacity: 0; }
:root[data-theme="night"] .hero-art .moon { transform: none; opacity: 1; }
.hero-art .stars { opacity: 0; transition: opacity 1.6s var(--ease); }
:root[data-theme="night"] .hero-art .stars { opacity: 1; }
.stars .tw { animation: twinkle var(--d, 3s) ease-in-out var(--dl, 0s) infinite; }
@keyframes twinkle { 50% { opacity: .15; } }
.shoot { position: absolute; left: 62%; top: 12%; width: 140px; height: 2px; z-index: 1; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); opacity: 0; transform: rotate(-24deg); pointer-events: none; }
:root[data-theme="night"] .shoot { animation: shoot 9s ease-in 3s infinite; }
@keyframes shoot { 0%, 90% { opacity: 0; transform: rotate(-24deg) translateX(0); } 92% { opacity: 1; } 100% { opacity: 0; transform: rotate(-24deg) translateX(-360px); } }

/* moonlight: nearer layers fall darker, the far range keeps a pale blue glow */
:root[data-theme="night"] .range { filter: brightness(.52) sepia(.4) hue-rotate(178deg) saturate(.8); }
:root[data-theme="night"] .range.hills { filter: brightness(.4) sepia(.45) hue-rotate(172deg) saturate(.75); }
:root[data-theme="night"] .range.forest { filter: brightness(.3) sepia(.4) hue-rotate(165deg) saturate(.7); }
:root[data-theme="night"] .range.meadow { filter: brightness(.24) sepia(.35) hue-rotate(160deg) saturate(.7); }
:root[data-theme="night"] .hero-art::after { background: linear-gradient(180deg, rgba(5, 10, 20, 0), rgba(5, 10, 20, .45)); }

/* a small flock by day, fireflies by night */
.flock { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; transition: opacity 1s; }
:root[data-theme="night"] .flock { opacity: 0; }
.bird { position: absolute; left: 100%; top: calc(var(--y) + var(--lane, 0%)); width: var(--w); height: auto; animation: fly var(--t) linear var(--dl) infinite; will-change: transform; }
/* squeezed lane: straight across, no bob */
.flock.flat .bird { animation-name: fly-flat; }
@keyframes fly-flat { to { transform: translateX(calc(-100vw - 120px)); } }
@keyframes fly {
  0% { transform: translate(0, 0); }
  25% { transform: translate(calc(-.25 * (100vw + 120px)), -12px); }
  50% { transform: translate(calc(-.5 * (100vw + 120px)), 6px); }
  75% { transform: translate(calc(-.75 * (100vw + 120px)), -8px); }
  100% { transform: translate(calc(-100vw - 120px), 0); }
}
.fireflies { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); }
:root[data-theme="night"] .fireflies { opacity: 1; }
.ff { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #f8ec94; box-shadow: 0 0 6px 2px rgba(248, 236, 148, .75), 0 0 16px 4px rgba(248, 236, 148, .3); animation: ff-drift var(--t) ease-in-out var(--dl) infinite alternate, ff-blink var(--b) ease-in-out var(--dl) infinite; }
@keyframes ff-drift { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes ff-blink { 0%, 100% { opacity: .1; } 45%, 60% { opacity: 1; } }
.hero-art .mist { animation: mist 30s ease-in-out infinite alternate; }
@keyframes mist { to { transform: translateX(60px); } }
:root[data-theme="night"] .hero-art .mist { opacity: .35; }

.fog { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fog i {
  position: absolute; inset: -20%;
  background: radial-gradient(60% 50% at 50% 55%, rgba(246, 243, 230, .98), rgba(246, 243, 230, .85) 60%, rgba(246, 243, 230, .6));
  animation: fog-out 2.6s var(--ease) .2s forwards;
}
.fog i:nth-child(2) { background: radial-gradient(40% 30% at 30% 70%, rgba(255, 255, 255, .9), transparent); animation-duration: 3.2s; }
.fog i:nth-child(3) { background: radial-gradient(40% 30% at 75% 40%, rgba(255, 255, 255, .9), transparent); animation-duration: 3.8s; }
:root[data-theme="night"] .fog i { background: radial-gradient(60% 50% at 50% 55%, rgba(16, 24, 40, .98), rgba(16, 24, 40, .85) 60%, rgba(16, 24, 40, .6)); }
:root[data-theme="night"] .fog i:nth-child(n+2) { background: radial-gradient(40% 30% at 50% 60%, rgba(40, 52, 76, .8), transparent); }
@keyframes fog-out { to { opacity: 0; transform: scale(1.25) translateY(-4%); } }
html:not(.js) .fog { display: none; }

.cue { position: absolute; left: 50%; bottom: calc(70px + 40px); z-index: 5; transform: translateX(-50%); color: #f3c64a; font-size: 20px; white-space: nowrap; text-shadow: 0 1px 8px rgba(20, 30, 15, .7); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 5px); } }
@keyframes hint-bob { 50% { transform: translateY(4px); } }

@media (max-width: 720px) {
  :root { --tear-h: 46px; }
  .hero { min-height: calc(max(100vh, 620px) + 46px); min-height: calc(max(100svh, 620px) + 46px); }
  .cue { bottom: calc(46px + 30px); }
  .hero-art .range { height: 110%; top: auto; }
  .flock { --lane: 6%; }
}

/* ── signpost nav ─────────────────────────────────────────── */
.signpost {
  position: fixed; left: 26px; bottom: 18px; z-index: 70;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 6px 0 0 0;
}
.signpost .post {
  position: absolute; left: 78px; top: -6px; bottom: -40px; width: 10px; border-radius: 4px;
  background: linear-gradient(90deg, #4a2e16, #6f4726 50%, #4a2e16);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .25);
}
.plank {
  --w: 128px;
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  width: var(--w); height: 38px;
  padding: 0 26px 0 22px;
  color: #f4e7c8;
  background:
    repeating-linear-gradient(176deg, rgba(0, 0, 0, .0) 0 5px, rgba(0, 0, 0, .09) 5px 6px, rgba(255, 255, 255, .04) 6px 9px),
    linear-gradient(180deg, #7b4f2a, #5d3a1d);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .3));
  transition: width .5s var(--ease), clip-path .5s var(--ease), transform .4s var(--ease);
  transform: rotate(var(--tilt, -1deg));
  overflow: hidden;
}
.plank:nth-of-type(2) { --tilt: 1.2deg; margin-left: -6px; }
.plank:nth-of-type(3) { --tilt: -1.6deg; margin-left: 4px; }
.plank:nth-of-type(4) { --tilt: 1deg; }
.plank:nth-of-type(5) { --tilt: -.8deg; margin-left: 2px; }
.plank.up { clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); flex-direction: row-reverse; justify-content: flex-end; padding: 0 22px 0 26px; }
.plank.gold { background: repeating-linear-gradient(176deg, transparent 0 5px, rgba(0, 0, 0, .08) 5px 6px), linear-gradient(180deg, #d9a932, #b98a1c); color: #3a2a0c; }
.plank b { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.plank small { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .1em; color: var(--gold); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.plank.gold small { color: #5a4210; }
/* collapsed planks show a little carved squiggle */
.plank::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 8px; transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8'%3E%3Cpath d='M1 5c4-4 6 2 10-1s6-3 9 0 6 2 9-2' fill='none' stroke='%23f4e7c8' stroke-width='1.4' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: opacity .25s;
}
.signpost:hover .plank, .signpost:focus-within .plank, .signpost.open .plank { --w: 230px; }
.signpost:hover .plank b, .signpost:hover .plank small, .signpost:focus-within .plank b, .signpost:focus-within .plank small, .signpost.open .plank b, .signpost.open .plank small { opacity: 1; transition-delay: .12s; }
.signpost:hover .plank::before, .signpost:focus-within .plank::before, .signpost.open .plank::before { opacity: 0; }
.plank:hover { transform: rotate(0deg) translateX(4px); }
@media (max-width: 720px) {
  .signpost { display: none; }
}

/* ── work / parks ─────────────────────────────────────────── */
.work { position: relative; overflow: hidden; isolation: isolate; margin-top: calc(var(--tear-h) * -1); padding: 140px 0 120px; }
/* the map sits over the postcard; its bottom is cut along the rip drawn in .work-tear-top */
.topo { z-index: 1; }
/* The SVG viewport crops the postcard to the lake: no printed title or paper border. */
.work-bg { position: absolute; inset: 0; z-index: -2; background: #6c8275; }
.work-bg svg { width: 100%; height: 100%; overflow: hidden; }
.work::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17, 32, 26, .5), rgba(17, 32, 26, .08) 35%, rgba(17, 32, 26, .12) 65%, rgba(17, 32, 26, .64)); }
:root[data-theme="night"] .work-bg { filter: brightness(.6) saturate(.8); }
.work-tear-top { --fiber: #34402f; }
:root[data-theme="night"] .work-tear-top { --fiber: #34402f; }
.work .sec-head { position: relative; top: -22px; }
.work .sec-head h2 { font-size: clamp(30px, 3.45vw, 48px); color: #fbf5e4; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.work .sec-head p { margin-top: 14px; color: #fff1cc; font-size: .875rem; letter-spacing: .16em; text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }
.sec-head { text-align: center; padding: 0 20px; }
.sec-head h2 { display: inline-block; font-size: clamp(40px, 6.4vw, 86px); transform: scaleX(1.08); }
.sec-head p { margin-top: 12px; color: var(--ink-2); font-size: 11px; }

/* the journal: one spread per project, pages turn around the spine */
.work { padding-left: clamp(16px, 5vw, 80px); padding-right: clamp(16px, 5vw, 80px);
  --jn-paper: #f7f0dc; --jn-ink: #253049; --jn-red: #b8432f; --jn-soft: #6f6a5a; --jn-turn: cubic-bezier(.33, 0, .25, 1); }
/* sized from the screen height so the portrait diary spread and its controls fit in one view */
.jn-stage { position: relative; max-width: clamp(760px, calc((100vh - 230px) * 1.82), 1040px); margin: 26px auto 0; }
.jn-book { position: relative; height: 660px; perspective: 2400px; perspective-origin: 50% 42%; outline: none; touch-action: pan-y; cursor: pointer; }
.jn-book:focus-visible { outline: 2px dashed var(--rust); outline-offset: 22px; }
.jn-book::before { content: ""; position: absolute; inset: -12px; border-radius: 14px;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%), #3b2a1d;
  box-shadow: 0 30px 50px -26px rgba(20, 12, 4, .6), 0 3px 0 #2a1d13; }
/* a woven bookmark lies in the gutter and hangs out of the book with a brass compass charm; it swings when a page turns */
.jn-ribbon { position: absolute; z-index: 60; left: 50%; top: -10px; bottom: 0; width: 10px; margin-left: -5px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px), linear-gradient(90deg, #86271c, #c0412f 50%, #86271c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.jn-ribbon-tail { position: absolute; left: 0; top: 100%; width: 10px; height: 52px; transform-origin: 50% 0; }
.jn-ribbon-tail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 32px; border-radius: 0 0 2px 2px;
  background: inherit; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px), linear-gradient(90deg, #86271c, #c0412f 50%, #86271c);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .3); }
.jn-ribbon-tail::after { content: ""; position: absolute; left: 50%; top: 30px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; border: 1.5px solid #b8913f; }
.jn-charm { position: absolute; left: 50%; top: 35px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; transform-origin: 50% -2px;
  background: radial-gradient(circle at 35% 30%, #f3dc93, #c49a42 55%, #8a6526); box-shadow: 0 2px 3px rgba(0, 0, 0, .35), inset 0 0 0 1.5px rgba(90, 60, 20, .45); }
.jn-charm::after { content: ""; position: absolute; inset: 4px; background: #6d4d1c; clip-path: polygon(50% 0, 62% 50%, 50% 100%, 38% 50%); opacity: .8; }
.jn-ribbon.sway .jn-ribbon-tail { animation: jn-sway 1.5s cubic-bezier(.3, .6, .4, 1); }
.jn-ribbon.sway .jn-charm { animation: jn-sway-charm 1.5s cubic-bezier(.3, .6, .4, 1); }
@keyframes jn-sway { 16% { rotate: calc(var(--dir, 1) * 16deg); } 38% { rotate: calc(var(--dir, 1) * -9deg); } 58% { rotate: calc(var(--dir, 1) * 5deg); } 78% { rotate: calc(var(--dir, 1) * -2deg); } }
@keyframes jn-sway-charm { 22% { rotate: calc(var(--dir, 1) * -14deg); } 44% { rotate: calc(var(--dir, 1) * 10deg); } 66% { rotate: calc(var(--dir, 1) * -5deg); } 84% { rotate: calc(var(--dir, 1) * 2deg); } }
/* a pencil tucked into a stitched leather loop on the page edge; it lifts and rolls in the loop as a page goes over */
.jn-pencil { position: absolute; z-index: 60; right: 21px; top: -30px; bottom: -16px; width: 12px; pointer-events: none;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .3)); }
.jn-pencil::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #2c2a27 0 7px, #e6c79c 7px); }
.jn-pencil::after { content: ""; position: absolute; left: 0; right: 0; top: 24px; bottom: 0; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .28) 36%, rgba(0, 0, 0, .04) 58%, rgba(0, 0, 0, .25)),
    linear-gradient(180deg, #2f5a3a 0 calc(100% - 30px), #d8b25a calc(100% - 30px) calc(100% - 26px), #b8913f calc(100% - 26px) calc(100% - 22px), #d8b25a calc(100% - 22px) calc(100% - 18px), #d98f86 calc(100% - 18px)); }
.jn-loop { position: absolute; z-index: 61; right: 15px; top: 42%; width: 24px; height: 30px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, #2a1d14, #4a3526 45%, #2a1d14); box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
  outline: 1px dashed rgba(216, 178, 90, .55); outline-offset: -4px; }
.jn-pencil.nudge { animation: jn-nudge .8s cubic-bezier(.3, .7, .4, 1); }
@keyframes jn-nudge { 30% { transform: translateY(-12px) rotate(calc(var(--dir, 1) * -3deg)); } 62% { transform: translateY(3px) rotate(calc(var(--dir, 1) * 1.5deg)); } 82% { transform: translateY(-1px) rotate(0deg); } }

.jn-leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d;
  transform: rotateY(0deg); transition: transform var(--jn-duration, 430ms) var(--jn-turn); }
.jn-leaf.flipped { transform: rotateY(-180deg); }
.jn-leaf.is-turning { will-change: transform; transition-delay: var(--jn-string-delay, 0ms); }
.jn-book.is-turning { cursor: progress; }
.jn-book.instant .jn-leaf, .jn-book.is-measuring .jn-leaf { transition: none !important; }
.jn-page { position: absolute; inset: 0; overflow: hidden; padding: 24px; color: var(--jn-ink); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: radial-gradient(circle, rgba(60, 70, 100, .2) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--jn-paper); }
.jn-page.jn-static { right: 50%; }
.jn-back { transform: rotateY(180deg) translateZ(.2px); }
.jn-front { transform: translateZ(.2px); }
.jn-notes { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-content: start; border-radius: 8px 2px 2px 8px; box-shadow: -2px 2px 0 -1px #e9e0c7, -4px 4px 0 -2px #ddd3b7; }
.jn-main { min-width: 0; }
.jn-shots { padding-right: 46px; border-radius: 2px 8px 8px 2px; box-shadow: 2px 2px 0 -1px #e9e0c7, 4px 4px 0 -2px #ddd3b7; }
.jn-page::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none; }
.jn-notes::after { right: 0; background: linear-gradient(270deg, rgba(70, 50, 20, .2), transparent); }
.jn-shots::after { left: 0; background: linear-gradient(90deg, rgba(70, 50, 20, .2), transparent); }
.jn-book.is-measuring .jn-page { bottom: auto; min-height: 0; }

/* Colored index tabs return to the outer edge of the diary. */
.jn-tabs { position: absolute; z-index: 1; left: calc(100% + 12px); top: 28px; display: flex; flex-direction: column; gap: 8px; }
.jn-tabs button { width: 30px; padding: 11px 0 9px; border-radius: 0 8px 8px 0; background: var(--tab); color: #2c2a22; writing-mode: vertical-rl;
  font: 700 12.6px var(--hand); letter-spacing: .02em; box-shadow: 2px 3px 0 rgba(0, 0, 0, .18); transform: translateX(-6px); transition: transform .3s var(--ease), filter .3s; }
.jn-tabs button:hover { transform: translateX(-2px); }
.jn-tabs button[aria-current="true"] { transform: translateX(0); filter: saturate(1.35) brightness(1.03); }
.jn-tabs button:focus-visible, .jn-arrow:focus-visible { outline: 2px solid #fff4d8; outline-offset: 5px; }
.jn-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 64px; }
.jn-count { min-width: 116px; text-align: center; font: 400 14.2px var(--hand); color: #fff5de; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.jn-count b { font-weight: 700; color: #ffe0a1; }
.jn-page-label { display: block; font: 400 .75rem/1.6 var(--mono); }
.jn-page-label:empty { display: none; }
.jn-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 245, 222, .7); color: #fff5de; background: rgba(16, 26, 20, .55); transition: opacity .2s, background-color .2s; }
.jn-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.jn-arrow:hover:not(:disabled) { background: #f3ead2; color: #1d2418; }
.jn-arrow:disabled { opacity: .35; cursor: default; }

/* The original hand-written margin and little pencil pointers. */
.jn-margin { padding: 38px 10px 0 0; border-right: 1.5px solid rgba(184, 67, 47, .35); text-align: right; font-family: var(--hand); color: var(--jn-red); }
.jn-notes .jn-margin { grid-column: 1; grid-row: 1; }
.jn-notes .jn-main { grid-column: 2; grid-row: 1; }
.jn-mhead { font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline wavy rgba(184, 67, 47, .6); text-underline-offset: 4px; }
.jn-margin li { position: relative; margin-top: 18px; font-weight: 500; font-size: 19px; line-height: 1.05; }
.jn-margin li:nth-child(odd) { transform: rotate(-3deg); }
.jn-margin li:nth-child(even) { transform: rotate(2deg); }
.jn-margin li::after { content: ""; position: absolute; top: 2px; right: -32px; width: 22px; height: 12px; background: no-repeat center / contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M1 9 C8 3 15 3 22 8 M17 4 L22 8 L16 11' fill='none' stroke='%23b8432f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.jn-top { display: flex; justify-content: space-between; gap: 14px; }
.jn-meta { font: 400 12.6px var(--hand); color: var(--jn-soft); }
.jn-place { margin-top: 4px; padding-bottom: 7px; font: 700 clamp(24px, 2.4vw, 31px)/1.15 var(--hand);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C40 2 80 7 120 4 S180 3 198 5' fill='none' stroke='%23253049' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / min(100%, 320px) 8px no-repeat; }
.jn-role { margin-top: 8px; font: 700 16px var(--hand); color: var(--jn-red); }
.jn-result { position: relative; margin-top: 12px; padding: 6px 12px 5px 14px; border-left: 3px solid var(--jn-red); background: rgba(184, 67, 47, .07); font: 700 13.4px/1.35 var(--hand); color: var(--jn-ink); }
.jn-text { margin-top: 10px; font: 400 15px/1.75 var(--hand); color: #2f3547; }
.jn-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.jn-link { position: relative; padding: 5px 12px 3px 20px; background: #efe2bd; color: var(--jn-ink); font: 700 12.6px var(--hand);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); transform: rotate(-2deg); transition: transform .3s var(--ease), background-color .3s; }
.jn-link::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--jn-paper); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.jn-link:hover { transform: rotate(0deg) translateX(3px); background: #f4d98f; }
.jn-link-read { background: #dfe8d6; transform: rotate(1.5deg); }
.jn-link-read:hover { background: #cfe0bf; }

/* screens page */
.jn-shotgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; margin-top: 12px; }
.jn-shot { position: relative; margin: 0; padding: 6px 6px 22px; background: #fffdf5; transform: rotate(var(--r, 0deg));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 10px 18px -10px rgba(0, 0, 0, .4); transition: transform .45s var(--ease), box-shadow .45s; cursor: zoom-in; }
.jn-shot:focus-visible { outline: 2px dashed var(--jn-red); outline-offset: 5px; }
.jn-shot-placeholder { visibility: hidden; pointer-events: none; }
.jn-shot-restoring { transition: none !important; }
.jn-shot:nth-child(1) { grid-column: 1 / -1; justify-self: start; width: 84%; margin-left: 1%; --r: -1.2deg; }
.jn-shot:nth-child(2) { --r: 2deg; } .jn-shot:nth-child(3) { --r: -2.4deg; margin-top: 8px; }
.jn-shot:hover { z-index: 2; transform: rotate(0deg) scale(1.03); box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 20px 28px -12px rgba(0, 0, 0, .4); }
.jn-shot figcaption { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font: 400 12.2px var(--hand); color: var(--jn-ink); }
.jn-tape { position: absolute; z-index: 3; width: 84px; height: 24px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px), rgba(214, 196, 150, .72);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 82% 2%, 88% 0, 94% 12%, 100% 4%, 100% 92%, 94% 100%, 88% 90%, 82% 100%, 18% 98%, 12% 100%, 6% 88%, 0 96%); }
.jn-t1 { left: -26px; top: -2px; transform: rotate(-38deg); }
.jn-t2 { right: -26px; top: -2px; transform: rotate(36deg); background-color: rgba(176, 196, 186, .72); }
.jn-t4 { left: 50%; top: -11px; width: 64px; margin-left: -32px; transform: rotate(-4deg); }
.jn-shot:nth-child(3) .jn-t4 { background-color: rgba(222, 176, 160, .7); transform: rotate(5deg); }
.jn-doodle { position: absolute; right: 50px; top: 150px; width: 52px; fill: none; stroke: #6f6a5a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.jn-doodle .f { fill: #6f6a5a; }
.jn-doodle text { font: 700 11.8px var(--hand); fill: #b8432f; stroke: none; }

/* A photo opens above the diary without losing its rendered scene or caption. */
.jn-photo-viewer { position: fixed; inset: 0; width: min(92vw, 126vh, 1060px); max-width: none; max-height: 90dvh; margin: auto; padding: clamp(12px, 2vw, 22px);
  border: 1px solid #d5c9aa; border-radius: 8px; background: #f7f0dc; box-shadow: 0 30px 90px rgba(0, 0, 0, .5); overflow: auto; }
.jn-photo-viewer.is-animating { will-change: transform; }
.jn-photo-viewer::backdrop { background: rgba(10, 20, 17, .82); backdrop-filter: blur(4px); opacity: 0; transition: opacity 240ms ease; }
.jn-photo-viewer.is-visible::backdrop { opacity: 1; }
.jn-photo-viewer-body { width: 100%; }
.jn-photo-viewer .jn-shot, .jn-photo-viewer .jn-shot:hover { width: 100%; margin: 0; padding: 8px 8px 34px; transform: none; box-shadow: none; transition: none; cursor: zoom-out; }
.jn-photo-viewer .frame { transform: perspective(1400px) rotateY(calc(var(--mx, 0) * 7deg)) rotateX(calc(var(--my, 0) * -6deg)); transition: transform .25s ease-out; }
.jn-photo-viewer .jn-shot figcaption { font-size: clamp(17px, 2vw, 23px); }
.jn-photo-close { position: absolute; z-index: 5; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: #f7f0dc; color: #253049; box-shadow: 0 2px 12px rgba(0, 0, 0, .3); font: 700 30px/1 var(--sans); }
.jn-photo-close:hover { background: #fff; }

/* Let the page turn carry the motion; its contents stay still and readable. */
.jn-book.is-turning .jn-shot { pointer-events: none; }
/* Phones and tablets use a short, flat page slide instead of an off-screen 3D swing. */
.jn-book.single { perspective: none; }
.jn-book.single .jn-leaf { left: 0; width: 100%; transform: none; opacity: 0; visibility: hidden; transition: none; }
.jn-book.single .jn-leaf.is-current { opacity: 1; visibility: visible; }
.jn-book.single .jn-leaf.is-entering { animation: jn-page-in var(--jn-duration, 240ms) var(--ease) both; }
.jn-book.single .jn-leaf.is-leaving { visibility: visible; animation: jn-page-out var(--jn-duration, 240ms) var(--ease) both; }
.jn-book.single .jn-front { transform: none; }
.jn-book.single .jn-page { border-radius: 6px; box-shadow: none; }
@keyframes jn-page-in { from { opacity: 0; transform: translateX(calc(var(--jn-direction, 1) * 22px)); } to { opacity: 1; transform: translateX(0); } }
@keyframes jn-page-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(calc(var(--jn-direction, 1) * -16px)); } }
@media (max-width: 1180px) {
  .jn-tabs { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 34px; }
  .jn-tabs button { width: auto; min-height: 40px; padding: 5px 12px 3px; border-radius: 999px; writing-mode: horizontal-tb; font-size: 1rem; transform: none; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
  .jn-tabs button:hover { transform: translateY(-2px); }
  .jn-tabs button[aria-current="true"] { transform: translateY(-2px); box-shadow: 0 0 0 2px #f3ead2; }
}
@media (max-width: 1080px) {
  .jn-stage { max-width: 700px; margin-top: 20px; }
  .jn-book::before { inset: -8px; }
  .jn-ribbon, .jn-pencil, .jn-loop, .jn-page::after { display: none; }
  .jn-page { padding: 26px 22px 30px; }
  .jn-notes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jn-notes .jn-main, .jn-notes .jn-margin { grid-column: 1; grid-row: auto; }
  .jn-margin { margin-top: 18px; padding: 12px 0 0; border: 0; border-top: 1.5px solid rgba(184, 67, 47, .35); text-align: left; }
  .jn-margin ul { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 0; }
  .jn-margin li { margin-top: 8px; font-size: 18px; }
  .jn-margin li::after { display: none; }
  .jn-shots { padding-right: 22px; padding-bottom: 90px; }
  .jn-text { font-size: 14.5px; line-height: 1.65; }
  .work .sec-head p { font-size: .8125rem; letter-spacing: .1em; }
  .jn-shotgrid { gap: 18px 12px; }
  .jn-shot:nth-child(1) { width: 100%; margin-left: 0; }
  .jn-doodle { top: auto; bottom: 30px; right: 50%; margin-right: -30px; width: 60px; }
  .jn-shot { padding: 5px 5px 24px; }
  .jn-shot figcaption { font-size: 14px; }
  .jn-t1 { left: -14px; } .jn-t2 { right: -14px; }
}
@media (max-width: 600px) {
  .work { padding-top: 120px; }
  .work .sec-head { top: -14px; }
  .jn-page { padding: 26px 22px; }
  .jn-shots { padding-bottom: 80px; }
}
html:not(.js) .jn-book { height: auto; display: grid; grid-template-columns: 1fr 1fr; }
html:not(.js) .jn-page { position: relative; }
html:not(.js) .jn-controls, html:not(.js) .jn-tabs { display: none; }
@media (max-width: 1080px) { html:not(.js) .jn-book { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .jn-leaf { transition: none !important; animation: none !important; } .jn-ribbon.sway *, .jn-pencil.nudge { animation: none !important; } .jn-photo-viewer .frame { transform: none; } }

.frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-2); container-type: inline-size; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.jn-shot:hover .frame img { transform: scale(1.03); }
.jn-photo-viewer .jn-shot:hover .frame img { transform: none; }

/* ── experience topo map ──────────────────────────────────── */
.topo {
  position: relative; overflow: hidden;
  min-height: 1080px; margin-top: 0;
  --topo-bg: #075056;
  --topo-ink: #e4eef0;
  --topo-trail: #ff5b04;
  --topo-dot: #e4eef0;
  background: var(--topo-bg);
  color: #f7ecd6;
}
.topo-map { position: absolute; inset: 0; }
.topo-map svg, .topo-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.topo-map svg { color: var(--topo-ink); }
.bench { transition: opacity .5s var(--ease); }
.bench .loc, .bench .coord { font-family: var(--sans); font-weight: 700; fill: var(--topo-ink); paint-order: stroke; stroke: var(--topo-bg); stroke-width: 4px; stroke-linejoin: round; }
.bench .loc { font-size: 12.5px; letter-spacing: .2em; }
.bench .coord { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .08em; opacity: .85; }
:root[data-theme="night"] .topo { --topo-bg: #16232a; --topo-ink: #ff5b04; --topo-trail: #e4eef0; --topo-dot: #16232a; }
.topo-title { position: absolute; left: 0; right: 0; top: 29%; z-index: 3; text-align: center;  pointer-events: none;}
.topo-title h2 { display: inline-block; color: var(--topo-ink); font-size: clamp(22px, 2.1vw, 32px); letter-spacing: .34em; transform: scaleX(1.08); }
.topo-title p { color: var(--topo-ink); margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 11.5px; letter-spacing: .22em; }
.topo-title .topo-hint { display: block; margin-top: 12px; font-family: var(--script); font-size: 20px; color: var(--topo-trail); letter-spacing: 0; text-transform: none; animation: hint-bob 2.6s ease-in-out infinite; }
.topo-title p i { width: 44px; height: 1px; background: var(--topo-ink); opacity: .8; }
.trail { position: absolute; inset: 0; z-index: 2; }
.trail svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* trail cards: small field notes that pop out of their trail marker when the trail reaches them */
.stops > li {
  position: absolute; z-index: 4;
  width: 232px; padding: 14px 16px 15px;
  border-radius: 5px;
  background: #fffdf6; color: var(--ink);
  box-shadow: 0 5px 0 rgba(38, 48, 31, .14);
  translate: -50% calc(-100% - 20px);
  transform-origin: 50% calc(100% + 20px);
  opacity: 0; scale: .55;
  transition: opacity .25s ease, scale .5s cubic-bezier(.34, 1.45, .64, 1), transform .34s cubic-bezier(.34, 1.45, .64, 1), box-shadow .34s cubic-bezier(.34, 1.45, .64, 1);
  cursor: pointer;
}
.stops > li:focus-visible { outline: 2px dashed var(--topo-ink); outline-offset: 4px; }
.stops > li.below { translate: -50% 20px; transform-origin: 50% -20px; }
.stops > li::after { content: ""; position: absolute; left: 50%; top: 100%; border: 7px solid transparent; border-top-color: #fffdf6; transform: translateX(-50%); }
.stops > li.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fffdf6; }
.stops > li.seen { opacity: 1; scale: 1; }
.stops > li:hover { transform: translateY(-5px); box-shadow: 0 10px 0 rgba(38, 48, 31, .16); }
.stops > li.below:hover { transform: translateY(5px); }
.stops > li.next { background: #d9a932; }
.stops > li.next::after { border-top-color: #d9a932; }
.stops b { display: block; font-size: 17px; line-height: 1.05; }
.stops small { display: block; margin-top: 6px; font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.stops span { display: block; margin-top: 6px; font-family: var(--hand); font-size: 14.5px; line-height: 1.35; color: #3b3a2e; }
.stops > li.next small { color: #6b4a06; }

/* the map arrives under low cloud that parts as it comes into view */
.topo-fog { position: absolute; inset: -10% -10%; z-index: 5; pointer-events: none; }
.topo-fog::before { content: ""; position: absolute; inset: 0; background: var(--fog, #b9b0a8); opacity: .9; transition: opacity 1.3s ease .15s; }
.topo.cleared .topo-fog::before { opacity: 0; }
.topo-fog i { position: absolute; border-radius: 50%; filter: blur(30px); background: radial-gradient(closest-side, var(--fog, #b9b0a8) 0%, var(--fog, #b9b0a8) 55%, transparent 100%); transition: transform 2.2s cubic-bezier(.5, 0, .2, 1), opacity 1.8s ease; }
.topo-fog i:nth-child(1) { left: -8%; top: -6%; width: 70%; height: 70%; --dx: -60%; --dy: -20%; }
.topo-fog i:nth-child(2) { left: 38%; top: -10%; width: 72%; height: 72%; --dx: 55%; --dy: -30%; }
.topo-fog i:nth-child(3) { left: -12%; top: 38%; width: 68%; height: 76%; --dx: -65%; --dy: 20%; }
.topo-fog i:nth-child(4) { left: 42%; top: 40%; width: 72%; height: 74%; --dx: 60%; --dy: 25%; }
.topo-fog i:nth-child(5) { left: 18%; top: 14%; width: 66%; height: 70%; --dx: -20%; --dy: -65%; }
.topo-fog i:nth-child(6) { left: 28%; top: 30%; width: 50%; height: 50%; --dx: 25%; --dy: 70%; }
.topo-fog i:nth-child(7) { left: 8%; top: 22%; width: 86%; height: 64%; --dx: 0%; --dy: 0%; }
.topo.cleared .topo-fog i { transform: translate(var(--dx), var(--dy)) scale(1.35); opacity: 0; }
.topo.cleared .topo-fog i:nth-child(7) { transform: scale(1.6); transition-duration: 1.4s; }
/* the cloud over the map is a paler wash of the map itself, so it never reads as a grey band */
.topo-fog { --fog: #3c7f83; }
:root[data-theme="night"] .topo-fog { --fog: #243841; }
html:not(.js) .topo-fog { display: none; }
@media (max-width: 860px) {
  .topo { min-height: 0; padding-bottom: 90px; }
  .topo-title { position: relative; top: auto; padding-top: 110px; }
  .trail { position: relative; inset: auto; padding: 50px 20px 0; }
  .trail svg { display: none; }
  .stops { display: grid; gap: 16px; max-width: 420px; margin: 0 auto; }
  .stops > li, .stops > li.below, .stops > li.seen, .stops > li.below.seen { position: relative; left: auto !important; top: auto !important; width: auto; translate: none; transform: none; scale: 1; opacity: 1; }
  .stops > li::after { display: none; }
}

/* ── education: two base camps ──────────────────────────────── */
.camps { padding: 30px clamp(20px, 5vw, 80px) 104px; }
.camps-head { text-align: center; }
.camps-head .caps { font-size: 11px; color: var(--rust); }
.camps-head h2 { display: inline-block; margin-top: 8px; font-size: clamp(34px, 4.4vw, 60px); transform: scaleX(1.06); }
.camps-sub { margin: 8px auto 0; max-width: 640px; font-size: 16px; color: var(--ink-2); }
.camps-row { max-width: 1140px; margin: 34px auto 0; display: grid; grid-template-columns: 1fr 100px 1fr; align-items: stretch; }
.camp { position: relative; display: flex; flex-direction: column; background: #fffdf6; color: #232b1c; border-radius: 6px; overflow: hidden;
  box-shadow: 0 6px 0 rgba(20, 30, 20, .14), 0 30px 50px -30px rgba(20, 30, 20, .45);
  transform: translateY(24px); opacity: 0; transition: transform .9s var(--ease), opacity .7s ease, box-shadow .4s; }
.camp[data-camp="vancouver"] { transition-delay: .18s; }
html:not(.js) .camp, .camps.in .camp { transform: none; opacity: 1; }
.camp:hover { box-shadow: 0 10px 0 rgba(20, 30, 20, .16), 0 40px 60px -30px rgba(20, 30, 20, .5); }
.camp-art { position: relative; height: clamp(104px, calc(100vh - 770px), 150px); transition: height .35s var(--ease); overflow: hidden; background: #d9d3c2; }
.camp-art img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.9) contrast(1.03) sepia(.08); transition: transform 1.2s var(--ease), filter .6s; }
.camp-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.camp[data-camp="pune"] .camp-art img { object-position: 50% 45%; }
.camp[data-camp="vancouver"] .camp-art img { object-position: 50% 55%; }
.camp:hover .camp-art img { transform: scale(1.04); filter: saturate(1) contrast(1.05) sepia(0); }
:root[data-theme="night"] .camp-art img { filter: brightness(.78) saturate(.8) contrast(1.05); }
.camp-band { display: flex; justify-content: space-between; gap: 12px; padding: 11px 22px 9px; background: #1a1d1a; color: #f4ecd4;
  font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.camp-band span:last-child { color: #e8894f; white-space: nowrap; }
.camp-body { padding: 18px 24px 20px; display: flex; flex-direction: column; flex: 1; }
.camp-years { font-size: 11.5px; letter-spacing: .06em; color: #6d6a58; }
.camp-body h3 { margin-top: 12px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.02; color: #232b1c; }
.camp-spec { margin-top: 6px; font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a8481f; }
.camp-school { margin-top: 14px; font-family: var(--display); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: #075056; }
.camp-text { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #3b3a2e; }
.camp-label { margin-top: 20px; font-weight: 700; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #6d6a58; }
.camp-more { margin-top: 16px; interpolate-size: allow-keywords; }
.camp-more > summary { display: flex; align-items: center; gap: 10px; padding: 12px 2px 11px; cursor: pointer; list-style: none; border-top: 1px dashed #d8d1bd; border-bottom: 1px dashed #d8d1bd; }
.camp-more > summary::-webkit-details-marker { display: none; }
.camp-more .camp-label { margin: 0; }
.camp-count { margin-left: auto; font: 500 11px var(--mono); color: #8a8568; }
.camp-chev { width: 16px; height: 16px; fill: none; stroke: #075056; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.camp-more[open] .camp-chev { transform: rotate(180deg); }
.camp-more > summary:hover .camp-label { color: #075056; }
.camp-more > summary:focus-visible { outline: 2px dashed var(--rust); outline-offset: 3px; }
/* a smooth open where the browser can animate to auto height; elsewhere it simply opens */
.camp-more::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.camp-more[open]::details-content { block-size: auto; }
.camp-log { margin-top: 0; }
/* opening the logs trades a little photo for the entries, so the section still fits one screen */
.camps:has(.camp-more[open]) .camp-art { height: clamp(88px, calc(100vh - 800px), 120px); }
.camp-log li { position: relative; padding: 8px 0 8px 24px; border-bottom: 1px dashed #d8d1bd; font-size: 14px; line-height: 1.5; }
.camp-log li::before { content: ""; position: absolute; left: 2px; top: 15px; border: 5px solid transparent; border-bottom: 8px solid #075056; border-top: 0; }
.camp-route { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.camp-route svg { width: 100%; height: 44px; overflow: visible; }
.camp-route path { fill: none; stroke: var(--rust); stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.camp-route span { margin-top: 6px; font-size: 11px; letter-spacing: .08em; color: var(--ink-2); }
.js .camp-route { opacity: 0; transition: opacity .8s ease .6s; }
.camps.in .camp-route { opacity: 1; }
@media (max-width: 860px) {
  .camps-row { grid-template-columns: 1fr; gap: 0; max-width: 520px; }
  .camp-route { height: 90px; flex-direction: row; gap: 4px; }
  .camp-route svg { width: 70px; height: 34px; transform: rotate(90deg); }
  .camp-route span { margin-top: 0; }
}

/* ── toolkit: a tree-ring cross-section ─────────────────────── */
.rings { isolation: isolate; overflow: hidden; --rings-ink: #8fa878; position: relative; margin-top: calc(var(--tear-h) * -1); padding: 120px clamp(20px, 5vw, 80px) 110px; background: #1d2619; color: #efe6cc; overflow-x: clip; }
:root[data-theme="night"] .rings { background: #0c100b; }
.rings-tear { --fiber: #0b3f44; }
:root[data-theme="night"] .rings-tear { --fiber: #243540; }
.rings-grid { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: minmax(300px, .9fr) 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.rings-copy .caps { font-size: 11px; color: #d9a932; }
.rings-copy h2 { display: inline-block; margin-top: 6px; color: #efe6cc; font-size: clamp(30px, 3.6vw, 50px); transform: scaleX(1.06); transform-origin: left; }
.rings-sub { margin-top: 10px; max-width: 440px; font-size: 14.5px; line-height: 1.6; color: #c9c2aa; }
.zones { margin-top: 20px; border-top: 1px solid rgba(239, 230, 204, .14); }
.zone { border-bottom: 1px solid rgba(239, 230, 204, .14); }
.zone-head { width: 100%; display: grid; grid-template-columns: 14px 78px 1fr auto; gap: 12px; align-items: center; padding: 9px 0 7px; text-align: left; color: #efe6cc; transition: color .25s; }
.zone-head .swatch { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }
.swatch.z0 { background: #7a4a2b; } .swatch.z1 { background: #a06a41; } .swatch.z2 { background: #c28c5d; } .swatch.z3 { background: #dcb488; } .swatch.z4 { background: #4a3322; box-shadow: 0 0 0 2px #8a6a4b; }
.zone-ring { font-size: 10.5px; letter-spacing: .08em; color: #a9a38b; }
.zone-head b { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.zone-head em { font-style: normal; font-size: 11px; color: #a9a38b; }
.zone-tools { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 0 10px 104px; }
.zone-tools button { padding: 3px 9px 2px; border-radius: 999px; border: 1px solid rgba(239, 230, 204, .22); font-size: 11.5px; font-weight: 600; color: #ddd5bd; transition: background-color .2s, color .2s, border-color .2s; }
.zone-tools button:hover, .zone-tools button.on, .zone-tools button:focus-visible { background: #d9a932; border-color: #d9a932; color: #1d2619; }
.zone.on .zone-head, .zone-head:hover { color: #d9a932; }
.slice-wrap { position: relative; }
.slice { position: relative; width: 100%; max-width: min(600px, calc(100vh - 150px)); margin: 0 auto; aspect-ratio: 1; will-change: transform; }
.js .slice .grain { visibility: hidden; }
.rings.grained .slice .grain { visibility: visible; }
.slice svg { width: 100%; height: 100%; overflow: visible; }
.slice .ringline { fill: none; stroke: #5b3a22; stroke-width: .7; opacity: .5; }
.slice .zoneline { fill: none; stroke: #3f2716; stroke-width: 1.6; opacity: .9; transition: stroke .3s, stroke-width .3s; }
.slice .zonefill { transition: opacity .4s; }
.slice .tool { cursor: pointer; transition: opacity .3s; }
.slice .tool circle { fill: #f7efdc; stroke: #3f2716; stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.slice .tool path { fill: #3f2716; transition: fill .2s; }
.slice .tool text { font: 400 10px "Bowlby One", sans-serif; fill: #3f2716; }
.slice .tool:hover circle, .slice .tool.on circle { fill: #d9a932; stroke: #1d2619; }
.slice .tool:hover path, .slice .tool.on path, .slice .tool:hover text, .slice .tool.on text { fill: #1d2619; }
.slice .zlabel { font: 700 8.5px "Josefin Sans", sans-serif; letter-spacing: .3em; fill: #2e1c10; opacity: .7; }
.slice.focus .zonefill:not(.on) { opacity: .5; }
.slice.focus .tool:not(.in-zone) { opacity: .22; }
.slice.focus .zoneline.on { stroke: #d9a932; stroke-width: 2.4; }
/* grow from the heart outward */
.js .slice .grow { transform-box: view-box; transform-origin: 50% 50%; transform: scale(0); transition: transform 1.4s var(--ease); transition-delay: var(--gd, 0s); }
.rings.in .slice .grow { transform: scale(1); }
.js .slice .pop { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.5, .64, 1); transition-delay: var(--pd, 0s); }
.rings.in .slice .pop { transform: scale(1); }
.slice-tip { position: absolute; z-index: 3; left: 0; top: 0; width: 230px; padding: 12px 14px; border-radius: 6px; background: #f7efdc; color: #232b1c;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s, transform .3s var(--ease); }
.slice-tip.show { opacity: 1; transform: none; }
.slice-tip b { display: block; font-family: var(--display); font-weight: 400; font-size: 16px; text-transform: uppercase; }
.slice-tip small { display: block; margin-top: 2px; font-weight: 700; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #a8481f; }
.slice-tip span { display: block; margin-top: 6px; font-family: var(--hand); font-size: 14px; line-height: 1.4; color: #3b3a2e; }
@media (max-width: 960px) {
  .rings-grid { grid-template-columns: 1fr; }
  .slice-wrap { order: -1; }
  .zone-tools { padding-left: 26px; }
  .zone-head { grid-template-columns: 14px 64px 1fr auto; }
}

/* ── about: a statement on the left, a park-service field credential on the right ── */
.about { padding: 56px clamp(20px, 5vw, 80px) 90px; }
.about-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.about-copy { min-width: 0; }
.about-kicker { font-size: 11px; color: var(--rust); }
.about-title { margin-top: 10px; font-family: "Zilla Slab", serif; font-weight: 700; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.scribble { position: relative; display: inline-block; max-width: 100%; white-space: normal; color: var(--rust); }
.scribble svg { position: absolute; left: -2%; right: -2%; bottom: -10px; width: 104%; height: 16px; overflow: visible; }
.scribble path { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .3, 1) .5s; }
.about-copy.in .scribble path, html:not(.js) .scribble path { stroke-dashoffset: 0; }
.about-copy > p:not(.caps) { max-width: 580px; margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.about-copy a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.principles { display: grid; gap: 0; max-width: 580px; margin-top: 18px; border-top: 1px solid rgba(35, 43, 28, .14); }
:root[data-theme="night"] .principles, :root[data-theme="night"] .principles li { border-color: rgba(239, 230, 204, .14); }
.principles li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(35, 43, 28, .14); }
.principles b { font: 400 13px var(--display); color: var(--rust); }
.principles span { font: 400 16.8px/1.35 var(--hand); color: var(--ink); }

@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

/* About card: a 1930s park-service poster (WPA screen-print), reprinted for a data scientist. Flat inks on a pale
   sky: sunlit mountain foliage, pines, a winding road and a rock cliff, which shift in depth under the cursor.
   At night the same print turns moonlit. */
.pass { width: 100%; max-width: 400px; min-width: 0; justify-self: center; perspective: 1000px; }
.pass-card {
  --w-paper: #fbf6ee; --w-sky: #c4dbec; --w-text: #1f2a4a; --w-green: #1f2a4a; --w-sage: #8fa790; --w-dsage: #5e7e68;
  --w-org: #e0703c; --w-gold: #ecb650; --w-gray: #a3aba7; --w-lgray: #d2d7d2; --w-road: #e2eaea; --w-hatch: #a9b4b4;
  position: relative; isolation: isolate; overflow: hidden; padding: 11px; border-radius: 6px; background: var(--w-paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 4px rgba(31, 42, 34, .16), 0 30px 60px -28px rgba(31, 42, 34, .6);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease);
}
:root[data-theme="night"] .pass-card {
  --w-paper: #e9dfc6; --w-sky: #1a2418; --w-text: #efe6cc; --w-green: #0f1c1d; --w-sage: #3c5470; --w-dsage: #2b3f58;
  --w-org: #8fa9c8; --w-gold: #d3dde8; --w-gray: #4a5a68; --w-lgray: #6d7d8a; --w-road: #3a4b67; --w-hatch: #56688a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 30px 60px -28px #000;
}
.pass-card.tracking { transition: transform .12s linear; }
.pass-card::before { content: ""; position: absolute; inset: 5px; z-index: 3; pointer-events: none; border: 1px solid rgba(31, 42, 74, .32); border-radius: 3px; }
.pass-card::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .16;
  background: 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 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pass-glare { position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at calc(var(--mx, .5) * 100%) calc(var(--my, .3) * 100%), rgba(255, 255, 255, .22), transparent 45%); mix-blend-mode: soft-light; }
.pass-card.tracking .pass-glare { opacity: 1; }

/* the printed sheet: every word in the same dark ink on the sky */
.wpa { position: relative; padding: 0 14px 10px; background: var(--w-sky); color: var(--w-text); text-align: center; font-family: var(--sans); text-transform: uppercase; }
.wpa-head { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding: 22px 14px 0; }
/* a soft wash of the print's own sky behind the lettering, so it reads over the clouds */
.wpa-head::before { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; top: 6px; height: 128px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(200, 222, 238, .92), rgba(200, 222, 238, .7) 55%, rgba(200, 222, 238, 0)); }
:root[data-theme="night"] .wpa-head::before { background: radial-gradient(closest-side, rgba(20, 28, 44, .75), rgba(20, 28, 44, .45) 55%, rgba(20, 28, 44, 0)); }
.pass-name { font: 700 clamp(34px, 3vw, 42px)/1 "Zilla Slab", Rockwell, serif; letter-spacing: .05em; text-shadow: 0 1px 0 rgba(235, 245, 252, .7); }
.wpa-role { display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; margin-top: 9px; font-weight: 700; font-size: 11.5px; letter-spacing: .2em; color: #b4452a; }
:root[data-theme="night"] .pass-name { text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
:root[data-theme="night"] .wpa-role { color: #d9a932; }
.wpa-role b { width: 22px; height: 1.5px; background: currentColor; opacity: .5; }
.wpa-role i { font-style: normal; opacity: .6; margin: 0 .2em; }
.wpa-art { position: relative; overflow: visible; margin: 0 -14px; clip-path: inset(0 0 -20px 0); aspect-ratio: 900 / 850; }
/* the illustration is a real 1930s park-service print (public domain), cropped clear of its lettering */
.wpa-art-in { position: absolute; inset: 0; overflow: hidden; }
.wpa-img { position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 50% 0;
  transform: translate(calc((var(--mx, .5) - .5) * -10px), calc((var(--my, .5) - .5) * -6px)); transition: transform .7s var(--ease), filter .9s var(--ease); }
.pass-card.tracking .wpa-img { transition: transform .15s linear, filter .9s var(--ease); }
/* night: the same print under moonlight, a cool ink wash over a dimmed sheet */
:root[data-theme="night"] .wpa-img { filter: brightness(.78) saturate(.5) contrast(1.05); }
.wpa-art::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: #1c2a3a; mix-blend-mode: multiply; opacity: 0; transition: opacity .9s var(--ease); }
:root[data-theme="night"] .wpa-art::after { opacity: .62; }
.wpa-tag { position: absolute; z-index: 2; left: 16px; bottom: 0; transform: translateY(50%); box-shadow: 0 2px 6px rgba(20, 30, 25, .25); display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 3px 7px; border-radius: 3px;
  background: var(--w-green); color: #f4ecd6; font-weight: 700; font-size: 10.5px; letter-spacing: .14em; }
.wpa-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
:root[data-theme="night"] .wpa-tag { background: #efe6cc; color: #1d2619; }
/* the facts, as a ruled sheet under the print */
.wpa-info { margin: 0 -14px -10px; padding: 18px 18px 0; background: var(--w-paper); color: #1f2a4a; text-align: left; text-transform: none; }
.wpa-info > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0 6px; border-bottom: 1px dashed rgba(31, 42, 74, .18); }
.wpa-info > div:last-child { border-bottom: 0; }
.wpa-info > .wpa-open { margin: 4px -18px 0; padding: 10px 18px 11px; background: rgba(47, 143, 85, .12); border-top: 1px solid rgba(47, 143, 85, .3); }
.wpa-info dt { display: flex; align-items: center; gap: 7px; font: 700 10.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #c0553a; }
.wpa-ico { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-1px); }
.wpa-info dd b { font-weight: 700; }
.wpa-info dd { margin: 0; font: 500 14.5px/1.4 var(--sans); color: #1f2a4a; }
.wpa-badge { display: inline-block; margin-left: 6px; padding: 2px 7px 1px; border-radius: 99px; background: rgba(243, 176, 140, .38); font: 500 11px/1.4 var(--mono); color: #7a3a22; vertical-align: 1px; }
.wpa-open dt { color: #22723f; }
.wpa-open dd { font-weight: 600; }
.wpa-open i { position: relative; width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: #2f8f55; flex-shrink: 0; }
/* the pulse is a ring that scales and fades: transform and opacity only, so it never repaints */
.wpa-open i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(47, 143, 85, .45); animation: wpa-live 2.4s ease-out infinite; }
@keyframes wpa-live { from { transform: scale(1); opacity: 1; } to { transform: scale(2.8); opacity: 0; } }


/* entrance: the sheet rises, then the print and its lettering settle in */
.js .pass[data-anim] { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .pass.in { opacity: 1; transform: none; }
.js .pass .wpa-art { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) .25s; }
.js .pass.in .wpa-art { clip-path: inset(0 0 -20px 0); }
.js .pass .wpa-info > div { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .pass.in .wpa-info > div { opacity: 1; transform: none; }
.js .pass.in .wpa-info > div:nth-child(1) { transition-delay: .9s; } .js .pass.in .wpa-info > div:nth-child(2) { transition-delay: 1s; } .js .pass.in .wpa-info > div:nth-child(3) { transition-delay: 1.1s; }
.js .pass.in .wpa-info > div:nth-child(4) { transition-delay: 1.2s; } .js .pass.in .wpa-info > div:nth-child(5) { transition-delay: 1.3s; }
@media (max-width: 420px) {
  .pass-name { font-size: 38px; } .wpa-role { font-size: 12px; letter-spacing: .1em; }
  .wpa-info > div { grid-template-columns: 108px minmax(0, 1fr); } .wpa-info dt { letter-spacing: .1em; } .wpa-info dd { font-size: 13.5px; }
  .wpa-role { font-size: 10.5px; letter-spacing: .14em; } .wpa-role b { width: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pass .wpa-art { clip-path: inset(0 0 -20px 0); transition: none; } .js .pass .wpa-info > div { opacity: 1; transform: none; transition: none; }
  .wpa-img { transition: none; } .wpa-open i::after { animation: none; }
}

/* A tiny Python greeting: type, run, then write the introduction in the margin. */
.hw { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 15px; padding-right: 26px; min-height: 63px; }
.hw-command { display: flex; align-items: center; gap: 3px; min-width: 0; }
.hw-src { font: 500 clamp(12px, 1.2vw, 14px)/1.6 var(--mono); color: var(--ink-2); white-space: pre; }
.hw-p { color: var(--muted); }
.hw .hc-f { color: #2f6b45; }
.hw .hc-s { color: var(--rust); }
:root[data-theme="night"] .hw .hc-f { color: #9fd49a; }
.hw-arrow { width: 36px; height: 18px; flex: none; overflow: visible; fill: none; stroke: var(--rust); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hw-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hw-out { display: block; font: 700 25px/1.15 var(--hand); color: var(--rust); transform: rotate(-2deg); }
.hw-name { display: block; font: 400 18px/1.3 var(--hand); color: var(--ink-2); }
.hw-name b { color: var(--rust); font-weight: 700; }
.hw-cursor { display: none; width: 2px; height: 1em; flex-shrink: 0; background: var(--rust); }
.hw-replay { display: none; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 34px; height: 44px; align-items: center; justify-content: center; color: var(--muted); border-radius: 50%; }
.hw-replay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.hw-replay:hover { color: var(--rust); }
.hw-replay:hover svg { transform: rotate(-35deg); }
.hw.ready .hw-src .ch { opacity: 0; transition: opacity .12s ease; }
.hw.ready .hw-src .ch.on { opacity: 1; }
.hw.ready .hw-cursor { display: block; opacity: 0; }
.hw.typing .hw-cursor { animation: hw-caret .75s steps(1) infinite; }
.hw.ready .hw-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ease); }
.hw.ready .hw-arrow path + path { transition-delay: .18s; }
.hw.ready .hw-out { clip-path: inset(-25% 105% -25% -5%); transition: clip-path .8s cubic-bezier(.3, .6, .35, 1) .2s; }
.hw.ready .hw-name { opacity: 0; transform: translateY(5px); transition: opacity .5s ease .65s, transform .6s var(--ease) .65s; }
.hw.done .hw-arrow path { stroke-dashoffset: 0; }
.hw.done .hw-out { clip-path: inset(-25% -10% -25% -5%); }
.hw.done .hw-name { opacity: 1; transform: none; }
.hw.done .hw-replay { display: flex; }
.hw.resetting *, .hw.resetting *::after { transition: none !important; }
@keyframes hw-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (min-width: 901px) and (max-width: 1150px) {
  .hw { column-gap: 8px; }
  .hw-command { flex-basis: 100%; }
  .hw-arrow { width: 26px; }
  .hw-out { font-size: 22px; }
  .hw-name { font-size: 16px; }
}
@media (max-width: 560px) {
  .hw { padding-right: 30px; gap: 6px 10px; }
  .hw-command { flex-basis: 100%; }
  .hw-src { font-size: 13px; }
  .hw-arrow { width: 28px; margin-left: 5px; }
  .hw-result { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; flex: 1; }
  .hw-out { font-size: 23px; }
  .hw-name { font-size: 17px; }
  .hw-replay { top: auto; bottom: -2px; transform: none; }
}
@media (max-width: 380px) {
  .hw-src { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw.ready .hw-src .ch { opacity: 1; transition: none; }
  .hw.ready .hw-arrow path { stroke-dashoffset: 0; transition: none; }
  .hw.ready .hw-out { clip-path: none; transition: none; }
  .hw.ready .hw-name { opacity: 1; transform: none; transition: none; }
  .hw-cursor, .hw.done .hw-replay { display: none !important; }
  .scribble path { stroke-dashoffset: 0; transition: none; }
}

/* ── services: a trailhead. carved boards on a post pick the route; the route card shows its profile ── */
.services { position: relative; z-index: 1; isolation: isolate; padding: 92px clamp(20px, 5vw, 80px) 76px; background: #1d2619; color: #efe6cc; overflow: hidden; --svc-ink: #8fa878;
  --wood-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .16' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .04 0 0 0 1.2 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
:root[data-theme="night"] .services { background: #0c100b; }
.svc-contours { position: absolute; inset: 0; z-index: -1; opacity: .22; pointer-events: none; }
:root[data-theme="night"] .svc-contours { opacity: .16; }
.services::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse 50% 40% at 30% 60%, rgba(217, 169, 50, .07), transparent 70%); }
.svc-head { position: relative; text-align: center; }
.svc-head .caps { font-size: 11px; color: var(--gold); }
.svc-head h2 { display: inline-block; margin-top: 6px; font-size: clamp(30px, 3.6vw, 48px); color: #f4ecd2; transform: scaleX(1.06); }
.svc-sub { margin: 10px auto 0; max-width: 680px; font-size: 15px; color: #b9b096; }
.trailhead { position: relative; max-width: 1280px; margin: 38px auto 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(36px, 4.4vw, 60px); align-items: start; }

/* the signpost */
.sp { position: relative; padding: 0 0 40px; }
.sp-post { position: absolute; z-index: 0; left: 50%; top: 40px; bottom: 0; width: 26px; margin-left: -13px;
  background: var(--wood-grain), linear-gradient(90deg, #3a2213, #6a4427 38%, #5a3920 62%, #3e2515); border-radius: 3px 3px 0 0; }
.sp-ground { position: absolute; left: 12%; right: 12%; bottom: -6px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%); }
.sp-cap { position: relative; z-index: 1; width: 78%; margin: 0 auto 12px; padding: 12px 14px 10px; text-align: center; border-radius: 6px; color: #f2dea4;
  background: var(--wood-grain), radial-gradient(ellipse at 40% 30%, #85573a, #734a2b 60%, #62401f); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), 0 8px 14px -8px rgba(0, 0, 0, .6);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55); }
.sp-cap::before { content: ""; position: absolute; inset: 6px; border: 1.5px solid rgba(242, 222, 164, .7); border-radius: 3px; pointer-events: none; }
.sp-cap b { display: block; font-family: "Zilla Slab", serif; font-weight: 700; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; }
.sp-cap span { font: 700 9.5px var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.sp-boards { position: relative; z-index: 1; display: grid; gap: 11px; }
.sp-boards li:nth-child(odd) { --tilt: -1.6deg; --dir: 1; } .sp-boards li:nth-child(even) { --tilt: 1.4deg; --dir: -1; }
.sp-board { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 12px 40px 10px 20px; text-align: left; color: #f2dea4;
  background: var(--wood-grain), linear-gradient(180deg, #86593a, #6c4527); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .08), 0 8px 14px -8px rgba(0, 0, 0, .7);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); transform: rotate(var(--tilt)); transform-origin: 50% 50%;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55); transition: transform .45s cubic-bezier(.34, 1.5, .5, 1), filter .3s; cursor: pointer; }
.sp-boards li:nth-child(even) .sp-board { padding: 12px 20px 10px 40px; clip-path: polygon(26px 0, 100% 0, 100% 100%, 26px 100%, 0 50%); }
.sp-board span { white-space: nowrap; font-family: "Zilla Slab", serif; font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.sp-board em { font: 700 9px var(--sans); letter-spacing: .22em; text-transform: uppercase; font-style: normal; opacity: .65; }
.sp-blaze { width: 20px; height: 20px; fill: #f2dea4; opacity: .85; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .5)); }
.js .sp:not(.in) .sp-board { opacity: 0; transform: rotate(var(--tilt)) translateX(calc(var(--dir) * -30px)); }
.sp .sp-boards li:nth-child(2) .sp-board { transition-delay: .08s; } .sp .sp-boards li:nth-child(3) .sp-board { transition-delay: .16s; }
.sp .sp-boards li:nth-child(4) .sp-board { transition-delay: .24s; } .sp .sp-boards li:nth-child(5) .sp-board { transition-delay: .32s; }
.sp.settled .sp-board { transition-delay: 0s !important; }
.sp.in .sp-board { transition: transform .45s cubic-bezier(.34, 1.5, .5, 1), filter .3s, opacity .5s ease; }
.sp-board:hover { transform: rotate(0deg) translateX(calc(var(--dir) * 6px)); filter: brightness(1.08); }
.sp-board.on { transform: rotate(0deg) translateX(calc(var(--dir) * 14px)); filter: brightness(1.12); color: #1d2619; text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  background: var(--wood-grain), linear-gradient(180deg, #e6c064, #c99a35); }
.sp-board.on .sp-blaze { fill: #1d2619; filter: none; }
.sp-board:focus-visible { outline: 2px dashed var(--gold); outline-offset: 5px; }

/* the route card, printed like a park trail guide */
.rc { position: relative; border-radius: 6px; overflow: hidden; background: #f7f0dc; color: var(--ink); box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .8);
  --sv-h: clamp(196px, calc(100vh - 668px), 240px); }
.rc::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 50px rgba(120, 85, 40, .18); }
.rc-band { display: flex; justify-content: space-between; gap: 12px; padding: 12px 34px 10px; background: #1f231c; color: #efe6cc; font: 700 10.5px var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.rc-band span:first-child { color: var(--gold); }
.rc-body { padding: 26px 34px 30px; display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); grid-template-areas: "top top" "viz side"; column-gap: 40px; }
.rc-title { display: flex; align-items: center; gap: 12px; }
.rc-blaze { flex: 0 0 26px; height: 26px; fill: var(--rust); }
.rc-title h3 { font-family: "Zilla Slab", serif; font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; color: var(--ink); }
.rc-tag { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* Each service has its own diagram, printed in the same field-guide palette. It sits beside what you get,
   and its height follows the window, so the whole trailhead fits on one screen. */
.rc-top { grid-area: top; padding-bottom: 18px; border-bottom: 1px dashed #232b1c38; }
.rc-viz { grid-area: viz; min-width: 0; margin: 22px 0 0; }
.rc-viz figcaption { min-height: 2.9em; margin-top: 10px; font: 400 14px/1.45 var(--sans); color: #66634f; }
.sv-panel { height: calc(var(--sv-h) + 66px); }
.sv-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.sv-heading strong { font: 700 15.5px/1.3 var(--sans); color: #34452d; }
.sv-heading > span { font: 400 11.5px/1.3 var(--mono); color: #766e53; }
.sv-stage { position: relative; height: var(--sv-h); }
.sv-stage > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sv-legend { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; margin-top: 10px; font: 400 12px/1.4 var(--mono); color: #5e624f; }
.sv-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.sv-small-label { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #6f694f; }
.sv-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sv-key.green, .sv-key.good { background: #496b46; }
.sv-key.rust { background: #a8481f; }
.sv-key.muted { background: #b58465; }
.sv-key.square { border-radius: 0; }
.sv-key.line { width: 16px; height: 0; border-radius: 0; border-top: 1.5px solid #8a8568; }
.sv-key.bar { width: 18px; height: 6px; border-radius: 3px; background: #496b46; }
.sv-key.cut { width: 18px; height: 6px; border-radius: 3px; background: #c9c0a2; }
.sv-key.flow { width: 18px; height: 0; border-radius: 0; border-top: 3px dotted #496b46; }
.sv-key.diamond { width: 9px; height: 9px; border-radius: 0; background: #a8481f; transform: rotate(45deg); }

/* ML: a learning curve with the early-stopping point, beside the kept model's test scores */
.sv-ml-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 18px; align-items: center; padding-right: 2px; }
.sv-lc-grid path { stroke: #232b1c; stroke-opacity: .08; stroke-width: 1; }
.sv-lc-axis { fill: none; stroke: #8f8a70; stroke-width: 1.2; }
.sv-lc-ticks text { font: 500 10.5px var(--mono); fill: #6f694f; text-anchor: middle; }
.sv-lc-y text { text-anchor: end; }
.sv-lc-title { font: 500 11px var(--mono); fill: #6f694f; text-anchor: middle; }
.sv-lc-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-lc-train { stroke: #00809a; } .sv-lc-val { stroke: #d2692a; }
.sv-lc-stop { stroke: #3b3a2e; stroke-width: 1.2; stroke-dasharray: 3 4; }
.sv-lc-note { font: 600 11px var(--sans); fill: #3b3a2e; }
.sv-lc-best { fill: #d2692a; stroke: #f7f0dc; stroke-width: 2.5; }
.sv-lc-lab { font: 600 11px var(--sans); fill: #3b3a2e; }
.sv-metrics { display: grid; gap: 12px; margin: 0; }
.sv-metrics > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 5px; }
.sv-metrics dt { font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #5e624f; }
.sv-metrics dd { margin: 0; font: 700 21px/1 "Zilla Slab", serif; color: #232b1c; }
.sv-metrics i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: #e2dac1; }
.sv-metrics em { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: 3px; background: #00809a; transform-origin: left; }
.sv-metrics-note { font: 400 11px var(--mono); color: #6f694f; }
.sv-key.lc-train { width: 16px; height: 0; border-radius: 0; border-top: 2.2px solid #00809a; }
.sv-key.lc-val { width: 16px; height: 0; border-radius: 0; border-top: 2.2px solid #d2692a; }
.sv-key.lc-best { background: #d2692a; box-shadow: 0 0 0 2px #f7f0dc, 0 0 0 3px #d2692a; }

/* LLM & RAG: question, expansion, scored passages, cited answer */
.sv-rag-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.sv-rag-left { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; }
.sv-q { padding: 7px 10px 8px; border: 1px solid #cfc6a8; border-radius: 5px; background: #fbf6e6; }
.sv-q p { margin-top: 2px; font: 700 16px/1.25 "Zilla Slab", serif; color: #2e3826; }
.sv-expand { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sv-expand span { padding: 0 6px; border-radius: 3px; background: #e0e5c9; color: #405533; font: 500 10.5px/1.6 var(--mono); }
.sv-hits { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-hits li { display: grid; grid-template-columns: 18px minmax(0, 1fr) 46px 26px; align-items: center; gap: 8px; font: 600 13px/1.3 var(--sans); color: #34452d; }
.sv-hits b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #496b46; color: #f7f0dc; font: 700 9.5px/1 var(--sans); }
.sv-hits span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-hits i { height: 6px; overflow: hidden; border-radius: 3px; background: #e2dac1; }
.sv-hits em { display: block; width: calc(var(--s) * 100%); height: 100%; border-radius: 3px; background: #496b46; transform-origin: left; }
.sv-hits code { font: 500 11px var(--mono); color: #5e624f; text-align: right; }
.sv-miss { color: #8d876e !important; }
.sv-miss b, .sv-miss em { background: #bdb599; }
.sv-miss span { text-decoration: line-through; text-decoration-color: #a8481f99; }
.sv-answer { display: flex; flex-direction: column; min-width: 0; padding: 10px 14px 11px; border: 1px solid #bbc2a0; border-radius: 5px; background: #e9ebd7; box-shadow: 4px 4px 0 #4c643512; }
.sv-answer p { margin-top: 6px; font: 400 14.5px/1.55 var(--sans); color: #2e3826; }
.sv-answer sup { margin-left: 2px; padding: 0 4px; border-radius: 3px; background: #496b46; color: #f7f0dc; font: 700 9.5px/1.4 var(--sans); vertical-align: 5px; }
.sv-answer-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font: 500 10.5px/1.3 var(--mono); color: #405533; }
.sv-answer-foot i { width: 7px; height: 7px; border-radius: 50%; background: #5f9c55; flex-shrink: 0; }

/* vision & NLP: boxes on the postcard, entities in its caption, colour-matched */
.sv-vis-stage { height: calc(var(--sv-h) - 22px); overflow: hidden; border: 1px solid #c6bca0; border-radius: 4px; }
.sv-photo { display: block; width: 100%; height: 100%; }
.sv-dim { fill: #1f231c; opacity: .14; }
.sv-box rect { fill: none; stroke-width: 5; pointer-events: all; }
.sv-box .sv-tag { stroke: none; }
.sv-b-mtn rect { stroke: #ecd98c; } .sv-b-mtn .sv-tag { fill: #ecd98c; }
.sv-b-lake rect { stroke: #a6dbe8; } .sv-b-lake .sv-tag { fill: #a6dbe8; }
.sv-box text { font: 600 28px var(--mono); fill: #1f231c; }
.sv-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent calc(100% - 26px), #f3e6a64d calc(100% - 26px), #f3e6a6 calc(100% - 2px)); will-change: transform; }
.sv-caption-nlp { margin-top: 10px; font: 700 14px/1.9 "Zilla Slab", serif; color: #34452d; }
.sv-caption-nlp mark { padding: 1px 3px; border-radius: 2px; border-bottom: 2px solid #b39b3c; background: #ecd98c66; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sv-caption-nlp mark b { margin-left: 3px; font: 600 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; color: #6b5a17; }
.sv-caption-nlp .sv-e-lake { border-color: #3d7f93; background: #a6dbe866; } .sv-e-lake b { color: #245e70; }
.sv-caption-nlp .sv-e-place { border-color: #ad6644; background: #e5b79355; } .sv-e-place b { color: #8e482b; }

/* pipelines: scheduled loads, checks, and a dashboard that's current */
.sv-stage-labels text { font: 500 13px var(--mono); fill: #6f694f; text-anchor: middle; letter-spacing: .04em; }
.sv-data-streams { fill: none; stroke: #72845a; stroke-width: 9; opacity: .2; }
.sv-packets { fill: none; stroke: #496b46; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 32; }
.sv-source rect { fill: #eee7d0; stroke: #b8b99c; stroke-width: 1.5; }
.sv-source text { text-anchor: middle; font: 600 19px var(--sans); fill: #4a583d; }
.sv-warehouse > rect { fill: #304731; }
.sv-warehouse path { fill: none; stroke: #b4bf89; stroke-width: 5; stroke-linecap: round; }
.sv-chip rect { fill: #e2e6cc; stroke: #a3ae8e; }
.sv-chip text { font: 600 12.5px var(--mono); fill: #34452d; }
.sv-chip .sv-check { fill: none; stroke: #496b46; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-clock circle, .sv-clock path { fill: none; stroke: #496b46; stroke-width: 1.6; stroke-linecap: round; }
.sv-dashboard > rect { fill: #eee7d0; stroke: #b8b99c; stroke-width: 1.5; }
.sv-k { font: 500 10.5px var(--mono); fill: #6f694f; }
.sv-kv { font: 700 19px "Zilla Slab", serif; fill: #2e3826; }
.sv-rule { stroke: #cfc6aa; stroke-width: 1; }
.sv-area { fill: #496b4624; }
.sv-trend { fill: none; stroke: #496b46; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.sv-dot { fill: #a8481f; }

/* research: a proper forest plot */
.sv-grid path { stroke: #dcd3b8; stroke-width: 1; }
.sv-zero { stroke: #77765e; stroke-width: 1.2; stroke-dasharray: 3 4; }
.sv-zero-t { font: 500 12px var(--mono); fill: #6f694f; text-anchor: middle; }
.sv-rows text { font: 600 14px var(--sans); fill: #34452d; }
.sv-rows .sv-strong { font-weight: 700; }
.sv-ci path { fill: none; stroke-width: 2.6; }
.sv-muted path { stroke: #b58465; } .sv-muted circle { fill: #b58465; }
.sv-good path { stroke: #496b46; } .sv-good circle { fill: #496b46; }
.sv-pooled { fill: #a8481f; }
.sv-vals text { font: 500 13px var(--mono); fill: #4d4b3a; text-anchor: end; }
.sv-vals .sv-strong { fill: #a8481f; font-weight: 700; }
.sv-axis { stroke: #8f8a70; stroke-width: 1.2; }
.sv-ticks text, .sv-axis-t { font: 500 12px var(--mono); fill: #6f694f; text-anchor: middle; }

/* interaction: a shared tooltip, a crosshair on the curve, and linked highlights; the rest dims while one thing is in focus */
.sv-tip { position: absolute; z-index: 5; pointer-events: none; display: grid; gap: 2px; min-width: 128px; padding: 7px 10px 8px; border-radius: 6px;
  background: #1f231c; color: #f4ecd2; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); font: 500 11.5px/1.35 var(--mono); white-space: nowrap; }
.sv-tip[hidden] { display: none; }
.sv-tip b { font: 700 12.5px var(--sans); }
.sv-tip span { display: flex; align-items: center; gap: 6px; }
.sv-tip i { width: 10px; height: 2.5px; border-radius: 2px; }
.sv-tip i.t { background: #33b3c9; } .sv-tip i.v { background: #f0894a; }
.sv-tip em { margin-top: 2px; font: italic 500 11px var(--sans); color: #e8c66c; }
.sv-hit { fill: transparent; cursor: crosshair; pointer-events: all; touch-action: none; }
.sv-cross { opacity: 0; transition: opacity .15s; pointer-events: none; }
.sv-cross.on { opacity: 1; }
.sv-cross-line { stroke: #3b3a2e; stroke-width: 1; stroke-dasharray: 2 3; }
.sv-cross-t, .sv-cross-v { stroke: #f7f0dc; stroke-width: 2; }
.sv-cross-t { fill: #00809a; } .sv-cross-v { fill: #d2692a; }
[data-cite], [data-ent], .sv-source [data-src], .sv-rowhit [data-row] { cursor: pointer; }
[data-cite]:focus-visible, [data-ent]:focus-visible, .sv-source [data-src]:focus-visible { outline: 2px dashed var(--rust); outline-offset: 2px; }
.sv-hits li, .sv-answer [data-cite], .sv-box, .sv-caption-nlp mark, .sv-source [data-src], .sv-data-streams path, [data-row] { transition: opacity .2s ease, background-color .2s ease, stroke .2s ease; }
.sv-focus .sv-hits li:not(.sv-lit), .sv-focus .sv-caption-nlp mark:not(.sv-lit), .sv-focus .sv-source [data-src]:not(.sv-lit) { opacity: .4; }
.sv-focus .sv-box:not(.sv-lit) { opacity: .25; }
.sv-box.sv-lit rect:not(.sv-tag) { stroke-width: 9; }
.sv-answer [data-cite].sv-lit { background: #cfe0c4; border-radius: 3px; box-shadow: 0 0 0 2px #cfe0c4; }
.sv-hits li.sv-lit b { box-shadow: 0 0 0 3px rgba(73, 107, 70, .25); }
.sv-data-streams path.sv-lit { opacity: 1; stroke: #00809a; }
.sv-source [data-src].sv-lit rect { fill: #d8ecee; stroke: #00809a; }
.sv-rowhit rect { fill: transparent; }
.sv-focus g[data-row]:not(.sv-lit), .sv-focus path[data-row]:not(.sv-lit), .sv-focus text[data-row]:not(.sv-lit) { opacity: .3; }
.sv-run { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 11px 4px 9px; border: 0; border-radius: 99px; background: #1f231c; color: #f4ecd2;
  font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, transform .2s var(--ease); }
.sv-run svg { width: 11px; height: 11px; fill: currentColor; }
.sv-run:hover { background: var(--rust); transform: translateY(-1px); } .sv-run:disabled { opacity: .55; cursor: default; transform: none; }
.sv-run:focus-visible { outline: 2px dashed var(--rust); outline-offset: 3px; }
.rc.draw .sv-running .sv-packets { animation: sv-flow 1.2s linear 0s 2 both; }

/* each diagram draws itself in when its route is picked */
.rc.draw .sv-enter { animation: sv-reveal .6s var(--ease) var(--sv-delay, 0s) backwards; }   /* backwards: once in, hover states can dim it again */
.rc.draw .sv-ink { stroke-dasharray: 1; animation: sv-trace 1.2s var(--ease) .15s both; }
.rc.draw .sv-scan { animation: sv-scan 1.4s ease .1s both; }
.rc.draw .sv-packets { animation: sv-flow 2.6s linear .3s 3 both; }
.rc.draw .sv-metrics em { animation: sv-grow .9s var(--ease) calc(var(--sv-delay, 0s) + .2s) both; }
.rc.draw .sv-hits em { animation: sv-grow .8s var(--ease) calc(var(--sv-delay, 0s) + .15s) both; }
@keyframes sv-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sv-scan { 0% { transform: translateY(-100%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes sv-flow { 0% { stroke-dashoffset: 160; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sv-grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .rc.draw .sv-panel * { animation: none !important; }
  .sv-scan, .sv-packets { display: none; }
}
.rc-side { grid-area: side; display: flex; flex-direction: column; gap: 18px; min-width: 0; margin-top: 22px; padding-left: 34px; border-left: 1px dashed rgba(35, 43, 28, .22); }
.rc-side .rc-cta { align-self: flex-start; margin-top: auto; }
.rc-label, .rc-meta dt { font-weight: 700; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); }
.rc-get { margin-top: 8px; }
.rc-get li { position: relative; padding: 3px 0 3px 24px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rc-get li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 11px; height: 6px; border-left: 2px solid var(--rust); border-bottom: 2px solid var(--rust); transform: rotate(-45deg); }
.rc-meta { display: grid; gap: 10px; align-content: start; }
.rc-meta dd { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rc-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 18px 9px; border-radius: 6px; background: #1f231c; color: #f4ecd2;
  font: 700 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 3px 0 #0e110c; transition: transform .25s var(--ease), background-color .25s; }
.rc-cta:hover { background: var(--rust); transform: translateY(-2px); }
.rc-cta span { transition: transform .3s var(--ease); } .rc-cta:hover span { transform: translateX(4px); }
/* Switching services keeps the shared field-guide card. */
.rc-body > * { transition: opacity .25s ease, transform .35s var(--ease); }
.rc.swap .rc-body > * { opacity: 0; transform: translateY(6px); }
@keyframes rc-pop { from { opacity: 0; } }

/* how a trip works: one slim row of four camps along a dashed trail */
.camps-trail { position: relative; max-width: 1280px; margin: 40px auto 0; padding-top: 18px; border-top: 2px dashed rgba(217, 169, 50, .35); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px; }
.ct-label { display: flex; align-items: center; gap: 12px; font-size: 10.5px; color: var(--gold); white-space: nowrap; }
.ct-label i { width: 30px; border-top: 1px solid currentColor; opacity: .4; }
.ct-label i:last-child { display: none; }
.ct { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ct li { position: relative; display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: start; }
.cp-tent { position: relative; grid-row: span 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #1d2619; box-shadow: 0 0 0 3px rgba(217, 169, 50, .55); }
:root[data-theme="night"] .cp-tent { background: #0c100b; }
.cp-tent svg { width: 20px; height: 15px; fill: var(--gold); }
.cp-tent .door { fill: #1d2619; }
.ct b { font: 700 9px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.ct strong { font-family: "Zilla Slab", serif; font-size: 17px; line-height: 1.1; color: #f4ecd2; }
.ct .cp-text { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #b9b096; }
.camps-trail.in .cp-tent { animation: rc-pop .5s cubic-bezier(.34, 1.6, .5, 1) both; animation-delay: calc(.2s + var(--i) * .18s); }
@media (max-width: 1100px) { .trailhead { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; } .sp-board span { font-size: 16px; } }
@media (max-width: 900px) {
  .trailhead { grid-template-columns: 1fr; }
  .rc { --sv-h: 196px; }
  .rc-body { grid-template-columns: 1fr; grid-template-areas: "top" "viz" "side"; }
  .rc-side { margin-top: 14px; padding: 14px 0 0; border-left: 0; border-top: 1px dashed rgba(35, 43, 28, .22); }
  .sp { max-width: 420px; width: 100%; margin: 0 auto; }
  .camps-trail { grid-template-columns: 1fr; gap: 16px; }
  .ct { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .ct::before { display: none; }
}
@media (max-width: 560px) {
  .rc-body { padding: 20px 18px 22px; }
  .rc { --sv-h: 172px; }
  .sv-panel { height: auto; }
  .sv-ml-grid { grid-template-columns: 1fr; gap: 10px; height: auto; }
  .sv-ml-grid > svg { height: 190px; }
  .sv-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sv-metrics > div { grid-template-columns: 1fr; } .sv-metrics dt { letter-spacing: .08em; } .sv-metrics dd { font-size: 18px; }
  .sv-metrics-note { grid-column: 1 / -1; margin-top: -4px; }
  .sv-rag-grid { grid-template-columns: 1fr; height: auto; }
  .sv-heading strong { font-size: 13.5px; }
  .rc-band { padding: 10px 18px 8px; font-size: 9px; }
  .sp-board span { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .camps-trail.in .cp-tent { animation: none !important; } }
/* about → education: one inked line drawing of the move, pune's ghats to the north shore mountains */
.ridge-sep { padding: 70px max(20px, calc((100% - 1120px) / 2)) 0; color: var(--ink); }
.ridge-sep svg { display: block; width: 100%; height: auto; overflow: visible; }
.rs-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.rs-snow { stroke-width: 1.1; opacity: .5; }
.rs-sea { stroke: #4f7d8c; opacity: .8; }
.rs-sun { stroke: var(--rust); opacity: .8; }
.rs-arc { fill: none; stroke: var(--rust); stroke-width: 1.4; stroke-dasharray: 3 6; stroke-linecap: round; opacity: .85; }
.rs-km { font: 400 13.4px var(--hand); fill: var(--rust); text-anchor: middle; }
.rs-flag path { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .8; }
.rs-flag .f { fill: var(--rust); stroke: none; opacity: 1; }
.rs-label { font: 700 10px var(--sans); letter-spacing: .26em; text-transform: uppercase; fill: var(--ink-2); text-anchor: middle; opacity: .8; }
:root[data-theme="night"] .rs-sea { stroke: #8fb6c2; }
/* it inks itself in, west to east */
.js .ridge-sep .rs-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.45, 0, .25, 1); }
.js .ridge-sep .rs-snow.rs-a { transition-delay: .9s; } .js .ridge-sep .rs-sea { transition-delay: .9s; transition-duration: 1s; }
.js .ridge-sep .rs-sun { transition-delay: 1.1s; } .js .ridge-sep .rs-b { transition-delay: 1.5s; } .js .ridge-sep .rs-snow.rs-b { transition-delay: 2.4s; }
.js .ridge-sep .rs-arc, .js .ridge-sep .rs-km { clip-path: inset(-20px 100% -20px 0); transition: clip-path 1.2s ease 2.3s; }
.js .ridge-sep .rs-flag, .js .ridge-sep .rs-label { opacity: 0; transition: opacity .5s ease; }
.js .ridge-sep .rs-f1, .js .ridge-sep .rs-label:nth-of-type(3) { transition-delay: .8s; }
.js .ridge-sep .rs-f2, .js .ridge-sep .rs-label:nth-of-type(4) { transition-delay: 2.5s; }
.ridge-sep.in .rs-line { stroke-dashoffset: 0; }
.ridge-sep.in .rs-arc, .ridge-sep.in .rs-km { clip-path: inset(-20px 0 -20px 0); }
.ridge-sep.in .rs-flag, .ridge-sep.in .rs-label { opacity: 1; }
@media (max-width: 600px) { .ridge-sep { margin-top: 26px; padding: 14px 12px 0; } .rs-label { font-size: 16px; letter-spacing: .14em; } .rs-km { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .js .ridge-sep * { transition: none !important; } }

/* ── book a call: the postcard lake behind a paper booking card ── */
.book { position: relative; overflow: hidden; padding: 140px clamp(20px, 5vw, 80px) 150px; isolation: isolate; }
.book-bg { position: absolute; inset: 0; z-index: -2; background: url("../assets/photos/book-lake.webp") center 40% / cover no-repeat; transform: scale(1.04); filter: saturate(1.05); transition: filter 1.4s var(--ease); }
.book::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(16, 26, 20, .72) 0%, rgba(16, 26, 20, .42) 45%, rgba(16, 26, 20, .12) 100%); }
:root[data-theme="night"] .book-bg { filter: brightness(.42) saturate(.7) hue-rotate(10deg); }
:root[data-theme="night"] .book::before { background: linear-gradient(90deg, rgba(6, 10, 22, .78) 0%, rgba(6, 10, 22, .45) 50%, rgba(6, 10, 22, .2) 100%); }
.book-tear-top { color: var(--cream); --fiber: #d9d0b8; }
:root[data-theme="night"] .book-tear-top { --fiber: #232b1f; }

/* ── reviews: the summit register. two rows of signed entries drift past in opposite directions ── */
.register { position: relative; padding: 56px 0 30px; overflow: hidden; background: var(--cream); }
.reg-head { text-align: center; padding: 0 20px; }
.reg-head .caps { font-size: 11px; color: var(--rust); }
.reg-head h2 { display: inline-block; margin-top: 8px; font-size: clamp(34px, 5vw, 66px); transform: scaleX(1.06); }
.reg-sub { margin: 10px auto 0; max-width: 520px; font-size: 16px; color: var(--ink-2); }
.reg-rows { display: grid; gap: 26px; margin-top: 34px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reg-row { overflow: hidden; padding: 10px 0 14px; }
.reg-track { display: flex; gap: 26px; width: max-content; animation: reg-drift var(--dur, 60s) linear infinite; }
.reg-row[data-dir="r"] .reg-track { animation-direction: reverse; }
.reg-row:hover .reg-track, .reg-row:focus-within .reg-track { animation-play-state: paused; }
@keyframes reg-drift { to { transform: translateX(calc(-50% - 13px)); } }
/* a register entry: ruled paper, a header line, the note in hand, and an inked sign-off */
.reg-slip { position: relative; flex: 0 0 auto; width: 400px; margin: 0; padding: 18px 22px 18px; border-radius: 3px; color: #2d3021;
  background: repeating-linear-gradient(transparent 0 27px, rgba(29, 93, 120, .13) 27px 28px) 0 44px / 100% calc(100% - 100px) no-repeat, #fbf6e6;
  box-shadow: 0 1px 1px rgba(60, 50, 30, .12), 0 14px 24px -14px rgba(60, 50, 30, .4); transform: rotate(var(--r, -.6deg)); transition: transform .4s var(--ease), box-shadow .4s; }
.reg-slip:nth-child(even) { --r: .7deg; }
.reg-slip:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 1px 1px rgba(60, 50, 30, .12), 0 22px 30px -16px rgba(60, 50, 30, .45); }
.reg-slip::before { content: ""; position: absolute; left: 50%; top: -9px; width: 70px; height: 20px; margin-left: -35px; background: rgba(214, 196, 150, .75); transform: rotate(-2deg);
  clip-path: polygon(0 10%, 6% 0, 94% 4%, 100% 12%, 100% 90%, 94% 100%, 6% 96%, 0 88%); }
:root[data-theme="night"] .reg-slip { background-color: #eee6cf; }
.reg-top { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1.5px solid rgba(168, 72, 31, .35);
  font: 500 10px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7d5e; }
.reg-q { min-height: 168px; margin: 10px 0 0; font: 400 15px/28px var(--hand); color: #2f3547; }
.reg-q::before { content: "“"; margin-right: 3px; font: 700 40px/0 "Zilla Slab", Georgia, serif; color: #a8481f; vertical-align: -14px; }
.reg-sign { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed rgba(45, 48, 33, .25); }
.reg-stamp { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; border: 2px solid #a8481f; color: #a8481f; transform: rotate(-12deg);
  font: 400 13px var(--display); letter-spacing: .04em; box-shadow: inset 0 0 0 3px #fbf6e6, inset 0 0 0 4px rgba(168, 72, 31, .5); opacity: .85; }
.reg-name { display: block; font: 700 24px/1.1 var(--script); color: #1d3b5a; }
.reg-sign small { display: block; margin-top: 3px; font-weight: 700; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6f6a58; line-height: 1.5; }
/* companies, set as ink stamps in one colour so the row reads as a set */
.trusted { padding: 56px 0 0; text-align: center; }
.trusted-label { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 11px; color: var(--ink-2); }
.trusted-label i { width: 60px; border-top: 1px solid currentColor; opacity: .35; }
.co-marquee { margin-top: 22px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.co-row { display: flex; align-items: center; gap: 72px; width: max-content; padding: 6px 36px; animation: co-slide var(--dur, 40s) linear infinite; }
.co-marquee:hover .co-row { animation-play-state: paused; }
@keyframes co-slide { to { transform: translateX(-50%); } }
.co-row li { flex: 0 0 auto; }
.co-row a, .co-row li > span { display: grid; place-items: center; height: 56px; color: var(--ink); opacity: .7; transition: opacity .25s, transform .3s var(--ease), color .25s; }
.co-row a:hover, .co-row a:focus-visible { opacity: 1; color: var(--rust); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .co-row { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }
.co-row img { display: block; width: auto; }
/* every mark in its real colours, sized by eye so wordmarks and crests weigh the same */
.co-vintality { height: 54px; } .co-pavepal { height: 30px; } .co-ubc { height: 50px; } .co-spartan { height: 64px; }
.co-escalera { height: 38px; } .co-learn { height: 30px; filter: brightness(0); } .co-reskilll { height: 26px; }
.co-row a, .co-row li > span { filter: saturate(.85); }
.co-row a:hover, .co-row a:focus-visible { filter: none; }
/* at night each mark sits on a small paper label so dark logos stay legible */
/* at night the marks become one soft cream ink, so they read as a set on the dark ground */
:root[data-theme="night"] .co-row img { filter: brightness(0) invert(.9) sepia(.25); }
:root[data-theme="night"] .co-row a, :root[data-theme="night"] .co-row li > span { opacity: .62; }
:root[data-theme="night"] .co-row a:hover, :root[data-theme="night"] .co-row a:focus-visible { opacity: 1; color: inherit; }
@media (max-width: 600px) {
  .register { padding-bottom: calc(var(--tear-h) + 60px) !important; }
  .reg-slip { width: 300px; padding: 16px 18px; }
  .reg-q { min-height: 0; font-size: 14px; line-height: 26px; }
  .co-row { gap: 44px; }
}
@media (prefers-reduced-motion: reduce) { .reg-track { animation: none; } .reg-row { overflow-x: auto; } }
/* the postcard is ripped away over the footer map (see .ft-tear[data-cut]) */
.book { z-index: 1; }
.ft-tear { --fiber: #34402f; }
:root[data-theme="night"] .ft-tear { --fiber: #1b2418; }
.book-inner { max-width: 1340px; margin: 0 auto; }
.book-head { text-align: center; margin-bottom: 44px; }
.book-kicker { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #d9a932; }
.book-head h2 { display: inline-block; margin-top: 10px; color: #fbf5e4; font-size: clamp(32px, 3.8vw, 54px); transform: scaleX(1.06); text-shadow: 0 2px 18px rgba(0, 0, 0, .4); }
.book-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); align-items: start; }

/* the back of the postcard */
.postcard {
  position: relative; padding: 22px 24px 20px; border-radius: 6px; color: #2e2a20;
  background: #f4ecd8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .22 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 26px 50px -24px rgba(0, 0, 0, .7);
  transform: rotate(-1.2deg); transition: transform .5s var(--ease);
}
.postcard:hover { transform: rotate(0deg); }
.postcard::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(46, 42, 32, .14); border-radius: 3px; pointer-events: none; }
.pc-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; min-height: 92px; }
.pc-label { font-family: var(--display); font-size: 20px; letter-spacing: .12em; color: #6b4f2a; opacity: .75; }
.pc-stamp { width: 74px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); transform: rotate(3deg); transition: transform .4s var(--ease); }
.pc-stamp img { display: block; width: 100%; height: auto; }
.postcard:hover .pc-stamp { transform: rotate(-2deg) scale(1.06); }
.pc-postmark { position: absolute; right: 30px; top: 18px; width: 118px; color: rgba(40, 36, 60, .55); transform: rotate(-12deg); pointer-events: none; mix-blend-mode: multiply; }
.pc-postmark svg { width: 100%; height: auto; }
.pc-note { margin-top: 14px; font-family: var(--hand); font-size: 16px; line-height: 1.55; color: #2f2a22; }
.pc-sign { margin-top: 6px; font-family: var(--script); font-weight: 700; font-size: 28px; color: #a8481f; text-align: right; }
.pc-lines { margin-top: 10px; border-top: 1.5px solid rgba(46, 42, 32, .5); }
.pc-lines li { position: relative; display: flex; align-items: center; border-bottom: 1px dotted rgba(46, 42, 32, .35); }
.pc-lines a { flex: 1; display: grid; grid-template-columns: 20px 78px 1fr; align-items: center; gap: 10px; padding: 11px 2px 9px; color: #2e2a20; transition: color .2s, padding .3s var(--ease); }
.pc-lines a:hover { color: #075056; padding-left: 8px; }
.pc-lines svg { width: 16px; height: 16px; fill: currentColor; opacity: .85; }
.pc-lines svg.line-ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-lines b { font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.pc-lines span { font-family: "DM Mono", ui-monospace, monospace; font-size: 12.5px; color: #4a4436; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-copy { flex-shrink: 0; padding: 3px 8px; border: 1px solid rgba(46, 42, 32, .35); border-radius: 4px; font-family: "DM Mono", ui-monospace, monospace; font-size: 10.5px; color: #4a4436; transition: background-color .2s, color .2s; }
.pc-copy:hover { background: #2e2a20; color: #f4ecd8; }
.pc-copy.ok { background: #075056; color: #f4ecd8; border-color: #075056; }

/* the calendar: always dark, with a soft lift off the photo */
.book-card { position: relative; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45)); }
.cal-inline { position: relative; width: 100%; min-height: 520px; }
/* a calendar-shaped placeholder while cal.com loads, so the card never sits empty */
.cal-skel { position: absolute; inset: 0; z-index: 2; transition: opacity .35s ease; display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 1px; min-height: 520px; border-radius: 8px; overflow: hidden; background: #2a2a2a; }
.cal-skel > div { padding: 24px 20px; background: #161616; }
.cal-skel b, .cal-skel i { display: block; border-radius: 6px; background: linear-gradient(90deg, #242424 0%, #333 50%, #242424 100%) 0 0 / 200% 100%; animation: skel 1.3s linear infinite; }
.cal-skel b { width: 60%; height: 18px; margin-bottom: 18px; }
.cs-side i { height: 12px; margin-top: 12px; width: 80%; } .cs-side i:nth-child(3) { width: 55%; }
.cs-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cs-days i { aspect-ratio: 1; border-radius: 50%; }
.cs-times i { height: 38px; margin-top: 10px; border-radius: 8px; }
@keyframes skel { to { background-position: -200% 0; } }
.cal-skel.done { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .cal-skel { grid-template-columns: 1fr; } .cs-side, .cs-times { display: none; } }
@media (max-width: 1100px) { .book-grid { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; } .postcard { max-width: 520px; margin: 0 auto; width: 100%; } }
@media (max-width: 900px) {
  .book { padding: 110px 16px 120px; }
  .book::before { background: linear-gradient(180deg, rgba(16, 26, 20, .7) 0%, rgba(16, 26, 20, .35) 60%, rgba(16, 26, 20, .2) 100%); }
}

/* ── field notes dialog ──────────────────────────────────── */
.field-notes {
  margin: auto;
  width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 820px);
  padding: 0; border: 0; border-radius: 8px; overflow: hidden auto;
  background: #fffdf6; color: var(--ink);
  box-shadow: 0 10px 0 rgba(20, 30, 25, .22), 0 40px 80px -20px rgba(0, 0, 0, .55);
}
.field-notes[open] { animation: notes-in .55s cubic-bezier(.34, 1.4, .64, 1); }
.field-notes.closing { animation: notes-out .22s ease forwards; }
@keyframes notes-in { from { opacity: 0; transform: translateY(28px) scale(.94) rotate(-1deg); } }
@keyframes notes-out { to { opacity: 0; transform: translateY(16px) scale(.97); } }
.field-notes::backdrop { background: rgba(10, 22, 24, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .3s ease; }
@keyframes fade-in { from { opacity: 0; } }
.fn-map { position: absolute; left: 0; right: 0; top: 0; height: 132px; background: var(--topo-bg, #075056) center / cover no-repeat; }
.fn-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .18)); }
.fn-head { position: relative; height: 132px; padding: 20px 28px; display: flex; flex-direction: column; justify-content: space-between; color: #fffdf6; }
.fn-kicker { display: flex; gap: 14px; font-weight: 700; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.fn-kicker span + span::before { content: "·"; margin-right: 14px; opacity: .7; }
.fn-place b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.fn-place span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; opacity: .9; }
.fn-body { padding: 26px 28px 8px; }
.fn-body h3 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.05; }
.fn-role { margin-top: 8px; font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a8481f; }
.fn-text { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: #3b3a2e; }
.fn-text ul { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px dashed #d8d1bd; }
.fn-text li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px dashed #d8d1bd; font-size: 14.5px; line-height: 1.55; }
.fn-text li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 8px; height: 8px; border: 2px solid #ff5b04; transform: rotate(45deg); }
.fn-text .tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.fn-text .tags span { padding: 4px 11px 2px; border: 1.5px solid #232b1c; border-radius: 999px; font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.fn-foot { display: flex; justify-content: space-between; gap: 10px; padding: 18px 28px 24px; }
.fn-nav { font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #232b1c; padding: 8px 0; border-bottom: 1.5px solid transparent; transition: border-color .2s; }
.fn-nav:hover { border-color: #ff5b04; }
.fn-nav:disabled { opacity: .3; pointer-events: none; }
.fn-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 253, 246, .92); color: #232b1c; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.34, 1.45, .64, 1); }
.fn-close:hover { transform: rotate(90deg); }
.field-notes.swap .fn-body { animation: swap-in .4s var(--ease); }
@keyframes swap-in { from { opacity: 0; transform: translateX(14px); } }

@media (prefers-reduced-motion: reduce) {
  .bird { animation: none; left: calc(20% + var(--y) * 4); }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── intro: a cream cloud cover with five carved tiles, then the clouds part to show the hero ── */
.intro { display: none; }
html.intro-on .intro, .intro.leaving { display: block; position: fixed; inset: 0; z-index: 1000; pointer-events: auto; cursor: pointer; }
html.intro-on body { overflow: hidden; }
.intro-veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 15%, #f4ecd6 0%, #e9dcbd 55%, #f1e6cc 100%); transition: opacity .9s ease .25s; }
:root[data-theme="night"] .intro-veil { background: radial-gradient(120% 90% at 30% 15%, #243026 0%, #18211b 55%, #1f2a22 100%); }
.intro-clouds { position: absolute; inset: -15%; }
.intro-clouds i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: calc(var(--s) * .62); margin: calc(var(--s) * -.31) 0 0 calc(var(--s) * -.5); border-radius: 50%;
  background: radial-gradient(closest-side, #fbf5e4 0%, #f3e9cf 55%, rgba(243, 233, 207, 0) 100%); filter: blur(6px);
  transition: transform 1.4s cubic-bezier(.55, 0, .2, 1) var(--d), opacity 1.1s ease var(--d); }
:root[data-theme="night"] .intro-clouds i { background: radial-gradient(closest-side, #34423a 0%, #28342d 55%, rgba(40, 52, 45, 0) 100%); }
.intro-center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; transition: opacity .35s ease, transform .5s ease; }
.intro-row { display: flex; gap: clamp(12px, 1.8vw, 20px); }
.it { --tile: #6a4629; display: grid; place-items: center; width: clamp(50px, 7vw, 76px); aspect-ratio: 1; border-radius: 15%; background: var(--tile);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 10px 18px -10px rgba(40, 25, 10, .6); opacity: 0; transform: translateY(14px) scale(.8);
  animation: it-in .55s cubic-bezier(.34, 1.6, .5, 1) forwards; animation-delay: calc(.15s + var(--i) * .16s); }
.it:nth-child(1) { --i: 0; --tile: #5b3e2b; } .it:nth-child(2) { --i: 1; --tile: #2f4128; } .it:nth-child(3) { --i: 2; --tile: #7a4a2b; } .it:nth-child(4) { --i: 3; --tile: #075056; } .it:nth-child(5) { --i: 4; --tile: #4a3730; }
@keyframes it-in { to { opacity: 1; transform: none; } }
.it svg { width: 72%; height: 72%; overflow: visible; fill: none; stroke: #f4ecd2; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* each icon acts out one step: write code, wire a network, watch loss fall, reach the peak, refill the coffee */
.it-code .bg { fill: rgba(255, 255, 255, .1); stroke: #f4ecd2; }
.it-code .ln { stroke-dasharray: 14; stroke-dashoffset: 14; animation: draw .5s ease forwards; }
.it-code .l1 { animation-delay: .5s; } .it-code .l2 { animation-delay: .75s; } .it-code .l3 { animation-delay: 1s; }
.it-code .cur { stroke: #d9a932; animation: blink .5s steps(1) infinite 1.1s; opacity: 0; }
@keyframes blink { 50% { opacity: 1; } }
.it-net .edges path { stroke-width: 1; opacity: .5; stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw 1s ease forwards .65s; }
.it-net .nodes circle { fill: #f4ecd2; stroke: none; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop .3s cubic-bezier(.34, 1.8, .5, 1) forwards; }
.it-net .nodes circle:nth-child(1), .it-net .nodes circle:nth-child(2) { animation-delay: .55s; }
.it-net .nodes circle:nth-child(3), .it-net .nodes circle:nth-child(4), .it-net .nodes circle:nth-child(5) { animation-delay: .85s; }
.it-net .nodes .out { fill: #d9a932; animation-delay: 1.15s !important; }
@keyframes pop { to { transform: scale(1); } }
.it-loss .ax { opacity: .6; stroke-width: 1.4; }
.it-loss .curve { stroke: #d9a932; stroke-width: 2.2; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 1s cubic-bezier(.5, 0, .3, 1) forwards .8s; }
.it-loss .dot { fill: #d9a932; stroke: none; opacity: 0; animation: fade .2s ease forwards 1.75s; }
@keyframes fade { to { opacity: 1; } }
.it-peak .mt { fill: rgba(255, 255, 255, .12); stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .9s ease forwards .95s; }
.it-peak .snow { fill: #f4ecd2; stroke: none; opacity: 0; animation: fade .3s ease forwards 1.6s; }
.it-peak .flag { stroke: #d9a932; stroke-dasharray: 12; stroke-dashoffset: 12; animation: draw .4s ease forwards 1.75s; }
.it-cup .cup, .it-cup .handle { fill: rgba(255, 255, 255, .1); }
.it-cup .steam { stroke-width: 1.4; opacity: 0; animation: steam 1.4s ease-in-out infinite; }
.it-cup .s1 { animation-delay: 1.1s; } .it-cup .s2 { animation-delay: 1.4s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(2px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.intro-cap { display: flex; align-items: center; gap: 12px; font: 700 10.5px var(--sans); letter-spacing: .34em; text-transform: uppercase; color: #6a5a3e; opacity: 0; animation: fade .6s ease forwards 1s; }
:root[data-theme="night"] .intro-cap { color: #b9b096; }
.intro-cap i { width: 28px; border-top: 1px solid currentColor; opacity: .5; }
/* leaving: tiles drop away, clouds drift off to the sides, the veil lifts */
.intro.leaving .intro-center { opacity: 0; transform: translateY(-10px) scale(.96); }
.intro.leaving .intro-veil { opacity: 0; }
.intro.leaving .intro-clouds i { transform: translate(var(--dx), var(--dy)) scale(1.5); opacity: 0; }
/* hold the hero's own entrance until the clouds part */
html.intro-on .pill, html.intro-on .pill *, html.intro-on .brand-mark, html.intro-on .hello > *, html.intro-on .hello::before { animation-play-state: paused !important; }

/* performance: sections that are off screen stop animating (and the animated bird sprites stop decoding) */
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
.hero.is-off .flock, .hero.is-off .fireflies { visibility: hidden; }

/* performance: let the browser skip rendering heavy sections until they come near the screen */

/* phones: fewer moving parts in the hero, lighter shadows on big cards */
@media (max-width: 760px) {
  .flock .bird:nth-child(n+6) { display: none; }
  .fireflies .ff:nth-child(n+11) { display: none; }
  .soft-cloud { animation-duration: 140s; }
  .sp-cap { display: none; }
  .sp { padding-bottom: 24px; }
  .sp-boards { gap: 8px; }
  .sp-board { padding: 11px 36px 9px 16px; }
  .sp-boards li:nth-child(even) .sp-board { padding: 11px 16px 9px 36px; }
  .hello-tag { font-size: 13px; }
}

/* ── writing: the paper, with a link out to the blog ── */
/* writing sits on its own survey sheet: canyon clay with sand contours */
.writing { position: relative; z-index: 2; isolation: isolate; overflow: hidden; padding: calc(var(--tear-h) + 40px) clamp(20px, 5vw, 80px) calc(var(--tear-h) + 40px); background: #5b2f1f; --wr-ink: #e9c89a; }
:root[data-theme="night"] .writing { background: #2e1810; --wr-ink: #b88a5c; }
.wr-contours { position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none; }
.writing::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(242, 193, 92, .1), transparent 70%); }
.writing .wr-head .caps { color: var(--gold); }
.writing .wr-head h2 { color: #f6ebd4; text-shadow: 0 2px 16px rgba(0, 0, 0, .25); }
/* the postcard section below rips out of the clay: the clay is cut along the tear */
.writing + .book { margin-top: calc(var(--tear-h) * -1); }
.writing + .book .book-tear-top { --fiber: #7a4630; }
:root[data-theme="night"] .writing + .book .book-tear-top { --fiber: #4a2a1c; }
.wr-head { text-align: center; }
.wr-head .caps { font-size: 11px; color: var(--rust); }
.wr-head h2 { display: inline-block; margin-top: 6px; font-size: clamp(32px, 4.2vw, 56px); transform: scaleX(1.06); }
.wr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; padding-top: 20px; }
.wr-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 8px; border-radius: 6px; border: 1.5px solid #1d2619; background: #1d2619; color: #f4ecd2;
  font: 700 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--ease); }
.wr-btn:hover, .wr-btn:focus-visible { background: #a8481f; border-color: #a8481f; transform: translateY(-2px); }
.wr-btn.ghost { background: transparent; color: #1d2619; }
.wr-btn.ghost:hover, .wr-btn.ghost:focus-visible { background: #1d2619; color: #f4ecd2; border-color: #1d2619; }
.wr-btn.ok { background: #2f4128; border-color: #2f4128; color: #f4ecd2; }
@media (max-width: 560px) { .writing { padding-bottom: 110px; } }

/* faint survey contours behind the cream sections, drawn lazily as each comes into view */
[data-cream-topo] { position: relative; isolation: isolate; background: var(--cream); --cream-ink: #b9a67a; }
:root[data-theme="night"] [data-cream-topo] { --cream-ink: #5d7250; }
.cream-topo { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .32; }
:root[data-theme="night"] .cream-topo { opacity: .4; }

/* ── torn edges between sections: each section is cut along its rip and the next one slides under it,
      so whatever the lower section is made of (contours, painting, map) runs right into the torn tongues ── */
.hero { z-index: 20; }
.trusted { position: relative; z-index: 19; margin-top: calc(var(--tear-h) * -1); padding-top: calc(56px + var(--tear-h)); }
.about { z-index: 18; }
.services { z-index: 17 !important; margin-top: calc(var(--tear-h) * -1); }
.work { z-index: 16; }
.register { z-index: 15; margin-top: calc(var(--tear-h) * -1); padding-top: calc(80px + var(--tear-h)); padding-bottom: calc(var(--tear-h) + 90px); }
.reg-rows { margin-top: 44px !important; }
.topo { z-index: 14 !important; margin-top: calc(var(--tear-h) * -1) !important; }
.rings { z-index: 13; }
.ridge-sep { position: relative; z-index: 12; margin-top: calc(var(--tear-h) * -1); padding-top: calc(44px + var(--tear-h)); }
.camps { position: relative; z-index: 11; background: var(--cream); }
.writing { z-index: 10 !important; margin-top: calc(var(--tear-h) * -1); }
.book { z-index: 9 !important; }
.footer { z-index: 8; }
/* the pale core of torn paper, shown along each rip */
.fib-dark { --fiber: #d9d0b8; }
.fib-cream { --fiber: #cfc2a0; }
:root[data-theme="night"] .fib-dark { --fiber: #56644c; }
:root[data-theme="night"] .fib-cream { --fiber: #3a4633; }

/* toolkit: the same faint survey contours as services, on its forest band */
.rings-contours { position: absolute; inset: 0; z-index: -1; opacity: .2; pointer-events: none; }
:root[data-theme="night"] .rings { --rings-ink: #6d8a5c; }
:root[data-theme="night"] .rings-contours { opacity: .16; }

/* ══ motion pass ══ */
/* a trail-marker progress line along the top of the window */
.trail-progress { position: fixed; left: 0; top: 0; z-index: 85; width: 100%; height: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 16px); }
:root[data-theme="night"] .trail-progress { opacity: .85; }
/* section headings rise out of a mask, then their kicker line fades in */
.js .reveal h2 { clip-path: inset(0 0 100% 0); translate: 0 .35em; transition: clip-path .9s cubic-bezier(.22, 1, .36, 1) .1s, translate .9s cubic-bezier(.22, 1, .36, 1) .1s; }
.js .reveal.in h2, html:not(.js) .reveal h2 { clip-path: inset(-.2em -.2em -.3em -.2em); translate: 0 0; }
.js .reveal .caps { opacity: 0; translate: 0 8px; transition: opacity .8s ease .3s, translate .9s cubic-bezier(.22, 1, .36, 1) .3s; }
.js .reveal.in .caps { opacity: 1; translate: 0 0; }
/* photos settle in with a slow push */
.js .camp-art img { scale: 1.12; transition: scale 1.6s cubic-bezier(.22, 1, .36, 1), transform .6s var(--ease), filter .6s; }
.camps.in .camp-art img { scale: 1; }
/* review slips drop onto the page one after another */
.js .reg-rows[data-anim="up"] .reg-slip { opacity: 0; translate: 0 26px; transition: opacity .6s ease, translate .8s cubic-bezier(.34, 1.4, .5, 1); }
.js .reg-rows[data-anim="up"].in .reg-slip { opacity: 1; translate: 0 0; }
.reg-rows.in .reg-slip:nth-child(2) { transition-delay: .08s; } .reg-rows.in .reg-slip:nth-child(3) { transition-delay: .16s; } .reg-rows.in .reg-slip:nth-child(4) { transition-delay: .24s; } .reg-rows.in .reg-slip:nth-child(5) { transition-delay: .32s; }
.camp { transition: transform .5s var(--ease), box-shadow .5s; }
.camps.in .camp:hover { transform: translateY(-6px); }
/* primary buttons get a sweep of light */
.hbtn-primary, .rc-cta, .wr-btn:not(.ghost), .pill-cta { position: relative; overflow: hidden; }
.hbtn-primary::after, .rc-cta::after, .wr-btn:not(.ghost)::after, .pill-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.22, 1, .36, 1); }
.hbtn-primary:hover::after, .rc-cta:hover::after, .wr-btn:not(.ghost):hover::after, .pill-cta:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal h2, .js .reveal .caps, .js .camp-art img, .js .reg-rows .reg-slip { clip-path: none !important; opacity: 1 !important; translate: none !important; scale: 1 !important; transition: none !important; }
  .trail-progress { display: none; }
}

/* ── publications: the paper as a journal reprint, with a stack of pages that fans out on hover ── */
.paper { max-width: 1060px; margin: 26px auto 0; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 70px); align-items: center; }
.reprint { position: relative; display: block; aspect-ratio: 0.8; max-width: min(400px, calc((100vh - 300px) * .8)); justify-self: center; width: 100%; color: #1f1f1f; perspective: 1400px; }
.rp-sheet, .rp-page { position: absolute; inset: 0; border-radius: 2px; background: #fbf8f0; box-shadow: 0 1px 1px rgba(0, 0, 0, .18), 0 18px 30px -18px rgba(0, 0, 0, .6); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.rp-s3 { transform: rotate(-6deg) translate(-14px, 10px); background: #efe9da; }
.rp-s2 { transform: rotate(3.5deg) translate(10px, 6px); background: #f4efe2; }
.rp-page { display: flex; flex-direction: column; gap: 10px; padding: 7% 8% 6%; transform: rotate(-1.2deg); overflow: hidden; font-family: Georgia, "Times New Roman", serif; }
.reprint:hover .rp-s3, .reprint:focus-visible .rp-s3 { transform: rotate(-11deg) translate(-44px, 16px); }
.reprint:hover .rp-s2, .reprint:focus-visible .rp-s2 { transform: rotate(7deg) translate(36px, 4px); }
.reprint:hover .rp-page, .reprint:focus-visible .rp-page { transform: rotate(0deg) translateY(-10px); box-shadow: 0 1px 1px rgba(0, 0, 0, .18), 0 34px 46px -22px rgba(0, 0, 0, .7); }
.rp-series { display: flex; align-items: center; gap: 10px; font: 700 9px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #5a5a5a; }
.rp-series b { padding: 3px 6px 2px; background: #1f3b57; color: #fff; letter-spacing: .1em; }
.rp-rule { height: 2px; background: #1f3b57; opacity: .8; }
.rp-title { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.25; font-weight: 700; text-align: center; margin-top: 6px; }
.rp-authors { font-size: 12.5px; line-height: 1.45; text-align: center; color: #333; }
.rp-authors b { text-decoration: underline; text-decoration-color: #a8481f; text-underline-offset: 3px; }
.rp-abs { margin-top: 4px; font-size: 11.5px; line-height: 1.55; color: #333; text-align: justify; hyphens: auto; }
.rp-kw { font-size: 11px; line-height: 1.5; color: #444; }
.rp-lines { display: grid; gap: 7px; margin-top: 4px; }
.rp-lines i { height: 5px; border-radius: 2px; background: #e4ded0; } .rp-lines i:nth-child(3n) { width: 82%; } .rp-lines i:last-child { width: 55%; }
.rp-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 10px; color: #777; border-top: 1px solid #ddd6c6; padding-top: 6px; }
.rp-open { position: absolute; right: -8px; bottom: -14px; z-index: 3; padding: 7px 14px 5px; border-radius: 999px; background: #1d2619; color: #f4ecd2; font: 700 10px var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transform: rotate(-3deg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); transition: transform .4s var(--ease), background-color .25s; }
.reprint:hover .rp-open { transform: rotate(0deg) translateY(-4px); background: var(--rust); }
.paper-info { position: relative; color: #f6ebd4; }
.seal { position: absolute; z-index: 4; right: -34px; top: -30px; width: 118px; transform: rotate(12deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); transition: transform .5s var(--ease); }
.reprint:hover .seal { transform: rotate(4deg) scale(1.05); }
.seal svg { display: block; width: 100%; overflow: visible; }
.seal-edge { fill: #a8481f; } .seal-in { fill: none; stroke: #f2d6a8; stroke-width: 1.4; stroke-dasharray: 3 3; }
.seal text { fill: #f6ebd4; font: 700 9px var(--sans); letter-spacing: .12em; }
.seal .seal-big { font: 400 20px var(--display); text-anchor: middle; letter-spacing: .04em; }
.js .paper:not(.in) .seal { opacity: 0; }
.paper.in .seal { animation: seal-thud .6s cubic-bezier(.2, .9, .3, 1) .7s both; }
@keyframes seal-thud { 0% { opacity: 0; transform: rotate(-24deg) scale(2); } 60% { opacity: 1; transform: rotate(16deg) scale(.92); } 100% { opacity: 1; transform: rotate(12deg) scale(1); } }
.pi-kicker { font: 700 10.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.pi-title { margin-top: 12px; font-family: "Zilla Slab", serif; font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.pi-title a { color: #f6ebd4; transition: color .2s; } .pi-title a:hover { color: var(--gold); }
.pi-text { margin-top: 14px; max-width: 520px; font-size: 16px; line-height: 1.7; color: #ead7b8; }
.pi-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 10px 26px; margin-top: 18px; padding: 14px 0; border-top: 1px dashed rgba(246, 235, 212, .3); border-bottom: 1px dashed rgba(246, 235, 212, .3); justify-content: start; }
.pi-facts dt { font: 700 9px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #c9a882; }
.pi-facts dd { white-space: nowrap; margin-top: 4px; font: 400 18px var(--display); letter-spacing: .02em; color: #f6ebd4; text-transform: uppercase; }
.paper-info .wr-actions { padding-top: 22px; }
.paper-info .wr-btn { background: #f4ecd2; border-color: #f4ecd2; color: #1d2619; }
.paper-info .wr-btn:hover { background: var(--gold); border-color: var(--gold); }
.paper-info .wr-btn.ghost { background: transparent; color: #f4ecd2; border-color: rgba(244, 236, 210, .6); }
.paper-info .wr-btn.ghost:hover { background: #f4ecd2; color: #1d2619; }
.paper-info .wr-btn.ok { background: #2f4128; border-color: #2f4128; color: #f4ecd2; }
/* a small signpost down to the blog page */
.to-blog { position: relative; max-width: 1060px; margin: 34px auto 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 24px; padding: 20px 26px; border-radius: 8px;
  border: 1.5px dashed rgba(246, 235, 212, .35); color: #f6ebd4; transition: background-color .3s, border-color .3s, transform .35s var(--ease); }
.to-blog:hover, .to-blog:focus-visible { background: rgba(246, 235, 212, .06); border-color: var(--gold); transform: translateY(-3px); }
.tb-kind { grid-row: span 2; font: 700 10px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.to-blog strong { font-family: "Zilla Slab", serif; font-size: 22px; }
.tb-text { grid-column: 2; font: 400 15px var(--hand); color: #ead7b8; }
.tb-go { grid-row: 1 / span 2; grid-column: 3; font-size: 28px; color: var(--gold); transition: transform .3s var(--ease); }
.to-blog:hover .tb-go { transform: translateX(6px); }
@media (max-width: 900px) {
  .paper { grid-template-columns: 1fr; }
  .reprint { max-width: 380px; }
  .seal { top: -30px; right: 2px; width: 88px; }
  .pi-facts { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 560px) {
  .to-blog { grid-template-columns: 1fr auto; } .tb-kind { grid-row: auto; grid-column: 1 / -1; } .tb-text { grid-column: 1; } .tb-go { grid-row: 2 / span 2; grid-column: 2; }
  .rp-page { gap: 8px; } .rp-abs { font-size: 10.5px; } .rp-lines { display: none; }
}
@media (prefers-reduced-motion: reduce) { .js .paper .seal { opacity: 1; transform: rotate(12deg); animation: none; } }

/* ══ footer: a contour mountain beside the sign-off, in the site's forest band ══ */
.footer.rt { position: relative; isolation: isolate; overflow: hidden; padding: 0; margin-top: calc(var(--tear-h) * -1); background: #1d2619; color: #efe6cc; --ft-ink: #8fa878; }
:root[data-theme="night"] .footer.rt { background: #0c100b; }
.rt .ft-tear { --fiber: #34402f; } :root[data-theme="night"] .rt .ft-tear { --fiber: #1b2418; }
.rt-wrap { max-width: 1140px; margin: 0 auto; padding: calc(var(--tear-h) + 20px) clamp(20px, 5vw, 60px) 0; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.footer .rt-title { display: block; transform: none; margin: 0; font: 400 clamp(30px, 3.4vw, 46px)/1 var(--display); letter-spacing: .01em; text-transform: uppercase; color: #f4ecd2; }
.rt-role { margin-top: 10px; font: 700 11px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.rt-meta { margin-top: 14px; font-size: 15px; line-height: 1.7; color: #d8cfb3; }
.rt-sub { margin-top: 14px; max-width: 360px; font-size: 14px; line-height: 1.6; color: #9f977f; }
.rt-stage { position: relative; aspect-ratio: 1.3; max-height: 560px; --rt-card: #1d2619; --rt-line: #a7ae8c; --rt-ring: #d9a932; --rt-text: #efe6cc; --rt-trail: #f4ecd2; }
:root[data-theme="night"] .rt-stage { --rt-card: #0c100b; --rt-line: #6d7a5c; --rt-text: #cfc6a8; }
.rt-art { position: absolute; inset: 0; }
.rt-pins { position: absolute; inset: 0; }
.rt-pin { position: absolute; width: 0; height: 0; }
.rt-pin::before { content: ""; position: absolute; left: -1px; bottom: 0; width: 2px; height: var(--stem); background: currentColor; opacity: .8; }
.rt-head { position: absolute; left: 0; bottom: var(--stem); display: grid; place-items: center; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px rgba(29, 38, 25, .9); transition: transform .3s cubic-bezier(.34, 1.6, .5, 1); }
.rt-head svg { width: 16px; height: 16px; fill: none; stroke: #1d2619; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rt-cream { color: #f4ecd2; } .rt-sage { color: #9fb58a; } .rt-rust { color: #d0643a; } .rt-gold { color: #d9a932; }
/* every pin carries its section name beside it */
.rt-lab { position: absolute; bottom: calc(var(--stem) + 15px); transform: translateY(50%); padding: 4px 9px 3px; border-radius: 5px; background: rgba(20, 27, 17, .82); color: #f4ecd2; white-space: nowrap;
  font: 700 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: color .2s, background-color .2s; }
:root[data-theme="night"] .rt-lab { background: rgba(8, 11, 7, .85); }
.rt-side-r .rt-lab { left: 22px; } .rt-side-l .rt-lab { right: 22px; }
.rt-pin:hover .rt-lab, .rt-pin:focus-visible .rt-lab { background: #f4ecd2; color: #1d2619; }
.rt-pin:hover .rt-head, .rt-pin:focus-visible .rt-head { transform: translateY(-3px) scale(1.12); }
.rt-pin:focus-visible { outline: none; } .rt-pin:focus-visible .rt-head { outline: 2px dashed var(--gold); outline-offset: 4px; }
.js .rt-pin { opacity: 0; translate: 0 14px; transition: opacity .35s ease, translate .55s cubic-bezier(.34, 1.7, .5, 1); }
.js .rt-pin.on { opacity: 1; translate: 0 0; }
.rt-pin .rt-lab { transition: color .2s, background-color .2s, opacity .4s ease .15s; }
.js .rt-pin:not(.on) .rt-lab { opacity: 0; }
.rt-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 20px; max-width: 1140px; margin: 0 auto; padding: 16px clamp(20px, 5vw, 60px) 26px; border-top: 1px dashed rgba(239, 230, 204, .15);
  font-weight: 700; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #9f977f; }
.rt-top { justify-self: center; padding: 7px 14px 5px; border-radius: 999px; border: 1px solid rgba(239, 230, 204, .3); font: inherit; letter-spacing: inherit; text-transform: inherit; color: #efe6cc; transition: background-color .2s, color .2s, border-color .2s; }
.rt-top:hover, .rt-top:focus-visible { background: var(--gold); border-color: var(--gold); color: #1d2619; }
.rt-credit { justify-self: end; font-size: 9px; letter-spacing: .12em; opacity: .7; }
.rt-credit a { color: inherit; border-bottom: 1px solid currentColor; }
@media (max-width: 860px) {
  .rt-wrap { grid-template-columns: 1fr; padding-top: calc(var(--tear-h) + 30px); }
  .rt-stage { max-height: none; }
}
@media (max-width: 700px) { .rt-bottom { grid-template-columns: 1fr; text-align: center; } .rt-top { order: -1; } .rt-credit { justify-self: center; } }

/* faint survey contours behind the whole footer */
.rt-contours { position: absolute; inset: 0; z-index: -1; opacity: .16; pointer-events: none; }
:root[data-theme="night"] .footer.rt { --ft-ink: #6d8a5c; }
:root[data-theme="night"] .rt-contours { opacity: .14; }
@media (max-width: 860px) { .rt-lab { font-size: 9px; letter-spacing: .08em; padding: 3px 6px 2px; } .rt-side-r .rt-lab { left: 17px; } .rt-side-l .rt-lab { right: 17px; } .rt-stage { margin: 10px -10px 0; } }

/* ── postcard: the back of a real one. airmail edging, a stamp box, a correspondence rule, address lines ── */
.postcard { padding: 26px 26px 22px; border-radius: 4px; }
.postcard::before { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; padding: 7px;
  background: repeating-linear-gradient(135deg, #b8432f 0 12px, transparent 12px 20px, #26588a 20px 32px, transparent 32px 40px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .85; }
.postcard::after { inset: 13px; border-color: rgba(46, 42, 32, .12); }
.pc-top { min-height: 118px; }
.pc-head { display: flex; flex-direction: column; gap: 8px; }
.pc-label { font-size: 22px; letter-spacing: .18em; opacity: .8; }
.pc-avion { display: inline-flex; flex-direction: column; align-self: flex-start; padding: 4px 9px 3px; border: 1.5px solid #26588a; border-radius: 3px; color: #26588a; transform: rotate(-3deg); line-height: 1.15; }
.pc-avion b { font: 700 10px var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.pc-avion span { font: 400 11px var(--hand); letter-spacing: .04em; }
.pc-box { position: absolute; right: -4px; top: -6px; width: 88px; height: 112px; display: grid; place-items: center; border: 1.5px dashed rgba(46, 42, 32, .3); border-radius: 3px;
  font: 700 7.5px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-align: center; color: rgba(46, 42, 32, .35); }
.pc-stamp { position: relative; z-index: 1; width: 80px; margin-right: 0; }
.pc-postmark { right: 44px; top: 30px; z-index: 2; }
.pc-cols { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(46, 42, 32, .28);
  font: 700 8.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(46, 42, 32, .5); }
.pc-note { margin-top: 12px; background: repeating-linear-gradient(transparent 0 23.8px, rgba(46, 42, 32, .1) 23.8px 24.8px); line-height: 24.8px; }
.pc-to { margin-top: 14px; font: 700 8.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(46, 42, 32, .5); }
.pc-lines { margin-top: 6px; }

/* footer: a short "currently" log fills the left column */
.rt-now { display: grid; gap: 0; max-width: 420px; margin-top: 20px; border-top: 1px dashed rgba(239, 230, 204, .2); }
.rt-now div { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: baseline; padding: 9px 0 8px; border-bottom: 1px dashed rgba(239, 230, 204, .2); }
.rt-now dt { font: 700 9.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.rt-now dd { font-size: 14.5px; line-height: 1.45; color: #e3dac0; }
.rt-now a { color: #f4ecd2; border-bottom: 1px solid rgba(244, 236, 210, .35); transition: color .2s, border-color .2s; }
.rt-now a:hover { color: var(--gold); border-color: var(--gold); }
.rt-meta { margin-top: 12px; }
.rt-sub { margin-top: 16px; }

/* ══ phones: the same trail, packed lighter ══════════════════════════════════════════
   One place for the small-screen pass: tighter section rhythm, shorter art, no duplicated
   content, and the map labels that crowd a narrow screen tucked away. */
.book-call { display: none; }
@media (max-width: 860px) {
  /* experience: the map's place names collide with the title and cards on a narrow map */
  .topo-map svg { display: none; }
  .topo-title { padding-top: 84px; }
  .trail { padding-top: 34px; }
  .topo { padding-bottom: 64px; }
}
@media (max-width: 960px) {
  /* toolkit: heading first, then the rings, then the legend */
  .rings-grid { gap: 0; }
  .rings-copy { display: contents; }
  .rings-copy h2 { justify-self: start; }
  .slice-wrap { order: 1; width: 100%; max-width: 340px; margin: 10px auto 0; }
  .zones { order: 2; }
}
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.6; }

  /* trusted strip */
  .trusted { padding-top: calc(34px + var(--tear-h)); }
  .co-marquee { margin-top: 12px; }
  .co-row { gap: 44px; }
  .co-row a, .co-row li > span { height: 44px; transform: scale(.82); }

  /* about */
  .about { padding: 34px 20px 64px; }
  .about-grid { gap: 30px; }
  .hw { margin: 10px 0 6px; min-height: 0; }
  .about-title { font-size: 28px; }
  .about-copy > p:not(.caps) { margin-top: 12px; font-size: 15.5px; line-height: 1.6; }
  .about-copy > .about-extra { display: none; }
  .principles { margin-top: 16px; }
  .principles li { grid-template-columns: 34px 1fr; padding: 5px 0; }
  .principles li:nth-child(3) { display: none; }   /* "30+ projects" is already in the copy and on the card */
  .principles span { font-size: 16px; }
  .pass { max-width: 360px; }
  .wpa-art { aspect-ratio: 900 / 640; }
  .wpa-head { padding-top: 16px; }
  .pass-name { font-size: 32px; }
  .wpa-info { padding-top: 16px; }
  .wpa-info > div { padding: 5px 0 4px; }

  /* services */
  .services { padding: 64px 16px 52px; }
  .svc-sub { font-size: 14px; line-height: 1.55; }
  .trailhead { margin-top: 22px; gap: 22px; }
  .sp { padding-bottom: 20px; max-width: 360px; }
  .sp-cap { display: none; }
  .sp-boards { gap: 6px; }
  .sp-post { top: 0; }
  .sp-board { padding: 8px 34px 7px 16px; gap: 10px; grid-template-columns: 18px 1fr auto; }
  .sp-boards li:nth-child(even) .sp-board { padding: 8px 16px 7px 34px; }
  .sp-board span { font-size: 14.5px; }
  .sp-blaze { width: 15px; height: 15px; }
  .sp-board.on { transform: rotate(0deg) translateX(calc(var(--dir) * 8px)); }
  .rc-body { padding: 18px 16px 20px; }
  .rc-top { padding-bottom: 14px; }
  .rc-tag { font-size: 14px; }
  .rc-viz { margin-top: 16px; }
  .rc-viz figcaption { min-height: 0; font-size: 13px; }
  .sv-heading > span { display: none; }   /* "illustration · hover the curve": there's no hover on a phone */
  .sv-legend { margin-top: 6px; gap: 4px 12px; font-size: 11px; }
  .rc-side { gap: 12px; }
  .rc-meta { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rc-meta dd { font-size: 13px; }
  .rc-get li { font-size: 13.5px; }
  .rc-cta { align-self: stretch; justify-content: center; margin-top: 4px; }
  .camps-trail { margin-top: 26px; padding-top: 14px; gap: 12px; }
  .ct { row-gap: 14px; gap: 10px; }
  .ct li { grid-template-columns: 30px 1fr; column-gap: 8px; }
  .cp-tent { width: 30px; height: 30px; }
  .cp-tent svg { width: 16px; height: 12px; }
  .ct strong { font-size: 15px; }
  .ct .cp-text { font-size: 12px; line-height: 1.35; }

  /* projects */
  .work { padding-top: 100px; padding-bottom: 84px; }
  .jn-tabs { margin-top: 24px; }
  .jn-tabs button { min-height: 34px; padding: 4px 11px 2px; font-size: .9rem; }
  .jn-shots { padding-bottom: 56px; }
  .jn-controls { margin-top: 18px; }

  /* reviews */
  .register { padding-top: calc(48px + var(--tear-h)); padding-bottom: calc(var(--tear-h) + 48px); }
  .reg-sub { font-size: 14.5px; line-height: 1.55; }
  .reg-rows { margin-top: 26px !important; }
  .reg-slip { width: 300px; padding: 16px 18px; }
  .reg-q { min-height: 0; font-size: 14px; line-height: 25px; }
  .reg-name { font-size: 21px; }

  /* experience */
  .topo-title h2 { font-size: 21px; letter-spacing: .2em; }
  .topo-title .topo-hint { font-size: 17px; }
  .stops { gap: 12px; }
  .stops > li { padding: 12px 14px 13px; }

  /* toolkit */
  .rings { padding: 84px 20px 70px; }
  .rings-sub { font-size: 14px; }
  .zones { margin-top: 14px; }
  .zone-head { grid-template-columns: 12px 1fr auto; gap: 10px; padding: 8px 0 6px; }
  .zone-ring { display: none; }
  .zone-tools { padding: 0 0 9px 22px; gap: 4px; }
  .zone-tools button { padding: 2px 8px 1px; font-size: 11px; }

  /* education */
  .camps { padding: 18px 16px 64px; }
  .camps-sub { font-size: 14.5px; line-height: 1.55; }
  .camps-row { margin-top: 22px; }
  .camp-art, .camps:has(.camp-more[open]) .camp-art { height: 96px; }
  .camp-band { padding: 9px 16px 7px; font-size: 9.5px; }
  .camp-body { padding: 14px 18px 16px; }
  .camp-body h3 { margin-top: 8px; font-size: 22px; }
  .camp-school { margin-top: 10px; font-size: 13px; }
  .camp-text { font-size: 14.5px; line-height: 1.55; }
  .camp-more { margin-top: 12px; }
  .camp-more > summary { padding: 9px 2px 8px; }
  .camp-route { height: 54px; }
  .camp-route svg { width: 44px; height: 26px; }

  /* publications: the reprint already shows the title, so the info column drops its copy of it */
  .writing { padding-top: calc(var(--tear-h) + 28px); padding-bottom: calc(var(--tear-h) + 28px); }
  .paper { margin-top: 18px; gap: 34px; }
  .reprint { max-width: 290px; }
  .rp-page { gap: 7px; }
  .rp-title { font-size: 15px; }
  .rp-authors { font-size: 11px; }
  .rp-abs { font-size: 10.5px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
  .rp-lines { display: none; }
  .writing .seal { width: 70px; height: 70px; }
  .pi-title { display: none; }
  .pi-kicker { line-height: 1.6; letter-spacing: .16em; }
  .pi-text { margin-top: 10px; font-size: 15px; line-height: 1.6; }
  .pi-facts { margin-top: 14px; padding: 10px 0; gap: 8px 18px; }
  .pi-facts dd { font-size: 15px; }
  .paper-info .wr-actions { padding-top: 16px; }
  .wr-btn { padding: 9px 13px 7px; }
  .to-blog { margin-top: 24px; padding: 14px 16px; gap: 4px 12px; }
  .to-blog strong { font-size: 18px; }
  .tb-text { font-size: 13.5px; }

  /* contact: a booking link stands in for the inline calendar */
  .book { padding: 84px 14px 76px; }
  .book-head { margin-bottom: 26px; }
  .book-grid { gap: 18px; }
  .postcard { padding: 20px 18px 16px; }
  .pc-top { min-height: 96px; }
  .pc-note { font-size: 15px; }
  .pc-sign { font-size: 24px; margin-top: 0; }
  .pc-lines a { padding: 9px 2px 7px; }
  .cal-inline { display: none; }
  .book-card { filter: none; }
  .book-call { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 14px 16px; border-radius: 8px;
    background: #d9a932; color: #1d2619; box-shadow: 0 4px 0 #8a6512, 0 22px 30px -18px rgba(0, 0, 0, .6); transition: transform .2s var(--ease), box-shadow .2s; }
  .book-call:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6512; }
  .bc-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #1d2619; color: #d9a932; }
  .bc-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bc-txt b { display: block; font: 700 17px/1.2 "Zilla Slab", serif; }
  .bc-txt small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: .75; }
  .bc-go { font-size: 22px; }

  /* footer: the waypoints become a tidy list of jump links (the mountain is too narrow for eight labels) */
  .rt-wrap { gap: 18px; padding: calc(var(--tear-h) + 18px) 20px 0; }
  .rt-meta { font-size: 14px; }
  .rt-now { margin-top: 14px; }
  .rt-now div { grid-template-columns: 96px 1fr; gap: 10px; padding: 7px 0 6px; }
  .rt-now dd { font-size: 13.5px; }
  .rt-sub { display: none; }
  .rt-stage { aspect-ratio: auto; margin: 0; }
  .rt-art { display: none; }
  .rt-pins { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rt-pins::before { content: "Jump back to"; grid-column: 1 / -1; font: 700 9.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
  .rt-pin { position: static; width: auto; height: auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 999px; background: rgba(239, 230, 204, .06); border: 1px solid rgba(239, 230, 204, .14); }
  .rt-pin::before { display: none; }
  .rt-head { position: static; flex: none; width: 26px; height: 26px; margin: 0; box-shadow: none; }
  .rt-head svg { width: 14px; height: 14px; }
  .rt-lab, .rt-side-r .rt-lab, .rt-side-l .rt-lab { position: static; transform: none; padding: 0; background: none; font-size: 10px; letter-spacing: .1em; white-space: normal; line-height: 1.2; }
  .js .rt-pin { translate: 0 8px; }
  .rt-bottom { padding: 14px 20px 22px; gap: 8px; }
}