/* ==========================================================================
   KS Ball Photos - Kimbolton School purple, light & formal
   White / soft-lilac ground, deep royal purple (#521C78), restrained gold trim.
   ========================================================================== */

:root {
  --bg:          #ffffff;
  --bg-soft:     #f5f0f8;   /* soft lilac tint */
  --bg-lilac:    #efe7f3;
  --purple:      #521c78;   /* Kimbolton School brand purple */
  --purple-deep: #3d1459;
  --purple-soft: #7a4a9e;
  --ink:         #2a2333;   /* near-black with a purple bias */
  --ink-soft:    #5b5266;
  --gold:        #b8973e;   /* formal metallic trim */
  --gold-deep:   #9a7d2f;
  --line:        #e3d9ec;   /* lilac hairline */
  --white:       #ffffff;
  --danger:      #a13232;

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --shadow: 0 14px 40px rgba(82, 28, 120, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; color: var(--purple); line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; color: var(--ink); }
p  { margin: 0 0 1.1em; color: var(--ink-soft); }
a  { color: var(--purple); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--gold-deep); }

.eyebrow {
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.28em;
  font-size: 0.72rem; font-weight: 600; color: var(--gold-deep); margin: 0 0 1rem;
}
.center { text-align: center; }

/* Gold hairline divider */
.rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px auto; max-width: 340px; }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule::after { background: linear-gradient(90deg, var(--gold), transparent); }
.rule .diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 14px 30px; border: 1px solid var(--purple); border-radius: 2px;
  background: var(--purple); color: #fff; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--purple-deep); border-color: var(--purple-deep); color: #fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #2a2109; }
.btn-gold:hover { background: transparent; color: var(--gold-deep); border-color: var(--gold); }
.btn-ghost { background: transparent; color: var(--purple); }
.btn-ghost:hover { background: var(--purple); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Header / nav */
.site-header { background: var(--white); border-bottom: 3px solid var(--purple); box-shadow: 0 2px 14px rgba(82,28,120,.06); position: relative; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: inline-flex; align-items: center; color: var(--purple); }
.brand svg { height: 60px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  color: var(--ink); font-family: var(--font-sans); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500;
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a.active { color: var(--purple); border-bottom-color: var(--gold); }
.nav-toggle { display: none; background: none; border: 0; color: var(--purple); font-size: 1.6rem; cursor: pointer; }

/* Hero (light, framed) */
.hero { position: relative; background: var(--bg-soft); color: var(--ink); text-align: center; padding: 84px 0 88px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 50% -10%, rgba(82,28,120,.10), transparent 55%); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--purple); }
.hero p { color: var(--ink-soft); max-width: 620px; margin-left: auto; margin-right: auto; font-size: 1.15rem; }
.hero .frame-line { border: 1px solid var(--purple); background: rgba(255,255,255,.55); padding: 46px 30px; max-width: 760px; margin: 0 auto; box-shadow: var(--shadow); }

/* Section */
.section { padding: 74px 0; }
.section.alt { background: var(--bg-soft); }
.lead { font-size: 1.18rem; max-width: 720px; margin: 0 auto 1.4em; }

/* Year selection grid */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; margin-top: 40px; }
.year-card {
  display: block; background: var(--white); border: 1px solid var(--line);
  padding: 12px; text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.year-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--purple); }
.year-card .frame { border: 1px solid var(--line); padding: 22px 14px; }
.year-card .yr { font-family: var(--font-serif); font-size: 2.6rem; color: var(--purple); line-height: 1; }
.year-card .lbl { display: block; margin-top: 10px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.year-card .lock { margin-top: 14px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }

/* Password gate */
.gate { max-width: 460px; margin: 0 auto; text-align: center; }
.gate .frame { border: 1px solid var(--line); background: var(--white); padding: 46px 38px; box-shadow: var(--shadow); }
.gate form { margin-top: 22px; }
/* Admin sign in stacks a username above the password, and choosing a new
   password asks for it twice, so stacked fields need a little air. */
.gate .field + .field { margin-top: 12px; }
.field { width: 100%; font-family: var(--font-sans); font-size: 1rem; padding: 14px 16px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); border-radius: 2px; }
.field:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(82,28,120,.14); }
.gate .btn { width: 100%; margin-top: 16px; }
.pw-error { margin-top: 16px; color: var(--danger); font-weight: 600; font-size: 0.92rem; }
.gate-redirect { margin: 10px 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.gate-redirect a { color: var(--purple); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Gallery */
.gallery-head { text-align: center; padding: 56px 0 8px; }
.gallery-head .count { color: var(--ink-soft); font-size: 0.95rem; letter-spacing: 0.04em; }

.dl-bar {
  position: sticky; top: 0; z-index: 40; background: var(--purple);
  color: #fff; border-bottom: 2px solid var(--gold); padding: 12px 0;
  box-shadow: 0 6px 20px rgba(82,28,120,.22);
}
.dl-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dl-bar .sel-info { font-size: 0.86rem; letter-spacing: 0.06em; color: #efe7f3; }
.dl-bar .sel-info b { color: #fff; font-family: var(--font-serif); font-size: 1.15rem; }
.dl-bar .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dl-bar .btn { padding: 10px 20px; font-size: 0.76rem; }
.chk-all { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; color: #fff; }
.dl-quality { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; }
.dl-quality select {
  font-family: var(--font-sans); font-size: 0.82rem; padding: 8px 10px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.6); background: var(--purple-deep); color: #fff; cursor: pointer;
}
.dl-quality select:focus { outline: none; border-color: var(--gold); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; padding: 34px 0 80px; }
.photo {
  position: relative; background: var(--white); border: 1px solid var(--line); padding: 8px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.photo:hover { box-shadow: var(--shadow); border-color: var(--purple); }
.photo .thumb {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; cursor: zoom-in;
  background: var(--bg-lilac); border: 1px solid var(--line);
}
.photo .pick {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); cursor: pointer; user-select: none;
}
.photo input[type=checkbox] { accent-color: var(--purple); width: 16px; height: 16px; }
.photo.selected { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple) inset; }

/* Lightbox (dark overlay is a photo viewer, tinted deep purple) */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(28, 14, 40, 0.94); }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; border: 6px solid var(--white); box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.lb-btn { position: absolute; background: none; border: 0; color: #efe7f3; cursor: pointer; font-size: 2rem; padding: 18px; opacity: .82; transition: opacity .15s ease; }
.lb-btn:hover { opacity: 1; color: var(--gold); }
.lb-close { top: 10px; right: 18px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-caption { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: #cfc2da; font-size: 0.85rem; letter-spacing: 0.08em; }
/* Admin only: room under the image for the filename and the delete button. */
.admin-lightbox img { max-height: 76vh; }
.admin-lightbox .lb-caption { bottom: 60px; word-break: break-all; padding: 0 60px; }
.lb-delete {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  padding: 7px 16px; border: 1px solid #d08b83; border-radius: 2px; background: none;
  color: #f0bdb6; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.lb-delete:hover, .lb-delete:focus-visible { background: var(--danger); color: var(--white); }

/* Stats only: the photo sits under a bar carrying its own figures. The stage is
   sized in JS to the width the image actually rendered at, so the bar lines up
   with the picture rather than the viewport. */
.stat-lb-stage {
  box-sizing: content-box; display: flex; flex-direction: column; align-items: center;
  max-width: 92vw; border: 6px solid var(--white); box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.stat-lightbox img {
  display: block; max-width: 92vw; max-height: calc(86vh - 46px);
  width: auto; height: auto; border: 0; box-shadow: none;
}
.stat-lb-bar {
  align-self: stretch; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 6px 18px; padding: 9px 14px;
  background: var(--purple); color: #efe7f3; font-size: 0.76rem; line-height: 1.4;
}
.stat-lb-bar b { color: var(--white); font-size: 0.95rem; }
.stat-lb-bar i { font-style: normal; opacity: 0.75; }
.stat-lb-file { font-weight: 600; letter-spacing: 0.04em; word-break: break-all; }
.stat-lb-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.stat-lb-last, .stat-lb-count { opacity: 0.7; }
.stat-photo a { display: block; cursor: zoom-in; }

/* Contact form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; margin: 0 auto; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid textarea { min-height: 150px; resize: vertical; }
.form-note { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.flash { padding: 14px 18px; border-radius: 2px; margin: 0 auto 22px; max-width: 720px; font-weight: 600; }
.flash.ok { background: #ecf1e8; color: #33612e; border: 1px solid #c3d6b4; }
.flash.err { background: #f6e7e5; color: var(--danger); border: 1px solid #e0bcb6; }
/* Full width flash, used in the admin where it sits between the topbar and the panels. */
.flash-wide { max-width: none; margin-top: 26px; }

/* Info columns / FAQ */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.faq { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq h3 { margin-bottom: 8px; color: var(--purple); }
.faq p { margin-bottom: 0; }

/* Footer (deep purple, on-brand) */
.site-footer { background: var(--purple); color: #fff; padding: 56px 0 30px; border-top: 3px solid var(--gold); }
.site-footer .brand { color: #fff; }
.site-footer p { color: #fff; }
.site-footer a { color: #f5e8c8; }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.footer-grid .brand svg { height: 66px; }
.footer-grid h3 { color: #fff; font-size: 1.05rem; letter-spacing: 0.02em; }
.footer-contact p { margin-bottom: 8px; }
.footer-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); font-size: 0.76rem; color: #c8b7d6; text-align: center; line-height: 1.7; }

/* Admin ---------------------------------------------------------------------- */
.admin-panel { background: var(--white); border: 1px solid var(--line); padding: 24px 26px; margin-top: 26px; }
.admin-panel h3 { color: var(--purple); }
.admin-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.admin-inline .field { width: 220px; }
.admin-badge {
  display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); background: var(--bg-soft);
}
.admin-badge.live { border-color: #9fbf96; background: #ecf1e8; color: #33612e; }
.admin-badge.hidden { border-color: var(--line); }
.admin-badge.warn { border-color: #e0bcb6; background: #f6e7e5; color: var(--danger); }
/* Year accordion */
.admin-year { padding: 0; }
.admin-year-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 18px 26px 18px 48px; cursor: pointer; position: relative; list-style: none;
}
.admin-year-head::-webkit-details-marker { display: none; }
.admin-year-head:hover { background: var(--bg-soft); }
/* A year that is not live yet: warm cream so it stands out from the published ones. */
.admin-year.unpublished > .admin-year-head { background: #fdf1e2; }
.admin-year.unpublished > .admin-year-head:hover { background: #fbe7cf; }
.admin-year-head::before {
  content: ""; position: absolute; left: 26px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: translateY(-70%) rotate(-45deg); transition: transform .18s ease;
}
.admin-year[open] > .admin-year-head::before { transform: translateY(-30%) rotate(45deg); }
.admin-year[open] > .admin-year-head { border-bottom: 1px solid var(--line); }
.admin-year-title { font-family: var(--font-serif); font-size: 1.3rem; color: var(--purple); }
.admin-year-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-year-body { padding: 20px 26px 26px; }
.admin-hint { font-size: .8rem; color: var(--ink-soft); }

.admin-check { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.admin-check label { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; cursor: pointer; }
.admin-check input[type=checkbox] { accent-color: var(--purple); width: 16px; height: 16px; }
.admin-check input[type=checkbox]:disabled { cursor: not-allowed; }

/* Thumbnail preview grid */
.admin-thumbs { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
/* Roughly four rows deep, then scroll: a 300-photo year stays a manageable box. */
.admin-thumb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
  margin-top: 12px; max-height: min(640px, 70vh); overflow-y: auto;
  padding: 10px; border: 1px solid var(--line); background: var(--bg-soft);
  overscroll-behavior: contain; scrollbar-color: var(--purple-soft) var(--bg-lilac);
}
.admin-thumb-grid:empty { display: none; }
.admin-thumb { position: relative; border: 1px solid var(--line); background: var(--bg-lilac); padding: 4px; }
.admin-thumb:hover { border-color: var(--purple); }
.admin-thumb-link { display: block; cursor: zoom-in; }
.admin-thumb img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.admin-thumb.deleting { opacity: .35; pointer-events: none; }
/* Delete cross: always visible, since the grid is used on phones too. */
.admin-thumb-del {
  position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--danger); border-radius: 50%; background: var(--white);
  color: var(--danger); font-size: .8rem; line-height: 1; cursor: pointer; opacity: .85;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.admin-thumb-del:hover, .admin-thumb-del:focus-visible { opacity: 1; background: var(--danger); color: var(--white); }
/* Filename caption: two lines at most, so every tile stays the same height. */
.admin-thumb-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin-top: 5px; font-size: .62rem; line-height: 1.25;
  color: var(--ink-soft); text-align: center; word-break: break-all;
}
.admin-thumb:hover .admin-thumb-name { color: var(--purple); }

/* Upload modal */
.admin-modal {
  border: 1px solid var(--line); border-top: 3px solid var(--purple); border-radius: 2px;
  padding: 26px 28px 28px; width: min(620px, calc(100vw - 32px)); background: var(--white);
  color: var(--ink); box-shadow: var(--shadow);
}
.admin-modal::backdrop { background: rgba(42, 35, 51, .55); }
.admin-modal h3 { color: var(--purple); margin-bottom: 4px; }
.admin-modal-close {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: var(--ink-soft); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.admin-modal-close:hover { color: var(--purple); }
.admin-modal .admin-drop { margin-top: 18px; }

.admin-drop {
  margin-top: 16px; border: 2px dashed var(--line); background: var(--bg-soft);
  padding: 22px; text-align: center; transition: border-color .15s ease, background .15s ease;
}
.admin-drop.dragging { border-color: var(--purple); background: var(--bg-lilac); }
.admin-drop p { margin: 0 0 10px; }
.admin-progress { margin-top: 14px; background: var(--bg-lilac); border: 1px solid var(--line); height: 26px; position: relative; overflow: hidden; }
.admin-progress-bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--purple); transition: width .2s ease; }
/* Two copies of the same label, stacked and identically positioned: the dark one
   reads against the empty track, and the white one is clipped to whatever the
   bar has filled (--progress, set alongside the bar width in admin.js). */
.admin-progress span { position: absolute; inset: 0; z-index: 1; line-height: 24px; font-size: 0.78rem; color: var(--ink); }
.admin-progress-text-fill {
  color: var(--white);
  clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
  transition: clip-path .2s ease;
}

/* Statistics ----------------------------------------------------------------- */
.admin-topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.stat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.stat-tab {
  padding: 9px 16px; border: 1px solid var(--line); background: var(--white);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
}
.stat-tab:hover { border-color: var(--purple); color: var(--purple); }
.stat-tab.on { background: var(--purple); border-color: var(--purple); color: #fff; }
.stat-tab.export { margin-left: auto; border-style: dashed; }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
.stat-tile { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--purple); padding: 18px 20px; }
.stat-tile-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.stat-tile-value { display: block; font-family: var(--font-serif); font-size: 2.1rem; color: var(--purple); line-height: 1.1; margin: 6px 0 4px; }
.stat-tile-note { display: block; font-size: 0.78rem; color: var(--ink-soft); }

/* Daily activity: stacked bars, views under downloads, no chart library. */
.stat-chart {
  display: flex; align-items: flex-end; gap: 2px; height: 160px; margin-top: 14px;
  padding: 10px; border: 1px solid var(--line); background: var(--bg-soft); overflow-x: auto;
}
.stat-bar { flex: 1 1 0; min-width: 4px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.stat-bar-fill { display: block; width: 100%; min-height: 0; }
.stat-bar-fill.views { background: var(--purple-soft); }
.stat-bar-fill.dls { background: var(--gold); }
.stat-legend { display: flex; align-items: center; gap: 18px; margin-top: 10px; font-size: 0.78rem; color: var(--ink-soft); }
.stat-legend .swatch { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; }
.stat-legend .swatch.views { background: var(--purple-soft); }
.stat-legend .swatch.dls { background: var(--gold); }

.stat-scroll { overflow-x: auto; margin-top: 12px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.stat-table th, .stat-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.stat-table thead th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); font-weight: 600; }
.stat-table tbody th { font-family: var(--font-serif); font-size: 1.05rem; color: var(--purple); }
.stat-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.stat-table .num.warn { color: var(--danger); }
.stat-table tbody tr:hover { background: var(--bg-soft); }

.stat-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.stat-chip { padding: 5px 12px; border: 1px solid var(--line); font-size: 0.72rem; color: var(--ink-soft); background: var(--white); }
.stat-chip:hover { border-color: var(--purple); color: var(--purple); }
.stat-chip.on { background: var(--purple); border-color: var(--purple); color: #fff; }
.stat-subhead { margin: 22px 0 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }

.stat-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.stat-photo { margin: 0; border: 1px solid var(--line); background: var(--bg-soft); padding: 5px; }
.stat-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.stat-photo-missing {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5;
  background: var(--bg-lilac); color: var(--ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.stat-photo figcaption { padding: 8px 4px 2px; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; }
.stat-photo figcaption b { color: var(--purple); font-size: 0.95rem; }
.stat-photo figcaption span { display: block; }
.stat-photo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; opacity: 0.8; }

/* Sessions */
.stat-sessions { margin-top: 14px; border-top: 1px solid var(--line); }
.stat-session { border-bottom: 1px solid var(--line); }
.stat-session > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 8px 14px 30px; cursor: pointer; position: relative; list-style: none;
}
.stat-session > summary::-webkit-details-marker { display: none; }
.stat-session > summary:hover { background: var(--bg-soft); }
.stat-session > summary::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: translateY(-70%) rotate(-45deg); transition: transform .18s ease;
}
.stat-session[open] > summary::before { transform: translateY(-30%) rotate(45deg); }
.stat-session-when b { display: block; font-family: var(--font-serif); font-size: 1.05rem; color: var(--purple); }
.stat-session-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stat-session-nums { display: flex; gap: 16px; font-size: 0.78rem; color: var(--ink-soft); margin-left: auto; }
.stat-session-nums b { color: var(--ink); font-size: 0.95rem; }
.stat-session-body { padding: 4px 8px 20px 30px; }
.stat-session-facts code { font-size: 0.78rem; background: var(--bg-lilac); padding: 1px 5px; }

.stat-timeline { margin-top: 10px; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); background: var(--bg-soft); padding: 12px 14px; overscroll-behavior: contain; }
.stat-timeline-date { margin: 10px 0 6px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.stat-timeline-date:first-child { margin-top: 0; }
.stat-event { display: flex; align-items: center; gap: 10px; padding: 5px 0 5px 10px; border-left: 2px solid var(--line); font-size: 0.84rem; color: var(--ink); }
.stat-event-time { font-variant-numeric: tabular-nums; font-size: 0.74rem; color: var(--ink-soft); min-width: 58px; }
.stat-event-thumb { width: 34px; height: 42px; object-fit: cover; border: 1px solid var(--line); background: var(--bg-lilac); }
.stat-event-text { flex: 1; min-width: 0; }
.stat-event-download { border-left-color: var(--gold); }
.stat-event-view { border-left-color: var(--purple-soft); }
.stat-event-zip { border-left-color: var(--gold); font-weight: 600; }
.stat-event-unlock { border-left-color: #9fbf96; }
.stat-event-unlock_fail { border-left-color: var(--danger); color: var(--danger); }

.stat-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.stat-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.stat-columns .admin-panel { margin-top: 0; }
.stat-list { list-style: none; margin: 12px 0 0; padding: 0; }
.stat-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-soft); }
.stat-list li:last-child { border-bottom: 0; }
.stat-list li > span:first-child { min-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-list-bar { flex: 1; height: 7px; background: var(--bg-lilac); }
.stat-list-bar i { display: block; height: 100%; background: var(--purple-soft); }
.stat-list li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-code { background: var(--bg-lilac); border: 1px solid var(--line); padding: 14px 16px; font-size: 0.82rem; overflow-x: auto; }

/* Responsive */
@media (max-width: 820px) {
  .nav { position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 12px 24px rgba(82,28,120,.12); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 24px; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; }
  .cols, .footer-grid, .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* Phones: auto-fill columns sized for desktop collapse to a single column
     here, so the grids are pinned and the generous spacing is trimmed back. */
  .wrap { padding: 0 16px; }
  .section { padding: 48px 0; }
  .brand svg { height: 44px; }

  .hero { padding: 52px 0 56px; }
  .hero .frame-line { padding: 30px 18px; }
  .hero p { font-size: 1.05rem; }
  .lead { font-size: 1.06rem; }

  .year-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
  .year-card { padding: 8px; }
  .year-card .frame { padding: 16px 8px; }
  .year-card .yr { font-size: 2rem; }
  .year-card .lbl { font-size: 0.68rem; letter-spacing: 0.08em; }
  .year-card .lock { font-size: 0.62rem; letter-spacing: 0.08em; }

  .gate .frame { padding: 32px 20px; }
  .gallery-head { padding: 36px 0 4px; }

  /* Two photos per row, and a download bar that stays a compact three lines
     rather than four stacked full-width blocks. */
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 22px 0 60px; }
  .photo { padding: 5px; }
  .photo .pick { font-size: 0.64rem; letter-spacing: 0.06em; gap: 6px; }

  .dl-bar { padding: 10px 0; }
  .dl-bar .wrap { gap: 10px; }
  .dl-bar .actions { width: 100%; gap: 8px; }
  .dl-bar .actions .btn { flex: 1 1 0; min-width: 0; padding: 11px 6px; font-size: 0.66rem; letter-spacing: 0.06em; }
  .dl-quality { flex: 1 1 100%; justify-content: space-between; }
  .dl-quality select { flex: 1; margin-left: 10px; }

  .lightbox img { max-width: 96vw; border-width: 4px; }
  .lb-close { top: 4px; right: 8px; }

  .footer-grid .brand svg { height: 52px; }
  .site-footer { padding: 44px 0 26px; }

  /* Admin: auto-fill would only fit two 110px columns on a phone, so pin it to three. */
  .admin-year-head { padding: 16px 16px 16px 40px; }
  .admin-year-head::before { left: 18px; }
  .admin-year-title { font-size: 1.15rem; }
  .admin-year-body { padding: 18px 16px 22px; }
  .admin-thumb-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; }
  .admin-panel:not(.admin-year) { padding: 18px 16px; }
  .admin-modal { padding: 22px 18px 24px; }

  /* Statistics: tiles two-up, popular photos three-up, session rows stacked. */
  .stat-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-tile { padding: 14px 14px; }
  .stat-tile-value { font-size: 1.7rem; }
  .stat-tab { flex: 1 1 auto; text-align: center; padding: 9px 10px; font-size: 0.66rem; letter-spacing: 0.06em; }
  .stat-tab.export { margin-left: 0; flex-basis: 100%; }
  .stat-chart { height: 120px; }
  .stat-photo-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-photo figcaption { font-size: 0.7rem; }
  .stat-lb-stage { max-width: 96vw; border-width: 4px; }
  .stat-lightbox img { max-width: 96vw; max-height: calc(86vh - 78px); }
  .stat-lb-bar { padding: 8px 10px; font-size: 0.7rem; gap: 4px 12px; }
  .stat-session > summary { padding-left: 24px; gap: 8px; }
  .stat-session-nums { margin-left: 0; width: 100%; justify-content: space-between; }
  .stat-session-body { padding-left: 8px; }
  .stat-event-thumb { width: 28px; height: 34px; }
}