/* ============ ROSS Family Collection ============ */
/* Every number below is a coordinate from the Pixelmator comps, expressed in
   "comp pixels" via --px. Desktop comp: Blake&Ri.svg, 5444×3647.
   Phone comp:  Blake&Ri Phone.svg, 2051×3647.
   main.js overwrites --px with an exact px value (layout width / comp width)
   so the grid, the overlays and the header band all share one coordinate
   system — no vw/% rounding drift, no duplicated rules. */

:root {
  --cream: #ffffee;
  --ink: #101010;

  --px: calc(100vw / 5444);            /* one comp pixel (JS refines this) */
  --rule-h: calc(307 * var(--px));     /* y 1823 -> 2130: the composition band */
  --band-h: var(--rule-h);             /* the header band is exactly that tall */
  --pin: 50svh;                        /* the rule pair rests on the photo's centre line */

  --strip-h: clamp(72px, 10.5vh, 120px);
  --display-serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Hero ---------- */

/* Taller than the viewport by exactly the flight distance: the layers below
   stay stuck to the top for that long, then release and scroll away. */
.heroPin {
  position: relative;
  height: calc(100svh + var(--pin));
  background: #0c0c0c;
}

.heroLayer {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  pointer-events: none;
}

/* The couple sits above the flying overlay, the photo and grid below it. */
.heroLayer--back  { z-index: 1; }
.heroLayer--front { z-index: 3; margin-top: -100svh; }

.hero__canvas {
  position: absolute;
  /* JS sizes this to replicate object-fit: cover, so the cutout and the photo
     stay registered to each other at any viewport */
}

.hero__bg { width: 100%; height: 100%; }

/* Couple layer inside the 5444×3647 photo: x 1177, y 971, 2333×2427 */
.hero__cutout {
  position: absolute;
  left: 21.62%;
  top: 26.63%;
  width: 42.86%;
}

.gridlines { position: absolute; inset: 0; opacity: 0.64; }
.gridlines i { position: absolute; background: #fff; top: 0; bottom: 0; width: 1px; }
.gridlines .gp { display: none; }

/* ---------- Flying overlay ---------- */

.fly {
  position: fixed;
  inset: 0 0 auto 0;
  height: 0;
  z-index: 2;         /* JS lifts this above the band once docked */
  color: #fff;        /* JS crossfades to ink as the band arrives */
}

/* The two horizontal rules travel together with the wordmark — in the comp
   they are the top and bottom edge of the ROSS artwork (y 1823 / y 2130),
   and they land as the top edge and bottom border of the header band. */
.rules {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--rule-h);
  will-change: transform;
}

.rules::before,
.rules::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
}
/* The top rule fades out as it reaches the viewport edge — in the comp the
   docked band has only the lower rule. */
.rules::before { top: 0; opacity: var(--top-rule, 1); }
.rules::after  { bottom: 0; }

/* The real ROSS artwork (white PNG) as a mask over currentColor, so its
   colour can crossfade white -> ink without touching the letterforms. */
.wordmark {
  position: absolute;
  top: 0;
  left: calc(368 * var(--px));      /* x 370, flush to the grid vertical */
  width: calc(1841 * var(--px));
  height: 100%;                     /* == 307 comp px */
  background: currentColor;
  -webkit-mask: url("/assets/ross.png") center / contain no-repeat;
  mask: url("/assets/ross.png") center / contain no-repeat;
  pointer-events: none;             /* JS enables it once docked */
}

/* Plaque: the two artwork columns, positioned in comp coordinates. */
.plaque {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--rule-h);
  will-change: transform;
}

.plaque__col {
  position: absolute;
  background: currentColor;
}

.plaque__col--left {
  left: calc(3074 * var(--px));
  top: calc(16 * var(--px));
  width: calc(995 * var(--px));
  height: calc(263 * var(--px));
  -webkit-mask: url("/assets/plaque-left.png") center / contain no-repeat;
  mask: url("/assets/plaque-left.png") center / contain no-repeat;
}

.plaque__col--right {
  left: calc(4120 * var(--px));
  top: calc(28 * var(--px));
  width: calc(695 * var(--px));
  height: calc(260 * var(--px));
  -webkit-mask: url("/assets/plaque-right.png") center / contain no-repeat;
  mask: url("/assets/plaque-right.png") center / contain no-repeat;
}

/* Phone-only furniture for the bottom plaque block */
.plaque__rule,
.plaque__divider { display: none; position: absolute; background: currentColor; }

/* ---------- Header band ---------- */

.band {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--band-h);
  background: var(--cream);
  transform: translateY(-100%);
  z-index: 30;
  pointer-events: none;
}

/* The grid verticals continue through the band, in ink */
.band i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); }
.band .gp { display: none; }

/* ---------- Lower section ---------- */

.lower {
  /* The fixed header band covers the top slice, so the cards fill
     exactly the rest of the viewport. */
  height: calc(100svh - var(--band-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cream);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: clip;
  color: var(--ink);
}

.card--personal { border-left: 1px solid var(--ink); }

.card__media {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card__wash {
  position: absolute;
  inset: 0;
  background: var(--cream);
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card__foot {
  height: var(--strip-h);
  background: var(--cream);
  border-top: 1px solid var(--ink);
}

/* Label block travels from the strip up into the photo on hover */

.card__block {
  position: absolute;
  bottom: calc(var(--strip-h) * 0.5);
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
  pointer-events: none;
}

.card--registry .card__block {
  left: 2.3vw;
  align-items: flex-start;
  transform-origin: left bottom;
  transform: translateY(50%);
}

.card--personal .card__block {
  right: 2.3vw;
  align-items: flex-end;
  transform-origin: right bottom;
  transform: translateY(50%);
}

.card__label {
  font-family: var(--display-serif);
  font-weight: 500;
  font-size: clamp(22px, 3.1vw, 60px);
  letter-spacing: 0.22em;
  line-height: 1;
  white-space: nowrap;
  transition:
    font-size 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    letter-spacing 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card__sub {
  position: absolute;
  top: calc(100% + 0.55vw);
  font-family: var(--sans);
  font-size: clamp(11px, 1.05vw, 20px);
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card--registry .card__sub { left: 0; }
.card--personal .card__sub { right: 0; }

.card__arrow {
  position: absolute;
  bottom: calc(var(--strip-h) * 0.5 - 1.35vw);
  width: 2.7vw;
  height: 2.7vw;
  min-width: 26px;
  min-height: 26px;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card--registry .card__arrow { right: 1.1vw; }
.card--personal .card__arrow { left: 1.1vw; }

@media (hover: hover) {
  .card:hover .card__wash { opacity: 0.85; }
  .card:hover .card__media img { transform: scale(1.03); }

  .card:hover .card__block {
    transform: translateY(calc(-1 * var(--strip-h) * 0.95));
  }
  .card:hover .card__label {
    font-size: clamp(32px, 4.9vw, 96px);
    letter-spacing: 0.09em;
  }
  .card:hover .card__sub { opacity: 1; transform: translateY(0); }

  .card:hover .card__arrow {
    transform: translateY(calc(-1 * var(--strip-h) * 0.95));
  }
}

/* ---------- Phone layout (Blake&Ri Phone.svg, 2051×3647) ---------- */

@media (max-width: 900px) {
  :root {
    --px: calc(100vw / 2051);
    --strip-h: clamp(56px, 8vh, 84px);
  }

  /* ROSS sits in front of the couple here, nearly full bleed */
  .wordmark {
    left: calc(26 * var(--px));       /* x 28 */
    width: calc(1841 * var(--px));
  }

  /* The plaque restacks into a bottom block (y 3302 -> 3647) and, per the
     comp, stays with the photo instead of docking. */
  .plaque { height: calc(345 * var(--px)); }

  .plaque__rule {
    display: block;
    left: 0; right: 0; top: 0; height: 1px;
  }

  .plaque__divider {
    display: block;
    top: 0; bottom: 0; width: 1px;
  }
  .plaque__divider--a { left: calc(1026 * var(--px)); }
  .plaque__divider--b { left: calc(1331 * var(--px)); }

  .plaque__col--left {
    left: calc(28 * var(--px));
    top: calc(13 * var(--px));
    width: calc(995 * var(--px));
    height: calc(263 * var(--px));
  }

  .plaque__col--right {
    left: calc(1342 * var(--px));
    top: calc(15 * var(--px));
    width: calc(695 * var(--px));
    height: calc(260 * var(--px));
  }

  .gridlines .gd { display: none; }
  .gridlines .gp { display: block; }
  .band .gd { display: none; }
  .band .gp { display: block; }

  .lower {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .card--personal { border-left: none; border-top: 1px solid var(--ink); }

  .card__label { font-size: clamp(20px, 6vw, 34px); }
  .card__sub { font-size: 11px; }
  .card--registry .card__block { left: 5vw; }
  .card--personal .card__block { right: 5vw; }
  .card__arrow { width: 24px; height: 24px; bottom: calc(var(--strip-h) * 0.5 - 12px); }
  .card--registry .card__arrow { right: 4vw; }
  .card--personal .card__arrow { left: 4vw; }
}

@media (prefers-reduced-motion: reduce) {
  .card__media img,
  .card__block,
  .card__label,
  .card__sub,
  .card__arrow,
  .card__wash { transition: none; }
}