:root {
  --night: #07170E; --deep: #0D2718; --forest: #1A4D2E; --pine: #2E6340; --sage: #4F7942;
  --sage2: #6B8E55; --lichen: #8FA36B; --mist: #C9D6B5; --gold: #C4A747; --gold2: #E9C95A;
  --sky: #EFE4BC; --paper: #F6F3EA; --card: #FFFFFF; --ink: #12301E; --line: rgba(26, 77, 46, .16);
  --display: "National Park", "Arial Narrow", system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hdr: 64px; --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; }
code { font: 400 .9em var(--mono); background: rgba(26, 77, 46, .08); padding: .1em .35em; border-radius: 3px; }
.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px); }

/* ---------- prototype bar + header ---------- */
.protobar { background: var(--gold2); color: var(--deep); font: 500 12px/1.4 var(--mono); letter-spacing: .03em; padding: 7px 16px; text-align: center; }
.protobar b { letter-spacing: .12em; }
#hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); transition: background .4s var(--ease); }
body.home #hdr { background: var(--sky); border-bottom-color: transparent; }
.navrow { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); height: var(--hdr); }
.wm { display: flex; align-items: baseline; gap: 8px; margin-right: auto; font-family: var(--display); white-space: nowrap; }
.wm b { font-weight: 800; font-size: 21px; letter-spacing: .03em; color: var(--deep); }
.wm i { font: 500 10px var(--mono); font-style: normal; letter-spacing: .3em; color: var(--pine); }
#mainnav { display: flex; gap: clamp(10px, 1.5vw, 24px); font-size: 14.5px; font-weight: 500; }
#mainnav a { position: relative; padding: 4px 0; }
#mainnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
#mainnav a:hover::after, #mainnav a.cur::after { transform: scaleX(1); }
#mainnav a.cur { color: var(--forest); }
#burger { display: none; width: 40px; height: 40px; position: relative; }
#burger span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--deep); transition: transform .3s var(--ease), opacity .2s; }
#burger span:nth-child(1) { top: 13px; } #burger span:nth-child(2) { top: 19px; } #burger span:nth-child(3) { top: 25px; }
body.menu #burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu #burger span:nth-child(2) { opacity: 0; }
body.menu #burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.scrollrail { height: 2px; background: transparent; }
.scrollrail i { display: block; height: 2px; width: 0; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 13px); }

/* ---------- buttons, labels, type ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 15px; line-height: 1; padding: 13px 20px; border-radius: 4px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(13, 39, 24, .55); }
.btn.dark { background: var(--deep); color: var(--sky); }
.btn.gold { background: var(--gold2); color: var(--deep); }
.btn.line { border: 1.5px solid var(--deep); color: var(--deep); }
.btn.ghostbtn { border: 1.5px solid var(--deep); color: var(--deep); background: rgba(239, 228, 188, .35); }
.btn.sm { font-size: 13px; padding: 9px 14px; }
.btn.full { display: flex; width: 100%; margin-top: 12px; }
.nav-cta { font-size: 14px; padding: 11px 16px; }
.lab { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--sage); }
.lab.gold { color: var(--gold2); }
.dsp { font-family: var(--display); font-weight: 800; color: var(--deep); line-height: 1.08; margin: 8px 0 18px; text-wrap: balance; }
h1.dsp { font-size: clamp(30px, 3.4vw, 46px); }
h2.dsp { font-size: clamp(26px, 2.6vw, 38px); }
.dsp.big { font-size: clamp(40px, 5vw, 72px); }
.dsp em { font-style: normal; color: var(--gold); }
.lt { color: #EEF1E8; } .dsp.lt { color: var(--sky); }
.intro { font-size: 17.5px; line-height: 1.62; max-width: 62ch; margin: 0 0 22px; }
.small { font-size: 13.5px; opacity: .8; line-height: 1.55; margin: 12px 0 0; }
.small.proto { font-family: var(--mono); font-size: 12.5px; color: var(--pine); opacity: 1; }
.flag { font: 500 11px var(--mono); background: var(--gold2); color: var(--deep); padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- hero climb ---------- */
.climb { position: relative; }
.hero { position: relative; height: clamp(520px, 50vw, 760px); overflow: hidden; background: linear-gradient(180deg, #EFE4BC 0%, #E6D597 30%, #D6BE69 52%, #C4A747 68%, #8FA36B 100%); }
body.climbing .hero { position: sticky; top: calc(var(--hdr) + env(safe-area-inset-top, 0px)); }
.hero svg.art { position: absolute; inset: 0; width: 100%; height: 100%; }
.sun { position: absolute; left: 76%; top: 8%; width: 13%; aspect-ratio: 1; max-width: 100%; border-radius: 50%; background: #F7EDC8; opacity: .85; }
.r0 { fill: #9DB07C; } .r1 { fill: #7C9A62; } .r2 { fill: #5E8449; } .r3 { fill: #3E6E3F; } .r4 { fill: #1A4D2E; } .r5 { fill: #0D2718; }
.tl0 path, .tl1 path, .tl2 path { fill: none; stroke: #1A4D2E; stroke-width: .9; opacity: .3; }
.tl3 path, .tl4 path, .tl5 path { fill: none; stroke: #C9D6B5; stroke-width: .9; opacity: .22; }
.crest { fill: none; stroke: #12301E; stroke-width: 1.2; opacity: .35; }
.layer { transition: transform .12s linear; }
.ghost { fill: none; stroke: #0D2718; stroke-width: 2; stroke-dasharray: 3 7; opacity: .28; stroke-linecap: round; }
.route-under { fill: none; stroke: #0D2718; stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; opacity: .3; }
.route { fill: none; stroke: #E9C95A; stroke-width: 2.6; stroke-dasharray: 7 5; stroke-linejoin: round; stroke-linecap: round; }
.rmask { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.wp { fill: #0D2718; stroke: #E9C95A; stroke-width: 2.6; transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.2, 1.7, .4, 1), fill .3s; }
.pill { fill: #0D2718; opacity: .9; transition: opacity .4s; }
.wpl { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; fill: #EFE4BC; transition: opacity .4s; }
.hero .wp:not(.lit) { transform: scale(.55); fill: #3E6E3F; }
.hero .pill:not(.lit) { opacity: .35; }
.hero .wpl:not(.lit) { opacity: .5; }
.pulse { fill: none; stroke: #E9C95A; stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.hero.summit .pulse { animation: pulse 2.4s ease-out infinite; }
.hero.summit .route { animation: march 1.3s linear infinite; }
.hero.summit .sun { animation: breathe 7s ease-in-out infinite; }
@keyframes pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes march { to { stroke-dashoffset: -24; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.05); opacity: .97; } }
.herocopy { position: absolute; left: 0; right: 0; top: clamp(34px, 5.5vw, 84px); z-index: 3; }
.herocopy > * { max-width: min(560px, 44vw); }
.kick { font: 500 12.5px var(--mono); letter-spacing: .08em; color: var(--forest); }
.herocopy h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(48px, 6.3vw, 92px); line-height: .95; letter-spacing: .01em; margin: 14px 0 18px; color: var(--deep); max-width: none; }
.herocopy h1 span { color: var(--pine); display: inline-block; }
.herocopy p { font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.55; margin: 0 0 22px; }
.herobtns { display: flex; flex-wrap: wrap; gap: 10px; }
body.anim .herocopy > * { animation: heroin .9s var(--ease) both; }
body.anim .herocopy > *:nth-child(2) { animation-delay: .1s; }
body.anim .herocopy > *:nth-child(3) { animation-delay: .2s; }
body.anim .herocopy > *:nth-child(4) { animation-delay: .3s; }
@keyframes heroin { from { transform: translateY(16px); } to { transform: none; } }
.climbhint { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 18px; z-index: 4; font: 500 11.5px var(--mono); letter-spacing: .14em; color: var(--sky); background: rgba(13, 39, 24, .8); padding: 7px 12px; border-radius: 3px; transition: opacity .4s; }
.climbhint::after { content: " ↓"; display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
body:not(.climbing) .climbhint { display: none; }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(48px, 6vw, 88px); background: var(--paper); }
.sec.dark { background: var(--deep); color: #EEF1E8; }
.sec.sage { background: #E6EBDF; }
.sec.topo { overflow: hidden; }
.sec.hdr { padding-block: clamp(36px, 4vw, 56px); }
.tsvg { position: absolute; inset: -4%; width: 108%; height: 108%; animation: drift 38s ease-in-out infinite alternate; }
.tsvg path { fill: none; stroke: var(--sage); stroke-width: .8; opacity: .28; }
@keyframes drift { from { transform: translate3d(-1.2%, 0, 0) scale(1); } to { transform: translate3d(1.2%, -1%, 0) scale(1.02); } }
.sec.topo .wrap { position: relative; z-index: 2; }
.band { background: var(--deep); padding-block: 16px; }
.bandlab { font: 500 12.5px var(--mono); letter-spacing: .12em; color: var(--gold2); }
.kitband { padding-block: clamp(44px, 5vw, 72px); }
.rowhd { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.rowhd p { margin: 0 0 22px; }
.two { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.two.wide { grid-template-columns: 1.5fr 1fr; }
.two.top { align-items: start; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
.chips span, .ch { font: 500 12.5px var(--mono); border: 1px solid rgba(233, 201, 90, .6); color: var(--gold2); padding: 6px 12px; border-radius: 20px; transition: background .25s, color .25s, transform .25s var(--ease); }
.sec:not(.dark) .ch, .shell .ch, .bmain .ch { border-color: rgba(13, 39, 24, .3); color: var(--ink); }
.ch:hover { transform: translateY(-1px); }
.ch.on { background: var(--deep); color: var(--sky) !important; border-color: var(--deep); }
.chips.vert { flex-direction: column; align-items: flex-start; margin-top: 10px; }

/* kit */
.kitgrid { display: grid; grid-template-columns: repeat(9, 1fr); border-block: 1px solid rgba(79, 121, 66, .6); }
.kcard { position: relative; padding: 18px 12px 20px; border-right: 1px solid rgba(79, 121, 66, .35); color: #EEF1E8; transition: background .3s, transform .35s var(--ease); }
.kcard:last-child { border-right: 0; }
.kcard:hover { background: rgba(233, 201, 90, .07); transform: translateY(-4px); }
.kcode { display: block; font: 500 11px var(--mono); color: var(--sage2); margin-bottom: 12px; letter-spacing: .06em; }
svg.ki { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease), stroke .3s; }
.kcard:hover svg.ki { transform: rotate(-6deg) scale(1.12); stroke: var(--gold2); }
.knm { font-weight: 600; font-size: 15px; margin-top: 10px; line-height: 1.25; }
.kdt { font-size: 12.5px; opacity: .75; margin-top: 4px; line-height: 1.4; }

/* route + cards */
.route4 { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 22px; }
.route4::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 2px dashed var(--gold); transform-origin: left; transform: scaleX(var(--draw, 1)); transition: transform 1.4s var(--ease); }
.rcol { display: block; padding: 6px 4px 8px; border-radius: 4px; transition: background .3s, transform .35s var(--ease); }
.rcol:hover { background: rgba(26, 77, 46, .06); transform: translateY(-3px); }
.num { font: 500 12px var(--mono); color: var(--gold); letter-spacing: .08em; }
.rcol h3 { font-family: var(--display); font-weight: 700; font-size: 25px; margin: 4px 0 8px; color: var(--deep); }
.rcol p { font-size: 15px; line-height: 1.55; margin: 0 0 10px; }
.more { font-weight: 600; font-size: 14px; color: var(--forest); }
.rcol:hover .more { color: var(--sage); }
.ph { position: relative; aspect-ratio: var(--ar, 16/9); max-width: 100%; border: 1.5px dashed rgba(26, 77, 46, .45); border-radius: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(26, 77, 46, .06) 0 12px, transparent 12px 24px); background-size: 200% 200%; transition: background-position 1.2s var(--ease); }
.ph:hover { background-position: 100% 0; }
.ph span { font: 500 12.5px var(--mono); color: var(--sage); text-align: center; padding: 0 20px; letter-spacing: .03em; }
.ph.dk { border-color: rgba(233, 201, 90, .5); background-image: repeating-linear-gradient(135deg, rgba(233, 201, 90, .07) 0 12px, transparent 12px 24px); }
.ph.dk span { color: var(--gold2); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.gcard { display: block; border-top: 2px solid var(--deep); padding-top: 14px; transition: transform .35s var(--ease); }
.gcard:hover { transform: translateY(-4px); }
.gcard h4 { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 6px 0; color: var(--deep); line-height: 1.2; }
.gcard p { font-size: 14.5px; line-height: 1.55; margin: 0; }
.term { background: var(--deep); color: var(--mist); font: 400 14.5px/1.75 var(--mono); padding: 22px 24px; border-radius: 6px; min-height: 170px; white-space: pre-wrap; word-break: break-all; }
.term .tout .gl { color: var(--gold2); }
.caret { color: var(--gold2); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.dlstrip { padding-block: 34px; border-top: 1px solid var(--line); }
.dlrow { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; margin-top: 10px; font-weight: 500; }
.dlrow span::before { content: "↓ "; color: var(--gold); }
.sec.cta { text-align: center; }
.sec.cta p { font-size: 18px; max-width: 46ch; margin: 0 auto 26px; }

/* ---------- interior shell ---------- */
.stepper { position: relative; display: flex; justify-content: space-between; gap: 8px; }
.stepper .track { position: absolute; left: 8px; right: 8px; top: 8px; border-top: 2px dashed rgba(196, 167, 71, .6); transform-origin: left; }
.view:not([hidden]) .stepper .track { animation: drawx 1.1s var(--ease) both; }
@keyframes drawx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.st { position: relative; display: flex; align-items: center; gap: 9px; background: var(--deep); padding-right: 12px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lichen); }
.st i { width: 17px; height: 17px; flex: none; border-radius: 50%; border: 2px solid var(--sage2); background: var(--deep); transition: transform .3s var(--ease); }
a.st:hover i { transform: scale(1.2); }
.st.done i { background: var(--sage2); }
.st.on { color: var(--sky); }
.st.on i { border-color: var(--gold2); background: var(--gold2); animation: halo 2.2s ease-out infinite; }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(233, 201, 90, .5); } 100% { box-shadow: 0 0 0 12px rgba(233, 201, 90, 0); } }
.shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0; }
.shell.three { grid-template-columns: 210px minmax(0, 1fr) 280px; }
.shell aside { padding: 30px 22px 30px 0; border-right: 1px solid var(--line); }
.toc { list-style: none; padding: 0; margin: 8px 0 28px; font-size: 14.5px; }
.toc li { padding: 7px 0; border-bottom: 1px solid rgba(26, 77, 46, .1); transition: padding .25s var(--ease); }
.toc li:hover { padding-left: 4px; }
.toc li.on { color: var(--forest); font-weight: 600; border-left: 3px solid var(--gold); padding-left: 9px; }
.toc.sm { font-size: 13.5px; }
.toc.legend li { display: flex; gap: 8px; align-items: center; }
.main { padding: 30px 0 44px 32px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 26px; }
.sech { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--deep); margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1.5px solid var(--deep); }
.krow { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.krow svg.ki { width: 26px; height: 26px; stroke: var(--forest); }
.krow:hover svg.ki { transform: scale(1.12); stroke: var(--gold); }
.krow .knm { margin-top: 0; font-size: 15px; } .krow .kdt { font-size: 13px; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.step h4, .steps3 h4 { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--deep); margin: 3px 0 4px; }
.step p { font-size: 14px; line-height: 1.5; margin: 0; opacity: .85; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; padding-top: 18px; border-top: 2px dashed var(--gold); }
.bul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.8; }
.glinks { display: flex; flex-direction: column; }
.glink { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(26, 77, 46, .12); font-size: 15px; }
.glink span { flex: 1; }
.glink em, .lrow em { font: 500 10.5px var(--mono); font-style: normal; letter-spacing: .08em; padding: 2px 7px; border-radius: 3px; }
em.new, .glink em { background: var(--gold2); color: var(--deep); }
em.pl { background: rgba(26, 77, 46, .1); color: var(--pine); }
em.lv { background: var(--deep); color: var(--sky); }
.glink b, .lrow b { color: var(--gold); transition: transform .3s var(--ease); }
.glink:hover b, .lrow:hover b { transform: translateX(4px); }
.callout { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; border: 1.5px solid var(--gold); background: #FBF6E4; padding: 14px 18px; border-radius: 5px; font-size: 15px; margin: 4px 0 8px; }
.dlcard { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1.5px solid rgba(26, 77, 46, .3); padding: 14px 16px; border-radius: 5px; margin-bottom: 8px; transition: border-color .3s, transform .3s var(--ease); }
.dlcard:hover { border-color: var(--gold); transform: translateY(-2px); }
.dlcard span { font: 500 12px var(--mono); color: var(--sage); }

/* ---------- forms ---------- */
.srlabel { display: block; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--sage); margin-bottom: 6px; }
.siftbox { width: 100%; background: var(--deep); color: var(--mist); font: 400 14px/1.7 var(--mono); border: 0; border-radius: 6px; padding: 18px 20px; resize: vertical; }
.formrow { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; flex-wrap: wrap; }
.formrow .inp { flex: 1; min-width: 200px; margin: 0; }
.inp { display: block; width: 100%; border: 1.5px solid rgba(13, 39, 24, .3); background: var(--card); color: var(--ink); font: 400 15px var(--body); padding: 12px 14px; border-radius: 4px; margin: 6px 0 12px; transition: border-color .25s, box-shadow .25s; }
.inp:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(233, 201, 90, .35); }
.inp.dk { background: #12301E; border-color: rgba(233, 201, 90, .35); color: #EEF1E8; }
.inp.wide { max-width: 520px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin-bottom: 8px; }
.fgrid label { font-size: 14px; font-weight: 500; }
.fgrid label.full { grid-column: 1 / -1; }

/* ---------- builder ---------- */
.bshell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; }
.bmain { padding: 30px 32px 44px 0; min-width: 0; }
.bgroup { margin-bottom: 20px; }
.bgroup h3 { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 0 0 10px; color: var(--deep); }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pick { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; text-align: left; border: 1.5px solid rgba(26, 77, 46, .25); background: var(--card); border-radius: 6px; padding: 14px 16px; transition: border-color .25s, background .25s, transform .3s var(--ease), box-shadow .3s; }
.pick:hover { transform: translateY(-2px); border-color: var(--forest); }
.pick svg.ki { grid-row: span 2; width: 28px; height: 28px; stroke: var(--forest); }
.pick .kcode { position: absolute; top: 10px; right: 12px; margin: 0; }
.pick .knm { margin: 0; font-size: 15px; } .pick .kdt { font-size: 12.5px; }
.pick.on { border-color: var(--deep); box-shadow: inset 0 0 0 1.5px var(--deep); background: #FBF6E4; }
.pick::after { content: "✓"; position: absolute; right: 12px; bottom: 10px; width: 20px; height: 20px; border-radius: 4px; background: var(--gold); color: var(--deep); font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; transform: scale(0); transition: transform .35s cubic-bezier(.2, 1.8, .4, 1); }
.pick.on::after { transform: scale(1); }
.pack { background: var(--deep); color: #EEF1E8; padding: 30px 26px; position: sticky; top: calc(var(--hdr) + 12px); align-self: start; border-radius: 0 0 6px 6px; }
.pack ul { list-style: none; padding: 0; margin: 14px 0; font-size: 15px; min-height: 40px; }
.pack li { padding: 9px 0; border-bottom: 1px solid rgba(143, 163, 107, .3); animation: slidein .4s var(--ease) both; }
.pack li::before { content: "✓  "; color: var(--gold2); }
.pack li.empty { opacity: .6; } .pack li.empty::before { content: ""; }
@keyframes slidein { from { transform: translateX(14px); opacity: .3; } to { transform: none; opacity: 1; } }
.bstep:not([hidden]) { animation: stepin .45s var(--ease) both; }
@keyframes stepin { from { transform: translateX(18px); } to { transform: none; } }
.sent { border: 1.5px solid var(--gold); background: #FBF6E4; padding: 26px; border-radius: 6px; }

/* ---------- gallery ---------- */
.gtile { margin: 0; }
.gtile.feat { margin: 10px 0 18px; }
.gtile .ph { transition: transform .5s var(--ease), background-position 1.2s var(--ease); }
.gtile:hover .ph { transform: scale(1.012); }
.gtile figcaption { font-size: 13.5px; margin-top: 8px; opacity: .85; }
.play { position: absolute; right: 14px; bottom: 12px; font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--deep); color: var(--gold2); display: flex; align-items: center; justify-content: center; font-size: 12px; animation: halo 2.6s ease-out infinite; }
.gtile.hide { display: none; }

/* ---------- learn ---------- */
.lrows { border-top: 1.5px solid var(--deep); }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 190px 84px 20px; gap: 12px; align-items: center; padding: 11px 6px; border-bottom: 1px solid rgba(26, 77, 46, .12); transition: background .25s, padding .25s var(--ease); }
.lrow:hover { background: rgba(26, 77, 46, .05); padding-left: 12px; }
.lt1 { font-weight: 500; }
.lst { font: 400 12.5px var(--mono); color: var(--sage); }
.lrow em { justify-self: start; }
.lrow.hide { display: none; }
/* A guide with no page is listed but is not a link, so it must not offer the hover
   affordance of one. */
.lrow.soon { color: rgba(18, 48, 30, .55); cursor: default; }
.lrow.soon:hover { background: none; padding-left: 6px; }
.lrow.soon em { font-size: 9.5px; white-space: nowrap; }
.article { max-width: 760px; }
.article h1.dsp { font-size: clamp(32px, 3.6vw, 50px); }
.article p { font-size: 17px; line-height: 1.72; margin: 0 0 16px; }
.article .sech { margin-top: 30px; }
.article .bul { font-size: 16.5px; margin-bottom: 16px; }
.article .bul li { margin-bottom: 4px; line-height: 1.65; }
.rail { padding: 30px 0 30px 26px; }
.railcard { background: var(--deep); color: #EEF1E8; padding: 20px; border-radius: 6px; margin-bottom: 14px; }
.railcard p { margin: 8px 0 0; line-height: 1.5; font-size: 15px; }
.railcard.lite { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.railcard .glink { font-size: 14px; }

/* ---------- downloads, people, footer ---------- */
.dlgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dlc .cover { position: relative; aspect-ratio: 4/5; max-width: 100%; background: linear-gradient(180deg, #EFE4BC, #C4A747); border-radius: 4px; overflow: hidden; padding: 18px; box-shadow: 0 10px 24px -18px rgba(13, 39, 24, .8); transition: transform .45s var(--ease), box-shadow .45s; }
.dlc:hover .cover { transform: translateY(-5px) rotate(-1.2deg); box-shadow: 0 18px 30px -18px rgba(13, 39, 24, .8); }
.dlc .cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dlc .cover b { position: relative; display: block; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.15; color: var(--deep); }
.dlc p { font-size: 14px; margin: 10px 0 0; line-height: 1.5; }
.gate { background: var(--deep); color: #EEF1E8; padding: 26px; border-radius: 6px; position: sticky; top: calc(var(--hdr) + 16px); }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 20px; }
/* The kit headline. This was a small sub-line under "What we carry"; it is the actual
   promise of the section, so it carries the section instead of trailing it. */
.kithd { display: block; }
.kitline { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; margin: 10px 0 0; max-width: 20ch; }
.kitline em { font-style: normal; color: var(--gold2); }

/* The sift report contents. Naming the real columns beats a mocked-up screenshot of a
   report we have not run: it is checkable, and it cannot go stale against the pipeline. */
.repcard { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 22px; }
.repfields { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 12px; }
.repfields li { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.repfields li:last-child { border-bottom: 0; padding-bottom: 0; }
.repfields code { font-size: .82em; background: rgba(26, 77, 46, .09); color: var(--forest); }
.repfields span { font-size: 13.5px; opacity: .85; line-height: 1.5; }

/* Used where we have no headshot. A designed initial card, not a broken-image frame. */
.mono { aspect-ratio: var(--ar, 4/5); border-radius: 5px; display: flex; align-items: center;
  justify-content: center; background: linear-gradient(160deg, var(--forest), var(--deep));
  border: 1px solid rgba(233, 201, 90, .25); }
.mono span { font: 600 40px/1 var(--display); color: var(--gold2); letter-spacing: .06em; }
.person { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: start; }
.person h3.dsp { font-size: 26px; margin: 0 0 6px; }
.person .lab { margin-bottom: 12px; }
.person p { font-size: 15.5px; line-height: 1.65; margin: 0; }
footer { background: var(--night); color: var(--mist); padding-block: 44px 24px; font-size: 14px; }
.fgridf { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 26px; }
footer .wm b { color: var(--sky); } footer .wm i { color: var(--lichen); }
footer p { line-height: 1.6; margin: 12px 0 0; }
footer h5 { font: 500 11.5px var(--mono); letter-spacing: .1em; color: var(--gold2); margin: 0 0 10px; }
footer a { display: block; line-height: 2; transition: color .2s; }
footer a:hover { color: var(--gold2); }
.fbot { grid-column: 1 / -1; border-top: 1px solid rgba(143, 163, 107, .25); padding-top: 16px; font-size: 12.5px; opacity: .75; }
#toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; background: var(--deep); color: var(--sky); font: 500 14px/1.5 var(--body); padding: 14px 18px; border-radius: 6px; border: 1px solid var(--gold); max-width: min(560px, calc(100vw - 32px)); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .7); animation: stepin .35s var(--ease) both; }

/* ---------- motion helpers (content always visible; motion is offset only) ---------- */
.view:not([hidden]) { animation: pagein .45s var(--ease) both; }
@keyframes pagein { from { transform: translateY(10px); } to { transform: none; } }
body.anim .herocopy > * { animation: heroin 1s var(--ease) both; }
body.anim .herocopy > *:nth-child(2) { animation-delay: .1s; } body.anim .herocopy > *:nth-child(3) { animation-delay: .2s; } body.anim .herocopy > *:nth-child(4) { animation-delay: .3s; }
@keyframes heroin { from { transform: translateY(18px); opacity: .25; } to { transform: none; opacity: 1; } }
body.anim .reveal { transition: transform .8s var(--ease); }
body.anim .reveal.pre { transform: translateY(22px); }
body.anim .kitgrid .reveal.pre { transform: translateY(30px); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  #mainnav { position: absolute; top: calc(var(--hdr) + 2px); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 6px clamp(16px, 3vw, 40px) 14px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform .3s var(--ease), opacity .25s; }
  body.menu #mainnav { transform: none; opacity: 1; pointer-events: auto; }
  #mainnav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  #burger { display: block; }
  .kitgrid { grid-template-columns: repeat(3, 1fr); }
  .kcard { border-bottom: 1px solid rgba(79, 121, 66, .35); }
  .shell.three { grid-template-columns: 210px minmax(0, 1fr); }
  .shell.three .rail { grid-column: 2; padding-left: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
  .dlgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .nav-cta { display: none; }
  .hero { height: auto; display: flex; flex-direction: column; }
  .herocopy { position: relative; top: auto; padding-block: 28px 12px; order: 1; }
  .herocopy > * { max-width: 100%; }
  .hero svg.art { position: relative; order: 2; height: auto; aspect-ratio: 1200 / 620; }
  .sun { top: auto; bottom: 30%; }
  .two, .two.wide, .grid2, .people { grid-template-columns: 1fr; }
  .route4, .g4 { grid-template-columns: 1fr 1fr; }
  .g3 { grid-template-columns: 1fr; }
  .shell, .shell.three, .bshell { grid-template-columns: 1fr; }
  .shell aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0 6px; }
  .shell aside .toc { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .shell aside .toc li { border: 0; }
  .chips.vert { flex-direction: row; }
  .main, .bmain { padding: 22px 0 34px; }
  .shell.three .rail { grid-column: auto; padding: 0 0 30px; }
  .pack { position: relative; top: auto; border-radius: 6px; margin-bottom: 30px; }
  .gate { position: relative; top: auto; }
  .fgridf { grid-template-columns: 1fr 1fr; }
  .fbrand { grid-column: 1 / -1; }
  .lrow { grid-template-columns: minmax(0, 1fr) auto 20px; }
  .lst { display: none; }
  .stepper .st span { display: none; }
  .stepper .st.on span { display: inline; }
}
@media (max-width: 560px) {
  .kitgrid { grid-template-columns: repeat(2, 1fr); }
  .route4, .g4, .bgrid, .fgrid, .steps, .steps3, .dlgrid { grid-template-columns: 1fr; }
  .person { grid-template-columns: 110px 1fr; }
  .wm i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body.anim .reveal.pre { transform: none; }
}

.dlink { font-weight: 500; border-bottom: 1px solid var(--gold); }
.dlink:hover { color: var(--forest); }
.dlc .open { display: block; font: 500 12px var(--mono); color: var(--sage); margin-top: 6px; letter-spacing: .04em; }
.dlc:hover .open { color: var(--forest); }
.proto2 { font-family: var(--mono); font-size: 12px; color: var(--gold2); }

/* A field no human sees. Off-screen rather than display:none, because some bots skip
   hidden inputs and the point is that they fill it in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 14px 0 4px; }
.fmsg { font-size: 14.5px; line-height: 1.5; margin: 12px 0 0; padding: 10px 12px; border-radius: 4px;
  background: rgba(26, 77, 46, .07); border-left: 3px solid var(--sage); }
.fmsg.ok { background: #FBF6E4; border-left-color: var(--gold); }
.fmsg.warn { background: #FBF6E4; border-left-color: var(--gold2); }
.fmsg.err { background: rgba(155, 44, 44, .08); border-left-color: #9B2C2C; }
.fmsg.lt { color: #EEF1E8; background: rgba(233, 201, 90, .12); }
.dllist { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; }
.sform button[aria-busy="true"] { opacity: .75; pointer-events: none; }

/* Real media in the gallery. The frame is the media itself now, not a striped placeholder,
   so it carries the same rounded edge and hover lift the tiles had. */
.gm { display: block; width: 100%; height: auto; background: var(--deep); border-radius: 5px;
  border: 1px solid rgba(26, 77, 46, .25); transition: transform .5s var(--ease); }
.gal { align-items: start; }
.gtile:hover .gm { transform: scale(1.01); }
.sec.dark .gm, .dark .gm { border-color: rgba(233, 201, 90, .3); }
/* The folding reveal. One clip is on screen and the rest are dots, so the page decodes a
   single video instead of six. Capped at the clip's own pixel width: upscaling a 660px
   render to full column width only makes it soft. */
.gtile.fold { background: var(--deep); border-radius: 6px; padding: 20px 18px 16px; text-align: center; }
/* Reserve the frame. Swapping .src leaves the element with no intrinsic size until the new
   metadata loads, so height:auto collapsed the tile to a ~50px sliver between every clip. */
.gtile.fold .gm { max-width: 660px; margin: 0 auto; border: 0; background: transparent;
  aspect-ratio: 660 / 512; height: auto; }
.gtile.fold:hover .gm { transform: none; }
.fdots { display: flex; gap: 9px; justify-content: center; margin-top: 15px; }
.fdot { width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(233, 201, 90, .55); background: transparent;
  transition: background .3s var(--ease), transform .3s var(--ease); }
.fdot:hover { background: rgba(233, 201, 90, .45); }
.fdot.on { background: var(--gold2); transform: scale(1.3); }
.gtile.fold figcaption { color: rgba(246, 243, 234, .84); margin-top: 11px; }
/* Capabilities that are real but have no image yet. Saying so beats showing a frame that
   implies data we do not have. */
.soonrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; }
.soon { border: 1.5px dashed rgba(26, 77, 46, .35); border-radius: 5px; padding: 16px 18px; }
.soon b { font-family: var(--display); font-size: 17px; color: var(--deep); }
.soon p { font-size: 14px; line-height: 1.5; margin: 6px 0 0; opacity: .8; }
.dark .soon { border-color: rgba(233, 201, 90, .35); }
.dark .soon b { color: var(--sky); }

/* Kit items are links now, not inert cards. A card that names a capability and does nothing
   on click is a dead end, so each one carries an affordance and a hover state. */
/* Only the underline goes. The kit band is dark and .kcard sets its own light text further
   up, so `color: inherit` here turned every card's text black on a dark background, and a
   second :hover rule replaced the lift and tint the cards already had. */
.kcard { text-decoration: none; }
.krow { color: inherit; text-decoration: none; }
.krow { display: flex; gap: 13px; align-items: center; }
.krow .karr { margin-left: auto; color: var(--sage); opacity: 0; transform: translateX(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.krow:hover .karr { opacity: 1; transform: none; }
.krow:hover .knm { color: var(--forest); }

/* The dissertation rotator. Mixed sources (plots, gels, micrographs) have very different
   aspect ratios, so the frame is fixed and the image is contained rather than cropped:
   cropping a micrograph to fit a box throws away the part that shows the fibrils. */
.rot { margin: 0; }
.rotbox { aspect-ratio: 16 / 10; max-width: 660px; background: var(--paper);
  border-radius: 5px; border: 1px solid rgba(233, 201, 90, .25); display: flex;
  align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
.rotbox { position: relative; }
.rimg { position: absolute; inset: 12px; margin: auto; max-width: calc(100% - 24px);
  max-height: calc(100% - 24px); width: auto; height: auto; object-fit: contain;
  opacity: 0; transition: opacity .45s var(--ease); }
.rimg.on { opacity: 1; }
.rot figcaption { font-size: 13.5px; margin-top: 11px; min-height: 3.2em; }
.rotsrc { font-size: 12px; opacity: .72; margin-top: 6px; }
.rotsrc a { text-decoration: underline; text-underline-offset: 2px; }

/* Three kinds of destination, not one flat row of nine. The stages are the route; the named
   capabilities are what we get hired for by name; Gallery and Learn are the library and read
   as secondary to both. */
.navgrp { display: flex; gap: clamp(10px, 1.5vw, 24px); }
.navsep { width: 1px; align-self: center; height: 17px; background: var(--line); flex: none;
  margin-inline: clamp(8px, 1.1vw, 16px); }
#mainnav .cap a { color: var(--forest); }
#mainnav .cap a::after { background: var(--gold2); }
#mainnav .lib a { font-size: 13.5px; font-weight: 400; color: var(--sage); }
#mainnav .lib a:hover { color: var(--ink); }
body.home .navsep { background: rgba(26, 77, 46, .25); }
@media (max-width: 1080px) { .navsep { display: none; } }

/* The steps inside a stage are lettered, and the four stages of the route are numbered.
   Both were 01-04 in the same gold mono, so a reader saw the same four things twice. */
.num.sub { font: 600 11px var(--mono); color: var(--sage); letter-spacing: .1em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.num.sub::after { content: ""; width: 16px; height: 1px; background: var(--line); }
.krange { font: 500 11px var(--mono); color: var(--sage); letter-spacing: .06em;
  background: rgba(26, 77, 46, .07); padding: 3px 7px; border-radius: 3px;
  vertical-align: middle; margin-left: 8px; }

/* Kit cards state their own colors rather than relying on inheritance. Turning these cards
   into links once already broke them: `a { color: inherit }` plus a stray `color: inherit`
   on .kcard dropped the light text onto the dark band and made it unreadable. Setting the
   color on the text elements themselves means no future change to the wrapper can do that
   again. The K-code was also only 4.26:1 against the band, which is under AA for 11px. */
.kitgrid .kcard { color: #EEF1E8; }
.kitgrid .kcard .knm { color: #EEF1E8; }
.kitgrid .kcard .kdt { color: #D3DACF; opacity: 1; }
.kitgrid .kcard .kcode { color: var(--lichen); }
.kitgrid .kcard svg.ki { stroke: var(--lichen); }

/* Gate messages sit on their own light background, so they must set their own text color.
   Inside .gate (which is dark and sets light text) the success message was near-white on
   cream and could not be read at all. */
.fmsg.ok, .fmsg.warn, .fmsg.err { color: var(--ink); }

/* A locked document is visibly locked, and cannot be clicked, because it has no href until
   the form is submitted. */
.dlc.locked { cursor: default; }
.dlc.locked .cover { filter: saturate(.45) brightness(.94); }
.dlc.locked:hover .cover { transform: none; box-shadow: 0 10px 24px -18px rgba(13, 39, 24, .8); }
.dlc .open { display: inline-block; margin-top: 8px; font: 500 12px var(--mono); color: var(--sage); }
.dlc.locked .open::before { content: "🔒 "; }
.dlc.on .open { color: var(--forest); font-weight: 600; }

/* Before the form is submitted the visitor sees what the five documents are, not the
   documents themselves. Showing locked covers still put the goods on the page. */
.dlpeek { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.dlpeek li { display: grid; gap: 2px; padding: 13px 15px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--card); }
.dlpeek b { font-size: 15px; }
.dlpeek span { font-size: 13.5px; opacity: .8; line-height: 1.45; }