/* House of Edwards — client galleries.
   Tokens lifted from her live site via ~/Desktop/wedding-photo-demo/assets/site.css.
   Nothing modern enough to trouble Safari 15.2. */

:root {
  --ink: #414141;
  --ink-mid: #6f6f6f;
  --ink-soft: #9a9a9a;
  /* Her brand mark, sampled from her own burgundy artwork (2 Sep 2026).
     Replaced the champagne taken off the older site. --gold/--gold-deep keep
     their names so nothing downstream has to change, but they are now the
     burgundy: one place to edit if the brand moves again. */
  --gold: #69131b;        /* her wordmark's own ink, measured off the logo */
  --gold-deep: #4e0e14;
  --gold-soft: #c9a3a3;
  --paper: #ffffff;
  --paper-warm: #faf8f5;
  --paper-dim: #f2eee8;
  --line: rgba(65, 65, 65, .14);
  --ff-display: "Josefin Sans", "Century Gothic", sans-serif;
  --ff-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --photo-gap: .8rem;
}

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

/* Must sit above every display rule below. A class like .gate { display: flex }
   beats the browser's own [hidden] rule, which silently rendered the password
   panel, the closed notice and the gallery all at once — and pushed every
   photograph below the lazy-loading margin so none of them ever loaded. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper-warm);
  color: var(--ink);
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: #fff; }

.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;
}

.eyebrow, .label, .btn, h1, h2 {
  font-family: var(--ff-display);
  font-weight: 300;
  text-transform: uppercase;
}

.eyebrow {
  font-size: .7rem; letter-spacing: .42em; color: var(--ink-mid);
  margin: 0 0 1.4rem;
}

h1 {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  letter-spacing: .18em; line-height: 1.3; margin: 0;
}

.label { font-size: .68rem; letter-spacing: .26em; color: var(--ink-mid); }

.btn {
  font-size: .68rem; letter-spacing: .26em;
  border: 1px solid var(--ink); color: var(--ink);
  padding: .85em 1.9em; background: none;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-quiet { border-color: var(--line); color: var(--ink-mid); }
.btn-quiet:hover { background: none; border-color: var(--ink); color: var(--ink); }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ---------- gate ---------- */

.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--gut); }
.gate-inner { max-width: 30rem; text-align: center; }
.gate .brand img { height: clamp(52px, 7.5vw, 88px); margin-bottom: 2.4rem; }
.gate-note { color: var(--ink-mid); margin: 1.6rem 0 2.4rem; }
.gate h1 { font-size: clamp(1.15rem, .95rem + 1.2vw, 1.7rem); }   /* the mark leads, not the heading */
#gate-form { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
#gate-pw {
  font: inherit; flex: 1 1 14rem; min-width: 0;
  padding: .85em 1.2em; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  letter-spacing: .06em;
}
#gate-pw:focus { outline: none; border-color: var(--gold-deep); }
.gate-error { color: #a4443f; font-size: .9rem; margin-top: 1.4rem; }

/* ---------- masthead ---------- */

.masthead { padding: clamp(3rem, 8vw, 6rem) var(--gut) clamp(2rem, 5vw, 3.5rem); text-align: center; }

/* Her wordmark. Sized by height so a wide logo never dominates the couple's
   names, which are the actual subject of the page. */
.brand { display: block; margin: 0 auto clamp(2rem, 5vw, 3rem); }
.brand img { height: clamp(46px, 7vw, 78px); width: auto; margin: 0 auto; }
.masthead .eyebrow, .foot .eyebrow, .gate .eyebrow { display: none; }  /* the mark replaces the text lockup */
/* ...unless the image fails to load, in which case the words come back rather
   than leaving the page unbranded. */
.no-logo .masthead .eyebrow, .no-logo .foot .eyebrow, .no-logo .gate .eyebrow { display: block; }
.foot .brand img { height: clamp(34px, 4.5vw, 46px); opacity: .75; }
.date { font-family: var(--ff-display); letter-spacing: .3em; font-size: .72rem; color: var(--ink-soft); margin: 1.2rem 0 0; text-transform: uppercase; }
.message { max-width: 34rem; margin: 2.2rem auto 0; color: var(--ink-mid); }

/* ---------- bar ---------- */

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem var(--gut);
  background: rgba(250, 248, 245, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar-left { display: flex; align-items: center; gap: .7rem; }
.bar-right { display: flex; align-items: center; gap: .6rem; }
.dot { color: var(--ink-soft); }

.expiry-note, .empty {
  text-align: center; color: var(--ink-mid); font-size: .9rem;
  padding: 1.2rem var(--gut) 0; margin: 0;
}
.expiry-note.is-soon { color: var(--gold); }

.downloads { padding: 1rem var(--gut) 0; text-align: center; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- grid ---------- */

/* Justified rows, the way a photographer's gallery should sit: every row fills
   the width exactly, and each photograph keeps its own proportions. A plain
   grid left ragged gaps wherever a portrait met a landscape. Widths are worked
   out in gallery.js from the dimensions stored at upload. */

.grid { padding: clamp(1.5rem, 4vw, 3rem) var(--gut) clamp(3rem, 8vw, 6rem); }

.grid-row { display: flex; gap: var(--photo-gap, .8rem); margin-bottom: var(--photo-gap, .8rem); }
.grid-row:last-child { margin-bottom: 0; }

.tile {
  position: relative; margin: 0; overflow: hidden;
  background: var(--paper-dim);
  cursor: zoom-in;
  flex: 0 0 auto;
}
/* Space is reserved from the real dimensions, so the page never jumps while
   full-resolution files arrive. */
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s var(--ease);
}
.tile img.is-in { opacity: 1; }

.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--paper-dim) 30%, #eae4da 50%, var(--paper-dim) 70%);
  background-size: 220% 100%;
  animation: sheen 1.9s linear infinite;
  opacity: 1; transition: opacity .6s var(--ease); pointer-events: none;
}
.tile.is-loaded::after { opacity: 0; animation: none; }
@keyframes sheen { to { background-position: -120% 0; } }

.tile-fav {
  position: absolute; right: .55rem; bottom: .55rem; z-index: 2;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .82); color: var(--ink-soft);
  font-size: 1rem; line-height: 1;
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.tile:hover .tile-fav, .tile-fav.is-on { opacity: 1; transform: none; }
.tile-fav.is-on { color: var(--gold-deep); }
@media (hover: none) { .tile-fav { opacity: 1; transform: none; } }

/* ---------- lightbox ---------- */

.lb {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(28, 28, 28, .96);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lb[hidden] { display: none; }
.lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 1rem; }
.lb-figure img {
  max-width: 100%; max-height: 82vh; object-fit: contain; margin: 0 auto;
  opacity: 0; transition: opacity .5s var(--ease);
}
.lb-figure img.is-in { opacity: 1; }
.lb-cap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.lb-cap .label { color: rgba(255, 255, 255, .55); }
.lb-actions { display: flex; gap: .6rem; }
.lb .btn { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .85); }
.lb .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.lb .btn.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }

.lb-close, .lb-nav {
  position: absolute; z-index: 2; color: rgba(255, 255, 255, .7);
  transition: color .3s var(--ease);
}
.lb-close:hover, .lb-nav:hover { color: #fff; }
.lb-close { top: .8rem; right: 1.2rem; font-size: 2.4rem; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 3rem; line-height: 1; padding: 1rem; }
.lb-prev { left: .2rem; }
.lb-next { right: .2rem; }

.lb-loading { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); }
.lb-loading span {
  display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); border-top-color: rgba(255, 255, 255, .8);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- foot ---------- */

.foot { padding: clamp(3rem, 7vw, 5rem) var(--gut); text-align: center; border-top: 1px solid var(--line); }
.foot .eyebrow { margin-bottom: .8rem; }
.foot-note { color: var(--ink-soft); font-size: .84rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}