/* ANAT — A brand with appetite. Case-study styles.
   Everything here is scoped to .an (the case-study <main>) or prefixed an-,
   so it cannot leak into the IDÉE chrome that /styles.css provides.

   Layout concept: IDÉE's light editorial frame, with ANAT's red taking over
   whole bands; chapter 02 steps through the Bakery palette into orange.
   Colour rule: IDÉE red (--red, #d12731) stays in the chrome only. Inside the
   case study every red is ANAT's own. */

.an {
  /* ANAT core — Pantone 194 C. The guide specifies R170 G10 B47 (#AA0A2F);
     the printed artwork and every supplied file render it as #AA0533, so
     grounds that sit behind artwork use the file value to stay seamless. */
  --an-red: #AA0533;
  --an-red-spec: #AA0A2F;
  --an-red-deep: #7E0626;
  /* ANAT Bakery palette, as listed on the Bakery colour board */
  --bk-194: #911738;
  --bk-200: #C10230;
  --bk-179: #E43D30;
  --bk-1645: #FF6C37;
  --bk-159: #D15E14;
  --bk-1495: #FF9015;
  /* neutrals, warmed toward the brand reds */
  --an-paper: #FAFAFA;          /* the guide's own page ground */
  --an-warm: #F4F1EE;
  --an-ink: #1D1C1B;
  --an-muted: #5C5854;
  --an-meta: #8A8681;
  --an-hair: #DCD8D4;
  --an-on-red: #FFFFFF;
  --an-on-red-soft: rgba(255, 255, 255, 0.78);
  /* type */
  --an-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --an-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --an-roboto: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  /* rhythm */
  --an-ease: cubic-bezier(0.2, 0, 0, 1);
  --an-gap: clamp(10px, 1.2vw, 18px);
  --an-sec: clamp(80px, 10vw, 160px);
  --an-pad: var(--pad, 28px);

  background: #fff;
  color: var(--an-ink);
  font-family: var(--an-sans);
}
.an *, .an *::before, .an *::after { box-sizing: border-box; }
.an img { display: block; max-width: 100%; height: auto; }
.an figure { margin: 0; }
.an :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.an-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink, #1d1c1b); color: #fff; padding: 10px 16px; border-radius: 999px;
  font: 600 13px/1 'Montserrat', sans-serif;
}
.an-skip:focus { top: 12px; color: #fff; }

/* ---------- shared type ---------- */
.an-eyebrow {
  font-family: var(--an-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--an-red); margin: 0 0 18px;
}
.an-eyebrow--light { color: var(--an-on-red-soft); }
.an-h2 {
  font-weight: 700; font-size: clamp(36px, 5.6vw, 84px); line-height: 1.0;
  letter-spacing: -0.03em; margin: 0; text-wrap: balance;
}
.an-h3 {
  font-weight: 700; font-size: clamp(26px, 3vw, 42px); line-height: 1.08;
  letter-spacing: -0.022em; margin: 0 0 18px; text-wrap: balance;
}
.an-lede {
  font-weight: 500; font-size: clamp(21px, 2.3vw, 32px); line-height: 1.3;
  letter-spacing: -0.015em; margin: 0 0 24px; max-width: 30ch; text-wrap: pretty;
}
.an-body {
  font-size: clamp(15px, 1.25vw, 17px); line-height: 1.75; color: var(--an-muted);
  margin: 0; max-width: 60ch; text-wrap: pretty;
}
.an-cap, .an figcaption {
  font-family: var(--an-mono); font-size: 11px; letter-spacing: 0.05em;
  color: var(--an-meta); margin-top: 12px; line-height: 1.6;
}
.an-back {
  display: inline-block; font-family: var(--an-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--an-on-red-soft); margin-bottom: clamp(28px, 5vw, 64px); padding: 8px 0;
}
.an-back:hover { color: #fff; }

/* the IDÉE word-reveal mask, reused for case-study headings */
.an .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.an .w__i { display: inline-block; transform: translateY(115%); transition: transform 0.85s var(--an-ease); transition-delay: calc(var(--i, 0) * 45ms + var(--d0, 0ms)); }
.an .is-in .w__i, .an .is-in.w__i { transform: none; }
.no-js .an .w__i { transform: none; }

/* ---------- sections & grids ---------- */
.an-headrow {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(18px, 4vw, 72px); align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.an-headrow > * { min-width: 0; }
.an-headrow .an-h3, .an-headrow .an-h2 { margin-bottom: 0; }
.an-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.an-split > * { min-width: 0; }

.an-fig { position: relative; }
.an-fig img { width: 100%; }
.an-fig--paper { background: var(--an-paper); }
.an-fig--paper figcaption { margin: 0; padding: 0 16px 14px; }
.an-fig--full { margin-top: var(--an-gap); }
/* equal-height pairs: each figure grows by its own aspect ratio */
.an-row { display: flex; gap: var(--an-gap); margin-top: var(--an-gap); }
.an-row > .an-fig { flex: var(--r) 1 0; min-width: 0; }
.an-row > .an-fig img { aspect-ratio: var(--r); object-fit: cover; height: auto; }

.an-bleed { width: 100%; overflow: hidden; margin: 0; }
.an-bleed img { width: 100%; }
.an-bleed--wide { aspect-ratio: 21 / 9; position: relative; }
.an-bleed--wide .an-bleed__in { position: absolute; inset: -6% 0; }
.an-bleed--wide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; transform: scale(var(--zoom, 1)); will-change: transform; }

/* ---------- hero ---------- */
.an-hero { background: var(--an-red); color: var(--an-on-red); }
.an-hero__media { position: relative; height: clamp(420px, 64svh, 760px); overflow: hidden; background: var(--an-red); }
.an-hero__photo { position: absolute; inset: -4% 0 -4% 0; }
.an .an-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.an-hero__pennant {
  position: absolute; top: 0; left: 50%; margin-left: calc(clamp(150px, 17vw, 270px) / -2);
  width: clamp(150px, 17vw, 270px); height: auto; z-index: 3;
  filter: drop-shadow(0 10px 18px rgba(60, 0, 12, 0.22));
}
/* the letterform window: a red sheet with the ANAT wordmark cut out of it */
.an-hero__window { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: none; }
.js-motion .an-hero__window { display: block; }
.an-hero__window.is-done { display: none; }
/* The mask's wordmark has NO transform in the HTML and anat.js (which sets
   one) is the last script in the body. Between the mask going live and that
   script running, the path paints at its native 214x53 user units in the
   TOP-LEFT corner — the stray little ANAT. Whether a paint lands in that gap
   is a race, which is why it only happened on some loads. No JS guard can
   catch it, because it happens before any of our JS runs. This stylesheet is
   render-blocking, so hiding the mark here is applied before the first paint;
   anat.js turns it back on once it has placed the mark correctly. */
.an-hero__window-mark { fill-opacity: 0; }
.an-hero__band { padding-block: clamp(28px, 3.4vw, 52px) clamp(40px, 4.6vw, 72px); }
.an-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px clamp(32px, 5vw, 96px); align-items: end; }
.an-hero__grid > * { min-width: 0; }
.an-hero__head .an-back { margin-bottom: clamp(18px, 2.4vw, 32px); }
.an-hero__eyebrow { margin: 0 0 14px; }
.an-hero__title {
  font-weight: 700; font-size: clamp(46px, 6.4vw, 112px); line-height: 0.96;
  letter-spacing: -0.035em; margin: 0; text-wrap: balance;
}
.an-hero__title .an-lt { font-weight: 400; }
.an-hero__lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--an-on-red-soft); max-width: 40ch; margin: 0 0 24px; }
.an-hero__jump {
  display: inline-block; color: #fff; font-family: var(--an-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 12px 18px;
  transition: background .2s, color .2s;
}
.an-hero__jump:hover { background: #fff; color: var(--an-red); }
/* load sequence (JS drives the window; CSS handles the rest) */
.js-motion .an-hero__img { transform: scale(1.1); transition: transform 2.4s var(--an-ease); }
.js-motion .an-hero__pennant { transform: translateY(-104%); transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js-motion .an-hero__lede, .js-motion .an-hero__jump, .js-motion .an-hero__eyebrow, .js-motion .an-hero__head .an-back { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--an-ease), transform .7s var(--an-ease); }
.js-motion .an-hero__lede { transition-delay: .35s; }
.js-motion .an-hero__jump { transition-delay: .5s; }
.an-hero.is-live .an-hero__img { transform: none; }
.an-hero.is-open .an-hero__pennant { transform: none; }
.an-hero.is-in .an-hero__lede, .an-hero.is-in .an-hero__jump, .an-hero.is-in .an-hero__eyebrow, .an-hero.is-in .an-hero__head .an-back { opacity: 1; transform: none; }

/* ---------- progress rail + chapter label ---------- */
.an-rail { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; pointer-events: none; }
.an-rail i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--an-red) 0 var(--split, 60%), var(--bk-1495) var(--split, 60%) 100%);
  clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
}
.an-where {
  position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px;
  background: var(--an-ink); color: #fff; font-family: var(--an-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: opacity .35s var(--an-ease), transform .35s var(--an-ease);
}
.an-where:hover { color: #fff; }
.an-where.is-away { opacity: 0; transform: translateY(12px); pointer-events: none; }
.an-where__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--where, var(--an-red)); transition: background .4s; }

/* ---------- context ---------- */
.an-context { padding-block: var(--an-sec) 0; }
.an-context__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); }
.an-context__grid > * { min-width: 0; }
.an-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--an-hair); align-self: start; }
.an-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--an-hair); }
.an-facts dt { font-family: var(--an-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--an-meta); padding-top: 4px; }
.an-facts dd { margin: 0; font-size: 14px; line-height: 1.6; }
.an-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--an-gap); margin-top: clamp(48px, 6vw, 88px); }
.an-chapters__link {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 16px;
  padding: clamp(20px, 2.4vw, 32px); background: var(--an-warm); color: var(--an-ink);
  transition: background .25s var(--an-ease), color .25s var(--an-ease);
}
.an-chapters__link:hover { background: var(--an-ink); color: #fff; }
.an-chip { grid-row: 1 / 4; width: 14px; height: 100%; min-height: 64px; background: var(--chip); }
.an-chapters__no { font-family: var(--an-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--an-meta); }
.an-chapters__name { font-weight: 700; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.02em; margin: 6px 0 4px; }
.an-chapters__sub { font-size: 14px; color: var(--an-muted); }
.an-chapters__link:hover .an-chapters__sub, .an-chapters__link:hover .an-chapters__no { color: rgba(255,255,255,.7); }

/* ---------- chapter header ---------- */
.an-chapter { padding-block: var(--an-sec) clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--an-hair); margin-bottom: clamp(48px, 6vw, 96px); }

/* ---------- logo ---------- */
.an-logo { padding-bottom: var(--an-sec); }

/* ---------- house red ---------- */
.an-red { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding-bottom: var(--an-sec); }
.an-red > * { min-width: 0; }
.an-red__stage { --wm: var(--an-red-spec); background: var(--an-paper); padding: clamp(36px, 7vw, 110px) clamp(24px, 5vw, 80px) clamp(24px, 3vw, 40px); position: sticky; top: 100px; }
.an-red__mark { width: 100%; height: auto; display: block; fill: var(--wm); transition: fill .9s var(--an-ease); }
.an-red__steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(32px, 5vw, 64px); }
.an-red__step {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--an-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--an-muted);
  background: transparent; border: 1px solid var(--an-hair); border-radius: 999px; padding: 10px 14px 10px 10px; min-height: 40px;
  transition: border-color .3s, color .3s, background .3s;
}
.an-red__step i { width: 16px; height: 16px; border-radius: 50%; display: block; }
.an-red__step:hover { border-color: var(--an-ink); color: var(--an-ink); }
.an-red__step[aria-pressed="true"] { border-color: var(--an-ink); color: #fff; background: var(--an-ink); }
.an-spec { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--an-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--an-ink); margin: 24px 0 32px; font-variant-numeric: tabular-nums; }
.an-spec span { border-top: 2px solid var(--an-red-spec); padding-top: 8px; }
.an-red__board { margin-top: 8px; }

/* ---------- type ---------- */
.an-type { background: var(--an-red); color: var(--an-on-red); padding-block: var(--an-sec); }
.an-type__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.an-type__inner > * { min-width: 0; }
.an-type .an-body { color: var(--an-on-red-soft); }
.an-type__specimen { font-family: var(--an-roboto); font-weight: 300; font-size: clamp(38px, 4.6vw, 72px); line-height: 1.05; letter-spacing: -0.01em; margin: clamp(32px, 4vw, 56px) 0 22px; }
.an-type__specimen b { font-weight: 700; }
.an-type__weights { display: flex; gap: 32px; font-family: var(--an-mono); font-size: 11px; letter-spacing: .06em; color: var(--an-on-red-soft); border-top: 1px solid rgba(255,255,255,.28); padding-top: 18px; }
.an-type__weights span { display: flex; align-items: baseline; gap: 12px; }
.an-type__weights b { font-family: var(--an-roboto); font-size: 34px; color: #fff; letter-spacing: 0; }
.an-roboto-l { font-weight: 300; }
.an-roboto-b { font-weight: 700; }
.an-type__fig img { width: 100%; }

/* ---------- photography ---------- */
.an-photo { padding-block: var(--an-sec) 0; }
.an-layer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--an-gap); margin-top: var(--an-gap); position: relative; width: 100%; }
.an-layer > * { min-width: 0; }
.an .an-layer__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1.49; }
.an-layer__photo { overflow: hidden; }
/* the wrap is cropped by the block, leaving through its bottom edge as it does on the plentyfor poster */
.an-layer__block { background: var(--an-red); position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; min-height: 280px; }
.an-layer__cut { width: 80%; margin-bottom: -22%; filter: drop-shadow(0 18px 24px rgba(50, 0, 10, 0.3)); }
.an-layer__cap { margin-top: clamp(28px, 4vw, 56px); }

/* ---------- in people's hands ---------- */
.an-hands { background: var(--an-warm); padding-block: var(--an-sec); margin-top: var(--an-sec); }
.an-posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 40px); padding: clamp(28px, 4vw, 64px) clamp(0px, 3vw, 56px) clamp(36px, 5vw, 72px); }
.an-poster img { width: 100%; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 22px 40px -18px rgba(60, 10, 20, .35); }
.an-poster figcaption { text-align: center; }
.js-motion .an-poster { opacity: 0; transform: translateY(48px); transition: opacity .8s var(--an-ease), transform 1s var(--an-ease); transition-delay: calc(var(--k, 0) * 140ms); }
.an-posters.is-in .an-poster { opacity: 1; transform: none; }
.an-poster:nth-child(2) { --k: 1; }
.an-poster:nth-child(3) { --k: 2; }

/* ---------- feed ---------- */
.an-feed { padding-block: var(--an-sec); }
/* two squares bracket two columns of landscape posts; a landscape row is half
   a square tall, so everything lands on the same edges */
.an-bento {
  /* square columns are sized so a square exactly spans two landscape rows
     (1200x628 posts) plus the gap between them: no square is ever cropped */
  --sq: calc((100% - 5 * var(--an-gap)) / 4.0934 * 1.0467 + var(--an-gap));
  display: grid; grid-template-columns: var(--sq) minmax(0, 1fr) minmax(0, 1fr) var(--sq);
  grid-template-rows: auto auto; gap: var(--an-gap);
}
.an .an-tile:not(.an-tile--sq) img { aspect-ratio: 1200 / 628; }
.an-tile { min-width: 0; overflow: hidden; background: var(--an-red); }
.an .an-tile img { width: 100%; height: 100%; object-fit: cover; }
.an-tile--sq { grid-row: span 2; position: relative; }
.an-tile--sq img { position: absolute; inset: 0; }
.an-tile--sq:first-child { grid-column: 1; grid-row: 1 / 3; }
.an-tile--sq:last-child { grid-column: 4; grid-row: 1 / 3; }
.js-motion .an-tile img { opacity: 0; transform: scale(1.06); transition: opacity .7s var(--an-ease), transform 1.1s var(--an-ease); transition-delay: calc(var(--d) * 110ms); }
.an-bento.is-in .an-tile img { opacity: 1; transform: none; }

/* ---------- one white flag ---------- */
.an-flags { background: var(--an-red); color: #fff; padding-block: var(--an-sec); }
.an-flags .an-body { color: var(--an-on-red-soft); }
.an-flags__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--an-gap); }
.an-flags__row li { min-width: 0; }
.an .an-flags__row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.an-flags__row figure { overflow: hidden; }
.an-flags figcaption { color: var(--an-on-red-soft); }
/* each flag drops in from the top edge, the way the pennant hangs on a poster */
.js-motion .an-flags__row img { transform: translateY(-38%); opacity: 0; transition: transform .9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .5s ease; transition-delay: calc(var(--k) * 130ms); }
.an-flags__row.is-in img { transform: none; opacity: 1; }

/* ---------- chapter shift ---------- */
.an-shift { padding-bottom: 0; }
.an-bk-field { background: var(--bk-1495); color: var(--an-ink); padding-block: clamp(56px, 7vw, 110px) var(--an-sec); margin-top: -1px; }
.an-bk-field .an-body { color: rgba(29, 28, 27, .82); }
.an-bk-field .an-cap, .an-bk-field figcaption, .an-bk-field .an-quote cite { color: rgba(29, 28, 27, .7); }
/* the turn: background walks through the Bakery Pantones as you scroll */
.an-turn { --tbg: var(--an-red); --tfg: #fff; height: 170svh; background: var(--tbg); color: var(--tfg); position: relative; }
.an-turn__stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.an-turn__inner { display: grid; gap: 20px; }
.an-turn__label { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-family: var(--an-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.an-turn__dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.an-turn__line { margin: 0; font-weight: 700; font-size: clamp(48px, 9vw, 150px); line-height: .94; letter-spacing: -0.04em; text-wrap: balance; }
.an-turn__note { margin: 0; max-width: 42ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; opacity: .82; }
html:not(.js-turn) .an-turn { height: auto; --tbg: var(--bk-1495); --tfg: var(--an-ink); }
html:not(.js-turn) .an-turn__stick { position: relative; height: auto; padding-block: var(--an-sec); }
.an-chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.an-chips li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--an-mono); font-size: 11px; letter-spacing: .04em; color: var(--an-ink); background: rgba(255,255,255,.55); border-radius: 999px; padding: 7px 12px 7px 8px; }
.an-chips li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.an-bk-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.an-bk-intro > * { min-width: 0; }
.an-bk-intro .an-eyebrow { color: var(--bk-194); }
.an-bk-intro__logos { display: grid; gap: var(--an-gap); }
.an-quote { margin: clamp(28px, 4vw, 48px) 0; padding: 0 0 0 clamp(18px, 2vw, 28px); border-left: 3px solid var(--bk-194); }
.an-quote p { font-weight: 500; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.4; letter-spacing: -0.012em; margin: 0 0 12px; max-width: 34ch; }
.an-quote cite { font-style: normal; font-family: var(--an-mono); font-size: 11px; letter-spacing: .06em; color: var(--an-meta); }

/* ---------- brushwork ---------- */
.an-brush { background: var(--an-paper); padding-bottom: 0; }
.an-brush__crop { overflow: hidden; }
.an-brush__field { position: relative; width: 100%; aspect-ratio: 1920 / 607; }
.an-brush__field img { position: absolute; max-width: none; }
.js-motion .an-brush__field img { clip-path: inset(0 100% 0 0); transition: clip-path .65s cubic-bezier(0.5, 0, 0.2, 1); transition-delay: calc(var(--i) * 55ms); }
.an-brush__field.is-in img { clip-path: inset(0 0 0 0); }
.an-brush { padding-bottom: var(--an-sec); }
.an-brush__pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: center; padding-top: clamp(48px, 6vw, 96px); }
.an-brush__pair > * { min-width: 0; }

/* ---------- trade ---------- */
.an-trade { padding-block: var(--an-sec); }

/* ---------- street ---------- */
.an-street { padding-bottom: 0; }
.an-street .an-headrow { padding-top: 0; }
.an-road { background: var(--an-red); padding-block: clamp(40px, 6vw, 96px); overflow: hidden; }
.an-road__inner { display: grid; gap: 24px; }
.an-road__label { font-family: var(--an-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--an-on-red-soft); margin: 0; }
.an-road__label--bk { color: var(--bk-159); margin: clamp(48px, 6vw, 88px) 0 4px; }
.an-road__vans { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 72px); align-items: end; }
.an-van { width: 100%; filter: drop-shadow(0 18px 18px rgba(40, 0, 10, .35)); }
.js-motion .an-van { transform: translateX(-70px); opacity: 0; transition: transform 1.3s cubic-bezier(0.15, 0.7, 0.2, 1), opacity .6s ease; transition-delay: calc(var(--d) * 220ms); }
.an-road.is-in .an-van { transform: none; opacity: 1; }
.an-street > .an-bleed { margin-top: var(--an-sec); }
/* the billboard board ends where its own artwork does; give it room so that edge reads as a frame, not a cut */
.an-street { padding-bottom: var(--an-gap); }

/* ---------- concept kit (IDÉE exploration, kept visibly separate) ---------- */
.an-kit { background: var(--an-warm); padding-block: var(--an-sec); border-top: 1px dashed var(--an-hair); }
.an-kit__flag {
  display: inline-block; font-family: var(--an-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--an-ink); border: 1px solid var(--an-ink); border-radius: 999px; padding: 8px 14px; margin: 0 0 22px;
}
.an-kit .an-cap { margin-top: 14px; }
.an-kit__shot { margin: 0; }
.an-kit__shot-in { overflow: hidden; }
.an .an-kit__shot img { width: 100%; height: auto; }
/* ---------- closing ---------- */
.an-close { background: var(--an-red); color: #fff; padding-block: clamp(96px, 13vw, 200px); text-align: center; }
.an-close__inner { display: flex; flex-direction: column; align-items: center; }
.an-close__lock { width: min(520px, 72%); height: auto; fill: #fff; margin-bottom: clamp(56px, 8vw, 110px); }
.an-close__h { font-weight: 700; font-size: clamp(34px, 5vw, 76px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 28px; text-wrap: balance; }
.an-close__p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: var(--an-on-red-soft); max-width: 56ch; margin: 0; text-wrap: pretty; }

/* page-level bits of IDÉE chrome that the case study uses with links rather
   than buttons */
.an-page .footer__nav a { font-size: 12px; color: var(--footer-link, #c9c6c2); padding: 6px 0; transition: color .2s; }
.an-page .footer__nav a:hover { color: var(--red, #d12731); }
.an-page .ap-nav { margin-bottom: clamp(56px, 7vw, 100px); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .an-red { grid-template-columns: 1fr; }
  .an-red__stage { position: relative; top: 0; }
}
@media (max-width: 900px) {
  .an-hero__media { height: auto; aspect-ratio: 4 / 3.6; }
  .an-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .an-hero__pennant { width: clamp(120px, 32vw, 200px); margin-left: calc(clamp(120px, 32vw, 200px) / -2); }
  .an-turn { height: 150svh; }
  .an-context__grid, .an-split, .an-type__inner, .an-bk-intro, .an-headrow, .an-brush__pair { grid-template-columns: 1fr; }
  .an-headrow { align-items: start; }
  .an-layer { grid-template-columns: 1fr; }
  .an-layer__block { min-height: 0; padding-top: 36px; }
  .an-layer__cut { width: 64%; margin-bottom: -20%; }
}
@media (max-width: 700px) {
  .an-flags__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-tile--sq:first-child, .an-tile--sq:last-child { grid-column: auto; grid-row: auto; }
  .an-tile--sq { grid-column: 1 / -1 !important; }
  .an-tile--sq img { position: static; aspect-ratio: 1; }
  .an-row { flex-direction: column; }
  .an-row > .an-fig { flex: none; }
  .an-posters { grid-template-columns: 1fr; padding-inline: 10%; gap: 32px; }
  .an-chapters { grid-template-columns: 1fr; }
  .an-road__vans { grid-template-columns: 1fr; }
  .an-bleed--wide { aspect-ratio: 4 / 3; }
  .an-facts > div { grid-template-columns: 84px minmax(0, 1fr); }
  .an-brush__field { width: 170%; margin-left: -22%; }
}
@media (max-width: 480px) {
  .an .an-tile img { aspect-ratio: 1200 / 628; }
  .an .an-tile--sq img { aspect-ratio: 1; }
}

/* ---------- reduced motion: the finished composition, still ---------- */
@media (prefers-reduced-motion: reduce) {
  .an *, .an *::before, .an *::after { transition: none !important; animation: none !important; }
  .js-motion .an-hero__window { display: none; }
  .js-motion .an-hero__img, .js-motion .an-hero__pennant, .js-motion .an-hero__head .an-back,
  .js-motion .an-hero__lede, .js-motion .an-hero__jump, .js-motion .an-hero__eyebrow,
  .js-motion .an-poster, .js-motion .an-tile img, .js-motion .an-van,
  .an-where { transition: none; }
  .js-motion .an-brush__field img { clip-path: none; }
  .js-motion .an-flags__row img { opacity: 1; transform: none; }
  .an-bleed--wide img { transform: none; }
  .an .w__i { transform: none; }
  .an-red__stage { position: relative; top: 0; }
}