:root {
  --bg:        #F9F6F2;
  --surface:   #FFFFFF;
  --t1:        #1C1816;
  --t2:        #6B635E;
  --t3:        #A89F9A;
  --accent:    #B8836A;
  --accent-bg: #F4EDE8;
  --gold:      #C4A46B;
  --green:     #7AAD89;
  --red:       #C47070;
  --border:    #EAE4DE;
  --border-s:  #D6CEC7;
  --sh-xs:     0 1px 2px rgba(28,24,22,.05);
  --sh-sm:     0 2px 8px rgba(28,24,22,.07),0 1px 2px rgba(28,24,22,.04);
  --sh-xl:     0 32px 80px rgba(28,24,22,.14),0 8px 20px rgba(28,24,22,.08);
  --r:         14px;
  --r-lg:      20px;
  --pill:      9999px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--t1);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Header ──────────────────────────────────────────── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: 2rem 1.25rem 1.5rem;
  padding-top: max(2rem, calc(1.25rem + env(safe-area-inset-top)));
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-bottom: .55rem;
}

.eyebrow span {
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
}

.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 26px;
  height: 1px;
}
.eyebrow::before { background: linear-gradient(90deg,  transparent, var(--gold)); }
.eyebrow::after  { background: linear-gradient(270deg, transparent, var(--gold)); }

header h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.1;
}

header p {
  font-size: .67rem;
  color: var(--t3);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: .5rem;
}

/* ── Nav ─────────────────────────────────────────────── */
nav {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

nav button {
  flex: 1;
  padding: .9rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font: 500 .7rem/1 'Inter', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t3);
  transition: color .2s;
  position: relative;
  min-height: 44px;
}

nav button::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: var(--t1);
  transform: scaleX(0);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}

nav button.active         { color: var(--t1); }
nav button.active::after  { transform: scaleX(1); }

/* ── Admin bar ───────────────────────────────────────── */
#admin-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .5rem 1rem;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--border);
  font-size: .7rem;
  color: var(--t2);
}
#admin-bar[hidden] { display: none; }
#admin-bar button {
  padding: .35rem .8rem;
  min-height: 32px;
  background: var(--t1);
  color: #fff;
  border: none;
  border-radius: var(--pill);
  font: 500 .68rem/1 'Inter', sans-serif;
  cursor: pointer;
}

/* ── Views ───────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }

/* ── Upload view ─────────────────────────────────────── */
#upload-view {
  padding: 1.75rem 1rem 3rem;
  max-width: 460px;
  margin: 0 auto;
}

.drop-zone {
  background: var(--surface);
  border: 1.5px dashed var(--border-s);
  border-radius: var(--r-lg);
  padding: 3.5rem 2rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}

/* warm ambient glow */
.drop-zone::before {
  content: '';
  position: absolute;
  top: -70px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(196,164,107,.08) 0%, transparent 70%);
  pointer-events: none;
}

.drop-zone:hover, .drop-zone.over {
  border-color: var(--accent);
  background: var(--accent-bg);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm), 0 0 0 4px rgba(184,131,106,.1);
}

.dz-icon {
  width: 66px; height: 66px;
  background: var(--accent-bg);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 1.2rem;
  box-shadow: var(--sh-xs);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.drop-zone:hover .dz-icon { transform: scale(1.1) rotate(-5deg); }

.drop-zone h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: .35rem;
}

.drop-zone .hint { font-size: .75rem; color: var(--t3); }

#file-input { display: none; }

.btn-up {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.75rem;
  padding: .8rem 1.875rem;
  background: var(--t1);
  color: #fff;
  border: none;
  border-radius: var(--pill);
  font: 500 .72rem/1 'Inter', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  min-height: 44px;
  transition: background .18s, transform .15s, box-shadow .18s;
}

.btn-up:hover {
  background: #2C2420;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(28,24,22,.18), 0 2px 6px rgba(28,24,22,.1);
}

/* ── Upload queue ────────────────────────────────────── */
#upload-queue {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.q-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .65rem .875rem;
  box-shadow: var(--sh-xs);
  animation: fade-up .22s ease both;
}

@keyframes fade-up {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}

.q-thumb {
  width:44px; height:44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.q-info { flex:1; min-width:0; }

.q-name {
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prog-bar {
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  margin-top: .45rem;
  overflow: hidden;
}

.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: 1px;
  transition: width .2s ease;
}

.q-status { font-size:.68rem; color:var(--t3); margin-top:.2rem; }
.q-status.ok  { color:var(--green); }
.q-status.err { color:var(--red);   }

/* ── Gallery ─────────────────────────────────────────── */
#gallery-view { padding-bottom: max(4rem, env(safe-area-inset-bottom)); }

.block { margin-top: 2.25rem; }
.block:first-child { margin-top: 1.5rem; }

.block-header {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: 0 1rem .875rem;
}

.block-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
}

.block-time {
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.block-rule { flex:1; height:1px; background:var(--border); align-self:center; }

.block-count { font-size:.63rem; color:var(--t3); letter-spacing:.04em; }

/* ── Editorial grid ──────────────────────────────────── */
/*
  12-column grid. Slot pattern (rows sum to 12):
    0  → span 12  16:9   hero
    1  → span  6  3:4    half
    2  → span  6  3:4    half
    3  → span  8  4:3    wide
    4  → span  4  3:4    thin
    5  → span  4  3:4    thin
    6  → span  8  4:3    wide
    7  → span  4  1:1    square
    8  → span  4  1:1    square
    9  → span  4  1:1    square
   10  → span 12  21:9   cinematic
   11  → span  6  4:5    tall half
   12  → span  6  4:5    tall half
*/
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}

/* slot classes used by JS */
.s-hero  { grid-column:span 12; aspect-ratio:16/9;  }
.s-half  { grid-column:span  6; aspect-ratio:3/4;   }
.s-wide  { grid-column:span  8; aspect-ratio:4/3;   }
.s-thin  { grid-column:span  4; aspect-ratio:3/4;   }
.s-sq    { grid-column:span  4; aspect-ratio:1;     }
.s-film  { grid-column:span 12; aspect-ratio:21/9;  }
.s-tall  { grid-column:span  6; aspect-ratio:4/5;   }

/* ── Photo cell ──────────────────────────────────────── */
.photo {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--border);
  transition: transform .28s ease, opacity .28s ease;
}

.photo img {
  width:100%; height:100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}

.photo:hover img,
.photo:active img { transform: scale(1.06); }

.photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(18,14,12,.62) 0%,
    rgba(18,14,12,.08) 38%,
    transparent 65%);
  opacity: 0;
  transition: opacity .3s;
}

.photo:hover .photo-scrim { opacity:1; }

.photo-ts {
  position: absolute;
  bottom: 10px; left: 10px;
  color: rgba(255,255,255,.9);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s, transform .3s;
}

.photo:hover .photo-ts { opacity:1; transform:translateY(0); }

/* ── Delete button (own photos only) ─────────────────── */
.photo-del {
  position: absolute;
  top: 7px; right: 7px;
  width: 30px; height: 30px;
  min-width: 30px;
  background: rgba(12,10,8,.42);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity .2s, background .2s, transform .15s;
  padding: 0;
}

/* always slightly visible on touch devices */
@media (hover: none) {
  .photo.mine .photo-del { opacity: .55; }
}

.photo.mine:hover .photo-del { opacity: .7; }
.photo-del:hover  { background: rgba(185,60,60,.75) !important; opacity: 1 !important; transform: scale(1.1); }

/* ── Delete confirmation overlay ─────────────────────── */
.del-confirm {
  position: absolute;
  inset: 0;
  background: rgba(14,11,9,.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  z-index: 20;
  animation: cfm-in .15s ease;
}

@keyframes cfm-in {
  from { opacity:0; }
  to   { opacity:1; }
}

.del-confirm p {
  color: rgba(255,255,255,.88);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-align: center;
  line-height: 1.4;
}

.del-actions { display:flex; gap:.45rem; }

.del-yes {
  padding: .42rem .95rem;
  background: rgba(185,60,60,.8);
  border: 1px solid rgba(220,100,100,.3);
  border-radius: var(--pill);
  color: #fff;
  font-size: .7rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 34px;
  transition: background .15s;
}

.del-yes:hover { background: rgba(200,60,60,.9); }

.del-no {
  padding: .42rem .95rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--pill);
  color: rgba(255,255,255,.8);
  font-size: .7rem;
  cursor: pointer;
  min-height: 34px;
  transition: background .15s;
}

.del-no:hover { background: rgba(255,255,255,.18); }

/* ── Deletion animation ───────────────────────────────── */
.photo--out {
  transform: scale(.82) !important;
  opacity: 0 !important;
}

/* ── Empty ───────────────────────────────────────────── */
.empty { text-align:center; padding:5rem 1rem; }

.empty-icon {
  width:64px; height:64px;
  background:var(--accent-bg);
  border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem;
  margin:0 auto 1.25rem;
}

.empty h3 {
  font-family:'Cormorant Garamond', serif;
  font-size:1.4rem; font-weight:400;
  margin-bottom:.35rem;
}

.empty p { font-size:.78rem; color:var(--t3); }

/* ── Spinner ─────────────────────────────────────────── */
.spinner {
  width:26px; height:26px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin:4rem auto;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Per-cell download button ───────────────────────────── */
.photo-dl {
  position: absolute;
  bottom: 7px; right: 7px;
  width: 30px; height: 30px;
  background: rgba(12,10,8,.42);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity .2s, background .2s, transform .15s;
  padding: 0;
}

@media (hover: none) { .photo .photo-dl { opacity: .55; } }
.photo:hover .photo-dl { opacity: .7; }
.photo-dl:hover { background: rgba(28,24,22,.7) !important; opacity: 1 !important; transform: scale(1.1); }

/* ── Toast ───────────────────────────────────────────── */
#toast {
  position:fixed;
  bottom:max(1.5rem, env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%) translateY(64px);
  background:var(--t1);
  color:rgba(255,255,255,.88);
  padding:.6rem 1.1rem;
  border-radius:var(--pill);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.02em;
  box-shadow:var(--sh-xl);
  transition:transform .36s cubic-bezier(.34,1.56,.64,1);
  z-index:200;
  pointer-events:none;
  white-space:nowrap;
}

#toast.show { transform:translateX(-50%) translateY(0); }

/* ══ Self-hosted additions ══════════════════════════════════ */

/* Nav items can be links to other pages */
nav a {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: .9rem 1rem;
  min-height: 44px;
  font: 500 .7rem/1 'Inter', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t3);
  text-decoration: none;
  position: relative;
  transition: color .2s;
}
nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: var(--t1);
  transform: scaleX(0);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
nav a.active, nav a:hover { color: var(--t1); }
nav a.active::after { transform: scaleX(1); }

#admin-bar a { color: var(--t1); font-weight: 500; }

/* ── Home: slideshow call to action ───────────────────────── */
.show-cta {
  text-align: center;
  padding: 2rem 1rem .5rem;
}
.show-cta .count {
  font-size: .68rem;
  color: var(--t3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .9rem;
}
.btn-up.btn-play { margin-top: 0; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1.25rem;
  padding: .7rem 1.4rem;
  min-height: 44px;
  border: 1px solid var(--border-s);
  border-radius: var(--pill);
  color: var(--t1);
  font: 500 .7rem/1 'Inter', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--surface);
}

/* ── Admin page ───────────────────────────────────────────── */
.admin-wrap { max-width: 460px; margin: 0 auto; padding: 1.75rem 1rem 3rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--sh-xs);
  margin-bottom: 1rem;
}
.card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 400;
  margin-bottom: .6rem;
}
.card p, .card li { font-size: .8rem; color: var(--t2); line-height: 1.55; }
.card ul { padding-left: 1.1rem; margin-top: .4rem; }
.card code { font-size: .74rem; background: var(--accent-bg); padding: .1rem .3rem; border-radius: 4px; }
.field {
  width: 100%;
  margin: .8rem 0;
  padding: .75rem .9rem;
  min-height: 44px;
  border: 1px solid var(--border-s);
  border-radius: var(--r);
  font: 400 .9rem 'Inter', sans-serif;
  background: var(--bg);
}
.seg { display: flex; gap: .4rem; margin: .4rem 0 .2rem; }
.seg label {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem; min-height: 44px;
  border: 1px solid var(--border-s);
  border-radius: var(--r);
  font-size: .75rem; cursor: pointer;
}
.seg input { accent-color: var(--accent); }
.err-text { color: var(--red); font-size: .75rem; min-height: 1.1em; }

/* ── PhotoSwipe theming ───────────────────────────────────── */
.pswp { --pswp-bg: #0C0A08; }
.pswp__custom-caption {
  position: absolute;
  left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  color: rgba(255,255,255,.55);
  font: 500 .66rem/1.3 'Inter', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.pswp__button--download,
.pswp__button--play {
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.pswp__button--download svg,
.pswp__button--play svg { width: 20px; height: 20px; opacity: .85; }
.pswp__progress {
  position: absolute; left: 0; top: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  pointer-events: none;
}
.pswp__progress.run { width: 100%; transition: width linear; }