/* Preserve the desktop composition, and reorganize it when space is constrained. */
.build-frame {grid-template-areas:'header' 'layout' 'other' 'footer';--build-edge:max(var(--gutter),calc((100vw - var(--site-max))/2 + var(--gutter)));padding-bottom:env(safe-area-inset-bottom,0px);}
.build-frame>.build-header {grid-area:header;}
.build-mobile-toolbar {grid-area:picker;display:none;}
.build-layout {grid-area:layout;}
.build-other {grid-area:other;}
.build-frame>.build-footer {grid-area:footer;}
.build-picker {position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:0 12px;border:1px solid color-mix(in srgb,var(--ink) 42%,transparent);background:#111512;text-align:left;font:12px/1.4 'IBM Plex Mono',monospace;cursor:pointer;transition:border-color 180ms,background 180ms;}
.build-picker::before {content:'';position:absolute;inset:0 auto 0 0;width:48%;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 12%,transparent) 28%,color-mix(in srgb,var(--ink) 30%,transparent) 50%,color-mix(in srgb,var(--ink) 12%,transparent) 72%,transparent);transform:translateX(-110%);}
.build-picker>span {position:relative;z-index:1;}
.build-picker:is(:hover,:focus-visible),.build-picker[aria-expanded='true'] {border-color:var(--ink);background:#1a1e18;}
.build-picker-prefix {opacity:.55;flex:none;}
#build-picker-name {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.build-picker-chevron {display:grid;place-items:center;margin-left:auto;flex:0 0 20px;transition:transform 200ms;}
.build-picker-chevron svg {display:block;}
.build-picker-chevron-trail {opacity:.4;}
.build-picker[aria-expanded='true'] .build-picker-chevron {transform:rotate(180deg);}
@media (prefers-reduced-motion:no-preference) {
  .build-page:not([hidden]) .build-picker[aria-expanded='false']::before {animation:build-picker-shine 5.6s cubic-bezier(.3,0,.4,1) infinite;}
  .build-page:not([hidden]) .build-picker[aria-expanded='false'] .build-picker-chevron svg {animation:build-picker-invite 5.6s ease-in-out infinite;}
}
@keyframes build-picker-shine {
  0%,8% {transform:translateX(-110%);}
  38%,100% {transform:translateX(320%);}
}
@keyframes build-picker-invite {
  0%,40%,56%,72%,100% {transform:translateY(0);}
  48%,64% {transform:translateY(3px);}
}
.build-stack-list dd {overflow-wrap:anywhere;}
.build-stack-list dt {white-space:nowrap;}

/* Tablets keep the curve, with the eye in the header rather than a third column. */
@media (min-width:761px) and (max-width:1100px) and (min-height:561px) {
  .build-frame {--gutter:clamp(24px,4vw,40px);--build-row-gap:12px;grid-template-rows:84px minmax(0,1fr) 142px 60px;}
  .build-layout {grid-template-columns:clamp(150px,18vw,180px) minmax(0,1fr);gap:24px;}
  .build-choice {width:104px;--card-height:clamp(40px,calc((100dvh - 330px)/10),68px);}
  .build-copy {--project-frame-clearance:0px;--project-frame-outset:0px;padding:10px 12px 14px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
  .build-page[data-project='who-am-i'] .build-copy {padding-inline:0;}
  .build-about-copy,.build-project-copy {margin-inline-end:0;padding:14px 12px;font-size:12.5px;line-height:1.7;}
  .build-code-frame {inset:0;}
  .build-eye-lane {position:fixed;top:8px;left:50%;right:auto;transform:translateX(-50%);width:76px;height:66px;z-index:6;}
  .build-eye-housing {inset:0;width:100%;}
  #build-eye-readout,.build-eye-caption {display:none;}
  .build-page[data-project='who-am-i'] .build-presentation {flex:1 0 240px;min-height:240px;}
  .build-page:not([data-project='who-am-i']) .build-presentation {flex:none;margin-inline:0;}
  .build-other-card .build-card-name {font-size:10px;}
  .build-footer nav {font-size:12px;}
}

/* Short desktop/tablet windows keep readable copy and media inside the editor. */
@media (min-width:1101px) and (max-height:820px) and (min-height:561px) {
  .build-frame {grid-template-rows:76px minmax(0,1fr) 142px 50px;}
  .build-copy {padding:10px 12px 14px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
  .build-about-copy {font-size:12px;line-height:1.65;}
  .build-page[data-project='who-am-i'] .build-presentation {flex:1 0 220px;min-height:220px;}
  .build-page:not([data-project='who-am-i']) .build-presentation {flex:none;margin-inline:0;}
}

/* The outer page remains one screen. The reading pane can scroll, not shrink. */
@media (max-width:760px), (max-height:560px) {
  .build-frame {--gutter:clamp(16px,4vw,28px);--build-row-gap:8px;grid-template-areas:'header' 'picker' 'layout' 'footer';grid-template-rows:64px 44px minmax(0,1fr) 56px;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px));}
  .build-home img {width:110px;}
  .build-mobile-toolbar {display:block;min-width:0;}
  .build-layout {display:block;min-height:0;}
  .build-layout::after,.build-index::after {display:none;}
  .build-copy {--project-frame-clearance:0px;--project-frame-outset:0px;display:block;width:100%;height:100%;padding:2px 2px 14px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
  .build-about-copy,.build-project-copy {margin:0;padding:14px 12px;font:400 12px/1.7 'IBM Plex Mono',monospace;}
  .build-code-frame {inset:0;}
  .build-about-copy section+section {margin-top:16px;}
  .build-about-copy h3 {margin-bottom:8px;}
  .build-stack-list {padding-left:0;gap:5px;}
  .build-stack-list>div {grid-template-columns:64px minmax(0,1fr);gap:8px;}
  .build-stack-list dt {font-size:11px;}
  .build-project-copy h2 {font-size:18px;line-height:1.4;margin-bottom:14px;}
  .build-project-facts {gap:10px;}
  .build-project-facts>div {grid-template-columns:60px minmax(0,1fr);gap:8px;}
  .build-project-facts dt {font-size:11px;}
  .build-project-facts .build-project-links a {min-height:36px;}
  .build-page:not([data-project='who-am-i']) .build-presentation {display:block;aspect-ratio:8/5;height:auto;margin:18px 0 0;min-height:0;}
  .build-page:not([data-project='who-am-i']) .build-art {width:100%;height:100%;}
  .build-page[data-project='who-am-i'] .build-presentation {height:clamp(300px,40dvh,480px);margin:18px 0 0;min-height:300px;}
  .build-photo-matrix figcaption {font-size:11px;line-height:1.6;}
  .build-cover-hint {bottom:10px;right:10px;padding:8px 10px;font-size:10px;gap:10px;}
  .build-art[data-project='anytinsystems'] .build-cover-link>img {padding:18px;}
  .build-art:has(.build-cover-link:is(:hover,:focus-visible)) {transform:none;box-shadow:inset 0 0 0 1px var(--ink);}
  .build-eye-lane {position:fixed;top:7px;left:50%;right:auto;transform:translateX(-50%);width:56px;height:49px;z-index:6;}
  .build-eye-housing {inset:0;width:100%;}
  #build-eye-readout,.build-eye-caption {display:none;}
  #build-rays text {font-size:8px;}
  .build-index {display:none;}
  .build-other {display:none;}
  .build-frame>.build-footer nav {font-size:10px;gap:10px;}
  .build-footer a {gap:6px;min-height:44px;}
  .build-footer a::before {display:none;}
  .build-frame>.build-footer .ui-icon {width:13px;height:13px;flex-basis:13px;}
  .build-page[data-picker-open='true'] .build-frame {grid-template-areas:'header' 'picker' 'layout' 'other' 'footer';grid-template-rows:64px 44px minmax(0,1fr) 124px 56px;}
  .build-page[data-picker-open='true'] .build-copy {display:none;}
  .build-page[data-picker-open='true'] #build-rays {display:none;}
  .build-page[data-picker-open='true'] .build-index {display:grid;position:absolute;inset:0;grid-template-rows:minmax(0,1fr) 20px;}
  .build-curve {width:min(260px,100%);margin-inline:auto;--build-rail-offset:14px;touch-action:pan-x;}
  .build-choice {width:110px;--card-height:clamp(44px,calc((100dvh - 310px)/9.7),68px);padding:3px;grid-template-rows:minmax(0,1fr) 13px;gap:2px;}
  .build-card-name {font-size:9px;line-height:13px;}
  .build-choice[aria-selected='true']::after {font-size:18px;left:calc(100% + 6px);}
  .build-index-help {text-align:center;font-size:10px;line-height:20px;}
  .build-page[data-picker-open='true'] .build-other {display:grid;grid-template-rows:18px minmax(0,1fr);gap:7px;padding:0;}
  .build-other-heading h3 {font-size:10px;}
  .build-other-cards {display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:3px;scroll-snap-type:x proximity;}
  .build-other-card {flex:0 0 116px;min-height:62px;grid-template-rows:minmax(0,1fr) 15px;gap:4px;scroll-snap-align:start;}
  .build-other-card .build-card-name {font-size:10px;line-height:15px;}
}

@media (min-width:601px) and (max-height:560px) {
  .build-page[data-picker-open='true'] .build-frame {grid-template-rows:56px 44px minmax(0,1fr) 124px 48px;}
  .build-frame {grid-template-rows:56px 44px minmax(0,1fr) 48px;}
  .build-eye-lane {top:3px;}
}
@media (min-width:700px) and (max-height:560px) {
  .build-copy {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-content:start;align-items:start;}
  .build-page:not([data-project='who-am-i']) .build-presentation {margin-top:0;}
  .build-page[data-project='who-am-i'] .build-presentation {height:300px;margin-top:0;}
}
@media (max-width:379px) {
  .build-frame {grid-template-rows:60px 44px minmax(0,1fr) 56px;}
  .build-page[data-picker-open='true'] .build-frame {grid-template-rows:60px 44px minmax(0,1fr) 124px 56px;}
  .build-frame>.build-footer nav {display:grid;grid-template-columns:1fr auto;gap:0 20px;font-size:11px;}
  .build-frame>.build-footer a:first-child {grid-column:1/-1;}
  .build-frame>.build-footer a:last-child {justify-self:end;}
  .build-project-facts>div {grid-template-columns:1fr;gap:2px;}
}

/* Card artwork keeps its proportions; overflow is navigated, never squeezed. */
.build-curve {clip-path:inset(0 -28px 0 -80px);}
.build-choice {--build-card-width:114px;--card-height:calc((var(--build-card-width) - 10px)*9/16 + 27px);width:var(--build-card-width);height:var(--card-height);padding:4px;grid-template-rows:minmax(0,1fr) 14px;gap:3px;}
.build-choice .build-card-name {font-size:9px;line-height:14px;}
.build-other {grid-template-rows:18px minmax(0,1fr);gap:7px;padding-top:4px;}
.build-other-cards {display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:6px;}
.build-other-card {flex:0 0 140px;width:140px;height:auto;min-height:0;grid-template-rows:auto 16px;gap:5px;scroll-snap-align:start;}
.build-other-card img {height:auto;aspect-ratio:16/9;object-fit:cover;}
.build-other-card .build-card-name {font-size:10px;line-height:16px;}
@media (min-width:761px) and (max-width:1100px) {
  .build-choice {--build-card-width:104px;}
}
@media (max-width:760px), (max-height:560px) {
  .build-choice {--build-card-width:110px;}
  .build-other-card {flex-basis:116px;width:116px;grid-template-rows:auto 15px;gap:4px;}
  .build-other-card .build-card-name {line-height:15px;}
}
@media (max-width:420px) {
  .build-footer a[href*='linkedin.com'],.presentation-footer a[href*='linkedin.com'] {display:none;}
  .build-frame>.build-footer nav,.presentation-footer nav {display:flex;flex-wrap:nowrap;justify-content:space-between;gap:16px;font-size:11px;}
}
/* The expanded project picker owns the short landscape screen. Contact links
   return on selection; space goes to the curve and horizontal project strip. */
@media (max-height:400px) and (orientation:landscape) {
  .build-page[data-picker-open='true'] .build-frame {--build-row-gap:6px;grid-template-areas:'header' 'picker' 'layout' 'other';grid-template-rows:44px 44px minmax(0,1fr) 112px;}
  .build-page[data-picker-open='true'] .build-footer {display:none;}
  .build-page[data-picker-open='true'] .build-index {grid-template-rows:minmax(0,1fr);}
  .build-page[data-picker-open='true'] .build-index-help {display:none;}
  .build-page[data-picker-open='true'] .build-eye-lane {top:1px;width:48px;height:42px;}
  .build-page[data-picker-open='true'] .build-other-card {flex-basis:90px;width:90px;}
}

/* On narrow galleries, move the four thumbnails below the photo and code loop. */
.build-photo-matrix[data-activity-layout='bottom'] .activities-gallery {grid-template-columns:var(--activity-frame-width);grid-template-rows:var(--activity-frame-height) var(--activity-frame-rail);height:calc(var(--activity-frame-height) + var(--activity-frame-rail) + var(--activity-frame-gap));}
.build-photo-matrix[data-activity-layout='bottom'][data-code-activity]:not([data-code-activity='']) .activities-gallery {grid-template-columns:var(--activity-frame-companion) var(--activity-frame-width);}
.build-photo-matrix[data-activity-layout='bottom'] .activities-collage {grid-column:1/-1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr;gap:8px;margin-inline-start:calc(-1*var(--activity-frame-offset));width:calc(100% + var(--activity-frame-offset));}
.build-photo-matrix[data-activity-layout='bottom'] .activity-photo {min-height:44px;}

/* Safe-area-aware hero controls; the arrow remains a compact filled button. */
@media (max-width:760px) {
  .site-header {height:76px;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px));}
  .portrait-scene {top:104px;bottom:156px;}
  .hero-essentials {left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;font-size:12px;line-height:1.55;}
  .hero-role {grid-column:1/-1;display:flex;gap:8px;}
  .hero-place {display:flex;gap:7px;align-items:baseline;}
  .hero-code-key {display:inline;font-size:10px;}
  .hero-enter {min-width:94px;min-height:44px;}
}
/* Keep the phone introduction together, with a separate, clear action below. */
@media (max-width:600px) and (orientation:portrait) {
  .portrait-scene {bottom:180px;}
  .hero-essentials {grid-template-columns:minmax(0,1fr);gap:0;padding-top:0;}
  .hero-role {display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;align-items:start;}
  .hero-place {margin-top:5px;padding-left:24px;font-size:11px;}
  .hero-code-key {margin-bottom:0;opacity:.7;}
  .hero-enter {width:100%;min-height:46px;margin-top:16px;font-size:12px;gap:9px;}
  .hero-enter::before {inset:0;}
  #hero-scan-caption {display:none;}
}
@media (max-height:560px) {
  .site-header {height:60px;padding-block:8px;}
  .portrait-scene {top:64px;bottom:96px;}
  .name-backdrop {top:0;font-size:min(24vw,36dvh);}
  .hero-essentials {bottom:calc(10px + env(safe-area-inset-bottom,0px));font-size:11px;gap:8px 18px;}
  .hero-enter {min-height:44px;}
}
@media (max-width:600px) and (max-height:560px) and (orientation:portrait) {
  .portrait-scene {bottom:164px;}
  .hero-essentials {gap:0;}
  .hero-enter {margin-top:10px;}
}
@media (prefers-reduced-motion:reduce) {
  .build-picker,.build-picker-chevron {transition:none;}
  .build-page .build-picker::before {display:none;animation:none;}
  .build-page .build-picker .build-picker-chevron svg {animation:none;}
}

/* Let the introduction use the available line width, without the old 63ch cap. */
.build-about-copy {margin-inline-end:0;}
.build-about-copy p {max-width:none;}
/* Phones, tablets and shorter windows use exclusive collapsible sections. */
@media (max-width:1100px), (max-height:1000px) {
  .build-about-copy h3 {margin-bottom:0;}
  .build-about-copy section+section {margin-top:10px;}
  .build-about-toggle {display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer;}
  .build-about-toggle:focus-visible {outline-offset:1px;}
  .build-about-chevron {flex:0 0 7px;width:7px;height:7px;margin-right:4px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform 240ms;}
  .build-about-toggle[aria-expanded='true'] .build-about-chevron {transform:rotate(225deg);}
  .build-disclosure-body {display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows 260ms ease,opacity 180ms ease;}
  .build-disclosure-body>div {min-height:0;overflow:hidden;}
  .build-disclosure-body p,.build-disclosure-body dl {padding-bottom:8px;}
  .build-about-section[data-expanded='false'] .build-disclosure-body {grid-template-rows:0fr;opacity:0;}
}
@media (min-width:761px) and (max-height:1000px) {
  .build-page[data-project='who-am-i'] .build-copy {overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
  .build-page[data-project='who-am-i'] .build-presentation {flex:1 0 220px;min-height:220px;}
}
@media (prefers-reduced-motion:reduce) {
  .build-disclosure-body,.build-about-chevron {transition:none;}
}

/* Fit each project cover to the remaining reading-pane height. The artwork
   keeps its 8:5 frame; only genuinely short panes need to scroll. */
.build-page:where(:not([data-project='who-am-i'])) .build-copy {--project-frame-outset:0px;--project-frame-clearance:0px;display:flex;flex-direction:column;padding:10px 12px 14px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.build-page:not([data-project='who-am-i']) .build-project-copy {margin:0;padding:14px 12px;}
.build-page:not([data-project='who-am-i']) .build-code-frame {inset:0;}
.build-page:not([data-project='who-am-i']) .build-presentation {display:flex;flex:1 0 140px;min-height:140px;aspect-ratio:auto;margin:18px 0 0;align-items:flex-start;container-type:size;}
.build-page:not([data-project='who-am-i']) .build-art {flex:none;width:min(100cqw,calc(100cqh*8/5));height:auto;aspect-ratio:8/5;transform-origin:left top;}
@media (hover:hover) and (pointer:fine) and (min-width:761px) and (min-height:561px) {
  .build-page:not([data-project='who-am-i']) .build-presentation {padding:0 24px 26px 0;}
  .build-page:not([data-project='who-am-i']) .build-art {width:min(calc(100cqw/1.08),calc(100cqh*8/5/1.08));}
}
@media (min-width:700px) and (max-height:560px) {
  .build-page:where(:not([data-project='who-am-i'])) .build-copy {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-content:start;align-items:start;}
  .build-page:not([data-project='who-am-i']) .build-presentation {height:100%;margin-top:0;}
}