/* Par site, opening "Made for whom?", in the crayon language. Paper, Newsreader and the tactile
   button come from the landing; the drawings, the cobalt line, the bold italic keyword and the
   ink-and-yellow choices come from the illustration kit (kit.css, loaded after this file).
   Nothing here draws an image: every picture is a drawing from the image model. */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/newsreader-400.ttf) format("truetype"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/newsreader-400-italic.ttf) format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/geist-400.ttf) format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/geist-500.ttf) format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/geist-600.ttf) format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/dm-sans-600-latin.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-400.ttf) format("truetype"); }

/* Landing tokens: verbatim values from the PR234 landing (par-landing scope). */
:root {
  --bg: #f7f0e1;
  --surface: #fffdf8;
  --text: #211a10;
  --text-muted: #6e6350;
  --text-faint: #8a7f68;
  --text-rule: #e7ddc5;
  --border: #e9dec7;
  --border-strong: #d8cbaa;
  --accent: #2b231b;

  /* the V2 selection blue: where the reader acts */
  --act-ink: #496c99;

  /* long pages alternate their ground (Gustavo, 18/10). The site has no dark green or mint band:
     the dark closing is the site's ink; the paper is a calm step down from the page's cream. */
  --ink-close: #211a10;
  --ink-band: var(--accent);
  --on-ink: #f7f0e1;
  --on-ink-2: #e9dec7;
  --on-ink-3: #cbbf9f;
  --paper-2: #efe6d1;

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 5vw, 64px);
  --wrap: 1240px;

  color-scheme: light;
}

/* Par design-system tokens the tactile button needs: verbatim from app/assets/tailwind/par.css
   (light theme). */
:root {
  --par-accent: oklch(0.72 0.12 258);
  --par-glass-brd: oklch(0.46 0.055 78 / 0.16);
  --par-glass-top: oklch(1 0.014 92 / 0.8);
  --par-sh-1: 0.13;
  --par-sh-2: 0.17;
  --par-sh-3: 0.26;
  --par-r-sm: 10px;
  --par-ease: cubic-bezier(.34, 1.56, .64, 1);
  --par-dur-fast: .1s;
  --par-dur: .18s;
  --par-dur-slow: .28s;
}

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

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

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: color-mix(in srgb, #f5c63c 45%, transparent); color: var(--text); }

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--act-ink); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  padding: 10px 14px; background: var(--surface); border-radius: 8px;
  text-decoration: none; font-size: 14px;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Header ───────────────────────────────────────────────────────── */

.site-header-inner {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* The mark and the word as the product sets them (auth layout, Par menu): DM Sans 600 beside
   par-mark.png, at V2's size. The png carries air around the P, so the negative margins put the
   P itself on the column edge. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: "DM Sans", var(--font-body);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
  color: var(--text);
}
.brand img { width: 48px; height: 48px; margin: 0 -2px 0 -11px; }
.quiet-link {
  font-size: 16px;
  color: var(--text);
  text-decoration: underline 1px;
  text-underline-offset: 6px;
  padding: 10px 2px;
}
.quiet-link:hover { text-decoration-thickness: 2px; }

/* ── Hero: the words on the left, the shared brain on the right ───── */

.hero { padding: clamp(8px, 2vh, 32px) 0 0; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  gap: 24px clamp(24px, 3vw, 48px);
  align-items: center;
}

.category {
  margin: 0 0 22px;
  font: 500 14px/1.4 var(--font-body);
  color: var(--text-muted);
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text);
  margin: 0;
}
h1 {
  font-size: clamp(42px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h1 em { font-style: italic; }

/* The part that changes with the person: the kit's keyword, bold italic, on a line of its own
   (pil-key--line). All five phrases share one grid cell, so nothing below it moves. */
.swap { display: grid; white-space: nowrap; }
.phrase { grid-area: 1 / 1; justify-self: start; visibility: hidden; opacity: 0; transition: opacity 720ms var(--ease), visibility 0s 720ms; }
.phrase.is-active { visibility: visible; opacity: 1; transition: opacity 720ms var(--ease); }

.lead {
  margin: 24px 0 30px;
  font-size: clamp(16.5px, 1.4vw, 18px);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 36ch;
}
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
/* Compatibility marks keep their original artwork and the site's body typography. */
.hero-compatibility { margin: 0 0 28px; }
.hero-compatibility-title { margin: 0 0 8px; font-size: 14px; color: var(--text-muted); }
.hero-ai-list { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; margin: 0; list-style: none; }
.hero-ai-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-size: 16px; }
.hero-ai-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-ai-list img { width: 28px; height: 28px; object-fit: contain; }
.hero-compatibility-note { margin: 10px 0 0; max-width: 48ch; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.hero-compatibility-note a { text-underline-offset: 3px; }
.picker-label .swap { display: inline-grid; }

/* the opening's loop is laid out wider than the still (see .hero-loop): the figure keeps it in */
.hero-art.pil-art { margin-block: 0; position: relative; overflow: hidden; }
/* the drawing's point in plain words, under it, never on it */
.hero-caption {
  max-width: 46ch;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted);
}
/* the opening's loop (loop.js) lies exactly over the still and never takes a click. The clip came
   back from the animation tool a little squashed (1.32% narrower, 3.2% shorter, 3 px over, measured
   on its first frame against the still), so it is laid out in the still's own units: 120.083% of
   its width, 103.2% of its height, 8.98% to the left. The mask crops it back to the still's frame
   (7.48% to 90.75% of its width, 0 to 96.9% of its height) and fades the last 24 px of each side,
   so no box shows; under the fade the still shows through, and the two line up. The clip's paper is
   encoded as the page's cream (#f7f0e0). It shows only once a frame is on screen. */
.hero-loop {
  position: absolute;
  top: 0;
  left: -8.9815%;
  width: 120.083%;
  height: auto;
  aspect-ratio: 1296.9 / 743.04;
  margin-top: 0.0463%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 7.48%, #000 calc(7.48% + 24px), #000 calc(90.75% - 24px), transparent 90.75%), linear-gradient(to bottom, transparent 0%, #000 24px, #000 calc(96.9% - 24px), transparent 96.9%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 7.48%, #000 calc(7.48% + 24px), #000 calc(90.75% - 24px), transparent 90.75%), linear-gradient(to bottom, transparent 0%, #000 24px, #000 calc(96.9% - 24px), transparent 96.9%);
  mask-composite: intersect;
}
.hero-art.is-looping .hero-loop { opacity: 1; }
/* the drawing is the loop's button once the clip is in: pause, play on, or two more rounds. It covers
   the drawing only, not the caption, and shows the site's focus ring. */
.hero-loop-toggle { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; aspect-ratio: 1536 / 1024; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-loop-toggle[hidden] { display: none; }
/* the figure clips what leaves it, so the ring sits just inside the drawing's edge */
.hero-loop-toggle:focus-visible { outline-offset: -6px; }

/* Par's tactile button: verbatim from the design system (par-btn + its ring), primary tone. */
.par-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: oklch(from var(--par-btn) 0.34 calc(c + 0.05) h);
  background-color: transparent;
  background-image: linear-gradient(180deg, color-mix(in oklch, var(--par-btn) 88%, transparent), var(--par-btn));
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    0 3px 6px -1px oklch(0 0 0 / var(--par-sh-1)),
    0 14px 28px -6px oklch(0 0 0 / var(--par-sh-2)),
    0 26px 50px -12px oklch(0 0 0 / var(--par-sh-3));
  transition:
    background-color var(--par-dur-slow) ease,
    transform var(--par-dur) var(--par-ease),
    box-shadow var(--par-dur-slow) ease;
}
.par-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--par-glass-top), transparent 45%, var(--par-glass-brd));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.par-btn--primary { --par-btn: oklch(from var(--par-accent) 0.81 0.11 h); }
.par-btn:hover {
  background-color: var(--par-btn);
  transform: translateY(-1px) scale(1.025);
  box-shadow:
    0 6px 12px -2px oklch(0 0 0 / calc(var(--par-sh-1) + 0.05)),
    0 18px 36px -8px oklch(0 0 0 / calc(var(--par-sh-2) + 0.08)),
    0 38px 64px -12px oklch(0 0 0 / calc(var(--par-sh-3) + 0.1));
}
.par-btn:active {
  transform: translateY(1px) scale(.95);
  box-shadow: 0 1px 2px oklch(0 0 0 / var(--par-sh-2)), 0 4px 12px -5px oklch(0 0 0 / var(--par-sh-1));
  transition: transform var(--par-dur-fast) ease, box-shadow var(--par-dur-fast) ease;
}
.cta { padding: 17px 26px; min-height: 50px; border-radius: var(--par-r-sm); }

/* ── Made for: the drawing, then the choices, then the words ─────── */

/* Gustavo's order (18/10): image, then the choices, then the text; the choices small and quiet,
   in the site's own hand (cream, ink, a thin rule), not the crayon kit's. */
.madefor { margin-top: clamp(28px, 4vw, 56px); }
/* The five drawings, and below the five panels, each share one grid cell: the block keeps the
   tallest one's height and nothing below it moves. The closed ones keep their hidden attribute
   (out of the accessibility tree, and closed with no script) but still hold their place. */
.person-arts { display: grid; justify-items: center; }
.person-art.pil-art { grid-area: 1 / 1; margin: 0; width: min(100%, 480px); }
.person-art[hidden] { display: block; visibility: hidden; }
.person-art .pil-spot { width: 100%; margin: 0 auto; }

.picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 12px;
  margin: 16px auto 0;
  max-width: 760px;
}
.picker-label { font: 500 13px/1 var(--font-body); color: var(--text-muted); }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.madefor-choice {
  position: relative;
  min-height: 32px;
  padding: 7px 13px 6px;
  font: 500 14px/1 var(--font-body);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.madefor-choice:hover { border-color: var(--text); }
.madefor-choice[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
/* small to the eye (32 px), but a 48 px target for a finger; the rows sit far enough apart that
   two targets never overlap */
@media (pointer: coarse) {
  .choices { row-gap: 16px; }
  .madefor-choice::after { content: ""; position: absolute; inset: -8px -3px; }
}

.people { display: grid; max-width: 34em; margin: 22px auto 0; text-align: center; }
.person { grid-area: 1 / 1; }
.person[hidden] { display: block; visibility: hidden; }
.person-line {
  margin: 10px 0 16px;
  font: 400 clamp(26px, 2.6vw, 34px)/1.16 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.person-link { display: inline-block; }

/* ── Bands: full width, their own ground ──────────────────────────── */

/* The page's long run alternates its ground: cream, paper for what Par does with what it knows,
   the tour on cream, paper again for what every app gets, then the ink closing. */
.band { margin-top: clamp(80px, 10vw, 140px); padding-block: clamp(48px, 6.5vw, 96px); }
.band--paper { background: var(--paper-2); }
.band--ink { background: var(--ink-close); color: var(--on-ink); }
.band-kicker { margin: 0 0 12px; font: 500 14px/1.4 var(--font-body); color: var(--text-muted); }
/* two paper bands in a row read as one paper run, the second picking up under the first */
.band--paper + .band--paper { margin-top: 0; padding-top: 0; }
/* what every app gets runs straight into the ink closing, with no strip of cream between */
.band--paper + .band--ink { margin-top: 0; }
.band-title {
  max-width: 22ch;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.band-art { margin: clamp(24px, 3vw, 40px) auto 0; max-width: 1080px; }
/* What every app comes with: the kit's icon list, under the band title (kit.css loads later and zeroes .pil-icons margins) */
.pil-icons.ready-list { margin-top: clamp(28px, 3.4vw, 48px); }
.ready-list p { margin: 0; }
/* icon and words start on one line, so a two-line title doesn't rise above its neighbours */
.pil-icons.ready-list li { align-items: start; }
.pil-icons.ready-list span { font-size: 16px; }
.band-art img { width: 100%; }
.band-text {
  max-width: 52ch;
  margin: clamp(16px, 2vw, 24px) auto 0;
  font: 400 clamp(19px, 1.6vw, 22px)/1.5 var(--font-display);
  text-align: center;
  text-wrap: balance;
}
.band--ink .band-title { max-width: 24ch; color: var(--on-ink); }
.band--ink .band-title em { font-style: italic; }
.band-link {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 2px;
  font-size: 17px;
  font-weight: 500;
  color: var(--on-ink);
  text-decoration: underline 1px;
  text-underline-offset: 6px;
}
.band-link:hover { text-decoration-thickness: 2px; }

/* ── The tour: every page, one block each, in four groups ─────────── */

/* Site components in the site's hand (cream, ink, Newsreader and mono, thin rules); the crayon is
   only in the drawings, each the page's own. */
.tour { margin-top: clamp(64px, 8vw, 112px); }
.tour-kicker { margin: 0 0 12px; font: 500 14px/1.4 var(--font-body); color: var(--text-muted); }
.tour-title {
  max-width: 20ch;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.tour-group { margin-top: clamp(48px, 6vw, 84px); }
.tour-group-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--text);
  font: italic 400 clamp(24px, 2.4vw, 30px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.tour-num { font: normal 500 13px/1 var(--font-body); color: var(--text-muted); }
/* six tracks: three cards a row; a group of five closes on two wider ones, a group of two on two
   halves, so no row is left with a hole */
.tour-grid {
  --tour-col-gap: clamp(20px, 2.6vw, 40px);
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(32px, 3.4vw, 48px) var(--tour-col-gap);
  margin-top: clamp(20px, 2.6vw, 32px);
}
.tour-card { position: relative; grid-column: span 2; min-width: 0; display: flex; flex-direction: column; }
/* the whole card opens its page: the first link stretches over it; a second link stays on top */
.tour-links a:first-child::after { content: ""; position: absolute; inset: 0; }
.tour-links a + a { position: relative; z-index: 1; }
.tour-card:hover .tour-line { text-decoration: underline 1px; text-underline-offset: 0.14em; }
.tour-art img { transition: transform 200ms var(--ease); }
.tour-card:hover .tour-art img { transform: translateY(-2px); }
.tour-card:has(.tour-links a:first-child:focus-visible) { outline: 2px solid var(--act-ink); outline-offset: 3px; border-radius: 4px; }
.tour-card:has(.tour-links a:first-child:active) { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .tour-art img { transition: none; }
  .tour-card:hover .tour-art img { transform: none; }
}
.tour-links a:first-child:focus-visible { outline: none; }
.tour-grid[data-count="5"] > .tour-card:nth-child(n+4),
.tour-grid[data-count="4"] > .tour-card,
.tour-grid[data-count="2"] > .tour-card { grid-column: span 3; }
/* a wider card keeps a third's drawing, on its left edge, so its picture is no bigger than the row's */
@media (min-width: 1024px) {
  .tour-grid[data-count="5"] > .tour-card:nth-child(n+4) .tour-art,
  .tour-grid[data-count="4"] > .tour-card .tour-art,
  .tour-grid[data-count="2"] > .tour-card .tour-art { width: calc((100cqw - 2 * var(--tour-col-gap)) / 3); }
}
/* every drawing gets the same 3:2 box, standing on its bottom edge, so a square one (north star)
   can't grow its card and push the names out of line; overflow hidden keeps the box at 3:2 */
.tour-art { margin: 0; aspect-ratio: 3 / 2; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; }
.tour-art img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.tour-name { margin: 14px 0 6px; font: 500 13px/1.3 var(--font-body); color: var(--text-muted); }
.tour-line {
  margin: 0;
  font: 400 clamp(22px, 1.9vw, 27px)/1.16 var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.tour-short { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-muted); max-width: 46ch; }
.tour-links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 0 20px; }

/* the feature: the group opens on the logo's ink, the words first, the drawing on a cream card
   (its black outlines need the paper); the one place the tour leaves the cream */
.tour-card--feature {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(20px, 2.6vw, 32px);
  padding: clamp(28px, 4.4vw, 64px);
  border-radius: clamp(16px, 2vw, 24px);
  background: var(--ink-band);
  color: var(--on-ink);
}
.tour-card--feature + .tour-grid { margin-top: clamp(32px, 3.4vw, 48px); }
.tour-card--feature .tour-text { order: -1; }
.tour-card--feature .tour-art { padding: clamp(12px, 2vw, 24px); border-radius: clamp(12px, 1.6vw, 18px); background: var(--bg); }
.tour-card--feature .tour-name { margin-top: 0; color: var(--on-ink-3); }
.tour-card--feature .tour-line { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.03; letter-spacing: -0.02em; color: var(--on-ink); }
.tour-card--feature .tour-line em { font-style: italic; }
.tour-sub { margin: 14px 0 0; font: italic 400 clamp(21px, 2.2vw, 26px)/1.25 var(--font-display); color: var(--on-ink-2); }
.tour-card--feature .tour-short { margin-top: 12px; color: var(--on-ink-2); }
.tour-card--feature .tour-links a { color: var(--on-ink); }
.tour-card--feature :focus-visible { outline-color: var(--on-ink); }

/* ── The last call: one closing, on the ink ────────────────────── */

/* the question, the first step, the button and the other pages */
.final-title { max-width: 20ch; margin-bottom: 20px; }
.final-step { max-width: 46ch; margin: 0 0 28px; font: 400 clamp(19px, 1.6vw, 22px)/1.5 var(--font-display); }
.final .actions { gap: 8px 28px; }
.final .band-link { margin-top: 0; }

/* The page ends on the site's shared map: keep the air the footer used to give before it. */
main { padding-bottom: clamp(64px, 9vw, 120px); }

/* ── Made for: the same crossfade for the drawing, words and headline ── */
.person, .person-art { opacity: 1; transition: opacity 720ms var(--ease), visibility 0s; }
.person[hidden], .person-art[hidden] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 720ms var(--ease), visibility 0s 720ms;
}
.madefor-autoplay { border-color: transparent; color: var(--text-muted); font-size: 12px; }
.madefor-autoplay[hidden] { display: none; }
@media (pointer: coarse) {
  .madefor-autoplay { min-height: 48px; }
  .madefor-autoplay::after { inset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .person, .person-art, .person[hidden], .person-art[hidden],
  .phrase, .phrase.is-active, .madefor-choice, .par-btn { transition: none; }
}

/* ── Tablet: the drawing goes under the words ─────────────────────── */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(40px, 7.4vw, 64px); }
  .hero-art.pil-art { max-width: 760px; }
  .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* as specific as the six-track spans above, so it wins */
  .tour-grid[data-count] > .tour-card:nth-child(n) { grid-column: span 1; }
  .tour-card--feature { grid-template-columns: minmax(0, 1fr); }
  /* an odd card out takes the whole row, drawing beside its words */
  .tour-grid > .tour-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 clamp(20px, 3vw, 36px);
    align-items: center;
  }
}

/* ── Phone ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .site-header-inner { height: 76px; }
  .brand { font-size: 25px; }
  .brand img { width: 42px; height: 42px; margin-left: -10px; }
  .category { font-size: 13px; margin-bottom: 16px; }
  h1 { font-size: clamp(38px, 10.6vw, 48px); line-height: 1.06; }
  .lead { margin: 18px 0 26px; }
  .hero-compatibility { margin-bottom: 26px; }
  .actions { gap: 20px; }
  .person-arts { justify-items: stretch; }
  .person-art.pil-art { width: auto; margin-inline: calc(-1 * var(--gutter)); }
  .person-line { font-size: clamp(25px, 7vw, 30px); }
  /* the drawing runs edge to edge (the kit's pil-art); its caption keeps the page's gutter */
  .hero-caption { padding-inline: var(--gutter); }
  .band-art { margin-inline: calc(-1 * var(--gutter)); }
  .band-text { text-align: left; }
  /* the how-it-works diagram turns tall on a phone: shown whole, not in the 3:2 frame */
  .tour-card--wide .tour-art { aspect-ratio: auto; }
  .tour-card--wide .tour-art img { height: auto; }
}

/* ── Phone, the tour: one block a row ─────────────────────────────── */
@media (max-width: 640px) {
  .tour-grid { grid-template-columns: minmax(0, 1fr); }
  /* back to a column, stretched: with the tablet's centring the drawing's frame is 0 px until the
     lazy picture loads, and the page jumps when it does */
  .tour-grid > .tour-card:last-child:nth-child(odd) { display: flex; align-items: stretch; }
}

@media (max-width: 480px) {
  .hero-ai-list { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 24px; }
}