/* ═══════════════════════════════════════════════════════════════════════════
   rzv.studio — meta.css  (THE HERO'S CORNER FURNITURE)

   Haseeb: "bottome left. bottom right - decorative meta: LDN --> LAX and
   maybe rolling GMT and PST times 24 hour clock."

   Two corners of quiet type at the foot of #hero. They are FURNITURE: they
   frame the centred headline and give the viewport its edges, and they must
   never compete with it. Everything here is in service of that — --dim rather
   than --muted, tabular figures so a ticking clock does not shimmy, and a
   z-index that puts them behind the glass solid so the cube refracts them.

   OWNS: .hero-meta and its children, resting layout only.
   DOES NOT OWN: their entrance. intro.js animates opacity/transform on
   .hero-meta as the tail of the hero cascade (SPEC.md §1→§2) and TRAP 2 gives
   it transform outright. Nothing here sets either property, and nothing here
   is a hidden state waiting to be revealed — with JS off this composes.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-meta{
  position:absolute; left:0; right:0; bottom:0;
  /* Matches .wrap exactly so the corners line up with the headline's measure
     instead of the raw viewport edge — the gutter is what makes them read as
     part of the composition rather than stuck to the glass. */
  max-width:var(--wrap-hero,var(--wrap)); margin:0 auto; padding:0 var(--gutter);   /* same cap as the header row */
  padding-bottom:clamp(18px,3.2vh,34px);
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;   /* baseline, not box-bottom: the two corners share one text line in the reference */

  /* BELOW the glass solid, ABOVE the aurora. The cube is meant to pass over
     this type and bend it — that is the whole reason the corners are worth
     having, and it is free: glass.js rasterises whatever DOM sits under it.
     .wrap is z-index:1, the stage is 0; sitting at 1 keeps both true. */
  z-index:1;

  /* Furniture, not content. Pointer-events off so it can never eat a click
     meant for the CTA, and it is aria-hidden in the markup for the same
     reason a decorative rule would be. */
  pointer-events:none;
}

.hero-meta-route{ color:var(--text); white-space:nowrap; margin:0 }      /* solid white, 2 Sep */

.hero-meta-clocks{white-space:nowrap;margin:0;color:var(--text)}
.hero-sep{opacity:1;margin:0 .35em}

.hero-clock{
  color:var(--dim); white-space:nowrap; margin:0;
  /* THE ONE RULE THAT MATTERS HERE. Space Mono is monospaced, so the digits
     are already equal-width — but the gap between zone and time is not, and
     `font-variant-numeric` costs nothing and makes the guarantee explicit for
     any fallback face. Without a fixed advance the whole line twitches once a
     second and the eye is dragged straight off the headline to it. */
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* The zone label is the quieter half of the pair — it never changes, so it
   should not draw the eye that the moving digits already will. */
.hero-clock-zone{ color:var(--faint,var(--dim)); opacity:0.62; margin-right:0.5em }
.hero-clock-time{ font-variant-numeric:tabular-nums }

/* ── NARROW ──────────────────────────────────────────────────────────────
   Below ~560px the two corners stop being corners: side by side they leave
   the route almost no room and the clocks wrap. They stack instead, still
   bottom-left, still quiet, and the pair of clocks goes to one row so the
   block stays two lines tall rather than three. */
@media (max-width:560px){
  .hero-meta{
    /* Still corners on a phone: route bottom-left, clocks bottom-right, one
       line each on a shared baseline — both fit in 375px at this size. */
    flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px;
    /* Plus the home-indicator strip: live, this block is position:fixed at
       bottom:0 (intro.css), so without the inset the clock row sits under
       Mobile Safari's bottom toolbar. menu.css:123 has the same pattern. */
    padding-bottom:calc(clamp(14px,2.4vh,22px) + env(safe-area-inset-bottom,0px));
  }
  .hero-meta-clocks{
    flex-direction:row; align-items:baseline; gap:14px; text-align:left;
  }
}

/* Very short viewports — a landscape phone — have no room for furniture under
   a centred headline, and the headline is what matters. */
@media (max-height:520px){ .hero-meta{ display:none } }