/* ทำอะไรตามใจDev · static landing page
   Direction: "The page is the object". The page's own yellow post card becomes the frame:
   black ground, yellow paper, black #hashtag pill, "ภาพ:" credit line, scalloped paper edges. */

/* ---------- fonts (local, SIL OFL) ---------- */
@font-face { font-family: "Kanit"; src: url("../assets/fonts/Kanit-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("../assets/fonts/Kanit-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("../assets/fonts/Kanit-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("../assets/fonts/Kanit-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("../assets/fonts/FiraCode-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } /* taste-skill-ignore: real code blocks only */

/* ---------- tokens ---------- */
:root {
  /* colour: one ink, one paper (the brand yellow), one light ground */
  --ink: #111111;
  --ink-raised: #2a2a2a;
  --paper: #FFC400;            /* brand yellow */
  --light: #F3F2EF;            /* neutral light field */
  --white: #FFFFFF;
  --muted-on-ink: #C8C8C2;
  --muted-on-light: #4B4B47;

  /* field roles, reassigned per section */
  --bg: var(--ink);
  --fg: var(--white);
  --muted: var(--muted-on-ink);
  --focus: var(--paper);

  /* type: Kanit only; five sizes */
  --font: "Kanit", "Noto Sans Thai", "Leelawadee UI", "Thonburi", system-ui, sans-serif;
  --font-code: "Fira Code", ui-monospace, Menlo, Consolas, monospace; /* taste-skill-ignore: real code blocks only */
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.125rem, 1.2rem + 3.6vw, 4rem);
  --step-display: clamp(7rem, 4rem + 11vw, 13rem);

  /* frame */
  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --section-gap: clamp(4.5rem, 10vw, 9rem);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0;           /* never track Thai */
  background: var(--ink);
  color: var(--fg);
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
::selection { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 10; background: var(--paper); color: var(--ink); padding: 0.5rem 1rem; font-weight: 600; text-decoration: none; }
.skip:focus { top: 0.5rem; }

.wrap { padding-inline: var(--margin); }

/* fields */
.field-ink { --bg: var(--ink); --fg: var(--white); --muted: var(--muted-on-ink); --focus: var(--paper); background: var(--bg); color: var(--fg); }
.field-light { --bg: var(--light); --fg: var(--ink); --muted: var(--muted-on-light); --focus: var(--ink); background: var(--bg); color: var(--fg); }
.field-yellow { --bg: var(--paper); --fg: var(--ink); --muted: var(--ink); --focus: var(--ink); background: var(--bg); color: var(--fg); }

/* type */
.h-head { font-size: var(--step-head); line-height: 1.22; font-weight: 700; letter-spacing: 0; text-wrap: balance; hyphens: none; }
.lead { font-size: var(--step-lead); line-height: 1.6; font-weight: 400; max-width: 34em; text-wrap: pretty; }
.lines .line { display: block; overflow: clip; padding-block: 0.06em; margin-block: -0.06em; }
.lines .line > span { display: block; }

/* controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.5rem 1.6rem;
  border-radius: 999px; border: 0;
  font: 600 var(--step-body)/1.2 var(--font); letter-spacing: 0; text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn--yellow { background: var(--paper); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--big { min-height: 60px; padding-inline: 2.4rem; font-size: var(--step-lead); }
.btn--bar { width: 100%; min-height: 60px; font-size: var(--step-lead); }
@media (hover: hover) and (pointer: fine) {
  .btn--yellow:hover { background: var(--white); }
  .btn--ink:hover { background: var(--white); color: var(--ink); }
}
.pill { display: inline-block; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.35rem 1.2rem; font-weight: 600; line-height: 1.5; }

.link { text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* scalloped paper edges (filled shapes, no outlines): a strip of the paper colour masked by a row of semicircles */
.scallop { height: 20px; background: currentColor; -webkit-mask: url("../assets/scallop-down.svg") repeat-x 0 0 / 40px 20px; mask: url("../assets/scallop-down.svg") repeat-x 0 0 / 40px 20px; }
.scallop--up { -webkit-mask-image: url("../assets/scallop-up.svg"); mask-image: url("../assets/scallop-up.svg"); }
.scallop--big { height: 32px; -webkit-mask-size: 64px 32px; mask-size: 64px 32px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: clip; min-height: 100svh; view-timeline-name: --hero; }
.nav { display: flex; align-items: center; gap: var(--gutter); padding: 18px var(--margin); }
.nav__brand { display: block; flex: none; }
.nav__brand img { height: 48px; width: auto; }
.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); margin-left: auto; margin-right: 1rem; font-size: var(--step-body); }
.nav__links a { text-decoration: none; padding-block: 0.5rem; display: inline-block; text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { text-decoration-color: currentColor; } }

.hero__grid {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding-inline: var(--margin);
  padding-top: clamp(1.5rem, 4vh, 3rem);
  min-height: calc(100svh - 84px);
  align-content: start;
}
.hero__copy { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 2; padding-top: clamp(1rem, 6vh, 4rem); max-width: 40rem; }
.hero__copy .lead { margin-top: 2rem; }
.hero__copy p:last-child { margin-top: 2.25rem; }
.hero__card { grid-column: 7 / 13; grid-row: 1; justify-self: end; width: min(100%, 700px); rotate: 1.6deg; transform-origin: 50% 100%; position: relative; z-index: 1; }
.hero__card a { display: block; }
.hero__card img { width: 100%; height: auto; background: var(--paper); }
.hero__mascot { position: absolute; z-index: 3; left: calc(var(--margin) + 2vw); bottom: 0; width: clamp(200px, 22vw, 330px); height: auto; }

@media (max-width: 899px) {
  .hero { min-height: 0; }
  .nav__links { display: none; }
  .nav { justify-content: space-between; }
  .nav__brand img { height: 40px; }
  .hero__grid { display: block; min-height: 0; padding-bottom: 0; }
  .hero__copy { padding-top: 1.5rem; max-width: none; }
  .hero__copy .lead { margin-top: 1.25rem; }
  .hero__copy p:last-child { margin-top: 1.5rem; }
  .hero__copy .btn { width: 100%; }
  .hero__card { width: 100%; margin-top: 2.5rem; rotate: 1deg; }
  .hero__mascot { position: relative; left: auto; width: 46%; margin: 1.5rem 0 0 0; }
}

/* ---------- posts / the desk ---------- */
.posts { padding-top: var(--section-gap); overflow: clip; }
.posts__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.posts__top .h-head { grid-column: 1 / 8; }
.posts__hint { grid-column: 9 / 13; font-size: var(--step-body); max-width: 26em; }

.desk { margin-top: clamp(2.5rem, 5vw, 4.5rem); min-height: clamp(0px, 46vw, 40rem); }
.post { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.post[hidden] { display: none; }
.post__card { grid-column: 1 / 6; }
.post__card img { width: 100%; height: auto; background: var(--paper); }
.post__card figcaption { margin-top: 0.75rem; font-size: var(--step-small); line-height: 1.6; color: var(--muted); }
.post__body { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 1.5rem; }
.post__title { font-size: var(--step-lead); line-height: 1.4; font-weight: 700; text-wrap: balance; }
.post__lead { max-width: 38em; text-wrap: pretty; }
.post__note { background: var(--ink); color: var(--white); padding: clamp(1.25rem, 2.2vw, 2rem); }
.post__note p { font-size: var(--step-lead); line-height: 1.55; font-weight: 600; text-wrap: pretty; }
.post__note footer { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted-on-ink); }
.check { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: stretch; }
.check p { grid-column: 1 / -1; font-weight: 600; }
.check pre { margin: 0; padding: 1rem 1.25rem; background: var(--paper); color: var(--ink); overflow-x: auto; font: 500 var(--step-small)/1.7 var(--font-code); white-space: pre; }
.check code { font: inherit; }
.copy { align-self: stretch; min-width: 6.5rem; padding: 0 1.2rem; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; font: 600 var(--step-small)/1 var(--font); cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.copy:active { transform: scale(0.96); }
.copy.is-done { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .copy:hover { background: var(--ink-raised); } }
.post__meta { font-size: var(--step-small); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: baseline; }
.post__meta .link { color: var(--fg); font-size: var(--step-body); }

/* slips: the six cards standing along the bottom edge, cut off by it */
.slips { display: none; }
.js .slips {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: clamp(3rem, 6vw, 5.5rem);
  padding-inline: var(--margin);
}
.slip {
  flex: 1 1 0; min-width: 0; aspect-ratio: 1 / var(--a); padding: 0; border: 0; background: var(--paper);
  overflow: clip; cursor: pointer; align-self: flex-end;
  transform: rotate(var(--r)) translateY(24px); transform-origin: 50% 100%;
  opacity: 0.72;
  transition: transform 420ms var(--ease-out), opacity var(--t-hover) ease;
}
.slip img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.slip[aria-selected="true"] { opacity: 1; transform: rotate(var(--r)) translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .slip:not([aria-selected="true"]):hover { opacity: 1; transform: rotate(var(--r)) translateY(10px); }
}
.slip:focus-visible { outline-offset: -4px; outline-color: var(--ink); }
.post__card img, .post__body > * { animation: none; }
.desk.is-swap .post:not([hidden]) { animation: post-in 520ms var(--ease-out) both; }
@keyframes post-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 899px) {
  .posts__top { display: block; }
  .posts__hint { margin-top: 1.25rem; }
  .desk { min-height: 0; margin-top: 2rem; }
  .post { display: block; }
  .post__body { margin-top: 1.75rem; }
  .js .slips { margin-top: 3rem; gap: 10px; }
  .check { grid-template-columns: 1fr; }
  .copy { min-height: 48px; }
}

@media (max-width: 599px) {
  /* phone: two rows of three, the lower row cut by the section's bottom edge; nothing scrolls sideways */
  .js .slips { flex-wrap: wrap; row-gap: 12px; gap: 10px; align-items: flex-end; padding-bottom: 0; }
  .slip { flex: 0 0 calc((100% - 20px) / 3); transform: rotate(var(--r)); }
  .slip[aria-selected="true"] { transform: rotate(var(--r)) translateY(-8px); }
}

/* ---------- proof ---------- */
.proof { padding-block: var(--section-gap); overflow: clip; }
.proof__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.proof__copy { grid-column: 1 / 7; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.proof__mascot { width: clamp(180px, 22vw, 320px); height: auto; }
.sheet { grid-column: 7 / 13; color: var(--ink); }
.sheet__body { background: var(--ink); color: var(--white); padding: clamp(1.5rem, 3.5vw, 3.5rem); }
.sheet .scallop { color: var(--ink); }
.finds { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.finds blockquote p { font-size: var(--step-lead); line-height: 1.55; font-weight: 600; text-wrap: pretty; }
.finds__src { margin-top: 0.5rem; font-size: var(--step-small); color: var(--muted-on-ink); }
.sheet__tag { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.sheet .pill { background: var(--paper); color: var(--ink); }

@media (max-width: 899px) {
  .proof__grid { display: block; }
  .proof__copy { gap: 1.5rem; }
  .proof__mascot { width: 52%; }
  .sheet { margin-top: 2.5rem; }
}

/* ---------- topics ---------- */
.topics { padding-block: var(--section-gap); overflow: clip; }
.topics__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.topics__copy { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; position: sticky; top: 2rem; }
.topics__mascot { width: clamp(220px, 31vw, 450px); height: auto; }
.menu { grid-column: 6 / 13; color: var(--light); }
.menu__body { background: var(--light); color: var(--ink); padding: clamp(1.5rem, 3.5vw, 3.5rem); }
.menu .scallop { color: var(--light); }
.menu__title { font-size: var(--step-lead); font-weight: 700; line-height: 1.4; margin-bottom: 1.75rem; }
.menu__list { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.4vw, 2.25rem); }
.menu__name { font-size: var(--step-head); line-height: 1.25; font-weight: 700; text-wrap: balance; }
.menu__ex { margin-top: 0.35rem; font-size: var(--step-body); line-height: 1.7; }
.menu__ex--none { color: var(--muted-on-light); }
.menu__ex .link { font-weight: 600; }

@media (max-width: 899px) {
  .topics__grid { display: block; }
  .topics__copy { position: static; gap: 1.5rem; }
  .topics__mascot { width: 50%; }
  .menu { margin-top: 2.5rem; }
  .menu__name { font-size: 1.75rem; }
}

/* ---------- numbers ---------- */
.numbers { padding-block: var(--section-gap); overflow: clip; }
.numbers__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.numbers__copy { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.numbers__mascot { width: clamp(190px, 22vw, 320px); height: auto; }
.ledger { grid-column: 7 / 13; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem); }
.ledger__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: end; }
.ledger__fig { grid-column: 1; grid-row: 1; text-align: right; font: italic 900 var(--step-display)/1 var(--font); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap; }
.ledger__cap { grid-column: 2; grid-row: 1; font-size: var(--step-body); line-height: 1.6; padding-bottom: 0.6em; text-wrap: pretty; }
.ledger__what { display: block; font-size: var(--step-lead); font-weight: 700; }

@media (max-width: 899px) {
  .numbers__grid { display: block; }
  .numbers__copy { gap: 1.5rem; }
  .numbers__mascot { width: 48%; }
  .ledger { margin-top: 2.5rem; gap: 2.5rem; }
  .ledger__row { grid-template-columns: 1fr; row-gap: 0.5rem; }
  .ledger__fig { grid-column: 1; grid-row: 1; text-align: left; }
  .ledger__cap { grid-column: 1; grid-row: 2; padding-bottom: 0; }
}

/* ---------- follow ---------- */
.follow { padding-top: var(--section-gap); padding-bottom: calc(var(--section-gap) * 0.7); overflow: clip; }
.follow__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.follow__copy { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.follow__mascot { width: clamp(190px, 22vw, 320px); height: auto; }
.reply { grid-column: 6 / 13; background: var(--paper); color: var(--ink); padding: clamp(1.75rem, 4vw, 4rem); rotate: -1.6deg; display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: calc(var(--section-gap) * -0.35); }
.reply__title { font-size: var(--step-head); line-height: 1.22; font-weight: 700; }
.reply__text { font-size: var(--step-lead); line-height: 1.55; max-width: 28em; }
.reply .btn { margin-top: 0.75rem; }

@media (max-width: 899px) {
  .follow__grid { display: block; }
  .follow__copy { gap: 1.5rem; }
  .follow__mascot { width: 52%; }
  .reply { margin-top: 2.5rem; rotate: -1deg; margin-bottom: -2.5rem; }
}

/* ---------- footer: the back of the card ---------- */
main { background: var(--ink); }
.foot { padding: clamp(5rem, 9vw, 8rem) var(--margin) 0; }
.foot__panel { margin-inline: auto; width: min(100%, 1200px); color: var(--paper); }
.foot__body { background: var(--paper); color: var(--ink); padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem) 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); row-gap: 1.5rem; }
.foot__msg { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.foot__msg p { max-width: 28em; }
.foot__sign { font-size: var(--step-lead); font-weight: 700; line-height: 1.4; }
.foot__msg .pill { margin-top: 0.5rem; }
.foot__addr { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; }
.foot__addr ul { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--step-body); }
.foot__addr a { display: inline-block; padding-block: 0.25rem; font-weight: 600; }
.foot__stamp { order: 2; width: 88px; height: 117px; object-fit: cover; padding: 6px; background: var(--white); }
.foot__imprint { grid-column: 1 / -1; margin-top: 1rem; font-size: var(--step-small); text-align: center; text-wrap: pretty; }
@media (max-width: 899px) {
  .foot__body { grid-template-columns: minmax(0, 1fr); }
  .foot__stamp { width: 64px; height: 85px; }
  .foot__imprint { text-align: left; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* load sequence: settled by ~1.2s, everything already in the HTML */
  .js .hero [data-line] { transform: translateY(105%); animation: load-line 800ms var(--ease-expo) forwards; animation-delay: calc(100ms + var(--i) * 90ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: load-rise 600ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .hero [data-open] { clip-path: inset(0 0 100% 0); animation: load-open 1000ms var(--ease-in-out) 150ms forwards; }
  .js .hero [data-open] img { transform: scale(1.08); animation: load-settle 1100ms var(--ease-expo) 100ms forwards; }
  @keyframes load-line { to { transform: none; } }
  @keyframes load-rise { to { opacity: 1; transform: none; } }
  @keyframes load-open { to { clip-path: inset(0); } }
  @keyframes load-settle { to { transform: none; } }

  /* reveals below the fold: heading lines rise, text rises, pictures settle; once */
  .js [data-reveal]:not(.lines) { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 900ms var(--ease-out) var(--d, 0ms); }
  .js [data-reveal]:not(.lines).is-in { opacity: 1; transform: none; }
  .js .follow__mascot[data-reveal]:not(.is-in), .js .proof__mascot[data-reveal]:not(.is-in), .js .topics__mascot[data-reveal]:not(.is-in), .js .numbers__mascot[data-reveal]:not(.is-in) { transform: translateY(40px) scale(0.96); transform-origin: 50% 100%; }
  .js [data-reveal].lines .line > span { transform: translateY(108%); }
  .js [data-reveal].lines.is-in .line > span { transform: none; transition: transform 750ms var(--ease-expo); }
  .js [data-reveal].lines .line:nth-child(2) > span { transition-delay: 70ms; }

  /* menu rows arrive one by one */
  .js .menu[data-stagger] .menu__list li { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--k, 0) * 70ms); }
  .js .menu[data-stagger].is-in .menu__list li { opacity: 1; transform: none; }
  /* the quotes on the black sheet arrive in turn */
  .js .finds li { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(300ms + var(--k, 0) * 110ms); }
  .js .sheet.is-in .finds li { opacity: 1; transform: none; }
  /* slips rise from under the edge, in turn */
  .js .slips .slip { translate: 0 60%; transition: translate 800ms var(--ease-expo) calc(var(--k, 0) * 70ms), transform 420ms var(--ease-out), opacity var(--t-hover) ease; }
  .js .slips.is-in .slip { translate: 0 0; }

  /* rolling figures: digits rise out of their masks, in turn */
  .roll:not(.is-in) .roll__d { transform: translateY(105%); }
  .roll.is-in .roll__d { transform: none; transition: transform 1100ms var(--ease-expo) calc(var(--i) * 110ms); }

  /* hero card recedes as it leaves; scroll-linked, linear */
  @supports (animation-timeline: view()) {
    .hero__card { animation: card-sink linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero__copy { animation: copy-lift linear both; animation-timeline: --hero; animation-range: exit 0% exit 70%; }
    @keyframes card-sink { to { transform: translateY(6%) scale(0.94); } }
    @keyframes copy-lift { to { transform: translateY(-6%); } }
  }
}
.roll__digits { display: inline-flex; line-height: 1; font-variant-numeric: tabular-nums; }
.roll__col { display: inline-block; overflow: clip; padding: 0.04em 0.06em 0.08em 0; margin: -0.04em -0.06em -0.08em 0; }
.roll__d { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slip, .btn, .copy { transition: none; }
  .desk.is-swap .post:not([hidden]) { animation: none; }
}

/* ---------- mobile pacing: shorter page on phones ---------- */
@media (max-width: 599px) {
  .proof, .topics, .numbers { padding-block: calc(var(--section-gap) * 0.6); }
  .proof__mascot, .topics__mascot, .numbers__mascot { width: 34%; max-width: 140px; }
  .menu__list li:has(.menu__ex--none) { display: none; }
}