/* September revision: dark exhibition surfaces, complete artwork, tighter rhythm. */
/* Fine woven surface; artwork itself remains unfiltered. */
body{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.055) 0,rgba(0,0,0,.055) 1px,transparent 1px,transparent 4px);background-attachment:fixed}
:root {--paper:#202326;--ink:#f1f0eb;--muted:#b8b9b7;--line:#474b4e;--accent:#d4bb8f;--surface:#282c30;--space:clamp(2.5rem,4.2vw,4.5rem);--nav:5.5rem;color-scheme:dark}
.theme-science{--paper:#0b1c2d;--ink:#edf5fc;--muted:#acc0d2;--line:#30495e;--accent:#76d8ec;--surface:#122a40}
.site-header,.mobile-menu{background:var(--paper);border-bottom:1px solid var(--line)}
.site-header{padding-block:1rem}.identity-name{color:var(--ink)}
.skip{background:var(--ink);color:var(--paper)}
.nav-link[aria-current=page]{text-decoration-color:var(--accent)}
.heading-en{font-size:.75rem!important;letter-spacing:.08em;color:var(--muted)}
.heading-pair{flex-wrap:wrap}.heading-en{white-space:normal}
.eyebrow,.case-kicker,.case-facts dt,.case-gallery-note,.filter-total,.card-caption p,.project-entry-caption p,.artwork figcaption,.case-artworks figcaption,.home-profile-facts dt{font-size:.875rem}
.case-artworks .image-number,.card-index,.case-number,.section-count,.project-group-count{font-size:.8125rem}
.page-home .home-opening{padding-block:3.5rem 2.5rem}
.home-profile{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(2rem,6vw,7rem);row-gap:2.5rem;min-height:0;align-content:start}
.home-profile-main .eyebrow{margin-bottom:1.2rem;color:var(--accent)}
.home-profile-main h1{font-size:clamp(3.5rem,7vw,7rem);line-height:1.2;letter-spacing:.04em}
.home-profile-role{color:var(--ink);font-size:1.25rem;margin-top:1rem}
.home-profile-description{margin-top:1rem;max-width:26rem;color:var(--muted);line-height:1.9}
.home-profile-main .text-link{margin-top:1rem;color:var(--accent)}
.home-career{padding-top:.5rem}.home-career h2{font-size:1.25rem}
.work-timeline{margin-top:1.5rem}.work-timeline li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding-block:0 1.5rem}
.work-period{font-size:.875rem;color:var(--accent);font-variant-numeric:tabular-nums}
.work-timeline h3{font-size:1rem;font-weight:500;line-height:1.8}.work-timeline p{color:var(--muted);font-size:1rem;margin-top:.2rem}
.home-education{border-top:1px solid var(--line);padding-top:1rem}.home-education span,.education-detail span{font-size:.875rem;color:var(--muted)}
.home-education p{margin-block:.35rem;font-size:1rem}
.home-skills{display:flex;align-items:center;gap:2rem;justify-content:space-between;padding-top:1.5rem}
.home-skills h2{flex-shrink:0}.home-skills ul{margin:0;gap:.8rem 1.25rem}.home-skills li{font-size:.875rem}
.skill-mark{border-color:var(--line);color:var(--accent);font-size:.8125rem;background:var(--surface)}
.page-home .home-projects{padding-top:2rem}
.section-heading,.case-section-heading{margin-bottom:1.5rem}.section-heading h2,.project-group-heading h2{font-size:1.5rem}
.project-grid{row-gap:2.5rem}.home-projects .project-card:first-child,.home-projects .project-card:nth-child(2){grid-column:1/-1}
.card-caption{padding-top:.8rem;gap:.75rem}.card-caption h3{font-size:clamp(1.125rem,1.5vw,1.625rem)}
.card-caption p{white-space:normal;flex-shrink:1}.card-text{align-items:start}
.project-archive{column-gap:2rem;row-gap:2.5rem}.project-entry:nth-child(2):not(.project-entry-wide){margin-top:0}
.project-entry-caption{padding-top:.8rem}.project-group{margin-bottom:3rem}.projects-section .filter-bar{margin-bottom:2rem}
.project-entry-caption h3{font-size:clamp(1.125rem,1.45vw,1.5rem);line-height:1.65;overflow-wrap:anywhere}.project-entry-link:hover h3,.project-entry-link:focus-visible h3{text-decoration:underline;text-underline-offset:.35rem}
.project-index-intro{padding-block:2.5rem 1.5rem}.page-intro .page-title{font-size:clamp(2.5rem,4.5vw,4.5rem)}
.case-heading{padding-block:2.5rem 2rem}.case-kicker{margin-bottom:1rem;color:var(--accent)}
.case-heading h1{font-size:clamp(1.75rem,3vw,3.5rem);line-height:1.55}
.case-location{margin-top:.75rem;font-size:.875rem}.case-cover{margin:0}
.case-overview{padding-top:2.5rem;gap:2rem}.case-facts{gap:1.25rem 2rem}.case-facts dd{font-size:1rem}
.case-overview-copy{margin-top:1.5rem}.case-overview-copy>p{font-size:1rem}.case-disclaimer{margin-top:1rem;font-size:.8125rem!important}
.case-section{padding-top:2.75rem}.case-section-title{font-size:1.375rem;font-weight:500}
.case-artworks{column-gap:1.5rem;row-gap:1.75rem}.case-artworks figcaption{margin-top:.6rem}
.case-artworks .artwork.portrait{max-width:30rem}
.case-artworks+.case-panorama{margin-top:2rem}.case-panorama{gap:1rem}.case-panorama-code{width:260px;max-width:100%}
.case-next{margin-top:3rem;padding-block:2rem 3rem}.case-next-project h2{font-size:clamp(1.25rem,2.2vw,2.25rem)}
.case-videos{display:grid;gap:1.5rem}.case-videos video{display:block;width:100%;height:auto;max-height:75vh;background:#090d11;object-fit:contain}.case-videos figcaption{font-size:.875rem;color:var(--muted);margin-top:.6rem}
.legacy-works{border-block:1px solid var(--line)}.legacy-works summary{cursor:pointer;padding-block:1.1rem;font-size:1rem;color:var(--ink)}
.legacy-works summary span{display:inline-block;margin-left:1rem;font-size:.875rem;color:var(--muted)}
.legacy-works[open]>.case-artworks{padding-block:1rem 1.75rem}
.about-intro{padding-block:2.5rem}.about-title-row .name{font-size:1.25rem;color:var(--accent)}
.about-brief{margin-top:2.5rem;gap:2rem}.about-brief p:not(.lead){margin-top:0;color:var(--muted)}.about-brief p+p{margin-top:1rem!important}
.about-row{gap:2rem;padding-block:1.75rem 2rem}.about-row h2{font-size:1.25rem;margin:0}.about-row p,.service-list p{color:var(--muted)}
.about-resume .work-timeline{margin:0}.about-skills{border:0;padding:0;display:block;margin:0;grid-column:auto}
.resume-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 2rem;font-size:1rem}
.resume-projects li{padding-left:.8rem;border-left:2px solid var(--line);line-height:1.85}.about-row .resume-note{font-size:.875rem;margin-top:.75rem;color:var(--accent)}
.about-work{padding-block:2.5rem}.service-list li{padding-bottom:1.25rem}.service-list li:last-child{padding-bottom:0}
.site-footer{border-top:1px solid var(--line);padding-block:2rem 1.5rem}.footer-top{margin-bottom:2rem}.footer-bottom{font-size:.8125rem}
.image-placeholder,.panorama-code-placeholder{background:#fff;border-color:#111}
.artwork-image img,.project-picture img,.project-entry-image img,.case-cover img,.about-image img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;transform:none;filter:none;clip-path:none}
.heading-cn:has(.section-icon){display:inline-flex;align-items:center;gap:.55em}.section-icon{width:1.1em;height:1.1em;flex:none;color:var(--accent);stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.project-entry-wide{grid-column:auto}.project-entry-image{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15)}.project-entry-image img{height:100%;width:100%;object-fit:contain}
.case-study[data-project^="pulandian-"] .artwork.portrait .artwork-open{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15)}
.case-study[data-project^="pulandian-"] .artwork.portrait img{height:100%;width:100%;object-fit:contain}
.software-icon{display:block;width:36px;height:36px;object-fit:contain;flex:none}.home-skills li{display:flex;align-items:center;gap:.65rem;min-height:44px}.home-skills ul{flex-wrap:wrap}
.case-panorama-copy{flex:1}.panorama-link{min-height:48px;align-items:center;color:var(--accent)}.panorama-password{font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--ink)}.case-panorama-code{width:112px;opacity:.8}.panorama-status{font-size:.875rem;min-height:1.6em;color:var(--accent)}
@media(max-width:1000px){.home-skills{display:block}.home-skills ul{margin-top:1rem}.card-text{display:block}.resume-projects{grid-template-columns:1fr}.home-career .work-timeline li{grid-template-columns:1fr;gap:.25rem}}
@media(max-width:700px){
 :root{--nav:4.5rem;--space:2.5rem;--gutter:1.25rem}
 .page-home .home-opening{padding:2rem var(--gutter)}.home-profile{display:block}.home-profile-main h1{font-size:clamp(3.25rem,15vw,5rem)}
 .home-career{margin-top:2rem}.home-skills{margin-top:1.5rem}.home-skills ul{gap:.75rem 1rem}
 .home-profile-description{max-width:100%}.work-timeline li{grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem}
 .section-heading{align-items:start;gap:1rem}.section-heading h2{font-size:1.25rem}.heading-inline{display:flex;flex-direction:column;gap:.2rem}.section-count{display:none}
 .card-caption{grid-template-columns:1.5rem minmax(0,1fr) auto}.card-tools{flex-direction:column}.card-caption p{font-size:.8125rem}.card-caption h3{font-size:1.125rem}
 .project-entry-image,.case-artworks .artwork.landscape .artwork-image{margin-inline:0}
 .project-archive{row-gap:2rem}.project-group{margin-bottom:2.5rem}.filter-buttons{gap:.5rem 1rem}.filter-bar{flex-wrap:wrap;gap:.5rem}
 .case-heading{padding-block:2rem 1.5rem}.case-overview{padding-top:2rem}.case-overview-content{margin-top:1.25rem}
 .case-overview-copy{margin-top:1.5rem}.case-facts>div+div{margin-top:1rem}.case-facts dd{font-size:1rem}
 .case-section{padding-top:2.25rem}.case-section-heading{margin-bottom:1.25rem}.case-gallery-note{margin-top:.5rem}.case-artworks{row-gap:1.5rem}
 .case-next{margin-top:2.5rem;padding-block:1.75rem 2.25rem}.case-next-project{margin-top:1rem}
 .about-title-row{align-items:start;gap:1rem;flex-direction:column}.about-brief{display:block;margin-top:1.75rem}.about-brief>div+div{margin-top:1rem}
 .about-row{display:block}.about-row>h2,.about-row>div:first-child:has(h2){margin-bottom:1.25rem}.about-row .home-skills{margin-top:0}
 .legacy-works summary span{display:block;margin-left:1.2rem}.footer-top{gap:1.5rem}.footer-links{gap:1rem}.footer-bottom{gap:1rem;flex-wrap:wrap}
}
.software-monochrome{filter:invert(1)}

/* Mobile QA: keep captions readable and every interaction clear of the fixed nav. */
@media(max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:1rem}
  main{scroll-margin-top:var(--nav)}
  .site-header{width:100%;min-width:0}
  .identity{min-width:0;min-height:44px;gap:.75rem}
  .identity-name{flex:none}
  .menu-toggle,.mobile-menu a,.text-link,.filter-button,.contact-list a{min-height:44px}
  .mobile-menu{overscroll-behavior:contain}

  .section-heading{flex-wrap:wrap}
  .section-heading>.text-link{margin-left:auto;flex:none}

  .card-caption{
    grid-template-columns:minmax(0,1fr) 44px;
    column-gap:.75rem;
    row-gap:.45rem;
    width:100%;
    min-width:0;
  }
  .card-index{grid-column:1/-1;grid-row:1;padding-top:0}
  .card-text{grid-column:1;grid-row:2;display:block;width:100%;min-width:0}
  .card-caption h3{font-size:1.125rem;line-height:1.65;word-break:normal;overflow-wrap:break-word}
  .card-caption h3 a,.project-entry-caption h3 a{display:inline-flex;align-items:center;min-height:44px}
  .card-caption p{font-size:.875rem;line-height:1.7;word-break:normal;overflow-wrap:break-word}
  .card-tools{grid-column:2;grid-row:2;align-self:start;flex-direction:column;margin-top:-.25rem}

  .project-entry,.project-entry-link,.project-entry-caption{min-width:0}
  .project-entry-caption h3{font-size:1.125rem;line-height:1.65;word-break:normal;overflow-wrap:break-word}
  .project-entry-caption p{font-size:.875rem;line-height:1.7}

  .case-heading h1{font-size:1.875rem;line-height:1.55;word-break:normal;overflow-wrap:break-word}
  .case-overview-copy>p,.about-row p,.about-brief p:not(.lead),.service-list p{font-size:1rem;line-height:1.95}
  .case-cover img,.artwork-image img,.project-picture img,.project-entry-image img,.about-image img{width:100%;height:auto;max-width:100%;object-fit:contain}
  .case-artworks .artwork.landscape .artwork-image{margin-inline:0}
  .case-artworks figcaption{font-size:.8125rem;line-height:1.75}

  .contact-list a{display:flex;align-items:center;padding-block:.65rem}
  .footer-links a{display:flex;align-items:center;min-height:44px;padding-block:.4rem}
  .footer-bottom a{min-height:44px;align-items:center}
}

@media(max-width:430px){
  .section-heading{align-items:flex-start}
  .section-heading>.text-link{max-width:9.5rem}
  .case-facts>div{grid-template-columns:5rem minmax(0,1fr)}
}