/* ============================================================
   UnoSei — Category gallery
   Tasteful, uncropped masonry with "almost infinite" scroll.
   ============================================================ */

/* ---- category hero ---- */
.g-hero{ position:relative; padding:190px 0 70px; text-align:center; }
.g-hero .eyebrow{ margin-bottom:26px; }
.g-hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(48px,8vw,104px);
  line-height:1.0; letter-spacing:-.015em; margin:0; }
.g-hero h1 em{ font-style:italic; font-weight:400; }
.g-hero .lead{ max-width:52ch; margin:30px auto 0; color:var(--ink-soft); font-size:16px; line-height:1.8; }
.g-hero .meta{ margin-top:34px; font-family:var(--sans); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-faint); display:flex; gap:14px; justify-content:center; align-items:center; }
.g-hero .meta .dot{ width:4px; height:4px; background:var(--stone); border-radius:50%; }

/* in-section sub-collection toggle (e.g. The Wedding / Prewedding) */
.g-filter{ display:inline-flex; gap:4px; margin:38px auto 0; padding:5px;
  background:rgba(110,122,102,.07); border:1px solid var(--line); border-radius:999px; }
.g-filter-btn{ font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); background:transparent; border:none; border-radius:999px;
  padding:12px 26px; cursor:pointer; transition:color .4s ease, background .5s cubic-bezier(.2,.7,.2,1);
  white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.g-filter-btn:hover:not(.active){ color:var(--ink); }
.g-filter-btn.active{ background:var(--sage-deep); color:var(--bone); box-shadow:0 10px 24px -16px rgba(68,78,63,.9); }
.cat-dark .g-filter{ background:rgba(244,241,234,.08); border-color:rgba(244,241,234,.2); }
.cat-dark .g-filter-btn{ color:rgba(244,241,234,.6); }
.cat-dark .g-filter-btn:hover:not(.active){ color:var(--bone); }
.cat-dark .g-filter-btn.active{ background:var(--bone); color:var(--sage-deep); }

/* ---- masonry block (whole photos, even columns, never cropped) ---- */
.g-mason{ max-width:1340px; margin:0 auto; padding:0 56px;
  column-count:3; column-gap:26px; }
.gap-xl{ margin-top:90px; }
.gap-l{ margin-top:64px; }

.gi{ margin:0 0 26px; position:relative; overflow:hidden; break-inside:avoid; display:block; }
/* real photographs are shown WHOLE — never cropped */
.gi img{ display:block; width:100%; height:auto; transition:transform 1.4s cubic-bezier(.2,.7,.2,1); }
.gi:hover img{ transform:scale(1.035); }
.gi figcaption{ position:absolute; right:10px; bottom:9px; z-index:3; font-family:var(--sans);
  font-size:8.5px; letter-spacing:.08em; text-transform:lowercase; color:#fff;
  opacity:.2; transition:opacity .3s; }

/* ---- quote interlude ---- */
.g-quote{ max-width:760px; margin-left:auto; margin-right:auto; padding:40px 32px; text-align:center; }
.g-quote .qmark{ font-family:var(--serif); font-size:72px; line-height:.6; color:var(--sage-mist); }
.g-quote blockquote{ font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(24px,3vw,38px); line-height:1.3; color:var(--ink); margin:14px 0 0; letter-spacing:-.01em; }
.g-quote .qby{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sage); margin-top:24px; }

/* sentinel that triggers the next batch */
.g-sentinel{ width:100%; height:1px; }

/* ---- end CTA ---- */
.g-end{ text-align:center; padding:130px 24px 150px; }
.g-end .eyebrow{ margin-bottom:22px; }
.g-end h2{ font-family:var(--serif); font-weight:300; font-size:clamp(32px,4vw,52px);
  line-height:1.08; margin:0 0 30px; letter-spacing:-.01em; }
.g-end h2 em{ font-style:italic; }
.g-end .acts{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.to-top{ display:inline-flex; flex-direction:column; align-items:center; gap:10px; margin:46px auto 0;
  padding:6px 18px; background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); transition:color .35s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.to-top::before{ content:""; width:1px; height:30px; background:linear-gradient(var(--stone), transparent); transition:height .4s cubic-bezier(.2,.7,.2,1); }
.to-top:hover{ color:var(--ink); }
.to-top:hover::before{ height:40px; }
.cat-dark .to-top{ color:rgba(244,241,234,.6); }
.cat-dark .to-top::before{ background:linear-gradient(rgba(244,241,234,.6), transparent); }
.cat-dark .to-top:hover{ color:var(--bone); }

/* ---- dark category (boudoir) ---- */
.cat-dark{ background:var(--sage-deep); color:var(--bone); }
.cat-dark .eyebrow{ color:var(--sage-mist); }  /* legible on the dark ground */
.cat-dark .g-hero h1{ color:var(--bone); }
.cat-dark .g-hero .lead{ color:rgba(244,241,234,.74); }
.cat-dark .g-hero .meta{ color:rgba(244,241,234,.5); }
.cat-dark .g-quote blockquote{ color:var(--bone); }
.cat-dark .g-quote .qmark{ color:rgba(244,241,234,.25); }
.cat-dark .g-end h2{ color:var(--bone); }
.cat-dark .btn-line{ color:var(--bone); border-color:rgba(244,241,234,.6); }
.cat-dark .btn-line:hover{ background:var(--bone); color:var(--sage-deep); border-color:var(--bone); }

/* ---- responsive ---- */
@media (max-width:1100px){
  .g-mason{ column-count:3; column-gap:20px; padding:0 32px; }
  .gi{ margin-bottom:20px; }
}
@media (max-width:900px){
  .g-hero{ padding:140px 0 44px; }
  .g-filter{ margin-top:30px; }
  .g-filter-btn{ display:inline-flex; align-items:center; min-height:44px; padding:0 20px;
    font-size:10.5px; letter-spacing:.16em; }  /* >=44px touch target */
  .g-mason{ column-count:2; column-gap:14px; padding:0 18px; }
  .gi{ margin-bottom:14px; }
  .gap-xl{ margin-top:48px; }
  .gap-l{ margin-top:36px; }
  .gi figcaption{ opacity:.25; }
  .g-quote{ padding:24px 14px; }
  .g-end{ padding:80px 22px 96px; }
  .g-end .acts{ flex-direction:column; align-items:stretch; max-width:300px; margin:0 auto; }
}
@media (max-width:480px){
  .g-mason{ column-count:1; }
}