/* The dock completes the landing viewport, then becomes the sticky section nav.
   Content may grow at extreme zoom/short heights: never clip the hiring copy. */
:root{--dock-height:4.5rem}
.hero{min-height:calc(100vh - var(--dock-height));min-height:calc(100svh - var(--dock-height));overflow:hidden}
.hero-foot--controls{display:none!important}
.hero-inner{padding-block:clamp(1rem,4vh,3rem);flex:1 0 auto}
.hero h1{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55ch;white-space:normal;overflow-wrap:anywhere}
.hero h1 .name-first,.hero h1 .name-last{display:inline-block;max-width:100%;margin-left:0;overflow-wrap:anywhere}
.hero h1 .name-tail{display:inline-block;white-space:nowrap}
.hero .caret{width:1ch;height:.85em;margin-left:.08em}
.js .hero-inner>*{animation:none}
.hero .status-rows{display:grid}
.hero-wave{height:clamp(90px,18svh,180px);flex-shrink:0}
.hero-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;z-index:8}
.hero-identity{display:flex;align-items:center;gap:.7rem;min-width:0;flex-wrap:wrap}
.hero-socials{margin:0;gap:.2rem}
.hero-socials a{min-width:44px;min-height:44px;padding:.65rem}
.header-scene{border:0;margin:0;min-width:0;position:relative}
.header-scene summary{display:flex;justify-content:center;align-items:center;gap:.6rem;min-height:44px;padding:.35rem .5rem;list-style:none;font-size:.65rem;text-align:center;line-height:1.6;letter-spacing:0;cursor:pointer}
.header-scene summary::before,.header-scene[open] summary::before{content:none}
.header-scene summary::-webkit-details-marker{display:none}
.header-scene .hf-theme{min-width:0;overflow-wrap:anywhere;margin-bottom:.8rem;font-size:.72rem}
.header-scene .hf-theme b{color:var(--accent);font-weight:500}
.header-scene .hf-swatch{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);flex:none}
.scene-chevron{display:none}
.header-scene[open] .scene-chevron{transform:rotate(180deg)}
.scene-panel{position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%);width:min(28rem,calc(100vw - 2.5rem));max-height:calc(100svh - 9rem);overflow:auto;padding:1.2rem;background:#0a100d;border:1px solid #52685b;box-shadow:0 12px 32px #0008;border-radius:4px;color:var(--soft);font-size:.8rem;line-height:1.65;letter-spacing:0;text-align:left;z-index:10}
.scene-title{color:var(--ink);font-weight:600;margin-bottom:.6rem}
.scene-panel #tide-keyboard{font-size:.7rem;margin-top:.6rem}
.scene-panel .scene-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.scene-panel button{min-height:44px;padding:.65rem .8rem;border:1px solid #668a75;background:#1b2922;color:var(--ink);border-radius:4px;font:inherit;font-size:.75rem;letter-spacing:0;align-items:center;justify-content:center;gap:.5rem}
.scene-panel button:disabled{opacity:.6;cursor:default}
.header-scene :is(button,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dock .wrap,.dock nav{min-width:0}
.dock{bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.dock .wrap{flex-wrap:nowrap;gap:1rem}
.dock nav{overflow-x:auto;max-width:100%}
.dock ul{flex-wrap:nowrap;width:max-content;min-width:100%}
.dock a{min-height:44px}
.dock .brand{flex:none}
/* Reflow fixes: flexible text columns must be allowed below intrinsic widths. */
.status-rows>div,.repo-row,.hero-copy-shield,.actions,.contact-grid>*{min-width:0}
.status-rows dd{min-width:0;overflow-wrap:anywhere}
.repo-row a,.contact-grid a,.btn{overflow-wrap:anywhere}
.actions{flex-wrap:wrap}
.btn{white-space:normal;max-width:100%}
/* Let the desktop heading use the hero width; paragraph measure stays unchanged. */
@media(min-width:901px){.hero-copy-shield{width:calc(100% + 1.2rem)}}
@media(max-width:900px){
  .hero-bar{display:flex;gap:.5rem}
  .hero-identity{flex:1}
  .hero-socials{order:2}
  .header-scene{order:3}
  .header-scene summary{padding-inline:.25rem}
  .header-scene summary > span:nth-child(2),.header-scene .scene-chevron{display:none}
  .header-scene .hf-swatch{width:.6rem;height:.6rem}
  .hero-identity{font-size:.65rem;gap:.45rem}
  .hero-inner{padding-block:1.2rem}
  .hero .prop{font-size:.83rem;line-height:1.65}
  .hero .role{font-size:.78rem;line-height:1.6}
  .hero-wave{height:clamp(70px,13svh,120px)}
  .dock .brand .txt{display:none}
  .dock .wrap{gap:.5rem}
}
@media(max-width:420px){
  .hero .actions{gap:.6rem}
  .hero .btn{padding:.7rem .8rem;font-size:.7rem}
  .hero-copy-shield{padding-block:.4rem}
}
html:not(.js) .scene-actions,html:not(.js) #tide-instruction,html:not(.js) #tide-keyboard{display:none}
@media print{.header-scene{display:none}.hero{min-height:0}}