/* ==========================================================================
   PROJECT DETAIL PAGE - Shared styles for all /projects/*.html pages
   ========================================================================== */

.p-hero{min-height:88vh;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.p-hero-media{position:absolute;inset:0;z-index:1}
.p-hero-media img{width:100%;height:100%;object-fit:cover}
.p-hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,22,19,.75) 0%,rgba(26,22,19,.45) 45%,rgba(26,22,19,.15) 100%),linear-gradient(180deg,rgba(26,22,19,.3),rgba(26,22,19,.15) 40%,rgba(26,22,19,.7))}
.p-hero-in{position:relative;z-index:3;max-width:1400px;margin:0 auto;width:100%;padding:0 44px 80px;color:var(--ivory)}

.p-back{display:inline-flex;align-items:center;gap:8px;color:var(--brass);font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;margin-bottom:24px;background:rgba(26,22,19,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 16px;border-radius:30px;border:1px solid rgba(184,137,90,.35);transition:.3s}
.p-back:hover{background:var(--brass);color:var(--ivory);border-color:var(--brass)}

.p-eyebrow{color:var(--brass);font-family:var(--sans);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;background:rgba(26,22,19,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(184,137,90,.35);padding:9px 18px;border-radius:30px;display:inline-block;margin-bottom:22px}

.p-hero h1{font-size:clamp(48px,7.5vw,108px);font-weight:300;line-height:1;color:var(--ivory);text-shadow:0 2px 20px rgba(26,22,19,.4);margin-bottom:16px}
.p-hero h1 em{font-style:italic;color:var(--brass);font-weight:300}

.p-hero .meta{display:flex;flex-wrap:wrap;gap:36px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(245,239,230,.2);max-width:640px}
.p-hero .meta div small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,239,230,.6);margin-bottom:6px;font-weight:600}
.p-hero .meta div b{font-family:var(--serif);font-size:20px;font-weight:400;font-style:italic;color:var(--ivory)}

/* PROJECT INTRO */
.p-intro{padding:120px 44px 60px;max-width:1400px;margin:0 auto;position:relative;z-index:2}
.p-intro-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start}
.p-intro-grid .eyebrow{display:block;margin-bottom:18px}
.p-intro-grid h2{font-family:var(--serif);font-size:clamp(28px,3.5vw,48px);font-weight:300;line-height:1.1}
.p-intro-grid h2 em{font-style:italic;color:var(--brass-deep)}
.p-intro-grid p{color:var(--mute);font-size:15.5px;line-height:1.75;margin-bottom:20px}
.p-intro-grid p b{color:var(--ink);font-weight:500}

/* SECTION LEAD */
.section-lead{padding:60px 44px 40px;max-width:1400px;margin:0 auto;position:relative;z-index:2}
.section-lead .eyebrow{display:block;margin-bottom:14px}
.section-lead h2{font-family:var(--serif);font-size:clamp(30px,4vw,54px);font-weight:300;line-height:1.06;margin-bottom:12px}
.section-lead h2 em{font-style:italic;color:var(--brass-deep)}
.section-lead p{color:var(--mute);max-width:520px;font-size:15px;line-height:1.7}

/* GALLERY GRID (Bento layout) */
.gallery-grid{max-width:1400px;margin:0 auto;padding:0 44px 60px;display:grid;grid-template-columns:repeat(12,1fr);gap:14px;position:relative;z-index:2}
.g-tile{position:relative;overflow:hidden;background:var(--ivory-2);cursor:none;border:none;padding:0;font-family:inherit;border-radius:2px}
.g-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.g-tile:hover img{transform:scale(1.04)}
.g-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(26,22,19,.6));opacity:0;transition:.4s}
.g-tile:hover::after{opacity:1}
.g-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;z-index:2;color:var(--ivory);opacity:0;transform:translateY(8px);transition:.4s cubic-bezier(.16,1,.3,1);text-align:left}
.g-tile:hover .cap{opacity:1;transform:none}
.g-tile .cap b{display:block;font-family:var(--serif);font-style:italic;font-size:17px;font-weight:400}
.g-tile .tag{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--sans);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:20px}
.g-tile .tag.built{background:var(--brass);color:var(--ivory)}
.g-tile .tag.render{background:rgba(26,22,19,.75);backdrop-filter:blur(6px);color:var(--ivory)}

/* Bento sizing */
.b-large{grid-column:span 8;aspect-ratio:16/10}
.b-med{grid-column:span 4;aspect-ratio:4/5}
.b-small{grid-column:span 4;aspect-ratio:4/3}
.b-wide{grid-column:span 6;aspect-ratio:3/2}
.b-third{grid-column:span 4;aspect-ratio:4/3}

/* Even 3-col render grid */
.render-grid{max-width:1400px;margin:0 auto;padding:0 44px 100px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:2}
.render-grid .g-tile img{aspect-ratio:4/3}

/* LIGHTBOX */
.lb{position:fixed;inset:0;background:rgba(26,22,19,.95);z-index:3000;display:none;align-items:center;justify-content:center;padding:40px;backdrop-filter:blur(10px)}
.lb.on{display:flex}
.lb-img{max-width:100%;max-height:88vh;object-fit:contain;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:24px;right:30px;background:none;border:1px solid rgba(245,239,230,.4);color:var(--ivory);width:44px;height:44px;border-radius:50%;font-size:22px;cursor:none;display:flex;align-items:center;justify-content:center;font-family:var(--sans);transition:.3s}
.lb-close:hover{background:var(--brass);border-color:var(--brass)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(26,22,19,.6);border:1px solid rgba(245,239,230,.2);color:var(--ivory);width:50px;height:50px;border-radius:50%;font-size:22px;cursor:none;display:flex;align-items:center;justify-content:center;transition:.3s}
.lb-nav:hover{background:var(--brass);border-color:var(--brass)}
.lb-prev{left:24px}.lb-next{right:24px}
.lb-caption{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:var(--ivory);font-size:13px;padding:0 30px}
.lb-caption .tag{display:inline-block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-right:10px;font-weight:600}
.lb-caption .tag.built{background:var(--brass);color:var(--ivory)}
.lb-caption .tag.render{background:rgba(245,239,230,.15);color:var(--ivory);border:1px solid rgba(245,239,230,.2)}

/* NEXT PROJECT CTA */
.next-proj{padding:120px 44px;background:var(--ink);color:var(--ivory);text-align:center;position:relative;z-index:2}
.next-proj .eyebrow{color:var(--brass);display:block;margin-bottom:16px}
.next-proj h2{font-family:var(--serif);font-size:clamp(34px,5vw,64px);font-weight:300;color:var(--ivory);line-height:1.06;margin-bottom:32px}
.next-proj h2 em{font-style:italic;color:var(--brass)}
.next-proj .actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.next-proj a{padding:16px 32px;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:none;transition:.4s;text-decoration:none;display:inline-block;font-weight:500;border-radius:2px}
.btn-brass{background:var(--brass);color:var(--ivory);border:none}
.btn-brass:hover{background:var(--ivory);color:var(--ink);letter-spacing:.28em}
.btn-outline{background:none;color:var(--ivory);border:1px solid rgba(245,239,230,.35)}
.btn-outline:hover{border-color:var(--brass);color:var(--brass)}

@media(max-width:900px){
  .p-hero{min-height:70vh;padding-top:90px}
  .p-hero-in{padding:0 22px 50px}
  .p-hero .meta{gap:24px 32px;margin-top:24px;padding-top:20px}
  .p-hero .meta div b{font-size:17px}
  .p-intro{padding:70px 22px 40px}
  .p-intro-grid{grid-template-columns:1fr;gap:30px}
  .section-lead{padding:40px 22px 24px}
  .gallery-grid{padding:0 22px 40px;grid-template-columns:1fr;gap:10px}
  .b-large,.b-med,.b-small,.b-wide,.b-third{grid-column:span 1;aspect-ratio:4/3}
  .render-grid{grid-template-columns:1fr;gap:10px;padding:0 22px 70px}
  .render-grid .g-tile img{aspect-ratio:4/3}
  .next-proj{padding:70px 22px}
  .lb{padding:20px}
  .lb-close{top:14px;right:14px;width:38px;height:38px}
  .lb-nav{width:42px;height:42px}
  .lb-prev{left:8px}.lb-next{right:8px}
}