/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */
    @font-face {
        font-family: LayGroteskBold;
        src: url(../fonts/LayGrotesk-Bold.woff2);
    }

    :root {
    /* Grid System */
    --grid-columns: 12;

    /* Colors */
    --color-bg:#EBEBE6;
    --color-overlay-light:rgba(253,253,246,0.9);
    --color-mute:rgb(0,0,0,0.5);
    --color-txt:#000;
    --color-colophon:#faffd2;    

    /* Typography */
    --font-family-EN: 'LayGroteskBold', Helvetica, Sans-serif;
    --font-family-CN: 'Noto Sans SC', sans-serif;
    --font-weight-CN: 800;
    --line-height-hero: 0.76;
    --line-height-body: 0.92;
    --line-height-CN: 1.1;
    --letter-spacing-hero:-0.3rem;
    --font-size-hero:10rem;
    --font-size-display:5rem;
    --font-size-display-s: 4.25rem;
    --font-size-body: 1.25rem;
    --font-size-body-CN: 1.15rem;
    --font-size-note: 1rem;
    --font-size-note-CN: 0.9rem;

    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-default: 0.75rem;
    --spacing-medium: 1rem;
    --spacing-large: 1.5rem;
    --spacing-xlarge: 3rem;
    --spacing-xxlarge: 6rem;
    }


/* ============================================================================
   UNIVERSAL STYLES
   ============================================================================ */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        font-family: var(--font-family-EN);
        background: var(--color-bg);
        color:var(--color-txt);
        line-height: var(--line-height-body);
    }
    .no-break {
        white-space: nowrap;
    }
    a {
        cursor: pointer;
        text-decoration: none;
        color: var(--color-mute);
    }
    a:hover {
        background-color: var(--color-txt);
        color: var(--color-bg);
    }
    a .hero-title-link:hover{
        background:none !important;
    }
    .hero-title-link:hover{
        background:none !important;
    }
    ::-moz-selection { /* Code for Firefox */
        color: var(--color-bg);
        background:  var(--color-txt);
    }

    ::selection {
        color: var(--color-bg);
        background:  var(--color-txt);
    }
    /* Grid System */
    .grid {
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
        gap: var(--spacing-default);
        width: 100%;
    }
    .col-9 { 
        grid-column: span 9; 
    }
    .col-3 { 
        grid-column: span 3; 
    }
    .col-2 { 
        grid-column: span 2; 
    }
    .col-1 { 
        grid-column: span 1; 
    }

/* ============================================================================
   SECTION - INFO
   ============================================================================ */

    /* Hero Title */
    #hero-title{
        text-align: center;
        height: fit-content;
        z-index: 900;
        margin:-1rem 0;
    }
    #hero-wordmark{
        width:100%;
        height:auto;
    }
    #hero-wordmark-stack{
        width:100%;
        height:auto;
        display: none;
    }
    @media screen and (orientation: portrait) {
        #hero-wordmark {
            display: none;
        }
        #hero-wordmark-stack {
            display: block;
        }
    }


    /* Info */
    .info-wrapper{
        padding:var(--spacing-default);
    }
    .info-en, .info-cn{
        padding-right:var(--spacing-xlarge) !important;
        transform-origin: center center;
    }
    .info-en{
        font-size: var(--font-size-body);
    }
    .info-cn{
        font-family: var(--font-family-CN);
        font-weight: var(--font-weight-CN);
        font-size: var(--font-size-body-CN);
        line-height: var(--line-height-CN);
        font-optical-sizing: auto;
    }
    #email-address:hover{
        color: var(--color-bg);
        background-color: var(--color-txt);
    }

    /* additional elements */
    #footnote-soon{
        position:absolute;
        bottom:var(--spacing-default);
        left:var(--spacing-default);
        color:var(--color-txt);
        font-size: var(--font-size-display-s);
        background-color: #fff6a6;
    }
    
    /* ------------------------- 
    layout control, single
    ------------------------- */
    .section-info {
        padding: var(--spacing-default);
        min-height: 100vh;
        /*margin-top: var(--spacing-xxlarge);*/
    }
    
    /* Landscape: 12-column grid */
    .info-combined {
        grid-template-columns: repeat(12, 1fr);
    }
    .info-combined .col-header,
    .info-combined .col-content {
        grid-column: span 3;
    }
    .col-title{
        grid-column: span 12;
    }
    #header-about { order: 1; }
    #content-about { order: 6; }
    #header-capability { order: 2; }
    #content-capability { order: 7; }
    #header-approach { order: 3; }
    #content-approach { order: 8; }
    #header-contact { order: 4; }
    #content-contact { order: 9; }
    #hero-title{ order: 5; }

    /* Portrait: 6-column grid with precise control */
    @media screen and (orientation: portrait),
       screen and (max-aspect-ratio: 1/1),
       screen and (max-width: 900px) {
        .info-combined {
            grid-template-columns: repeat(6, 1fr) !important;
        }
        
        .info-combined .col-header {
            grid-column: span 2;
        }
        
        .info-combined .col-content {
            grid-column: span 4;
        }
        .col-title{
            grid-column: span 6;
            padding: var(--spacing-large) 0;
        }
        
        /* Order control works perfectly since all items are in same container */
        #header-about { order: 1; }
        #content-about { order: 2; }
        #header-capability { order: 3; }
        #content-capability { order: 4; }
        #header-approach { order: 5; }
        #content-approach { order: 6; }
        #header-contact { order: 7; }
        #content-contact { order: 8; }
        
        #hero-title{ 
            order: 9; 
            margin-top: var(--spacing-large);
        }
        
        #footnote-soon{
            position: static;            /* or `relative`; static is cleanest */
            display: inline-block;             
            margin: var(--spacing-xlarge) var(--spacing-default) var(--spacing-default) var(--spacing-default);
        }
    }


/* ============================================================================
   PROJECT STACK
   ============================================================================ */
    .project:focus {
        outline: none !important;
    }
 
    .project:last-child{
        margin-bottom: var(--spacing-xxlarge);
    }
    .project-header-wrapper{
        display: flex;
        padding: var(--spacing-small) var(--spacing-default);
        font-size: var(--font-size-note);
    }
    .project-category, .project-title{
        padding-right:var(--spacing-large);
    }
    .project-colophon-button{
        margin-left: auto;
        text-align: right;
        font-size: var(--font-size-note);
        margin-bottom: var(--spacing-default);
    }
    .project-colophon-button:hover{
        background-color: var(--color-txt);
        color: var(--color-txt);
    }

    .image-gallery {
        height: 90vh;
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        white-space: nowrap; /* Prevents wrapping */
        gap: var(--spacing-default);
        margin:0 var(--spacing-default) var(--spacing-large) var(--spacing-default);
        border-radius: var(--spacing-default);
        overflow-x: scroll;
    }
    .image-gallery::-webkit-scrollbar {
        display: none;
    }

    .image-gallery img,
    .image-gallery video {
        height: 100%;
        width: auto;
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: var(--spacing-default);
        flex: 0 0 auto; /* Prevents shrinking */
    }
    /* ----- Stacked Images ----- */
    .stacked-images {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-default);
        height: 100%;
        max-height: 100%;
        width: max-content; /* Ensures container only takes necessary width */
        max-width: 100%;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .stacked-images img,
    .stacked-images video {
        flex-grow: 1;
        height: calc((100% - 16px) / 2); /* Ensures even spacing */
        width: auto;
        max-width: 100%;
        object-fit: contain; /* Prevents cropping */
        display: block;
    }


/* ============================================================================
   COLOPHON
   ============================================================================ */
    .colophon-wrapper {
        display: flex;
        flex-direction: column;
        width:100%;
        height: fit-content !important;
        max-height: 92vh;
        background-color: var(--color-colophon);
        color: var(--color-txt);
        padding: var(--spacing-default) var(--spacing-default) var(--spacing-xlarge) var(--spacing-default);
        overflow-y:scroll;
        border-radius: var(--spacing-medium) var(--spacing-medium) 0 0;
        z-index: 1010;
    }
    .project-description{
        width:100%;
        font-size: var(--font-size-display);
        text-align: center;
        padding: var(--spacing-large) var(--spacing-xlarge);
        margin-bottom: var(--spacing-large);
    }
    .project-colophon{
        margin-top: auto;
    }
    .colophon-module{
        display: grid; /* Added this */
        grid-template-columns: repeat(12, 1fr);
        padding-bottom: var(--spacing-medium);
    }
    .colophon-module:last-child{
        padding-bottom: 0;
    }
    .colophon-header{
        grid-column: 6 / span 1; /* Changed to start from 4th column */
    }
    .colophon-content{ /* Fixed typo: was .colophone-content */
        grid-column: span 5;
    }
    .colophon-content p, .colophon-content a {
    /* styles for paragraphs inside colophon-content */
    font-size: var(--font-size-note);
    }

   
    .colophon-en{
        font-size: var(--font-size-note);
    }
    .colophon-cn{
        font-family: var(--font-family-CN);
        font-weight: var(--font-weight-CN);
        font-size: var(--font-size-note-CN);
        font-optical-sizing: auto;
    }

    /* Portrait: 6-column grid with precise control */
    @media (orientation: portrait) {
        .colophon-wrapper{
            max-height: 85vh;
        }
        .colophon-module{
            display: grid; /* Added this */
            grid-template-columns: repeat(6, 1fr);
        }
        .colophon-header{
            grid-column: span 1; /* Changed to start from 4th column */
        }
        .colophon-content{ /* Fixed typo: was .colophone-content */
            grid-column: span 5;
            padding-right: var(--spacing-large);
        }
    }


/* ============================================================================
THUMBNAIL DRAWER
============================================================================ */

.thumbnail-wrapper {
  position: fixed;
  bottom: var(--spacing-default);
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  box-sizing: border-box;
  display: inline-flex;                 /* <- inline-level for shrink-to-fit */
  inline-size: -webkit-fit-content;     /* Safari */
  inline-size: fit-content;
  max-inline-size: calc(100vw - (var(--spacing-default) * 2));
  height: var(--spacing-xxlarge);
  padding: var(--spacing-default);
  border-radius: var(--spacing-default);
  background-color: var(--color-overlay-light);
  align-items: center;
  justify-content: center;
  transition: height 0.3s ease, padding 0.3s ease;
  z-index: 100000 !important;
  box-shadow: 1px 1px 11px 0px rgba(0,0,0,0.15);
  -webkit-box-shadow: 1px 1px 11px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 11px 0px rgba(0,0,0,0.15);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backface-visibility: hidden;
}

/* The viewport for the strip */
.thumbnail-rail {
  height: 100%;
  width:auto;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  min-width: 0; /* <-- defensive, lets it shrink properly in Safari */
}

/* The actual strip; width expands to content */
.thumbnail-track {
  height: 100%;
  display: flex;
  gap: var(--spacing-default);
  width: max-content;      /* size to its children */
  margin-inline: auto;     /* center when it fits */
}


/* Thumbs never wrap or shrink */
.thumbnail-img {
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: var(--spacing-small);
}

.thumbnail-img:hover{
    transform: scale(0.9);
}

#thumbnail-title{
    display: none;
    text-align: center;
    width: 100%;
    pointer-events: auto; 
}


.thumbnail-wrapper.is-collapsed {
  inline-size: auto; /* implicit with width:auto; either is fine */
  height: calc(var(--spacing-large) + var(--spacing-default));
  padding: 0 var(--spacing-default);
  cursor: pointer;
  z-index: 100000 !important;
  position: fixed;
  touch-action: manipulation;
  pointer-events: auto;
}


.thumbnail-wrapper.is-collapsed .thumbnail-rail { 
    display: none; 
}
.thumbnail-wrapper.is-collapsed #thumbnail-title { 
    display: block; 
}
/* Make the wrapper the tap target when collapsed */
.thumbnail-wrapper.is-collapsed * { pointer-events: none; }
.thumbnail-wrapper.is-collapsed #thumbnail-title { pointer-events: auto; }

/* ============================================================================
   RESPONSIVE STYLING
   ============================================================================ */
    /* Super Large Ttile */
    @media (max-width: 2960px) {
        :root {
            /* Typography */
            --font-size-hero:16rem;
            --font-size-display:8rem;
            --font-size-body: 1.75rem;
            --font-size-body-CN: 1.6rem;
            --font-size-note: 1.15rem;
            --font-size-note-CN: 1.05rem;
        }
    }
    /* Extra Large Desktop */
    @media (max-width: 2240px) {
        :root {
            /* Typography */
            --font-size-hero:14rem;
            --font-size-display:7rem;
            --font-size-body: 1.5rem;
            --font-size-body-CN: 1.4rem;
            --font-size-note: 1rem;
            --font-size-note-CN: 0.9rem;
        }
    }
    /* Large Desktop */
    @media (max-width: 1800px) {
        :root {
            /* Typography */
            --font-size-hero:11.5rem;
            --font-size-display:6rem;
            --font-size-body: 1.375rem;
            --font-size-body-CN: 1.25rem;
            --font-size-note: 1rem;
            --font-size-note-CN: 0.9rem;
        }

    }
    /* Desktop */
    @media (max-width: 1512px) {
        :root {
            /* Typography */
            --font-size-hero:9rem;
            --font-size-display:5rem;
            --font-size-display-s:3.5rem;
            --font-size-body: 1.125rem;
            --font-size-body-CN: 1.05rem;
            --font-size-note: 1rem;
            --font-size-note-CN: 0.9rem;
        }
    }
    /* Desktop-Narrow */
    @media (max-width: 1120px) {
        :root {
            /* Typography */
            --font-size-hero:7.5rem;
            --font-size-display:4rem;
            --font-size-display-s:3rem;
            --font-size-body: 1rem;
            --font-size-body-CN: 0.9375rem;
            --font-size-note: 0.875rem;
            --font-size-note-CN: 0.75rem;
        }
        .image-gallery {
            height: 65vh;
        }

    }
    /* Tablet */
    @media (max-width: 768px) {
        :root {
            /* Typography */
            --font-size-display:2.25rem;
            --font-size-display-s:2rem;
            --font-size-body: 1rem;
            --font-size-body-CN: 0.9375rem;
            --font-size-note: 0.875rem;
            --font-size-note-CN: 0.75rem;
        }
         .image-gallery {
            height: 55vh;
        }
        .thumbnail-wrapper {
            height: 6rem;
        }
        .project-description{
            padding: var(--spacing-default);
        }
        

    }
    /* Mobile styles */
    @media (max-width: 375px) {
         :root {
            /* Typography */
            --font-size-display:2rem;
            --font-size-display-s:2rem;
            --font-size-body: 0.75rem;
            --font-size-body-CN: 0.6875rem;
            --font-size-note: 0.75rem;
            --font-size-note-CN: 0.625rem;
        }
        .image-gallery {
            height: 50vh;
        }
        .thumbnail-wrapper {
            height: 5rem;
        }
        .project-description{
            padding: var(--spacing-default);
        }
        
    }