/* ============================================
   Design Portfolio — CSS
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
    --color-bg: #fafafa;
    --color-text: #111111;
    --color-text-secondary: #666666;
    --color-border: #e0e0e0;
    --font-sans: 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
*,*::before,*::after{cursor:none!important}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden}
html::-webkit-scrollbar{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);line-height:1.5;letter-spacing:-0.01em;cursor:none;overflow-x:hidden}
a,button,[data-project],.grid-project-label{cursor:none}
img{display:block;max-width:100%;height:auto;opacity:0;transition:opacity 0.5s ease}
img.loaded{opacity:1}
a{color:inherit;text-decoration:none}

main{position:relative;overflow:hidden;max-width:100vw}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--spacing-lg);height:48px;padding-top:5px;background:transparent;pointer-events:none}
.header.hidden{display:none}
.page-project,.page-project *{cursor:none!important}
.page-project .header{background:transparent;grid-template-columns:1fr;justify-items:start;padding-left:2rem}
.page-project .header .logo,.page-project .header .nav-link:not(:first-child),.page-project .header .header-char{display:none}
.page-project .header .nav-link{color:#111;font-size:clamp(0.85rem,1vw,1.5rem);font-weight:900;letter-spacing:0.01em;opacity:1}
.page-project .header .nav{grid-column:1;justify-self:start}
.page-project .footer{padding:0;border-top:none;margin-top:0}
.header>*{pointer-events:auto}
.logo{font-size:clamp(1rem,1.4vw,2rem);font-weight:900;letter-spacing:0.02em;transition:opacity var(--transition);flex-shrink:0;grid-column:1;color:#111}
.logo:hover{opacity:0.6}
.nav{display:flex;gap:var(--spacing-md);grid-column:2;justify-self:center}
.nav-link{font-size:clamp(0.7rem,0.9vw,1.2rem);letter-spacing:0.06em;text-transform:uppercase;transition:opacity var(--transition);opacity:0.6;color:#111;font-weight:600}
.nav-link:hover,.nav-link.active{opacity:1;color:#111}
.header-char{grid-column:3;justify-self:end;font-size:clamp(1rem,1.4vw,2rem);color:#111;letter-spacing:0.05em;pointer-events:auto;font-weight:900}
.header-char a{color:inherit;text-decoration:none}
.header.on-light .logo,.header.on-light .nav-link,.header.on-light .nav-link:hover,.header.on-light .nav-link.active,.header.on-light .header-char,.header.on-light .header-char a{color:#111}

/* ---------- Top Gallery ---------- */
.top-gallery{position:relative;width:100%;height:100vh;overflow:hidden;margin-top:0;padding-top:20px;background:#fafafa}
.gallery-track{display:flex;height:100%;will-change:transform}
.gallery-card{flex-shrink:0;width:100vw;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;position:relative}
.gallery-card img{max-height:60%;max-width:55%;width:auto;height:auto;object-fit:contain;display:block;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.6s ease}
.gallery-card img.loaded{opacity:1}
.gallery-side-img{position:absolute;right:var(--spacing-lg);top:50%;transform:translateY(-50%);max-height:35%;max-width:15%;width:auto;height:auto;object-fit:contain;z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.6s ease;filter:brightness(0)}
.gallery-side-img.loaded{opacity:1}
.gallery-cap-overlay{position:absolute;top:72%;left:50%;transform:translateX(-50%);width:40%;height:auto;object-fit:contain;pointer-events:none;user-select:none;z-index:9999;mix-blend-mode:difference}

/* ==================== Editorial Grid ==================== */
.editorial-grid{display:grid;grid-template-columns:repeat(5,1fr);width:100%;padding:var(--spacing-md) var(--spacing-lg) var(--spacing-md);margin:0 auto;position:relative;z-index:5;background:linear-gradient(#ccc,#ccc) var(--spacing-lg) 0/calc(100% - 2*var(--spacing-lg)) 1px no-repeat,#fafafa;row-gap:4rem;min-height:170vh;align-items:start;align-content:start}
.grid-year{grid-column:1/-1;font-size:clamp(8rem,22vw,30rem);font-weight:900;line-height:1;color:#111;letter-spacing:-0.03em;white-space:nowrap;text-align:left}

/* ==================== Project Info Table ==================== */
.grid-project-info{position:absolute;z-index:10;font-size:clamp(0.75rem,0.9vw,1.1rem);font-weight:900;color:#111;letter-spacing:0.03em;text-align:left}
.gpi-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4rem;margin:0;padding:0;line-height:1;align-items:start;opacity:0.35;cursor:pointer;transition:opacity 0.3s}
.gpi-row.dim{opacity:0.2}
.gpi-row.active{opacity:1}
.gpi-row span{margin:0;padding:0}
.gpi-row span:last-child{text-align:right}
.grid-plus{display:none}

/* Grid Bio */
.grid-bio{position:relative;background:#fafafa;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid #ccc;padding-bottom:24px}
.grid-bio img{display:block;width:100%;height:auto}

/* Grid Project Image */
.grid-project-img{position:absolute;z-index:4;pointer-events:none;cursor:pointer;user-select:none;object-fit:contain;opacity:0!important;transition:opacity 0.8s ease,filter 0.4s ease}
.grid-project-img.revealed{opacity:1!important;transform:translateY(0);transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.25,0.1,0.25,1),filter 0.4s ease}
.grid-project-img.revealed:hover,.grid-project-img.show:hover{filter:blur(4px)}
.grid-project-img.show{opacity:1!important;transform:translateY(0);pointer-events:auto}

/* ---------- Studies Section ---------- */
.studies-section{padding:var(--spacing-md) var(--spacing-lg);margin:0 auto;background:#fafafa;position:relative;z-index:3}
.studies-grid img{width:100%;display:block;transition:opacity 0.4s ease,filter 0.4s ease}
.studies-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;row-gap:24px;background-color:#fafafa;border-top:1px solid #ccc;padding-top:24px}
.studies-grid img:hover{filter:blur(4px)}
.study-card{position:relative;overflow:hidden}
.study-card img{width:100%;display:block}
.study-num{display:block;font-size:0.75rem;font-weight:600;color:#111;padding:2px 0 0 4px}

/* ---------- Footer ---------- */
.footer{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xl) var(--spacing-lg);border-top:1px solid var(--color-border);font-size:0.875rem;color:var(--color-text-secondary);letter-spacing:0.03em;margin-top:auto;position:relative;z-index:2;background:#fafafa}
.footer-right{display:flex;gap:var(--spacing-md)}
.footer-right a{transition:opacity var(--transition)}
.footer-right a:hover{opacity:0.5}

/* ---------- Project Detail Page ---------- */
.project-detail{display:flex;min-height:100vh}
.project-stacked{flex-direction:column;align-items:center}
.project-stacked img{width:40%!important;height:auto!important;object-fit:contain!important;background:#BCBCBC;padding:15vh 4rem;box-sizing:border-box;margin:0 0 5px 0;display:block;flex-shrink:0}
.project-stacked img:last-child{margin-bottom:0}
.project-stacked .project-images{width:100%;max-width:none;padding:0 4rem;display:flex;flex-direction:column;align-items:center;gap:0;font-size:0;line-height:0}
.project-stacked img.project-overlay{position:fixed!important;bottom:2vh!important;left:2rem!important;transform:none!important;width:calc(100vw - 4rem)!important;height:auto!important;max-height:90vh!important;object-fit:contain!important;z-index:10!important;pointer-events:none!important;background:transparent!important;padding:0!important;margin:0!important;display:block!important}

/* ---------- Page Transition ---------- */
.page-transition{position:fixed;inset:0;z-index:9999;background:var(--color-bg);opacity:0;pointer-events:none;transition:opacity 0.35s ease}
.page-transition.active{opacity:1;pointer-events:all}

/* ============================================
   移动端全局适配
   ============================================ */
@media (max-width: 768px) {
    *,*::before,*::after{cursor:auto!important}
    .page-project,.page-project *{cursor:auto!important}
    .project-stacked img{width:90%!important;padding:3rem 1rem!important}
    .project-stacked .project-images{padding:0 1rem!important}
    .project-stacked img.project-overlay{bottom:2vh!important;left:1.5rem!important;width:calc(100vw - 3rem)!important;max-height:50vh!important;transform:none!important}
    .top-gallery{height:50vh;padding-top:40px}
    .gallery-card img{max-height:55%;max-width:65%}
    .gallery-side-img{right:0.5rem;max-height:12%;max-width:8%}
    .header{padding:0.5rem 1rem;height:40px}
    .logo{font-size:1rem}
    .nav-link{font-size:0.75rem}
    .editorial-grid{display:flex;flex-direction:column;padding:1.5rem 1rem 2rem;min-height:auto;row-gap:0;background:#fafafa;border-top:1px solid #ccc}
    .grid-year{font-size:15vw!important;display:flex!important;justify-content:flex-end!important;margin-bottom:1rem}
    .grid-plus{display:none!important}
    .grid-project-img{position:relative!important;left:auto!important;top:auto!important;width:70%!important;height:auto!important;aspect-ratio:1;object-fit:cover!important;opacity:1!important;transform:none!important;margin:0 auto 0.25rem}
    .grid-project-info{position:relative!important;left:auto!important;top:auto!important;width:100%!important;font-size:0.75rem!important;margin-bottom:1.5rem}
    .gpi-row{gap:1rem!important;opacity:1!important}
    .grid-bio{font-size:8vw!important;padding:var(--spacing-md) 1rem!important}
    .footer{flex-direction:column;gap:0.5rem;padding:1.5rem 1rem;text-align:center}
    .studies-grid{grid-template-columns:repeat(3,1fr);gap:8px;row-gap:12px}
    .study-num{font-size:0.65rem}
    .gallery-cap-overlay{top:78%!important;width:60%!important}
}
@media (max-width: 480px) {
    .editorial-grid{padding:1rem 0.75rem 1.5rem}
    .grid-year{font-size:14vw!important}
    .grid-bio{font-size:7vw!important;padding:var(--spacing-sm) 0.75rem!important}
    .grid-project-info{font-size:0.7rem!important}
    .gpi-row{gap:0.75rem!important}
    .gallery-cap-overlay{width:90%!important;max-width:350px!important;top:82%!important}
    .studies-grid{grid-template-columns:repeat(3,1fr);gap:6px;row-gap:10px}
}