/* Shared viewport refinements: keep text contained while carousels reach the edges. */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
.shell { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.site-header { gap: 20px; }
.brand, .nav, .hero-copy, .about-heading, .about-note, .category-aside,
.project-identity, .project-lead, .project-story-list, .footer-main > * { min-width: 0; }
.brand-mark, .brand-name { white-space: nowrap; }
.nav { flex-shrink: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; }
.theme-toggle::after { content: ''; position: absolute; inset: -10px 0; }
.project-active-info h3 { margin: 0; font-size: clamp(25px, 2.9vw, 38px); line-height: 1.12; overflow-wrap: anywhere; }
.project-active-info, .slider-controls { min-width: 0; }
.project-facts > *, .project-next a, .footer-contact-link { overflow-wrap: anywhere; }
.project-next, .footer-bottom, .footer-meta { flex-wrap: wrap; }
.project-story-block p:last-child { max-width: 65ch; }
.hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panorama-heading > *, .panorama-carousel, .panorama-carousel-viewport { min-width: 0; max-width: 100%; }
.panorama-frame { width: 100%; }
.lightbox-count { top: max(23px, env(safe-area-inset-top)); }
.lightbox-close { top: max(14px, env(safe-area-inset-top)); right: max(13px, env(safe-area-inset-right)); }
@media (min-width: 801px) {
  .project-active-info h3 { font-size: clamp(34px, 3.2vw, 48px); }
  .hero-visual { height: clamp(420px, 65svh, 700px); min-height: 0; }
  .project-image { height: clamp(340px, 58svh, 700px); }
  .project-story-block p:last-child { font-size: 14px; }
}
@media (min-width: 621px) and (max-width: 1100px) {
  .brand-caption { display: none; }
  .nav { gap: clamp(16px, 2.8vw, 30px); }
  .about { grid-template-columns: minmax(150px,.65fr) minmax(0,1fr); gap: 28px; }
  .about-portrait { grid-column: 1; grid-row: 1; width: min(100%,240px); }
  .about-heading { grid-column: 2; grid-row: 1; }
  .about-note { grid-column: 1/-1; grid-row: 2; }
  .about-tools-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .project-intro { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
  .project-cover { grid-column: 1/-1; grid-row: 2; aspect-ratio: 1.85; }
  .project-lead { max-width: 42ch; }
  .footer-main { gap: 24px; }
}
@media (min-width: 621px) and (max-width: 800px) {
  .hero-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .hero-visual { height: 480px; min-height: 0; }
  .hero-copy h1 { font-size: clamp(40px,6.5vw,52px); line-height: 1; }
  .category-top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
  .index-row { grid-template-columns: 36px minmax(0,1fr) 110px 20px; gap: 12px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-column: 1/-1; justify-self: start; }
}
@media (max-width: 620px) {
  .nav .nav-contact { display: none; }
  .site-header { gap: 12px; }
  .nav { gap: clamp(8px,2.6vw,16px); }
  .project-active-info h3 { font-size: clamp(18px,5vw,23px); }
  .slider-button { width: 44px; height: 44px; }
  .hero-image { height: auto; aspect-ratio: .8; max-height: 540px; }
  .project-story h2 { font-size: clamp(36px,10vw,56px); overflow-wrap: break-word; }
  .collage-grid--primary-three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .collage-grid--primary-three .collage-item:last-child { grid-column: 1/-1; aspect-ratio: 1.45; }
  .lightbox-hint { left: 65px; right: 65px; bottom: max(20px,env(safe-area-inset-bottom)); text-align: center; line-height: 1.5; }
  .lightbox-previous,.lightbox-next { bottom: max(21px,env(safe-area-inset-bottom)); }
  .panorama-frame { min-height: 0; aspect-ratio: 1.08; }
  .panorama-instruction { max-width: calc(100% - 28px); line-height: 1.5; }
}
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .brand-mark,.brand-name { font-size: 18px; letter-spacing: .045em; }
  .nav { gap: 8px; font-size: 10px; }
  .site-header { gap: 8px; }
  .slider-count { gap: 5px; }
  .slider-label { margin-left: 0; }
  .hero-copy h1 { font-size: 43px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .site-header { min-height: 58px; }
  .project-image { height: clamp(220px,65svh,330px); }
  .lightbox-viewer { inset: 24px 76px 30px; }
  .lightbox-hint { display: none; }
  .lightbox-previous,.lightbox-next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .panorama-frame { min-height: 0; height: 70svh; aspect-ratio: auto; }
}
.panorama-canvas,.panorama-fallback { opacity: 1; transition: opacity .42s ease; }
.panorama-frame.is-view-changing .panorama-canvas,.panorama-frame.is-view-changing .panorama-fallback { opacity: 0; }
.panorama-modal { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.panorama-modal::backdrop { background: rgba(25,24,22,.92); opacity: 0; transition: opacity .6s ease; }
.panorama-modal.is-visible::backdrop { opacity: 1; }
.panorama-modal .panorama-frame { width: 100%; height: 100%; max-height: none; min-height: 0; aspect-ratio: auto; opacity: 0; transform: scale(.965); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.panorama-modal.is-visible .panorama-frame { opacity: 1; transform: scale(1); }
.panorama-modal .panorama-view-nav { display: grid; }
.panorama-modal .panorama-fullscreen { top: max(16px,env(safe-area-inset-top)); right: max(16px,env(safe-area-inset-right)); }
.panorama-modal .panorama-instruction { bottom: max(16px,env(safe-area-inset-bottom)); }
.panorama-modal, .panorama-modal button, .panorama-modal canvas { cursor: auto !important; }
.panorama-modal .panorama-canvas { cursor: grab !important; }
.panorama-modal .panorama-canvas.is-dragging { cursor: grabbing !important; }
@media (prefers-reduced-motion: reduce) { .panorama-modal::backdrop,.panorama-modal .panorama-frame,.panorama-canvas,.panorama-fallback { transition-duration: .01ms; } }
/* Interactive hero and generous collaboration targets. */
.hero-image .hero-incoming { opacity: 0; transition: opacity 1s ease; }
.hero-image .hero-incoming.is-visible { opacity: 1; }
.hero-caption { gap: 16px; transition: opacity .35s ease; }
.hero-caption.is-changing { opacity: 0; }
.hero-caption [data-hero-year] { flex-shrink: 0; }
.hero-playback { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(25,24,22,.3); color: #fff; cursor: pointer; }
.hero-playback svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.project-card[aria-hidden="true"] { pointer-events: auto; }
.contact-cta-link,.footer-start,.project-next a[href*="wa.me"] { position: relative; min-height: 48px; padding: 12px 16px; justify-content: center; }
.contact-cta-link { min-width: 190px; }
.footer-start { margin-left: -16px; }
@media (prefers-reduced-motion: reduce) { .hero-image .hero-incoming,.hero-caption { transition-duration: .01ms; } }
.hero-caption { height: 44px; align-items: flex-start; line-height: 1.5; }
.hero-caption [data-hero-title] { min-width: 0; }
/* Side previews navigate on click without showing the active-slide arrows. */
.project-card[aria-hidden="true"] .project-image-link::before,
.project-card[aria-hidden="true"] .project-image-link::after { display: none; }
/* Keep software marks legible against the dark About background. */
html[data-theme="dark"] .tool-logo { color: #d0c9bd; }
html[data-theme="dark"] .tool-monogram { color: #eee9df; }
html[data-theme="dark"] .tool-logo img:not(.tool-app-icon) { filter: brightness(0) invert(.92); opacity: 1; }
html[data-theme="dark"] .tool-logo img.tool-app-icon { filter: grayscale(1) brightness(1.8); opacity: 1; }