/* Reclutamiento Ganador — landing (body.landing) only.

   One container, one rhythm, one heading pattern. Every section body sits in `.shell` (max 1200px,
   centred, same gutters), so every left edge on the page falls on the same line; the only fields
   that reach the viewport edge are the two photographs: the hero and the band.

   Surfaces are told apart by a step in tone (white / bone / surface grey / navy), never by a line or
   a shadow. Motion is an enhancement and lives at the end of this file: it is gated on the `js`
   class set by src/lib/landing.js, so without script - and under `prefers-reduced-motion: reduce` -
   the page renders complete and still.

   The flavour of the page is craft, not composition; every device below is one decision applied
   everywhere it belongs:
   - Oswald sets every heading, the numerals in the step discs and the footer lockup; the body copy
     stays on the system stack. Two faces, each with one job.
   - A 4px gold bar opens every section heading: the same marker in every section.
   - Tonal depth: the vacancy field takes the bone step, the page turns navy for the ask and one step
     darker for the footer, and both navy fields carry a fine perforation.
   - One treatment for the four photographs, so the 1887 and 1907 archival plates and the 2015 and
     2023 colour shots read as one set.
   - Feedback under the hand: a sweep behind every button label, an arrow that steps aside, links
     whose underline appears on approach, cards that rise 3px behind a growing gold edge.
   Everything that travels is behind `prefers-reduced-motion: no-preference`; colour and opacity
   survive the reduced state. */

/* The display face. Oswald: the latin subset of the variable font, self-hosted, so the page makes no
   runtime request for it. Only the range the page uses is declared, and the fallback stack is the
   same broad kind (a condensed sans), never a serif standing in for a sans. */
@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.landing {
  --container: 75rem; /* 1200px: the one column every section shares */
  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --sect-pad: clamp(4rem, 8.5vw, 7rem); /* 64px on a phone, 112px on a desktop */
  --card-pad: clamp(1.5rem, 2.4vw, 2rem);
  --gap: clamp(1rem, 2vw, 1.5rem);
  --h2: clamp(1.875rem, 3.2vw, 2.75rem);
  --paper: #eae8e3; /* the bone step: the vacancy field, a low-chroma stone between the white sections
                       (14% chroma, so it stays a stone rather than a yellow cream) */
  --ink-deep: #141e38; /* the footer's own navy, one step under --ink */
  /* A fine perforation, drawn once and carried by both navy fields: a whole screen of flat navy
     reads as a hole in the page without it. Two dots per tile, at 5% white. */
  --plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='5' cy='5' r='1.1' fill='%23fff' fill-opacity='.05'/%3E%3Ccircle cx='19' cy='19' r='1.1' fill='%23fff' fill-opacity='.05'/%3E%3C/svg%3E");
  --t-sm: 1.0625rem; /* 17px: running text, one step up from the site's shared 16px */
  --radius: 0; /* decided once: the landing's buttons are square, the way its fields are */
  background: var(--ground);
}

/* The landing's sections carry their own container, so the shell is not the page's column. */
body.landing .wrap {
  max-width: none;
  padding: 0;
}

/* Anchors land below the page's own edge instead of under it, and the jump eases rather than cuts.
   Declared in this file only, so the funnel and the admin panel keep the browser's default. */
html {
  scroll-padding-top: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Gold ring on either ground: the brand gold is 5.4:1 on navy but 2.9:1 on paper, so the light
   grounds take its deep step (4.9:1). */
body.landing :focus-visible {
  outline-color: var(--gold-deep);
}

body.landing .hero :focus-visible,
body.landing .contact :focus-visible,
body.landing .site-foot :focus-visible,
body.landing .card3--ink :focus-visible {
  outline-color: var(--gold);
}

body.landing ::selection {
  color: var(--ink);
  background: var(--gold);
}

/* The one container. */
.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Controls: one button, one response ---------- */

/* Square, like every field this page draws. The tone change on hover is a sweep rather than a jump:
   a flat layer in the next step of the same gold, moved in from the left edge behind the label. The
   negative z-index sits that layer above the button's own fill and under its text, which is why the
   button needs its own stacking context (`isolation`). */
body.landing .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease);
}

body.landing .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-hover);
  transform: translateX(-101%);
}

/* The base hover fill is replaced by the sweep: the colour must not arrive before the layer does. */
body.landing .btn:hover {
  background-color: var(--gold);
}

/* The arrow of "Aplicar →" steps aside on hover. It is the label's own character in its own box, so
   the words stay selectable and the hover moves nothing else in the row. */
.btn-arrow {
  display: inline-block;
  transition: transform 180ms var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  body.landing .btn::before {
    transition: transform 260ms var(--ease);
  }
}

@media (hover: hover) {
  body.landing .btn:hover::before {
    transform: none;
  }
}

/* The travels of the hover states are motion, so they sit behind the motion preference; the sweep's
   arrival and the ghost's extra step stay, because they are a change of colour. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.landing .btn:hover {
    transform: translateY(-1px);
  }

  .btn:hover .btn-arrow {
    transform: translateX(0.22em);
  }
}

/* ---------- Masthead ---------- */

.topbar {
  background: var(--ground);
  color: var(--ink);
}

.topbar-in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(0.85rem, 2vw, 1.25rem);
}

.brand {
  display: block;
  line-height: 0;
}

.brand img {
  height: clamp(2.75rem, 4vw, 3.5rem);
  width: auto;
}

.nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  font-size: var(--t-sm);
}

.nav a {
  color: var(--ink);
}

/* Links answer the pointer by revealing an underline they already hold: the line is set at rest in a
   transparent colour and only its colour changes, so nothing on the line moves when it appears. */
.nav a,
.foot-list a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 180ms ease;
}

@media (hover: hover) {
  .nav a:hover,
  .foot-list a:hover {
    text-decoration-color: var(--gold);
  }
}

.topbar-cta {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0.7rem 1.1rem;
}

/* ---------- Hero: one photograph, one statement ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 68vh, 42rem);
  overflow: hidden;
  background: var(--ink);
  color: var(--on-navy);
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* The one treatment the page's four photographs share: pulled toward the neutral the archival
   plates are already in, so the modern colour shots and the 1887/1907 greys read as one set. */
.hero-photo,
.plate img,
.band-frame img {
  filter: grayscale(0.42) sepia(0.08) saturate(0.9) contrast(1.06);
}

/* The one gradient on the page: a navy scrim that carries the photograph and keeps the statement
   legible. Light over the picture at the top, deep behind the words at the bottom, where white on
   the scrim clears 4.5:1 even over the brightest tones of this photograph. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 21, 44, 0.25) 0%, rgba(13, 21, 44, 0.42) 32%, rgba(13, 21, 44, 0.82) 54%, rgba(13, 21, 44, 0.92) 100%); /* taste-skill-ignore gradient: navy scrim over the hero photograph for legibility, not a decorative fill */
}

.hero-in {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.hero-title {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8.6vw, 6.25rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.01em; /* capitals take less tightening than sentence case at this size */
  text-transform: uppercase;
  text-wrap: balance;
}

.hero-sub {
  max-width: 42ch;
  margin: clamp(1rem, 2vw, 1.25rem) 0 0;
  /* The lead step: one size above the body, so the sentence under a 100px headline is not set at
     the size of a card's paragraph. */
  font-size: clamp(1.0625rem, 1.05rem + 0.45vw, 1.3125rem);
  line-height: 1.45;
  color: var(--on-navy-soft);
  text-wrap: pretty;
}

.hero-act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

.hero-btn {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0.9rem 1.6rem;
}

/* A tone step rather than an outline: white on navy at 14% white is 13:1. The hover adds one more
   step, swept in the same way the solid buttons do. */
.hero-btn--ghost {
  color: var(--on-navy);
  background: rgba(255, 255, 255, 0.14);
}

.hero-btn--ghost::before {
  background: rgba(255, 255, 255, 0.1);
}

/* The ghost keeps its own fill: the sweep carries its hover, not the gold step. */
@media (hover: hover) {
  body.landing .hero-btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.14);
  }
}

/* ---------- One rhythm for every section ---------- */

.sect {
  padding-block: var(--sect-pad);
}

.sect-surface {
  background: var(--surface);
}

/* The bone step: the vacancy field sits between the white of the first section and the white of the
   last, so the two are not the same field twice. */
.sect-paper {
  background: var(--paper);
}

/* A 4px bar over the heading: the one mark every section opens with, drawn as a filled shape rather
   than a rule. It runs on the label's own left edge, so the sections keep their one shared edge. */
.sect-title::before,
.contact-title::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 0.25rem;
  margin-bottom: clamp(0.875rem, 1.6vw, 1.25rem);
  background: var(--gold-deep);
}

.contact-title::before {
  background: var(--gold);
}

/* One heading pattern: left-aligned H2, at most one muted line under it, and the same gap before
   whatever the section holds. */
.sect-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sect-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.sect-sub {
  margin: 0.75rem 0 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- Qué hacemos: three facts, then the plate ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

.fact-icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.15rem;
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.facts b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.5vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.facts span {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The picture that closes a section: the plate. It is taken out of the flow's own rhythm by the
   margin only, so both sections that carry one crop it the same way. */
.plate {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  overflow: hidden;
}

.plate img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--surface);
}

.plate figcaption {
  margin-top: 0.65rem;
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

/* ---------- Cómo trabajamos: three equal cards ---------- */

.cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.card3 {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--card-pad);
  background: var(--ground);
}

.card3--ink {
  background: var(--ink);
  color: var(--on-navy);
}

.card3-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.card3 h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 1.7vw, 1.5625rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.card3 p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.card3--ink p {
  color: var(--on-navy-soft);
}

/* The card's own mark, drawn here rather than taken from an icon font. */
.card3-icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gold-deep);
}

.card3--ink .card3-icon {
  color: var(--gold);
}

/* ---------- The band: the one field that reaches both edges ---------- */

.band-frame {
  margin: 0;
  overflow: hidden;
}

.band-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: cover;
}

/* ---------- Vacantes activas: equal cards, one action each ---------- */

/* auto-fit collapses the tracks no card uses, so one or two positions fill the container and three
   share the row evenly. 22rem keeps three of them on one desktop row: the headline carries the pay,
   so it wraps to two or three lines inside that width. */
.vac-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vac {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--card-pad);
  background: var(--ground);
}

.vac-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.vac-where,
.vac-meta {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The hiring profiles of a vacancy, as chips. A tone step and a readable size, no outline. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.25rem 0.65rem;
  font-size: var(--t-xs);
  color: var(--ink);
  background: var(--surface);
}

/* One action per card, on the card's own bottom edge, so the cards' buttons line up. It keeps its
   own width: a card that fills the container would otherwise carry a button the full width of it. */
.vac-act {
  margin: auto 0 0;
  padding-top: 1rem;
}

.vac-act .btn {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0.9rem 1.6rem;
}

.empty {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.25;
}

.vac-empty-act {
  margin: 1.5rem 0 0;
}

.vac-empty-act .btn {
  display: inline-block;
  width: auto;
  margin: 0;
}

/* ---------- Cómo funciona: three numbered cards in a row ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  align-content: start;
  padding: var(--card-pad);
  background: var(--surface);
}

/* The order is the ordered list's own; this is the same count, written for the eye. */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 1.7vw, 1.5625rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.step-note {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- Contacto: the page turns navy and stays navy ---------- */

/* The ask and the footer are one dark close, so the field runs to both edges and no white strip is
   left standing between them. It carries the same perforation the footer does. */
.field-navy {
  background-color: var(--ink);
  background-image: var(--plate);
  color: var(--on-navy);
}

.contact {
  max-width: 46rem;
}

.contact-title {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.contact-act {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

.contact-act .btn {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0.9rem 1.6rem;
}

/* ---------- Footer: three columns, the brand bar, the wordmark ---------- */

.site-foot {
  overflow: hidden;
  padding-block: var(--sect-pad) 0;
  /* One step under the ask's navy: the page closes on its darkest field, told apart from the field
     above by tone alone. The perforation runs across both. */
  background-color: var(--ink-deep);
  background-image: var(--plate);
  color: var(--on-navy);
}

.site-foot a {
  color: var(--on-navy);
}

/* The footer's own gold button keeps the navy label the rest of the site uses: paper on gold is
   2.4:1 and unreadable. */
.site-foot .btn {
  color: var(--ink);
}

/* Three columns of plain links: the channels, the page, the notice. They spread across the page's
   own container - the channels on the left edge, the page in the middle, the notice on the right
   edge - and are told apart by weight and by the step down in tone, never by a rule. */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 3.5rem);
}

.foot-col:nth-child(2) {
  justify-self: center;
}

.foot-col:nth-child(3) {
  justify-self: end;
}

.foot-head {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0;
}

.foot-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  color: var(--on-navy-soft);
}

/* The one actionable line down here: the number itself, in the brand gold (5.4:1 on navy),
   underlined the way every other link on the site is. */
.foot-list a.foot-tel {
  color: var(--gold);
  text-decoration-line: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.18em;
}

/* The underline of every other footer link arrives only under the pointer (see `.nav a`). */
@media (hover: hover) {
  .foot-credits summary:hover {
    text-decoration: underline;
    text-decoration-color: var(--gold);
  }

  .foot-list a.foot-tel:hover {
    color: var(--gold-hover);
    text-decoration-color: var(--gold-hover);
  }
}

/* The brand bar: the record on the left, the picture credits on the right, the two of them sitting
   on the © line, and one hairline above the pair. */
.foot-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.5rem, 7vh, 4rem);
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16); /* taste-skill-ignore hairline: the one divider the brief asks for, above the brand bar */
}

.foot-legal {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--on-navy-soft);
}

/* The logo chip stands on the © line rather than beside it: an image has no baseline of its own, so
   the bottom edge of the chip is the baseline it meets the text on. */
.foot-brand {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.foot-brand img {
  height: 2.5rem;
  width: auto;
  padding: 0.35rem;
  background: var(--ground);
}

/* The credits of the four photographs, folded into a disclosure: the summary is the only thing the
   visitor reads, and it opens natively, with or without script. It takes the bar's right edge. */
.foot-credits {
  margin: 0;
  max-width: 30rem;
  font-size: var(--t-xs);
  color: var(--on-navy-soft);
}

.foot-credits summary {
  width: fit-content;
  margin-left: auto;
  padding: 0.35rem 0;
  cursor: pointer;
}

.foot-credits summary::marker {
  color: var(--gold);
}

.foot-credit-list {
  display: grid;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.foot-credit-note {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
}

/* The wordmark closes the page at the container's own width: the size is chosen so the seven letters
   fill the column edge to edge, and the footer's own bottom edge crops them on purpose. */
.foot-mark {
  margin: clamp(3rem, 9vh, 6rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 23.3vw, 17.75rem); /* 23.3vw is (100vw - the gutters) / the word's own width in em */
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold);
  transform: translateY(0.28em);
}

/* ---------- The card families: one response under the pointer ---------- */

/* Every boxed card on the page answers the pointer the same way: it rises 3px and a gold edge grows
   down its left side. The rise is on `translate`, not `transform`, so the entrance roll - which uses
   `transform` - keeps its own, longer transition. The base rules carry the longer timings because
   they have to outrank the reveal's own transition. */
body.landing .card3,
body.landing .step,
body.landing .vac {
  position: relative;
  translate: 0 0;
  transition: background-color 200ms ease;
}

.card3::before,
.step::before,
.vac::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0.25rem;
  background: var(--gold-deep);
  transform: scaleY(0);
  transform-origin: top;
}

.card3--ink::before {
  background: var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
  body.landing .card3,
  body.landing .step,
  body.landing .vac {
    transition: translate 220ms var(--ease), background-color 200ms ease, transform 0.55s var(--ease), opacity 0.55s var(--ease);
  }

  .card3::before,
  .step::before,
  .vac::before {
    transition: transform 260ms var(--ease);
  }
}

/* The edge arrives under either motion setting; only the rise is dropped when motion is reduced. */
@media (hover: hover) {
  .card3:hover::before,
  .step:hover::before,
  .vac:hover::before {
    transform: none;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.landing .card3:hover,
  body.landing .step:hover,
  body.landing .vac:hover {
    translate: 0 -3px;
  }
}

/* ---------- Motion: an entrance for what scrolls into view, and nothing more ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* The photograph drifts on its own, slowly enough to read as light rather than as movement. */
  .hero-photo {
    animation: hero-drift 34s ease-in-out infinite alternate;
  }

  /* Each block that comes up: a short rise and a fade, staggered by section in landing.js. */
  .js .reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  }

  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* A picture is uncovered with a slow zoom rather than a rise. */
  .js .band-frame img,
  .js .plate img {
    transform: scale(1.05);
    transition: transform 1.1s var(--ease);
  }

  .js .band-frame.reveal.is-in img,
  .js .plate.reveal.is-in img {
    transform: none;
  }
}

@keyframes hero-drift {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.09);
  }
}

/* ---------- Anything narrower than a desktop: one column, the same rhythm ---------- */

@media (max-width: 63.99rem) {
  .facts,
  .cards3,
  .steps,
  .vac-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts {
    gap: 1.75rem;
  }

  /* The brand bar stacks: the record, then the credits below it. */
  .foot-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .foot-credits summary {
    margin-left: 0;
  }
}

/* ---------- Phones: one column, thumb-sized targets ---------- */

@media (max-width: 47.99rem) {
  .topbar-in {
    grid-template-columns: auto auto;
    row-gap: 0.75rem;
  }

  .brand {
    grid-row: 1;
    grid-column: 1;
  }

  .brand img {
    height: 3rem;
  }

  .topbar-cta {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  .nav {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .hero-scrim {
    background: linear-gradient(180deg, rgba(13, 21, 44, 0.5) 0%, rgba(13, 21, 44, 0.82) 48%, rgba(13, 21, 44, 0.92) 100%); /* taste-skill-ignore gradient: navy scrim over the hero photograph for legibility, not a decorative fill */
  }

  /* Stacked actions on a phone: full width, one under the other. */
  .hero-act {
    display: grid;
    gap: 0.6rem;
  }

  .hero-btn {
    display: block;
    width: 100%;
    padding: 0.95rem 1.25rem;
  }

  /* A 2:1 crop of the plate on a phone is a letterbox; at 16:10 the machine still reads. */
  .plate img {
    aspect-ratio: 16 / 10;
  }

  /* A 21:9 crop of the hall on a phone is a strip 167px tall; at 16:10 the band still reads as a
     band and the line stays legible. */
  .band-frame img {
    aspect-ratio: 16 / 10;
    max-height: none;
  }

  .foot-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  /* One column: the three of them start on the section's left edge again. */
  .foot-col:nth-child(2),
  .foot-col:nth-child(3) {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo,
  .band-frame img,
  .plate img {
    animation: none;
    transform: none;
    transition: none;
  }
}