:root {
  --paper: #eaf1f4; --snow: #f9fcfd; --ink: #152e3d; --muted: #526c79;
  --copper: #28769c; --lichen: #5f887d; --line: #b6cbd3;
  --art-hot:#b64055;--art-warm:#a76516;--art-success:#26745f;--art-cool:#397a94;--art-violet:#684c9c;--art-panel:#173746;--art-panel-line:#5d8da0;--art-on-panel:#f2fafc;--art-track:#496b78;--art-forest:#3f765d;
  --serif: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Avenir Next', Avenir, 'Segoe UI Variable', 'Segoe UI', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', ui-monospace, monospace;
  --wrap: min(1180px, calc(100vw - 40px));
  --scene-sky:#d9eef4;--scene-sky-edge:#77a8b8;--scene-celestial:#e4b95f;
}
:root[data-palette="alpine"] { --paper:#edf4f3;--snow:#fbfdfb;--ink:#142c2b;--muted:#536765;--copper:#b64c32;--lichen:#718d62;--line:#b9c9c6;--art-hot:#c3442e;--art-warm:#a76811;--art-success:#327559;--art-cool:#3f7d8b;--art-violet:#76549b;--art-panel:#173633;--art-panel-line:#668f88;--art-on-panel:#f3fbf8;--art-track:#547873;--art-forest:#527f55; }
:root[data-palette="desert"] { --paper:#f3ead8;--snow:#fffaf0;--ink:#302820;--muted:#6d5e4e;--copper:#b4492f;--lichen:#667a45;--line:#cdbda5;--art-hot:#c63f2e;--art-warm:#9c6411;--art-success:#497044;--art-cool:#397885;--art-violet:#765396;--art-panel:#382820;--art-panel-line:#96725a;--art-on-panel:#fff7e8;--art-track:#806858;--art-forest:#637446; }
:root[data-palette="glacier"] { --paper:#eaf1f4;--snow:#f9fcfd;--ink:#152e3d;--muted:#526c79;--copper:#28769c;--lichen:#5f887d;--line:#b6cbd3;--art-hot:#b64055;--art-warm:#a76516;--art-success:#26745f;--art-cool:#397a94;--art-violet:#684c9c;--art-panel:#173746;--art-panel-line:#5d8da0;--art-on-panel:#f2fafc;--art-track:#496b78;--art-forest:#3f765d; }
:root[data-palette="signal"] { --paper:#f0edf5;--snow:#fcfaff;--ink:#2b233b;--muted:#685e78;--copper:#7550a4;--lichen:#347765;--line:#c9bfd6;--art-hot:#b83e69;--art-warm:#9a6418;--art-success:#28735f;--art-cool:#34778f;--art-violet:#724ca7;--art-panel:#302541;--art-panel-line:#806b9a;--art-on-panel:#fcf8ff;--art-track:#675778;--art-forest:#39745c; }
:root[data-palette="forest"] { --paper:#edf1e7;--snow:#fafcf6;--ink:#243126;--muted:#5d6b5e;--copper:#a74f32;--lichen:#66804d;--line:#bdc8b8;--art-hot:#b74d36;--art-warm:#9a6a21;--art-success:#3d7146;--art-cool:#477985;--art-violet:#6e5b8c;--art-panel:#263b2b;--art-panel-line:#718b70;--art-on-panel:#f5faef;--art-track:#617760;--art-forest:#476b3f; }
:root[data-palette="coast"] { --paper:#e8f0ef;--snow:#f8fcfb;--ink:#173337;--muted:#557075;--copper:#b85d3f;--lichen:#4f8171;--line:#b4c9c7;--art-hot:#c25243;--art-warm:#a77926;--art-success:#367563;--art-cool:#337b91;--art-violet:#665b91;--art-panel:#183d42;--art-panel-line:#609099;--art-on-panel:#f1fbfa;--art-track:#557b7e;--art-forest:#427664; }
:root[data-palette="meadow"] { --paper:#f1efe4;--snow:#fcfbf5;--ink:#313426;--muted:#6c6c58;--copper:#6c579c;--lichen:#708442;--line:#ccc8b5;--art-hot:#b64f72;--art-warm:#a8741d;--art-success:#557936;--art-cool:#497d88;--art-violet:#7354a3;--art-panel:#343a27;--art-panel-line:#858c62;--art-on-panel:#fbfaef;--art-track:#74765f;--art-forest:#5d7539; }
:root[data-palette="volcanic"] { --paper:#eeeae7;--snow:#faf8f6;--ink:#342a27;--muted:#70615c;--copper:#c24f35;--lichen:#68744c;--line:#cbbdb7;--art-hot:#d04432;--art-warm:#ae6819;--art-success:#557345;--art-cool:#477681;--art-violet:#765588;--art-panel:#3d2b27;--art-panel-line:#936d61;--art-on-panel:#fff8f4;--art-track:#816963;--art-forest:#61704a; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 clamp(1rem,.97rem + .12vw,1.06rem)/1.62 var(--sans); font-kerning: normal; font-optical-sizing: auto; font-variant-ligatures: common-ligatures contextual; text-rendering: optimizeLegibility; }
main:focus { outline: 0; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; border:0!important; white-space:nowrap!important; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
svg { display: block; max-width: 100%; }
.palette-picker { position: fixed; z-index: 30; right: max(1rem,calc((100vw - 1180px)/2)); bottom: 1rem; color: var(--ink); font: 700 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.palette-picker[hidden] { display: none; }
.palette-picker summary { display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb,var(--snow) 92%,transparent); box-shadow: 0 8px 24px color-mix(in srgb,var(--ink) 12%,transparent); cursor: pointer; list-style: none; backdrop-filter: blur(10px); }
.palette-picker summary::-webkit-details-marker { display: none; }.palette-picker summary:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
.palette-current { width: .75rem; aspect-ratio: 1; border: 2px solid var(--snow); border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 1px var(--ink); }
.palette-panels { position:absolute; right:0; bottom:calc(100% + .6rem); display:grid; grid-template-columns:minmax(13rem,1fr) minmax(8rem,.7fr); gap:1px; width:max-content; max-width:calc(100vw - 2rem); overflow:hidden; border:1px solid var(--line); border-radius:4px; background:var(--line); box-shadow:0 18px 45px color-mix(in srgb,var(--ink) 16%,transparent); }
.palette-picker fieldset { min-width: 0; margin: 0; padding: .55rem; border: 0; background: var(--snow); }
.palette-picker .theme-options { min-width: 8rem; }
.palette-picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.palette-picker label { display: grid; grid-template-columns: auto 2.6rem 1fr; align-items: center; gap: .65rem; padding: .65rem .55rem; border-radius: 2px; cursor: pointer; }.palette-picker label:hover { background: var(--paper); }.palette-picker input { margin: 0; accent-color: var(--copper); }
.palette-picker .theme-options label { grid-template-columns:auto 1fr; }
.palette-swatches { display:flex; overflow:hidden; height:1rem; border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:999px; }.palette-swatches i { flex:1; background:var(--option-paper); }.palette-swatches i:nth-child(2) { background:var(--option-ink); }.palette-swatches i:nth-child(3) { background:var(--option-accent); }.palette-swatches i:nth-child(4) { background:var(--option-terrain); }.palette-swatches i:nth-child(5) { background:var(--option-water); }
[data-palette-option="alpine"] { --option-paper:#edf4f3;--option-ink:#142c2b;--option-accent:#b64c32;--option-terrain:#718d62;--option-water:#3f7d8b;--option-night-paper:#102322;--option-night-ink:#eaf3ef;--option-night-accent:#ef795c;--option-night-terrain:#a8c49a;--option-night-water:#8fcbd4; }
[data-palette-option="desert"] { --option-paper:#f3ead8;--option-ink:#302820;--option-accent:#b4492f;--option-terrain:#667a45;--option-water:#397885;--option-night-paper:#211914;--option-night-ink:#f7ead2;--option-night-accent:#ff7952;--option-night-terrain:#b3c578;--option-night-water:#79c4cf; }
[data-palette-option="glacier"] { --option-paper:#eaf1f4;--option-ink:#152e3d;--option-accent:#28769c;--option-terrain:#5f887d;--option-water:#397a94;--option-night-paper:#10232f;--option-night-ink:#eaf6fa;--option-night-accent:#70bce2;--option-night-terrain:#83b7aa;--option-night-water:#72c1df; }
[data-palette-option="signal"] { --option-paper:#f0edf5;--option-ink:#2b233b;--option-accent:#7550a4;--option-terrain:#347765;--option-water:#34778f;--option-night-paper:#1d1729;--option-night-ink:#f3edfa;--option-night-accent:#c09aef;--option-night-terrain:#78c7ae;--option-night-water:#74c5df; }
[data-palette-option="forest"] { --option-paper:#edf1e7;--option-ink:#243126;--option-accent:#a74f32;--option-terrain:#66804d;--option-water:#477985;--option-night-paper:#172119;--option-night-ink:#eef5e9;--option-night-accent:#f08a62;--option-night-terrain:#a8c47c;--option-night-water:#82c4cc; }
[data-palette-option="coast"] { --option-paper:#e8f0ef;--option-ink:#173337;--option-accent:#b85d3f;--option-terrain:#4f8171;--option-water:#337b91;--option-night-paper:#102326;--option-night-ink:#edf8f7;--option-night-accent:#ff9471;--option-night-terrain:#83c2aa;--option-night-water:#76cadc; }
[data-palette-option="meadow"] { --option-paper:#f1efe4;--option-ink:#313426;--option-accent:#6c579c;--option-terrain:#708442;--option-water:#497d88;--option-night-paper:#202019;--option-night-ink:#f5f2df;--option-night-accent:#c5a4f1;--option-night-terrain:#b1c976;--option-night-water:#83c5ce; }
[data-palette-option="volcanic"] { --option-paper:#eeeae7;--option-ink:#342a27;--option-accent:#c24f35;--option-terrain:#68744c;--option-water:#477681;--option-night-paper:#211a18;--option-night-ink:#f8eee8;--option-night-accent:#ff7b57;--option-night-terrain:#aebc78;--option-night-water:#7ac2ce; }
:root[data-theme="night"] [data-palette-option] { --option-paper:var(--option-night-paper);--option-ink:var(--option-night-ink);--option-accent:var(--option-night-accent);--option-terrain:var(--option-night-terrain);--option-water:var(--option-night-water); }
.command-palette { color-scheme:inherit; width: min(42rem,calc(100vw - 2rem)); max-height: min(42rem,calc(100dvh - 2rem)); margin: clamp(1rem,12vh,7rem) auto auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--snow); color: var(--ink); box-shadow: 0 28px 90px color-mix(in srgb,var(--ink) 28%,transparent); }
.command-palette::backdrop { background: color-mix(in srgb,var(--ink) 42%,transparent); backdrop-filter: blur(7px); }
.command-search { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.command-search > span { color: var(--copper); font: 400 1.5rem/1 var(--serif); }
.command-search input { min-width: 0; padding: .3rem 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 clamp(1rem,2vw,1.18rem)/1.4 var(--sans); }
.command-search input::placeholder { color: var(--muted); }
.command-palette kbd { min-width: 1.55rem; padding: .16rem .34rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--paper); color: var(--muted); font: 700 .66rem/1.2 var(--mono); text-align: center; }
.command-results { max-height: min(29rem,calc(100dvh - 11rem)); overflow-y: auto; padding: .45rem; }
.command-results button { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: .75rem .8rem; border: 0; border-radius: 3px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.command-results button[aria-selected="true"] { background: var(--paper); box-shadow: inset 3px 0 var(--copper); }
.command-results button span { display: grid; gap: .14rem; }
.command-results b { font: 700 .9rem/1.35 var(--sans); }
.command-results small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.command-results i { color: var(--copper); font: normal 700 .64rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.command-meta { display:flex!important; grid-auto-flow:column; align-items:center; justify-content:end; gap:.6rem!important; }
.command-meta kbd { white-space:nowrap; }
.command-empty { margin: 0; padding: 2.5rem 1rem; color: var(--muted); text-align: center; }
.command-palette footer { display: flex; gap: 1rem; padding: .65rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font: 700 .65rem/1.4 var(--mono); }
.command-palette footer span { display: flex; align-items: center; gap: .3rem; }
.wrap { width: var(--wrap); margin-inline: auto; }
.skip-link { position:fixed; z-index:20; top:8px; left:8px; padding:.7rem 1rem; border:1px solid var(--art-panel-line); border-radius:3px; background:var(--art-panel); color:var(--art-on-panel); box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 18%,transparent); translate:0 -150%; }
.skip-link:is(:focus,:focus-visible) { translate:0!important; }
.skip-link:focus-visible { outline-color:var(--copper); }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; }
.site-header { min-height: 92px; display: flex; justify-content: space-between; align-items: center; }
.wordmark { display: block; width: 46px; color: var(--ink); text-decoration: none; }
.wordmark { view-transition-name: site-mark; }
.brand-mark { width: 100%; overflow: visible; scale: 1.12; }
.brand-mark-frame { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: bevel; }
.brand-mark-route { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.brand-mark-node { fill: var(--copper); stroke: var(--paper); stroke-width: 1.5; }
.wordmark .brand-mark-route, .wordmark .brand-mark-node { transition: stroke .2s, fill .2s, translate .2s; }
.wordmark:hover .brand-mark-route { stroke: var(--copper); translate: 2px 0; }
.wordmark:hover .brand-mark-node { fill: var(--ink); }
nav { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); }
.site-header nav { view-transition-name: site-nav; }
nav a { text-decoration: none; font-size: .88rem; font-weight: 700; letter-spacing: .01em; }
nav a:not(.nav-cta) { padding-block: .6rem; background: linear-gradient(var(--copper),var(--copper)) 0 100%/0 2px no-repeat; transition: background-size .25s ease; }
nav a:not(.nav-cta):hover, nav a[aria-current="page"] { background-size: 100% 2px; }
.nav-cta { border: 1px solid var(--ink); border-radius: 999px; padding: .58rem .9rem; transition: color .2s, background .2s; }
.nav-cta:hover { background: var(--ink); color: var(--snow); }
.hero { min-height: calc(100svh - 92px); display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: clamp(1rem, 5vw, 5rem); padding-block: clamp(2rem, 5vw, 5rem) 5rem; }
.eyebrow { margin: 0 0 1.4rem; font: 700 clamp(.7rem,.67rem + .12vw,.77rem)/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow:has(.trail-glyph) { display:flex; align-items:center; gap:.58rem; }
.trail-glyph { width:1.35rem; height:1.35rem; flex:0 0 auto; overflow:visible; color:var(--copper); fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.case-story .trail-glyph { color:var(--lichen); }
.contact .trail-glyph { color:var(--art-warm); }
.about-principles .trail-glyph { width:1.15rem; height:1.15rem; }
.status-dot { display: inline-block; width: .56rem; aspect-ratio: 1; margin-right: .5rem; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--copper) 18%, transparent); }
h1,h2,h3 { text-wrap: balance; }
p,dd,small { text-wrap: pretty; }
h1 { margin: 0; font: 400 clamp(3.5rem,7.1vw,6.9rem)/.94 var(--serif); letter-spacing: -.052em; }
h1 em, h2 em { color: var(--copper); font-weight: 400; }
.lede { max-width: 39rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.1rem,1.35vw + .72rem,1.38rem); line-height: 1.58; letter-spacing: -.008em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.3rem; }
.button { display: inline-flex; align-items: center; gap: 1.5rem; border: 1px solid var(--ink); border-radius: 999px; padding: .85rem 1.15rem; background: var(--ink); color: var(--snow); text-decoration: none; font-size: .86rem; font-weight: 700; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-2px); background: var(--copper); border-color: var(--copper); }
.text-link { padding: .6rem 0; font-size: .9rem; font-weight: 700; text-underline-offset: .3rem; }
.signal-map { margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.signal-map svg { width: min(100%, 610px); margin-inline: auto; overflow: visible; }
.signal-map figcaption { margin: -1rem 1rem 0 auto; color: var(--muted); font: .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.contours path { fill: none; stroke: var(--line); stroke-width: 1; }
.signal-path { fill: none; stroke: var(--copper); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: route 2.2s .35s cubic-bezier(.65,0,.25,1) forwards; }
.signal-glow { stroke: color-mix(in srgb, var(--copper) 18%, transparent); stroke-width: 16; }
.map-node circle:first-child { fill: var(--paper); stroke: var(--ink); stroke-width: 2; filter: url(#soft-shadow); }
.map-node .pulse { fill: none; stroke: var(--copper); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pulse 3s ease-out infinite; }
.map-node text, .map-key text { fill: var(--ink); font: 700 11px var(--mono); letter-spacing: 1px; }
.map-key path { stroke: var(--ink); stroke-width: 1; }
.node-infra .pulse { animation-delay: .45s; }.node-desktop .pulse { animation-delay: .9s;}.node-play .pulse { animation-delay: 1.35s;}
@keyframes route { to { stroke-dashoffset: 0; }}
@keyframes pulse { 0%,35% { opacity: .8; transform: scale(.65); } 75%,100% { opacity: 0; transform: scale(1.65); }}
.principles { display: grid; grid-template-columns: .8fr 3fr; align-items: center; padding: 1.35rem 0; border-block: 1px solid var(--line); }
.principles p { margin: 0; color: var(--muted); font: 700 .75rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.principles ul { display: flex; justify-content: space-between; gap: 1.5rem; margin: 0; padding: 0; list-style: none; font: 400 clamp(1.05rem, 2vw, 1.4rem) var(--serif); }
.principles li::before { content: '◆'; margin-right: 1rem; color: var(--copper); font-size: .52em; vertical-align: .22em; }
.work-section { padding-block: clamp(6rem, 12vw, 11rem); }
.section-heading { display: grid; grid-template-columns: .7fr 2fr 1.1fr; gap: 2rem; align-items: end; margin-bottom: 4rem; }
.section-heading .eyebrow { align-self: start; }
.section-heading h2, .toolbox h2, .about-grid h2, .availability h2 { margin: 0; font: 400 clamp(2.3rem,5vw,4.7rem)/1.01 var(--serif); letter-spacing: -.04em; }
.section-heading > p:last-child { margin: 0; color: var(--muted); }
.project-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.project { min-width: 0; }
.project-featured { grid-column: 1 / -1; }
.project-link { height: 100%; display: grid; grid-template-rows: auto 1fr; overflow: clip; border: 1px solid var(--line); border-radius: 3px; background: var(--snow); text-decoration: none; transition: transform .28s ease, box-shadow .28s ease; }
.project-link:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(20,44,43,.11); }
.project-visual { background: color-mix(in srgb,var(--paper) 78%,var(--lichen)); overflow: hidden; }
.project-featured .project-visual { aspect-ratio: 2.45 / 1; }
.project:not(.project-featured) .project-visual { aspect-ratio: 1.55 / 1; }
.project-visual svg { width: 100%; height: 100%; }
.project-visual text { fill: var(--muted); font: 700 11px var(--mono); letter-spacing: 1.4px; }
.card-grid { fill: none; stroke: color-mix(in srgb,var(--ink) 12%,transparent); stroke-width: 1; }
.visual-ddns .ddns-routes path { fill: none; stroke: var(--art-track); stroke-width: 2.5; stroke-dasharray: 6 9; }
.visual-ddns .ddns-endpoints > g > circle:first-child { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.visual-ddns .endpoint-core { fill: var(--lichen); stroke: var(--paper); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: endpoint-pulse 2.4s ease-in-out infinite; }
.visual-ddns .ddns-endpoints > g:nth-child(2) .endpoint-core { animation-delay: -.8s; }.visual-ddns .ddns-endpoints > g:nth-child(3) .endpoint-core { animation-delay: -1.6s; }
.visual-ddns .ddns-packets circle { fill: var(--art-hot); stroke: var(--art-warm); stroke-width: 3; }
.ddns-server rect { fill: var(--art-panel); stroke: var(--art-panel-line); stroke-width: 2; }.ddns-server .server-top { stroke: var(--art-panel-line); stroke-width: 2; }.ddns-server > circle:not(.server-status) { fill: var(--art-hot); }.ddns-server > circle:nth-of-type(2) { fill: var(--art-warm); }.ddns-server .server-lines { fill: none; stroke: var(--art-on-panel); stroke-width: 7; stroke-linecap: round; }.ddns-server .server-status { fill: var(--art-success); animation: status-blink 1.8s ease-in-out infinite; }
@keyframes endpoint-pulse { 50% { fill: var(--art-hot); scale: 1.35; } }
@keyframes status-blink { 50% { opacity: .35; } }
.visual-shield .shield { fill: var(--art-panel); }.visual-shield .shield-inset { fill: none; stroke: var(--art-panel-line); stroke-width: 2; stroke-dasharray: 5 7; }.visual-shield .scan { stroke: var(--art-hot); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb,var(--art-hot) 55%,transparent)); animation: scan 2.8s ease-in-out infinite; }.visual-shield .check { fill: none; stroke: var(--art-on-panel); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: check-draw 2.8s ease-out infinite; }.evidence-dots circle { fill: var(--art-warm); stroke: var(--ink); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: evidence-read 2.8s ease-in-out infinite; }.evidence-dots circle:nth-child(2) { animation-delay: -.9s; }.evidence-dots circle:nth-child(3) { animation-delay: -1.8s; }
@keyframes scan { 0%,100% { translate: 0 -35px; opacity: .45; } 50% { translate: 0 45px; opacity: 1; }}
@keyframes check-draw { 0%,48% { stroke-dashoffset: 1; } 72%,100% { stroke-dashoffset: 0; } }
@keyframes evidence-read { 50% { fill: var(--art-hot); scale: 1.35; } }
.visual-devices .device-panel { fill: var(--art-panel); stroke: var(--art-panel-line); stroke-width: 2; }.device-header { stroke: var(--art-panel-line); stroke-width: 2; }.window-dots circle { fill: var(--art-hot); }.window-dots circle:nth-child(2) { fill: var(--art-warm); }.window-dots circle:nth-child(3) { fill: var(--art-success); }.device-icons { fill: none; stroke: var(--art-success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.device-labels path { stroke: var(--art-on-panel); stroke-width: 5; stroke-linecap: round; opacity: .82; }.toggle-tracks rect { fill: var(--art-track); }.toggles circle { fill: var(--art-hot); transform-box: fill-box; transform-origin: center; animation: toggle 3.6s steps(1,end) infinite; }.toggles circle:nth-child(2){animation-delay:-1.2s}.toggles circle:nth-child(3){animation-delay:-2.4s}
@keyframes toggle { 50% { fill: var(--art-success); translate: 28px 0; }}
.project-copy { padding: clamp(1.4rem, 3vw, 2.4rem); }
.project-meta { margin: 0 0 1rem; color: var(--muted); font: 700 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.project h3 { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font: 400 clamp(1.8rem,3.6vw,3.1rem)/1.08 var(--serif); letter-spacing: -.032em; }
.project-copy > p:last-child { max-width: 62ch; margin: 1rem 0 0; color: var(--muted); line-height: 1.62; }
.project-evidence { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:1.25rem 0 0; border-top:1px solid var(--line); background:var(--line); }
.project-evidence div { min-width:0; padding:.85rem .75rem 0 0; background:var(--snow); }
.project-evidence dt { color:var(--muted); font:700 .64rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.project-evidence dd { margin:.22rem 0 0; font:700 .78rem/1.45 var(--sans); }
.all-work { margin: 2.2rem 0 0; text-align: center; }.button-secondary { background: transparent; color: var(--ink); }.button-secondary:hover { color: var(--snow); }
.toolbox { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(3rem, 8vw, 8rem); padding-block: clamp(5rem, 10vw, 9rem); border-top: 1px solid var(--line); }
.toolbox dl { margin: 0; }.toolbox dl div { padding: 1.45rem 0; border-bottom: 1px solid var(--line); }.toolbox dt { margin-bottom: .55rem; font: 700 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .11em; }.toolbox dd { max-width: 58ch; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.62; }
.current { display:grid; grid-template-columns:.7fr 2.3fr; gap:clamp(2rem,7vw,7rem); padding-block:clamp(4rem,8vw,7rem); border-top:1px solid var(--line); }
.current h2,.contact h2 { max-width:16ch; margin:0; font:400 clamp(2.2rem,4.4vw,4.2rem)/1.03 var(--serif); letter-spacing:-.04em; }
.current h2 + p,.contact div > p { max-width:62ch; margin:1.4rem 0 0; color:var(--muted); font-size:1.06rem; line-height:1.68; }
.current-date { margin:0; color:var(--muted); font:700 .68rem/1.45 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.contact { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2rem,7vw,7rem); align-items:end; padding:clamp(3rem,6vw,5.5rem); background:var(--ink); color:var(--paper); }
.contact .eyebrow,.contact div > p { color:color-mix(in srgb,var(--paper) 72%,transparent); }
.contact .button { margin-top:1.6rem; border-color:var(--paper); background:var(--paper); color:var(--ink); }
.contact .button:hover { border-color:var(--copper); background:var(--copper); color:var(--paper); }
.hobbies { display: grid; grid-template-columns: minmax(13rem,.8fr) 2fr; align-items: center; gap: clamp(2rem,6vw,6rem); padding-block: clamp(3rem,6vw,4.5rem); border-top: 1px solid var(--line); }
.hobbies-heading h2 { max-width: 22rem; margin: 0; font: 400 clamp(1.7rem,2.8vw,2.65rem)/1.03 var(--serif); letter-spacing: -.04em; }
.hobby-route { position: relative; min-width: 0; isolation: isolate; }
.hobby-trail,.hobby-flight-layer { position: absolute; inset: 5px 0 auto; width: 100%; height: 96px; overflow: visible; pointer-events: none; }.hobby-trail { z-index: -1; }.hobby-flight-layer { z-index: 2; }
.hobby-trail path { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: .018 .014; vector-effect: non-scaling-stroke; }
.hobby-traveler,.hobby-landed-disc { fill: var(--copper); stroke: var(--paper); stroke-width: 2.5; vector-effect: non-scaling-stroke; }.traveler-disc .disc-body { fill:var(--art-hot);stroke:var(--art-warm); }.traveler-disc .disc-rim { fill:none;stroke:color-mix(in srgb,var(--art-hot) 65%,var(--ink));stroke-width:1.3; }.traveler-disc .disc-mark { fill:var(--scene-celestial);stroke:none; }.hobby-landed-disc { display: none; }
.hobby-thrower { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 25px 60px; animation: thrower-exit 24s linear infinite; }.hobby-thrower path { fill: none; }.thrower-body { transform-box: view-box; transform-origin: 25px 47px; animation: drive-lean 24s ease-out infinite; }.throwing-arm { transform-box: view-box; transform-origin: 25px 47px; animation: disc-throw 24s cubic-bezier(.2,.8,.3,1) infinite,throw-arm-visibility 24s linear infinite; }.walking-arm { opacity:0;animation:walk-arm-visibility 24s linear infinite; }.thrower-leg { transform-box: view-box; transform-origin: 25px 60px; }.thrower-leg-front { animation: walk-front 24s ease-in-out infinite; }.thrower-leg-back { animation: walk-back 24s ease-in-out infinite; }
.person-neck,.person-face,.person-clothes,.girl-clothes,.person-shoes { fill:none;stroke-linecap:round;stroke-linejoin:round; }.person-neck,.person-face,.person-hand { stroke:#9b674d; }.person-hand { fill:#d5a17d;stroke-width:.8; }.person-clothes { stroke:#86b2bd;stroke-width:1; }.girl-clothes { stroke:#a8c49a;stroke-width:1; }.person-shoes { stroke:#293b48;stroke-width:2.2; }
.hobby-thrower .man-hair-detail,.hobby-cheerers .man-hair-detail { fill:none;stroke:#7d4435;stroke-width:.75; }
.hobby-thrower .person-skin { fill: #d5a17d; stroke: #9b674d; }.hobby-thrower .man-hair { fill: #d99068; stroke: #d99068; }.hobby-thrower .man-beard { stroke: #8b553d; stroke-width: 1.3; }.hobby-thrower .man-glasses { fill: #111; stroke: #111; stroke-width: .8; }.hobby-thrower .thrower-body { fill: #527f91; stroke: #86b2bd; }.hobby-thrower .throwing-arm,.hobby-thrower .walking-arm { stroke:#d5a17d; }.throwing-hand { transform-box:view-box;transform-origin:25px 47px;animation:disc-throw 24s cubic-bezier(.2,.8,.3,1) infinite,throw-arm-visibility 24s linear infinite; }.walking-hand { opacity:0;animation:walk-arm-visibility 24s linear infinite; }.hobby-thrower .thrower-leg { stroke: #293b48; stroke-width: 2.8; }.walking-girl { opacity: 0; animation: companion-join 24s ease-in-out infinite; }.hobby-thrower .girl-hair { fill: #4a2d25; stroke: #4a2d25; }.hobby-thrower .girl-jacket { fill: #78996d; stroke: #a8c49a; }.hobby-thrower .girl-arms { stroke: #d5a17d; }.hobby-thrower .girl-legs { stroke: #343845; stroke-width: 2.6; }.walking-dog { opacity: 0; animation: dog-join 24s ease-in-out infinite; }.hobby-thrower .dog-body { fill: #f5f2e9; stroke: #f5f2e9; }.hobby-thrower .dog-head { fill: #141919; stroke: #141919; }.hobby-thrower .dog-eye { fill:#f5f2e9;stroke:none; }.hobby-thrower .dog-details,.hobby-thrower .dog-feathering { fill:none;stroke:#f5f2e9;stroke-width:1.25; }
.traveler-disc { transform-box:fill-box;transform-origin:center;animation:traveler-disc-form 24s linear infinite; }.traveler-ufo { opacity: 0; animation: traveler-ufo-form 24s linear infinite; }.traveler-ufo .ufo-shell { fill:var(--art-panel);stroke:var(--art-hot);stroke-width:2.5;transform-box:fill-box;transform-origin:center;scale:.58; }.traveler-ufo .ufo-canopy { fill:var(--art-success);stroke:var(--art-violet);stroke-width:1.2; }.traveler-ufo-lights { fill:var(--art-warm);stroke:none;animation:traveler-ufo-lights 1.8s steps(3,end) infinite; }.traveler-ufo .ufo-beam { fill: color-mix(in srgb,var(--copper) 45%,transparent); stroke: var(--copper); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center top; animation: ufo-beam-cycle 24s linear infinite; }
.route-bigfoot { fill: #6f4b35; stroke: #d9b18c; stroke-width: 1.8; opacity: 0; scale:1; transform-box:view-box; transform-origin:center; vector-effect: non-scaling-stroke; animation: route-bigfoot-visibility 24s linear infinite,route-rider-depth 24s linear infinite; }
.bigfoot-anatomy { transform-box: fill-box; transform-origin: center bottom; animation: bigfoot-ride-posture 24s ease-in-out infinite; }.bigfoot-leg { transform-box: view-box; transform-origin: 0 13px; }.bigfoot-leg-left { animation: bigfoot-pedal-left 24s ease-in-out infinite; }.bigfoot-leg-right { animation: bigfoot-pedal-right 24s ease-in-out infinite; }.bigfoot-arms { animation: bigfoot-grip 24s ease-in-out infinite; transform-box: view-box; transform-origin: 0 7px; }
.route-bike { fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; scale:1; transform-box:view-box; transform-origin:center; vector-effect: non-scaling-stroke; animation: route-bike-visibility 24s linear infinite,route-rider-depth 24s linear infinite; }.route-bike-tires { stroke:var(--ink); }.route-bike-frame { stroke:var(--art-hot); }.route-bike-saddle { stroke:var(--art-warm); }.route-bike-wheel { stroke:var(--art-cool);transform-box:fill-box;transform-origin:center;animation:hobby-pedal 1.2s linear infinite; }
.route-camp-tree-foreground { fill:var(--paper);stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round;opacity:1;vector-effect:non-scaling-stroke;animation:route-tree-color 24s linear infinite; }
.hobby-cheerers { opacity:0;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;animation:cheerers-arrive 24s ease-out infinite; }.hobby-cheerers .person-skin { fill:#d5a17d;stroke:#9b674d; }.hobby-cheerers .man-hair { fill:#d99068;stroke:#d99068; }.hobby-cheerers .man-beard { fill:none;stroke:#8b553d; }.hobby-cheerers .man-glasses { fill:#111;stroke:#111;stroke-width:.7; }.hobby-cheerers .cheer-man-body { fill:#527f91;stroke:#86b2bd; }.hobby-cheerers .girl-hair { fill:#4a2d25;stroke:#4a2d25; }.hobby-cheerers .girl-jacket { fill:#78996d;stroke:#a8c49a; }.hobby-cheerers .cheer-arm,.hobby-cheerers .cheer-hand { transform-box:view-box; }.hobby-cheerers .cheer-arm { fill:none;stroke:#d5a17d;stroke-width:2.2; }.hobby-cheerers .cheer-arm-left,.hobby-cheerers .cheer-hand-left { transform-origin:4px 36px;animation:cheer-left 24s ease-in-out infinite; }.hobby-cheerers .cheer-arm-right,.hobby-cheerers .cheer-hand-right { transform-origin:12px 36px;animation:cheer-right 24s ease-in-out infinite; }.cheerer-girl .cheer-arm-left,.cheerer-girl .cheer-hand-left { transform-origin:24px 38px; }.cheerer-girl .cheer-arm-right,.cheerer-girl .cheer-hand-right { transform-origin:32px 38px; }.hobby-cheerers .cheer-legs { fill:none;stroke:#343845;stroke-width:2.4; }.hobby-cheerers .dog-body { fill:#f5f2e9;stroke:#f5f2e9; }.hobby-cheerers .dog-head { fill:#141919;stroke:#141919; }.hobby-cheerers .dog-eye { fill:#f5f2e9;stroke:none; }.hobby-cheerers .dog-details,.hobby-cheerers .dog-feathering { fill:none;stroke:#f5f2e9;stroke-width:1.2; }.cheerer-dog { animation:cheer-dog 24s ease-in-out infinite; }
.hobby-thrower .thrower-man>.person-skin,.hobby-cheerers .cheerer-man>.person-skin { stroke:none; }.hobby-thrower .thrower-man>.man-hair,.hobby-cheerers .cheerer-man>.man-hair { fill:#b96345;stroke:none; }
.hobby-thrower .thrower-man>.man-neck,.hobby-cheerers .cheerer-man>.man-neck { fill:#d5a17d;stroke:none; }
.beer-disc-handoff { opacity:0;fill:var(--copper);stroke:var(--paper);stroke-width:1.6;transform-box:view-box;transform-origin:23px 3px;animation:beer-disc-handoff 24s linear infinite; }.beer-disc-handoff path { fill:none; }.beer-tap { opacity:0;transform-box:view-box;transform-origin:23px 6px;animation:traveler-tap-form 24s linear infinite; }.hobby-route .beer-tap .tap-body { fill:var(--copper);stroke:var(--paper);stroke-width:2;animation:color-tap-head 24s linear infinite; }.tap-badge { fill:var(--art-hot);stroke:var(--art-warm);stroke-width:1; }.tap-badge-mark { fill:var(--art-warm);stroke:none; }.tap-hardware { fill:none;stroke:var(--art-cool);stroke-width:1.35; }.hobby-route .beer-tap .tap-stream { fill:none;stroke:var(--art-warm);stroke-width:2.5;stroke-dasharray:3 2;opacity:0;animation:tap-flow 1s linear infinite,tap-stream-visibility 24s linear infinite; }
.hobby-route ul { display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(.35rem,1.3vw,1rem); margin: 0; padding: 0; list-style: none; }
.hobby-route li { display: grid; justify-items: center; gap: .65rem; min-width: 0; color: var(--ink); font: 700 clamp(.66rem,1vw,.75rem)/1.2 var(--mono); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.hobby-hiking { animation: scene-hiking 24s linear infinite; }.hobby-camping { animation: scene-camping 24s linear infinite; }.hobby-cycling { animation: scene-cycling 24s linear infinite; }.hobby-disc-golf { animation: scene-disc-golf 24s linear infinite; }.hobby-craft-beer { animation: scene-craft-beer 24s linear infinite; }
.hobby-route li:nth-child(even) { translate: 0 1.6rem; }
.hobby-route li svg { width: clamp(3.3rem,5.5vw,4.25rem); padding: .65rem; overflow: visible; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.camp-star { transform-box: fill-box; transform-origin: center; animation: hobby-twinkle 3.6s ease-in-out infinite; }
.scene-night-only,.hike-aurora,.hike-moon,.moon-crater,.hike-stars,.camp-moon,.camp-sky-stars,.camp-star { visibility:hidden; }.scene-day-only { visibility:visible; }.hike-day-sun { fill:transparent;animation:hobby-rise 4s ease-in-out infinite,hike-day-sun-color 24s linear infinite; }.camp-day-sun { fill:transparent;animation:hobby-rise 4s ease-in-out infinite,camp-day-sun-color 24s linear infinite; }
.hike-night-sky { fill: var(--paper); stroke: currentColor; animation: alpine-sky-color 24s linear infinite; }.hike-aurora { fill: none; opacity: .7; stroke-width: 2.4; animation: alpine-aurora 5.5s ease-in-out infinite alternate,alpine-aurora-color 24s linear infinite; }.aurora-one { --aurora-active:var(--art-success); }.aurora-two { --aurora-active:var(--art-violet); animation-delay:-2.1s,0s; }.hike-moon { fill: var(--paper); stroke: currentColor; animation: alpine-moon-color 24s linear infinite; }.moon-crater,.hike-stars { stroke: currentColor; animation: alpine-stars 3.8s ease-in-out infinite,alpine-star-color 24s linear infinite; }.hike-snow { fill: var(--paper); stroke: currentColor; animation: alpine-snow-color 24s linear infinite; }.hike-pines { animation: color-pines 24s linear infinite; }
.bike-wheel, .bike-crank { transform-box: view-box; animation: hobby-pedal 5s linear infinite; }.bike-wheel-rear { transform-origin: 12px 34px; }.bike-wheel-front { transform-origin: 37px 34px; }.bike-crank { transform-origin: 25px 34px; animation-duration: 2.5s; }
.beer-foam,.beer-bubbles { opacity:0;animation:beer-content-visibility 24s linear infinite; }.beer-foam { animation:beer-content-visibility 24s linear infinite,beer-foam-color 24s linear infinite; }.beer-bubble { transform-box: fill-box; transform-origin: center; animation: hobby-bubble 3.2s ease-in infinite; }.bubble-two { animation-delay: 1.4s; }
@keyframes hobby-twinkle { 0%,100% { opacity: .45; scale: .78; } 50% { opacity: 1; scale: 1.12; } }
@keyframes hobby-rise { 0%,100% { translate: 0 1px; rotate: -4deg; } 50% { translate: 0 -2px; rotate: 4deg; } }
@keyframes hobby-pedal { to { rotate: 360deg; } }
@keyframes hike-day-sun-color { 0%,9%,100% { fill:transparent;stroke:currentColor; } 2%,7% { fill:var(--scene-celestial);stroke:var(--scene-celestial); } }
@keyframes camp-day-sun-color { 0%,8%,28%,100% { fill:transparent;stroke:currentColor; } 11%,25% { fill:var(--scene-celestial);stroke:var(--scene-celestial); } }
@keyframes traveler-disc-form { 0%,4%,40%,49%,69.3%,89.5% { opacity:1;scale:1;rotate:0deg; } 6%,38% { opacity:0;scale:1;rotate:0deg; } 49.6%,68.7% { opacity:0;scale:.7 .45;rotate:-8deg; } 91%,100% { opacity:0;scale:1;rotate:0deg; } }
@keyframes traveler-ufo-form { 0%,4%,40%,100% { opacity: 0; } 6%,38% { opacity: 1; } }
@keyframes traveler-ufo-lights { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes beer-disc-handoff { 0%,49%,69.3%,100% { opacity:0;scale:1;rotate:0deg; } 49.6% { opacity:1;scale:1;rotate:0deg; } 50.8%,66% { opacity:0;scale:.3 .16;rotate:-12deg; } 67.3% { opacity:1;scale:.3 .16;rotate:12deg; } 68.7% { opacity:1;scale:1;rotate:0deg; } }
@keyframes traveler-tap-form { 0%,49.6%,67.3%,100% { opacity:0;translate:0;scale:.3 .16;rotate:-12deg; } 50.8%,66% { opacity:1;translate:0;scale:1;rotate:0deg; } }
@keyframes ufo-beam-cycle { 0%,13%,24%,32%,38%,100% { opacity: 0; scale: .7 0; } 16%,22%,34%,36% { opacity: .72; scale: 1 1; } 20%,35% { opacity: .9; scale: 1 1; } }
@keyframes tap-flow { to { stroke-dashoffset: -7; } }
@keyframes tap-stream-visibility { 0%,51.2%,66%,100% { opacity:0; } 52%,65.5% { opacity:1; } }
@keyframes disc-throw { 0% { rotate: -110deg; } 1.5% { rotate: -145deg; } 3.5%,100% { rotate: 18deg; } }
@keyframes throw-arm-visibility { 0%,3.8% { opacity:1; } 4.6%,100% { opacity:0; } }
@keyframes walk-arm-visibility { 0%,3.8% { opacity:0; } 4.6%,100% { opacity:1; } }
@keyframes drive-counter { 0% { rotate: 34deg; } 3.5%,100% { rotate: -24deg; } }
@keyframes drive-lean { 0% { rotate: -8deg; } 2% { rotate: 13deg; } 4%,100% { rotate: -4deg; } }
@keyframes thrower-exit { 0%,5% { opacity: 1; translate: 0; } 7% { translate: 8px 0; } 9% { translate: 18px -1px; } 11% { opacity: .75; translate: 30px 0; } 14%,100% { opacity: 0; translate: 48px -5px; } }
@keyframes companion-join { 0%,3% { opacity:0;translate:-18px 1px; } 4%,11% { opacity:1;translate:4px 0; } 7%,10% { translate:4px -1px; } 14%,100% { opacity:0;translate:4px 0; } }
@keyframes dog-join { 0%,3.5% { opacity:0;translate:-15px 1px; } 4.5%,11% { opacity:1;translate:7px 0; } 7.5%,10.5% { translate:7px -1px; } 14%,100% { opacity:0;translate:7px 0; } }
@keyframes walk-front { 0%,5%,14%,100% { rotate: 0deg; } 7%,11% { rotate: -18deg; } 9%,13% { rotate: 18deg; } }
@keyframes walk-back { 0%,5%,14%,100% { rotate: 0deg; } 7%,11% { rotate: 18deg; } 9%,13% { rotate: -18deg; } }
@keyframes route-bigfoot-visibility { 0%,10%,24%,31%,52%,100% { opacity: 0; } 12%,18%,34%,46% { opacity: 1; } 21% { opacity: .35; } 50% { opacity: .18; } }
@keyframes route-bike-visibility { 0%,35%,52%,100% { opacity: 0; } 38%,46% { opacity: 1; } 50% { opacity: .18; } }
@keyframes route-rider-depth { 0%,38% { scale:1; } 46% { scale:.88; } 50%,100% { scale:.58; } }
@keyframes station-bike-visibility { 0%,34%,52%,100% { opacity: 1; } 37%,49% { opacity: .08; } }
@keyframes bigfoot-ride-posture { 0%,35%,52%,100% { translate:0;rotate:0deg; } 38%,50% { translate:-6px -8px;rotate:12deg; } }
@keyframes bigfoot-grip { 0%,35%,52%,100% { rotate:0deg; } 38%,50% { rotate:-8deg; } }
@keyframes bigfoot-pedal-left { 0%,35%,52%,100% { rotate:0deg; } 38% { rotate:-24deg; } 41% { rotate:24deg; } 44% { rotate:-24deg; } 47% { rotate:24deg; } 50% { rotate:-24deg; } }
@keyframes bigfoot-pedal-right { 0%,35%,52%,100% { rotate:0deg; } 38% { rotate:24deg; } 41% { rotate:-24deg; } 44% { rotate:24deg; } 47% { rotate:-24deg; } 50% { rotate:24deg; } }
@keyframes beer-fill { 0%,49% { opacity:0;scale:1 0; } 52% { opacity:.9;scale:1 .08; } 65%,100% { opacity:.94;scale:1 1; } }
@keyframes beer-content-visibility { 0%,51% { opacity:0; } 54%,100% { opacity:1; } }
@keyframes cheerers-arrive { 0%,87% { opacity:0;translate:-18px 5px; } 92%,100% { opacity:1;translate:0; } }
@keyframes cheer-left { 0%,88% { rotate:24deg; } 92%,94%,98%,100% { rotate:-16deg; } 93%,96%,99% { rotate:8deg; } }
@keyframes cheer-right { 0%,88% { rotate:-24deg; } 92%,94%,98%,100% { rotate:16deg; } 93%,96%,99% { rotate:-8deg; } }
@keyframes cheer-dog { 0%,88% { translate:-6px 3px; } 92%,96%,100% { translate:0; } 94%,98% { translate:0 -2px; } }
@keyframes scene-hiking { 0%,9%,100% { color: var(--ink); } 2%,7% { color: var(--copper); } }
@keyframes scene-camping { 0%,8%,28%,100% { color: var(--ink); } 11%,25% { color: var(--copper); } }
@keyframes scene-cycling { 0%,23%,39%,100% { color: var(--ink); } 26%,36% { color: var(--copper); } }
@keyframes scene-craft-beer { 0%,46%,71%,100% { color: var(--ink); } 50%,68% { color: var(--copper); } }
@keyframes scene-disc-golf { 0%,79%,100% { color: var(--ink); } 84%,97% { color: var(--copper); } }
.hobby-route .beer-liquid { fill:currentColor;stroke:none;transform-box:view-box;transform-origin:24px 41px;animation:beer-fill 24s linear infinite,beer-liquid-color 24s linear infinite; }.hobby-route .beer-fill-foam { fill:currentColor;stroke:none;animation:beer-foam-color 24s linear infinite; }.hobby-route .pint-outline { fill: none; }
.basket-caught-disc { fill:var(--art-hot);stroke:var(--art-warm);stroke-width:1.4;opacity:0;animation:basket-disc-catch 24s linear infinite; }
.camp-night-sky,.cycle-sky,.disc-sky { fill:var(--paper);stroke:currentColor; }.camp-night-sky { animation:camp-sky-color 24s linear infinite; }.camp-moon { animation:camp-moon-color 24s linear infinite; }.camp-sky-stars { animation:camp-stars-color 24s linear infinite; }.camp-ground { animation:camp-ground-color 24s linear infinite; }.camp-fire { animation:camp-fire-color 24s linear infinite,hobby-rise 2.2s ease-in-out infinite; }.cycle-sky { animation:cycle-sky-color 24s linear infinite; }.cycle-sun { animation:cycle-sun-color 24s linear infinite,hobby-rise 4.6s ease-in-out infinite; }.cycle-cloud { animation:cycle-cloud-color 24s linear infinite; }.cycle-hills,.cycle-pines { animation:cycle-land-color 24s linear infinite; }.disc-sky { animation:disc-sky-color 24s linear infinite; }.disc-sun { animation:disc-sun-color 24s linear infinite,hobby-rise 4.2s ease-in-out infinite; }.disc-cloud { animation:disc-cloud-color 24s linear infinite; }.disc-course { animation:disc-course-color 24s linear infinite; }.disc-flight-arc { stroke-dasharray:2 3;animation:disc-arc-color 24s linear infinite; }
.hobby-route .hike-mountains { animation: color-lichen 24s linear infinite; }.hobby-route .hike-sun { animation: hobby-rise 4s ease-in-out infinite,color-sun 24s linear infinite; }.hobby-route .camp-tent { animation: color-tent 24s linear infinite,color-tent-fill 24s linear infinite; }.hobby-route .camp-details { animation:color-camp-details 24s linear infinite; }.hobby-route .camp-tree { animation: color-tree 24s linear infinite; }.hobby-route .camp-star { animation: hobby-twinkle 3.6s ease-in-out infinite,color-star 24s linear infinite; }.hobby-route .camp-lantern { animation:color-lantern 24s linear infinite; }.hobby-route .bike-frame { animation:color-bike-frame 24s linear infinite; }.hobby-route .bike-tires { animation:color-bike-tires 24s linear infinite; }.hobby-route .bike-details { animation:color-bike-details 24s linear infinite; }.hobby-route .bike-wheel { animation:hobby-pedal 5s linear infinite,color-bike-spokes 24s linear infinite; }.hobby-route .bike-crank { animation:hobby-pedal 2.5s linear infinite,color-bike-crank 24s linear infinite; }.hobby-route .pint-outline { animation:color-glass 24s linear infinite; }.hobby-route .beer-details { animation:color-glass-base 24s linear infinite; }.hobby-route .disc-pin { animation: color-flag 24s linear infinite; }.hobby-route .disc-basket,.hobby-route .disc-basket-rim { animation: color-basket 24s linear infinite; }
.hobby-cycling > svg { animation: station-bike-visibility 24s linear infinite; }
@keyframes color-lichen { 0%,9%,100% { stroke: currentColor; } 2%,7% { stroke: var(--lichen); } } @keyframes color-sun { 0%,9%,100% { stroke: currentColor; } 2%,7% { stroke: var(--scene-celestial); } }
@keyframes color-pines { 0%,9%,100% { stroke:currentColor; } 2%,7% { stroke:var(--art-forest); } } @keyframes alpine-stars { 0%,100% { opacity:.38; } 50% { opacity:1; } } @keyframes alpine-aurora { from { opacity:.48;translate:0 1px; } to { opacity:.88;translate:0 -1px; } }
@keyframes alpine-sky-color { 0%,9%,100% { fill:var(--paper);stroke:currentColor; } 2%,7% { fill:var(--scene-sky);stroke:var(--scene-sky-edge); } } @keyframes alpine-aurora-color { 0%,9%,100% { stroke:currentColor; } 2%,7% { stroke:var(--aurora-active); } } @keyframes alpine-moon-color { 0%,9%,100% { fill:var(--paper);stroke:currentColor; } 2%,7% { fill:var(--scene-celestial);stroke:var(--scene-celestial); } } @keyframes alpine-star-color { 0%,9%,100% { stroke:currentColor; } 2%,7% { stroke:var(--scene-celestial); } } @keyframes alpine-snow-color { 0%,9%,100% { fill:var(--paper);stroke:currentColor; } 2%,7% { fill:var(--snow);stroke:var(--snow); } }
@keyframes color-tent { 0%,8%,28%,100% { stroke: currentColor; } 11%,25% { stroke: var(--art-hot); } } @keyframes color-tree { 0%,8%,28%,100% { stroke: currentColor; } 11%,25% { stroke: var(--art-forest); } } @keyframes color-star { 0%,8%,28%,100% { stroke: currentColor; } 11%,25% { stroke: var(--scene-celestial); } }
@keyframes color-tent-fill { 0%,8%,28%,100% { fill:transparent; } 11%,25% { fill:color-mix(in srgb,var(--art-hot) 45%,var(--paper)); } } @keyframes color-camp-details { 0%,8%,28%,100% { stroke:currentColor; } 11%,25% { stroke:var(--art-warm); } } @keyframes color-lantern { 0%,8%,28%,100% { stroke:currentColor;fill:transparent; } 11%,25% { stroke:var(--art-warm);fill:var(--art-hot); } }
@keyframes camp-sky-color { 0%,8%,28%,100% { fill:var(--paper);stroke:currentColor; } 11%,25% { fill:var(--scene-sky);stroke:var(--scene-sky-edge); } } @keyframes camp-moon-color { 0%,8%,28%,100% { fill:transparent;stroke:currentColor; } 11%,25% { fill:var(--scene-celestial);stroke:var(--scene-celestial); } } @keyframes camp-stars-color { 0%,8%,28%,100% { stroke:currentColor; } 11%,25% { stroke:var(--scene-celestial); } } @keyframes camp-ground-color { 0%,8%,28%,100% { stroke:currentColor; } 11%,25% { stroke:var(--art-forest); } } @keyframes camp-fire-color { 0%,8%,28%,100% { stroke:currentColor; } 11%,25% { stroke:var(--art-hot); } }
@keyframes color-bike-frame { 0%,23%,39%,100% { stroke:currentColor; } 26%,36% { stroke:var(--art-hot); } } @keyframes color-bike-tires { 0%,23%,39%,100% { stroke:currentColor; } 26%,36% { stroke:var(--ink); } } @keyframes color-bike-details { 0%,23%,39%,100% { stroke:currentColor; } 26%,36% { stroke:var(--art-forest); } } @keyframes color-bike-spokes { 0%,23%,39%,100% { stroke:currentColor; } 26%,36% { stroke:var(--art-cool); } } @keyframes color-bike-crank { 0%,23%,39%,100% { stroke:currentColor; } 26%,36% { stroke:var(--art-warm); } }
@keyframes cycle-sky-color { 0%,23%,39%,100% { fill:var(--paper);stroke:currentColor; } 26%,36% { fill:var(--scene-sky);stroke:var(--scene-sky-edge); } } @keyframes cycle-sun-color { 0%,23%,39%,100% { fill:transparent;stroke:currentColor; } 26%,36% { fill:var(--scene-celestial);stroke:var(--scene-celestial); } } @keyframes cycle-cloud-color { 0%,23%,39%,100% { stroke:currentColor; } 26%,36% { stroke:var(--art-cool); } } @keyframes cycle-land-color { 0%,23%,39%,100% { stroke:currentColor; } 26%,36% { stroke:var(--art-forest); } }
@keyframes color-glass { 0%,46%,71%,100% { stroke:currentColor; } 50%,68% { stroke:var(--art-cool); } } @keyframes color-glass-base { 0%,46%,71%,100% { stroke:currentColor; } 50%,68% { stroke:var(--art-violet); } }
@keyframes color-tap-head { 0%,46%,71%,100% { fill:var(--copper);stroke:var(--paper); } 50%,68% { fill:var(--art-panel);stroke:var(--art-warm); } }
@keyframes beer-liquid-color { 0%,46%,71%,100% { fill:currentColor; } 50%,68% { fill:var(--art-warm); } } @keyframes beer-foam-color { 0%,46%,71%,100% { fill:currentColor;stroke:currentColor; } 50%,68% { fill:color-mix(in srgb,var(--art-warm) 35%,var(--art-on-panel));stroke:color-mix(in srgb,var(--art-warm) 35%,var(--art-on-panel)); } }
@keyframes route-tree-color { 0%,9%,30%,100% { stroke:var(--ink); } 11%,28% { stroke:var(--art-forest); } }
@keyframes color-flag { 0%,79%,100% { stroke:currentColor; } 84%,97% { stroke:var(--scene-celestial); } } @keyframes color-basket { 0%,79%,100% { stroke:currentColor; } 84%,97% { stroke:var(--art-hot); } }
@keyframes disc-sky-color { 0%,79%,100% { fill:var(--paper);stroke:currentColor; } 84%,97% { fill:var(--scene-sky);stroke:var(--scene-sky-edge); } } @keyframes disc-sun-color { 0%,79%,100% { fill:transparent;stroke:currentColor; } 84%,97% { fill:var(--scene-celestial);stroke:var(--scene-celestial); } } @keyframes disc-cloud-color { 0%,79%,100% { stroke:currentColor; } 84%,97% { stroke:var(--art-cool); } } @keyframes disc-course-color { 0%,79%,100% { stroke:currentColor; } 84%,97% { stroke:var(--art-forest); } } @keyframes disc-arc-color { 0%,79%,100% { stroke:currentColor; } 84%,97% { stroke:var(--art-violet); } }
@keyframes basket-disc-catch { 0%,89.5% { opacity:0; } 91%,99.9% { opacity:1; } 100% { opacity:0; } }
@keyframes hobby-bubble { 0% { opacity: 0; translate: 0 4px; } 35% { opacity: 1; } 100% { opacity: 0; translate: 0 -8px; } }
.site-footer { display: flex; justify-content: space-between; align-items:center; gap: 2rem; padding-block: 2rem; border-top: 1px solid var(--ink); font-size: .76rem; font-weight: 700; view-transition-name: site-footer; }.site-footer p { margin: 0; }.site-footer a { text-underline-offset: .25rem; }
.shortcut-hint { margin-inline:auto; color:var(--muted); font:700 .66rem/1.4 var(--mono); letter-spacing:.04em; }
.shortcut-hint kbd { margin-inline:.12rem; }
.inner-page { padding-block: clamp(5rem, 10vw, 9rem); }.page-intro { max-width: 950px; }.page-intro .lede { max-width: 43rem; }.about-intro-note { max-width: 35rem; margin: 2.3rem 0 0 auto; padding-left: 1.2rem; border-left: 3px solid var(--copper); color: var(--muted); font: 400 clamp(1rem,1.3vw,1.12rem)/1.6 var(--serif); }.about-grid { display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(3rem, 8vw, 8rem); margin-top: 8rem; padding-top: 4rem; border-top: 1px solid var(--line); }.about-heading { position: sticky; top: 2rem; align-self: start; }.about-heading h2 { max-width: 10ch; }.about-story { min-width: 0; }.about-prologue { padding-bottom: 3.5rem; border-bottom: 1px solid var(--line); }.about-prologue p { max-width: 58ch; margin: 0 0 1.25rem; color: var(--muted); font-size: clamp(1.08rem,1.4vw,1.22rem); line-height: 1.65; }.about-prologue p:first-child { color: var(--ink); font-family: var(--serif); font-size: clamp(1.35rem,2vw,1.75rem); line-height: 1.45; }.about-principles { position: relative; }.about-principles::before { content: ''; position: absolute; top: 0; bottom: 0; left: 7px; width: 1px; background: var(--line); }.about-principles article { position: relative; padding: 2.7rem 0 2.7rem 3rem; border-bottom: 1px solid var(--line); }.about-principles article::before { content: ''; position: absolute; z-index: 1; top: 3rem; left: 0; width: 15px; aspect-ratio: 1; border: 3px solid var(--paper); border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 1px var(--copper); }.about-principles .eyebrow { margin-bottom: .55rem; color: var(--copper); }.about-principles h3 { margin: 0; font: 400 clamp(1.6rem,2.4vw,2.15rem)/1.1 var(--serif); letter-spacing: -.025em; }.about-principles article > p:last-child { max-width: 58ch; margin: .8rem 0 0; color: var(--muted); line-height: 1.65; }.about-field-notes { display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(3rem,8vw,8rem); padding-block: clamp(5rem,9vw,8rem); border-bottom: 1px solid var(--line); }.about-field-notes h2 { max-width: 10ch; margin: 0; font: 400 clamp(2.2rem,4.2vw,4rem)/1.02 var(--serif); letter-spacing: -.04em; }.about-field-notes dl { margin: 0; }.about-field-notes dl div { display: grid; grid-template-columns: minmax(8rem,.55fr) 1fr; gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }.about-field-notes dt { color: var(--copper); font: 700 .72rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }.about-field-notes dd { margin: 0; color: var(--muted); line-height: 1.6; }.prose h3 { margin: 0 0 .7rem; font: 400 clamp(1.65rem,2vw,1.9rem)/1.12 var(--serif); letter-spacing: -.018em; }.prose p { max-width: 65ch; margin: 0 0 3rem; color: var(--muted); font-size: clamp(1.03rem,.98rem + .2vw,1.1rem); line-height: 1.68; }.availability { margin-top: 5rem; padding: clamp(2rem, 6vw, 5rem); background: var(--ink); color: var(--snow); }.availability h2 { max-width: 800px; }.availability .button { margin-top: 2.5rem; border-color: var(--snow); background: var(--snow); color: var(--ink); }.availability .button:hover { color: var(--snow); background: var(--copper); border-color: var(--copper); }
.index-list { margin-top: 7rem; border-top: 1px solid var(--ink); }.index-list a { display: grid; grid-template-columns: 1fr auto 2rem; gap: 2rem; align-items: center; padding: 1.8rem .5rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .2s, background .2s; }.index-list a:hover { padding-inline: 1.2rem; background: var(--snow); }.index-list span { display: grid; gap: .35rem; }.index-list b { font: 400 clamp(1.4rem,3vw,2.25rem)/1.08 var(--serif); letter-spacing: -.025em; }.index-list small { color: var(--muted); font-size: .84rem; line-height: 1.45; }.index-list i { color: var(--muted); font: normal 700 .73rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }.index-list strong { font-size: 1.3rem; }
.index-list span em { width:max-content; margin-top:.2rem; padding:.24rem .48rem; border:1px solid color-mix(in srgb,var(--copper) 42%,var(--line)); border-radius:999px; color:var(--copper); font:normal 700 .61rem/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.case-page { padding-block: 2.5rem clamp(6rem, 11vw, 10rem); }
.breadcrumb { justify-content: flex-start; gap: .7rem; color: var(--muted); font: 700 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.breadcrumb { view-transition-name: case-breadcrumb; }
.breadcrumb a { text-underline-offset: .25rem; }
.case-intro { padding-block: clamp(4rem, 9vw, 8rem); }
.case-intro > .eyebrow { view-transition-name: case-meta; }
.case-intro h1 { max-width: 970px; }
.case-intro h1 { view-transition-name: case-title; }
.case-intro .lede { max-width: 760px; }
.case-intro .lede { view-transition-name: case-lede; }
.case-thesis { display: grid; grid-template-columns: minmax(8rem,.35fr) 1fr; gap: clamp(1rem,3vw,2.5rem); max-width: 52rem; margin: 2rem 0 0; padding: 1.15rem 0; border-block: 1px solid var(--line); color: var(--ink); font: 400 clamp(1.05rem,1.2vw,1.18rem)/1.55 var(--serif); }
.case-thesis span { padding-top: .2rem; color: var(--copper); font: 700 .7rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.case-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 4rem 0 0; border-block: 1px solid var(--line); }
.case-facts { view-transition-name: case-facts; }
.case-facts div { padding: 1.25rem 1rem 1.25rem 0; }
.case-facts dt, .case-next > span { margin-bottom: .45rem; color: var(--muted); font: 700 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.case-facts dd { margin: 0; font-size: .95rem; }.case-facts a { text-underline-offset: .25rem; }
.case-route { --case-progress: 0; position: sticky; z-index: 5; top: 0; margin: 0; padding-block: .35rem .75rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--paper) 94%,transparent); box-shadow: 0 10px 24px color-mix(in srgb,var(--ink) 7%,transparent); backdrop-filter: blur(10px); }
.case-route { view-transition-name: case-route; }
.case-route svg { width: 100%; height: clamp(7rem,14vw,10rem); overflow: visible; }
.case-route-line,.case-route-progress { fill: none; stroke-linecap: round; }
.case-route-line { stroke: var(--line); stroke-width: 4; }
.case-route-progress { stroke: var(--copper); stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--case-progress)); transition: stroke-dashoffset .55s cubic-bezier(.16,1,.3,1); }
.case-route circle { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.case-route text { fill: var(--ink); font: 700 12px var(--mono); letter-spacing: 1.5px; }
.case-route circle,.case-route text { transform-box: fill-box; transform-origin: center; }
.case-route a { cursor: pointer; outline: none; }
.case-route a circle,.case-route a text { opacity: 0; animation: case-route-node .42s cubic-bezier(.2,.8,.2,1) forwards; transition: fill .2s, stroke .2s, scale .2s; }
.case-route a:nth-of-type(1) circle,.case-route a:nth-of-type(1) text { animation-delay: .5s; }
.case-route a:nth-of-type(2) circle,.case-route a:nth-of-type(2) text { animation-delay: .72s; }
.case-route a:nth-of-type(3) circle,.case-route a:nth-of-type(3) text { animation-delay: .94s; }
.case-route a:nth-of-type(4) circle,.case-route a:nth-of-type(4) text { animation-delay: 1.16s; }
.case-route a:hover circle,.case-route a:focus circle,.case-route a[aria-current] circle { fill: var(--copper); stroke: var(--copper); scale: 1.16; }
.case-route a:hover text,.case-route a:focus text,.case-route a[aria-current] text { fill: var(--copper); }
.case-route a[data-visited] circle { stroke: var(--copper); }
.case-route a:focus-visible circle { stroke: var(--ink); stroke-width: 7; }
.case-story { counter-reset: case-chapter; }
.case-story section { position: relative; scroll-margin-top: clamp(8.5rem,16vw,12rem); scroll-snap-align:start; scroll-snap-stop:normal; }
.case-story section::before { content: ''; position: absolute; top: clamp(4rem,8vw,7rem); bottom: clamp(4rem,8vw,7rem); left: -14px; width: 4px; background: var(--copper); opacity: 0; transition: opacity .25s ease; }
.case-story section.is-active::before { opacity: 1; }
.case-story section.is-active > .eyebrow { color: var(--copper); }
.case-story > section { counter-increment: case-chapter; }
.case-story > section > .eyebrow::before { content: "0" counter(case-chapter) " / 04"; display: block; margin-bottom: .55rem; color: var(--muted); letter-spacing: .08em; }
@keyframes case-route-node { from { opacity: 0; scale: .72; } to { opacity: 1; scale: 1; } }
.case-story > section { display: grid; grid-template-columns: .55fr 1.25fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--line); }
.case-story h2 { margin: 0; font: 400 clamp(2rem,4vw,3.7rem)/1.06 var(--serif); letter-spacing: -.034em; }
.case-story .prose p { margin-bottom: 1.5rem; }.case-story code { font-family: var(--mono); font-size: .88em; }
.case-next { display: grid; grid-template-columns: .55fr 1fr; justify-content: initial; align-items: baseline; gap: 2rem; padding-top: clamp(4rem, 8vw, 7rem); }
.case-next { view-transition-name: case-next; }
.case-next a { font: 400 clamp(2rem,5vw,4.4rem)/1.04 var(--serif); text-decoration: none; letter-spacing: -.035em; }.case-next a:hover { color: var(--copper); }
.work-section, .toolbox, .current, .contact, .about-grid, .availability, .index-list { content-visibility: auto; contain-intrinsic-block-size: auto 800px; }
@supports (animation-timeline: view()) {
  [data-reveal]:not(.hero-copy):not(.signal-map) { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 22%; }
  @keyframes reveal { from { opacity: .01; translate: 0 20px; } to { opacity: 1; translate: 0; } }
  .project { view-timeline-name:--project-card; view-timeline-axis:block; }
  .project-visual { animation:project-visual-scroll linear both; animation-timeline:--project-card; animation-range:entry 0% cover 34%; transform-origin:50% 65%; }
  .project-copy { animation:project-copy-scroll linear both; animation-timeline:--project-card; animation-range:entry 8% cover 38%; }
  .principles { view-timeline-name:--principles; view-timeline-axis:block; }
  .principles li { animation:principle-scroll linear both; animation-timeline:--principles; }
  .principles li:nth-child(1) { animation-range:entry 4% cover 22%; }
  .principles li:nth-child(2) { animation-range:entry 8% cover 26%; }
  .principles li:nth-child(3) { animation-range:entry 12% cover 30%; }
  .toolbox dl div,.about-principles article,.about-field-notes dl div,.index-list a { animation:detail-row-scroll linear both; animation-timeline:view(block); animation-range:entry 5% cover 24%; }
  @keyframes project-visual-scroll { from { opacity:.55; translate:0 18px; scale:.975; } to { opacity:1; translate:0; scale:1; } }
  @keyframes project-copy-scroll { from { opacity:.45; translate:0 12px; } to { opacity:1; translate:0; } }
  @keyframes principle-scroll { from { opacity:.35; translate:-10px 0; } to { opacity:1; translate:0; } }
  @keyframes detail-row-scroll { from { opacity:.4; translate:12px 0; } to { opacity:1; translate:0; } }
  .case-story > section { view-timeline-name:--case-chapter; view-timeline-axis:block; }
  .case-story > section > .eyebrow,.case-story > section > h2,.case-story > section > .prose { animation:case-chapter-reveal linear both; animation-timeline:--case-chapter; }
  .case-story > section > .eyebrow { animation-range:entry 2% cover 22%; }
  .case-story > section > h2 { animation-range:entry 5% cover 27%; }
  .case-story > section > .prose { animation-range:entry 8% cover 32%; }
  @keyframes case-chapter-reveal { from { opacity:.28; translate:0 18px; } to { opacity:1; translate:0; } }
}
@media (min-width:781px) and (min-height:700px) {
  html:has(.case-story) { scroll-snap-type:y proximity; scroll-padding-top:clamp(8.5rem,16vw,12rem); }
}
@view-transition { navigation: auto; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root),::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: .24s cubic-bezier(.4,0,1,1) both page-out; }
::view-transition-new(root) { animation: .52s .04s cubic-bezier(.16,1,.3,1) both page-in; }
::view-transition-group(site-mark),::view-transition-group(site-nav),::view-transition-group(site-footer),::view-transition-group(case-breadcrumb),::view-transition-group(case-meta),::view-transition-group(case-title),::view-transition-group(case-lede),::view-transition-group(case-facts),::view-transition-group(case-route),::view-transition-group(case-next) { animation-duration: .58s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
::view-transition-new(site-mark) { animation: .56s .03s cubic-bezier(.2,1.35,.35,1) both mark-in; }
::view-transition-old(case-breadcrumb),::view-transition-old(case-meta),::view-transition-old(case-title),::view-transition-old(case-lede),::view-transition-old(case-facts),::view-transition-old(case-route),::view-transition-old(case-next) { animation: .2s cubic-bezier(.4,0,1,1) both case-out; }
::view-transition-new(case-breadcrumb) { animation: .4s .03s cubic-bezier(.16,1,.3,1) both case-in; }
::view-transition-new(case-meta) { animation: .42s .06s cubic-bezier(.16,1,.3,1) both case-in; }
::view-transition-new(case-title) { animation: .5s .09s cubic-bezier(.16,1,.3,1) both case-in; }
::view-transition-new(case-lede) { animation: .46s .13s cubic-bezier(.16,1,.3,1) both case-in; }
::view-transition-new(case-facts) { animation: .48s .16s cubic-bezier(.16,1,.3,1) both case-in; }
::view-transition-new(case-route) { animation: .58s .19s cubic-bezier(.2,1.25,.35,1) both route-in; }
::view-transition-new(case-next) { animation: .46s .16s cubic-bezier(.16,1,.3,1) both case-in; }
::view-transition-group(case-route) { overflow: clip; }
@keyframes page-out { to { opacity: 0; translate: 0 -8px; scale: .992; } }
@keyframes page-in { from { opacity: 0; translate: 0 16px; scale: .988; } }
@keyframes case-out { to { opacity: 0; translate: -10px 0; scale: .99; } }
@keyframes case-in { from { opacity: 0; translate: 22px 0; } }
@keyframes mark-in { from { opacity: 0; scale: .82; rotate: -7deg; } 72% { scale: 1.04; rotate: 1deg; } }
@keyframes route-in { from { opacity: 0; translate: 26px 4px; scale: .975; rotate: -.35deg; } 72% { scale: 1.008; rotate: .1deg; } }
@media (max-width: 780px) {
  :root { --wrap: min(100% - 28px, 680px); }
  .site-header { min-height: 76px; }.wordmark { width: 42px; } nav { gap: 1rem; } nav a { font-size: .78rem; }.nav-cta { padding: .48rem .68rem; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-block: 4.5rem 4rem; }.signal-map { margin-top: 2rem; }.signal-map figcaption { margin-top: -.5rem; }
  .principles { grid-template-columns: 1fr; gap: 1rem; }.principles ul { flex-direction: column; gap: .65rem; }
  .section-heading { grid-template-columns: 1fr; }.section-heading .eyebrow { margin-bottom: 0; }.project-list { grid-template-columns: 1fr; }.project-featured { grid-column: auto; }.project-featured .project-visual { aspect-ratio: 1.55 / 1; }
  .toolbox, .current, .contact, .hobbies, .about-grid, .about-field-notes { grid-template-columns: 1fr; }.toolbox,.current,.contact { gap: 2rem; }.hobbies { gap: 2rem; }.about-heading { position: static; }.about-heading h2,.about-field-notes h2 { max-width: 14ch; }.about-field-notes { gap: 2rem; }
  .hobbies-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; align-items: start; }.hobbies-heading .eyebrow { margin: .3rem 0 0; }
  .hobby-trail,.hobby-flight-layer { top: 0; }.hobby-route ul { grid-template-columns: repeat(5,1fr); }.hobby-route li:nth-child(even) { translate: none; }
  .index-list a { grid-template-columns: 1fr 1.5rem; gap: 1rem; }.index-list i { grid-row: 2; }.index-list strong { grid-column: 2; grid-row: 1 / span 2; }
  .case-thesis { grid-template-columns: 1fr; gap: .45rem; }.case-facts { grid-template-columns: 1fr; }.case-facts div + div { border-top: 1px solid var(--line); }
  .case-story > section { grid-template-columns: 1fr; gap: 1.5rem; }.case-story > section .eyebrow { margin-bottom: 0; }.case-next { grid-template-columns: 1fr; gap: .8rem; }
}
@media (max-width: 430px) { .site-header nav a:first-child { display: none; } h1 { font-size: clamp(3.1rem, 16vw, 4.6rem); }.hero-actions { align-items: flex-start; flex-direction: column; }.signal-map { margin-inline: -8px; }.palette-panels { width:min(18rem,calc(100vw - 2rem));grid-template-columns:1fr;max-height:calc(100dvh - 6rem);overflow-y:auto; }.palette-picker .theme-options { border-top:1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; scroll-snap-type:none!important; }.case-story section { scroll-snap-align:none; }.project-visual,.project-copy,.principles li,.toolbox dl div,.about-principles article,.about-field-notes dl div,.index-list a,.case-story>section>.eyebrow,.case-story>section>h2,.case-story>section>.prose { animation:none!important; opacity:1!important; translate:none!important; scale:1!important; }.hobby-traveler,.route-bigfoot,.route-bike,.ddns-packets { display: none; }.visual-shield .check { stroke-dashoffset: 0; }.hobby-landed-disc { display: block; }.hobby-route li,.hobby-route li > svg,.hobby-thrower,.throwing-arm { animation: none; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation-duration: .01ms !important; animation-delay: 0s !important; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) [data-palette-option] { --option-paper:var(--option-night-paper);--option-ink:var(--option-night-ink);--option-accent:var(--option-night-accent);--option-terrain:var(--option-night-terrain);--option-water:var(--option-night-water); }
  :root:not([data-theme]) { color-scheme: dark; --paper:#10232f;--snow:#152c39;--ink:#eaf6fa;--muted:#b5cbd4;--copper:#70bce2;--lichen:#83b7aa;--line:#385767;--scene-sky:#101936;--scene-sky-edge:#496a82;--scene-celestial:#f4e7b2;--art-hot:#ff7d91;--art-warm:#f5bd63;--art-success:#72d3b5;--art-cool:#72c1df;--art-violet:#b89ae9;--art-panel:#081923;--art-panel-line:#5e91a6;--art-on-panel:#f5fcff;--art-track:#7195a4;--art-forest:#78b995; }
  :root[data-palette="alpine"]:not([data-theme]) { --paper:#102322;--snow:#152b29;--ink:#eaf3ef;--muted:#b8c9c5;--copper:#ef795c;--lichen:#a8c49a;--line:#3b5652;--art-hot:#ff8064;--art-warm:#f1c46c;--art-success:#79c99e;--art-cool:#8fcbd4;--art-violet:#bd9aeb;--art-panel:#081817;--art-panel-line:#688f89;--art-on-panel:#f3fbf8;--art-track:#718d88;--art-forest:#83b17f; }
  :root[data-palette="desert"]:not([data-theme]) { --paper:#211914;--snow:#2c211a;--ink:#f7ead2;--muted:#cdbb9f;--copper:#ff7952;--lichen:#b3c578;--line:#5b4637;--art-hot:#ff8060;--art-warm:#f3bd5d;--art-success:#acd17b;--art-cool:#79c4cf;--art-violet:#c49bea;--art-panel:#160f0c;--art-panel-line:#9a7057;--art-on-panel:#fff8eb;--art-track:#a17e68;--art-forest:#a8bd70; }
  :root[data-palette="glacier"]:not([data-theme]) { --paper:#10232f;--snow:#152c39;--ink:#eaf6fa;--muted:#b5cbd4;--copper:#70bce2;--lichen:#83b7aa;--line:#385767;--art-hot:#ff7d91;--art-warm:#f5bd63;--art-success:#72d3b5;--art-cool:#72c1df;--art-violet:#b89ae9;--art-panel:#081923;--art-panel-line:#5e91a6;--art-on-panel:#f5fcff;--art-track:#7195a4;--art-forest:#78b995; }
  :root[data-palette="signal"]:not([data-theme]) { --paper:#1d1729;--snow:#271f36;--ink:#f3edfa;--muted:#c9bdd8;--copper:#c09aef;--lichen:#78c7ae;--line:#514165;--art-hot:#ff7da9;--art-warm:#f2c16e;--art-success:#70d3b2;--art-cool:#74c5df;--art-violet:#cf9cff;--art-panel:#120d1b;--art-panel-line:#806a9e;--art-on-panel:#fdf9ff;--art-track:#8b78a2;--art-forest:#70b795; }
  :root[data-palette="forest"]:not([data-theme]) { --paper:#172119;--snow:#202d22;--ink:#eef5e9;--muted:#bdcbb9;--copper:#f08a62;--lichen:#a8c47c;--line:#405642;--art-hot:#ff8868;--art-warm:#e8bf68;--art-success:#8dcd8b;--art-cool:#82c4cc;--art-violet:#bea5df;--art-panel:#0c170e;--art-panel-line:#6d936f;--art-on-panel:#f6fcef;--art-track:#759078;--art-forest:#8ebb76; }
  :root[data-palette="coast"]:not([data-theme]) { --paper:#102326;--snow:#172f32;--ink:#edf8f7;--muted:#bad0cf;--copper:#ff9471;--lichen:#83c2aa;--line:#3b5a5d;--art-hot:#ff8979;--art-warm:#ebc66e;--art-success:#78cfaf;--art-cool:#76cadc;--art-violet:#b2a5e2;--art-panel:#07191c;--art-panel-line:#62949b;--art-on-panel:#f2fcfb;--art-track:#719397;--art-forest:#73b294; }
  :root[data-palette="meadow"]:not([data-theme]) { --paper:#202019;--snow:#2b2b21;--ink:#f5f2df;--muted:#ccc8aa;--copper:#c5a4f1;--lichen:#b1c976;--line:#575640;--art-hot:#f18bab;--art-warm:#efc36c;--art-success:#a9cf72;--art-cool:#83c5ce;--art-violet:#c3a2ef;--art-panel:#15160f;--art-panel-line:#8b8c62;--art-on-panel:#fdfbec;--art-track:#91906c;--art-forest:#9ebd67; }
  :root[data-palette="volcanic"]:not([data-theme]) { --paper:#211a18;--snow:#2e231f;--ink:#f8eee8;--muted:#d0bbb2;--copper:#ff7b57;--lichen:#aebc78;--line:#5d453e;--art-hot:#ff7255;--art-warm:#f2b85d;--art-success:#a5ca79;--art-cool:#7ac2ce;--art-violet:#c29be1;--art-panel:#150d0b;--art-panel-line:#98695b;--art-on-panel:#fff7f2;--art-track:#9a786f;--art-forest:#9bae70; }
  .map-node circle:first-child { filter: none; }
  :root:not([data-theme]) .availability { background:var(--snow); color:var(--ink); }
  :root:not([data-theme]) .availability .button { border-color:var(--ink); background:var(--ink); color:var(--paper); }
  :root:not([data-theme]) .contact { background:var(--snow); color:var(--ink); }
  :root:not([data-theme]) .contact .eyebrow,:root:not([data-theme]) .contact div > p { color:var(--muted); }
  :root:not([data-theme]) .contact .button { border-color:var(--ink); background:var(--ink); color:var(--paper); }
  :root:not([data-theme]) .scene-night-only,:root:not([data-theme]) .hike-aurora,:root:not([data-theme]) .hike-moon,:root:not([data-theme]) .moon-crater,:root:not([data-theme]) .hike-stars,:root:not([data-theme]) .camp-moon,:root:not([data-theme]) .camp-sky-stars,:root:not([data-theme]) .camp-star { visibility:visible; }:root:not([data-theme]) .scene-day-only { visibility:hidden; }
}
:root[data-theme="day"] { color-scheme:light;--scene-sky:#d9eef4;--scene-sky-edge:#77a8b8;--scene-celestial:#e4b95f; }
:root[data-theme="day"] .scene-night-only,:root[data-theme="day"] .hike-aurora,:root[data-theme="day"] .hike-moon,:root[data-theme="day"] .moon-crater,:root[data-theme="day"] .hike-stars,:root[data-theme="day"] .camp-moon,:root[data-theme="day"] .camp-sky-stars,:root[data-theme="day"] .camp-star { visibility:hidden; }
:root[data-theme="day"] .scene-day-only { visibility:visible; }
:root[data-theme="night"] { color-scheme:dark;--paper:#10232f;--snow:#152c39;--ink:#eaf6fa;--muted:#b5cbd4;--copper:#70bce2;--lichen:#83b7aa;--line:#385767;--scene-sky:#101936;--scene-sky-edge:#496a82;--scene-celestial:#f4e7b2;--art-hot:#ff7d91;--art-warm:#f5bd63;--art-success:#72d3b5;--art-cool:#72c1df;--art-violet:#b89ae9;--art-panel:#081923;--art-panel-line:#5e91a6;--art-on-panel:#f5fcff;--art-track:#7195a4;--art-forest:#78b995; }
:root[data-palette="alpine"][data-theme="night"] { --paper:#102322;--snow:#152b29;--ink:#eaf3ef;--muted:#b8c9c5;--copper:#ef795c;--lichen:#a8c49a;--line:#3b5652;--art-hot:#ff8064;--art-warm:#f1c46c;--art-success:#79c99e;--art-cool:#8fcbd4;--art-violet:#bd9aeb;--art-panel:#081817;--art-panel-line:#688f89;--art-on-panel:#f3fbf8;--art-track:#718d88;--art-forest:#83b17f; }
:root[data-palette="desert"][data-theme="night"] { --paper:#211914;--snow:#2c211a;--ink:#f7ead2;--muted:#cdbb9f;--copper:#ff7952;--lichen:#b3c578;--line:#5b4637;--art-hot:#ff8060;--art-warm:#f3bd5d;--art-success:#acd17b;--art-cool:#79c4cf;--art-violet:#c49bea;--art-panel:#160f0c;--art-panel-line:#9a7057;--art-on-panel:#fff8eb;--art-track:#a17e68;--art-forest:#a8bd70; }
:root[data-palette="signal"][data-theme="night"] { --paper:#1d1729;--snow:#271f36;--ink:#f3edfa;--muted:#c9bdd8;--copper:#c09aef;--lichen:#78c7ae;--line:#514165;--art-hot:#ff7da9;--art-warm:#f2c16e;--art-success:#70d3b2;--art-cool:#74c5df;--art-violet:#cf9cff;--art-panel:#120d1b;--art-panel-line:#806a9e;--art-on-panel:#fdf9ff;--art-track:#8b78a2;--art-forest:#70b795; }
:root[data-palette="forest"][data-theme="night"] { --paper:#172119;--snow:#202d22;--ink:#eef5e9;--muted:#bdcbb9;--copper:#f08a62;--lichen:#a8c47c;--line:#405642;--art-hot:#ff8868;--art-warm:#e8bf68;--art-success:#8dcd8b;--art-cool:#82c4cc;--art-violet:#bea5df;--art-panel:#0c170e;--art-panel-line:#6d936f;--art-on-panel:#f6fcef;--art-track:#759078;--art-forest:#8ebb76; }
:root[data-palette="coast"][data-theme="night"] { --paper:#102326;--snow:#172f32;--ink:#edf8f7;--muted:#bad0cf;--copper:#ff9471;--lichen:#83c2aa;--line:#3b5a5d;--art-hot:#ff8979;--art-warm:#ebc66e;--art-success:#78cfaf;--art-cool:#76cadc;--art-violet:#b2a5e2;--art-panel:#07191c;--art-panel-line:#62949b;--art-on-panel:#f2fcfb;--art-track:#719397;--art-forest:#73b294; }
:root[data-palette="meadow"][data-theme="night"] { --paper:#202019;--snow:#2b2b21;--ink:#f5f2df;--muted:#ccc8aa;--copper:#c5a4f1;--lichen:#b1c976;--line:#575640;--art-hot:#f18bab;--art-warm:#efc36c;--art-success:#a9cf72;--art-cool:#83c5ce;--art-violet:#c3a2ef;--art-panel:#15160f;--art-panel-line:#8b8c62;--art-on-panel:#fdfbec;--art-track:#91906c;--art-forest:#9ebd67; }
:root[data-palette="volcanic"][data-theme="night"] { --paper:#211a18;--snow:#2e231f;--ink:#f8eee8;--muted:#d0bbb2;--copper:#ff7b57;--lichen:#aebc78;--line:#5d453e;--art-hot:#ff7255;--art-warm:#f2b85d;--art-success:#a5ca79;--art-cool:#7ac2ce;--art-violet:#c29be1;--art-panel:#150d0b;--art-panel-line:#98695b;--art-on-panel:#fff7f2;--art-track:#9a786f;--art-forest:#9bae70; }
:root[data-theme="night"] .availability { background:var(--snow); color:var(--ink); }
:root[data-theme="night"] .availability .button { border-color:var(--ink); background:var(--ink); color:var(--paper); }
:root[data-theme="night"] .contact { background:var(--snow); color:var(--ink); }
:root[data-theme="night"] .contact .eyebrow,:root[data-theme="night"] .contact div > p { color:var(--muted); }
:root[data-theme="night"] .contact .button { border-color:var(--ink); background:var(--ink); color:var(--paper); }
:root[data-theme="night"] .scene-night-only,:root[data-theme="night"] .hike-aurora,:root[data-theme="night"] .hike-moon,:root[data-theme="night"] .moon-crater,:root[data-theme="night"] .hike-stars,:root[data-theme="night"] .camp-moon,:root[data-theme="night"] .camp-sky-stars,:root[data-theme="night"] .camp-star { visibility:visible; }
:root[data-theme="night"] .scene-day-only { visibility:hidden; }
@media (prefers-contrast: more) { :root { --muted: #2e4442; --line: #718784; } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root { --muted: #d4dedb; --line: #78908c; } }
@media (forced-colors: active) {
  :root,:root[data-palette] { --paper: Canvas; --snow: Canvas; --ink: CanvasText; --muted: CanvasText; --copper: LinkText; --lichen: Highlight; --line: GrayText; }
  .skip-link { border-color:CanvasText; background:Canvas; color:CanvasText; box-shadow:none; }
  .trail-glyph { color:LinkText; }
  .button, .nav-cta { forced-color-adjust: none; background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .signal-path, .case-route-line { stroke: LinkText; }.hobby-trail > path { stroke: GrayText; }.hobby-traveler,.hobby-landed-disc { fill: Highlight; }.traveler-ufo .ufo-beam { fill: Canvas; stroke: Highlight; }.map-node .pulse { display: none; }.project-visual { border: 1px solid CanvasText; background: Canvas; }
}
@media print {
  nav,.hero-actions,.all-work,.site-footer a { display: none; }
  .hero { min-height: auto; }.project-link, .case-story > section { break-inside: avoid; }
  .work-section, .toolbox, .current, .contact, .hobbies, .about-grid, .availability, .index-list { content-visibility: visible; contain-intrinsic-size: none; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
}

/* 404 · cryptid night watch */
.lost-page { --lost-sky:var(--art-panel);--lost-panel:color-mix(in srgb,var(--art-panel) 84%,transparent);--lost-copy:var(--art-on-panel);--lost-muted:color-mix(in srgb,var(--art-on-panel) 72%,var(--art-panel-line));--lost-accent:var(--copper);--lost-line:color-mix(in srgb,var(--art-panel-line) 42%,transparent);--lost-night-tint:var(--art-cool);--lost-day-sky-top:#78b9d8;--lost-day-sky-mid:#b9dbe2;--lost-day-haze:#e8e2c5;--lost-day-sun:#ffe08a;--lost-day-mountain-lit:#769198;--lost-day-mountain-shadow:#45656a;--lost-day-snow:#edf1df;--lost-day-ground-lit:#557b54;--lost-day-ground-shadow:#213f32;--lost-day-river:#438a93;--lost-day-pine:#315f43;--lost-day-pine-dark:#173b30;--lost-day-bark:#65503a;--lost-day-shrub:#426b45;--lost-day-fern:#6f9259;--lost-day-tent:var(--art-hot);--lost-day-tent-edge:var(--art-warm);--smoke-font:var(--serif);--smoke-weight:700;--smoke-size:148px;--smoke-tracking:-3px;min-height:100svh;color:var(--lost-copy);background:var(--lost-sky); }
:root[data-palette="alpine"] .lost-page { --lost-night-tint:#5eaa98;--lost-day-sky-top:#7ebfc5;--lost-day-sky-mid:#c1ded8;--lost-day-haze:#edf0d6;--lost-day-ground-lit:#66825a;--lost-day-river:#478e8b; }
:root[data-palette="desert"] .lost-page { --lost-night-tint:#b37757;--lost-day-sky-top:#8eb9c4;--lost-day-sky-mid:#d8cfb6;--lost-day-haze:#f0d3a2;--lost-day-mountain-lit:#a07a62;--lost-day-mountain-shadow:#66524a;--lost-day-ground-lit:#72734c;--lost-day-river:#4e8584;--lost-day-pine:#526447;--lost-day-tent:#c65d3e; }
:root[data-palette="glacier"] .lost-page { --lost-night-tint:#4d91ad;--lost-day-sky-top:#75b6dc;--lost-day-sky-mid:#c7e1eb;--lost-day-haze:#eef3e8;--lost-day-river:#3f8fa3; }
:root[data-palette="signal"] .lost-page { --lost-night-tint:#8b67ad;--lost-day-sky-top:#9695c8;--lost-day-sky-mid:#d5cbe2;--lost-day-haze:#f0dfcf;--lost-day-mountain-lit:#807895;--lost-day-ground-lit:#5f765d;--lost-day-tent:#a96388; }
:root[data-palette="forest"] .lost-page { --lost-night-tint:#5c845c;--lost-day-sky-top:#82afa8;--lost-day-sky-mid:#c8d8c3;--lost-day-haze:#e7e0bd;--lost-day-ground-lit:#59784b;--lost-day-ground-shadow:#263d28;--lost-day-pine:#365a35;--lost-day-shrub:#4d7041; }
:root[data-palette="coast"] .lost-page { --lost-night-tint:#4e9290;--lost-day-sky-top:#78bac2;--lost-day-sky-mid:#c0ded9;--lost-day-haze:#e7e4cd;--lost-day-river:#3d8f95;--lost-day-pine:#376351; }
:root[data-palette="meadow"] .lost-page { --lost-night-tint:#8173a1;--lost-day-sky-top:#93b6c8;--lost-day-sky-mid:#d6d8c4;--lost-day-haze:#eee0ba;--lost-day-ground-lit:#71804c;--lost-day-shrub:#657944;--lost-day-tent:#9a668e; }
:root[data-palette="volcanic"] .lost-page { --lost-night-tint:#a66554;--lost-day-sky-top:#86aeb9;--lost-day-sky-mid:#d1d1bd;--lost-day-haze:#e9c9a9;--lost-day-mountain-lit:#877267;--lost-day-mountain-shadow:#534844;--lost-day-ground-lit:#626b49;--lost-day-tent:#bc593e; }
.lost-main { position: relative; min-height: 100svh; overflow: hidden; background: var(--lost-sky); isolation: isolate; }
.lost-copy { position: absolute; z-index: 3; top: clamp(1.5rem,5vw,4.5rem); left: max(1.25rem,calc((100vw - 1180px)/2)); width: min(35rem,calc(100vw - 2.5rem)); padding: clamp(1rem,2.2vw,1.7rem); border: 1px solid var(--lost-line); border-radius: 3px; background: var(--lost-panel); box-shadow: 0 24px 70px rgba(0,0,0,.24); backdrop-filter: blur(8px); }
.lost-copy .eyebrow { margin-bottom: .8rem; color: var(--lost-muted); letter-spacing: .15em; }
.lost-copy h1 { max-width: 11ch; font-size: clamp(3rem,6.2vw,6.5rem); line-height: .94; letter-spacing: -.045em; text-shadow: 0 3px 18px rgba(0,0,0,.25); }
.lost-copy h1 em { color: var(--lost-accent); }
.lost-lede { max-width: 29rem; margin: 1.1rem 0 1.4rem; color: var(--lost-muted); font-size: clamp(1rem,1vw + .72rem,1.14rem); line-height: 1.62; letter-spacing: .004em; }
.lost-button { border-color: var(--lost-copy); background: var(--lost-copy); color: var(--lost-sky); }
.lost-button:hover { border-color: var(--lost-accent); background: var(--lost-accent); color: var(--lost-sky); }
.cryptid-camp { position: absolute; inset: 0; margin: 0; display: grid; align-items: end; }
.cryptid-camp svg { width: 100%; height: 100%; min-height: 620px; object-fit: cover; object-position: center bottom; }
.cryptid-camp figcaption { position: absolute; right: clamp(1rem,3vw,2.5rem); bottom: 1rem; color: color-mix(in srgb,var(--lost-copy) 70%,transparent); font: 700 .67rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.palette-wash { fill:var(--lost-night-tint);opacity:.085;mix-blend-mode:color; }
.day-scene,.caption-day { display:none; }
:root[data-theme="day"] .day-scene,:root[data-theme="day"] .caption-day { display:inline; }
:root[data-theme="day"] .caption-night { display:none; }
:root[data-theme="day"] .camp-atmosphere { display:none; }
:root[data-theme="day"] :is(.camp-stars,.star-dust,.deep-stars,.stellar-color,.milky-way,.sky-airglow,.aurora-curtains,.aurora-ray-filaments,.camp-aurora,.camp-moon,.night-moon-aura,.background-ufo,.tent-peekers,.camper,.roasting-arm,.seat-shadows,.campfire-glow,.fire-rim-light,.smores-kit,.campfire,.smoke-404,.smoke-thread) { display:none; }
:root[data-theme="day"] .lost-page { --lost-sky:var(--paper);--lost-panel:color-mix(in srgb,var(--snow) 88%,transparent);--lost-copy:var(--ink);--lost-muted:var(--muted);--lost-accent:var(--copper);--lost-line:color-mix(in srgb,var(--line) 72%,transparent); }
:root[data-theme="day"] .lost-button { border-color:var(--ink);background:var(--ink);color:var(--paper); }
:root[data-theme="day"] .lost-button:hover { border-color:var(--copper);background:var(--copper);color:var(--paper); }
.day-palette-wash { fill:var(--lost-night-tint);opacity:.06;mix-blend-mode:soft-light; }
.daylight-wash { opacity:.44;mix-blend-mode:screen; }
.day-scenery-duplicate,.day-added-tree,.day-tent-duplicate,.day-added-bush,.day-foreground { display:none; }
.day-bigfoot-tree > .day-added-tree { display:inline;filter:drop-shadow(8px 12px 9px rgba(19,34,29,.2)); }
.day-bigfoot,.day-mothman,.day-dogman,.day-campers { filter:drop-shadow(5px 9px 6px rgba(15,31,27,.3)); }
.day-ufo { filter:drop-shadow(7px 12px 9px rgba(20,45,49,.28)); }
.depth-far,.depth-mid,.depth-near { transform-box:view-box;transform-origin:center bottom;transition:translate .8s cubic-bezier(.2,.7,.2,1); }
.depth-far { translate:var(--parallax-far-x,0) var(--parallax-far-y,0); }
.depth-mid { translate:var(--parallax-mid-x,0) var(--parallax-mid-y,0); }
.depth-near { translate:var(--parallax-near-x,0) var(--parallax-near-y,0); }
.day-cloud-404 text { fill:#fff;stroke:color-mix(in srgb,var(--lost-day-sky-top) 38%,#fff);stroke-width:6;paint-order:stroke fill;font:700 112px/1 var(--serif);letter-spacing:7px;opacity:.82; }
.day-sunbeams { transform-box:view-box;transform-origin:982px 112px;animation:day-ray-breathe 14s ease-in-out infinite alternate; }
.day-sun { transform-box:fill-box;transform-origin:center;animation:day-sun-breathe 9s ease-in-out infinite alternate; }
.day-ufo { transform-box:view-box;transform-origin:680px 235px;animation:day-ufo-flight 9s ease-in-out infinite alternate; }
.day-bigfoot,.day-dogman { transform-box:fill-box;transform-origin:center bottom;animation:day-peek 7s ease-in-out infinite alternate; }
.day-mothman { transform-box:fill-box;transform-origin:center bottom;animation:day-perch 8s -3s ease-in-out infinite alternate; }
.day-windhound { transform-box:view-box;transform-origin:1060px 648px;animation:day-dog-look 6s -2s ease-in-out infinite alternate; }
.ui-overlay-open .lost-page svg * { animation-play-state:paused!important; }
.aurora-ribbon { stroke-width: 34; opacity: .3; }
.aurora-ribbon-one { stroke: url(#aurora-green); animation: camp-aurora 10s ease-in-out infinite alternate; }
.aurora-ribbon-two { stroke: url(#aurora-blue); stroke-width: 25; animation: camp-aurora 12s -4s ease-in-out infinite alternate-reverse; }
.aurora-ribbon-three { stroke: url(#aurora-violet); stroke-width: 18; animation: camp-aurora 14s -7s ease-in-out infinite alternate; }
.aurora-edge { fill:none; stroke-width:3; opacity:.42; animation:aurora-shimmer 8s ease-in-out infinite alternate; }
.aurora-edge-one { stroke:#b0ffe1; }.aurora-edge-two { stroke:#9ce9e1; animation-delay:-3s; }
.aurora-curtains { transform-box:view-box; transform-origin:center top; animation:aurora-curtain-breathe 11s ease-in-out infinite alternate; }
.aurora-ray-filaments { transform-box:view-box;transform-origin:center top;animation:aurora-rays-drift 17s -6s ease-in-out infinite alternate; }
.sky-airglow { animation:airglow-breathe 18s -5s ease-in-out infinite alternate; }
.milky-way { animation:milky-way-breathe 12s ease-in-out infinite alternate; }
.camp-stars circle { transform-box: fill-box; transform-origin: center; animation: camp-twinkle 5.8s ease-in-out infinite; }
.camp-stars circle:nth-child(3n+1) { animation-duration:7.1s;animation-delay:-2.1s; }.camp-stars circle:nth-child(3n+2) { animation-duration:4.9s;animation-delay:-3.4s; }.camp-stars circle:nth-child(5n) { animation-duration:8.3s;animation-delay:-5.2s; }
.stellar-color circle { transform-box:fill-box;transform-origin:center;animation:stellar-breathe 9s ease-in-out infinite alternate; }.stellar-color circle:nth-child(2n) { animation-delay:-4s;animation-duration:12s; }
.camp-moon { transform-box: fill-box; transform-origin: center; animation: moon-breathe 8s ease-in-out infinite; }
.deep-forest { fill:#0b2828; stroke:#31554c; stroke-width:2.5; opacity:.88; }
.forest-fireflies > g { transform-box:fill-box;transform-origin:center;opacity:.12;animation:firefly-glow 5.4s ease-in-out infinite; }
.forest-fireflies .firefly-phase-one { animation-duration:6.8s;animation-delay:-2.4s; }.forest-fireflies .firefly-phase-two { animation-duration:4.7s;animation-delay:-3.6s; }.forest-fireflies .firefly-phase-three { animation-duration:7.6s;animation-delay:-5.1s; }
.river { filter:drop-shadow(0 0 12px rgba(77,143,145,.16)); }
.river-ripples { animation:river-glint 5s ease-in-out infinite alternate; }
.river-reflections { animation:river-reflection 6.5s ease-in-out infinite alternate; }
.water-foam { animation:water-foam 4s ease-in-out infinite alternate; }
.river-ferns { transform-box:fill-box;transform-origin:center bottom;animation:fern-sway 6.8s ease-in-out infinite alternate; }.dry-ferns { transform-box:fill-box;transform-origin:center bottom;animation:fern-sway 8.2s -3s ease-in-out infinite alternate-reverse; }
.background-ufo { filter: drop-shadow(0 4px 8px rgba(0,0,0,.32)) drop-shadow(0 0 8px rgba(116,184,189,.14)); }
.ufo-lights { fill:#eab94e; animation:ufo-lights 5.6s ease-in-out infinite alternate; }
.ufo-lights circle:nth-child(2) { opacity:.7; }.ufo-lights circle:nth-child(3) { opacity:.48; }.ufo-lights circle:nth-child(4) { opacity:.28; }
.tent-peekers { transform:none; }
.tent-dog { animation: dog-look 6s -1s ease-in-out infinite; transform-box: view-box; transform-origin: 949px 620px; }
.camera-glint { animation:camera-snapshot 8s steps(1) infinite; }
.camper { filter:none;opacity:1;visibility:visible;shape-rendering:geometricPrecision; }
.bigfoot { transform-box:view-box; transform-origin:350px 643px; scale:1.1; filter:none; }
.moth-wing { transform-box: view-box; }.wing-left { transform-origin: 752px 512px; animation: wing-left 6s ease-in-out infinite; }.wing-right { transform-origin: 758px 512px; animation: wing-right 6s ease-in-out infinite; }
.roasting-arm { transform-box: view-box; animation: roast-turn 5s ease-in-out infinite; }
.arm-bigfoot { transform-origin: 381px 523px; }.arm-alien { transform-origin: 520px 526px; animation-delay: -1.2s; }.arm-moth { transform-origin: 728px 526px; animation-delay: -2.4s; }.arm-dogman { transform-origin: 846px 527px; animation-delay: -3.6s; }
.flame { transform-box: view-box; transform-origin: 608px 648px; }.flame-outer { animation: fire-dance .92s ease-in-out infinite alternate; }.flame-inner { animation: fire-dance .64s -.3s ease-in-out infinite alternate-reverse; }.flame-core { animation: fire-dance .48s -.16s ease-in-out infinite alternate; }
.flame-side-left { transform-origin:588px 647px;animation:fire-side-left .73s -.2s ease-in-out infinite alternate; }.flame-side-right { transform-origin:626px 649px;animation:fire-side-right .81s -.55s ease-in-out infinite alternate; }
.campfire-glow { transform-box:fill-box;transform-origin:center;animation:campfire-glow 2.3s ease-in-out infinite alternate; }
.firelight-rings { transform-box:fill-box;transform-origin:center;animation:firelight-breathe 3.1s -.8s ease-in-out infinite alternate; }
.coal-bed circle { transform-box:fill-box;transform-origin:center;animation:coal-pulse 1.7s ease-in-out infinite alternate; }.coal-bed circle:nth-of-type(2) { animation-delay:-.8s; }
.embers > * { transform-box:fill-box;transform-origin:center;animation: ember-rise 2.2s ease-out infinite; }.embers > :nth-child(2) { animation-delay: -.8s; }.embers > :nth-child(3) { animation-delay: -1.5s; }.embers > :nth-child(4) { animation-delay: -.35s; }.embers > :nth-child(5) { animation-delay:-1.1s; }.embers > :nth-child(6) { animation-delay:-1.8s; }
.heat-shimmer { animation:heat-shimmer 2.8s ease-in-out infinite alternate; }
.smoke-number { font-family:var(--smoke-font);font-size:var(--smoke-size);font-weight:var(--smoke-weight);font-variant-numeric:lining-nums tabular-nums;letter-spacing:var(--smoke-tracking);transform-box:fill-box;transform-origin:center bottom;text-rendering:geometricPrecision; }
.smoke-character { --smoke-delay:0s; }
.smoke-character-zero { --smoke-delay:.32s; }.smoke-character-right { --smoke-delay:.64s; }
.smoke-number-haze { fill:none;stroke:#b9c8c5;stroke-width:18;opacity:.18;animation:smoke-haze 7s calc(1.9s + var(--smoke-delay)) ease-in-out infinite alternate; }
.smoke-character-entry { transform-box:fill-box; transform-origin:center bottom; animation:smoke-glyph-form 1.9s var(--smoke-delay) cubic-bezier(.5,0,.25,1) both; }
.smoke-number-main { fill:#d4dedb;opacity:.76;animation:smoke-drift 9s calc(1.9s + var(--smoke-delay)) ease-in-out infinite alternate; }
.forming-tendril { fill:none; stroke:#d4dedb; stroke-width:9; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; animation:smoke-tendril-form 1.9s var(--smoke-delay) cubic-bezier(.45,0,.3,1) both; }
.smoke-wisps { stroke-width:5;opacity:.2;animation:smoke-wisp-drift 7.5s ease-in-out infinite alternate; }
.smoke-puffs { opacity:.16;animation:smoke-puff-drift 9s -2s ease-in-out infinite alternate; }
.smoke-fine-wisps { stroke:#eef3ef;stroke-width:2.2;opacity:.14;animation:smoke-fine-drift 11s -4s ease-in-out infinite alternate; }
.smoke-thread { animation: smoke-thread 4s ease-in-out infinite; }
.tent-lantern circle { transform-box:fill-box;transform-origin:center;animation:lantern-glow 2.8s ease-in-out infinite alternate; }
@keyframes camp-aurora { 0% { opacity:.22; translate:-.7% 2px; } 50% { opacity:.38; } 100% { opacity:.28; translate:.8% -3px; } }
@keyframes aurora-shimmer { from { opacity:.22;translate:-3px 1px; } to { opacity:.48;translate:4px -2px; } }
@keyframes aurora-curtain-breathe { from { opacity:.64;scale:1 .97; } to { opacity:.9;scale:1 1.02; } }
@keyframes aurora-rays-drift { from { opacity:.58;translate:-4px 1px;scale:1 .98; } to { opacity:.86;translate:5px -2px;scale:1 1.015; } }
@keyframes airglow-breathe { from { opacity:.68;translate:-2px 0; } to { opacity:1;translate:3px -1px; } }
@keyframes milky-way-breathe { from { opacity:.55; } to { opacity:1; } }
@keyframes camp-twinkle { 0%,100% { opacity:.42; scale:.86; } 50% { opacity:.92; scale:1.12; } }
@keyframes stellar-breathe { from { opacity:.5;scale:.92; } to { opacity:.82;scale:1.08; } }
@keyframes firefly-glow { 0%,100% { opacity:.06;scale:.55; } 42% { opacity:.72;scale:1.12; } 68% { opacity:.28;scale:.82; } }
@keyframes moon-breathe { 0%,100% { opacity:.92; } 50% { opacity:1; } }
@keyframes river-glint { from { opacity:.3;translate:-3px 0; } to { opacity:.68;translate:4px 0; } }
@keyframes river-reflection { from { opacity:.55;translate:-2px 0; } to { opacity:1;translate:3px 1px; } }
@keyframes water-foam { from { opacity:.28;translate:-1px 0; } to { opacity:.52;translate:2px 0; } }
@keyframes fern-sway { from { rotate:-1deg; } to { rotate:1.4deg; } }
@keyframes ufo-lights { 0% { opacity:.26; } 42% { opacity:.58; } 72% { opacity:.82; } 100% { opacity:.38; } }
@keyframes dog-look { 0%,35%,100% { rotate:0deg; } 50%,68% { rotate:-5deg; } }
@keyframes camera-snapshot { 0%,66%,69%,100% { opacity:1; } 67% { opacity:.1; } 68% { opacity:1; } }
@keyframes wing-left { 0%,100% { rotate:0deg; } 50% { rotate:-4deg; } } @keyframes wing-right { 0%,100% { rotate:0deg; } 50% { rotate:4deg; } }
@keyframes roast-turn { 0%,100% { rotate:-2deg; } 50% { rotate:3deg; } }
@keyframes fire-dance { from { scale:.92 1; rotate:-2deg; } to { scale:1.04 .92; rotate:3deg; } }
@keyframes fire-side-left { from { scale:.88 1;rotate:-4deg; } to { scale:1.05 .9;rotate:3deg; } }
@keyframes fire-side-right { from { scale:1 .9;rotate:3deg; } to { scale:.9 1.04;rotate:-3deg; } }
@keyframes campfire-glow { from { opacity:.68;scale:.98 .96; } to { opacity:.92;scale:1.025 1.04; } }
@keyframes firelight-breathe { from { opacity:.08;scale:.99; } to { opacity:.18;scale:1.015; } }
@keyframes coal-pulse { from { opacity:.55;scale:.85; } to { opacity:1;scale:1.12; } }
@keyframes heat-shimmer { from { opacity:.08;translate:-2px 2px; } to { opacity:.22;translate:3px -4px; } }
@keyframes ember-rise { 0% { opacity:0; translate:0 14px; scale:.5; } 30% { opacity:1; } 100% { opacity:0; translate:8px -40px; scale:.15; } }
@keyframes smoke-glyph-form { 0%,22% { opacity:0;translate:0 42px;scale:.78 1.18; } 62% { opacity:.48;translate:0 12px;scale:.93 1.05; } 100% { opacity:1;translate:0;scale:1; } }
@keyframes smoke-tendril-form { 0% { opacity:0;stroke-dashoffset:1; } 18% { opacity:.7; } 72% { opacity:.62;stroke-dashoffset:0; } 100% { opacity:0;stroke-dashoffset:0; } }
@keyframes smoke-drift { from { translate:0 0; } to { translate:2px -5px; } }
@keyframes smoke-haze { from { translate:-3px 1px; } to { translate:4px -5px; } }
@keyframes smoke-fine-drift { from { translate:-2px 2px; } to { translate:3px -7px; } }
@keyframes smoke-thread { 0%,100% { opacity:.3; translate:0 4px; } 50% { opacity:.65; translate:3px -4px; } }
@keyframes smoke-wisp-drift { from { opacity:.12;translate:-3px 3px; } to { opacity:.28;translate:5px -8px; } }
@keyframes smoke-puff-drift { from { opacity:.08;translate:-4px 4px; } to { opacity:.2;translate:7px -10px; } }
@keyframes lantern-glow { from { opacity:.12;scale:.85; } to { opacity:.34;scale:1.2; } }
@keyframes day-ray-breathe { from { opacity:.55;rotate:-1deg; } to { opacity:.82;rotate:1.2deg; } }
@keyframes day-sun-breathe { from { opacity:.94;scale:.98; } to { opacity:1;scale:1.025; } }
@keyframes day-ufo-flight { from { translate:-9px 4px;rotate:-1deg; } to { translate:11px -6px;rotate:1deg; } }
@keyframes day-peek { from { translate:-2px 0;rotate:-.5deg; } to { translate:4px 1px;rotate:1deg; } }
@keyframes day-perch { from { translate:0 1px;rotate:-.6deg; } to { translate:2px -2px;rotate:.7deg; } }
@keyframes day-dog-look { from { rotate:-2deg; } to { rotate:4deg; } }
@media (prefers-color-scheme:light) {
  :root:not([data-theme]) .day-scene,:root:not([data-theme]) .caption-day { display:inline; }
  :root:not([data-theme]) .caption-night { display:none; }
  :root:not([data-theme]) .camp-atmosphere { display:none; }
  :root:not([data-theme]) :is(.camp-stars,.star-dust,.deep-stars,.stellar-color,.milky-way,.sky-airglow,.aurora-curtains,.aurora-ray-filaments,.camp-aurora,.camp-moon,.night-moon-aura,.background-ufo,.tent-peekers,.camper,.roasting-arm,.seat-shadows,.campfire-glow,.fire-rim-light,.smores-kit,.campfire,.smoke-404,.smoke-thread) { display:none; }
  :root:not([data-theme]) .lost-page { --lost-sky:var(--paper);--lost-panel:color-mix(in srgb,var(--snow) 88%,transparent);--lost-copy:var(--ink);--lost-muted:var(--muted);--lost-accent:var(--copper);--lost-line:color-mix(in srgb,var(--line) 72%,transparent); }
  :root:not([data-theme]) .lost-button { border-color:var(--ink);background:var(--ink);color:var(--paper); }
  :root:not([data-theme]) .lost-button:hover { border-color:var(--copper);background:var(--copper);color:var(--paper); }
}
@media (max-width: 760px) {
  .lost-copy { top:1rem; left:1rem; width:calc(100vw - 2rem); margin:0; padding:1rem; }
  .lost-copy h1 { font-size: clamp(2.8rem,14vw,4.8rem); }
  .lost-lede { margin-block: .8rem 1rem; }
  .cryptid-camp { position:absolute; inset:0; min-height:0; margin:0; overflow:hidden; }
  .cryptid-camp svg { position:absolute; left:-5%; bottom:0; width:110%; height:auto; min-height:0; max-width:none; margin:0; }
  .cryptid-camp figcaption { display: none; }
}
@media (orientation: portrait) and (min-width: 431px) {
  .lost-copy { position:absolute; top:1rem; left:1rem; width:min(35rem,calc(100vw - 2rem)); margin:0; padding:clamp(1rem,2.5vw,1.7rem); }
  .lost-copy h1 { font-size:clamp(3.5rem,9vw,6rem); }
  .cryptid-camp { position:absolute; inset:0; min-height:0; margin:0; overflow:hidden; }
  .cryptid-camp svg { position:absolute; left:-6%; bottom:0; width:112%; height:auto; min-height:0; max-width:none; }
  .cryptid-camp figcaption { display:none; }
}
@media (orientation: landscape) and (max-height: 650px) {
  .lost-copy { top:1rem; left:1rem; width:min(24rem,44vw); padding:.75rem .9rem; }
  .lost-copy .eyebrow { margin-bottom:.35rem; font-size:.62rem; }
  .lost-copy h1 { font-size:clamp(2.3rem,5.5vw,3.2rem); }
  .lost-lede { margin:.45rem 0 .65rem; font-size:.72rem; }
  .lost-button { padding:.55rem .8rem; font-size:.72rem; }
  .cryptid-camp svg { min-height:0; }
  .cryptid-camp figcaption { bottom:.5rem; font-size:.56rem; }
}
@media (max-width: 430px) {
  .lost-copy .eyebrow { font-size:.65rem; }.lost-copy h1 { line-height:.92; }
  .lost-button { padding:.68rem .9rem; }
  .cryptid-camp svg { left:-34%; width:145%; }
}
@media (prefers-reduced-motion: reduce) {
  .lost-page *, .lost-page *::before, .lost-page *::after { animation:none !important; transition:none !important; }
  .depth-far,.depth-mid,.depth-near { translate:0 0!important; }
  .smoke-number-main { opacity:.76; translate:0; scale:1; }
  .smoke-number-haze { opacity:.16; }
  .tent-peekers { translate:0; }
}
@media (forced-colors: active) {
  .lost-page { forced-color-adjust:none; }
}
@media print {
  .lost-page { print-color-adjust:exact; }.lost-main { min-height:100vh; }.lost-button { display:none; }
}