/* Bottom menu (phones): a floating rounded bar above the bottom edge. The active tab's icon lifts into a round
   bubble sitting in a curved notch cut into the bar; bubble and notch slide between tabs
   (position from nav-dock.js). Six tabs including Résumé. Shared by the home page and the résumé. */
@media(max-width:960px){
  :root[data-style] .nav-dock{--bubble-x:50%;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:auto;min-height:64px;padding:8px 4px 4px;gap:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;isolation:isolate}
  /* The bar surface; the bubble's ring in the same colour forms the raised curve. */
  :root[data-style] .nav-dock::before{content:'';position:absolute;inset:0;z-index:-2;border-radius:22px;background:var(--site-surface);border:1px solid var(--site-line);box-shadow:0 10px 28px #0000002b,0 2px 6px #00000014;}
  /* The bubble that holds the active icon. */
  :root[data-style] .nav-dock::after{content:'';position:absolute;z-index:-1;top:-30px;left:var(--bubble-x);width:56px;height:56px;margin-left:-28px;border-radius:50%;background:var(--site-accent-soft);border:5px solid var(--site-surface);box-shadow:0 4px 12px #0000001f;opacity:0;scale:.6;transition:left .45s cubic-bezier(.3,1.3,.5,1),opacity .25s,scale .35s cubic-bezier(.3,1.4,.5,1)}
  :root[data-style] .nav-dock.has-bubble::after{opacity:1;scale:1}
  :root[data-style] .nav-dock :is(a,button){position:relative;height:52px;padding:6px 1px 4px;gap:4px;justify-content:flex-end;border-radius:0;background:transparent!important;color:var(--site-muted);transition:color .25s}
  :root[data-style] .nav-dock :is(a,button)::after{content:none!important}
  :root[data-style] .nav-dock .nav-label{font-size:10px;font-weight:500;letter-spacing:0;transition:font-weight .2s}
  .nav-dock svg{width:21px;height:21px;transition:transform .45s cubic-bezier(.3,1.35,.5,1),color .25s}
  :root[data-style] .nav-dock .is-lifted{color:var(--site-ink)}
  :root[data-style] .nav-dock .is-lifted svg{transform:translateY(-30px) scale(1.16);color:var(--site-accent);stroke-width:2}
  :root[data-style] .nav-dock .is-lifted .nav-label{font-weight:700}
  :root[data-style="sketch"] .nav-dock::after{background:var(--site-yellow);border-color:var(--site-surface)}
}
@media(max-width:360px){:root[data-style] .nav-dock .nav-label{font-size:9px}}
@media(max-width:960px) and (prefers-reduced-motion:reduce){:root[data-style] .nav-dock::after,.nav-dock svg{transition:none}}

/* Résumé page: round section links (Home, Work, Experiments) in one line with Download résumé;
   the bouncing seals close the page just above the footer. The phone footer clears the menu. */
.resume-toolbar{flex-direction:row!important;flex-wrap:nowrap;align-items:center!important;justify-content:space-between}
.resume-balls{display:flex;gap:10px;flex:none}
.resume-balls a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1.5px solid var(--site-accent);border-radius:999px;background:var(--site-surface);color:var(--site-ink)!important;font:500 15px/1 var(--font-ui,'RagInter',sans-serif);text-decoration:none!important;transition:background .2s,translate .2s}
.resume-balls a:hover{background:var(--site-accent-soft);translate:0 -2px}
:root[data-style="sketch"] .resume-balls a:nth-child(1){background:var(--site-pink)}
:root[data-style="sketch"] .resume-balls a:nth-child(2){background:var(--site-yellow)}
:root[data-style="sketch"] .resume-balls a:nth-child(3){background:var(--site-cyan)}
.resume-seal-row{display:flex;justify-content:center;padding:34px 20px 42px}
.resume-seal-row .resume-seals{margin:0}
.resume-seal-row .resume-seals span{animation:seal-bounce 2.4s cubic-bezier(.45,0,.55,1) infinite}
.resume-seal-row .resume-seals span:nth-child(2){animation-delay:.3s}
.resume-seal-row .resume-seals span:nth-child(3){animation-delay:.6s}
@keyframes seal-bounce{0%,100%{translate:0 0}18%{translate:0 -16px}32%{translate:0 0}42%{translate:0 -6px}52%{translate:0 0}}
@media(prefers-reduced-motion:reduce){.resume-seal-row .resume-seals span{animation:none}}
@media(max-width:960px){
  .resume-toolbar{gap:8px!important}
  .resume-toolbar{flex-direction:column!important;align-items:center!important;gap:14px!important}
  .resume-balls{gap:8px;justify-content:center}
  .resume-balls a{min-height:42px;padding:0 16px;font-size:14px}
  .resume-toolbar .resume-download{flex:none;min-height:44px!important;padding:8px 11px!important;font-size:13px!important;gap:7px!important}
  .resume-seal-row{padding:26px 16px 34px}
  .resume-seal-row .resume-seals{gap:18px}
  .resume-seal-row .resume-seals span{width:96px;height:96px;font-size:18px}
  body.resume-page .site-footer#contact{margin-bottom:-96px!important;padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))!important}
  body.resume-page{padding-bottom:96px}
}

@media(max-width:380px){.resume-balls a{padding:0 13px}.resume-toolbar .resume-download{padding:8px 9px!important;font-size:12.5px!important}.resume-seal-row .resume-seals span{width:86px;height:86px;font-size:16px}}