:root{font-family:Inter,"Segoe UI",Arial,sans-serif;--ink:#08144c;--soft:#233b74;--surface:rgba(249,252,255,.92);--surface-line:rgba(11,31,83,.16);--muted:#436394;--sky:#54bafa;--accent:#276c5d;--beat-glow:rgba(185,245,235,.08);color:var(--ink);background:#54bafa}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #0c796c;outline-offset:3px}button{touch-action:manipulation}body{overflow-x:hidden}
#site{position:relative;display:flex;flex-direction:column;min-height:100svh;background:#54bafa;transition:background .45s;color:var(--ink)}
#site.night{--ink:#f8f2ff;--soft:#d8c6fa;--surface:rgba(24,24,58,.94);--surface-line:rgba(206,193,250,.24);--muted:#c1addc;--sky:#161b42;--accent:#97ebc7;--beat-glow:rgba(212,124,242,.085);background:#161b42;color:var(--ink)}
.scene{position:relative;flex:1 0 auto;height:calc(100svh - 94px);min-height:550px;isolation:isolate;overflow:hidden;background:var(--sky);transition:background .45s}
.art{position:absolute;inset:0;background-image:url('../assets/scene-day.png');background-position:center top;background-size:cover;background-repeat:no-repeat;transition:opacity .55s ease;z-index:-3}
.art-night{opacity:0;background-image:url('../assets/scene-night.png')}
.night .art-day{opacity:0}.night .art-night{opacity:1}
.scene::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 300px 240px at 12% 8%,var(--beat-glow),transparent 75%);opacity:0;pointer-events:none;z-index:1;transition:opacity .75s}
#site.beating .scene::after{opacity:1;transition:opacity .1s}
/* Small ambient cloud drift only; the original climbing scene is intentionally unchanged. */
.ambient{position:absolute;z-index:-1;opacity:.28;pointer-events:none;width:85px;height:22px;animation:cloudfloat 45s linear infinite;color:#fff;top:26%;left:-7%}
.ambient svg{width:100%;height:100%}.ambient.b{width:57px;top:48%;animation-duration:60s;animation-delay:-30s;opacity:.18}
@keyframes cloudfloat{to{transform:translateX(115vw)}}
.header{position:absolute;inset:0 0 auto 0;z-index:5;padding:22px clamp(20px,3.35vw,56px);display:flex;justify-content:space-between;align-items:flex-start;gap:25px}
.identity{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;background:none;border:0;padding:0;white-space:nowrap}
.hand-logo{width:104px;height:77px;display:block;overflow:visible;flex:none;filter:drop-shadow(0 2px 0 rgba(12,31,89,.02));color:var(--ink)}
.hand-outline{stroke:#0c1c4d;fill:url(#palmDay);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s}
.night .hand-outline{stroke:#e8e0f5;fill:url(#palmNight)}
.etch{fill:none;stroke:#38508a;stroke-width:1.3;stroke-linecap:round;opacity:.7}.night .etch{stroke:#b1a0df}
.veins{fill:none;stroke:#0a617b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}.night .veins{stroke:#72b8b9}
.vein-light{fill:none;stroke:#d5fff2;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20 210;stroke-dashoffset:225;filter:url(#tinyGlow);opacity:.0}
#site.beating .vein-light{opacity:1;animation:artery .72s ease-out 1}
@keyframes artery{0%{stroke-dashoffset:225;opacity:0}16%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.leaf{transform-origin:149px 33px;animation:leafhover 4.1s ease-in-out infinite}.leaf-core{fill:url(#leafFill);stroke:#215b42;stroke-width:1.7}.leaf-vein{fill:none;stroke:#c3eec2;stroke-width:1.35;stroke-linecap:round}
@keyframes leafhover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#site.beating .leaf{filter:drop-shadow(0 0 6px #c2fff2)}
.wordmark{font-family:"Avenir Next","Segoe UI",Arial,sans-serif;font-size:clamp(23px,2.6vw,35px);letter-spacing:-1.9px;font-weight:700;line-height:1;display:inline-flex;align-items:baseline;color:#071849}
.wordmark .sol{font-weight:400;letter-spacing:-2.0px;margin-left:1px}
.night .wordmark{color:#f4f0fa}
.soundrow{margin:0 0 0 115px;display:flex;align-items:center;gap:9px}
.tiny-sound{background:rgba(255,255,255,.23);display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid rgba(11,36,97,.15);border-radius:20px;color:#0b2251;font-size:11px;font-weight:620}
.tiny-sound:hover{background:rgba(255,255,255,.52)}.night .tiny-sound{color:#f2e9ff;background:rgba(12,15,43,.5);border-color:#c3a8e449}
.tiny-sound svg{width:13px;height:13px;flex:none}.tiny-track{width:25px;height:13px;background:#44547a99;border-radius:10px;padding:2px;transition:background .2s}.tiny-thumb{display:block;height:9px;width:9px;border-radius:50%;background:white;transition:transform .2s}
.tiny-sound[aria-pressed="true"] .tiny-track{background:#128e74}.tiny-sound[aria-pressed="true"] .tiny-thumb{transform:translateX(12px)}
.nav-wrap{display:flex;gap:18px;align-items:center;margin-top:7px}.nav{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.nav button{color:#132b61;background:transparent;border:1px solid transparent;border-radius:7px;padding:8px 12px;font-size:12px;font-weight:650;letter-spacing:.01em;transition:background .15s}
.nav button:hover,.nav button.active{background:rgba(255,255,255,.35)}.night .nav button{color:#e8dafa}.night .nav button:hover,.night .nav button.active{background:rgba(255,255,255,.12)}
.nav button.active{box-shadow:inset 0 -2px #0b2854}.night .nav button.active{box-shadow:inset 0 -2px #a7eac9}
.mode{color:var(--ink);border:1px solid var(--surface-line);background:rgba(255,255,255,.28);border-radius:20px;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 10px;min-width:59px;white-space:nowrap;font-size:12px;font-weight:650}.night .mode{background:rgba(10,13,39,.45)}.mode svg{height:15px;width:15px}
/* restrained dock stays visible below the artwork */
.dock{z-index:4;display:grid;grid-template-columns:1.17fr 1fr 1fr;gap:10px;padding:12px clamp(20px,3.35vw,56px) 16px;background:#4c65a8;min-height:94px;transition:background .45s}
.night .dock{background:#17132b}
.tile{min-width:0;position:relative;border:1px solid var(--surface-line);border-radius:9px;background:var(--surface);display:flex;align-items:center;gap:11px;padding:12px 15px;min-height:65px;color:var(--ink);text-align:left;transition:transform .17s,border .17s,background .3s;box-shadow:0 4px 12px #0b255112}
.tile:hover{transform:translateY(-2px);border-color:var(--accent)}.tile:active{transform:translateY(0)}
.tile .tile-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;color:var(--soft)}.tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile-text{min-width:0;flex:1}.tile-overline{display:block;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:750;margin-bottom:2px}.tile-main{display:block;font-size:14px;font-weight:650;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile .chev{width:15px;height:15px;color:var(--muted);flex:none}
.weather-icon{color:#f4a631!important}.night .weather-icon{color:#bda5f5!important}.weather-temp{font-variant-numeric:tabular-nums}
/* drawer with real clickable sections */
.scrim{position:fixed;inset:0;background:rgba(3,14,38,.3);opacity:0;pointer-events:none;z-index:8;transition:opacity .18s}.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;right:18px;top:95px;bottom:auto;max-height:calc(100svh - 115px);overflow:auto;width:min(380px,calc(100vw - 36px));background:rgba(252,254,255,.975);border:1px solid rgba(10,31,73,.14);color:#0c1a40;z-index:10;padding:25px;border-radius:14px;box-shadow:0 22px 70px #04174255;transform:translateX(calc(100% + 28px));opacity:0;pointer-events:none;transition:transform .23s,opacity .23s}
.night .drawer{background:#1d1b37;color:#f3eaf8;border-color:#8e7ca15a}.drawer.open{transform:translateX(0);opacity:1;pointer-events:auto}.drawer-close{position:absolute;right:15px;top:14px;background:transparent;border:0;color:inherit;font-size:25px;line-height:1;padding:2px 8px;border-radius:7px}
.drawer small{letter-spacing:1.8px;font-size:10px;color:#5c7895;text-transform:uppercase;font-weight:750}.night .drawer small{color:#b9aad8}.drawer h2{font-size:31px;font-weight:600;letter-spacing:-1px;margin:13px 0 14px}.drawer p{color:#475b77;line-height:1.65;font-size:14px}.night .drawer p{color:#d0c3e3}
.drawer-link{display:flex;align-items:center;justify-content:space-between;margin:10px 0;border:1px solid #8294b43b;border-radius:9px;padding:13px;text-align:left;width:100%;background:transparent;color:inherit}.night .drawer-link{border-color:#b49fcc44}.drawer-link:hover{border-color:#4c9e88}
.edit-field{display:block;width:100%;padding:12px;border:1px solid #a4b5c2;border-radius:8px;margin:16px 0;background:transparent;color:inherit;font-size:18px}.save{background:#101e4a;color:#fff;border:0;border-radius:8px;padding:11px 16px;font-weight:650}.night .save{background:#98dcbe;color:#152b30}
.drawer .pill{display:inline-flex;border:1px solid #778aa14f;border-radius:20px;padding:5px 9px;font-size:11px;color:inherit}.status-note{font-size:12px;margin-top:14px;color:#50657f}.night .status-note{color:#c7bbdd}
.reduced .leaf,.reduced .ambient{animation:none}#site.reduced .scene::after{display:none}
@media(max-width:920px){.header{padding:15px 18px;gap:8px}.nav-wrap{gap:4px}.nav button{padding:7px 7px;font-size:11px}.hand-logo{width:83px;height:62px}.wordmark{font-size:25px}.soundrow{margin-left:92px}.scene{height:calc(100svh - 95px);min-height:520px}}
@media(max-width:650px){.scene{height:calc(100svh - 240px);min-height:480px}.art{background-size:auto 100%;background-position:42% top}.header{flex-wrap:wrap;padding:12px 15px}.hand-logo{width:64px;height:48px}.wordmark{font-size:23px;letter-spacing:-1px}.wordmark .sol{letter-spacing:-1px}.brand{gap:4px}.soundrow{margin-left:67px;margin-top:4px}.nav-wrap{width:100%;justify-content:space-between;gap:4px;margin-top:2px}.nav{gap:0}.nav button{font-size:10px;padding:7px 5px}.mode{padding:6px 8px;min-width:auto}.mode span{display:none}.dock{padding:9px 13px 12px;display:flex;flex-direction:column;gap:6px}.tile{min-height:58px;padding:8px 12px}.tile .tile-icon{width:24px;height:24px}.tile-main{font-size:13px}.tile-sub{font-size:10px}.tile-overline{font-size:8px}.drawer{top:auto;bottom:10px;max-height:77svh}}
@media(prefers-reduced-motion:reduce){.ambient,.leaf{animation:none!important}*{scroll-behavior:auto!important;transition:none!important}}

/* Revision 3: classical hand, clearly hovering leaf, visible anatomical veins */
@media(min-width:651px){.wordmark{transform:translateY(-16px)}}
.hand-logo{width:154px;height:120px;filter:drop-shadow(0 2px 2px rgba(9,51,97,.13))}
.brand{gap:7px;align-items:center}
.wordmark{font-size:clamp(25px,2.5vw,34px);letter-spacing:-1.65px;font-weight:670}
.wordmark .sol{font-weight:390;letter-spacing:-1.5px;margin-left:0}
.soundrow{margin-left:12px;margin-top:-6px}
.floating-leaf{transform-origin:460px 99px;animation:leafhover2 4.4s ease-in-out infinite;filter:drop-shadow(0px 6px 5px rgba(5,48,70,.13))}
@keyframes leafhover2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.vessel-network{opacity:1;stroke-width:6;filter:drop-shadow(0 1px 0 rgba(255,255,255,.2))}
.night .vessel-network{stroke:#51b9c4;opacity:.8}
.vessel-flash{opacity:0;stroke-dasharray:85 1000;stroke-dashoffset:1020}
#site.beating .vessel-flash{animation:veintravel .84s ease-in-out 1}
@keyframes veintravel{0%{opacity:0;stroke-dashoffset:1020}17%{opacity:.9}70%{opacity:.75}100%{opacity:0;stroke-dashoffset:0}}
#site.beating .floating-leaf{filter:drop-shadow(0 0 10px rgba(130,243,188,.44))}
/* Minimal, slightly more architectural cards — no new hero clutter. */
.dock{gap:12px;padding-top:13px;padding-bottom:17px}
.tile{min-height:69px;border-radius:13px;border:1px solid rgba(24,59,109,.16);background:linear-gradient(160deg,rgba(255,255,255,.91),rgba(236,248,255,.83));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 5px 14px rgba(7,31,84,.09),inset 0 1px rgba(255,255,255,.65);padding:13px 15px;gap:12px;overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:17px;bottom:17px;width:2px;background:var(--accent);opacity:.36;transition:opacity .2s}
.tile:hover::before{opacity:1}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.45);pointer-events:none}
.tile:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(13,52,94,.13),inset 0 1px rgba(255,255,255,.8);border-color:rgba(28,117,111,.37)}
.tile .tile-icon{width:37px;height:37px;border-radius:10px;color:#27517b;background:linear-gradient(155deg,rgba(121,194,238,.19),rgba(179,227,245,.06));box-shadow:inset 0 1px rgba(255,255,255,.48)}
.tile svg{width:20px;height:20px;stroke-width:1.8}
.tile-overline{font-size:9px;font-weight:720;letter-spacing:1.35px;margin-bottom:4px}
.tile-main{font-size:14px;letter-spacing:-.32px}
.tile-sub{font-size:11px;margin-top:3px}
.tile .chev{width:16px;height:16px}
.night .tile{background:linear-gradient(160deg,rgba(40,41,81,.91),rgba(28,25,61,.87));border-color:rgba(221,205,251,.18);box-shadow:inset 0 1px rgba(255,255,255,.1),0 6px 19px rgba(0,0,0,.17)}
.night .tile .tile-icon{color:#b3d9e9;background:rgba(196,181,244,.09)}
#site.beating .tile:first-child{box-shadow:0 4px 16px rgba(34,166,135,.2),inset 0 1px rgba(255,255,255,.6)}
@media(max-width:920px){.hand-logo{width:123px;height:97px}.soundrow{margin-left:9px;margin-top:-9px}.wordmark{font-size:27px}}
@media(max-width:650px){.hand-logo{width:86px;height:67px}.brand{gap:2px}.wordmark{font-size:22px;letter-spacing:-1px}.wordmark .sol{letter-spacing:-1px}.soundrow{margin-left:7px;margin-top:-3px}.tile{min-height:57px;padding:8px 12px;gap:9px}.tile .tile-icon{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.floating-leaf{animation:none!important}.vessel-flash{animation:none!important}}


.nav a{color:#132b61;text-decoration:none;border-radius:7px;padding:8px 12px;font-size:12px;font-weight:650;letter-spacing:.01em;transition:background .15s}.nav a:hover{background:rgba(255,255,255,.35)}.night .nav a{color:#e8dafa}.night .nav a:hover{background:rgba(255,255,255,.12)}.project-entry{border-bottom:1px solid rgba(110,130,160,.25);padding:10px 0}.project-entry strong{display:block;font-size:16px}.project-entry small{display:block;margin-top:5px;letter-spacing:normal;text-transform:none;line-height:1.4}.project-entry a{display:block;color:inherit;text-decoration:none}@media(max-width:650px){.nav a{padding:6px 5px;font-size:11px}}