:root{
  --background:#f7f5f1;
  --navy-deep:#0b1a2c;
  --gold:#e6b64a;
  --muted:#e9e4dc;
  --muted-foreground:#5b6472;
  --border:#d9d3c9;
  --shadow-elegant: 0 10px 30px -12px rgba(11,26,44,.25);
  --shadow-glow: 0 0 0 3px rgba(230,182,74,.25), 0 10px 24px -10px rgba(230,182,74,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--background);color:var(--navy-deep);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
.wrap{max-width: 80rem; margin:0 auto; padding: 0 1.5rem;}
.gallery{padding: 4rem 0 6rem;}
.year-selector{display:flex;flex-direction:column;align-items:center;margin-bottom:3rem;}
.eyebrow{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.25em;color:var(--muted-foreground);margin-bottom:1rem;font-family:inherit;}
.tabs{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem;border-radius:9999px;background:var(--navy-deep);box-shadow:var(--shadow-elegant);}
.tab{border:0;background:transparent;color:rgba(255,255,255,.7);cursor:pointer;
  padding:.625rem 2.25rem;border-radius:9999px;font-weight:700;letter-spacing:.05em;font-size:1rem;
  transition:all .3s ease;}
.tab:hover{color:#fff;}
.tab[aria-selected="true"]{background:var(--gold);color:var(--navy-deep);box-shadow:var(--shadow-glow);}
.section-head{margin:0 auto 2.5rem;max-width:42rem;text-align:center;}
.section-head h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin:0;}
.rule{height:4px;width:4rem;background:var(--gold);margin:1rem auto 1.25rem;}
.section-head p{color:var(--muted-foreground);margin:0;font-size:1rem;}
.group{}
.group + .group{margin-top:4rem;}
.group-head{text-align:center;margin-bottom:2rem;}
.group-head h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:800;text-transform:uppercase;letter-spacing:.2em;margin:0;}
.group-head .desc{display:inline-block;margin-top:.5rem;font-size:.75rem;font-weight:600;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;}
.group-head .divider{height:1px;width:6rem;background:var(--border);margin:1rem auto 0;}

.bento{display:grid;grid-template-columns:repeat(1,1fr);gap:.75rem;}
@media(min-width:640px){
  .bento{grid-template-columns:repeat(12,1fr);gap:1rem;}
}
@media(min-width:1024px){ .bento{gap:1.25rem;} }
.tile{position:relative;display:block;width:100%;overflow:hidden;border-radius:.5rem;background:var(--muted);border:0;padding:0;cursor:pointer;}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease-out;}
.tile:hover img{transform:scale(1.04);}
.tile .overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(11,26,44,.85), rgba(11,26,44,.1) 60%, transparent);opacity:0;transition:opacity .3s;pointer-events:none;}
.tile:hover .overlay{opacity:1;}
.tile .caption{position:absolute;left:0;right:0;bottom:0;padding:1rem;color:#fff;font-size:.875rem;font-weight:500;transform:translateY(.5rem);opacity:0;transition:.3s;pointer-events:none;}
.tile:hover .caption{transform:none;opacity:1;}
.tile .badge{position:absolute;top:.75rem;left:.75rem;background:var(--gold);color:var(--navy-deep);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:.1rem .5rem;border-radius:2px;opacity:0;transition:.3s;pointer-events:none;}
.tile:hover .badge{opacity:1;}

/* Bento pattern classes (mirror React version) */
@media(min-width:640px){
  .p0{grid-column:span 8/span 8;grid-row:span 2/span 2;aspect-ratio:16/10;}
  .p1{grid-column:span 4/span 4;grid-row:span 2/span 2;aspect-ratio:3/4;}
  .p2,.p3,.p4{grid-column:span 4/span 4;aspect-ratio:4/3;}
  .p5,.p6{grid-column:span 6/span 6;aspect-ratio:16/9;}
}
@media(max-width:639px){
  .tile{aspect-ratio:4/3;}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(11,26,44,.95);backdrop-filter:blur(4px);}
.lightbox[hidden]{display:none;}
.lb-btn{position:absolute;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:9999px;border:1px solid rgba(255,255,255,.2);color:#fff;background:transparent;cursor:pointer;font-size:1.5rem;line-height:1;transition:.2s;}
.lb-btn:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);}
.lb-close{top:1.25rem;right:1.25rem;}
.lb-prev{left:.75rem;top:50%;transform:translateY(-50%);}
.lb-next{right:.75rem;top:50%;transform:translateY(-50%);}
@media(min-width:640px){.lb-prev{left:1.5rem;} .lb-next{right:1.5rem;}}
.lb-stage{max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;}
#lb-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:.375rem;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lb-meta{margin-top:1rem;text-align:center;max-width:42rem;color:#fff;}
.lb-meta p{margin:0;font-size:.95rem;}
.lb-count{color:rgba(255,255,255,.5);font-size:.75rem;margin-top:.25rem !important;}