/* ══════════════════════════════════════════════════════════════════════════
   VARNE — a Builds by Leo sample build
   ──────────────────────────────────────────────────────────────────────────
   Design direction, in short: high-contrast editorial minimalism. The five
   colours in the brief are used exactly as chosen, but not equally — black and
   cream carry the page, stone is structure (rules, backdrops), Sky is the only
   accent, and Green does one job (the in-stock dot). Five colours used evenly
   is what makes a page look cheap; a strict hierarchy is what makes the same
   five look premium.

   Type is Syne (display, wide-tracked uppercase) over Instrument Sans (body).
   Both self-hosted — no third-party font requests, ever.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Syne';
  src: url('/assets/fonts/syne.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* the brief's own five */
  --ink:    #111418;
  --cream:  #F0E6D6;
  --sky:    #38BDF8;
  --green:  #15803D;
  --stone:  #A8A29E;

  /* derived, so body copy clears 4.5:1 — raw --stone on paper is 2.3:1 and
     must never be used for text on a light ground */
  --paper:     #FBF9F5;
  --muted:     #6B6560;
  --line:      #E2DCD2;
  --line-dark: #2A2F36;
  --ink-soft:  #1A1F26;

  --radius: 2px;              /* nearly square — softness reads as high-street */
  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Expo-out. Almost all of the distance is covered in the first third, so a
     long duration still feels quick — that is what makes a slow move read as
     smooth rather than sluggish. Used for everything that enters. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }

img, video { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: 'Syne', 'Instrument Sans', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}

/* Visible keyboard focus everywhere. On dark grounds the ring switches to Sky
   (9.5:1 on ink); on paper it is a plain ink outline, because Sky on cream is
   1.85:1 and would be a ring you cannot see. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.on-ink :focus-visible { outline-color: var(--sky); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; }

/* Visually hidden but still read out — for labels the design carries visually
   some other way. Not the same thing as .skip, which becomes visible on focus. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.eyebrow {
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.on-ink .eyebrow { color: var(--stone); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--cream);
  font-family: 'Syne', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--ink-soft); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.on-ink .btn { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.on-ink .btn:hover { background: #fff; }
.on-ink .btn-ghost { background: transparent; color: var(--cream); border-color: var(--line-dark); }
.on-ink .btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-wide { width: 100%; }

/* ── header ─────────────────────────────────────────────────────────────── */
.head {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.head-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  height: 66px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
}
.brand {
  font-family: 'Syne', sans-serif;
  font-size: 22px; font-weight: 800;
  letter-spacing: 0.4em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.nav { display: flex; gap: 28px; justify-content: center; }
.nav a {
  font-size: 14px; text-decoration: none; color: var(--ink);
  letter-spacing: .02em; padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.head-end { display: flex; align-items: center; gap: 8px; justify-self: end; }

.bag-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  height: 40px; padding: 0 14px; cursor: pointer;
  font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.bag-btn:hover { border-color: var(--ink); }
.bag-n {
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--ink); color: var(--cream);
  border-radius: 10px; font-size: 11px; letter-spacing: 0;
}
.bag-n[data-empty="1"] { background: var(--line); color: var(--muted); }

.burger {
  display: none;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 1.5px; margin: 3px auto;
  background: var(--ink); transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.head.open .burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.head.open .burger span:nth-child(2) { opacity: 0; }
.head.open .burger span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .head-in { grid-template-columns: auto 1fr; }
  .burger { display: block; }
  .nav {
    grid-column: 1 / -1;
    display: none; flex-direction: column; gap: 0;
    padding-bottom: 10px;
  }
  .head.open .nav { display: flex; }
  .head.open .head-in { height: auto; padding-top: 12px; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
/* Copy and picture sit side by side, never as stacked layers. Text over a
   photograph is decided by the worst pixel behind it and no scrim survives an
   image swap — a split keeps the type on a flat ground for ever. */
.hero { background: var(--ink); color: var(--cream); }
.hero-in {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
}
.hero-copy {
  padding: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero h1 {
  font-size: clamp(2.9rem, 7.4vw, 5.2rem);
  letter-spacing: -0.03em;
}
.hero h1 .line-2 { display: block; color: var(--stone); }
.hero-lead {
  max-width: 34ch; margin: 22px 0 0;
  color: var(--stone); font-size: 1.05rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-media { position: relative; background: var(--ink-soft); min-height: 100%; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.hero-media video.playing { opacity: 1; }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 4 / 5; max-height: 68vh; }
  /* Once the split stacks, the copy owns the full screen width, and a narrow
     ragged column with dead space beside it is worse than a centred one. The
     lead needs its own auto margins because its max-width would otherwise pin
     it left, and the CTA row is flex, so text-align does not reach it. */
  .hero-copy { padding: 44px var(--gut) 48px; text-align: center; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
}

/* ── ticker ─────────────────────────────────────────────────────────────── */
/* Three identical copies of the list slide left by exactly one third, so the
   loop is seamless at any width — two copies leaves a gap on a wide screen.
   The duplicates are aria-hidden, so a screen reader hears the list once. */
.ticker {
  background: var(--sky); color: var(--ink);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
.ticker-track { display: flex; width: max-content; }
.ticker ul {
  display: flex; gap: 48px; margin: 0; padding: 13px 24px;
  list-style: none; flex: 0 0 auto;
  font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 42s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
}
@keyframes ticker { to { transform: translate3d(-33.3333%, 0, 0); } }

/* ── sections ───────────────────────────────────────────────────────────── */
.band { padding: clamp(56px, 8vw, 104px) 0; }
.band-ink { background: var(--ink); color: var(--cream); }
.band-cream { background: var(--cream); }

.band-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 36px;
}
.band-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.band-head a { font-size: 14px; }

/* ── product grid ───────────────────────────────────────────────────────── */
.grid {
  display: grid; gap: clamp(16px, 2.4vw, 30px);
  grid-template-columns: repeat(4, 1fr);
}
.grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .grid, .grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .grid, .grid[data-cols="3"] { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: none;
}
.card-img { display: block; }
.card[hidden] { display: none; }
.card-img {
  position: relative; overflow: hidden;
  background: #E9E4DC; border-radius: var(--radius);
  aspect-ratio: 4 / 5;
}
.card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.card:hover .card-img img { transform: scale(1.035); }
.card-quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius);
  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  text-align: center; padding: 11px 8px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.card:hover .card-quick, .card:focus-visible .card-quick { opacity: 1; transform: none; }
.card-name {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase;
  margin: 14px 0 2px;
}
.card-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.band-ink .card-meta { color: var(--stone); }

/* ── filters (shop) ─────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.chip {
  background: none; border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 18px; cursor: pointer;
  font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ── editorial split ────────────────────────────────────────────────────── */
.split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--ink-soft); aspect-ratio: 3 / 2;
}
.split-media img, .split-media video { width: 100%; height: 100%; object-fit: cover; }
.split-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.split-media video.playing { opacity: 1; }
.split h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.split p { color: var(--stone); max-width: 46ch; }
.band-cream .split p { color: var(--muted); }

/* ── three-up ───────────────────────────────────────────────────────────── */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; } }
.trio h3 {
  font-size: 15px; letter-spacing: .1em; margin-bottom: 8px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.band-ink .trio h3 { border-top-color: var(--line-dark); }
.trio p { margin: 0; color: var(--muted); font-size: 15px; }
.band-ink .trio p { color: var(--stone); }

/* ── sign-up ────────────────────────────────────────────────────────────── */
.signup { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.signup input {
  flex: 1 1 260px; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 16px;
}
.band-ink .signup input { background: var(--ink-soft); border-color: var(--line-dark); color: var(--cream); }
.signup input::placeholder { color: var(--muted); }
.band-ink .signup input::placeholder { color: var(--stone); }
.form-note { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.band-ink .form-note { color: var(--stone); }
.said { font-size: 15px; margin: 12px 0 0; color: var(--sky); font-weight: 600; }
.said[hidden] { display: none; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { background: var(--ink); color: var(--stone); padding: 56px 0 40px; font-size: 14px; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
.foot .brand { color: var(--cream); font-size: 18px; display: inline-block; margin-bottom: 12px; }
.foot h4 {
  font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
  margin: 0 0 12px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cream); text-decoration: underline; }
.foot-base {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px;
}

/* ── modal (product / bag / checkout) ───────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17, 20, 24, .55);
  opacity: 0; transition: opacity .3s var(--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.scrim.open { opacity: 1; }
.scrim[hidden] { display: none; }

.modal {
  position: fixed; z-index: 100;
  left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.985);
  width: min(940px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow: 0 30px 80px rgba(17, 20, 24, .35);
}
.modal.open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal[hidden] { display: none; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal-head h2 {
  font-size: 13px; letter-spacing: .18em; font-weight: 700; text-transform: uppercase;
}
.modal-head h2:focus { outline: none; }
.x {
  width: 40px; height: 40px; flex: 0 0 auto;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; color: var(--ink); font-size: 18px; line-height: 1;
}
.x:hover { border-color: var(--ink); }
.modal-body { overflow: auto; -webkit-overflow-scrolling: touch; }

.pdp { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .pdp { grid-template-columns: 1fr; } }
.pdp-img { background: #E9E4DC; aspect-ratio: 4 / 5; }
.pdp-img img { width: 100%; height: 100%; object-fit: cover; }
.pdp-in { padding: clamp(22px, 3vw, 34px); }
.pdp h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 6px; }
.pdp-price { font-size: 1.15rem; margin: 0 0 18px; }
.pdp-desc { color: var(--muted); margin: 0 0 20px; }
.stock {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); margin-bottom: 22px;
}
.stock::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
}
.field-label {
  font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  display: block; margin-bottom: 10px;
}
.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.size {
  min-width: 52px; min-height: 44px; padding: 0 12px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; font: inherit; font-size: 14px; color: var(--ink);
}
.size:hover { border-color: var(--ink); }
.size[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.err { color: #B42318; font-size: 14px; margin: 4px 0 0; }
.err[hidden] { display: none; }
.pdp-actions { margin-top: 22px; display: grid; gap: 10px; }
.pdp-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* Every class that sets `display` needs its own [hidden] rule, or the UA's
   [hidden] { display: none } is silently beaten and an "empty" row still
   paints its padding and borders. */
.lines { list-style: none; margin: 0; padding: 0; }
.line {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 16px;
  align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.line[hidden] { display: none; }
.line-img { background: #E9E4DC; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.line-img img { width: 100%; height: 100%; object-fit: cover; }
.line-name { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.line-sub { font-size: 13px; color: var(--muted); }
.line-end { text-align: right; }
.line-rm {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline;
}
.line-rm:hover { color: var(--ink); }

.pane { padding: clamp(22px, 3vw, 32px); }
.empty { text-align: center; padding: 48px 0; color: var(--muted); }
.totals { display: flex; justify-content: space-between; padding: 18px 0 4px; font-size: 15px; }
.totals.grand { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.pane-actions { margin-top: 22px; display: grid; gap: 10px; }

.f { margin-bottom: 16px; }
.f label {
  display: block; margin-bottom: 6px;
  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.f input {
  width: 100%; min-height: 50px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; font: inherit; font-size: 16px; color: var(--ink);
}
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-note {
  background: var(--cream); border-radius: var(--radius);
  padding: 14px 16px; font-size: 14px; margin: 0 0 22px;
}
.done-in { text-align: center; padding: 40px 20px; }
.done-in h3 { font-size: 1.6rem; margin-bottom: 12px; }
.done-ref {
  font-family: 'Syne', sans-serif; letter-spacing: .18em;
  background: var(--cream); display: inline-block; padding: 10px 18px;
  border-radius: var(--radius); margin: 18px 0 24px;
}

/* ══════════════════════════════ motion ═══════════════════════════════════
   Three separate mechanisms, and the difference between them matters:

   1. The hero entrance is a pure CSS animation with `both`. It runs on load and
      ends visible with no JavaScript involved at all — if site.js never arrives,
      the hero has still played and is readable. A .js-gated transition would
      leave the headline invisible for ever on a failed script.
   2. `.reveal` fades a whole block in as one thing.
   3. `.stagger` animates a container's CHILDREN one after another, which is
      what the product grids use. Both are .js-gated and both fall back to fully
      visible when IntersectionObserver is missing.

   The hero PHOTOGRAPH is deliberately not animated. It is the LCP element, and
   the biggest thing on the page must never wait on anything.               */

/* ── 1. the hero, on load ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .95s var(--ease-out) both; }
  .hero-copy > *:nth-child(1) { animation-delay: .06s; }
  .hero-copy > *:nth-child(2) { animation-delay: .16s; }
  .hero-copy > *:nth-child(3) { animation-delay: .28s; }
  .hero-copy > *:nth-child(4) { animation-delay: .40s; }
  /* The second line of the headline follows the first rather than arriving
     with it — the pause is what makes the sentence land. */
  .hero h1 .line-2 { animation: rise 1s var(--ease-out) .22s both; }
}
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
}

/* ── 2. blocks ──────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
.js .reveal { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ── 3. children, one after another ─────────────────────────────────────── */
/* The container itself never fades — only its children — or the two opacities
   multiply and the first card arrives at 25% while the last is still at 0. */
.stagger > * { opacity: 1; }
.js .stagger > * {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.js .stagger.in > * { opacity: 1; transform: none; }
.js .stagger.in > *:nth-child(1) { transition-delay: 0s; }
.js .stagger.in > *:nth-child(2) { transition-delay: .09s; }
.js .stagger.in > *:nth-child(3) { transition-delay: .18s; }
.js .stagger.in > *:nth-child(4) { transition-delay: .27s; }
.js .stagger.in > *:nth-child(5) { transition-delay: .36s; }
.js .stagger.in > *:nth-child(6) { transition-delay: .45s; }

/* The picture wipes up while the photograph inside settles out of an
   over-scale. Two rates moving together is what stops a fade looking flat. */
.js .stagger .card-img { clip-path: inset(0 0 100% 0); }
.js .stagger.in .card-img { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-out); }
.js .stagger .card-img img { transform: scale(1.14); }
.js .stagger.in .card-img img { transform: none; transition: transform 1.3s var(--ease-out); }
/* Restated because it has to outrank the settle rule above, which lands later
   in the file than the .card:hover rule it would otherwise beat. */
.js .stagger.in .card:hover .card-img img { transform: scale(1.035); transition: transform .5s var(--ease); }

.js .stagger.in > *:nth-child(1) .card-img,
.js .stagger.in > *:nth-child(1) .card-img img { transition-delay: 0s; }
.js .stagger.in > *:nth-child(2) .card-img,
.js .stagger.in > *:nth-child(2) .card-img img { transition-delay: .09s; }
.js .stagger.in > *:nth-child(3) .card-img,
.js .stagger.in > *:nth-child(3) .card-img img { transition-delay: .18s; }
.js .stagger.in > *:nth-child(4) .card-img,
.js .stagger.in > *:nth-child(4) .card-img img { transition-delay: .27s; }
.js .stagger.in > *:nth-child(5) .card-img,
.js .stagger.in > *:nth-child(5) .card-img img { transition-delay: .36s; }
.js .stagger.in > *:nth-child(6) .card-img,
.js .stagger.in > *:nth-child(6) .card-img img { transition-delay: .45s; }

/* The editorial pictures get the same wipe, without the stagger. */
.js .reveal .split-media { clip-path: inset(0 0 100% 0); }
.js .reveal.in .split-media { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-out) .1s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal, .js .stagger > * { opacity: 1; transform: none; }
  .js .stagger .card-img, .js .reveal .split-media { clip-path: none; }
  .js .stagger .card-img img { transform: none; }
}

.nojs { background: var(--cream); padding: 12px var(--gut); margin: 0; font-size: 14px; }