/* ==== Darkroom design — exact CSS from the approved static preview
   (databurn-media-preview, GitHub: CollinsAnyona/databurn-media-preview),
   ported verbatim so the PHP site matches pixel-for-pixel. Do not
   "improve" class names here without also updating every page that
   uses them — this file is the shared contract. ==== */
:root{
  --ink:#0D1320;        /* studio ground / primary text on paper */
  --ink2:#101B2E;       /* raised ink sections (loop, platform door, footer) */
  --carbon:#16243A;     /* image frames on ink */
  --line-ink:#223247;   /* hairlines on ink */
  --border-ink:#2A3F5C; /* secondary borders on ink */
  --paper:#EEF2F6;      /* platform ground */
  --paper2:#E4E9F0;     /* warm sub-panel on paper (maps to #E4DFD4) */
  --card:#FFFFFF;
  --hairline:#C7D0DC;   /* borders on paper */
  --field:#B9C2CE;      /* form field borders */
  --safelight:#F2541B;  /* PRIMARY accent — fills + icons */
  --safe-hi:#FF7A42;    /* accent hover */
  --burnt:#C23C0D;      /* accent TEXT on paper */
  --signal:#1F7FE0; --signal-lo:#33C4FF;  /* the logo's data/blue half */
  --muted-ink:#8D9BAD;  /* secondary text on ink */
  --body-ink:#C9D3E0;   /* body text on ink */
  --dim-ink:#6E7C8E;    /* tertiary on ink */
  --paper-ink:#16243A;  /* text on paper */
  --muted-paper:#48586C;/* secondary on paper */
  --dim-paper:#6C7A8B;
  --confirm:#1F9D63; --pending:#8A5A00;
  --d:'Bricolage Grotesque','Arial Black',sans-serif;
  --b:'Manrope','Helvetica Neue',Helvetica,sans-serif;
  --m:'Space Mono',ui-monospace,monospace;
  /* Three curves, three jobs. Until 2026-10-20 a single --e drove everything
     from a 160ms hover to a 1.5s develop; one curve covering that whole range
     is why the motion read as machine-set. --e is kept, unchanged, as the
     ambient curve, so the six page-level stylesheets that reference it are
     untouched. */
  --e:cubic-bezier(.16,1,.3,1);          /* ambient: long, slow, atmospheric */
  --e-ui:cubic-bezier(.2,0,0,1);         /* interface feedback: 120-200ms, snappy */
  --e-enter:cubic-bezier(.22,.61,.36,1); /* content arriving: easeOutCubic */
  --mx:64px;
}
@media(max-width:900px){ :root{ --mx:20px; } }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--ink); color:var(--body-ink); font-family:var(--b); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:var(--burnt); text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--d); font-weight:800; letter-spacing:-.033em; line-height:1; margin:0; text-wrap:balance; }
:focus-visible{ outline:2px solid var(--safelight); outline-offset:2px; }
.mono{ font-family:var(--m); }
.tnum{ font-variant-numeric:tabular-nums; }
.wrap{ padding:0 var(--mx); }
.eyebrow{ font-family:var(--m); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--burnt); }
.ink-eyebrow{ color:var(--signal-lo); }
.door .eyebrow, .loop .eyebrow, #view-work .hero .eyebrow{ color:var(--signal-lo); }
.view{ display:none; } .view.on{ display:block; animation:viewIn .4s var(--e-enter); }
@keyframes viewIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 28px; font-family:var(--b); font-weight:700; font-size:16px; border:0; border-radius:0; cursor:pointer; text-decoration:none; transition:filter .16s var(--e-ui); white-space:nowrap; }
.btn:hover{ filter:brightness(.93); }
.btn--pri{ background:var(--safelight); color:var(--ink); } .btn--pri:hover{ color:var(--ink); }
.btn--onink{ background:transparent; border:1px solid var(--border-ink); color:var(--paper); } .btn--onink:hover{ color:#fff; }
.btn--onpaper{ background:transparent; border:1px solid var(--ink); color:var(--paper-ink); } .btn--onpaper:hover{ color:var(--ink); }
.btn--signal{ background:var(--signal); color:#fff; } .btn--signal:hover{ color:#fff; }
.btn--sm{ height:46px; padding:0 24px; font-size:15px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* nav (ink, consistent) */
.nav{ position:sticky; top:0; z-index:1000; height:80px; background:rgba(13,19,32,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-ink); display:flex; align-items:center; justify-content:space-between; padding:0 var(--mx); }
.nav .logo{ display:flex; align-items:center; gap:12px; }
.nav .logo img{ height:38px; width:auto; display:block; }
.nav .links{ display:flex; align-items:center; gap:32px; }
.nav .links a{ font-size:15px; font-weight:600; color:var(--paper); }
.nav .links a:hover{ color:var(--safelight); }
.nav .links a[aria-current="true"]{ color:var(--safelight); }
.nav .toggle{ display:none; background:none; border:0; color:#fff; font-size:24px; }
@media(max-width:960px){
  .nav .links{ position:absolute; top:80px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--ink); border-bottom:1px solid var(--line-ink); padding:8px 0; display:none; }
  .nav .links.open{ display:flex; }
  .nav .links a{ padding:14px var(--mx); }
  .nav .links .navbtn{ margin:12px var(--mx); }
  .nav .toggle{ display:block; }
  .nav .nav-cta{ display:none; }
}

/* frame motif — L-corner tick + mono caption */
.frame{ position:relative; background:var(--carbon); overflow:hidden; }
.frame > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame .tick{ position:absolute; top:16px; left:16px; width:14px; height:14px; border-top:2px solid var(--safelight); border-left:2px solid var(--safelight); z-index:2; }
.frame .cap{ position:absolute; left:18px; bottom:16px; z-index:2; display:flex; flex-direction:column; gap:5px; }
.frame .ar{ font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--safelight); }
.frame .ti{ font-size:18px; font-weight:700; color:#fff; font-family:var(--d); }
.frame .su{ font-size:14px; color:var(--muted-ink); }
.frame.lit .ti,.frame.lit .su{ text-shadow:0 1px 12px rgba(11,15,26,.8); }

/* ===================== HOME ===================== */
.hero{ position:relative; overflow:hidden; padding:104px var(--mx); background:var(--ink); }
.hero-bg-wrap{ position:absolute; inset:0; z-index:0; animation:develop 1.5s var(--e) both; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 26%; opacity:0; transition:opacity 1.4s ease; }
.hero-bg.on{ opacity:1; }
.hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(13,19,32,.96) 0%, rgba(13,19,32,.82) 44%, rgba(13,19,32,.46) 100%), linear-gradient(0deg, var(--ink) 3%, rgba(13,19,32,0) 44%); }
.hero .glow1{ position:absolute; z-index:2; top:-180px; right:-120px; width:720px; height:620px; background:radial-gradient(closest-side,rgba(242,84,27,.18),transparent); pointer-events:none; }
.hero .glow2{ position:absolute; z-index:2; bottom:-80px; left:-140px; width:560px; height:480px; background:radial-gradient(closest-side,rgba(31,127,224,.12),transparent); pointer-events:none; }
.hero-in{ position:relative; z-index:3; max-width:840px; display:flex; flex-direction:column; gap:30px; }
.hero .place{ display:flex; align-items:center; gap:12px; animation:heroUp .45s var(--e-enter) both; animation-delay:.04s; }
.hero .dot{ width:8px; height:8px; border-radius:50%; background:var(--safelight); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.hero h1{ font-size:clamp(48px,7.4vw,92px); line-height:.95; letter-spacing:-.035em; color:var(--paper); }
.hero h1 .acc{ color:var(--safelight); }
.hero h1 span.wd{ display:inline-block; }
.hero .lede{ font-size:clamp(18px,2vw,21px); line-height:1.55; color:var(--body-ink); max-width:620px; animation:heroUp .45s var(--e-enter) both; animation-delay:.22s; }
.hero .cta{ display:flex; gap:16px; flex-wrap:wrap; animation:heroUp .45s var(--e-enter) both; animation-delay:.3s; }
.hero .cta .btn{ height:58px; font-size:17px; }
@media(prefers-reduced-motion:reduce){ .hero-bg-wrap{ animation:none; } .hero-bg{ transition:none; } .hero .place,.hero .lede,.hero .cta{ animation:none; } }
@media(max-width:640px){ .hero{ padding-block:76px; } .hero-scrim{ background:linear-gradient(0deg, var(--ink) 8%, rgba(13,19,32,.72) 60%, rgba(13,19,32,.6) 100%); } }

.marquee{ height:96px; border-top:1px solid var(--line-ink); border-bottom:1px solid var(--line-ink); overflow:hidden; display:flex; align-items:center; margin-top:80px; }
.marquee .track{ display:flex; gap:48px; white-space:nowrap; animation:slide 26s linear infinite; font-family:var(--d); font-weight:700; font-size:28px; letter-spacing:-.01em; color:var(--border-ink); }
.marquee .track .dm{ color:var(--safelight); }
@keyframes slide{ to{ transform:translateX(-50%); } }

.doors{ display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:820px){ .doors{ grid-template-columns:1fr; } }
.door{ padding:72px var(--mx); display:flex; flex-direction:column; justify-content:space-between; gap:40px; min-height:560px; }
.door:first-child{ border-right:1px solid var(--line-ink); }
.door.plat{ background:var(--ink2); }
.door h2{ font-size:clamp(38px,4.2vw,52px); line-height:1; letter-spacing:-.03em; color:var(--paper); }
.door p{ font-size:17px; line-height:1.6; color:var(--body-ink); max-width:470px; margin:22px 0 0; }
.door .chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.door .chips span{ border:1px solid var(--border-ink); padding:9px 16px; font-size:14px; color:var(--body-ink); }
.door .go{ font-size:16px; font-weight:700; color:var(--safelight); cursor:pointer; }

.sec{ padding:76px var(--mx); border-top:1px solid var(--line-ink); }
.sec-h{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:40px; }
.sec-h h2{ font-size:clamp(32px,4vw,44px); letter-spacing:-.03em; color:var(--paper); }
.sec-h .all{ font-family:var(--m); font-size:12px; letter-spacing:.16em; color:var(--muted-ink); cursor:pointer; }
.work-hero{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; }
.work-hero .big{ grid-column:span 7; height:420px; }
.work-hero .col{ grid-column:span 5; display:flex; flex-direction:column; gap:24px; }
.work-hero .col .frame{ height:198px; }
@media(max-width:820px){ .work-hero{ grid-template-columns:1fr; } .work-hero .big,.work-hero .col{ grid-column:auto; } .work-hero .big{ height:300px; } }
.stats{ display:flex; gap:40px; flex-wrap:wrap; padding-top:34px; }
.stats .s{ display:flex; flex-direction:column; gap:4px; }
.stats .k{ font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--dim-ink); }
.stats .v{ font-family:var(--d); font-weight:800; font-size:30px; color:var(--paper); }

.loop{ padding:76px var(--mx); background:var(--ink2); border-top:1px solid var(--line-ink); }
.loop .head{ max-width:760px; display:flex; flex-direction:column; gap:16px; margin-bottom:46px; }
.loop h2{ font-size:clamp(40px,4.6vw,54px); line-height:1; letter-spacing:-.03em; color:var(--paper); }
.loop p{ font-size:18px; line-height:1.6; color:var(--body-ink); margin:0; }
.loop .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:820px){ .loop .cards{ grid-template-columns:1fr; } }
.loop .c{ border:1px solid var(--border-ink); padding:30px; display:flex; flex-direction:column; gap:14px; }
.loop .c.hot{ border-color:var(--safelight); background:#181420; }
.loop .c .no{ font-family:var(--d); font-weight:800; font-size:40px; color:var(--safelight); line-height:1; }
.loop .c .t{ font-size:20px; font-weight:700; color:var(--paper); }
.loop .c .d{ font-size:15px; line-height:1.55; color:var(--muted-ink); }

.livenow{ padding:64px var(--mx); border-top:1px solid var(--line-ink); }
.livenow .top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:12px; }
.livenow .top .t{ display:flex; align-items:center; gap:12px; }
.livenow .top h2{ font-size:32px; letter-spacing:-.02em; color:var(--paper); }
.evgrid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.evgrid3:has(.evtile:only-child){ grid-template-columns:minmax(0,420px); }
@media(max-width:820px){ .evgrid3{ grid-template-columns:1fr; } }
.evtile{ border:1px solid var(--border-ink); padding:22px; min-height:190px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; color:var(--paper); cursor:pointer; }
.evtile:hover{ border-color:var(--safelight); }
.evtile .r{ display:flex; justify-content:space-between; align-items:flex-start; }
.evtile .tag{ font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--safelight); }
.evtile .dt{ font-family:var(--m); font-size:11px; color:var(--dim-ink); }
.evtile .nm{ font-size:19px; font-weight:700; }
.evtile .me{ font-size:14px; color:var(--muted-ink); }

/* footer */
.foot{ padding:60px var(--mx); background:var(--ink2); border-top:1px solid var(--line-ink); }
.foot .top{ display:flex; justify-content:space-between; gap:64px; flex-wrap:wrap; }
.foot h2{ font-size:clamp(30px,3.4vw,40px); line-height:1.05; letter-spacing:-.03em; color:var(--paper); max-width:520px; }
.foot .fcta{ display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; }
.foot .cols{ display:flex; gap:64px; flex-wrap:wrap; }
.foot .col{ display:flex; flex-direction:column; gap:11px; }
.foot .col .h{ font-family:var(--m); font-size:11px; letter-spacing:.16em; color:var(--dim-ink); }
.foot .col a,.foot .col span{ font-size:15px; color:var(--body-ink); }
.foot .bar{ display:flex; justify-content:space-between; border-top:1px solid var(--line-ink); margin-top:40px; padding-top:22px; font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--dim-ink); flex-wrap:wrap; gap:10px; }

/* ===================== PAPER PAGES ===================== */
.paper{ background:var(--paper); color:var(--paper-ink); }
.paper .phead{ padding:72px var(--mx) 0; display:flex; justify-content:space-between; align-items:flex-end; gap:64px; flex-wrap:wrap; }
.paper .phead h1{ font-size:clamp(48px,7vw,78px); line-height:.95; letter-spacing:-.035em; color:var(--ink); }
.paper .psec{ padding:0 var(--mx); }
.paper .eyebrow{ color:var(--burnt); }

/* events */
.ev-search{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; width:100%; max-width:420px; }
.ev-search-row{ display:flex; gap:8px; width:100%; }
.ev-search input{ flex:1; min-width:0; height:56px; padding:0 20px; border:1px solid var(--field); background:#fff; font-family:var(--b); font-size:16px; color:var(--ink); }
.ev-search label{ font-family:var(--m); font-size:11px; letter-spacing:.16em; color:var(--muted-paper); }
@media(max-width:640px){
  .ev-search{ align-items:stretch; max-width:none; }
  .ev-search-row .btn{ flex-shrink:0; height:48px; padding:0 18px; }
  .ev-search input{ height:48px; }
}
.ev-filter{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:40px var(--mx) 0; flex-wrap:wrap; }
.ev-tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.ev-tabs button,.ev-tabs a{ font-family:var(--b); font-size:14px; font-weight:600; padding:12px 22px; min-height:48px; border:1px solid var(--field); background:#fff; color:var(--ink); line-height:24px; }
.ev-tabs button[aria-pressed="true"],.ev-tabs a[aria-pressed="true"]{ border-color:var(--safelight); background:var(--safelight); color:var(--ink); }
.ev-sel{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.ev-sel label{ font-family:var(--m); font-size:11px; letter-spacing:.16em; color:var(--muted-paper); }
.ev-sel select{ height:48px; padding:0 16px; border:1px solid var(--field); background:#fff; font-family:var(--b); font-size:15px; color:var(--ink); }
.ev-featured{ margin:36px var(--mx) 0; display:grid; grid-template-columns:repeat(12,1fr); border:1px solid var(--hairline); background:#fff; min-height:320px; cursor:pointer; }
.ev-featured .poster{ grid-column:span 5; position:relative; background:var(--carbon); min-height:360px; }
.ev-featured .poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:16px; }
.ev-featured .body{ grid-column:span 7; padding:40px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; }
.ev-featured h2{ font-size:clamp(30px,3.4vw,40px); line-height:1.02; letter-spacing:-.03em; color:var(--ink); }
.ev-featured .meta{ font-size:16px; color:var(--muted-paper); }
.ev-featured .pills{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{ font-family:var(--m); font-size:11px; letter-spacing:.14em; padding:6px 11px; }
.pill--fill{ background:var(--safelight); color:var(--ink); }
.pill--out{ border:1px solid var(--field); color:var(--muted-paper); }
.pill--ink{ background:var(--ink); color:var(--paper); }
.pill--paid{ color:var(--confirm); border:1px solid #a9cfc7; background:#eef7f5; }
.pill--pend{ color:var(--pending); border:1px solid #e5cfa0; background:#fbf4e6; }
.ev-featured .foot{ display:flex; justify-content:space-between; align-items:flex-end; padding:0; background:none; border:0; }
.ev-featured .stat{ display:flex; gap:40px; }
.ev-featured .stat .k{ font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--muted-paper); }
.ev-featured .stat .v{ font-family:var(--d); font-weight:800; font-size:28px; color:var(--ink); }
@media(max-width:820px){ .ev-featured{ grid-template-columns:1fr; } .ev-featured .poster,.ev-featured .body{ grid-column:auto; } .ev-featured .foot{ flex-direction:column; align-items:flex-start; gap:16px; } }
.ev-cards{ padding:24px var(--mx) 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ev-cards:has(.ev-card:only-child){ grid-template-columns:minmax(0,420px); }
@media(max-width:820px){ .ev-cards{ grid-template-columns:1fr; } }
.ev-card{ border:1px solid var(--hairline); background:#fff; color:var(--ink); display:flex; flex-direction:column; min-height:400px; cursor:pointer; }
.ev-card.is-example{ opacity:.62; cursor:default; }
.ev-card .poster{ height:176px; position:relative; background:var(--carbon); }
.ev-card .poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ev-card .poster .ar{ position:absolute; left:16px; bottom:14px; font-family:var(--m); font-size:10px; letter-spacing:.14em; color:var(--muted-ink); }
.ev-card .b{ flex:1; padding:22px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; }
.ev-card .tag{ font-family:var(--m); font-size:10px; letter-spacing:.14em; font-weight:700; }
.ev-card .nm{ font-family:var(--d); font-weight:700; font-size:21px; line-height:1.15; letter-spacing:-.02em; }
.ev-card .me{ font-size:14px; color:var(--muted-paper); }
.ev-card .row{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid #E4E9F0; padding-top:14px; }
.ev-card .pr{ font-size:15px; font-weight:700; }
.ev-card .cta{ font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--burnt); }
.host-cta{ margin-top:72px; padding:60px var(--mx); background:var(--ink); color:var(--paper); display:flex; justify-content:space-between; align-items:center; gap:48px; flex-wrap:wrap; }
.host-cta h2{ font-size:clamp(32px,4vw,44px); line-height:1.02; letter-spacing:-.03em; color:var(--paper); max-width:660px; }
.host-cta p{ font-size:17px; color:var(--body-ink); margin:14px 0 0; }

/* event detail */
.ed-hero{ display:grid; grid-template-columns:repeat(12,1fr); background:var(--ink); color:var(--paper); min-height:520px; }
.ed-hero .poster{ grid-column:span 5; position:relative; background:var(--carbon); border-right:1px solid var(--line-ink); min-height:520px; }
.ed-hero .poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:20px; }
.ed-hero .body{ grid-column:span 7; padding:56px var(--mx); display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.ed-hero h1{ font-size:clamp(40px,5.6vw,62px); line-height:.98; letter-spacing:-.035em; color:var(--paper); }
.ed-hero .facts{ display:flex; gap:40px; flex-wrap:wrap; }
.ed-hero .facts .k{ font-family:var(--m); font-size:11px; letter-spacing:.16em; color:var(--muted-ink); }
.ed-hero .facts .v{ font-size:17px; font-weight:600; color:var(--paper); }
.ed-hero .credit{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--line-ink); padding-top:22px; }
.ed-hero .credit .sq{ width:34px; height:34px; background:var(--safelight); flex-shrink:0; }
.ed-hero .credit span{ font-size:15px; color:var(--body-ink); }
@media(max-width:820px){ .ed-hero{ grid-template-columns:1fr; } .ed-hero .poster,.ed-hero .body{ grid-column:auto; } }
.ed-tabs{ position:sticky; top:80px; z-index:900; height:84px; display:flex; align-items:center; gap:8px; padding:0 var(--mx); border-bottom:1px solid var(--hairline); background:#fff; }
.ed-tabs a,.ed-tabs button{ font-family:var(--d); font-size:17px; font-weight:700; letter-spacing:-.01em; padding:14px 24px; min-height:48px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--dim-paper); }
.ed-tabs a[aria-selected="true"],.ed-tabs button[aria-selected="true"]{ border-bottom-color:var(--safelight); color:var(--ink); }
.ed-panels{ background:var(--paper); }
.ed-panel{ padding:56px var(--mx); }
.ed-panel[hidden]{ display:none; }
.ed-tickets{ display:grid; grid-template-columns:repeat(12,1fr); gap:32px; }
.ed-tickets .col{ grid-column:span 8; display:flex; flex-direction:column; gap:20px; }
.ed-tickets h2{ font-size:34px; letter-spacing:-.025em; color:var(--ink); }
.tier{ border:1px solid var(--hairline); background:#fff; padding:28px; display:flex; justify-content:space-between; align-items:center; gap:32px; }
.tier .l{ display:flex; flex-direction:column; gap:7px; }
.tier .nm{ font-family:var(--d); font-weight:700; font-size:23px; letter-spacing:-.02em; color:var(--ink); }
.tier .bl{ font-size:15px; color:var(--muted-paper); }
.tier .lf{ font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--burnt); }
.tier .r{ display:flex; align-items:center; gap:28px; flex-shrink:0; }
.tier .pr{ font-family:var(--d); font-weight:800; font-size:26px; color:var(--ink); font-variant-numeric:tabular-nums; }
.stepper{ display:flex; align-items:center; gap:4px; border:1px solid var(--field); background:#F5F7FA; }
.stepper button{ width:46px; height:46px; border:0; background:transparent; font-size:22px; color:var(--ink); }
.stepper .q{ width:40px; text-align:center; font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
.ed-tickets .note{ font-family:var(--m); font-size:11px; letter-spacing:.1em; color:var(--dim-paper); }
.order{ grid-column:span 4; }
.order .box{ border:1px solid var(--ink); background:#fff; padding:32px; display:flex; flex-direction:column; gap:22px; }
.order .h{ font-family:var(--m); font-size:11px; letter-spacing:.18em; color:var(--muted-paper); }
.order .ln{ display:flex; justify-content:space-between; font-size:16px; color:var(--muted-paper); }
.order .ln b{ color:var(--ink); font-weight:700; }
.order .total{ border-top:1px solid var(--hairline); padding-top:18px; display:flex; justify-content:space-between; align-items:baseline; }
.order .total .tt{ font-family:var(--d); font-weight:800; font-size:34px; color:var(--ink); font-variant-numeric:tabular-nums; }
.order .fine{ border-top:1px solid #E4E9F0; padding-top:16px; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted-paper); line-height:1.5; }
.order .getting{ border:1px solid var(--hairline); background:#FFF7F2; padding:24px; margin-top:24px; display:flex; flex-direction:column; gap:10px; }
@media(max-width:820px){ .ed-tickets{ grid-template-columns:1fr; } .ed-tickets .col,.order{ grid-column:auto; } }
.ed-vote .top{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.ed-vote h2{ font-size:34px; letter-spacing:-.025em; color:var(--ink); }
.ed-vote .closebox{ display:flex; align-items:center; gap:24px; border:1px solid var(--hairline); background:#fff; padding:18px 26px; }
.ed-vote .closebox .k{ font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--muted-paper); }
.ed-vote .closebox .v{ font-size:17px; font-weight:700; color:var(--ink); }
.noms{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:1000px){ .noms{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .noms{ grid-template-columns:repeat(2,1fr); } }
.nom{ border:1px solid var(--hairline); background:#fff; display:flex; flex-direction:column; }
.nom .ph{ height:196px; position:relative; background:var(--carbon); }
.nom .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nom .ph .tick{ position:absolute; top:12px; left:12px; width:12px; height:12px; border-top:2px solid var(--safelight); border-left:2px solid var(--safelight); }
.nom .ph .rk{ position:absolute; top:12px; right:12px; font-family:var(--m); font-size:11px; letter-spacing:.1em; color:#fff; background:rgba(13,19,32,.6); padding:3px 7px; }
.nom .b{ flex:1; padding:16px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; }
.nom .nm{ font-size:16px; font-weight:700; color:var(--ink); }
.nom .cat{ font-family:var(--m); font-size:11px; color:var(--burnt); }
.nom .vr{ display:flex; justify-content:space-between; align-items:baseline; }
.nom .vr .k{ font-family:var(--m); font-size:10px; letter-spacing:.14em; color:var(--muted-paper); }
.nom .vr .v{ font-family:var(--d); font-weight:800; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; }
.nom .vbtn{ height:46px; background:var(--safelight); color:var(--ink); border:0; font-weight:700; font-size:15px; width:100%; }
.bundle{ border:1px solid var(--ink); background:#fff; margin-top:28px; padding:28px 32px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.bundle .l .t{ font-family:var(--d); font-weight:700; font-size:22px; color:var(--ink); }
.bundle .l .d{ font-size:15px; color:var(--muted-paper); }
.bundle .opts{ display:flex; gap:12px; flex-wrap:wrap; }
.bundle .opts span{ border:1px solid var(--field); padding:14px 20px; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; }
.bundle .opts span.sel{ border-color:var(--safelight); background:#FFF3EC; font-weight:700; }
.ed-details{ display:grid; grid-template-columns:repeat(12,1fr); gap:32px; }
.ed-details .main{ grid-column:span 7; display:flex; flex-direction:column; gap:22px; }
.ed-details h2{ font-size:34px; letter-spacing:-.025em; color:var(--ink); }
.ed-details p{ font-size:17px; line-height:1.65; color:#2F3A48; margin:0; }
.runorder{ border-top:1px solid var(--hairline); padding-top:24px; display:flex; flex-direction:column; gap:12px; }
.runorder .r{ display:flex; gap:22px; align-items:baseline; }
.runorder time{ font-family:var(--m); font-size:14px; color:var(--burnt); width:78px; }
.ed-details .side{ grid-column:span 5; display:flex; flex-direction:column; gap:24px; }
.ed-details .map{ height:300px; background:var(--paper2); border:1px solid var(--hairline); padding:20px; display:flex; align-items:flex-end; font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--muted-paper); }
.orgcard{ border:1px solid var(--hairline); background:#fff; padding:26px; display:flex; flex-direction:column; gap:16px; }
.orgcard .k{ font-family:var(--m); font-size:11px; letter-spacing:.16em; color:var(--muted-paper); }
@media(max-width:820px){ .ed-details{ grid-template-columns:1fr; } .ed-details .main,.ed-details .side{ grid-column:auto; } }

/* host */
.host-hero{ padding:84px var(--mx) 0; display:flex; justify-content:space-between; gap:64px; flex-wrap:wrap; }
.host-hero .l{ max-width:720px; display:flex; flex-direction:column; gap:26px; }
.host-hero h1{ font-size:clamp(48px,6.4vw,76px); line-height:.95; letter-spacing:-.035em; color:var(--ink); }
.host-hero .lede{ font-size:20px; line-height:1.55; color:#2F3A48; max-width:620px; }
.host-hero .promise{ width:380px; border:1px solid var(--ink); background:#fff; padding:32px; display:flex; flex-direction:column; gap:20px; }
.host-hero .promise .h{ font-family:var(--m); font-size:11px; letter-spacing:.18em; color:var(--muted-paper); }
.host-hero .promise .r{ display:flex; gap:14px; align-items:flex-start; }
.host-hero .promise .r .b{ width:8px; height:8px; background:var(--safelight); margin-top:8px; flex-shrink:0; }
.host-hero .promise .r span{ font-size:16px; line-height:1.5; color:var(--ink); }
@media(max-width:900px){ .host-hero .promise{ width:100%; } }
.steps{ padding:0 var(--mx); margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:820px){ .steps{ grid-template-columns:1fr 1fr; } }
.step{ border-top:2px solid var(--ink); padding-top:22px; display:flex; flex-direction:column; gap:10px; }
.step.opt{ border-top-color:var(--safelight); }
.step .no{ font-family:var(--m); font-size:12px; letter-spacing:.16em; color:var(--burnt); }
.step .t{ font-family:var(--d); font-weight:700; font-size:24px; letter-spacing:-.02em; color:var(--ink); }
.step .d{ font-size:15px; line-height:1.55; color:var(--muted-paper); }
.calc{ margin-top:56px; padding:64px var(--mx); background:var(--ink); color:var(--paper); }
.calc .top{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:36px; }
.calc h2{ font-size:clamp(34px,4.4vw,46px); line-height:1; letter-spacing:-.03em; color:var(--paper); }
.calc .body{ display:grid; grid-template-columns:repeat(12,1fr); gap:32px; }
.calc .sliders{ grid-column:span 7; display:flex; flex-direction:column; gap:32px; }
.calc .sl{ display:flex; flex-direction:column; gap:12px; }
.calc .sl .r{ display:flex; justify-content:space-between; align-items:baseline; }
.calc .sl label{ font-size:16px; font-weight:600; color:var(--body-ink); }
.calc .sl .val{ font-family:var(--d); font-weight:800; font-size:26px; color:var(--paper); font-variant-numeric:tabular-nums; }
.calc input[type=range]{ width:100%; height:30px; accent-color:var(--safelight); }
.calc .rates{ display:flex; gap:32px; border-top:1px solid var(--line-ink); padding-top:22px; flex-wrap:wrap; }
.calc .rates .k{ font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--dim-ink); }
.calc .rates .v{ font-size:19px; font-weight:700; color:var(--paper); }
.calc .split{ grid-column:span 5; border:1px solid var(--safelight); background:#181420; padding:34px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.calc .split .h{ font-family:var(--m); font-size:11px; letter-spacing:.18em; color:var(--safelight); }
.calc .split .ln{ display:flex; justify-content:space-between; font-size:16px; color:var(--body-ink); }
.calc .split .ln b{ color:var(--paper); font-weight:700; }
.calc .split .keep{ border-top:1px solid var(--border-ink); padding-top:22px; display:flex; flex-direction:column; gap:8px; }
.calc .split .keep .kk{ font-family:var(--m); font-size:11px; letter-spacing:.18em; color:var(--body-ink); }
.calc .split .keep .kv{ font-family:var(--d); font-weight:800; font-size:clamp(40px,5vw,54px); line-height:1; letter-spacing:-.03em; color:var(--safelight); font-variant-numeric:tabular-nums; }
.calc .split .keep .kd{ font-size:14px; color:var(--muted-ink); }
@media(max-width:900px){ .calc .body{ grid-template-columns:1fr; } .calc .sliders,.calc .split{ grid-column:auto; } }
.gets{ padding:64px var(--mx); background:var(--paper); }
.gets h2{ font-size:40px; letter-spacing:-.03em; color:var(--ink); margin-bottom:32px; }
.gets .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:820px){ .gets .grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .gets .grid{ grid-template-columns:1fr; } }
.gets .g{ border:1px solid var(--hairline); background:#fff; padding:26px; display:flex; flex-direction:column; gap:10px; min-height:230px; }
.gets .g .t{ font-family:var(--d); font-weight:700; font-size:20px; color:var(--ink); }
.gets .g .d{ font-size:15px; line-height:1.55; color:var(--muted-paper); }
.coverage{ margin:0 var(--mx) 64px; background:var(--paper); }
.coverage .box{ border:1px solid var(--ink); background:#fff; display:grid; grid-template-columns:repeat(12,1fr); }
.coverage .frame{ grid-column:span 4; min-height:300px; }
.coverage .body{ grid-column:span 8; padding:44px 48px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; }
.coverage h2{ font-size:38px; line-height:1.02; letter-spacing:-.03em; color:var(--ink); }
.coverage p{ font-size:16px; line-height:1.55; color:var(--muted-paper); max-width:620px; margin:0; }
.coverage .cc{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
@media(max-width:820px){ .coverage .box{ grid-template-columns:1fr; } .coverage .frame,.coverage .body{ grid-column:auto; } }
.faq{ padding:64px var(--mx); background:var(--paper); display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
@media(max-width:820px){ .faq{ grid-template-columns:1fr; } }
.faq .q .t{ font-family:var(--d); font-weight:700; font-size:20px; color:var(--ink); }
.faq .q .a{ font-size:15px; line-height:1.6; color:var(--muted-paper); margin-top:10px; }

/* services / contact reuse paper */
.pkg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:900px){ .pkg-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:520px){ .pkg-grid{ grid-template-columns:1fr; } }
.pkg{ border:1px solid var(--hairline); background:#fff; padding:24px; display:flex; flex-direction:column; }
.pkg .tier{ display:block; border:0; padding:0; font-family:var(--m); font-size:11px; letter-spacing:.14em; color:var(--burnt); }
.pkg .price{ font-family:var(--d); font-weight:800; font-size:30px; margin:10px 0 4px; color:var(--ink); font-variant-numeric:tabular-nums; }
.pkg .price small{ font-family:var(--m); font-size:12px; color:var(--muted-paper); font-weight:400; }
.pkg .note{ color:var(--muted-paper); font-size:13px; }
.classlist{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
@media(max-width:640px){ .classlist{ grid-template-columns:1fr; } }
.classlist .c{ background:#fff; padding:16px 18px; display:flex; justify-content:space-between; gap:12px; }
.classlist .c span{ font-weight:600; color:var(--ink); } .classlist .c b{ font-family:var(--m); color:var(--burnt); white-space:nowrap; }
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ width:100%; height:52px; padding:0 14px; border:1px solid var(--field); background:#fff; font-family:var(--b); font-size:16px; color:var(--ink); }
textarea.field{ height:auto; min-height:130px; padding:14px; }
.field:focus{ outline:2px solid var(--safelight); border-color:var(--safelight); }
.flabel{ font-family:var(--m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-paper); display:block; margin:0 0 8px; }
.cinfo{ background:var(--ink); color:var(--body-ink); padding:26px; }
.cinfo h4{ color:var(--paper); font-size:18px; margin-bottom:6px; }
.cinfo .k{ font-family:var(--m); font-size:10.5px; letter-spacing:.12em; color:var(--muted-ink); margin-top:16px; }

/* work hero video */
.hero video.hero-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* team */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:900px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .team-grid{ grid-template-columns:1fr 1fr; gap:14px; } }
.tmember{ margin:0; display:flex; flex-direction:column; gap:10px; }
.tmember .frame{ aspect-ratio:4/5; }
.tmember .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.tmember .tname{ font-family:var(--d); font-weight:800; font-size:17px; color:var(--paper); letter-spacing:-.01em; }
.tmember .trole{ font-family:var(--m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-lo); }

/* mobile polish */
@media(max-width:960px){ .nav .navbtn{ display:inline-flex!important; } }
@media(max-width:640px){
  .ed-hero .poster{ min-height:300px; }
  .ed-panel{ padding:36px var(--mx); }
  .hero .cta .btn,.host-hero .cta .btn{ width:100%; }
  .sec,.loop,.livenow,.calc,.gets,.faq{ padding-left:var(--mx); padding-right:var(--mx); }
  .ed-tabs{ overflow-x:auto; }
}
/* category gallery */
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:820px){ .gal-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .gal-grid{ grid-template-columns:1fr; } }
.gal-grid .frame{ aspect-ratio:4/5; }
.gal-grid .frame.wide{ grid-column:span 2; aspect-ratio:16/10; }
@media(max-width:520px){ .gal-grid .frame.wide{ grid-column:auto; aspect-ratio:4/5; } }
.cat-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.cat-chips a{ padding:11px 20px; border:1px solid var(--field); background:#fff; font-weight:600; font-size:14px; color:var(--ink); cursor:pointer; }
.cat-chips a:hover{ border-color:var(--safelight); color:var(--ink); }
.cat-chips a[aria-current="true"]{ border-color:var(--safelight); color:var(--burnt); }

/* Note: the static preview's fake-STK demo modal (.modal/.sheet/.mhead/...)
   is deliberately NOT ported here. vote.php/tickets.php already have a real,
   working Bootstrap modal wired to the actual M-Pesa backend, and Bootstrap
   also owns the class name .modal - defining it again here would fight
   Bootstrap's own modal CSS/JS on those two pages. */
.illus{ font-family:var(--m); font-size:11px; color:var(--dim-paper); letter-spacing:.03em; margin-top:16px; }

/* motion */
@keyframes heroUp{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes develop{ from{filter:brightness(.3) contrast(1.45);transform:scale(1.06)} to{filter:none;transform:none} }
/* Reveal-on-scroll, retimed 2026-10-20. Was 600ms over 24px on the ambient
   curve, with up to 480ms of stagger on top - about 1.08s before the last
   item in a group settled, on content the visitor is already looking at.
   Now 380ms over 14px on the entrance curve, stagger capped at 180ms in
   motion.js. Short enough to feel like the page keeping up with the scroll
   rather than performing for it. */
.rv{ opacity:0; transform:translateY(14px); } .rv.in{ opacity:1; transform:none; transition:opacity .38s var(--e-enter), transform .38s var(--e-enter); }
.rv-fade{ opacity:0; } .rv-fade.in{ opacity:1; transition:opacity .3s var(--e-enter); }
@media(prefers-reduced-motion:reduce){ .marquee .track,.hero .dot{ animation:none; } .rv,.rv-fade{ opacity:1!important; transform:none!important; } .hero h1 span.wd{ animation:none!important; } }