/* ============================================================
   GZJ PROJECT PAGES — shared layout, nav, lightbox, hero
   Applies to all project-*.html pages
   ============================================================ */

html, body { margin:0; padding:0; background:var(--web-wht); overflow-x:hidden; }

/* --- Custom lightbox --- */
.gzj-lightbox-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.92); z-index:9999; opacity:0; pointer-events:none; transition:opacity .18s; }
.gzj-lightbox-overlay.open { opacity:1; pointer-events:auto; }
.gzj-lightbox-inner { max-width:90vw; max-height:90vh; display:flex; align-items:center; justify-content:center; position:relative; }
.gzj-lightbox-inner img { max-width:100%; max-height:90vh; display:block; box-shadow:0 6px 30px rgba(0,0,0,.6); }
.gzj-lightbox-close,
.gzj-lightbox-prev,
.gzj-lightbox-next { position:absolute; background:transparent; border:0; color:#fff; font-size:40px; line-height:1; cursor:pointer; padding:8px; }
.gzj-lightbox-close { right:12px; top:8px; font-size:36px; }
.gzj-lightbox-prev { left:-60px; top:50%; transform:translateY(-50%); font-size:48px; }
.gzj-lightbox-next { right:-60px; top:50%; transform:translateY(-50%); font-size:48px; }

/* --- Full-viewport hero --- */
.proj-hero { position:relative; width:100vw; height:80vh; overflow:hidden; background:#0d0d0d; }
.proj-hero video,
.proj-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.proj-hero-gradient { position:absolute; left:0; right:0; bottom:0; height:20%; background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); pointer-events:none; }
/* --- Grid geometry: one source of truth ---
   Modules span every column but the first and last, so the empty first column
   is the gutter the fixed index nav sits in -- which is why the nav's width is
   derived from --grid-col below rather than set independently. Widening the
   modules means raising --grid-cols: more columns of the same total width
   makes each one narrower, so the two end gutters shrink and the span grows.
   5 cols -> 3/5 of the page; 7 cols -> 5/7, about 19% wider. */
.proj-shell,
.proj-hero-title-wrap {
  --grid-pad: 40px;
  --grid-gap: 16px;
  --grid-cols: 7;
  --grid-col: calc((100vw - 2 * var(--grid-pad) - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols));
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
  padding: 0 var(--grid-pad);
  box-sizing: border-box;
}

.proj-hero-title-wrap { position:absolute; inset:0; align-items:end; pointer-events:none; }
.proj-hero-title { grid-column:2 / -2; margin:0 0 24px; color:#fff; font-family:var(--web_font); font-size:40px; font-weight:500; line-height:40px; z-index:2; }

.proj-shell { width:100vw; align-items:start; }

/* --- Sidebar navigation --- */
.proj-index { display:contents; }
/* The logo is 1664x900 (~1.85:1), so the box is sized to that ratio rather
   than the square the old home glyph used. It's drawn as a mask tinted by
   background-color -- the PNG's own colour is irrelevant, only its alpha --
   which is what lets the same file render white over the hero and black once
   scrolled onto the content. No hover treatment. */
/* Half the nav column's width -- still derived from the same expression as
   .index-bottom-group below, so it scales with the grid rather than being a
   fixed size. aspect-ratio matches the PNG (1664x900) exactly, so `contain`
   fills the box with no letterboxing and the height follows the width. */
.proj-home {
  position:fixed; top:28px; left:30px; z-index:50;
  width: calc((var(--grid-pad) + var(--grid-col) - 30px) / 2);
  min-width: 75px;
  aspect-ratio: 1664 / 900;
}
.proj-home-icon { display:block; width:100%; height:100%; background-color:#fff; -webkit-mask:url('../images/logo_inverted_mobile.png') no-repeat center / contain; mask:url('../images/logo_inverted_mobile.png') no-repeat center / contain; transition:background-color .15s ease; }
.proj-home.over-content .proj-home-icon { background-color:#000; }

/* Width tracks the grid's first column instead of a standalone 20vw, so it
   always ends one gap short of where the modules begin -- a fixed 290px would
   now overlap them. pointer-events are off on the box and back on for the
   links, so the empty part of the container can never swallow a click on a
   module beneath it at narrow widths. */
.index-bottom-group {
  position:fixed; left:30px; bottom:28px;
  width: calc(var(--grid-pad) + var(--grid-col) - 30px);
  min-width: 150px;
  display:flex; flex-direction:column; z-index:50;
  pointer-events: none;
}
.index-bottom-group a { pointer-events: auto; }
.index-tabs,
.index-tabs-bottom { display:flex; flex-direction:column; }
.index-tabs-bottom { margin-top:44px; }

.proj-nav-item { display:block; padding:0; color:#000; text-decoration:none; font-family:var(--web_font); font-size:var(--size-1); line-height:18px; opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1); }
.proj-nav-item:hover { text-decoration:underline; }

.index-contact { margin-top:44px; display:flex; flex-direction:column; }
.proj-contact-item { display:block; padding:0; color:#000; text-decoration:none; font-family:var(--web_font); font-size:var(--size-1); line-height:18px; opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1); }
.proj-contact-item:hover { text-decoration:underline; }

/* Staggered fade-in */
.index-tabs .proj-nav-item:nth-child(1) { transition-delay:.08s, 0s; }
.index-tabs .proj-nav-item:nth-child(2) { transition-delay:.17s, 0s; }
.index-tabs .proj-nav-item:nth-child(3) { transition-delay:.26s, 0s; }
.index-tabs .proj-nav-item:nth-child(4) { transition-delay:.35s, 0s; }
.index-tabs .proj-nav-item:nth-child(5) { transition-delay:.44s, 0s; }
.index-tabs-bottom .proj-nav-item:nth-child(1) { transition-delay:.53s, 0s; }
.index-tabs-bottom .proj-nav-item:nth-child(2) { transition-delay:.62s, 0s; }
.proj-contact-item:nth-child(1) { transition-delay:.71s, 0s; }
.proj-contact-item:nth-child(2) { transition-delay:.80s, 0s; }
.proj-contact-item:nth-child(3) { transition-delay:.89s, 0s; }
.proj-contact-item:nth-child(4) { transition-delay:.98s, 0s; }

#proj-index.revealed .proj-nav-item,
#proj-index.revealed .proj-contact-item { opacity:1; }

/* --- Project content area --- */
/* 2 / -2 == "all columns but the first and last", so this tracks --grid-cols
   automatically instead of needing to be updated alongside it. */
.proj-content { grid-column:2 / -2; padding:0 0 0px; box-sizing:border-box; }
.project_01,
.project_concepts { opacity:1 !important; transform:none !important; }
/* Four columns: the copy is held to the first two so the measure stays
   readable now the modules are wider, and the metadata sits out in the fourth.
   Column 3 is deliberately left empty as the gap between them.
   Children 1 and 3 are Webflow's label/spacer blocks and stay hidden. */
.project_header { display:grid; grid-template-columns:repeat(4, 1fr); column-gap:40px; row-gap:16px; align-items:start; }
.project_header > .div-block:nth-child(1) { display: none; }
.project_header > .div-block:nth-child(2) { grid-column: 1 / 3; }
.project_header > .div-block:nth-child(3) { display: none; }
.project_header > .div-block:nth-child(4) { grid-column: 4; }
.paragraph-r { padding-left:0; }
.proj-content a { color:var(--web_blue); text-decoration:none; }
.proj-content a:hover { text-decoration:underline; }
.portfolio-image { cursor:zoom-in; display:block; margin-top:10px; margin-bottom:10px; }
.lightbox-thumbnail { cursor:zoom-in; }

/* --- Module spacing (overrides webflow.css defaults) --- */
.w-background-video,
.background-video-1 { isolation:isolate; overflow:clip; margin-top:10px; margin-bottom:10px; }
.w-video { margin-top:10px; margin-bottom:10px; }

/* Academy Museum aperture animation: not 16:9, so instead of forcing a fixed
   box (which crops it via object-fit:cover), let it size from the video's
   own intrinsic dimensions like a normal block-level video. */
.background-video-1 { height: auto; max-height: none; padding-top: 0; }
.background-video-1 > video { position: static; inset: auto; width: 100%; height: auto; object-fit: initial; }

/* --- Clickable video link wrapper --- */
.gzj-video-link { display:block; text-decoration:none; position:relative; margin-top:10px; margin-bottom:10px; }
.gzj-video-link .w-background-video { margin-top:0; margin-bottom:0; }
.gzj-video-link-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); opacity:0; transition:opacity .25s ease; }
.gzj-video-link:hover .gzj-video-link-overlay { opacity:1; }
.gzj-video-link-text { margin:0; color:#fff; text-align:center; }

/* --- Section spacing (replaces .leading divs) --- */
.project_header { margin-top: 80px; margin-bottom: 80px; }
.project_header .paragraph-l,
.project_header .paragraph-r { margin: 0; }

/* --- Mobile-only elements hidden on desktop --- */
.section-3.section-5.section-6,
.mobile-index { display: none !important; }

/* --- Next Project link (mobile footer) ---
   .mobile-footer itself is styled by the shared rule in
   gzj-portfolio.webflow.css so home + project pages match. */
.next-project { display:block; font-family:var(--web_font); font-size:var(--size-1); color:var(--web-wht); text-decoration:none; }
.next-project:hover { text-decoration:underline; }

/* --- Leaving the page: fade to blue before navigating home --- */
.page-veil { position:fixed; inset:0; z-index:200; background:var(--web_blue); opacity:0; pointer-events:none; transition:opacity .45s ease; }
.page-veil.on { opacity:1; }

/* --- Leaving the page: right-to-left wipe into the next project's hero.
   Same treatment as the home page, so project-to-project navigation reads
   identically to home-to-project. Inert until .wiping is added. --- */
/* Sized 100vw/100vh rather than inset:0 deliberately. A fixed element with
   inset:0 fills the viewport MINUS the scrollbar, but .proj-hero is width:100vw
   which INCLUDES it. Since both use object-fit:cover, a ~15px box difference
   changes the computed crop and the image visibly jumps at the handoff. These
   must be the same box for the wipe to land seamlessly on the next hero. */
.page-wipe { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:100; background:var(--web_blue); clip-path:inset(0 0 0 100%); pointer-events:none; }
.page-wipe.wiping { clip-path:inset(0 0 0 0); transition:clip-path .72s cubic-bezier(.76,0,.24,1); }
.page-wipe img { width:100%; height:100%; object-fit:cover; display:block; }

/* --- Arrival animation (desktop) ---
   Picks up where the home page's wipe left off: the hero lands filling the
   viewport, then settles to its resting 80vh while the rest of the page
   rises into the space it vacates. --- */
@media (min-width: 901px) {
  .proj-hero {
    height: 100vh;
    animation: hero-settle .85s cubic-bezier(.22,1,.36,1) .15s forwards;
  }
  @keyframes hero-settle {
    to { height: 80vh; }
  }

  /* The rise goes on .proj-content, NOT .proj-shell. .proj-shell is an
     ancestor of .proj-home and .index-bottom-group, and a transform on an
     ancestor makes it the containing block for position:fixed descendants --
     which would un-fix the home button and the index nav. */
  .proj-content {
    opacity: 0;
    animation: content-rise .85s cubic-bezier(.22,1,.36,1) .15s forwards;
  }
  @keyframes content-rise {
    from { opacity: 0; transform: translateY(48px); }
    to   { opacity: 1; transform: none; }
  }

  /* Hero furniture and the home button ease in once the hero has landed. */
  .proj-hero-gradient,
  .proj-hero-title,
  .proj-home {
    opacity: 0;
    animation: arrive-fade .7s ease .4s forwards;
  }
  @keyframes arrive-fade {
    to { opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .proj-hero { height: 80vh; animation: none; }
  .proj-content { opacity: 1; animation: none; }
  .proj-hero-gradient,
  .proj-hero-title,
  .proj-home { opacity: 1; animation: none; }
}

/* --- MacBook breakpoint: typography at 0.75x standard (desktop/1920) size.
   --size-1/--size-2 are already scaled globally in gzj-portfolio.webflow.css;
   these are this file's own hardcoded (non-var) desktop font sizes. --- */
@media (min-width: 901px) and (max-width: 1440px) {
  .proj-hero-title { font-size: 30px; line-height: 30px; } /* 40px * 0.75 */
  .gzj-lightbox-close { font-size: 27px; } /* 36px * 0.75 */
  .gzj-lightbox-prev,
  .gzj-lightbox-next { font-size: 36px; } /* 48px * 0.75 */
  .proj-nav-item,
  .proj-contact-item { line-height: 13.5px; } /* 18px * 0.75 */
}

/* --- Responsive --- */
@media (max-width:900px) {
  body { padding-top: 40px; }
  body.dark { background-color: var(--web-wht) !important; }

  /* hero: 16:9 box, title aligned to content margin */
  .proj-hero { height: auto; aspect-ratio: 16 / 9; }
  .proj-hero-gradient { height: 50%; }
  .proj-hero-title-wrap { display: flex; align-items: flex-end; padding: 0 24px; }
  .proj-hero-title { font-size: 24px; line-height: 28px; }

  /* shell: remove horizontal padding so images can go full-bleed */
  .proj-shell { grid-template-columns:1fr; padding:0; }
  .proj-home,
  .index-bottom-group { display: none; }
  .proj-content { grid-column:1; padding:0; }

  /* text blocks get the 24px margin */
  .project_header { padding: 0 24px; }

  /* media: full-width, no gaps */
  .portfolio-image,
  .w-background-video,
  .background-video-1,
  .w-video,
  .gzj-video-link { width: 100%; margin: 0; display: block; }

  /* "Try Variable Logo Tool" (de Young) / "Go to Microsite" (Points & Procedures):
     keep the graphic visible on mobile, but disable the link itself */
  .gzj-video-link { pointer-events: none; cursor: default; }

  /* lightbox is disabled on mobile (see js/project.js); drop the zoom-in hint */
  .portfolio-image, .lightbox-thumbnail { cursor: default; }

  .project_header { grid-template-columns: 1fr; margin-top: 40px; margin-bottom: 40px; }
  .project_header:first-child { margin-top: 0; }
  .project_header:last-child { margin-bottom: 0; }
  .project_header > .div-block:nth-child(2),
  .project_header > .div-block:nth-child(4) { grid-column: 1; }
  .proj-content .paragraph-l { font-size: 16px; line-height: 24px; }
}