/* About and Contact content fills the window below the measured sticky header.
   Their own headings sit outside that content-height budget. Work keeps its original layout. */
.portfolio-home{--section-viewport:calc(100vh - var(--sticky-header-height,var(--header-height)))}
@supports(height:100dvh){.portfolio-home{--section-viewport:calc(100dvh - var(--sticky-header-height,var(--header-height)))}}
.viewport-section{display:grid;grid-template-rows:auto auto;height:auto;min-height:0;outline:none}
.viewport-section>.projects-header{min-height:var(--header-height)}
.viewport-section>.about-grid,.viewport-section>.contact-stage{height:var(--section-viewport);min-width:0;min-height:0}
.viewport-section>.projects-header h2{padding-block:24px}


/* Use flexible tracks rather than inherited minimum card heights. */
.about-section>.about-grid{grid-template-rows:minmax(0,.96fr) minmax(0,1.04fr);min-height:0}
.about-section .about-card{min-height:0;padding:24px;gap:20px}
.about-section .about-story{gap:32px}
.about-section .about-photography{min-height:0;gap:20px}
.about-section .photography-heading-row,.about-section .photography-view-toggle{flex:none}
.about-section .photography-stage{min-height:160px;min-width:0}
.about-section .photography-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:max-content;align-content:start;gap:8px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:auto;scrollbar-gutter:stable;padding:3px}
.about-section .about-experience{padding:16px}
.about-section .about-experience-columns{gap:8px 16px}
.about-section .about-experience h3{font-size:clamp(1.5rem,8cqi,2.5rem)}







/* Artwork scales within the Contact stage without adding height to the section. */
.contact-section>.contact-stage{height:var(--section-viewport);min-height:0}
.contact-section .contact-doodle .contact-cup-art{max-height:calc(100% - 48px);min-width:0}

/* Stack naturally when a complete section cannot remain legible in one window.
   The script also enables this content-first fallback for short windows or zoom. */
.viewport-section.viewport-flow{height:auto;min-height:0;grid-template-rows:auto auto}
.viewport-section.viewport-flow>.about-grid,.viewport-section.viewport-flow>.contact-stage{height:auto;min-height:var(--section-viewport)}
.about-section.viewport-flow>.about-grid{grid-template-rows:minmax(0,auto) minmax(0,auto)}
.about-section.viewport-flow .about-photography{min-height:400px}
.contact-section.viewport-flow>.contact-stage{min-height:max(420px,var(--section-viewport))}

@media(min-width:901px) and (max-width:1180px){
  .about-section .about-card{padding:20px}
  .about-section .about-music,.about-section .about-experience{padding:16px}
}
@media(max-width:900px){
  .viewport-section{height:auto;min-height:0;grid-template-rows:auto auto}
  .viewport-section>.about-grid,.viewport-section>.contact-stage{height:auto;min-height:var(--section-viewport)}
  .about-section>.about-grid,.about-section.viewport-flow>.about-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(480px,auto) auto auto}
  .about-section .about-story{grid-column:1;grid-row:1}
  .about-section .about-photography{grid-column:2;grid-row:1;min-height:480px}
  .about-section .about-experience{grid-column:1/-1;grid-row:2;min-height:280px}
  .about-section .about-music{grid-column:1/-1;grid-row:3;min-height:320px;padding:24px}

  .contact-section>.contact-stage{min-height:var(--section-viewport)}
}

@media(max-width:600px){
  .about-section>.about-grid,.about-section.viewport-flow>.about-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .about-section :is(.about-story,.about-photography,.about-experience,.about-music){grid-column:1;grid-row:auto}
  .about-section .about-story{min-height:400px;padding:32px var(--content-inset)}
  .about-section .about-photography{min-height:540px;padding:32px 24px}
  .about-section .photography-stage{min-height:320px}
  .about-section .about-experience{min-height:300px;padding:32px var(--content-inset)}
  .about-section .about-music{padding:28px var(--content-inset)}
}

/* Blocks use 32px internally and retain 80px at desktop page edges. */
#about .about-card{padding:32px}
#about .about-photography{gap:16px}
@media(min-width:901px){
  #about .about-story{padding-left:80px}
  #about :is(.about-experience,.about-music){padding-right:80px}
}
@media(max-width:900px){
  #about>.projects-header h2{padding-inline:24px}
}
@media(max-width:600px){
  #about>.projects-header h2{grid-column:1/6}
  #about>.projects-header .projects-header-spacer{grid-column:6/13}
}

/* Music content sizing lives in music.css. */

#about #music-heading{font:400 1rem/1.4 Inter,Arial,sans-serif;letter-spacing:normal;text-transform:uppercase;color:var(--muted)}

@media(min-width:901px){}

/* Shared homepage block padding; sticky navigation keeps its 84px height. */
.portfolio-home .hero > .grid-card{padding:32px}
.portfolio-home .hero > .introduction{padding-left:var(--content-inset)}
.portfolio-home .creative-space{--graphic-inset:32px}
.portfolio-home .work-bar .section-tile{padding:32px}
.portfolio-home .work-bar .section-tile:first-child{padding-left:var(--content-inset)}
.portfolio-home .work-bar .section-tile:last-child{padding-right:var(--content-inset)}
.portfolio-home .projects-header h2{padding:32px 32px 32px var(--content-inset)}
.portfolio-home .contact-copy{padding-block:32px}
@media(min-width:901px){.portfolio-home .hero > .role{padding-right:80px}}
@media(min-width:701px) and (max-width:900px){
 .portfolio-home .creative-space{padding-right:var(--content-inset)}
 .portfolio-home .scribble-art{right:var(--content-inset)}
 .portfolio-home .hero > .current{padding-left:var(--content-inset)}
 .portfolio-home .hero > .previous{padding-right:var(--content-inset)}
}
@media(max-width:700px){
 .portfolio-home .hero > .introduction{padding-inline:var(--content-inset)}
 .portfolio-home .hero > .current{padding-left:var(--content-inset)}
 .portfolio-home .hero > .previous{padding-right:var(--content-inset)}
}
@media(max-width:600px){#about .about-card{padding-inline:var(--content-inset)}}
@media(max-width:480px){.portfolio-home .work-bar .section-tile{padding-inline:var(--content-inset)}}

/* The name stays an eyebrow; the opening thought leads the personal bio. */
#about .about-bio{gap:20px}
#about .about-bio .about-bio-lead{max-width:23ch;font:500 clamp(1.625rem,2.15vw,2rem)/1.14 var(--display-font);letter-spacing:normal;text-wrap:pretty;color:var(--ink)}
#about .about-bio p{max-width:none;font:400 1rem/1.5 Inter,Arial,sans-serif;color:var(--muted)}
#about .about-bio strong{font-weight:600;color:var(--ink)}
#about .about-bio .about-bio-personal{padding-top:4px}

/* One compact current experience entry leaves more room for music. */
#about .about-experience{display:flex;flex-direction:column;justify-content:center;gap:0;container-type:normal}
#about .about-experience .eyebrow{margin:0 0 12px;font:400 1rem/1.4 Inter,Arial,sans-serif;color:var(--muted)}
#about .about-experience h3{align-self:stretch;margin:0 0 12px;font:400 1.5rem/1.2 Inter,Arial,sans-serif;color:var(--brand-primary)}
#about .about-experience .about-school{margin:0;font:400 1rem/1.5 Inter,Arial,sans-serif;color:var(--muted)}
@media(min-width:901px){
 #about>.about-grid{grid-template-rows:auto minmax(0,1fr)}
 #about.viewport-flow>.about-grid{grid-template-rows:auto auto}
}
@media(max-width:900px){#about .about-experience{min-height:0}}

#about .about-bio .about-bio-degree{font-weight:700;color:var(--brand-primary);overflow-wrap:normal;word-break:normal}

#about .about-bio .about-bio-engineering{font-weight:700;color:var(--ink)}
#about .about-bio .about-bio-design{font-weight:700;color:var(--brand-primary)}
/* Add 20px to the existing 20px stack gap only after the opening statement. */
#about .about-bio .about-bio-lead{margin-bottom:20px}