/* ══════════════════════════════════════════════════════════════════════
   hero-type.css — the homepage hero: three huge capital serif lines
   between hairlines, small photos tucked in between the words, and one
   small italic line at the end.

   Loaded after style.css, hx- namespaced. index.html only.
   ══════════════════════════════════════════════════════════════════════ */

/* Keep the side columns above the page, as the centre column. */
.layout { position: relative; }
.col-left, .col-right { z-index: 1; }
.col-center { position: relative; z-index: 1; }

/* Full width: reaches out of the centre column by exactly the width of the
   side columns. Sized from the columns, not 100vw, so a desktop scrollbar
   can't tip one side's margin — both match the nav's. */
/* Sticky: the hero stays pinned while the Off the clock wall (also sticky,
   z-index 2) slides up and covers it. */
.hx-hero {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% + 2 * var(--col-out));
  margin-left: calc(-1 * var(--col-out));
  min-height: calc(100svh - var(--nav-h));
  padding: var(--sp-8) var(--gutter);
}

/* Lines up with the content of the Off the clock wall below: it starts about
   9% in from the board's edge on both sides, so the hero is the board's
   middle 82% (1262px × 0.82 = 1035px), centred. Full width once stacked. */
.hx-head {
  font-family: var(--f-hero);
  font-weight: 400;
  width: calc(var(--hero-share) * 100%);
  max-width: var(--hero-max);
  margin: 0 auto;
  font-size: var(--fs-hero);
  line-height: 1;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}

/* One line of the headline, between two hairlines. */
.hx-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;   /* a photo's bottom edge sits on the text baseline */
  gap: 0 0.14em;
  padding: 0.1em 0;
  border-top: 1px solid var(--line-strong);
}

/* "&" sits at the left and the rest of the line starts further in. */
.hx-amp { margin-right: 0.6em; }

/* A small photo between words. Sized in em so it scales with the line. */
.hx-photo {
  flex: none;
  display: block;
  height: 0.63em;   /* Cormorant Garamond's capital height: the photo is exactly as tall as the letters */
  width: calc(0.63em * 4 / 5);   /* explicit, so an <img> can't stretch to its natural size */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--placeholder);
  border-radius: 0;
}

/* The small italic line at the end of the last row. */
.hx-tag {
  align-self: baseline;   /* sits on the same baseline as DESIGNER */
  font-family: var(--f-serif);   /* Libre Baskerville italic, as before; the capitals above use --f-hero */
  font-weight: var(--fw-regular);
  font-size: var(--fs-hero-tag);
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.03em;
  margin-left: 0.4em;
}

/* The cursor-trail cards sit behind the hero, softer than on their own: smaller
   and see-through, so the thin capitals stay readable over them. Phones don't
   show them at all (the ≤560px block below). */
.layout .ht-stage.is-hero-bg {
  --ht-w: 190px;
  --ht-h: 250px;
  opacity: 0.6;
}

/* Laptop and up: the top bar's NK and Let's connect line up with the hero's
   edges (same width as .hx-head, worked out from the same tokens). The trail
   cards are NOT confined to them; they run across the whole screen. */
@media (min-width: 901px) {
  nav:not([class]) {
    padding-inline: max(var(--gutter), calc((100% - min(var(--hero-share) * (100% - 2 * var(--gutter)), var(--hero-max))) / 2));
    transition: padding-inline 500ms var(--ease-out-quart);
  }
  /* First scroll: out to the page margin, where the other pages keep them. */
  .hx-scrolled nav:not([class]) { padding-inline: var(--gutter); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  nav:not([class]) { transition: none; }
}

@media (max-width: 900px) {
  .hx-head { width: 100%; }
}

/* The hero stays sticky so "Off the clock" (pwall, also sticky) can slide up
   and visually cover it. personal.css turns pwall's sticky off on phones —
   without a cover coming to pin over it in turn, a still-sticky hero would
   stay frozen on screen and bleed through whatever scrolls up next instead
   of scrolling away normally. Both halves of that pair have to switch off
   together. */
@media (max-width: 900px) {
  .hx-hero { position: static; }   /* keeps its screen-tall height: on tablets the card pile needs it */
}

@media (max-width: 560px) {
  /* No colour cards on phones (hidden below). The hero fills the first
     screen on its own, headline centred, so the photo wall only shows up
     once you scroll. */
  .hx-hero { min-height: calc(100svh - var(--nav-h)); justify-content: center; padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
  .layout .ht-stage.is-hero-bg { display: none; }
  /* Sized from the room the line actually has, not plain vw: the gutters
     are fixed px, so a vw size overshot by 2px at 375 (the hand photo
     wrapped onto its own line) and worse at 360. "VISUAL ARTIST" + photo +
     gap measure 7.5em; 7.6 leaves a hair of slack. */
  .hx-head { font-size: calc((100vw - 2 * var(--gutter)) / 7.6); }
  .hx-amp { margin-right: 0.3em; }
  .hx-tag { flex-basis: 100%; margin: 0 0 var(--sp-2); text-align: right; }
}