:root {
  --bg: #f4ebdf;
  --bg-soft: #eadbca;
  --ink: #492529;
  --ink-soft: #826d65;
  --accent: #5b272b;
  --accent-dark: #3b171b;
  --accent-soft: #8e555a;
  --line: rgba(91, 39, 43, .25);
  --white: #fbf7f1;
  --ok: #547054;
  --err: #a13f45;
  --serif: "Cormorant Garamond", Georgia, serif;
  --body: "EB Garamond", Georgia, serif;
  --script: "Dancing Script", cursive;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--body);
  font-size: clamp(1rem, 1rem + .2vw, 1.12rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bg) url("/assets/fabric-bg.webp") center / cover no-repeat;
  opacity: .58;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(249, 243, 235, .34);
  pointer-events: none;
}
body.lightbox-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.back-link {
  position: fixed;
  top: max(1.2rem, env(safe-area-inset-top));
  left: max(1.2rem, env(safe-area-inset-left));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(251, 247, 241, .76);
  backdrop-filter: blur(10px);
  font-size: .85rem;
  letter-spacing: .05em;
  transition: color .2s, border-color .2s, background .2s;
}
.back-link:hover { color: var(--accent); border-color: var(--accent); background: var(--white); }

.album-hero {
  position: relative;
  padding: clamp(4.5rem, 11vw, 7rem) var(--pad) clamp(2rem, 6vw, 4rem);
  text-align: center;
  overflow: hidden;
}
.album-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 180px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.hero-eyebrow {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.hero-title {
  margin: 0 0 .4rem;
  color: var(--ink);
  font: 500 clamp(2.2rem, 1.5rem + 3.5vw, 4rem)/1 var(--serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-script {
  display: block;
  margin: 0 0 1.6rem;
  color: var(--accent);
  font: 600 clamp(1.5rem, 1.05rem + 2.5vw, 2.5rem)/1.2 var(--script);
}
.hero-desc {
  max-width: 44ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(.95rem, .85rem + .4vw, 1.05rem);
}

.divider {
  max-width: 280px;
  margin: clamp(2rem, 5vw, 3.5rem) auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--accent);
}
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.divider__leaf {
  width: 26px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 28' fill='none' stroke='%235b272b' stroke-width='1.4'%3E%3Cpath d='M26 4 V24'/%3E%3Cpath d='M26 9 C20 7 14 9 11 13 C16 15 22 14 26 11Z' fill='%238e555a' fill-opacity='.45'/%3E%3Cpath d='M26 9 C32 7 38 9 41 13 C36 15 30 14 26 11Z' fill='%238e555a' fill-opacity='.45'/%3E%3Cpath d='M26 15 C21 13 16 15 13 18 C17 20 22 19 26 17Z' fill='%238e555a' fill-opacity='.45'/%3E%3Cpath d='M26 15 C31 13 36 15 39 18 C35 20 30 19 26 17Z' fill='%238e555a' fill-opacity='.45'/%3E%3C/svg%3E") no-repeat center / contain;
}

.album-main { max-width: 760px; margin: 0 auto; padding: 0 var(--pad) clamp(4rem, 10vw, 7rem); }
.section-title {
  margin: 0 0 1.4rem;
  color: var(--ink);
  text-align: center;
  font: 500 clamp(1.3rem, 1rem + 1.4vw, 2rem)/1.2 var(--serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.name-block { margin-bottom: 2rem; }
.field-label {
  display: block;
  margin-bottom: .45rem;
  color: var(--ink-soft);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.field {
  width: 100%;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(251, 247, 241, .76);
  backdrop-filter: blur(8px);
  font-family: var(--body);
  font-size: 1.05rem;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 39, 43, .11); }
.field::placeholder { color: rgba(130, 109, 101, .55); }

.upload-zone {
  position: relative;
  margin-bottom: 1.6rem;
  padding: clamp(2rem, 6vw, 3.5rem) var(--pad);
  border: 2px dashed var(--line);
  border-radius: 20px;
  text-align: center;
  background: rgba(251, 247, 241, .5);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .2s;
}
.upload-zone:hover, .upload-zone.is-dragging { border-color: var(--accent); background: rgba(91, 39, 43, .055); transform: scale(1.01); }
.upload-zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-icon { display: block; margin-bottom: .9rem; font-size: 2.8rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(91, 39, 43, .2)); }
.upload-zone h2 { margin: 0 0 .5rem; color: var(--ink); font: 500 clamp(1.2rem, 1rem + 1vw, 1.6rem)/1.2 var(--serif); letter-spacing: .06em; }
.upload-zone p { margin: 0 0 1.4rem; color: var(--ink-soft); font-size: .95rem; }
.upload-btn {
  display: inline-block;
  padding: .7rem 1.8rem;
  border-radius: 999px;
  color: var(--white);
  background: var(--accent);
  font-size: 1rem;
  letter-spacing: .06em;
  pointer-events: none;
  transition: background .2s;
}
.upload-zone:hover .upload-btn { background: var(--accent-dark); }

.file-preview { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.file-thumb { position: relative; width: 72px; height: 72px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.file-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.file-thumb button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(59, 23, 27, .78); font-size: .7rem; line-height: 1; cursor: pointer; }
.file-count { min-height: 1.2em; margin: 0 0 1rem; color: var(--ink-soft); text-align: center; font-size: .88rem; }
.progress[hidden] { display: none; }
.progress { margin-bottom: 1.6rem; }
.progress > div { height: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.progress span { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transition: width .3s; }
.progress p { margin: .5rem 0 0; color: var(--ink-soft); text-align: center; font-size: .88rem; }
.upload-submit {
  display: block;
  width: 100%;
  margin-bottom: .8rem;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 999px;
  color: var(--white);
  background: var(--accent);
  font-family: var(--body);
  font-size: 1.1rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .25s, transform .2s;
}
.upload-submit:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-2px); }
.upload-submit:disabled { opacity: .5; cursor: default; transform: none; }
.form-status { min-height: 1.4em; margin: 0 0 .5rem; text-align: center; font-size: .95rem; }
.form-status.ok { color: var(--ok); }
.form-status.error { color: var(--err); }
.upload-note { margin: 0; color: var(--ink-soft); text-align: center; font-size: .82rem; }

.gallery-section { margin-top: clamp(3rem, 8vw, 5rem); }
.gallery-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.gallery-header .section-title { margin: 0; }
.gallery-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gallery-search-wrap { position: relative; display: flex; align-items: center; }
.gallery-search {
  width: 0;
  padding: .38rem 0;
  border: 1px solid transparent;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  color: var(--ink);
  background: rgba(251, 247, 241, .8);
  font-family: var(--body);
  font-size: .9rem;
  transition: width .3s, opacity .3s, padding .3s, border-color .2s;
}
.gallery-search.open { width: 160px; padding: .38rem .9rem .38rem 2rem; border-color: var(--line); opacity: 1; pointer-events: auto; }
.gallery-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 39, 43, .1); }
.search-icon { position: absolute; left: .7rem; color: var(--ink-soft); opacity: 0; pointer-events: none; transition: opacity .2s; }
.gallery-search.open + .search-icon { opacity: 1; }
.gallery-refresh { padding: .4rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: transparent; font-family: var(--body); font-size: .9rem; cursor: pointer; transition: color .2s, border-color .2s; }
.gallery-refresh:hover { color: var(--accent); border-color: var(--accent); }
.gallery-count { min-height: 1.3em; margin: 0 0 .8rem; color: var(--ink-soft); text-align: right; font-size: .9rem; letter-spacing: .04em; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: clamp(.6rem, 2vw, 1rem); }
.gallery-item {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
.gallery-item:hover { transform: scale(1.03); box-shadow: 0 10px 30px rgba(59, 23, 27, .14); }
.gallery-item img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gallery-item span { position: absolute; right: 0; bottom: 0; left: 0; padding: 1.4rem .6rem .4rem; color: #fff; background: linear-gradient(transparent, rgba(59, 23, 27, .68)); text-align: left; font-size: .75rem; letter-spacing: .04em; opacity: 0; transition: opacity .2s; }
.gallery-item:hover span { opacity: 1; }
.gallery-empty { grid-column: 1 / -1; padding: 3rem 1rem; color: var(--ink-soft); text-align: center; }
.skeleton { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(90deg, var(--bg-soft) 25%, rgba(91, 39, 43, .12) 50%, var(--bg-soft) 75%); background-size: 600px 100%; animation: shimmer 1.6s infinite; }
@keyframes shimmer { to { background-position: 600px 0; } }

.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(59, 23, 27, .92); backdrop-filter: blur(10px); }
.lightbox__inner { position: relative; max-width: min(90vw, 900px); max-height: 90svh; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.lightbox__img { max-width: 100%; max-height: 80svh; display: block; border-radius: 12px; object-fit: contain; }
.lightbox__caption { margin: 0; color: rgba(251, 247, 241, .8); text-align: center; font-size: .9rem; letter-spacing: .04em; }
.lightbox__close { position: absolute; top: -2.5rem; right: 0; border: 0; color: var(--white); background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; opacity: .75; }
.lightbox__download { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.3rem; border-radius: 999px; color: var(--white); background: var(--accent-soft); font-size: .9rem; letter-spacing: .05em; }
.toast { position: fixed; bottom: 2rem; left: 50%; z-index: 20000; padding: .75rem 1.6rem; border-radius: 999px; color: var(--white); background: var(--accent-dark); box-shadow: 0 8px 24px rgba(46, 42, 36, .3); font-size: .95rem; letter-spacing: .04em; white-space: nowrap; transform: translateX(-50%) translateY(160%); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.toast.is-visible { transform: translateX(-50%) translateY(0); }

@media (max-width: 480px) {
  .album-hero { padding-top: 6.2rem; }
  .hero-eyebrow { font-size: .68rem; letter-spacing: .23em; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-header { align-items: flex-start; }
  .gallery-actions { width: 100%; justify-content: flex-end; }
  .gallery-search.open { width: min(42vw, 150px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }