/* Taste · desktop 1280 / mobile 390 (Figma "Taste page V3 · rubric stack").
   Vertical rhythm comes from the frame's abs Y values; horizontal art sits on a centred 1280 / 390 canvas. */

.taste main { position: relative; }

/* Hero → rubric colour change on scroll: taste.js sets --t-bg (white → #1E1E1E) and --t-dark (0 → 1) from the
   rubric's position. The hero and the rubric share that one colour, so their boundary never shows a line; the
   hero's white glows / lime art fade out and its text turns white as it darkens, and the rubric's dark-only
   decoration (pattern, glow) fades in as the dark arrives. Without JS: white hero, #1E1E1E rubric. */
.t-hero { background: var(--t-bg, #fff); --tw: calc((1 - var(--t-dark, 0)) * 100%); }
.t-hero__bg { opacity: calc(1 - 3 * var(--t-dark, 0)); }   /* white glows + white bottom fade gone by a third of the way, so the hero/rubric seam never shows */
.t-hero .t-hero__title, .t-hero .t-hero__links a { color: color-mix(in srgb, var(--text) var(--tw), #fff); }
.t-hero .t-hero__lede { color: color-mix(in srgb, rgba(18, 18, 18, 0.65) var(--tw), rgba(255, 255, 255, 0.7)); }
.t-hero .t-hero__note { color: color-mix(in srgb, rgba(18, 18, 18, 0.6) var(--tw), rgba(255, 255, 255, 0.65)); }
.t-hero .t-hero__divider { background: color-mix(in srgb, #eaeaea var(--tw), #3a3a3a); }


/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
/* At least one screen tall (the dark rubric never shows on landing); coin + copy centred as one group below the nav */
.t-hero { position: relative; display: flex; flex-direction: column; min-height: 688.78px; min-height: max(688.78px, calc(100 * var(--vh))); min-height: max(688.78px, calc(100 * var(--svh))); }
.t-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.t-hero__bg > * { position: absolute; }
.t-hero__art { top: 0; width: min(50%, 640px); height: 896px; overflow: hidden; }   /* each half keeps its outer 640: blocks hug the edge, the middle stays white */
.t-hero__art--l { left: 0; }
.t-hero__art--r { right: 0; }
.t-hero__pattern { position: absolute; top: 0; width: 1280px; height: 896px; max-width: none; }
.t-hero__art--l .t-hero__pattern { left: 0; }
.t-hero__art--r .t-hero__pattern { right: 0; }
.t-hero__glow { border-radius: 50%; background: var(--t-bg, #fff); filter: blur(100px); width: 1277px; height: 1277px; }
.t-hero__glow--1 { left: calc(50% - 638px); top: -282.22px; }
.t-hero__glow--2 { left: calc(50% - 639px); top: calc(100% - 331.78px); }   /* anchored to the hero bottom (357 of 688.78) */
.t-hero__fade { left: 0; right: 0; top: calc(100% - 128.78px); height: 200px; background: linear-gradient(transparent, var(--t-bg, #fff)); }

.t-hero__inner {
  position: relative;
  width: min(var(--content), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  flex: 1;
  /* anchored to the bottom so the content → "How I" gap is exactly the clamp below at every height; the hero stays
     ≥ 1 screen (no dark on landing), so any extra height goes above the title */
  display: flex; align-items: flex-end;
  /* top: nav 36 + 42, + 18. Bottom: the hero content's bottom (coin) to the top of the rubric heading is
     clamp(140px, 14vw, 200px) — ~180 at 1280 (Figma 161 + 20); the heading sits 20px into the section */
  padding-block: 96px calc(clamp(140px, calc(14vw / var(--tz)), 200px) - 20.22px);
}
/* group = coin (336) + 120 gap + copy (440) = 896, centred: the copy starts 456 into it. The coin hangs 69px
   below the copy, so the copy reserves it to centre the whole group. */
.t-hero__copy { position: relative; width: 440px; margin-left: calc(50% + 8px); padding-bottom: 69px; }
.t-hero__title { font-size: 48px; line-height: 48px; letter-spacing: 0; color: var(--text); }
.t-hero__lede { position: relative; top: 1px; margin-top: 24px; font-size: 14px; line-height: 21px; color: rgba(18, 18, 18, 0.65); }
/* coin sits left of the copy on desktop (195,191 336×337 in a 1120 column starting at 80) */
.t-hero__coin { position: absolute; left: -103.636%; top: 33px; width: 76.364%; }
.t-hero__coin img { width: 100%; height: auto; transition: opacity 300ms var(--ease); }
/* three.js coin (coin.js): canvas 1.5× the image box, centred; cross-fades over the PNG once rendered */
.t-hero__coin { touch-action: pan-y; }
/* AriesCoin: a square box 1.35× the Figma coin (336 → ~454), centred on it; input comes from window listeners */
.t-hero__coin3d { position: absolute; left: -17.5%; top: -17.5%; width: 135%; aspect-ratio: 1 / 1; translate: -1.46% 1.75%; /* Figma's coin sits a touch left/low in its PNG */ opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }
.t-hero__coin3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.t-hero__coin.is-3d .t-hero__coin3d { opacity: 1; }
.t-hero__coin.is-3d img { opacity: 0; }
.t-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.t-chip {
  min-width: var(--w);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px; line-height: 18px; color: var(--text);
  white-space: nowrap; text-align: center;
}
.t-hero__divider { margin: 40px 0 0; height: 1px; border: 0; background: #eaeaea; }
.t-hero__note { margin-top: 24px; font-size: 12px; line-height: 18px; color: rgba(18, 18, 18, 0.6); }
.t-hero__links { display: flex; gap: 24px; margin-top: 12px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text); }
.t-hero__links a:nth-child(1) { width: 20px; white-space: nowrap; }
.t-hero__links a:nth-child(2) { width: 59px; white-space: nowrap; }
.t-hero__links a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.t-hero__links a:hover { color: #000; text-decoration-color: var(--lime); }

/* ------------------------------------------------------------------
   My rubric · card stack
   Without JS the card layer is a plain scroll box. taste.js adds .is-pinned:
   the section grows by the card overflow (--rubric-d), the pin sticks and the
   card track is translated by the scroll progress (2 cards visible at a time).
   ------------------------------------------------------------------ */
.rubric {
  --h: 884px;          /* frame height */
  --sy: 0.22px;        /* scroller top */
  --sh: 832px;         /* scroller (visible card window) height */
  position: relative; z-index: 1;
  height: var(--h);
  background: var(--t-bg, #1e1e1e);
  overflow-x: clip;    /* the pattern overflows both sides (clip, not hidden: the pin stays sticky) */
  color: #fff;
}
.rubric.is-pinned { height: calc(var(--h) + var(--rubric-d, 0px)); }
/* the rubric's dark-only decoration (pattern blocks, glow) only arrives over the last 30% of the change, and the
   glows/fades on both sides use the shared colour: mid-transition hero and rubric are one flat colour, no edge */
.rubric__bg, .rubric__canvas { opacity: calc((var(--t-dark, 1) - 0.7) / 0.3); }
.rubric__pin {
  /* the hold: the frame pins 38px from the top (heading just under the nav, card /01 below it) and stays there while
     the cards scroll; its lower part may run past the fold — the cards rise into view from the bottom */
  position: sticky; top: 38px;
  height: var(--h);
  overflow: hidden;
}
/* pattern: full 1562-wide art, 122% of the section width (≥ 1562), centred, so it overflows and hugs both edges;
   the layer is feathered top and bottom into the flat #1E1E1E (the section colour itself doesn't change) */
.rubric__bg {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 160px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 160px), transparent 100%);
}
.rubric__pattern { position: absolute; left: 50%; top: 0.22px; width: max(calc(122vw / var(--tz)), 1562px); height: auto; max-width: none; transform: translateX(-50%); }
.rubric__canvas { position: absolute; left: 50%; top: 0; width: 1280px; height: 100%; transform: translateX(-50%); pointer-events: none; }
.rubric__canvas > * { position: absolute; }
.rubric__glow { left: -186px; top: -149px; width: 1002px; height: 1002px; border-radius: 50%; background: var(--t-bg, #1e1e1e); filter: blur(100px); }
.rubric__title {
  position: absolute; left: max(24px, calc(50% - 616px)); top: 20.22px;
  font-size: 240px; line-height: 211.2px; letter-spacing: 0;
  color: rgba(255, 255, 255, 0.06);
  white-space: nowrap; pointer-events: none;
}

.rubric__scroller {
  position: absolute; left: 0; right: 0; top: var(--sy); height: var(--sh);
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: none;
}
.rubric__scroller::-webkit-scrollbar { display: none; }
.rubric.is-pinned .rubric__scroller { overflow: hidden; }
.rubric__track {
  position: relative;
  width: min(1280px, 100%); margin-inline: auto;
  /* cards between x 440 and 1170; ends at 1788 (scroll end spacer). px, not %: padding % resolves against the
     full-width scroller, which shrank the cards above 1280 (compact layout from ~1700) */
  padding: 120px 110px 252px 440px;
  container: rubric / inline-size;
  will-change: transform;
}
.rubric__cards { display: flex; flex-direction: column; gap: 64px; }

/* card · desktop 510×306 */
.rcard {
  --fg: var(--text);
  position: relative;
  width: 69.863%; height: 306px;
  border-radius: 24px;
  overflow: hidden;
  color: var(--fg);
}
.rcard:nth-child(even) { margin-left: auto; }
.rcard--white { background: #fff; box-shadow: inset 0 0 0 0.85px rgba(0, 0, 0, 0.1); }
.rcard--lime { background: var(--lime); }
.rcard--dark { --fg: #fff; background: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.rcard--grey { background: var(--surface); }
.rcard__meta {
  position: absolute; left: 18.7px; top: 18.7px;
  display: grid; grid-template-columns: 42.5px auto;
  font-size: 12px; line-height: 16.8px; white-space: nowrap;
  padding-top: 1px;
}
.rcard__icon { position: absolute; left: var(--ix); top: var(--iy); width: var(--iw); height: auto; max-width: none; }
.rcard__title {
  position: absolute; left: 37.4px; bottom: 16.8px;
  width: 212.5px;
  font-size: 29px; line-height: 29px;
}
.rcard__title::before {
  content: ""; position: absolute; left: -18.7px; top: 11.27px;
  width: 9.35px; height: 9.35px; border-radius: 50%; background: currentColor;
}
.rcard__desc {
  position: absolute; left: 278.8px; top: var(--dy, 208.2px);
  width: 212.5px;
  font-size: 13px; line-height: 18.2px;
}

/* compact card (mobile 292.56×193.2, also narrow tablets) */
@container rubric (max-width: 600px) {
  .rcard { width: 85.654%; height: 193.2px; border-radius: 16px; }
  .rcard--white { box-shadow: inset 0 0 0 0.92px rgba(0, 0, 0, 0.1); }
  .rcard__meta { left: 14.72px; top: 14.72px; grid-template-columns: 34.96px auto; padding-top: 0; font-size: 11.04px; line-height: 13px; }
  .rcard__icon { left: var(--mix); top: var(--miy); width: var(--miw); }
  .rcard__title { left: 29.44px; top: 111.48px; bottom: auto; width: auto; font-size: 24px; line-height: 24px; white-space: nowrap; }
  .rcard__title::before { left: -14.72px; top: 9.52px; width: 7.36px; height: 7.36px; }
  .rcard__desc { left: 14.72px; top: 144.52px; width: 263.12px; font-size: 12px; line-height: 16.8px; }
}

/* Word-by-word fade as a card arrives in the window (taste.js, motion only). The words are
   aria-hidden copies; the real sentence sits beside them in .sr-only for screen readers. */
.rw { display: inline; opacity: 0; filter: blur(3px); transition: opacity 420ms var(--ease) calc(var(--wi) * 40ms), filter 420ms var(--ease) calc(var(--wi) * 40ms); }
.rcard.is-in .rw { opacity: 1; filter: none; }
.rcard__title.has-words::before { opacity: 0; transition: opacity 360ms var(--ease) 120ms; }
.rcard.is-in .rcard__title.has-words::before { opacity: 1; }

/* "See it applied" is the shared Button in its light tone (dark section) */
.rubric__cta { position: absolute; left: 3.125%; top: 1620px; }

/* ------------------------------------------------------------------
   Dark → white seam: the hero's bottom edge (Figma geometry, hero 688.78 tall) flipped vertically, so section 3
   opens the way the hero closes: same art, steps, colours, height and 0.2× parallax (taste.js). No layout space.
   ------------------------------------------------------------------ */
.t-seam { position: relative; height: 0; z-index: 0; pointer-events: none; }
.t-seam { --t-bg: #fff; }   /* the strip reuses the hero's glow/fade classes; section 3 is always white */
.t-seam__flip { position: absolute; left: 0; right: 0; top: 0; height: 200px; overflow: hidden; transform: scaleY(-1); }
.t-seam__flip > * { position: absolute; }
.t-seam .t-hero__art { top: -488.78px; }
.t-seam .t-hero__glow--1 { top: -770.99px; }
.t-seam .t-hero__glow--2 { top: -131.78px; }
.t-seam .t-hero__fade { top: 71.22px; }
.fight { position: relative; z-index: 1; }

/* ------------------------------------------------------------------
   Same brief, two products
   ------------------------------------------------------------------ */
.fight {
  width: min(var(--content), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding-top: 112px;
  text-align: center;
}
.fight__title { position: relative; left: 0; font-size: 32px; line-height: 35px; letter-spacing: 0; color: var(--text); }
.fight__lede { position: relative; left: 0; margin-top: 12px; font-size: 14px; line-height: 21px; color: rgba(18, 18, 18, 0.55); }

.fight__table, .fight__table thead, .fight__table tbody { display: block; }
.fight__table { margin-top: 56.22px; border-collapse: collapse; text-align: left; }
.fight__table tr { display: grid; grid-template-columns: 11fr 9fr 8fr; align-content: start; }
.fight__table th, .fight__table td { display: block; padding: 0; font-weight: 400; }
.fight__head { height: 192.74px; }
.fight__head th { position: relative; padding-top: 137.74px; }
.fight__head img { position: absolute; left: 0; top: 0; width: 200px; height: 121.74px; }
.fight__head span { display: block; letter-spacing: 0; font-size: 28px; line-height: 30.8px; color: #000; white-space: nowrap; }
.fight__table tbody tr { height: 76px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.fight__table tbody tr:last-child { height: 77px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.fight__table tbody th { padding-top: 23.5px; letter-spacing: 0; font-size: 26px; line-height: 28.6px; color: #000; }
.fight__table tbody td { padding-top: 26px; font-size: 15px; line-height: 21.75px; color: rgba(0, 0, 0, 0.5); }
.fight__table tbody td:last-child { color: rgba(0, 0, 0, 0.9); }

/* ------------------------------------------------------------------
   Where I'm different
   ------------------------------------------------------------------ */
.venn {
  width: min(var(--content), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding: 120px 0 0;   /* ends at its last line (the footer margin is the gap) */
  text-align: center;
}
.venn__title { font-size: 32px; line-height: 37px; letter-spacing: 0; color: var(--text); }
.venn__lede { margin-top: 10px; font-size: 15px; line-height: 21px; color: rgba(18, 18, 18, 0.55); }
.venn__art { position: relative; width: 760px; max-width: 100%; margin: 40px auto 0; }
.venn__art img { width: 100%; height: auto; }
.venn__label {
  position: absolute; left: var(--x); top: var(--y);
  min-width: var(--w);
  padding: 4px 14px;
  border-radius: 999px; background: #fff;
  font-size: 24px; line-height: 27px; letter-spacing: 0; color: var(--text);
  white-space: nowrap;
}
/* ------------------------------------------------------------------
   Scroll story (taste-story.js, motion only; reduced motion = the static frame)
   ------------------------------------------------------------------ */
.lr-line { display: block; overflow: hidden; }
.lr-in { display: block; }
/* table: row dividers drawn by --ln (scaleX), the border itself stays for layout */
.fight__table.is-story tbody tr { position: relative; border-top-color: transparent; }
.fight__table.is-story tbody tr:last-child { border-bottom-color: transparent; }
.fight__table.is-story tbody tr::before,
.fight__table.is-story tbody tr:last-child::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: rgba(0, 0, 0, 0.1); transform: scaleX(var(--ln, 0)); transform-origin: left;
}
.fight__table.is-story tbody tr:last-child::after { top: auto; bottom: -1px; }
.fight__table.is-story td { position: relative; }
.tw-cursor { position: absolute; left: 0; top: 0; width: 0.55em; height: 1.1em; margin-top: calc((1lh - 1.1em) / 2); background: currentColor; pointer-events: none; }
/* PixelStamp: three lime blocks (steps in one by one) */
.px-stamp { position: absolute; --b: 8px; width: calc(2 * var(--b)); height: calc(2 * var(--b)); pointer-events: none; }
.px-stamp i { position: absolute; left: 0; top: 0; width: 50%; height: 50%; background: #c8f560; }
.px-stamp i:nth-child(2) { left: 50%; }
.px-stamp i:nth-child(3) { left: 50%; top: 50%; }
.px-stamp--table { top: calc(137.74px + (30.8px - 2 * var(--b)) / 2); }
.px-stamp--venn { left: 55.526%; top: 33.667%; width: 2.105%; height: auto; aspect-ratio: 1; }
/* Venn: live overlay (circles, overlaps, centre) while the story runs; the label dot it pops out of */
.venn__story { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.venn__label::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--text); opacity: var(--dot, 0);
}
.venn__stage { margin-top: 40px; }
.venn__stage .venn__art { margin-top: 0; }
@media (min-width: 768px) {
  .motion .venn__stage { height: calc(180 * var(--vh)); }
  .motion .venn__stage .venn__art { position: sticky; top: calc(15 * var(--vh)); }
}

.venn__details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; margin-top: -7px; }
.venn__col h3 { position: relative; top: 1px; font-size: 24px; line-height: 26.4px; letter-spacing: 0; color: #000; }
.venn__col p { position: relative; top: 1px; margin-top: 8px; font-size: 14px; line-height: 21px; color: rgba(18, 18, 18, 0.6); }

/* ------------------------------------------------------------------
   Tablet: keep the desktop layout but let it breathe
   ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1100px) {
  .t-hero__copy { width: 46%; margin-left: 50%; }   /* coin (−100%) + copy = 92%, centred */
  .t-hero__coin { left: -100%; width: 80%; }
  .venn__details { gap: 32px; }
  .rubric__title { font-size: 180px; line-height: 158.4px; }
}

/* ------------------------------------------------------------------
   Mobile 390
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* stops 60px short of the fold: only the light top of the 160px Hero fade shows on landing; content → heading ≈ Figma's 194 */
  .t-hero { min-height: 761px; min-height: max(761px, calc(100 * var(--svh) - 60px)); }
  .t-hero__pattern { left: 0; width: 390px; height: 792px; transform: none; }
  .t-hero__bg { overflow: visible; }
  .t-hero__glow--1 { left: -135px; top: 209px; width: 660px; height: 720px; }
  .t-hero__glow--2 { display: none; }
  .t-hero__fade { top: 402.63px; height: 160px; }
  .t-hero__inner { display: block; flex: none; padding-block: 114px 0; }
  .t-hero__copy { width: auto; margin-left: 0; padding-bottom: 0; }
  .t-hero__title { font-size: 28px; line-height: 31px; letter-spacing: -0.01em; }
  .t-hero__lede { font-size: 13px; line-height: 19px; }
  .t-hero__coin { position: relative; left: auto; top: auto; width: 200px; }
  .t-hero__chips { margin-top: 28px; }
  .t-chip { min-width: var(--mw); font-size: 13px; line-height: 16px; }
  .t-hero__divider { margin-top: 28px; }
  .t-hero__note { font-size: 13px; line-height: 20px; }
  .t-hero__links { font-size: 13px; line-height: 16px; }
  .t-hero__links a { text-decoration: none; }
  .t-hero__links a:nth-child(1) { width: 21px; }
  .t-hero__links a:nth-child(2) { width: 64px; }

  /* the hold: the frame pins 104px down (the heading just under the nav, card /01 at 254) and the card window runs
     from the top of the screen to its bottom, so the cards slide under the nav and off the screen's own edges, never
     a cut part-way. Screens shorter than 744px keep the 640 frame, pinned so its bottom meets the fold.
     --pin: the sticky top; --up: how far the card window reaches above the frame (the track starts that much lower,
     so at rest everything sits where it did) */
  .rubric {
    --pt: 104px; --h: max(640px, calc(calc(100 * var(--vh)) - var(--pt)));
    --pin: min(var(--pt), calc(calc(100 * var(--vh)) - var(--h))); --up: max(0px, var(--pin));
    --sy: calc(-1 * var(--up)); --sh: calc(var(--h) + var(--up));
  }
  .rubric__pin { top: var(--pin); overflow: visible; overflow-x: clip; }
  .rubric__canvas { width: 390px; }
  .rubric__bg {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 64px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 64px), transparent 100%);
  }
  .rubric__pattern { left: 0; width: 100%; height: auto; transform: none; }
  .rubric__pattern--top { top: 0; }
  .rubric__pattern--bottom { top: 420.56px; }
  .rubric__glow { left: -41px; top: -14.22px; width: 428px; height: 428px; filter: blur(42.71px); }
  .rubric__title { left: 16px; top: 60px; font-size: 110px; line-height: 96.8px; }
  .rubric__track { padding: calc(150px + var(--up)) 24.44px 132px 24px; }
  .rubric__cards { gap: 24px; }
  .rubric__cta { left: 24px; top: calc(1018.8px + var(--up)); }

  .fight { padding-top: 80px; }
  .fight__title, .fight__lede { left: 0; }
  .fight__title { font-size: 24px; line-height: 27px; letter-spacing: -0.01em; }
  .fight__lede { margin-top: 8px; font-size: 14px; line-height: 20px; color: rgba(18, 18, 18, 0.6); }
  .fight__table { margin-top: 32px; }
  .fight__table tr { grid-template-columns: 159px 159px; column-gap: 24px; }
  .fight__head { height: 125.04px; }
  .fight__head td { display: none; }
  .fight__head th { padding-top: 85.04px; }
  .fight__head img { width: 120px; height: 73.04px; }
  .fight__head span { font-size: 22px; line-height: 24.2px; }
  .fight__table tbody tr { height: 104px; padding-top: 15px; }
  .fight__table tbody tr:last-child { height: 105px; }
  .fight__table tbody th { grid-column: 1 / -1; padding-top: 0; margin-bottom: 7.8px; font-size: 22px; line-height: 24.2px; }
  .fight__table tbody td { padding-top: 0; font-size: 14px; line-height: 20.3px; }

  .venn { padding: 72px 0 0; overflow-x: clip; }   /* the art's transparent margin may run past the column */
  .venn__title { font-size: 24px; line-height: 27px; letter-spacing: -0.01em; }
  .venn__lede { font-size: 13px; line-height: 20px; color: rgba(18, 18, 18, 0.6); }
  /* the circles fill 74% of the art's width: size the art so the circles span the text column (342 at 390) */
  .venn__art { width: min(520px, calc((100vw - 48px) / 0.74)); max-width: none; margin-inline: auto; left: 50%; translate: -50% 0; }
  .venn__stage { margin-top: 32px; }
  .px-stamp--table { --b: 6px; top: calc(85.04px + (24.2px - 2 * var(--b)) / 2); }
  .venn__label { min-width: var(--mw); padding: 2.8px 6.3px 0.8px; font-size: 14.4px; line-height: 16.2px; }
  .venn__details { display: flex; flex-direction: column; gap: 24px; margin-top: 16px; text-align: left; }
  .venn__col h3 { top: 0; font-size: 20px; line-height: 22px; }
  .venn__col p { margin-top: 6px; font-size: 13px; line-height: 20px; }
}