/* Full desktop-style dock with a persistent mobile scrollbar. */
.dock-shell{display:contents}
.dock-scrollbar{display:none;--dock-scroll-track:#ededed;--dock-scroll-thumb:#b8b8b8}
[data-theme=dark] .dock-scrollbar{--dock-scroll-track:#292929;--dock-scroll-thumb:#626262}
@media(max-width:699px){
  html{scroll-padding-bottom:110px}
  body{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
  .wrap{width:calc(100% - 40px)}
  .dock-position{display:flex;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:0 max(12px,env(safe-area-inset-left,0px)) 0 max(12px,env(safe-area-inset-right,0px))}
  .dock{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;width:max-content;max-width:100%;height:64px;padding:8px;border-radius:40px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pinch-zoom;-webkit-overflow-scrolling:touch}
  .dock::-webkit-scrollbar{display:none}
  .dock .dock-item{--size:44px;width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;border-radius:50%;touch-action:pan-x pinch-zoom}
  .dock .dock-item>svg{width:20px;height:20px}
  .dock .dock-tooltip{display:none}
  .dock .dock-dot{bottom:-6px}
  .dock-shell{display:block;position:relative;min-width:0;width:max-content;max-width:100%;border:1px solid var(--dock-border);border-radius:40px;background:var(--dock-surface);box-shadow:var(--dock-shadow);pointer-events:auto;transition:background-color 400ms ease-out,border-color 400ms ease-out}
  .dock-shell.has-overflow{padding-bottom:12px}
  .dock-shell .dock{border:0;box-shadow:none;background:transparent}
  .dock-scrollbar:not([hidden]){appearance:none;-webkit-appearance:none;display:block;position:absolute;left:50%;bottom:2px;width:40%;max-width:144px;height:18px;transform:translateX(-50%);margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:ew-resize;touch-action:pan-x}
  .dock-scrollbar::-webkit-slider-runnable-track{height:2px;border-radius:3px;background:var(--dock-scroll-track)}
  .dock-scrollbar::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--dock-thumb-width,80px);height:2px;margin-top:0;border:0;border-radius:3px;background:var(--dock-scroll-thumb)}
  .dock-scrollbar::-moz-range-track{height:2px;border:0;border-radius:3px;background:var(--dock-scroll-track)}
  .dock-scrollbar::-moz-range-thumb{width:var(--dock-thumb-width,80px);height:2px;border:0;border-radius:3px;background:var(--dock-scroll-thumb)}
  .dock-scrollbar:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
  .hero,.section-page{padding-top:36px}
  .hero h1{font-size:22px;line-height:1.4;margin-bottom:14px}
  .hero p{font-size:15px;line-height:1.8;margin-top:14px}
  .hero .avatar{margin-bottom:22px}
  .page-intro{font-size:15px;line-height:1.8;margin-bottom:28px}
  .section-page>h1{font-size:22px;line-height:1.4}
  .home-work{padding-top:36px}
  .section-label{gap:16px;align-items:baseline}
  .section-label>a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
  .work-row{gap:14px;padding:18px 0}
  .work-row>img{width:76px;height:57px}
  .work-row h3{font-size:14px;line-height:1.5}
  .work-row p{font-size:12px;line-height:1.6}
  .work-row>span{flex:none}
  .work-list{gap:30px}
  .project-caption>p:last-child{font-size:14px;line-height:1.8}
  .bio-copy>p,.experience-entry>p,.earlier-roles p{font-size:15px;line-height:1.8}
  .bio-photo img{aspect-ratio:4/3}
  .bio-links{flex-wrap:wrap;gap:4px 24px}
  .bio-links a{display:inline-flex;align-items:center;min-height:44px}
  .company-heading{gap:12px;align-items:flex-start;margin-bottom:20px}
  .company-heading>div{min-width:0}
  .company-heading h2{font-size:14px;line-height:1.6}
  .company-heading p{font-size:12px;line-height:1.6}
  .company-logo{width:36px;height:36px;margin-top:3px}
  .experience-image figcaption{font-size:12px}
  .experience-entry{margin-bottom:32px;padding-bottom:26px}
  .instagram-profile{gap:14px;align-items:flex-start}
  .instagram-profile .text-link{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
  .reel-grid{gap:24px 16px}
  .reel-card h2{font-size:13px;line-height:1.6}
  .reel-watch{font-size:11px;line-height:1.6}
  .reel-preview-toggle{min-height:44px;font-size:12px}
  .book-grid{gap:22px 16px}
  .lab-controls{gap:12px}
  .lab-controls input{min-height:44px}
  .type-sample{padding:20px;overflow-wrap:anywhere}
  .note p:not(.project-meta){font-size:15px;line-height:1.8}
  .narrative-case{padding-top:28px}
  .narrative-case .back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:20px}
  .narrative-case h1{font-size:25px;line-height:1.4}
  .narrative-case .case-intro{font-size:15px;line-height:1.8;margin:18px 0 24px}
  .case-facts{grid-template-columns:1fr;gap:14px;padding:18px 0 24px}
  .case-facts>div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px}
  .case-facts dt{margin:0;font-size:12px;line-height:1.6}
  .case-facts dd{font-size:12px;line-height:1.6}
  .case-section-nav{margin-bottom:26px;padding-bottom:18px}
  .case-section-nav nav{gap:0 14px}
  .case-section-nav a{display:flex;align-items:center;min-height:44px;padding:8px 4px 8px 14px;font-size:12px;line-height:1.5}
  .case-section-nav a:before{top:20px}
  .case-block>p{font-size:15px;line-height:1.85}
  .case-block h3{font-size:16px;line-height:1.55}
  .story-points>div{grid-template-columns:1fr;gap:5px;padding:14px 0}
  .story-points dt,.story-points dd{font-size:13px}
  .story-table{max-width:100%;overscroll-behavior-x:contain}
  .story-table table{font-size:12px;min-width:360px}
  .story-table th{font-size:12px}
  .story-figure figcaption{font-size:12px;line-height:1.7}
  .story-figure figcaption a{display:inline-flex;align-items:center;min-height:32px;margin-left:0}
  .next-project{min-height:68px;align-items:center}
  footer{padding-top:44px;padding-bottom:16px}
  footer p{font-size:14px;line-height:1.8}
  .social-links{flex-wrap:wrap;gap:0 24px}
  .social-links a,.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
  .footer-bottom{align-items:center;flex-wrap:wrap;gap:0 18px;margin-top:24px;font-size:11px}
  .wrap p,.case-facts dd,.story-points dd{overflow-wrap:break-word}
}
@media(max-width:359px){
  .wrap{width:calc(100% - 32px)}
  .work-row{gap:12px}.work-row>img{width:66px;height:50px}
  .instagram-profile{flex-wrap:wrap;gap:4px 16px}
}