/* ============================================================
   DONATELLA LIGUORI — sections.css
   Single-gallery homepage (Clover-calibrated spacing) +
   data-driven About overlay + responsive + reduced-motion.

   Geometry calibrated on the reference (not copied):
     · image box ≈ 47% of viewport width, centred, with equal
       generous white margins (~26% per side);
     · box sits slightly above the optical centre;
     · tiny counter bottom-left, centred copyright below.
   ============================================================ */

/* =========================================================
   THE GALLERY — one image at a time
   ========================================================= */

.stage{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 2vh) 0 12vh;
}

/* the plate + its caption, centred as one group */
.stage__wrap{
  display:flex; flex-direction:column; align-items:center;
  margin-top:-4vh;                 /* optical lift, like the reference */
}

.stage__frame{
  position:relative;
  width:min(56vw, 1160px);         /* medium — the default */
  height:min(60vh, 42vw, 870px);
  touch-action:manipulation;       /* no double-tap zoom on rapid taps */
}
/* plate size — set from the admin (small / medium / large) */
.stage[data-plate="small"] .stage__frame{ width:min(46.9vw, 980px); height:min(52vh, 36vw, 740px); }
.stage[data-plate="large"] .stage__frame{ width:min(68vw, 1420px); height:min(74vh, 51vw, 1060px); }

/* each plate (image or video) is centred inside the box;
   off-ratio plates leave calm white space instead of cropping */
.stage__frame img,
.stage__frame video{
  position:absolute; inset:0; margin:auto;
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  opacity:0;
  transition:opacity .55s var(--ease-out);
}
.stage__frame img.on,
.stage__frame video.on{ opacity:1; }

/* first plate settles in when the loader lifts */
body.is-ready .stage__frame img.enter,
body.is-ready .stage__frame video.enter{
  animation:mediaIn 1.5s var(--ease-out) both;
}

/* empty state */
.stage__empty{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0 8%;
  color:var(--burgundy);
}
.stage__empty a{ color:var(--ink); border-bottom:1px solid var(--burgundy); padding-bottom:2px; }

/* caption — small line under the plate, only the filled parts */
.stage__cap{
  margin-top:2.8vh; min-height:15px;
  max-width:min(56vw, 1160px);
  text-align:center; line-height:1.9;
  opacity:0; transition:opacity .5s var(--ease-out);
}
body.is-ready .stage__cap.on{ opacity:1; }
html:not(.js) .stage__cap.on{ opacity:1; }
.cap__main{ color:var(--ink); }
.cap__desc{ color:var(--muted-2); }
.stage[data-plate="small"] .stage__cap{ max-width:min(46.9vw, 980px); }
.stage[data-plate="large"] .stage__cap{ max-width:min(68vw, 1420px); }

/* counter — bottom-left, aligned with the name column */
.stage__count{
  position:absolute; left:var(--gutter); bottom:3.4vh;
  color:var(--ink); white-space:nowrap;
}
#stageCur{ color:var(--burgundy); }

/* copyright — bottom-centre */
.stage__credit{
  position:absolute; left:50%; bottom:3.4vh;
  transform:translateX(-50%);
  color:var(--ink); white-space:nowrap;
}

html.js .stage__count,
html.js .stage__credit{
  opacity:0;
  transition:opacity .9s var(--ease-out) .45s;
}
body.is-ready .stage__count,
body.is-ready .stage__credit{ opacity:1; }

/* =========================================================
   ABOUT — data-driven overlay panel (routed by #about)
   Nav stays visible above it; the About link toggles it.
   Content comes from the admin: hero, sections, items,
   categories, contact. See js/about.js.
   ========================================================= */

.ovl{
  position:fixed; inset:0; z-index:400;
  background:var(--paper);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; transition:opacity .5s var(--ease-out);
}
.ovl.open{ opacity:1; }
.ovl[hidden]{ display:none; }

.ovl__inner{
  min-height:100%;
  max-width:1240px; margin:0 auto;
  padding:calc(var(--nav-h) + 7vh) var(--gutter) 6vh;
}

/* quiet staggered entrance — delays set inline as --d by JS */
html.js .ovl .ovl__anim{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease-out) var(--d,0ms),
             transform .95s var(--ease-out) var(--d,0ms);
}
html.js .ovl.open .ovl__anim{ opacity:1; transform:none; }

/* ---- head: roles line + hero statement ---- */

.ovl__head{ margin-bottom:2vh; }
.ovl__roles{ font-size:10px; letter-spacing:.2em; line-height:2.2; }
.ovl__roles .sep{ color:var(--burgundy); padding:0 .38em; }

.ovl__hero{
  margin-top:4vh;
  font-size:calc(clamp(30px,4.6vw,78px) * var(--ts)); line-height:1.02;
  font-weight:760; font-stretch:120%; letter-spacing:-.014em;
  text-transform:uppercase;
  max-width:18ch;
}
.ovl__hero strong{ font-weight:inherit; }

/* ---- sections ---- */

.ovl__label{ color:var(--burgundy); margin-bottom:3.4vh; }

.ab__sec{ margin-top:11vh; }

.ab__title{
  font-size:calc(clamp(23px,3.1vw,46px) * var(--ts)); line-height:1.05;
  font-weight:700; font-stretch:114%; letter-spacing:-.008em;
  text-transform:uppercase;
  white-space:pre-line;              /* multi-line titles (the closing) */
  margin-bottom:4vh;
}

.ab__p{
  font-size:calc(clamp(16px,1.3vw,19px) * var(--ts)); line-height:1.68;
  color:var(--ink-3); max-width:54ch; margin-bottom:1.4em;
}
.ab__p strong{ font-weight:640; color:var(--ink); }

/* ---- the intro section: portrait beside the copy ---- */

.ab__intro{
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:2.4vw;
  margin-top:1vh;
}
.ab__figWrap{ grid-column:2/6; }
.media--portrait{ aspect-ratio:3/4; width:100%; }
.ovl__cap{ margin-top:14px; color:var(--burgundy); }
.ab__copy{ grid-column:7/13; }

.ab__name{
  font-size:calc(clamp(34px,4.8vw,84px) * var(--ts)); line-height:.9;
  font-weight:760; font-stretch:120%; letter-spacing:-.013em;
  text-transform:uppercase;
}
.ab__tagline{ margin:2.4vh 0 4.5vh; line-height:1.9; }

/* ---- items (What I Do) ---- */

.ab__items{
  margin-top:5vh;
  display:grid; grid-template-columns:1fr 1fr; gap:4.5vh 3.4vw;
}
.ab__item{ border-top:1px solid var(--line); padding-top:20px; }
.ab__itemNo{
  font-size:10px; font-weight:520; letter-spacing:.24em; text-transform:uppercase;
  color:var(--burgundy);
}
.ab__itemTitle{
  font-size:calc(15px * var(--ts)); font-weight:640; letter-spacing:.1em; text-transform:uppercase;
  margin:12px 0 14px;
}
.ab__itemLine{
  font-size:calc(14.5px * var(--ts)); line-height:1.62;
  color:var(--ink-3); margin-bottom:.7em;
}
.ab__itemLine strong{ font-weight:620; color:var(--ink); }

/* ---- categories recap + contact meta ---- */

.ovl__practice{ margin-top:11vh; }
.ovl__practice li{
  display:flex; gap:18px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line);
  font-size:calc(11px * var(--ts)); letter-spacing:.22em; text-transform:uppercase; font-weight:520;
  color:var(--ink);
}
.ovl__practice li span{ color:var(--burgundy); font-size:9px; }

.ovl__meta{ display:flex; gap:5vw; flex-wrap:wrap; margin-top:8vh; }
.om__row dt{ color:var(--burgundy); margin-bottom:6px; }
.om__row dd{ font-weight:520; color:var(--ink); }
.om__row dd a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid var(--burgundy); padding-bottom:1px;
}
.om__row dd a:hover{ color:var(--burgundy); }

/* ---- title font — set from the admin (sans / serif) ---- */

html[data-titlefont="serif"] .loader__name,
html[data-titlefont="serif"] .ovl__hero,
html[data-titlefont="serif"] .ab__name,
html[data-titlefont="serif"] .ab__title,
html[data-titlefont="serif"] .pg__title{
  font-family:var(--font-s);
  font-weight:400; font-stretch:100%;
  letter-spacing:0;
}

/* ---- footer ---- */

.ovl__foot{
  margin-top:12vh; padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 3vw;
  justify-content:space-between; align-items:baseline;
  color:var(--burgundy);
}
.ovl__back{
  letter-spacing:.2em; color:var(--ink);
  border:1px solid var(--line); padding:10px 16px;
  transition:border-color .3s;
}
.ovl__back:hover{ border-color:var(--ink); }

/* =========================================================
   STANDALONE PAGES — page.html?p=… (created in the admin)
   One page = one separate link: a video reel or a single
   project, stacked vertically like the gallery.
   ========================================================= */

.pg__inner{
  padding:calc(var(--nav-h) + 9vh) var(--gutter) 8vh;
  max-width:1160px;                    /* large — the default */
  margin:0 auto;
}
.pg__inner[data-size="small"]{ max-width:760px; }
.pg__inner[data-size="medium"]{ max-width:960px; }
.pg__head{ margin-bottom:8vh; }
.pg__title{
  font-size:calc(clamp(34px,5vw,84px) * var(--ts)); line-height:1.02;
  font-weight:760; font-stretch:120%; letter-spacing:-.014em;
  text-transform:uppercase;
  max-width:20ch;
}
.pg__intro{
  margin-top:3vh;
  font-size:calc(11px * var(--ts)); font-weight:520;
  letter-spacing:.22em; text-transform:uppercase; line-height:2.1;
  max-width:72ch;
}
.pg__intro + .pg__intro{ margin-top:1.6vh; }
.pg__items{
  display:grid;
  grid-template-columns:1fr;           /* 1 — one under the other, the default */
  gap:8.5vh;
}
.pg__items[data-cols="2"]{ grid-template-columns:repeat(2, 1fr); gap:7vh 4vw; }
.pg__items[data-cols="3"]{ grid-template-columns:repeat(3, 1fr); gap:6.5vh 3vw; }
.pg__fig{ margin:0; min-width:0; }
.pg__fig .media{ width:100%; border:1px solid var(--line); }
.pg__fig img, .pg__fig video{ display:block; width:100%; height:auto; }
.pg__cap{ margin-top:1.8vh; text-align:center; line-height:1.9; }
.pg__note{ color:var(--burgundy); letter-spacing:.2em; text-transform:uppercase; }
.pg__empty{ padding:16vh 0 20vh; text-align:center; }
.pg__emptyTitle{
  font-size:clamp(22px,3vw,40px); font-weight:760; font-stretch:120%;
  letter-spacing:-.014em; text-transform:uppercase; margin-bottom:3vh;
}
.pg__empty a{ color:var(--ink); border-bottom:1px solid var(--burgundy); padding-bottom:2px; }
.pg__foot{
  margin-top:10vh; padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 3vw;
  justify-content:space-between; align-items:baseline;
  color:var(--burgundy);
}
.pg__foot a{ color:inherit; }

/* entrance — same quiet choreography as the intro */
.pg__anim{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
body.is-ready .pg__anim{ opacity:1; transform:none; }
html:not(.js) .pg__anim{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE — mobile is composed, not shrunk
   ========================================================= */

@media (max-width:900px){
  :root{ --nav-h:64px; --gutter:20px; }

  /* the plate fills more of the small screen, margins stay calm */
  .stage__wrap{ margin-top:-3vh; }
  .stage__frame{ width:82vw; height:min(46vh, 60vw); }
  .stage__cap{ max-width:82vw; margin-top:2vh; }

  /* counter + copyright stack on the left, never colliding */
  .stage__credit{
    left:var(--gutter); transform:none;
    bottom:calc(3.4vh + 20px);
    text-align:left; white-space:normal;
  }

  /* plate sizes on small screens */
  .stage[data-plate="small"] .stage__frame{ width:72vw; height:min(42vh, 56vw); }
  .stage[data-plate="large"] .stage__frame{ width:92vw; height:min(54vh, 66vw); }
  .stage[data-plate="small"] .stage__cap{ max-width:72vw; }
  .stage[data-plate="large"] .stage__cap{ max-width:92vw; }

  /* about overlay — single column */
  .ovl__inner{ padding:calc(var(--nav-h) + 5vh) var(--gutter) 5vh; }
  .ovl__hero{ font-size:clamp(26px,8.8vw,48px); max-width:14ch; }
  .ab__sec{ margin-top:9vh; }
  .ab__title{ font-size:clamp(20px,6.4vw,34px); margin-bottom:3vh; }
  .ab__intro{ display:block; }
  .ab__figWrap{ width:78%; }
  .ab__copy{ margin-top:6vh; }
  .ab__name{ font-size:clamp(30px,9.5vw,60px); }
  .ab__items{ grid-template-columns:1fr; gap:3.5vh; }
  .ovl__foot{ flex-direction:column; align-items:flex-start; }

  /* standalone pages — columns collapse to one on small screens */
  .pg__inner{ padding:calc(var(--nav-h) + 5vh) var(--gutter) 6vh; }
  .pg__title{ font-size:clamp(26px,8.8vw,48px); max-width:14ch; }
  .pg__intro{ letter-spacing:.16em; }
  .pg__items[data-cols]{ grid-template-columns:1fr; gap:7vh; }
}

/* =========================================================
   REDUCED MOTION — calm swaps, no choreography
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .stage__frame img,
  .stage__frame video{ transition:none !important; }
  .stage__frame img.enter,
  .stage__frame video.enter{ animation:none !important; }
  .ovl{ transition:none !important; }
  html.js .ovl .ovl__anim,
  html.js .pg__anim{ transform:none !important; transition:opacity .3s linear !important; }
  html.js .stage__count,
  html.js .stage__credit{ transition:opacity .3s linear !important; }
}