:root{
  --ink:#0b0a09; --ink-2:#12100e; --ink-3:#1a1714; --ink-4:#24201c;
  --ivory:#f6f0e6; --ivory-2:#ece3d4; --paper:#fffdf9;
  --gold:#d4a95e; --gold-l:#f1d9a0; --gold-d:#9c7434; --gold-xd:#6f5224;
  --txt:#efe7da; --muted:#a89f91; --muted-d:#6c645a;
  --line:rgba(212,169,94,.2); --line-2:rgba(255,255,255,.08);
  --g-gold:linear-gradient(135deg,#f6e2b0 0%,#d4a95e 45%,#a87d3a 100%);
  --g-prism:linear-gradient(100deg,#f1d9a0 0%,#fff6e0 16%,#f6b7a6 32%,#d8c6ff 48%,#b6eedf 64%,#f1d9a0 82%,#fff6e0 100%);
  --r:20px; --r-sm:12px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
  --ff-d:"Cormorant","Playfair Display",Georgia,serif;
  --ff:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
  --hdr:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}


/* scroll progress */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:300;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--g-gold);transform-origin:left;transform:scaleX(0);box-shadow:0 0 12px rgba(241,217,160,.7)}

/* ------- type ------- */
.kicker{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500;display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.kno{font-family:var(--ff-d);font-style:italic;font-size:1.05rem;letter-spacing:0;font-weight:600;opacity:.9;order:-1}
.kicker:has(.kno)::before{order:0}
h2{font-family:var(--ff-d);font-size:clamp(2.1rem,7.4vw,3.7rem);letter-spacing:-.01em}
h2 em{font-style:italic;background:var(--g-gold);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.light h2 em{background:linear-gradient(135deg,#b8893d,#8a6224);-webkit-background-clip:text;background-clip:text}
.sec-head{text-align:center;max-width:780px;margin:0 auto 40px}
.sec-head .kicker{justify-content:center}
.sec-sub{color:var(--muted);margin-top:14px;font-size:1.02rem}
.prism{font-style:italic;background:var(--g-prism);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite;padding-right:.06em}
@keyframes shimmer{to{background-position:220% center}}




/* ==========================================================
   FEATURED PROJECT
   ========================================================== */
.project{background:radial-gradient(70% 50% at 100% 0%,rgba(212,169,94,.12),transparent 60%),var(--ink)}
.proj-head{display:grid;gap:18px;margin-bottom:28px}
.proj-head h2{font-size:clamp(2rem,6.8vw,3.4rem)}
.proj-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.proj-tags li{font-size:.76rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--gold-l);background:rgba(212,169,94,.06)}
.dn{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow),0 0 0 1px rgba(241,217,160,.28);user-select:none;touch-action:pan-y;background:#050505}
.dn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%}
.dn-day{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.dn-tag{position:absolute;top:14px;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;pointer-events:none;backdrop-filter:blur(8px)}
.dn-tag svg{font-size:14px}
.dn-tag-d{left:14px;background:rgba(255,253,249,.85);color:#2a241d}
.dn-tag-n{right:14px;background:rgba(10,9,8,.7);color:var(--gold-l);border:1px solid rgba(241,217,160,.3)}
.dn-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#fff 12%,#fff 88%,transparent);pointer-events:none;box-shadow:0 0 18px rgba(241,217,160,.7)}
.dn-handle span{position:absolute;top:50%;left:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;background:var(--g-gold);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#1b1408}
.dn-handle span svg:first-child{transform:scaleX(-1);margin-right:-4px}
.dn-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none}
.timeline{display:grid;gap:14px;margin-top:22px;counter-reset:t}
.tl{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:10px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line-2)}
.tl figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.tl img{width:100%;height:100%;object-fit:cover}
.tl-date{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tl h3{font-family:var(--ff-d);font-size:1.35rem;color:#fbf6ec;margin-top:2px}
.tl p{font-size:.86rem;color:var(--muted);margin-top:4px;line-height:1.45}

/* ==========================================================
   REELS
   ========================================================== */
.reels{background:#12100e;overflow:hidden}

.reels-in{display:grid;gap:34px;align-items:center}
.ticks{margin:22px 0 26px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:#e2d8c8}
.ticks svg{flex:none;width:24px;height:24px;padding:4px;border-radius:50%;background:rgba(212,169,94,.15);color:var(--gold-l);margin-top:1px}
.reels-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:6px 18px 10px;scrollbar-width:none}
.reels-row::-webkit-scrollbar{display:none}
.reel{flex:0 0 66%;margin:0;scroll-snap-align:center}
.reel-frame{position:relative;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#000;padding:0;box-shadow:0 30px 60px -25px rgba(0,0,0,.9),0 0 0 1px rgba(241,217,160,.35),0 0 0 7px #1a1714,0 0 0 8px rgba(241,217,160,.18)}
.reel-frame video{width:100%;height:100%;object-fit:cover}
.reel-btn{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(10,9,8,.6);backdrop-filter:blur(8px);border:1px solid rgba(241,217,160,.4);color:var(--gold-l);font-size:18px}
.reel-btn .i-pause{display:none}
.reel.playing .reel-btn .i-play{display:none}
.reel.playing .reel-btn .i-pause{display:block}
.reel:not(.playing) .reel-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,0,0,.05),rgba(0,0,0,.35));pointer-events:none}
.reel figcaption{display:flex;flex-direction:column;align-items:center;margin-top:16px;line-height:1.25}
.reel figcaption b{font-family:var(--ff-d);font-size:1.3rem;color:#fbf6ec}
.reel figcaption span{font-size:.78rem;color:var(--gold);letter-spacing:.08em}
.reel-title {
    color:#fff;
}

/* ------- elevation band ------- */
.elevation{position:relative;padding:220px 0 70px;overflow:hidden;isolation:isolate}
.elevation-bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center 30%;z-index:-2;transform:translateY(var(--py,0));will-change:transform}
.elevation::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,9,8,.35) 0%,rgba(10,9,8,.55) 40%,rgba(10,9,8,.9) 100%)}
.elev-card{max-width:600px;padding:32px 24px;border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(241,217,160,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.elev-card>p:not(.kicker){color:#cfc5b6;margin-top:16px}
.elev-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 28px}
.elev-points div{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#e6dccd}
.elev-points svg{font-size:22px;color:var(--gold-l);flex:none}


.gallery-wrapper {
    display: flex;
    gap: 15px;
    width: 100%;
    max-width: 1200px; /* Adjust based on your layout */
    height: 80vh; /* Adjust height as needed */
    min-height: 600px;
}

/* Columns */
.gallery-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1; /* Makes all columns equal width */
}

/* Individual Image Card */
.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    flex: 1; /* Default height for standard images */
    cursor: pointer;
}

/* Tall Images (takes up more vertical space) */
.gallery-item.tall {
    flex: 2; 
}

/* Image Styling */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Hover Effect on Image */
.gallery-item:hover img {
    transform: scale(1.05);
}

/* Dark Gradient Overlay at the bottom */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    /* Dark gradient going from transparent at top to dark brown/black at bottom */
    background: linear-gradient(to top, rgba(18, 16, 14, 0.95) 0%, rgba(18, 16, 14, 0.6) 40%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Text Container */
.gallery-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    color: #ffffff;
}

/* Small Gold Tag Text */
.gallery-info .tag {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #d4a95e; /* The gold color from your site */
    margin-bottom: 5px;
}

/* Main Title */
.gallery-info h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

/* Subtitle / Details */
.gallery-info p {
    font-size: 13px;
    color: #cccccc;
    font-weight: 400;
}

/* Responsive Design for Mobile/Tablets */
@media (max-width: 992px) {
    .gallery-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }
    .gallery-item, .gallery-item.tall {
        height: 350px;
        flex: none;
    }
}

@media (max-width: 576px) {
    .gallery-wrapper {
        grid-template-columns: 1fr;
    }
    .gallery-item, .gallery-item.tall {
        height: 300px;
    }
}