/* ============================================================
   THE FRAMED FUSION — Weddings service page
   (extends assets/css/style.css)
   ============================================================ */

/* ---------- Menu: current page marker ---------- */
.menu__link--current .menu__word { color: var(--brass); font-style: italic; }

/* ---------- Hero ---------- */
.whero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: clamp(1rem, 2.4vh, 1.7rem);
  padding: clamp(4.5rem, 9vh, 5.5rem) var(--gutter) clamp(2rem, 4.5vh, 3rem);
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(197, 160, 101, 0.09), transparent 60%),
    radial-gradient(120% 80% at 50% 110%, rgba(197, 160, 101, 0.05), transparent 55%),
    var(--ink);
}
.whero__frame-marks { position: absolute; inset: clamp(0.9rem, 2.5vw, 2rem); pointer-events: none; }
.whero__eyebrow {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--brass);
}
.whero__title {
  font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 6.4vw, 5.9rem);
  line-height: 0.98; letter-spacing: -0.01em;
}
.whero__line { display: block; overflow: hidden; padding-bottom: 0.07em; }
.whero__line-inner { display: inline-block; }
.whero__line--serif {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  text-transform: none; color: var(--brass);
  font-size: 1.08em; line-height: 0.95;
}
.whero__player {
  position: relative;
  width: max(16rem, min(88vw, 56rem, calc((100svh - 30rem) * 1.7778)));
}
.whero__player-inner {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; overflow: hidden;
  border-radius: clamp(0.75rem, 1.4vw, 1.25rem);
  box-shadow: 0 0 0 1px var(--hairline), 0 34px 90px rgba(0, 0, 0, 0.55);
}
.whero__player-inner iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.whero__player-tc {
  position: absolute; right: 0; bottom: -1.5rem;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--bone-dim);
}
.whero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 0.6rem; }
@media (max-width: 640px) {
  .whero { gap: 1rem; }
  .whero__player-tc { display: none; }
}

/* ---------- Gallery ---------- */
.wgal { padding: clamp(6rem, 14vh, 10rem) var(--gutter); }
.wgal__head { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.wgal__grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
}
.wgal__item {
  position: relative; overflow: hidden;
  background: var(--ink-soft);
}
.wgal__item img {
  filter: saturate(0.88);
  transition: filter 0.7s var(--ease-out);
  will-change: transform;
}
.wgal__item:hover img { filter: saturate(1.08); }
.wgal__item::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(234, 230, 221, 0.06);
  pointer-events: none;
}

.wgal__item--a     { grid-column: 1 / 7;  aspect-ratio: 4 / 5; }
.wgal__item--b     { grid-column: 8 / 13; aspect-ratio: 3 / 4; margin-top: clamp(3rem, 9vw, 8rem); }
.wgal__item--c     { grid-column: 1 / 6;  aspect-ratio: 3 / 4; }
.wgal__item--wide  { grid-column: 6 / 13; aspect-ratio: 16 / 10; margin-top: clamp(2rem, 6vw, 5rem); align-self: start; }
.wgal__item--d     { grid-column: 1 / 5;  aspect-ratio: 4 / 5; }
.wgal__item--e     { grid-column: 5 / 9;  aspect-ratio: 4 / 5; margin-top: clamp(2rem, 6vw, 5rem); }
.wgal__item--f     { grid-column: 9 / 13; aspect-ratio: 4 / 5; margin-top: clamp(4rem, 10vw, 8rem); }
.wgal__item--wide2 { grid-column: 1 / 13; aspect-ratio: 21 / 9; }
.wgal__item--g     { grid-column: 2 / 7;  aspect-ratio: 3 / 4; }
.wgal__item--h     { grid-column: 7 / 12; aspect-ratio: 4 / 5; margin-top: clamp(3rem, 8vw, 7rem); }

@media (max-width: 760px) {
  .wgal__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .wgal__item { grid-column: auto; margin-top: 0 !important; aspect-ratio: 4 / 5; }
  .wgal__item--wide, .wgal__item--wide2 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}