/* ---------- Poppies in the Fog design tokens ----------
   Paper/ink/amber/teal/clay — Duransound's shared brand system. */
:root{
  color-scheme: light;
  --bg:#f3eee3;
  --surface:#e9e1d1;
  --surface-2:#f0e9d9;
  --ink:#23211d;
  --muted:#5c564a;
  --accent:#c17b2b;
  --accent-ink:#fff8ee;
  --accent-2:#2e6e6a;
  --line:#ded3ba;
  --success:#2f8f5b;
  --success-bg:#e2ecdf;
  --danger:#a44b34;
  --danger-bg:#f2e0d7;
  --shadow: 0 1px 2px rgba(35,33,29,.05), 0 8px 24px -12px rgba(35,33,29,.22);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1b1916; --surface:#262320; --surface-2:#211e1a; --ink:#efe8d9; --muted:#a89e89;
    --accent:#e2a459; --accent-ink:#241606; --accent-2:#63b0aa; --line:#3a352c;
    --success:#4cbb7c; --success-bg:#1c2b21; --danger:#cc7a5f; --danger-bg:#332019;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#1b1916; --surface:#262320; --surface-2:#211e1a; --ink:#efe8d9; --muted:#a89e89;
  --accent:#e2a459; --accent-ink:#241606; --accent-2:#63b0aa; --line:#3a352c;
  --success:#4cbb7c; --success-bg:#1c2b21; --danger:#cc7a5f; --danger-bg:#332019;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Karla", system-ui, -apple-system, sans-serif;
  padding-inline:16px; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;}
.num{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}
.tc{font-family:"VT323", "IBM Plex Mono", monospace;}
h1,h2,h3{font-family:"Fraunces", Georgia, serif; text-wrap:balance; margin:0; letter-spacing:-.01em;}

body::before{
  content:""; position:fixed; inset:0; z-index:998; pointer-events:none;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; opacity:.5;
}
:root:not([data-theme="light"]) body::before{ mix-blend-mode:overlay; opacity:.35; }
:root[data-theme="dark"] body::before{ mix-blend-mode:overlay; opacity:.35; }

.rec-badge{display:inline-flex; align-items:center; gap:5px; font-family:"VT323", monospace; font-size:15px; color:var(--danger); letter-spacing:.04em; line-height:1;}
.rec-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--danger); animation:rec-blink 1.6s steps(1) infinite;}
@keyframes rec-blink{ 0%,55%{opacity:1;} 56%,100%{opacity:.15;} }
@media (prefers-reduced-motion: reduce){ .rec-badge .dot{animation:none;} }

.viewfinder{position:relative;}
.viewfinder::before, .viewfinder::after, .viewfinder .vf-tr, .viewfinder .vf-br{
  content:""; position:absolute; width:7px; height:7px; border:1.4px solid var(--accent); opacity:.75;
}
.viewfinder::before{top:-4px; left:-4px; border-right:none; border-bottom:none;}
.viewfinder::after{bottom:-4px; left:-4px; border-right:none; border-top:none;}
.viewfinder .vf-tr{top:-4px; right:-4px; border-left:none; border-bottom:none;}
.viewfinder .vf-br{bottom:-4px; right:-4px; border-left:none; border-top:none;}

.timecode{
  position:absolute; bottom:8px; left:8px; font-family:"VT323", monospace; font-size:15px; line-height:1;
  color:#ffe9b8; text-shadow:0 0 6px rgba(255,190,90,.75), 0 1px 1px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:5px; letter-spacing:.02em;
}
.timecode .dot{width:6px; height:6px; border-radius:50%; background:#ff6a52; box-shadow:0 0 5px #ff6a52; animation:rec-blink 1.6s steps(1) infinite;}

.shell{max-width:1120px; margin:0 auto;}

.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-block:14px; background:var(--bg); border-bottom:1px solid var(--line); margin-bottom:28px;
}
.wordmark{display:flex; align-items:center; gap:11px; cursor:pointer; background:none; border:none; padding:0;}
.wordmark .mark{width:24px; height:24px; flex:none; margin:4px;}
.wordmark .word{display:flex; flex-direction:column; align-items:flex-start; gap:1px;}
.wordmark .name{font-family:"Fraunces", serif; font-weight:600; font-size:19px; color:var(--ink); line-height:1;}
.wordmark .url{font-family:"VT323", monospace; font-size:13px; color:var(--muted); letter-spacing:.03em; line-height:1;}
.nav{display:flex; align-items:center; gap:6px;}
.navbtn{border:1px solid transparent; background:none; color:var(--muted); font-size:13.5px; font-weight:500; padding:7px 12px; border-radius:8px; cursor:pointer;}
.navbtn:hover{color:var(--ink); background:var(--surface-2);}
.navbtn.active{color:var(--ink); background:var(--surface); border-color:var(--line); box-shadow:var(--shadow);}
.navbtn.admin-on{color:var(--accent); border-color:var(--accent);}

.eyebrow{text-transform:uppercase; letter-spacing:.09em; font-size:11.5px; font-weight:600; color:var(--muted);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; padding:9px 16px; cursor:pointer;}
.btn:hover{border-color:var(--muted);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 0 18px -4px color-mix(in srgb, var(--accent) 65%, transparent);}
.btn.primary:hover{filter:brightness(1.06);}
.btn.ghost{background:none; border-color:transparent; color:var(--muted);}
.btn.ghost:hover{color:var(--ink); background:var(--surface-2);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.small{padding:6px 11px; font-size:12.5px; border-radius:7px;}

input,select,textarea{font-family:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-2); outline-offset:1px;}
label{font-size:12.5px; font-weight:600; color:var(--muted); display:block; margin-bottom:5px;}
.field{margin-bottom:14px;}
.field-row{display:flex; gap:12px;}
.field-row > .field{flex:1;}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px;}
.badge.surf{background:color-mix(in srgb, var(--accent-2) 16%, transparent); color:var(--accent-2);}
.badge.music{background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent);}
.badge.paid{background:var(--success-bg); color:var(--success);}

.empty{border:1px dashed var(--line); border-radius:14px; padding:40px 24px; text-align:center; color:var(--muted);}
.empty h3{color:var(--ink); margin-bottom:6px; font-size:19px;}
.empty p{margin:0 0 16px; font-size:14px;}

.banner{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 13px; margin-bottom:20px;}
.banner.warn{color:var(--danger); background:var(--danger-bg); border-color:transparent;}
.banner .dot{width:7px;height:7px;border-radius:50%; background:var(--success); flex:none;}

.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.page-head h1{font-size:30px;}
.page-head p{margin:6px 0 0; color:var(--muted); font-size:14.5px; max-width:52ch;}

.events-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(258px,1fr)); gap:18px; margin-bottom:8px;}
.event-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column;}
.event-cover{aspect-ratio:16/10; position:relative; overflow:hidden;}
.event-cover .tex{position:absolute; inset:0;}
.event-cover .badge{position:absolute; top:10px; left:10px;}
.event-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px;}
.event-body h3{font-size:18px;}
.event-meta{color:var(--muted); font-size:13px; display:flex; flex-direction:column; gap:2px;}
.event-foot{display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:12.5px; color:var(--muted);}
.event-foot .price{color:var(--ink); font-weight:600;}

.tex-surf{background:
  repeating-linear-gradient(115deg, color-mix(in srgb, var(--accent-2) 55%, var(--bg)) 0 26px, color-mix(in srgb, var(--accent-2) 30%, var(--bg)) 26px 52px),
  linear-gradient(160deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 40%, var(--ink)));
}
.tex-music{background:
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, var(--bg)) 0 4px, transparent 4px 22px),
  linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--ink)));
}

.crumb{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin-bottom:14px;}
.crumb button{background:none;border:none;color:var(--muted);font:inherit;cursor:pointer;padding:0;}
.crumb button:hover{color:var(--ink); text-decoration:underline;}

.event-hero{display:grid; grid-template-columns:220px 1fr; gap:20px; margin-bottom:26px; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
.event-hero .event-cover{aspect-ratio:auto; height:100%;}
.event-hero-body{padding:18px 20px; display:flex; flex-direction:column; gap:8px; justify-content:center;}
.event-hero-body h1{font-size:26px;}
.event-hero-body .event-meta{font-size:14px;}

.heats-list{display:flex; flex-direction:column; gap:10px; margin-bottom:30px;}
.heat-row{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; cursor:pointer;}
.heat-row:hover{border-color:var(--muted);}
.heat-num{font-family:"IBM Plex Mono", monospace; font-size:12px; font-weight:500; color:var(--muted); width:38px; flex:none;}
.heat-info{flex:1; min-width:0;}
.heat-info .name{font-weight:600; font-size:15px;}
.heat-info .time{font-size:12.5px; color:var(--muted); font-family:"IBM Plex Mono",monospace;}
.heat-arrow{color:var(--muted); flex:none;}
.heat-thumb{width:52px; height:52px; border-radius:9px; overflow:hidden; flex:none; position:relative;}
.heat-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.heat-thumb .tex{position:absolute; inset:0;}

.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(168px,1fr)); gap:12px; margin-bottom:100px;}
.photo-tile{position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; border:1px solid var(--line); cursor:pointer; background:var(--surface-2);}
.photo-tile img{width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none;}
.photo-tile .tex{position:absolute; inset:0;}
.photo-tile .check{position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:6px; background:rgba(15,20,26,.5); border:1.5px solid rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700;}
.photo-tile.selected .check{background:var(--accent); border-color:var(--accent);}
.photo-tile.selected{outline:2.5px solid var(--accent); outline-offset:-2.5px;}
.photo-tile .price-tag{position:absolute; bottom:8px; right:8px; background:rgba(15,20,26,.62); color:#fff; font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:999px; font-family:"IBM Plex Mono",monospace;}

.gallery-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.gallery-head h2{font-size:22px;}
.gallery-head .sub{color:var(--muted); font-size:13.5px; margin-top:3px;}

.cartbar{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--ink); color:var(--bg); border-radius:14px; box-shadow:0 12px 32px -8px rgba(0,0,0,.4); display:flex; align-items:center; gap:16px; padding:12px 12px 12px 18px; z-index:50; max-width:calc(100vw - 32px);}
:root:not([data-theme="light"]) .cartbar{background:var(--surface); border:1px solid var(--line); color:var(--ink);}
:root[data-theme="dark"] .cartbar{background:var(--surface); border:1px solid var(--line); color:var(--ink);}
.cartbar .count{font-weight:700; font-size:14px; white-space:nowrap;}
.cartbar .total{font-family:"IBM Plex Mono",monospace; font-size:14px; opacity:.85; white-space:nowrap;}
.cartbar .btn.primary{padding:9px 18px;}

.overlay{position:fixed; inset:0; background:rgba(10,14,18,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px;}
.modal{background:var(--surface); border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow); width:100%; max-width:460px; max-height:88vh; overflow-y:auto; padding:24px;}
.modal h2{font-size:20px; margin-bottom:4px;}
.modal .sub{color:var(--muted); font-size:13.5px; margin-bottom:18px;}
.modal-close{position:sticky; top:0; float:right; background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer;}
.order-line{display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line);}
.order-line .num{color:var(--muted);}
.order-total{display:flex; justify-content:space-between; font-size:16px; font-weight:700; padding-top:12px;}

.lightbox{position:fixed; inset:0; background:#161310; z-index:90; display:flex; flex-direction:column;}
.lightbox-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; color:#f2f2f0; flex:none;}
.lightbox-top .meta{font-size:12.5px; opacity:.85; font-family:"IBM Plex Mono",monospace; color:#f2f2f0; margin-left:2px;}
.lightbox-top .rec-badge{color:#ff6a52;}
.lightbox-top .rec-badge .dot{background:#ff6a52; box-shadow:0 0 5px #ff6a52;}
.lightbox-close{background:none; border:none; color:#f2f2f0; font-size:22px; cursor:pointer; opacity:.8; line-height:1;}
.lightbox-close:hover{opacity:1;}
.lightbox-stage{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; position:relative; padding:0 64px;}
.lightbox-stage img{max-width:100%; max-height:100%; object-fit:contain; display:block; border-radius:6px;}
.lightbox-stage .tex{width:min(78vw,560px); aspect-ratio:4/5; border-radius:10px; max-height:100%;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#f2f2f0; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.lightbox-nav:hover{background:rgba(255,255,255,.18);}
.lightbox-nav.prev{left:14px;}
.lightbox-nav.next{right:14px;}
.lightbox-stage.viewfinder::before, .lightbox-stage.viewfinder::after, .lightbox-stage.viewfinder .vf-tr, .lightbox-stage.viewfinder .vf-br{width:22px; height:22px; border-color:rgba(255,255,255,.4); border-width:1.5px;}
.lightbox-stage.viewfinder::before{top:18px; left:18px;}
.lightbox-stage.viewfinder::after{bottom:18px; left:18px;}
.lightbox-stage.viewfinder .vf-tr{top:18px; right:18px;}
.lightbox-stage.viewfinder .vf-br{bottom:18px; right:18px;}
.lightbox-bottom{display:flex; align-items:center; justify-content:center; gap:14px; padding:16px; flex:none;}
.lightbox-bottom .num{color:#f2f2f0; font-size:14px;}
@media (max-width:640px){ .lightbox-stage{padding:0 44px;} .lightbox-nav{width:38px; height:38px; font-size:17px;} }

.success-wrap{text-align:center; padding:50px 16px 70px; max-width:560px; margin:0 auto;}
.success-badge{width:52px;height:52px;border-radius:50%; background:var(--success-bg); color:var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:24px;}
.purchase-list{display:flex; flex-direction:column; gap:10px; text-align:left; margin-top:22px;}
.purchase-row{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px;}
.purchase-row .thumb{width:52px; height:52px; border-radius:8px; overflow:hidden; flex:none; position:relative;}
.purchase-row .thumb img{width:100%; height:100%; object-fit:cover;}
.purchase-row .info{flex:1; min-width:0; font-size:13px; color:var(--muted);}

.admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); margin-bottom:20px;}
.panel h3{font-size:16px; margin-bottom:14px;}
.stat-row{display:flex; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 18px; flex:1; min-width:140px; box-shadow:var(--shadow);}
.stat .eyebrow{margin-bottom:6px;}
.stat .val{font-family:"IBM Plex Mono",monospace; font-size:24px; font-weight:500;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; padding:7px 8px; border-bottom:1px solid var(--line);}
td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top;}
.table-wrap{overflow-x:auto;}
.admin-heat-block{border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px;}
.admin-heat-block .h-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.admin-heat-block .h-top .name{font-weight:600; font-size:14px;}
.admin-heat-block .h-top .time{color:var(--muted); font-size:12px; font-family:"IBM Plex Mono",monospace;}
.admin-photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px;}
.admin-photo-grid .ph{aspect-ratio:1; border-radius:7px; overflow:hidden; position:relative; border:1px solid var(--line);}
.admin-photo-grid .ph img{width:100%; height:100%; object-fit:cover;}

.login-wrap{max-width:360px; margin:60px auto; text-align:center;}

footer.foot{color:var(--muted); font-size:12.5px; text-align:center; padding:30px 0 50px;}

@media (max-width:640px){
  .event-hero{grid-template-columns:1fr;}
  .event-hero .event-cover{aspect-ratio:16/9;}
  .admin-grid{grid-template-columns:1fr;}
  .field-row{flex-direction:column; gap:0;}
}