:root { --ink:#18202d; --gold:#c5a059; --cream:#f7f4ee; --line:#e7dfd1; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Montserrat,Arial,sans-serif; }
.project-header { min-height:84px; padding:16px clamp(20px,5vw,84px); display:flex; align-items:center; justify-content:space-between; background:rgba(247,244,238,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:3; backdrop-filter:blur(14px); }
.brand img { width:92px; display:block; }
.back-link { color:var(--ink); font-size:13px; font-weight:700; text-decoration:none; transition:color .2s ease; }
.back-link:hover { color:var(--gold); }
.project-page { width:min(1220px,calc(100% - 40px)); margin:0 auto; padding:clamp(42px,7vw,100px) 0; }
.project-hero { display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(24px,5vw,76px); align-items:center; }
.project-media { min-height:420px; overflow:hidden; border-radius:4px; background:#20242a; box-shadow:0 24px 60px rgba(24,32,45,.18); }
.project-media img,.project-media video { display:block; width:100%; height:100%; min-height:420px; object-fit:cover; }
.project-media img,.gallery-item img { -webkit-user-drag:none; user-select:none; }
.project-eyebrow { color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:15px 0 20px; font-family:'Playfair Display',serif; font-size:clamp(42px,6vw,78px); line-height:.98; letter-spacing:-.045em; }
.project-sub { margin:0 0 22px; color:#5c6570; font-size:18px; line-height:1.6; }
.project-description { margin:0; color:#434c58; line-height:1.85; }
.facts { margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); list-style:none; }
.facts li { padding:17px; background:#fbfaf7; }
.facts span { display:block; color:#7e8790; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.facts strong { display:block; margin-top:6px; font-size:14px; }
.gallery { margin-top:90px; }
.gallery h2 { font-family:'Playfair Display',serif; font-size:36px; margin:0 0 24px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery-item { overflow:hidden; min-height:220px; background:#20242a; }
.gallery-item:first-child { grid-column:span 2; grid-row:span 2; min-height:454px; }
.gallery-item img,.gallery-item video { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.gallery-item:hover img { transform:scale(1.035); }
.project-loading,.project-error { min-height:55vh; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#616976; gap:16px; text-align:center; }
.project-loading span { width:30px; height:30px; border:3px solid #ded4c2; border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; }
.project-error a { color:var(--gold); font-weight:700; }
.project-footer { padding:32px 20px; background:#18202d; color:#eae3d8; text-align:center; font-size:12px; letter-spacing:.08em; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .project-header { min-height:70px; padding:12px 20px; } .brand img { width:72px; } .project-page { width:min(100% - 32px,1220px); padding-top:42px; } .project-hero { grid-template-columns:1fr; } .project-media,.project-media img,.project-media video { min-height:280px; } h1 { font-size:48px; } .gallery { margin-top:58px; } .gallery-grid { grid-template-columns:1fr 1fr; gap:8px; } .gallery-item { min-height:150px; } .gallery-item:first-child { min-height:308px; } }