@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root{
  --navy: #101c36;
  --navy-2: #1c2c50;
  --red: #c8242c;
  --red-dark: #9c1a20;
  --gold: #d4a537;
  --cream: #f2ecdd;
  --ink: #14161c;
  --line: rgba(242,236,221,0.14);
  --radius: 3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Barlow', system-ui, sans-serif;
  font-size:16px;
  line-height:1.5;
}

img{max-width:100%;display:block;}
a{color:inherit;}

.display{
  font-family:'Anton', 'Barlow', sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
  line-height:0.92;
}

/* ---------- Top bar ---------- */
.topbar{
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
  color:var(--cream);
  padding:22px 24px;
  border-bottom:4px solid var(--red);
}
.topbar-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.topbar .mark{
  font-family:'Anton', sans-serif;
  font-size:1.05rem;
  color:var(--gold);
  border:2px solid var(--gold);
  padding:4px 9px;
  line-height:1;
  border-radius:2px;
}
.topbar h1{
  font-size:1.5rem;
  margin:0;
  text-transform:uppercase;
}
.topbar .sub{
  color:rgba(242,236,221,0.65);
  font-size:0.95rem;
}
.topbar a.home-link{ text-decoration:none; display:contents; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(ellipse at 20% -10%, rgba(200,36,44,0.35), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, #16223f 60%, var(--cream) 100%);
  color:var(--cream);
  padding:64px 24px 96px;
}
.hero-inner{max-width:1100px;margin:0 auto;}
.hero .eyebrow{
  color:var(--gold);
  font-family:'Anton', sans-serif;
  font-size:0.85rem;
  letter-spacing:0.06em;
}
.hero h2{
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  margin:6px 0 16px;
  max-width:14ch;
}
.hero p{
  max-width:52ch;
  color:rgba(242,236,221,0.8);
  font-size:1.08rem;
}

/* ---------- Layout ---------- */
.wrap{max-width:1100px;margin:-56px auto 80px;padding:0 24px;}
.section-title{
  font-family:'Anton', sans-serif;
  font-size:1.5rem;
  margin:0 0 20px;
  color:var(--navy);
}

/* ---------- Album grid (tickets) ---------- */
.albums-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:20px;
}
.ticket{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(16,28,54,0.14);
  display:flex;
  flex-direction:column;
  transition:transform .18s ease;
}
.ticket:hover{transform:translateY(-3px);}
.ticket .cover{
  aspect-ratio:4/3;
  background:var(--navy) center/cover no-repeat;
  position:relative;
}
.ticket .cover::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(16,20,28,0.55));
}
.ticket .count{
  position:absolute; right:10px; bottom:10px;
  font-family:'Anton', sans-serif;
  color:var(--cream);
  font-size:0.82rem;
  background:rgba(16,20,28,0.55);
  padding:3px 8px;
  border-radius:2px;
}
.ticket .body{
  padding:14px 16px 16px;
  border-top:3px solid var(--red);
  position:relative;
}
.ticket .body::before,
.ticket .body::after{
  content:"";
  position:absolute; top:-7px;
  width:14px; height:14px;
  background:var(--cream);
  border-radius:50%;
}
.ticket .body::before{left:-7px;}
.ticket .body::after{right:-7px;}
.ticket .date{
  color:var(--red);
  font-size:0.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.ticket h3{
  font-family:'Anton', sans-serif;
  font-size:1.15rem;
  margin:4px 0 0;
  color:var(--navy);
  line-height:1.15;
}

.empty{
  background:#fff;
  border:2px dashed var(--line);
  border-radius:var(--radius);
  padding:40px 24px;
  text-align:center;
  color:#666;
}

/* ---------- Photo grid ---------- */
.album-header{margin-bottom:24px;}
.album-header .date{color:var(--red); font-weight:700; text-transform:uppercase; font-size:0.85rem; letter-spacing:0.04em;}
.album-header h2{font-size:clamp(1.8rem,4vw,2.6rem); margin:4px 0 8px; color:var(--navy);}
.album-header p{color:#555; max-width:60ch;}
.album-actions{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Barlow', sans-serif;
  font-weight:700;
  font-size:0.92rem;
  padding:11px 18px;
  border-radius:2px;
  border:2px solid var(--navy);
  color:var(--navy);
  background:transparent;
  text-decoration:none;
  cursor:pointer;
}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff;}
.btn.primary:hover{background:var(--red-dark); border-color:var(--red-dark);}
.btn:hover{background:var(--navy); color:#fff;}
.btn.gold{border-color:var(--gold); color:var(--gold-dark, #8a6a1e);}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:10px;
}
.photo-grid figure{
  margin:0; position:relative; cursor:zoom-in;
  aspect-ratio:1;
  border-radius:2px;
  overflow:hidden;
  background:#e5ddc8;
}
.photo-grid img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
.photo-grid figure:hover img{transform:scale(1.05);}
.photo-grid figure .dl{
  position:absolute; right:6px; bottom:6px;
  background:rgba(16,20,28,0.62);
  color:#fff;
  width:30px;height:30px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  font-size:0.9rem;
  opacity:0; transition:opacity .15s;
}
.photo-grid figure:hover .dl{opacity:1;}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(10,14,24,0.92);
  display:none; align-items:center; justify-content:center;
  z-index:200; padding:24px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(92vw,1100px); max-height:80vh; border-radius:2px; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.lightbox .lb-bar{
  position:absolute; top:20px; right:20px; left:20px;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--cream);
}
.lightbox .lb-close{background:none;border:none;color:var(--cream);font-size:1.8rem;cursor:pointer;line-height:1;}
.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,0.1); border:none; color:#fff;
  width:46px;height:46px;border-radius:50%;font-size:1.4rem;cursor:pointer;
}
.lightbox .lb-prev{left:16px;}
.lightbox .lb-next{right:16px;}
.lightbox .lb-dl{
  color:var(--gold); text-decoration:none; font-weight:700; font-size:0.95rem;
}

footer{
  text-align:center; color:#8a8676; font-size:0.85rem; padding:30px 24px 50px;
}

/* ---------- Admin ---------- */
.admin-body{background:#eef0f4;}
.admin-topbar{background:var(--navy); color:var(--cream); padding:18px 24px;}
.admin-wrap{max-width:960px; margin:0 auto; padding:32px 24px 80px;}
.card{background:#fff; border-radius:4px; padding:24px; box-shadow:0 4px 14px rgba(16,28,54,0.08); margin-bottom:24px;}
.card h2{font-family:'Anton', sans-serif; font-size:1.2rem; color:var(--navy); margin-top:0;}
.field{margin-bottom:14px;}
.field label{display:block; font-weight:600; font-size:0.88rem; margin-bottom:5px; color:#333;}
.field input, .field textarea{
  width:100%; padding:10px 12px; border:1.5px solid #d7d3c6; border-radius:3px; font-family:inherit; font-size:0.95rem;
}
.dropzone{
  border:2.5px dashed #c7c2b4; border-radius:6px; padding:36px 20px; text-align:center; color:#777;
  background:#fbfaf6; cursor:pointer; transition:border-color .15s, background .15s;
}
.dropzone.drag{border-color:var(--red); background:#fdf2f1; color:var(--red-dark);}
.admin-albums{list-style:none; margin:0; padding:0;}
.admin-albums li{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border:1px solid #e5e1d3; border-radius:4px; margin-bottom:10px;
}
.admin-albums a.title{font-weight:700; color:var(--navy); text-decoration:none;}
.admin-albums .meta{color:#888; font-size:0.85rem;}
.admin-photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:16px;}
.admin-photo-grid .ph{position:relative; aspect-ratio:1; border-radius:3px; overflow:hidden; background:#e5ddc8;}
.admin-photo-grid img{width:100%;height:100%;object-fit:cover;}
.admin-photo-grid .rm{
  position:absolute; top:5px; right:5px; background:rgba(200,36,44,0.9); color:#fff; border:none;
  width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:0.85rem;
}
.progress-item{font-size:0.85rem; margin-top:6px; color:#555;}
.progress-item .bar{height:5px; background:#e5e1d3; border-radius:3px; overflow:hidden; margin-top:3px;}
.progress-item .bar > span{display:block; height:100%; background:var(--red); width:0%;}
.small-link{font-size:0.85rem; color:#888; text-decoration:underline; cursor:pointer; background:none; border:none;}

@media (max-width:640px){
  .wrap{margin-top:-40px;}
  .hero{padding:48px 20px 80px;}
}