/* Shared composition; existing type scales and visual treatments stay intact. */
.home-layout,.about-layout { --panel-gap:40px; --aside-width:calc((100% - 80px)/3); }
.editorial.home-page main.home-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:40px; padding-top:40px; }
.home-profile { min-width:0; display:flex; flex-direction:column; align-self:start; min-height:calc(100dvh - 128px); }
.home-profile .home-intro { padding:0 0 64px; }
.home-page .home-intro h1 { max-width:100%; }
.editorial.home-page .home-profile .site-footer { max-width:none; margin: auto 0 0; flex-direction:column; gap:16px; padding:28px 0 32px; }
.home-profile .site-footer nav { order:-1; }
.home-page #work { min-width:0; }
.editorial.home-page .work-feed { grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 40px; }
.about-layout { max-width:1600px; margin:40px max(28px,calc((100vw - 1600px)/2)) 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:40px; align-items:start; }
.about-sidebar { position:sticky; top:28px; max-height:calc(100dvh - 56px); overflow-y:auto; overscroll-behavior-y:contain; padding:0 8px 28px 0; min-width:0; scrollbar-width:thin; }
.short-project h2[id],.about-page section[id] { scroll-margin-top:32px; }
.editorial.about-page .about-layout main { max-width:none; margin:0; min-width:0; }
.about-page .about-intro { padding:0 0 64px; }
.about-page .intro-layout { display:block; }
.about-sidebar .portrait { transform:none; max-width:330px; margin:0 0 32px; }
.about-sidebar .portrait img { border-radius:5px; }
.about-page .editorial-section { grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:40px; }
.about-page .editorial-section > header { position:static; }
.editorial.about-page > .site-footer { max-width:1600px; margin-inline:max(28px,calc((100vw - 1600px)/2)); }
@media(min-width:769px) {
 /* Account for the gallery's internal gap to make all three columns equal. */
 .editorial.home-page main.home-layout,.about-layout { grid-template-columns:minmax(0,var(--aside-width)) minmax(0,1fr); }
}
@media(max-width:768px) {
 .editorial.home-page main.home-layout { display:flex; flex-direction:column; padding-top:36px; gap:0; }
 .home-profile { display:contents; }
 .home-profile .home-intro { order:0; max-width:768px; padding-bottom:48px; }
 .home-page #work { order:1; width:100%; }
 .editorial.home-page .home-profile .site-footer { order:2; width:100%; margin:0; }
 .about-layout { display:block; margin-top:36px; }
 .about-sidebar { position:static; max-height:none; overflow:visible; padding:0 0 36px; }
 .about-sidebar .portrait { max-width:280px; }
 .about-page .about-intro { max-width:768px; }
}
@media(max-width:768px) {
 .editorial.home-page main.home-layout,.about-layout { margin-inline:22px; }
 .editorial.home-page .work-feed { grid-template-columns:minmax(0,1fr); gap:36px; }
 .editorial.about-page > .site-footer { margin-inline:22px; }
 .about-page .editorial-section { display:block; }
 .about-page .editorial-section > header { margin-bottom:30px; }
}
@media(max-width:768px) {
 .editorial.home-page .home-layout > .site-footer { order:2; width:100%; max-width:none; margin:0; flex-direction:column; gap:16px; }
}

/* Above the tablet breakpoint, only the right-hand content pane scrolls. */
@media(min-width:769px) {
 body:has(.home-layout),body:has(.about-layout) { height:100dvh; overflow:hidden; }
 .editorial.home-page main.home-layout { height:calc(100dvh - 88px); padding-top:40px; padding-bottom:24px; overflow:hidden; align-items:stretch; }
 .home-profile { align-self:stretch; min-height:0; height:100%; overflow-y:auto; scrollbar-width:thin; }
 .home-profile .home-intro { padding-bottom:32px; }
 .home-profile .site-footer { flex-shrink:0; }
 .home-page #work { height:100%; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; padding:0 4px 0 0; }
 .about-layout { height:calc(100dvh - 128px); overflow:hidden; align-items:stretch; }
 .about-sidebar { position:static; max-height:100%; height:100%; }
 .editorial.about-page .about-layout > main { height:100%; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; padding-right:4px; }
 .about-layout > main { min-height:0; }
}
.editorial .about-layout .site-footer { max-width:none; margin-inline:0; }

/* About keeps the work collection close, as a narrow strip of project covers. */
.project-rail { display:flex; flex-direction:column; gap:10px; min-width:0; padding:4px; }
.project-thumbnail { display:block; flex:0 0 auto; border-radius:8px; transition:opacity 180ms ease; }
.project-thumbnail:hover { opacity:.72; }
.project-thumbnail:focus-visible { outline:2px solid #262626; outline-offset:2px; }
.editorial .project-rail .project-media { aspect-ratio:1.6; border:0; padding:0; border-radius:6px; background:#f2f2f2; }
.editorial .project-rail .project-media img { width:100%; height:100%; object-fit:cover; border-radius:6px; }
.project-rail .project-placeholder { padding:5px; align-items:center; justify-content:center; }
.project-rail .project-placeholder small { display:none; }
@media(min-width:769px) {
 .about-page .about-layout { grid-template-columns:minmax(0,var(--aside-width)) minmax(0,1fr) clamp(64px,6vw,96px); gap:40px; }
 .about-sidebar { grid-column:1; grid-row:1; }
 .about-page .about-layout > main { grid-column:2; grid-row:1; }
 .project-rail { grid-column:3; grid-row:1; height:100%; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; }
 .about-sidebar .portrait { max-width:330px; margin-inline:0; }
 .about-page .editorial-section { display:block; }
 .about-page .editorial-section > header { margin-bottom:30px; }
 .about-page .life-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
 .about-page .site-footer { flex-direction:column; }
}
@media(max-width:768px) {
 .project-rail { flex-direction:row; overflow-x:auto; gap:10px; margin-bottom:36px; padding:4px 4px 8px; }
 .project-thumbnail { width:88px; }
}

/* The fragment target is a scroll pane, not an interactive control. Keep its
   browser-generated focus ring from outlining the entire project collection. */
.home-page #work:focus { outline:none; }

/* Carry the homepage introduction into a quieter About sidebar. */
.about-profile h2 { margin:0 0 24px; }
.editorial .about-profile > p { margin:0; }
.about-portrait { margin:0 0 28px; min-width:0; }
.about-portrait img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:8px; }
@media(min-width:1100px) {
 .about-page .about-intro .intro-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:start; gap:32px; }
 .about-portrait { grid-column:2; grid-row:1; margin:0; }
 .about-page .intro-copy { grid-column:1; grid-row:1; }
}
@media(min-width:769px) and (max-width:1099px) {
 .about-portrait { max-width:340px; }
}
@media(max-width:768px) {
 .about-sidebar { padding-bottom:32px; }
 .about-portrait { max-width:400px; }
}

/* The portrait leads the sidebar introduction; biography keeps its full column. */
.about-sidebar .about-portrait { width:100%; max-width:280px; margin:0 0 28px; }
.about-sidebar .about-portrait img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.about-page .about-intro .intro-layout { display:block; }
@media(max-width:768px) {
 .about-sidebar .about-portrait { max-width:280px; }
}

/* About's personal status and contact links live with its introduction. */
.about-sidebar { display:flex; flex-direction:column; }
.about-sidebar > .about-portrait,.about-sidebar > .about-profile { flex-shrink:0; }
.editorial.about-page .about-sidebar > .site-footer { max-width:none; width:100%; margin:32px 0 0; padding:28px 0 32px; flex-direction:column; gap:16px; flex-shrink:0; }
@media(min-width:769px) {
 .editorial.about-page .about-sidebar > .site-footer { margin-top:auto; }
 .about-sidebar > .about-profile { padding-bottom:32px; }
}

.about-sidebar > .site-footer nav { order:-1; }

/* A stationary About frame, with a single scrolling biography pane. */
.about-sidebar-spacer { height:clamp(40px,4.2vw,64px); flex-shrink:0; margin:0 0 40px; }
.about-sidebar .about-portrait { width:min(100%,260px); margin:0; }
.about-sidebar .about-portrait figcaption { margin-top:10px; text-align:left; color:#737373; }
.editorial.about-page .about-sidebar > .site-footer { padding:24px 0 0; }
@media(min-width:769px) {
 .about-page .about-layout { padding-bottom:24px; box-sizing:border-box; }
 .about-page .about-sidebar { overflow:hidden; padding:0; }
 .about-sidebar-spacer { margin-bottom:clamp(24px,7vh,88px); flex-shrink:0; }
 .about-sidebar .about-portrait { width:min(100%,260px,calc((100dvh - 330px)*.75)); }
 .about-sidebar .site-footer nav { flex-wrap:wrap; }
 .about-page .project-rail { align-self:center; justify-content:center; height:auto; max-height:100%; overflow:visible; gap:clamp(4px,1vh,10px); }
 .about-page .project-thumbnail { width:min(100%,calc((100dvh - 230px)*1.6/7)); align-self:center; }
}
@media(max-width:768px) {
 .about-sidebar-spacer { margin-bottom:28px; }
 .editorial.about-page .about-sidebar > .site-footer { margin-top:24px; }
}

/* The biography flows into the photo playground without a divider. */
.about-page .about-intro + .photo-playground { border-top:0; }

/* A shared heading row aligns the biography with the portrait. */
.about-layout { --about-heading-space:clamp(150px,15vw,210px); }
.editorial .about-aside-heading { margin:0; flex-shrink:0; }
@media(min-width:769px) {
 .editorial .about-aside-heading { height:var(--about-heading-space); }
 .about-page #biography { padding-top:var(--about-heading-space); }
}
@media(max-width:768px) {
 .editorial .about-aside-heading { margin-bottom:32px; }
}

/* Compact work history, without divider lines. */
.about-page .work-history { display:block; border:0; }
.about-page .work-history > header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:32px; }
.about-page .work-history > header h2 { margin:0; }
.work-history-list { display:flex; flex-direction:column; gap:28px; }
.work-history-entry { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:20px; }
.work-history-entry h3 { margin:0; }
.work-history-entry time { color:#737373; }
.employer-logo { width:56px; height:56px; border-radius:12px; background:#000; color:#fff; display:flex; align-items:center; justify-content:center; }
.employer-logo svg { width:38px; height:38px; }
@media(max-width:540px) {
 .about-page .work-history > header { flex-wrap:wrap; }
 .work-history-entry { grid-template-columns:48px 1fr; gap:4px 16px; }
 .employer-logo { width:48px; height:48px; grid-row:span 2; }
 .work-history-entry time { grid-column:2; }
}

.about-page .editorial-section,.about-page .tool { border-top:0; }

.resume-link { white-space:normal; }
.work-history-entry { align-items:start; }
.employer-logo img { width:40px; height:auto; display:block; }
.employer-details .job-title { color:#737373; margin-top:5px; }
.editorial .employer-details p { margin:10px 0 0; max-width:440px; }
.work-history-entry time { padding-top:3px; }
.work-history-entry + .work-history-entry { border-top:1px solid #ededed; padding-top:28px; }
@media(max-width:540px) {
 .work-history-entry .employer-logo { grid-row:1; }
 .work-history-entry time { grid-column:2; }
}

/* Keep scrolling available without visible scrollbar tracks. */
.about-page,.about-page .about-sidebar,.about-page .about-layout > main,.about-page .project-rail { scrollbar-width:none; }
.about-page::-webkit-scrollbar,.about-page .about-sidebar::-webkit-scrollbar,.about-page .about-layout > main::-webkit-scrollbar,.about-page .project-rail::-webkit-scrollbar { display:none; width:0; height:0; }

.editorial.about-page .about-layout > main { scrollbar-width:none; }

/* The portrait hands off to the personal section as Process scrolls away. */
.beyond-aside-heading { display:none; }
@media(min-width:769px) {
 .about-page .about-sidebar { position:relative; }
 .editorial .beyond-aside-heading { display:block; position:absolute; top:0; left:0; margin:0; opacity:0; pointer-events:none; }
 .about-page .about-portrait { will-change:transform; }
 .about-page #beyond { min-height:calc(100dvh - 128px); padding-bottom:48px; }
 .about-page #beyond-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); }
 .about-page .beyond-intro > p:first-of-type { margin-top:0; }
}


/* Keep contact links clear of the clipped desktop frame. */
@media(min-width:769px) {
 .editorial.about-page .about-sidebar { padding-bottom:24px; box-sizing:border-box; min-height:0; }
 .editorial.about-page .about-sidebar > .site-footer { padding-top:24px; padding-bottom:8px; }
}

@media(min-width:769px) {
 .about-page #beyond { display:flow-root; box-sizing:border-box; margin-bottom:0; }
}

/* Original brand marks, arranged side by side. */
.stack-logos { display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; align-items:center; gap:20px; list-style:none; margin:0; padding:6px; }
.stack-logo { display:flex; align-items:center; justify-content:center; flex:0 0 56px; width:56px; height:56px; background:#f5f5f5; border:1px solid #ededed; border-radius:12px; box-sizing:border-box; }
.stack-logo img { display:block; width:38px; height:38px; object-fit:contain; }
@media(max-width:540px) {
 .stack-logos { gap:16px; }
 .stack-logo { flex-basis:48px; width:48px; height:48px; }
}

.stack-logo a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:inherit; }
.stack-logo a:hover { background:#e9e9e9; }
.stack-logo a:focus-visible { outline:2px solid #262626; outline-offset:4px; }

/* A quiet hover playground in the open space below the personal copy. */
.about-page #beyond { position:relative; }
.beyond-photo-drop { position:absolute; left:0; right:0; bottom:0; overflow:hidden; }
.hover-drop-photo { position:absolute; top:0; left:0; aspect-ratio:3/4; object-fit:cover; border-radius:7px; pointer-events:none; opacity:0; will-change:transform,opacity; }
@media(max-width:768px) {
 .beyond-photo-drop { position:relative; top:auto!important; height:300px; margin-top:24px; }
 .about-page .knot-note { margin-bottom:0; }
}
@media(prefers-reduced-motion:reduce) { .beyond-photo-drop { display:none; } }

@media(min-width:769px) { .beyond-photo-drop { z-index:5; } }

.beyond-subheading { margin:0 0 24px; }

/* Text enlargement must expand headings rather than cover the portrait. */
h1,h2,h3 { overflow-wrap:anywhere; }
@media(min-width:769px) {
 .editorial .about-aside-heading { height:auto; min-height:var(--about-heading-space); }
 .editorial.about-page .about-sidebar { overflow-y:auto; }
 .about-page .project-rail { overflow-y:auto; }
}
.project-rail .project-placeholder strong { max-width:100%; overflow-wrap:anywhere; }
.project-rail .project-media:has(.project-placeholder) { min-height:calc(3em + 10px); }

.stack-logos::-webkit-scrollbar { display:none; }
.stack-section { min-width:0; max-width:100%; }
.stack-logos { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
@media(max-width:768px) {
 .about-page .about-layout > main { width:100%; max-width:100%; box-sizing:border-box; }
}

.stack-motion-toggle { margin:12px 0 0; padding:4px 8px; color:inherit; background:transparent; border:1px solid #dedede; border-radius:4px; cursor:pointer; }

.home-profile .home-intro { padding-bottom:24px; }