/* Shared 4px spacing scale. Photo compositions keep their own proportions. */
:root{
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;
  --space-16:4rem;--space-24:6rem;
  --page-gutter:var(--space-8);--page-top:var(--space-6);
  --chrome-row:1.5rem;--reader-footer-height:3.5rem;
}
.site-header{padding:var(--page-top) var(--page-gutter) 0;align-items:baseline;height:auto;min-height:calc(var(--page-top) + var(--chrome-row))}
.site-header .wordmark{padding-block-start:0}
.section-switch{align-items:baseline;gap:var(--space-6)}
.section-switch a,.info-open{padding:0 0 var(--space-1);line-height:1.5}
.header-tools{align-items:baseline;gap:var(--space-6)}
.overview-toggle{width:var(--chrome-row);height:var(--chrome-row);align-self:center}
.reader-footer{padding-inline:var(--page-gutter);height:var(--reader-footer-height);gap:var(--space-5)}
.panel-meta{inset-inline:var(--page-gutter);bottom:calc(var(--reader-footer-height) + var(--space-4));gap:var(--space-4)}
.panel-title{column-gap:var(--space-3)}
.back-to-projects{inset-inline-start:var(--page-gutter)}
.viewer,.information{padding:var(--page-top) var(--page-gutter) var(--space-6)}
.viewer-header,.information-header{min-height:var(--chrome-row);align-items:baseline;gap:var(--space-4)}
#viewer-close,#info-close{padding:0;min-height:var(--chrome-row)}
.viewer-header .text-button span{display:none}
.viewer-stage{margin-block-start:var(--space-6);margin-inline:calc(-1 * var(--page-gutter))}
.viewer-meta{margin-block-start:var(--space-4);min-height:var(--chrome-row);align-items:baseline;gap:var(--space-4)}
.viewer-meta>div{gap:var(--space-6)}
.viewer-bottom{min-height:5rem;padding-block-start:var(--space-4);justify-content:center}
.thumbnail-strip{gap:var(--space-2);padding:var(--space-1)}
.thumbnail-strip button{padding:var(--space-1)}
.thumbnail-strip img{width:var(--space-6);height:var(--space-8)}
.information{padding-block-end:var(--space-16)}
.information-body{grid-template-columns:8rem minmax(0,1fr);gap:var(--space-8);margin-block-start:clamp(var(--space-12),12svh,var(--space-24))}
.information h1{margin-block-start:var(--space-2)}
.information .bio p{margin-block-end:var(--space-6)}
.information .bio p:last-child{margin-block-end:0}
.information-support{margin-block-start:var(--space-16);gap:var(--space-8)}
.information h2{margin-block-end:var(--space-4)}
.information-links>div{gap:var(--space-3)}
@media(max-width:1000px){
  :root{--page-gutter:var(--space-6)}
  .site-header{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--space-3)}
  .section-switch{grid-column:1/-1;grid-row:2;justify-self:center}
  .header-tools{grid-column:2;grid-row:1}
  body[data-section="work"]{--reader-footer-height:5rem}
  .reader-footer:has(#categories:not([hidden])){min-height:var(--reader-footer-height);padding-block:var(--space-2) var(--space-3);row-gap:var(--space-2)}
  .reader-footer #categories{gap:var(--space-4)}
}
@media(max-width:640px){
  :root{--page-gutter:var(--space-5);--page-top:var(--space-5)}
  .site-header{row-gap:var(--space-3)}
  .site-header .wordmark{flex:1 0 min(100%,9rem);overflow-wrap:normal}
  .header-tools{margin-inline-start:var(--space-5);gap:var(--space-4)}
  .section-switch{gap:var(--space-2) var(--space-6);flex-wrap:wrap}
  .information-body{grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin-block-start:var(--space-12)}
  .information h1{margin:0}
  .information-support{margin-block-start:var(--space-12);gap:var(--space-8)}
  .viewer-meta>div{gap:var(--space-1)}
}