@font-face {
    font-family: "Shrikhand";
    src: url("/assets/fonts/shrikhand.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Outfit";
    src: url("/assets/fonts/outfit-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Outfit";
    src: url("/assets/fonts/outfit-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Outfit";
    src: url("/assets/fonts/outfit-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #14060f;
    --paper: #fff6e4;
    --pink: #ff2f86;
    --gold: #ffc83d;
    --mint: #67ffe4;
    --orange: #ff6a1a;
    --choc: #5a2a18;
    --line: rgba(255, 246, 228, .16);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
    color: var(--paper);
    background:
        radial-gradient(ellipse at 12% -10%, rgba(255, 47, 134, .55), transparent 42%),
        radial-gradient(ellipse at 100% 0%, rgba(255, 200, 61, .32), transparent 34%),
        radial-gradient(ellipse at 80% 90%, rgba(103, 255, 228, .12), transparent 36%),
        repeating-linear-gradient(-18deg, transparent 0 22px, rgba(255,255,255,.025) 22px 23px),
        linear-gradient(180deg, #2a0c1c 0%, #14060f 42%, #070307 100%);
    line-height: 1.5;
}
body.is-live {
    background:
        radial-gradient(ellipse at 80% -10%, rgba(103, 255, 228, .35), transparent 40%),
        radial-gradient(ellipse at 0% 20%, rgba(255, 106, 26, .4), transparent 36%),
        linear-gradient(180deg, #2a0c1c, #070307);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
button, input, select, textarea { font: inherit; color: inherit; }
.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    background: var(--gold);
    color: var(--ink);
    padding: .6rem 1rem;
    z-index: 20;
}
.skip:focus { top: 1rem; }
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.lights {
    pointer-events: none;
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.16), transparent 18%),
        radial-gradient(circle at 78% 18%, rgba(255,255,255,.1), transparent 16%);
    mix-blend-mode: screen;
    z-index: 0;
}
.tape {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, #ffc83d 0 14px, #1a0a00 14px 28px);
    color: #1a0a00;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(-1.2deg) scale(1.02);
}
.tape div { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.tape span { padding: .35rem 0; white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.topbar, main, .footer { position: relative; z-index: 1; }
.topbar { z-index: 6; }
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--paper);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .04em;
}
.mark {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .45rem;
    background:
        radial-gradient(circle at 70% 30%, transparent 0 18%, #3b1a10 19% 100%),
        repeating-linear-gradient(90deg, #7a3b22 0 8px, #c98455 8px 10px);
    box-shadow: 0 0 0 3px #ffc83d, 6px 6px 0 #ff2f86;
    transform: rotate(8deg);
}
.nav-toggle {
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
    border-radius: 999px;
    padding: .45rem .9rem;
}
.nav {
    display: none;
    position: absolute;
    top: 4.4rem;
    right: .8rem;
    left: .8rem;
    background: rgba(20, 6, 15, .96);
    border: 2px solid var(--gold);
    border-radius: 1rem;
    padding: .6rem;
    flex-direction: column;
}
.nav.is-open {
    display: flex;
    z-index: 7;
    background: #14060f;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.nav a {
    color: var(--paper);
    text-decoration: none;
    padding: .75rem .8rem;
    border-radius: .7rem;
}
.nav a:hover, .nav a:focus-visible { background: rgba(255, 200, 61, .14); }

.hero {
    padding: 1.2rem 1.1rem 1rem;
    text-align: center;
}
.kicker {
    display: inline-block;
    margin: 0 0 .8rem;
    padding: .35rem .7rem;
    background: var(--pink);
    color: white;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    transform: rotate(-2deg);
}
h1, h2 { font-family: "Shrikhand", "Outfit", cursive; font-weight: 400; line-height: .92; letter-spacing: 0; }
h1 { font-size: clamp(3.3rem, 16vw, 8.5rem); margin: 0; }
h1 span { display: block; }
h1 span:first-child { color: var(--gold); text-shadow: 4px 4px 0 #6b1238; }
h1 span:last-child { color: var(--pink); text-shadow: 4px 4px 0 #3a2208; transform: rotate(-2deg); }
.artists { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 800; margin: .8rem 0 .2rem; }
.subtitle { font-size: clamp(1.15rem, 3vw, 1.6rem); margin-top: 0; color: var(--mint); }

.countdown, .live-banner, .panel, .paths, .form-wrap { margin: 1rem; }
.countdown { text-align: center; }
.count-label { letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; font-weight: 800; }
.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.count-grid div {
    background: rgba(0,0,0,.35);
    border: 2px solid var(--gold);
    border-radius: 1rem;
    padding: .7rem .2rem;
    box-shadow: 0 8px 0 rgba(255, 47, 134, .45);
}
.count-grid strong { display: block; font-family: "Shrikhand", cursive; font-size: clamp(1.8rem, 6vw, 3.4rem); color: var(--gold); }
.count-grid span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.live-banner {
    background: var(--gold);
    color: var(--ink);
    border-radius: 1.4rem;
    padding: 1.2rem;
    text-align: center;
    transform: rotate(-1deg);
}
.live-banner h2 { font-size: clamp(2rem, 6vw, 3.5rem); margin: .2rem 0; }
.only-live { display: none; }
body.is-live .only-teaser { display: none; }
body.is-live .only-live { display: block; }
body.is-live a.only-live { display: inline-flex; }
body.is-teaser .only-live { display: none; }

.actions, .share { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1rem; }
.ticket, button.ticket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    min-height: 3.2rem;
    padding: .85rem 1.1rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1a070f;
    box-shadow: 0 7px 0 #000;
}
.ticket:hover, .ticket:focus-visible { transform: translateY(2px); box-shadow: 0 5px 0 #000; }
.ticket-gold { background: var(--gold); }
.ticket-pink { background: var(--pink); color: white; }
.ticket-mint { background: var(--mint); }
.chip {
    border: 2px solid var(--paper);
    color: var(--paper);
    text-decoration: none;
    background: transparent;
    border-radius: 999px;
    padding: .45rem .8rem;
    font-weight: 700;
}
button.chip { cursor: pointer; }

.poster, .video-frame, .panel, .path, .form-card, .admin-card {
    background: rgba(8, 2, 6, .72);
    border: 2px solid var(--line);
    border-radius: 1.4rem;
}
.poster, .video-frame { margin: 0 1rem; overflow: hidden; min-height: 16rem; }
.poster { display: grid; place-items: center; text-align: center; padding: 2rem 1rem; background:
    linear-gradient(160deg, rgba(255,47,134,.25), transparent 40%),
    repeating-linear-gradient(90deg, rgba(90,42,24,.5) 0 28px, rgba(201,132,85,.25) 28px 34px),
    #1a0b10; }
.poster strong { font-family: "Shrikhand", cursive; font-size: clamp(2rem, 6vw, 4rem); display: block; }
.video-frame { position: relative; aspect-ratio: 16/9; min-height: 0; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.panel { padding: 1.2rem; }
.panel h2 { font-size: clamp(2rem, 6vw, 3.4rem); margin: .2rem 0 .6rem; }
.story p { font-size: 1.12rem; max-width: 42rem; }
.duo { display: grid; gap: 1rem; }
.person h2 a { color: var(--paper); text-decoration: none; }
.placeholder { color: var(--gold); }
.polaroids { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.polaroids figure {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    padding: .45rem .45rem .3rem;
    transform: rotate(-2deg);
    box-shadow: 8px 10px 0 rgba(0,0,0,.35);
}
.polaroids figure:nth-child(even) { transform: rotate(2deg); }
.polaroids img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroids figcaption { font-size: .85rem; font-weight: 700; padding: .25rem; }
.polaroids.big { grid-template-columns: 1fr; }
.paths { display: grid; gap: .8rem; }
.path {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: var(--paper);
}
.path span { color: var(--pink); font-weight: 800; letter-spacing: .14em; }
.path strong { display: block; font-family: "Shrikhand", cursive; font-size: 1.8rem; color: var(--gold); }
.path em { font-style: normal; color: var(--paper); }
.footer { padding: 2rem 1.1rem 6.5rem; color: rgba(255,246,228,.8); }
.dock {
    position: fixed;
    z-index: 5;
    left: .6rem;
    right: .6rem;
    bottom: .6rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    background: rgba(12, 3, 8, .92);
    border: 2px solid var(--gold);
    border-radius: 1rem;
    padding: .4rem;
}
.dock a { text-align: center; text-decoration: none; color: var(--ink); background: var(--gold); border-radius: .7rem; padding: .7rem .2rem; font-weight: 800; font-size: .82rem; }

.form-wrap { max-width: 46rem; margin-left: auto; margin-right: auto; }
.form-wrap h1 { font-size: clamp(2.6rem, 10vw, 5rem); }
.form-card, .stack { display: grid; gap: .85rem; padding: 1rem; }
.stack { padding: 0; }
label { display: grid; gap: .3rem; font-weight: 700; }
label span, .hint { font-weight: 400; color: rgba(255,246,228,.75); }
input, select, textarea {
    width: 100%;
    background: #0c0609;
    border: 2px solid rgba(255, 200, 61, .45);
    border-radius: .8rem;
    padding: .75rem .8rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 2px;
}
.check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; font-weight: 500; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; }
.flash, .error-box { margin: 1rem; padding: .8rem 1rem; border-radius: 1rem; }
.flash-ok { background: #12362c; color: var(--mint); }
.flash-error, .error-box { background: #3d1020; color: #ffd0e0; }
.file-list { padding-left: 1rem; }
.file-list a { font-weight: 800; }
.prose h2 { font-size: 2rem; }
.contact-line { font-weight: 800; }
audio { width: min(100%, 28rem); margin: 1rem auto; display: block; }
.preview-bar {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    background: var(--mint);
    color: var(--ink);
    padding: .4rem;
    font-weight: 800;
}
.preview-bar a { color: var(--ink); }

.admin-body { background: #10080d; }
.admin-shell { display: grid; min-height: 100vh; }
.side {
    padding: 1rem;
    background: #070306;
    border-bottom: 2px solid var(--gold);
}
.side nav { display: grid; gap: .2rem; margin: 1rem 0; }
.side nav a { color: var(--paper); text-decoration: none; padding: .45rem .2rem; }
.side button, .admin-main button, .row-actions button {
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 999px;
    padding: .4rem .7rem;
    cursor: pointer;
}
.admin-main { padding: 1rem 1rem 3rem; }
.admin-main h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.stat-grid article { background: #1b0d14; border-radius: 1rem; padding: 1rem; }
.stat-grid strong { display: block; font-family: "Shrikhand", cursive; font-size: 2.4rem; color: var(--gold); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .35rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-card { padding: 1rem; margin: .8rem 0; }
.inline-form, .row-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.inline-form input, .inline-form select { width: auto; }
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.tabs a { color: var(--paper); text-decoration: none; border: 2px solid var(--line); border-radius: 999px; padding: .35rem .7rem; }
.tabs a[aria-current="page"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.photo-admin { display: grid; gap: 1rem; }
.photo-admin article { background: #1b0d14; border-radius: 1rem; padding: .7rem; }
.photo-admin img { width: 100%; max-height: 240px; object-fit: cover; border-radius: .6rem; }
fieldset { border: 2px solid var(--line); border-radius: 1rem; margin: 0 0 1rem; padding: 1rem; }
legend { font-family: "Shrikhand", cursive; font-size: 1.5rem; padding: 0 .4rem; }
code { color: var(--mint); }

@media (min-width: 860px) {
    .nav-toggle { display: none; }
    .nav { display: flex; position: static; flex-direction: row; background: transparent; border: 0; padding: 0; }
    .hero { padding-top: 2rem; }
    .duo, .paths, .polaroids.big { grid-template-columns: 1fr 1fr; }
    .polaroids { grid-template-columns: repeat(4, 1fr); }
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
    .dock { display: none; }
    .footer { padding-bottom: 2rem; }
    .admin-shell { grid-template-columns: 16rem 1fr; }
    .side { border-bottom: 0; border-right: 2px solid var(--gold); }
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
    .photo-admin { grid-template-columns: 1fr 1fr; }
    .stage-wrap { display: grid; }
}
@media (max-width: 859px) {
    .split { display: grid; gap: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tape div { animation: none; }
    html { scroll-behavior: auto; }
}