/* ============================================================
   PROJECT PAGE — Warm Direction (full-bleed hero)
   ============================================================ */

/* HERO — full-bleed edge to edge */
.project-hero { position: relative; height: 92vh; min-height: 560px; overflow: hidden; }
.hero-image { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); animation: heroReveal 1.4s cubic-bezier(0.25,0.46,0.45,0.94) forwards; will-change: transform; }
@keyframes heroReveal { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,36,31,0.15) 0%, rgba(38,36,31,0) 35%, rgba(38,36,31,0.45) 100%); }

.hero-title-block { position: absolute; bottom: 56px; left: var(--page-pad); opacity: 0; transform: translateY(16px); animation: fadeUp 0.9s var(--ease-out) 0.5s forwards; }
.hero-eyebrow { display: block; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; background: var(--blue); padding: 6px 12px; border-radius: 2px; font-weight: 600; margin-bottom: 18px; width: fit-content; }
.hero-title { font-family: var(--font-sans); font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 0.98; letter-spacing: -0.02em; color: #fff; }

.hero-scroll-hint { position: absolute; bottom: 36px; right: var(--page-pad); display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; opacity: 0; animation: fadeIn 1s ease 1.2s forwards; }
.scroll-line { display: block; width: 1px; height: 48px; background: rgba(255,255,255,0.4); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: #fff; animation: scrollDrop 1.8s ease-in-out infinite; }
@keyframes scrollDrop { 0% { top: -100%; } 100% { top: 100%; } }
.scroll-label { font-size: 8px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.6); writing-mode: vertical-rl; }

/* INTRO ROW */
.project-main { max-width: var(--max-w); margin: 0 auto; }
.project-intro { display: grid; grid-template-columns: 1fr 320px; gap: 80px; padding: 88px var(--page-pad) 80px; align-items: start; border-bottom: 1px solid var(--line); }
.intro-text { display: flex; flex-direction: column; gap: 22px; }
.intro-text .label { display: block; margin-bottom: 4px; color: var(--soft); }
.intro-lead { font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 2; color: var(--blue); letter-spacing: 0.02em; max-width: 580px; margin-bottom: 20px; }
.intro-body { font-size: 14px; line-height: 2; color: var(--soft); letter-spacing: 0.02em; max-width: 580px; }

/* SPECS — framed panel */
.project-specs { position: sticky; top: calc(var(--nav-h) + 32px); padding: 0; }
.specs-list { display: flex; flex-direction: column; }
.spec-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; }
.spec-item dt { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--soft); font-weight: 600; white-space: nowrap; }
.spec-item dd { font-size: 12px; color: var(--soft); letter-spacing: 0.04em; text-align: right; }

/* GALLERY — framed images on paper */
.project-gallery { padding: 64px var(--page-pad) 0; display: flex; flex-direction: column; gap: 28px; }
.gallery-row { display: grid; gap: 28px; }
.gallery-row--full { grid-template-columns: 1fr; }
.gallery-row--half { grid-template-columns: 1fr 1fr; align-items: start; }
.gallery-row--asymmetric { grid-template-columns: 1fr 1fr; align-items: start; }
.gallery-item { overflow: hidden; margin: 0; background: var(--paper-deep); cursor: pointer; border-radius: 3px; }
.gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.7s var(--ease-smooth); }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-row--full .gallery-item { aspect-ratio: auto; }
.gallery-row--half .gallery-item { aspect-ratio: auto; }
.gallery-row--asymmetric .gallery-item { aspect-ratio: auto; }

/* LIGHTBOX */
.lightbox { position: fixed; inset: 0; background: rgba(244,241,234,0.97); z-index: 500; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-image-wrap { max-width: 90vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.lightbox-image-wrap img { max-width: 90vw; max-height: 88vh; object-fit: contain; transition: opacity 0.25s ease; border-radius: 3px; }
.lightbox-close { position: absolute; top: 28px; right: 28px; background: none; border: 1px solid rgba(0,0,171,0.3); color: var(--blue); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease; }
.lightbox-close:hover { border-color: var(--blue); background: var(--blue-tint); }
.lightbox-close svg { width: 16px; height: 16px; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 1px solid rgba(0,0,171,0.3); color: var(--blue); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease; }
.lightbox-prev { left: 28px; } .lightbox-next { right: 28px; }
.lightbox-prev:hover, .lightbox-next:hover { border-color: var(--blue); background: var(--blue-tint); }
.lightbox-prev svg, .lightbox-next svg { width: 13px; height: 13px; }
.lightbox-counter { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-family: var(--font-sans); font-size: 12px; color: var(--soft); letter-spacing: 0.1em; }

/* NEXT PROJECT */
.next-project { margin-top: 96px; position: relative; height: 52vh; min-height: 340px; overflow: hidden; }
.next-project-link { display: block; position: absolute; inset: 0; }
.next-image { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 0.8s var(--ease-smooth); }
.next-project-link:hover .next-image { transform: scale(1); }
.next-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,36,31,0.2), rgba(38,36,31,0.55)); transition: background 0.4s ease; }
.next-project-link:hover .next-overlay { background: linear-gradient(180deg, rgba(0,0,171,0.25), rgba(0,0,171,0.5)); }
.next-content { position: absolute; bottom: 52px; left: var(--page-pad); display: flex; flex-direction: column; gap: 18px; }
.next-label { display: block; font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: #fff; font-weight: 600; }
.next-title { font-family: var(--font-sans); font-size: clamp(32px, 4.5vw, 50px); font-weight: 700; line-height: 1.0; color: #fff; letter-spacing: -0.01em; }
.next-content .btn-line { color: #fff; border-color: rgba(255,255,255,0.5); }
.next-content .btn-line .arrow { background: #fff; }

@media (max-width: 900px) {
  .project-intro { grid-template-columns: 1fr; gap: 48px; }
  .project-specs { position: static; }
  .gallery-row--asymmetric, .gallery-row--half { grid-template-columns: 1fr; }
  .gallery-row--full .gallery-item { aspect-ratio: 16/9; }
  .gallery-row--asymmetric .gallery-item { aspect-ratio: 4/3; }
  .lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
}
@media (max-width: 640px) { .project-hero { height: 80vh; } .next-project { height: 60vw; } }

@media (max-width: 768px) {
  /* Stack: hero → lead → gallery → specs */
  .project-main { display: flex; flex-direction: column; }

  /* project-intro becomes a flex column so we can reorder intro-text and project-specs */
  .project-intro {
    order: 1;
    display: contents; /* dissolve the wrapper — children become direct flex children of project-main */
  }

  /* Lead text: order 1, full width, left-aligned, no label */
  .intro-text {
    order: 1;
    padding: 24px var(--page-pad) 20px;
  }
  .intro-text .label { display: none; }
  .intro-lead {
    font-size: 13px;
    line-height: 1.9;
    max-width: 100%;
    margin-bottom: 0;
    text-align: left;
    color: var(--blue);
  }
  .intro-body { display: none; }

  /* Gallery: order 2, edge-to-edge */
  .project-gallery {
    order: 2;
    padding: 16px 0 0;
    gap: 6px;
  }
  .gallery-row--pair {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .gallery-row--full .gallery-item { aspect-ratio: auto; border-radius: 0; }
  .gallery-row--pair .gallery-item { border-radius: 0; }
  .gallery-item { border-radius: 0; }

  /* Specs: order 3, below gallery, two-col label/value */
  .project-specs {
    order: 3;
    position: static;
    padding: 28px var(--page-pad) 0;
  }
  .specs-list { border-top: 1px solid var(--line); }
  .spec-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
  }
  .spec-item dt { text-align: left; }
  .spec-item dd { text-align: right; }

  /* Next project: always last */
  .next-project { order: 4; margin-top: 48px; }
  .lightbox { order: 5; }
}

/* Orientation-matched gallery rows */
.gallery-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gallery-gap, 20px); align-items: start; margin-bottom: var(--gallery-gap, 20px); }
.gallery-row--full { margin-bottom: var(--gallery-gap, 20px); }
.gallery-row--pair .gallery-item img, .gallery-row--full .gallery-item img { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .gallery-row--pair { grid-template-columns: 1fr; } }