/* Keep scrolling content clear of the portrait on every portfolio view. */
body:is(.home-page, .info-shell) {
  --header-clearance: clamp(12px, 1.15vw, 14px);
}
body.home-page {
  --controls-top: calc(var(--header-height, 0px) - var(--header-clearance));
}
body:is(.home-page, .info-shell) .portfolio-navigation {
  padding-bottom: var(--header-clearance);
  margin-bottom: calc(-1 * var(--header-clearance));
}
/* A compact introduction on the same column edges as About and the work. */
body.home-page .gallery-heading {
  overflow-anchor: none;
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  align-items: start;
  column-gap: clamp(20px,4vw,58px);
  row-gap:16px;
  width: 88%;
  margin: 0 auto;
  padding: 12px 0 clamp(14px,1.5vw,22px);
}
body.home-page .gallery-heading h1 {
  grid-column:1;grid-row:2;
  margin: 0;
  font: 500 clamp(31px,3.45vw,52px)/1 'Space Grotesk',Inter,sans-serif;
  letter-spacing: -.055em;
}
.gallery-heading p {
  margin: 0;
  max-width: 54ch;
  color: var(--text);
  font: 400 clamp(15px,1.12vw,17px)/1.48 Inter,sans-serif;
}
.gallery-heading[hidden] {display:none!important}
html[data-signature-stage] .gallery-heading {visibility:hidden}
@media(min-width:1001px){
  body.home-page .gallery-heading {width:min(72%, calc(56vh + 36vw));max-width:1280px}
}
@media(max-width:650px){
  body.home-page .gallery-heading {width:calc(100% - 40px);grid-template-columns:1fr;gap:9px;padding:17px 0 11px}
  body.home-page .gallery-heading h1 {font-size:30px}
}
@media(min-width:1001px) and (max-height:830px){
  body.home-page .gallery-heading {padding-block:14px 6px}
  body.home-page .gallery-heading + .work-controls {padding-block:6px 4px}
  body.home-page #work {padding-top:12px}
}

.gallery-descriptions {display:grid;min-width:0;grid-column:2;grid-row:1 / span 2;padding-top:8px}
.gallery-descriptions p {grid-area:1 / 1;align-self:start}

/* Stable masthead: native-sized portrait, with no compact scroll state. */
body:is(.home-page,.info-shell) header .brand .brand-signature {width:56px}
body.home-page[data-layout="rive"] .work-controls {display:block}
body.home-page .work-controls {padding-top:16px;padding-bottom:16px}
body.home-page .work-controls .gallery-rule {margin-top:12px}
body.home-page .navigation-group {padding-top:12px}
@media(max-width:650px){
  body:is(.home-page,.info-shell) header .brand .brand-signature {width:48px}
  body.home-page .work-controls {padding-top:14px;padding-bottom:14px}
}

/* Gallery modes stay mounted while the heading and projects change. */
.gallery-tabs {
  display:flex;
  position:relative;
  align-items:center;
  gap:24px;
  grid-column:1;grid-row:1;justify-self:start;
  width:max-content;
  margin:0;
  font:500 17px/1.5 "Space Grotesk",Inter,sans-serif;
}
.gallery-tabs[hidden] {display:none!important}
html[data-signature-stage] .gallery-tabs {visibility:hidden}
.gallery-tabs a {
  position:relative;
  display:block;
  padding:8px 0;
  color:var(--muted);
  text-decoration:none;
  transition:color .28s ease;
}
.gallery-tabs a[aria-current="page"] {color:var(--text)}
.gallery-tabs a::after {
  content:'';position:absolute;inset:auto 0 0;height:1px;
  background:var(--edge);opacity:0;transition:opacity .28s ease;
}
.gallery-tabs a:hover::after,.gallery-tabs a:focus-visible::after {opacity:1}
.gallery-tabs::after {
  content:'';position:absolute;left:0;bottom:0;height:2px;
  width:var(--tab-width,35px);background:var(--text);
  transform:translateX(var(--tab-left,0px));
  transition:transform .32s cubic-bezier(.22,.7,.25,1),width .32s cubic-bezier(.22,.7,.25,1);
  pointer-events:none;
}

@media(max-width:650px){
  .gallery-tabs {font-size:16px;gap:24px}
  .gallery-descriptions {grid-column:1;grid-row:3;padding-top:0}
}
@media(prefers-reduced-motion:reduce){.gallery-tabs a,.gallery-tabs a::after,.gallery-tabs::after {transition:none}}