.mark-lg { --mark-size: clamp(26px, 3.6vw, 42px); }

/* ---------------------------------------------------------------- hero */
/* Two columns again. The vertical version kept the void and added a second
   fault: a centred photo under left-aligned text. The real fix is to stop the
   text column being wider than the text: give the photo far more of the page,
   cap the measure, and stop the rules where the content stops. */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(28px, 6vh, 72px) var(--pad) clamp(20px, 4vh, 48px);
}

/* The desktop grid used to live here, and that was the bug. Base rules further
   down the file overrode it at equal specificity: `.plate { margin: 0 }` killed
   the column gutter outright, so the photo sat flush against the text column,
   and the 1500px numeral step was killed by `.unit-lead b` below it. The block
   now sits at the END of this file, where it wins. Do not move it back up. */

.hero-text {
  position: relative;
  width: 100%;
  min-width: 0;
}

.eyebrow { margin-bottom: clamp(18px, 3vh, 30px); }

/* ---------------------------------------------------------------- counter */
/* Four equal cells was a spreadsheet, and it put the accent on seconds, the one
   number that means nothing. Days now lead at display size; the rest are a
   quiet line of data beneath. Hierarchy comes from scale, not colour. */
.counter {
  display: grid;
  gap: clamp(10px, 1.6vh, 18px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(16px, 3vh, 30px) 0 clamp(14px, 2.4vh, 24px);
  /* Hug the widest row so the rules end where the numbers end, instead of
     running on into empty violet. */
  width: fit-content;
  min-width: min(100%, 340px);
  max-width: 100%;
}

.unit { display: grid; justify-items: start; gap: 2px; min-width: 0; }

.unit b {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;            /* Cormorant is fine; the numerals need the weight */
  line-height: 0.8;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
  color: var(--paper);
}
.unit i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.unit-lead {
  grid-template-columns: auto auto;
  justify-content: start;      /* columns hug the numeral instead of stretching */
  align-items: baseline;
  gap: 0.28em;
}
.unit-lead b { font-size: clamp(96px, 21vw, 250px); }
.unit-lead i {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2.8vw, 34px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--orchid);
}

.unit-rest {
  display: flex;
  gap: clamp(20px, 3.4vw, 46px);
  align-items: baseline;
  flex-wrap: wrap;
}
.unit-rest .unit b { font-size: clamp(22px, 3vw, 34px); font-weight: 500; }

.since {
  margin: clamp(16px, 2.4vh, 24px) 0 clamp(20px, 3vh, 30px);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1;
  color: var(--paper);
}

/* ---------------------------------------------------------------- the plate */
/* A printed photo plate, square-cornered. It sits below the counter and is the
   reason to keep scrolling. No device frame, no glow behind it. */
.plate {
  position: relative;
  margin: 0;
  display: grid;
}
/* The photo now owns close to half the page, so a portrait clip fills it
   without being cropped down to a sliver. */
.plate video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;       /* the clip's own shape, so nothing is cropped */
  max-height: calc(100dvh - 150px);
  object-fit: cover;
  object-position: 52% 34%;
  filter: saturate(1.03) contrast(1.03);
}
/* No bottom fade now that the plate ends inside the column rather than bleeding
   off the viewport: a gradient to the ground would just look like a smudge. */
.plate-wash { display: none; }
.plate figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 40px clamp(14px, 1.6vw, 24px) clamp(16px, 2.4vh, 24px);
  background: linear-gradient(to top, rgba(11, 3, 28, 0.8), transparent);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.plate-place { color: var(--paper); }
.plate-date { color: var(--muted); }

.plate.needs-tap video { cursor: pointer; }
.plate.needs-tap::before {
  content: "Tocar para ver";
  position: absolute;
  left: 50%;
  bottom: clamp(56px, 9vh, 96px);
  transform: translateX(-50%);
  z-index: 2;
  padding: 12px 18px;
  border: 1px solid var(--rule);
  background: rgba(10, 4, 16, 0.7);
  color: var(--paper);
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------- entrance */
.masthead .mark, .eyebrow, .counter, .since, #toggle, .plate {
  animation: rise 900ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.masthead .mark { animation-delay: 60ms; }
.eyebrow        { animation-delay: 220ms; }
.counter        { animation-delay: 320ms; }
.since          { animation-delay: 440ms; }
#toggle         { animation-delay: 540ms; }
.plate          { animation-delay: 160ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .masthead .mark, .eyebrow, .counter, .since, #toggle, .plate { animation: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 899px) {
  .plate video { aspect-ratio: 4 / 5; }
  .plate figcaption { padding-left: var(--pad); padding-right: var(--pad); }
  .foot { flex-direction: column; gap: 8px; }
}
/* The old four-cell counter had a 2x2 phone layout here. It survived the
   redesign and was forcing the lead numeral and the hours row side by side on
   a phone, which is why the seconds wrapped onto their own line. */

/* Centre the counter on a phone. On a narrow screen the timer is the whole
   subject of the view, and flush-left leaves a ragged right edge under a rule
   that runs the full measure. The eyebrow, "juntos" and the toggle centre with
   it: a centred counter under a flush-left eyebrow reads as a bug, not a
   choice. Desktop keeps its left-aligned column. */
@media (max-width: 899px) {
  .hero-text  { text-align: center; }
  .counter    { margin-inline: auto; }
  .unit       { justify-items: center; }
  .unit-lead  { justify-content: center; }
  .unit-rest  { justify-content: center; }
}

/* ================================================================= desktop
   This block is LAST on purpose. See the note at the top of the file: the
   previous copy sat above the base rules and two of its declarations were
   silently dead.

   Two faults are fixed here. The text track was 620px holding 281px of ink,
   and that leftover was the gap between the numeral and the photo. And the
   photo was sized by `max-height: calc(100dvh - 150px)`, where the 150 was an
   invented constant matching neither the masthead (159) nor the footer (98),
   so the clip floated with air above it and overshot the fold below by 107px.

   The fix is registration. The masthead and the footer span the whole spread
   and each draw a rule. The photo hangs from the top rule and bottoms out on
   the footer rule, so both its edges land on lines you can actually see, and
   the document collapses to exactly one screen. */
@media (min-width: 900px) {
  body {
    display: grid;
    /* max-content, not a fixed track: the column is exactly as wide as the
       counter, so there is no leftover to read as a gap, and it widens on its
       own the day the count reaches three digits instead of overflowing. */
    grid-template-columns:
      minmax(var(--pad), 1fr)
      minmax(0, max-content)
      minmax(0, 470px)
      minmax(var(--pad), 1fr);
    grid-template-rows: auto 1fr auto;
    /* A real gap. The old `margin-left` on .plate was the declaration that
       `.plate { margin: 0 }` was killing. */
    column-gap: clamp(24px, 3vw, 64px);
    min-height: 100dvh;
  }

  /* Both bands run the full spread. This is what the nav was missing: it used
     to stop at the invisible right edge of the text column, so the single
     ÁLBUM link floated at mid-page aligned to nothing. It now sits opposite
     the logo across a drawn rule, with "Nuestras cosas" directly beneath it. */
  .masthead {
    grid-column: 2 / 4;
    grid-row: 1;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: clamp(18px, 2.4vh, 28px);
    border-bottom: 1px solid var(--rule);
  }
  .foot { grid-column: 2 / 4; grid-row: 3; margin: 0; }

  /* flex-start, not center: centring made the text column's vertical position
     a function of the video's height, which is where the 155px of violet under
     the logo came from. */
  .hero {
    grid-column: 2;
    grid-row: 2;
    align-items: flex-start;
    padding: clamp(28px, 5vh, 56px) 0 clamp(20px, 4vh, 48px);
  }

  /* The track is now the counter's own width, so the hairlines terminate on a
     real edge instead of 339px short of one. */
  .counter { width: auto; min-width: 0; }

  /* The plate IS the row. The video is absolutely positioned so its intrinsic
     9:16 height stops inflating the row and pushing the footer off screen. */
  .plate {
    grid-column: 3;
    grid-row: 2;
    align-self: stretch;
    margin: 0;
    position: relative;
    overflow: hidden;
    min-height: 0;
  }
  .plate video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
    object-fit: cover;
    object-position: 52% 30%;
  }
}

@media (min-width: 1500px) {
  body {
    grid-template-columns:
      minmax(var(--pad), 1fr)
      minmax(0, max-content)
      minmax(0, 560px)
      minmax(var(--pad), 1fr);
  }
}