/* Gallery and About share the same fixed visual anchor. */
body:is(.home-page,.info-shell) :is(.portfolio-navigation,.info-topbar) header {
  min-height:104px;
  padding-block:2px;
}
body:is(.home-page,.info-shell) header .brand .brand-signature {width:clamp(80px,9vw,104px)}
body:is(.home-page,.info-shell) header .main-menu {gap:clamp(20px,3vw,40px)}
body:is(.home-page,.info-shell) header .main-menu a {font-size:clamp(15px,1.45vw,18px);padding-block:10px}
body > :is(main,.work-controls)[hidden],.info-shell .rive-dock {display:none!important}

/* The same category buttons are used in the compact menu and its scrolled dock. */
.home-page .work-controls {padding-top:8px}
.home-page :is(.filters,.dock-filters) {display:grid;grid-template-columns:minmax(0,max-content);gap:1px;justify-content:start}
.home-page .filter-row {display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:13px;align-items:start}
.home-page .family-icon {width:24px;height:34px;display:grid;place-items:center;color:var(--text)}
.home-page .family-icon > :is(.tool-icon,.brain-icon) {display:grid;place-items:center;width:22px;height:22px;flex:none;line-height:1}
.home-page .family-icon .tool-rive {padding:4px}
.home-page .family-icon .tool-adobe {font-size:13px;letter-spacing:-.5px}
.home-page .family-tabs {display:flex;flex-wrap:wrap;align-items:center;gap:0 15px;min-width:0}
.home-page :is(.filters,.dock-filters) .filter,
.home-page :is(.filters,.dock-filters) .filter:not(.active),
.home-page :is(.filters,.dock-filters) .filter:not(.active):hover {
  flex:0 0 auto;width:auto;min-width:0;min-height:34px;height:auto;
  padding:6px 1px;font:400 15px/22px 'Space Grotesk',Inter,sans-serif;
  border:0;border-radius:0;white-space:nowrap;justify-content:flex-start;
}
.home-page :is(.filters,.dock-filters) .filter.active {color:var(--text)}
.home-page .filter .category-name {font-size:inherit;line-height:inherit}
.home-page .navigation-group {margin-top:8px}
.home-page :is(.navigation-group .pages,.dock-pages),.home-page .pages .page-row {gap:8px}
.home-page .pages .page-row button,.home-page .pages .page-row button.current,.home-page .pages .page-row button.current:hover:enabled,
.home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child {
  width:31px;min-width:31px;flex:0 0 31px;height:32px;line-height:30px;font-size:15px;
}
.home-page .pages .page-step:first-child,.home-page .pages .page-step:last-child {width:auto;flex-basis:auto;min-width:42px}
.home-page .pages .page-step .step-label,.home-page .pages .page-step:hover:enabled .step-label {font-size:15px}
.home-page #work {padding-top:22px}
.home-page .rive-dock .dock-filters {display:block}
.home-page .rive-dock-inner {padding-bottom:6px}
.home-page .rive-dock .dock-pages {margin-top:2px}
.home-page .dock-pages[hidden]{display:none}

/* The contact row and portrait share one bottom edge above Experience. */
.info-shell .info-page {padding-top:22px}
.info-shell .about-layout {align-items:stretch;column-gap:clamp(24px,4vw,62px)}
.info-shell .about-layout > div {display:flex;flex-direction:column;min-width:0}
.info-shell .about-layout h1 {font-size:clamp(36px,3.8vw,58px);line-height:1.04}
.info-shell .about-layout .specialties {margin-top:16px;gap:0 20px}
.info-shell .about-layout .software-list {margin-top:4px}
.info-shell .about-layout .specialties li {min-height:47px;padding:8px 0;font-size:clamp(14px,1.22vw,17px)}
.info-shell .about-layout .social-links {grid-template-columns:repeat(3,minmax(0,1fr));margin-top:auto;gap:12px;padding-top:14px}
.info-shell .about-layout .social-links a {display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:7px;padding:9px 0;font-size:14px}
.info-shell .social-links svg {width:17px;height:17px}
.info-shell .about-layout figure {margin:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;position:relative}
.info-shell .about-layout .portrait {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.info-shell .experience {margin-top:clamp(32px,4vw,56px)}

@media(min-width:651px){
  .info-shell .about-layout {grid-template-columns:minmax(0,1.1fr) minmax(0,.90fr)}
  .info-shell .about-layout > div {min-height:clamp(360px,32vw,465px)}
}
@media(max-width:650px){
  body:is(.home-page,.info-shell) :is(.portfolio-navigation,.info-topbar) header {min-height:82px;padding-block:2px}
  body:is(.home-page,.info-shell) header .brand .brand-signature {width:80px}
  .home-page .work-controls {padding-top:7px}
  .home-page .filter-row {grid-template-columns:20px minmax(0,1fr);column-gap:8px}
  .home-page .family-tabs {column-gap:10px}
  .home-page .family-icon {width:20px;height:34px}
  .home-page .family-icon > :is(.tool-icon,.brain-icon) {width:19px;height:19px}
  .home-page :is(.filters,.dock-filters) .filter,.home-page :is(.filters,.dock-filters) .filter:not(.active),.home-page :is(.filters,.dock-filters) .filter:not(.active):hover {font-size:14px}
  .home-page #work {padding-top:16px}
  .info-shell .about-layout {grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:14px 16px}
  .info-shell .about-layout > div {display:contents}
  .info-shell .about-layout h1 {grid-area:1/1/2/3;font-size:clamp(27px,6.5vw,39px);align-self:end}
  .info-shell .about-layout figure {grid-area:2/2/5/3;min-height:140px}
  .info-shell .about-layout .specialties {grid-area:2/1;grid-template-columns:1fr;margin:0}
  .info-shell .about-layout .software-list {grid-area:3/1}
  .info-shell .about-layout .specialties li {min-height:32px;padding:5px 0;font-size:13px;gap:6px}
  .info-shell .about-layout .social-links {grid-area:4/1;gap:4px;margin:0;padding:0}
  .info-shell .about-layout .social-links a {flex-direction:column;justify-content:flex-end;gap:4px;padding:4px 0;font-size:11px}
}

/* A small masthead and a more legible, left-aligned category index. */
body:is(.home-page,.info-shell) :is(.portfolio-navigation,.info-topbar) header {
  min-height:84px;
  padding-block:4px;
}
body:is(.home-page,.info-shell) header .brand .brand-signature {width:clamp(80px,7vw,92px)}
body:is(.home-page,.info-shell) header .main-menu {gap:24px}
body:is(.home-page,.info-shell) header .main-menu a {font-size:15px;letter-spacing:-.015em;padding-block:7px}
.home-page .work-controls {padding-top:13px}
.home-page .filter-row {grid-template-columns:32px minmax(0,1fr);column-gap:15px;align-items:center}
.home-page .family-icon {
  width:32px;height:22px;
  justify-items:start;
  border-right:1px solid var(--line);
}
.home-page .family-tabs {column-gap:24px}
.home-page :is(.filters,.dock-filters) .filter,
.home-page :is(.filters,.dock-filters) .filter:not(.active),
.home-page :is(.filters,.dock-filters) .filter:not(.active):hover {
  position:relative;
  font-size:17px;line-height:24px;min-height:36px;padding-block:6px;
}
.home-page .family-tabs .filter + .filter::before {
  content:'';display:block;position:absolute;inset:auto auto 50% -13px;
  width:3px;height:3px;border-radius:50%;background:var(--edge);transform:translateY(50%);
  pointer-events:none;
}
@media(min-width:1001px){
  body:is(.home-page,.info-shell) {
    --desktop-column-width: min(72%, calc(56vh + 36vw), 1280px);
  }
  body.home-page :is(.portfolio-navigation header,.work-controls,#work,.rive-dock-inner),
  body.info-shell :is(.info-topbar header,.info-page) {
    width:var(--desktop-column-width);max-width:1280px;
  }
  body.home-page .motion-reading {
    left: calc((100% - var(--desktop-column-width)) / 2 - 40px);
  }
}
@media(max-width:650px){
  body:is(.home-page,.info-shell) :is(.portfolio-navigation,.info-topbar) header {min-height:72px;padding-block:4px}
  body:is(.home-page,.info-shell) header .brand .brand-signature {width:74px}
  body:is(.home-page,.info-shell) header .main-menu {gap:19px}
  body:is(.home-page,.info-shell) header .main-menu a {font-size:14px}
  .home-page .work-controls {padding-top:9px}
  .home-page .filter-row {grid-template-columns:25px minmax(0,1fr);column-gap:9px}
  .home-page .family-icon {width:25px;height:18px}
  .home-page .family-tabs {column-gap:16px}
  .home-page :is(.filters,.dock-filters) .filter,.home-page :is(.filters,.dock-filters) .filter:not(.active),.home-page :is(.filters,.dock-filters) .filter:not(.active):hover {font-size:15px;line-height:21px;min-height:34px}
  .home-page .family-tabs .filter + .filter::before {left:-9px;width:2px;height:2px}
}