/* ══════════════════════════════════════
   OAKEN EVENTS — Event Detail Page
   Brand System v2 · event.css
══════════════════════════════════════ */
:root {
    --ink: #0C0C0A;
    --ink-soft: #161612;
    --ink-mid: #1e1e1a;
    --forest: #1A4A2E;
    --forest-deep: #112e1c;
    --forest-mid: #254d35;
    --gold: #B09A6B;
    --gold-light: #C8B48A;
    --gold-pale: #e8dcc8;
    --ivory: #F4EFE4;
    --ivory-soft: #EDE7D8;
    --warm-mid: #9a9080;
    --social: #7a9e7e;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
a { color:inherit; text-decoration:none; }

body {
    background: var(--ink);
    color: var(--ivory);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    cursor: none;
    -webkit-font-smoothing: antialiased;
}

/* ── Cursor ── */
#cur { position:fixed; width:7px; height:7px; background:var(--gold); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s; }
#cur-ring { position:fixed; width:32px; height:32px; border:1px solid rgba(176,154,107,.45); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); }
body:has(a:hover) #cur, body:has(button:hover) #cur { width:12px; height:12px; }
body:has(a:hover) #cur-ring, body:has(button:hover) #cur-ring { width:48px; height:48px; border-color:rgba(176,154,107,.8); }

/* ── NAV ── */
#nav {
    position: fixed; top:0; left:0; right:0; z-index:200;
    display: flex; align-items:center; justify-content:space-between;
    padding: 0 48px; height:72px;
    background: rgba(12,12,10,.85);
    border-bottom: 1px solid rgba(176,154,107,.12);
    backdrop-filter: blur(12px);
    transition: background .3s;
}
#nav.scrolled { background: rgba(12,12,10,.97); }
.nav-logo img { height:30px; width:auto; display:block; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a { font-family:'Syne',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,228,.45); transition:color .3s; }
.nav-links a:hover { color:var(--gold); }
.nav-cta { font-family:'Syne',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); background:var(--gold); padding:11px 28px; cursor:none; transition:background .3s; }
.nav-cta:hover { background:var(--gold-light); }
.nav-mobile-btn { display:none; background:none; border:none; cursor:none; }
.nav-hamburger { width:22px; display:flex; flex-direction:column; gap:5px; }
.nav-hamburger span { display:block; height:1.5px; background:var(--ivory); border-radius:2px; }

/* ── Mobile Nav ── */
#mobile-nav { display:none; position:fixed; inset:0; z-index:300; background:rgba(12,12,10,.98); flex-direction:column; align-items:center; justify-content:center; gap:32px; opacity:0; pointer-events:none; transition:opacity .3s; }
#mobile-nav.open { opacity:1; pointer-events:all; display:flex; }
#mobile-nav a { font-family:'Cormorant Garamond',serif; font-size:2.4rem; color:var(--ivory); transition:color .3s; }
#mobile-nav a:hover { color:var(--gold); }
#mobile-nav-close { position:absolute; top:24px; right:24px; background:none; border:none; cursor:none; color:var(--gold); font-size:1.4rem; }

/* ── Reveal animation ── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
#ev-hero {
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 560px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.ev-hero-media {
    position: absolute;
    inset: 0;
}

/* Image hero */
.ev-hero-img {
    background-size: cover;
    background-position: center;
    animation: heroZoom 12s ease-out forwards;
}
@keyframes heroZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

/* Video hero — 9:16 centred in the viewport */
.ev-hero-video-wrap { display:flex; align-items:center; justify-content:center; background:var(--ink); }
#ev-hero-video {
    /* Fill the viewport height; width auto — shows black bars on sides (cinematic) */
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}

.ev-hero-placeholder { background: var(--forest-deep); }

.ev-hero-overlay {
    position: absolute; inset:0;
    background: linear-gradient(
        to top,
        rgba(8,8,6,.96)  0%,
        rgba(8,8,6,.55)  40%,
        rgba(8,8,6,.15)  75%,
        transparent      100%
    );
    z-index: 2;
}

.ev-hero-content {
    position: relative;
    z-index: 3;
    padding: 0 72px 72px;
    width: 100%;
}

.ev-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Syne', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(244,239,228,.4);
    margin-bottom: 28px;
    transition: color .3s;
}
.ev-breadcrumb:hover { color: var(--gold); }

.ev-hero-tag {
    font-family: 'Syne', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ev-hero-tag::before { content:''; display:block; width:20px; height:1px; }
.ev-hero-tag.corp { color:var(--gold); }
.ev-hero-tag.corp::before { background:var(--gold); }
.ev-hero-tag.soc  { color:var(--social); }
.ev-hero-tag.soc::before  { background:var(--social); }

.ev-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2.8rem, 6vw, 6rem);
    line-height: .95;
    letter-spacing: -.01em;
    color: var(--ivory);
    max-width: 840px;
    margin-bottom: 20px;
    animation: fadeUp .9s ease .1s both;
}

.ev-hero-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: rgba(244,239,228,.5);
    animation: fadeUp .8s ease .25s both;
}
.ev-loc-icon { color: var(--gold); font-size: .9rem; }

@keyframes fadeUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:none; }
}

/* ═══════════════════════════════════════
   WRITE-UP
═══════════════════════════════════════ */
#ev-writeup {
    padding: 88px 72px;
    border-bottom: 1px solid rgba(176,154,107,.08);
}

.ev-writeup-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.ev-writeup-eyebrow {
    font-family: 'Syne', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.ev-writeup-eyebrow::before,
.ev-writeup-eyebrow::after {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: var(--gold);
    opacity: .5;
}

.ev-writeup-body {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(244,239,228,.8);
    letter-spacing: .01em;
}

/* ═══════════════════════════════════════
   GALLERY
═══════════════════════════════════════ */
#ev-gallery {
    padding: 0 48px 80px;
}

.ev-gallery-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 64px 0 40px;
}

.ev-gallery-eyebrow {
    font-family: 'Syne', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

.ev-gallery-rule { flex:1; height:1px; background:rgba(255,255,255,.06); }

.ev-gallery-count {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    color: rgba(244,239,228,.25);
    white-space: nowrap;
}

/* CSS Columns masonry — handles mixed portrait + landscape naturally */
.ev-gallery-grid {
    columns: 3;
    column-gap: 4px;
}

.ev-gallery-item {
    break-inside: avoid;
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
}

/* ── Photo items (landscape) ── */
.ev-gallery-photo { cursor: none; }

.ev-photo-wrap {
    position: relative;
    overflow: hidden;
}

.ev-photo-wrap img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}

.ev-gallery-photo:hover .ev-photo-wrap img { transform: scale(1.04); }

.ev-photo-overlay {
    position: absolute; inset:0;
    background: rgba(8,8,6,0);
    display: flex; align-items:center; justify-content:center;
    transition: background .35s;
}
.ev-gallery-photo:hover .ev-photo-overlay { background: rgba(8,8,6,.35); }

.ev-photo-zoom {
    font-size: 1.6rem;
    color: var(--gold);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .3s, transform .3s;
}
.ev-gallery-photo:hover .ev-photo-zoom { opacity:1; transform:none; }

/* ── Video / Reel items (9:16 portrait) ── */
.ev-gallery-reel { }

.ev-reel-wrap {
    position: relative;
    width: 100%;
    /* 9:16 aspect ratio */
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: var(--ink-soft);
}

.ev-reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ev-reel-overlay {
    position: absolute; inset:0;
    display: flex; align-items:center; justify-content:center;
    background: rgba(8,8,6,.18);
    transition: background .3s;
}

.ev-gallery-reel:hover .ev-reel-overlay { background: rgba(8,8,6,.04); }

.ev-reel-play {
    width: 52px; height:52px;
    border: 1px solid rgba(176,154,107,.6);
    border-radius: 50%;
    background: rgba(8,8,6,.55);
    color: var(--gold);
    font-size: .9rem;
    cursor: none;
    display: flex; align-items:center; justify-content:center;
    transition: background .25s, border-color .25s, opacity .3s;
    backdrop-filter: blur(4px);
}
.ev-reel-play:hover { background:rgba(176,154,107,.25); border-color:var(--gold); }

/* Caption */
.ev-gallery-caption {
    padding: 10px 4px 6px;
    font-size: .72rem;
    color: rgba(244,239,228,.35);
    font-family: 'DM Sans', sans-serif;
    line-height: 1.4;
}

/* ═══════════════════════════════════════
   EVENT DETAILS
═══════════════════════════════════════ */
#ev-details {
    padding: 80px 72px;
    border-top: 1px solid rgba(176,154,107,.08);
    border-bottom: 1px solid rgba(176,154,107,.08);
}

.ev-details-inner { max-width: 960px; margin: 0 auto; }

.ev-details-eyebrow {
    font-family: 'Syne', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.ev-details-eyebrow::before { content:''; display:block; width:28px; height:1px; background:var(--gold); }

.ev-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
    background: rgba(176,154,107,.06);
    border: 1px solid rgba(176,154,107,.06);
}

.ev-detail-item {
    padding: 24px 28px;
    background: var(--ink);
}

.ev-detail-label {
    font-family: 'Syne', sans-serif;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(244,239,228,.3);
    margin-bottom: 8px;
}

.ev-detail-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--ivory);
    line-height: 1.25;
}

/* ═══════════════════════════════════════
   INSTAGRAM CTA
═══════════════════════════════════════ */
#ev-instagram {
    padding: 72px 48px;
    text-align: center;
    border-bottom: 1px solid rgba(176,154,107,.08);
}

.ev-ig-inner { max-width: 480px; margin: 0 auto; }

.ev-ig-icon {
    font-size: 1.8rem;
    color: rgba(176,154,107,.35);
    margin-bottom: 16px;
}

.ev-ig-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: rgba(244,239,228,.55);
    margin-bottom: 28px;
}

.ev-ig-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Syne', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--gold);
    padding: 14px 36px;
    cursor: none;
    transition: background .3s, transform .2s;
}
.ev-ig-btn:hover { background:var(--gold-light); transform:translateY(-2px); }

/* ═══════════════════════════════════════
   RELATED EVENTS
═══════════════════════════════════════ */
#ev-related { padding: 80px 48px; }

.ev-related-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.ev-related-eyebrow {
    font-family: 'Syne', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

.ev-related-rule { flex:1; height:1px; background:rgba(255,255,255,.06); }

.ev-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin-bottom: 32px;
}

.ev-related-card {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--ink-soft);
    transition: opacity .3s;
}
.ev-related-card:hover { opacity: .88; }

.ev-related-img {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--ink-mid);
    position: relative;
    transition: transform .6s ease;
}
.ev-related-card:hover .ev-related-img { transform: scale(1.04); }

.ev-related-play-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height:44px;
    border: 1px solid rgba(176,154,107,.5);
    border-radius: 50%;
    background: rgba(8,8,6,.6);
    color: var(--gold);
    display: flex; align-items:center; justify-content:center;
    font-size: .85rem;
}

.ev-related-info { padding: 16px 20px 20px; }

.ev-related-tag {
    font-family: 'Syne', sans-serif;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}

.ev-related-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: var(--ivory);
    margin-bottom: 4px;
    line-height: 1.25;
}

.ev-related-loc {
    font-size: .72rem;
    color: rgba(244,239,228,.35);
}

.ev-related-foot { text-align: center; }

.ev-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Syne', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(176,154,107,.3);
    padding: 12px 32px;
    cursor: none;
    transition: border-color .3s, background .3s;
}
.ev-back-btn:hover { border-color:var(--gold); background:rgba(176,154,107,.07); }

/* ═══════════════════════════════════════
   CTA
═══════════════════════════════════════ */
#ev-cta {
    padding: 100px 48px;
    text-align: center;
    background: var(--forest-deep);
    border-top: 1px solid rgba(176,154,107,.12);
    border-bottom: 1px solid rgba(176,154,107,.12);
}

.ev-cta-eyebrow {
    font-family: 'Syne', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
}

.ev-cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1;
    color: var(--ivory);
    margin-bottom: 40px;
}
.ev-cta-title em { font-style:italic; color:var(--gold-light); }

.ev-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-gold {
    font-family: 'Syne', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--gold);
    padding: 14px 36px;
    cursor: none;
    transition: background .3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-gold:hover { background: var(--gold-light); }

.btn-outline {
    font-family: 'Syne', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(176,154,107,.35);
    padding: 14px 36px;
    cursor: none;
    transition: border-color .3s, background .3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-outline:hover { border-color: var(--gold); background: rgba(176,154,107,.07); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
    background: var(--ink-soft);
    border-top: 1px solid rgba(176,154,107,.1);
    padding: 40px 48px;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-logo img { height: 26px; width:auto; opacity:.7; transition:opacity .3s; }
.footer-logo:hover img { opacity:1; }

.footer-links {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.footer-links a {
    font-family: 'Syne', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(244,239,228,.3);
    transition: color .3s;
}
.footer-links a:hover { color: var(--gold); }

.footer-copy {
    font-size: .68rem;
    color: rgba(244,239,228,.18);
}

/* ═══════════════════════════════════════
   PHOTO LIGHTBOX
═══════════════════════════════════════ */
#photo-lb {
    position: fixed; inset:0; z-index:600;
    background: rgba(6,6,4,.97);
    display: flex; flex-direction:column; align-items:center; justify-content:center;
    opacity: 0; pointer-events:none;
    transition: opacity .35s ease;
    padding: 48px;
}
#photo-lb.open { opacity:1; pointer-events:all; }

#photo-lb-close {
    position: absolute; top:24px; right:28px;
    background:none; border:none; cursor:none;
    font-size:1.4rem;
    color: rgba(244,239,228,.35);
    transition: color .2s;
}
#photo-lb-close:hover { color:var(--gold); }

#photo-lb-img-wrap {
    max-width: min(90vw, 1000px);
    max-height: 85vh;
    display: flex; align-items:center; justify-content:center;
}

#photo-lb-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

#photo-lb-caption {
    margin-top: 16px;
    font-size: .78rem;
    color: rgba(244,239,228,.35);
    text-align: center;
    max-width: 600px;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1100px) {
    .ev-gallery-grid { columns: 2; }
    .ev-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    #nav { padding: 0 24px; }
    .nav-links, .nav-cta { display:none; }
    .nav-mobile-btn { display:block; }

    #ev-hero { height: 80vh; }
    .ev-hero-content { padding: 0 28px 48px; }
    .ev-hero-title { font-size: clamp(2.2rem, 8vw, 3.2rem); }

    #ev-writeup { padding: 60px 28px; }
    #ev-gallery { padding: 0 16px 60px; }
    .ev-gallery-grid { columns: 2; column-gap: 3px; }
    .ev-gallery-header { padding: 48px 0 28px; }

    #ev-details { padding: 60px 28px; }
    .ev-details-grid { grid-template-columns: 1fr 1fr; }

    #ev-instagram { padding: 56px 28px; }
    #ev-related { padding: 60px 28px; }
    .ev-related-grid { grid-template-columns: 1fr; }

    #ev-cta { padding: 72px 28px; }
    footer { padding: 32px 28px; }
    .footer-inner { flex-direction:column; align-items:flex-start; gap:16px; }
}

@media (max-width: 480px) {
    .ev-gallery-grid { columns: 1; }
    .ev-details-grid { grid-template-columns: 1fr; }
}