/* ============================================================
   Blocks added on top of the original five sections: the driver
   file, the crew, the palmarès, the journal, the press list and
   the commercial half of the Partners section.

   Loaded last, so the few overrides here (the hero headline now
   carries a family name under it) win without editing upstream.
   Everything reads from tokens.css — no raw values.
   ============================================================ */

/* ---------- hero: full name ---------------------------------
   The <h1> used to be the given name alone. Search needs the
   surname inside the same heading, so the h1 is now a two-line
   stack: the animated given name and a quieter family name. */

.hero__given {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
}

.hero__family {
  flex: 0 0 100%;
  font-size: clamp(1.375rem, 0.4rem + 2.6vw, 3.25rem);
  line-height: var(--lh-snug);
  letter-spacing: 0.14em;
  color: var(--c-ink-dim);
  animation: rule-in var(--d-cine) var(--e-out) 620ms both;
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .hero__family {
    animation: none;
  }
}

/* ---------- <picture> is plumbing, not a box -----------------
   Every image wrapper added for AVIF/WebP would otherwise become an
   inline box between the tile and its <img>, and the aspect-ratio and
   object-fit rules written for the img would have nothing to size
   against. display:contents removes the wrapper from layout entirely
   and leaves the img where the CSS expects it. */

picture {
  display: contents;
}

/* ---------- hero: still → clip cross-fade --------------------
   hero.js used to write opacity straight onto the img. It now sets
   data-video on the container and leaves the transition here, which
   keeps the timing with the rest of the motion and lets the
   reduced-motion rule below cut it without touching the script. */

.hero__media[data-video="1"] img {
  opacity: 0;
  transition: opacity var(--d-slow) var(--e-out);
}

@media (prefers-reduced-motion: reduce) {
  .hero__media[data-video="1"] img {
    transition: none;
  }
}

/* ---------- generic block ----------------------------------- */

.block {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--hair);
}

.block__title {
  font-family: var(--f-display);
  font-size: var(--t-d3);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.block__body {
  margin-top: var(--s-3);
  max-width: var(--w-text);
  color: var(--c-ink-dim);
}

/* A run of paragraphs from the content files — the biography. */
.prose {
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-3);
  max-width: var(--w-text);
  color: var(--c-ink-dim);
}

.prose p:first-child {
  color: var(--c-ink);
}

.block__kicker {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--c-amber);
}

.block__foot {
  margin-top: var(--s-6);
}

.note {
  margin-top: var(--s-4);
  max-width: var(--w-text);
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--c-ink-mute);
}

.empty {
  margin-top: var(--s-5);
  max-width: var(--w-text);
  color: var(--c-ink-dim);
}

/* ---------- key/value lists (driver file, car specs) -------- */

.facts {
  margin-bottom: var(--s-8);
  padding: var(--s-5);
  background: var(--c-raise);
  border: var(--hair);
  border-left: 3px solid var(--c-amber);
  border-radius: var(--r-md);
}

.facts__title {
  color: var(--c-amber);
}

.facts__list,
.specs {
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-3) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.dl__row {
  display: grid;
  gap: var(--s-1);
  align-content: start;
}

.dl__row dd {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-snug);
}

.specs .dl__row dd {
  font-family: var(--f-mono);
  color: var(--c-ink);
}

/* ---------- crew -------------------------------------------- */

.crew {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.crew__card {
  padding: var(--s-5);
  background: var(--c-raise);
  border: var(--hair);
  border-radius: var(--r-md);
  transition: border-color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}

.crew__card:hover {
  border-color: var(--c-edge);
  transform: translateY(-2px);
}

.crew__role {
  color: var(--c-amber);
}

.crew__name {
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--t-d3);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
}

.crew__meta {
  margin-top: var(--s-1);
  font-size: var(--t-small);
  color: var(--c-ink-mute);
}

.crew__body {
  margin-top: var(--s-3);
  color: var(--c-ink-dim);
}

/* ---------- palmarès ----------------------------------------
   A hairline runs down the left of the whole list; each year is a
   station on it and each result hangs off a medal dot. */

.palmares {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
}

.pal__group {
  position: relative;
  padding-left: var(--s-7);
  padding-bottom: var(--s-6);
}

.pal__group::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.6rem;
  bottom: 0;
  width: 1px;
  background: var(--c-edge);
}

.pal__group:last-child {
  padding-bottom: 0;
}

.pal__group:last-child::before {
  bottom: auto;
  height: 100%;
}

.pal__year {
  font-family: var(--f-display);
  font-size: var(--t-d3);
  line-height: 1;
  color: var(--c-amber);
  letter-spacing: var(--ls-display);
}

.pal__rows {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.pal__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
}

/* The dot sits on the spine, not next to it. */
.pal__medal {
  width: 0.7rem;
  height: 0.7rem;
  margin-left: calc(var(--s-7) * -1 + 0.32rem - 0.35rem + 1px);
  margin-top: 0.42rem;
  border-radius: 50%;
  background: var(--c-base);
  border: 1px solid var(--c-ink-mute);
}

.pal__row[data-medal="gold"] .pal__medal {
  background: var(--c-amber);
  border-color: var(--c-amber);
  box-shadow: 0 0 0 4px var(--c-amber-glow);
}

.pal__row[data-medal="silver"] .pal__medal {
  background: var(--c-ink-dim);
  border-color: var(--c-ink-dim);
}

.pal__row[data-medal="bronze"] .pal__medal {
  background: var(--c-amber-deep);
  border-color: var(--c-amber-deep);
}

.pal__title {
  line-height: var(--lh-snug);
}

.pal__row[data-medal="gold"] .pal__title {
  color: var(--c-ink);
  font-weight: 500;
}

.pal__meta {
  margin-top: var(--s-1);
  font-family: var(--f-mono);
  font-size: var(--t-small);
  color: var(--c-ink-mute);
}

.pal__group[hidden] {
  display: none;
}

/* ---------- press list -------------------------------------- */

.press {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.press__row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--hair-soft);
}

.press__outlet {
  font-family: var(--f-display);
  font-size: var(--t-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.press__note {
  color: var(--c-ink-mute);
  font-size: var(--t-small);
}

@media (max-width: 40rem) {
  .press__row {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
}

/* ---------- journal ----------------------------------------- */

.news {
  display: grid;
  gap: var(--s-6);
}

.post {
  display: grid;
  grid-template-columns: minmax(0, 20rem) 1fr;
  gap: var(--s-5);
  padding-bottom: var(--s-6);
  border-bottom: var(--hair);
}

.post:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.post__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-raise);
}

.post__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  transition: transform var(--d-cine) var(--e-out);
}

.post:hover .post__media img {
  transform: scale(1.04);
}

.post__title {
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--t-d3);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
}

.post__text {
  margin-top: var(--s-3);
  max-width: var(--w-text);
  color: var(--c-ink-dim);
}

.post__tags {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.tag {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding: var(--s-1) var(--s-3);
  border: var(--hair);
  border-radius: 999px;
}

.post__source {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--c-ink-mute);
}

@media (max-width: 52rem) {
  .post {
    grid-template-columns: 1fr;
  }
}

/* ---------- partnership: bullets ---------------------------- */

.ticks {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  max-width: var(--w-text);
}

.ticks li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--c-ink-dim);
  line-height: var(--lh-body);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: var(--c-amber);
}

/* ---------- partnership: reach ------------------------------ */

.reach {
  display: grid;
  gap: 0;
}

.reach__row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(8rem, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: var(--hair-soft);
}

.reach__name {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reach__value {
  color: var(--c-amber);
  font-size: var(--t-body);
  white-space: nowrap;
}

.reach__where {
  font-size: var(--t-small);
  color: var(--c-ink-mute);
  text-align: right;
}

@media (max-width: 44rem) {
  .reach__row {
    grid-template-columns: 1fr auto;
    row-gap: var(--s-1);
  }

  .reach__where {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* ---------- partnership: the car ---------------------------- */

.car {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-7);
  align-items: center;
}

.car__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-raise);
  border: var(--hair);
}

.car__media img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 60rem) {
  .car {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

/* ---------- partnership: levels ----------------------------- */

.tiers {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.tier {
  padding: var(--s-5);
  background: var(--c-raise);
  border: var(--hair);
  border-radius: var(--r-md);
  transition: border-color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}

.tier:hover {
  border-color: var(--c-edge);
  transform: translateY(-2px);
}

.tier[data-lead="1"] {
  background: var(--c-panel);
  border-color: var(--c-amber-deep);
}

.tier__name {
  font-family: var(--f-display);
  font-size: var(--t-d3);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
}

.tier[data-lead="1"] .tier__name {
  color: var(--c-amber);
}

.tier__line {
  margin-top: var(--s-1);
  font-size: var(--t-small);
  color: var(--c-ink-mute);
}

.tier .ticks {
  margin-top: var(--s-4);
}

/* ---------- partners without a logo file -------------------- */

.partner--word {
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: var(--t-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-ink-mute);
  transition: color var(--d-mid) var(--e-out);
}

.partner--word:hover {
  color: var(--c-ink-dim);
}

/* ---------- footer credit ----------------------------------- */

.footer__credit {
  margin-top: var(--s-4);
}