/* =========================================================================
   Eric Jorgenson — site.css
   White ground, one accent (mint #CAE981), ink for text only.
   Mona Sans for everything, Delicious Handrawn for two margin notes,
   Fragment Mono for dates only. Images 2px radius, controls 4px.
   Hidden start states for motion only apply under html.js with no
   reduced-motion preference, so no-JS and reduced motion show everything.
   ========================================================================= */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Delicious Handrawn";
  src: url("../fonts/delicious-handrawn-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/fragment-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

@property --p { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  /* colour: white, mint, ink */
  --white: #FFFFFF;
  --mint: #CAE981;
  --ink: #101410;
  --ink-2: #4A5148;          /* 8.2:1 on white, 6.0:1 on mint: captions only */
  --line: rgba(16, 20, 16, .16);
  --line-mint: rgba(16, 20, 16, .22);
  --mint-wash: #EFF8D9;

  /* grid (Trevor Noah's margin + gutter formulas) */
  --margin: clamp(20px, calc(20px + 40 * (100vw - 402px) / 1518), 60px);
  --gutter: clamp(10px, calc(10px + 30 * (100vw - 402px) / 1518), 40px);
  --hh: 60px;
  --sect: clamp(88px, calc(56px + 6vw), 160px);

  /* type */
  --f-display: clamp(52px, calc(1.75rem + 7.4vw), 176px);
  --f-statement: clamp(32px, calc(1.2rem + 3.6vw), 80px);
  --f-h2: clamp(40px, calc(1.6rem + 4.2vw), 96px);
  --f-row: clamp(30px, calc(1rem + 3.3vw), 64px);
  --f-h3: clamp(21px, calc(1rem + 1.1vw), 32px);
  --f-lead: clamp(19px, calc(1rem + .55vw), 24px);
  --f-body: clamp(17px, calc(16.2px + .13vw), 19px);
  --f-row-s: clamp(18px, calc(16px + .3vw), 20px);
  --f-small: 15px;
  --f-button: clamp(17px, calc(16.4px + .11vw), 18px);
  --f-note: clamp(24px, calc(18px + .8vw), 32px);
  --f-mono: 15px;

  /* radius */
  --r-img: 2px;
  --r-ctl: 4px;

  /* motion (Trevor Noah + Aardvark values) */
  --ease: cubic-bezier(.645, 0, 0, 1);
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-p4-out: cubic-bezier(.23, 1, .32, 1);
  --ease-bounce: cubic-bezier(.17, .67, .3, 1.33);
  --ease-bounce-soft: cubic-bezier(.4, 1.65, .3, 1);
  --ease-energy: cubic-bezier(.32, .72, 0, 1);
  --ease-elastic-soft: cubic-bezier(.34, 1.56, .64, 1);
  --ease-elastic: cubic-bezier(.34, 1.56, .64, 1);
  --ease-write: cubic-bezier(.55, .1, .35, 1);
  --k: 1;                    /* intro delay multiplier: .5 on a return visit */
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-elastic-soft: linear(0, .199 2.8%, .398 5.6%, .581 8.3%, .738 11.1%, .866 13.9%, .963 16.7%, 1.033 19.4%, 1.077 22.2%, 1.101 25%, 1.11 27.8%, 1.107 30.6%, 1.097 33.3%, 1.082 36.1%, 1.065 38.9%, 1.049 41.7%, 1.034 44.4%, 1.021 47.2%, 1.011 50%, 1.003 52.8%, .997 55.6%, .994 58.3%, .992 61.1%, .991 63.9%, .991 66.7%, .992 69.4%, .993 72.2%, .995 75%, .996 77.8%, .997 80.6%, .998 83.3%, .999 86.1%, 1 88.9%, 1);
    --ease-elastic: linear(0, .708 2.5%, 1.246 5%, 1.595 7.5%, 1.766 10%, 1.79 12.5%, 1.707 15%, 1.559 17.5%, 1.383 20%, 1.21 22.5%, 1.061 25%, .948 27.5%, .875 30%, .839 32.5%, .834 35%, .851 37.5%, .883 40%, .919 42.5%, .956 45%, .987 47.5%, 1.011 50%, 1.026 52.5%, 1.034 55%, 1.035 57.5%, 1.031 60%, 1.025 62.5%, 1.017 65%, 1.009 67.5%, 1.003 70%, .998 72.5%, .994 75%, .993 80%, .995 85%, .998 90%, 1 95%, 1);
  }
}
@media (min-width: 992px) { :root { --hh: 72px; } }
html.is-return { --k: .5; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--f-body);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p, li, dd { text-wrap: pretty; }
button { font: inherit; color: inherit; }
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: var(--margin); }
.mono {
  font-family: "Fragment Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--f-mono);
  line-height: 1.35;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  padding: 12px 18px; background: var(--mint); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-ctl);
  font-weight: 620; text-decoration: none;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

/* text links in copy: ink 600 with an ink underline; hover swaps it for a mint mark */
.tlink {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  background: linear-gradient(var(--mint), var(--mint)) 0 88% / 0% .5em no-repeat;
  transition: background-size .45s var(--ease), text-decoration-color .3s;
}
.on-mint-ground .tlink, .rolling .tlink, .footer .tlink { background-image: linear-gradient(var(--white), var(--white)); }
@media (hover: hover) {
  .tlink:hover { text-decoration-color: transparent; background-size: 100% .5em; }
}

/* highlighter mark: one flat mint fill whose width is scrubbed with --p (works across line breaks) */
.hl {
  color: inherit;
  background: linear-gradient(var(--mint), var(--mint)) 0 88% / calc(var(--p, 1) * 100%) .42em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .04em;
  margin-inline: -.04em;
}
.rolling .hl, .newsletter .hl { background-image: linear-gradient(var(--white), var(--white)); }

/* handwritten notes (two on the page) */
.note {
  font-family: "Delicious Handrawn", "Bradley Hand", "Segoe Print", cursive;
  font-size: var(--f-note);
  line-height: 1.05;
  font-weight: 400;
  color: var(--ink);
}
.draw { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- buttons: rectangles, never pills ---------- */
.btn {
  --bg: var(--white);
  --bg2: var(--mint);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px;
  border: 2px solid var(--ink);
  border-radius: var(--r-ctl);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--f-button);
  font-weight: 620;
  font-stretch: 105%;
  letter-spacing: -.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: rotate .45s var(--ease-bounce), scale .15s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg2);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .45s var(--ease);
}
.btn__roll { position: relative; display: inline-grid; overflow: hidden; padding-block: .2em; margin-block: -.2em; }
.btn__t { grid-area: 1 / 1; transition: transform .45s var(--ease); }
.btn__t + .btn__t { transform: translateY(115%); }
.btn--primary { --bg: var(--mint); --bg2: var(--white); }
.btn--secondary { --bg: var(--white); --bg2: var(--mint); }
.btn--white { --bg: var(--white); --bg2: var(--mint); }
.btn--clear { --bg: transparent; --bg2: var(--white); }
.btn--sm { height: 44px; padding: 0 16px; font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { rotate: -2deg; }
  .btn:hover::before { clip-path: inset(0); }
  .btn:hover .btn__t { transform: translateY(-115%); }
  .btn:hover .btn__t + .btn__t { transform: none; }
}
.btn:active { scale: .97; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; }
@media (max-width: 479px) {
  .btn { height: 52px; padding: 0 18px; }
  .btn-row > .btn, .slide__cta > .btn { flex: 1 1 100%; }
  .signup__btn { width: 100%; }
}

/* square icon buttons (slider + drag row) */
.sq-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: var(--r-ctl);
  background: var(--white);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s var(--ease), rotate .45s var(--ease-bounce);
}
@media (hover: hover) { .sq-btn:hover { background: var(--mint); rotate: -3deg; } }
.sq-btn:active { scale: .96; }
.sq-btn__prog { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); overflow: visible; pointer-events: none; }
.sq-btn__prog rect { fill: none; stroke: var(--ink); stroke-width: 6; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.sq-btn--next.is-timing .sq-btn__prog rect { opacity: 1; animation: sq-prog var(--autoplay, 4.5s) linear forwards; }
@keyframes sq-prog { to { stroke-dashoffset: 0; } }

/* ---------- hairline rows ---------- */
.rows { border-bottom: 1px solid var(--line); }
.rows__title { font-size: var(--f-h3); font-weight: 650; font-stretch: 105%; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 20px; }
.row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px var(--gutter);
  min-height: 64px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--row-fill, var(--mint));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.rows--mint .row { --row-fill: var(--white); }
.rows--mint, .rows--mint .row { border-color: var(--line-mint); }
.row__title { font-size: var(--f-h3); font-weight: 650; font-stretch: 105%; line-height: 1.15; letter-spacing: -.015em; }
.row__arrow { font-size: 22px; font-weight: 600; line-height: 1; padding-right: 4px; transition: translate .3s var(--ease-out-expo); }
@media (hover: hover) {
  .row:hover::before { transform: scaleX(1); }
  .row:hover .row__arrow { translate: 4px -4px; }
}
.row:focus-visible { outline-offset: -3px; }
.rows--small .row { min-height: 56px; padding: 15px 0; }
.rows--small .row__title { font-size: var(--f-row-s); font-weight: 560; letter-spacing: -.005em; line-height: 1.3; }
.rows--small .row__arrow { font-size: 18px; }
@media (min-width: 768px) {
  .row { grid-template-columns: 9.5em minmax(0, 1fr) auto; }
  .row:not(:has(> .mono)) { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 767px) {
  .row > .mono { grid-column: 1 / -1; }
  .row > .row__title { grid-column: 1; }
}

/* ---------- type helpers ---------- */
.display {
  font-size: var(--f-display);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .9;
  letter-spacing: -.04em;
  margin: 0 0 clamp(28px, 3.4vw, 56px);
}
.h2 { font-size: var(--f-h2); font-weight: 700; font-stretch: 112%; line-height: 1; letter-spacing: -.03em; }
.lead { font-size: var(--f-lead); font-weight: 450; line-height: 1.4; letter-spacing: -.005em; max-width: 38ch; }
.body-l { font-size: var(--f-body); line-height: 1.55; max-width: 60ch; }
.prose p { max-width: 62ch; }
.prose p + p { margin-top: 1em; }
.caption { margin-top: 12px; font-size: var(--f-small); font-weight: 500; line-height: 1.35; color: var(--ink-2); }

/* the full-width name (hero + footer): "Eric Jorgenson" measures 7.35em at 800 / 125% / -.045em */
.wm-box { container-type: inline-size; }
.wordmark {
  margin: 0;
  font-size: calc(100cqw / 5.4);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .86;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.wordmark__w { display: block; }
@media (min-width: 768px) {
  .wordmark { font-size: calc(100cqw / 7.4); }
  .wordmark__w { display: inline; }
}

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--hh);
  background: var(--hbg, var(--white));
  box-shadow: 0 1px 0 var(--hline, transparent);
  transition: transform .45s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
html:not(.js) .site-header { position: sticky; top: 0; box-shadow: 0 1px 0 var(--line); }
.site-header.is-scrolled { --hline: var(--line); }
.site-header.on-mint { --hbg: var(--mint); --hline: var(--line-mint); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo {
  display: inline-flex;
  align-items: center;
  height: 44px;
  font-size: 19px;
  font-weight: 750;
  font-stretch: 112%;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.logo__clip { display: block; overflow: clip; padding-block: .15em; }
.logo__in { display: block; transition: transform .45s var(--ease); }
.js .site-header:not(.has-logo) .logo__in { transform: translateY(110%); }
.logo .ch { display: inline-block; }
.logo .ch.bob { animation: letter-bob .9s both; animation-delay: var(--bd, 0s); }
@keyframes letter-bob {
  0% { transform: none; animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  25% { transform: translateY(var(--amp, .12em)); animation-timing-function: var(--ease-elastic); }
  100% { transform: none; }
}
.nav { display: none; }
.nav__list { display: flex; gap: clamp(18px, 2.2vw, 40px); }
.nav__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: 16px;
  font-weight: 560;
  font-stretch: 105%;
  letter-spacing: -.005em;
  line-height: 1;
  text-decoration: none;
}
.nav__mark {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: .62em;
  z-index: -1;
  background: var(--mint);
  transform: skewX(-8deg) rotate(-1.5deg) scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.on-mint .nav__mark { background: var(--white); }
.nav__link.is-current .nav__mark { transform: skewX(-8deg) rotate(-1.5deg) scaleX(1); }
@media (hover: hover) { .nav__link:hover .nav__mark { transform: skewX(-8deg) rotate(-1.5deg) scaleX(1); } }
.on-mint .site-header__cta { --bg: var(--white); --bg2: var(--mint); }
.site-header__end { display: flex; align-items: center; gap: 12px; }
.site-header__cta { display: none; }
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 72px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r-ctl);
  background: var(--white);
  font-size: 16px;
  font-weight: 620;
  font-stretch: 105%;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn__in { display: inline-grid; overflow: hidden; padding-block: .2em; margin-block: -.2em; }
.menu-btn__t { grid-area: 1 / 1; transition: transform .45s var(--ease); }
.menu-btn__t + .menu-btn__t { transform: translateY(115%); }
.menu-open .menu-btn__t { transform: translateY(-115%); }
.menu-open .menu-btn__t + .menu-btn__t { transform: none; }
@media (min-width: 600px) { .site-header__cta { display: inline-flex; } }
@media (min-width: 992px) {
  .nav { display: block; }
  .menu-btn { display: none; }
}

/* menu sheet (mobile) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--mint);
  padding-top: calc(var(--hh) + 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu__list { border-bottom: 1px solid var(--line-mint); }
.menu__list li { overflow: clip; }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line-mint);
  font-size: clamp(32px, 9vw, 56px);
  font-weight: 750;
  font-stretch: 118%;
  letter-spacing: -.03em;
  line-height: 1;
  text-decoration: none;
}
.menu__n { font-size: 17px; font-weight: 600; letter-spacing: 0; min-width: 2em; font-variant-numeric: tabular-nums; }
.menu__foot { padding-block: 28px 32px; }
@media (prefers-reduced-motion: no-preference) {
  .menu.is-open .menu__list a { animation: menu-line .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
}
@keyframes menu-line { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* =========================================================================
   Hero: the name, his face and the three books in one screen
   ========================================================================= */
.hero { position: relative; padding-top: calc(var(--hh) + 12px); padding-bottom: 20px; overflow: clip; }
html:not(.js) .hero { padding-top: 12px; }
.wordmark--hero { position: relative; z-index: 2; }
.hero__stage { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.hero__portrait { position: relative; height: clamp(240px, calc(100svh - 464px), 380px); padding: 0 8px 8px 0; }
.hero__mint { position: absolute; inset: 8px 0 0 8px; background: var(--mint); transform-origin: 50% 100%; }
.hero__frame { position: relative; height: 100%; overflow: hidden; border-radius: var(--r-img); background: #DADBD8; }
#hero-photo { width: 100%; height: 110%; margin-top: -5%; object-fit: cover; object-position: 50% 25%; }
.hero__side { display: contents; }
.hero__covers {
  --w: 36.6cqw;
  position: relative;
  z-index: 3;
  height: calc(var(--w) * 1.545 + 14px);
  margin-top: calc(var(--w) * 1.545 * -.34);
}
.hero__cover {
  position: absolute;
  top: var(--top, 0px);
  left: calc(1.1cqw + var(--i) * 30.6cqw);
  width: var(--w);
  z-index: calc(var(--i) + 1);
  rotate: var(--r);
}
.hero__cover:nth-child(1) { --top: 8px; --r: -7deg !important; }
.hero__cover:nth-child(2) { --top: 0px; --r: 0deg !important; }
.hero__cover:nth-child(3) { --top: 10px; --r: 7deg !important; }
.hero__cover a {
  position: relative;
  display: block;
  border-radius: var(--r-img);
  box-shadow: 0 2px 0 rgba(16, 20, 16, .06), 0 24px 48px -24px rgba(16, 20, 16, .45);
  transition: transform .9s var(--ease-elastic-soft), box-shadow .9s var(--ease-out);
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  -webkit-tap-highlight-color: transparent;
}
.hero__cover a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(16, 20, 16, .08); pointer-events: none; }
.hero__cover img { width: 100%; border-radius: var(--r-img); }
@media (hover: hover) and (pointer: fine) {
  .hero__cover a:hover {
    transform: perspective(900px) translateY(-10px) rotate(calc(var(--r) * -1)) scale(1.03) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
    box-shadow: 0 2px 0 rgba(16, 20, 16, .06), 0 36px 64px -28px rgba(16, 20, 16, .5);
  }
}
.hero__line {
  margin-top: 14px;
  font-size: clamp(19px, calc(.8rem + 1.6vw), 22px);
  font-weight: 650;
  font-stretch: 105%;
  line-height: 1.15;
  letter-spacing: -.015em;
  max-width: 36ch;
}
.hero__ln { display: inline; }
.hero__ln > span { display: inline; }
.hero__cta { display: flex; gap: 10px; margin-top: 14px; }
.hero__cta .btn { height: 52px; padding: 0 14px; }
.hero__cta .btn--primary { flex: 0 0 auto; }
.hero__cta .btn--secondary { flex: 1 1 auto; }
@media (max-width: 389px) { .hero__cta .btn { font-size: 15.5px; padding: 0 11px; } }
@media (max-width: 339px) { .hero__cta { flex-wrap: wrap; } .hero__cta .btn { flex: 1 1 100%; } }

/* tablet: portrait on the left, the covers fan over its lower right corner */
@media (min-width: 768px) {
  .hero__stage { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 20px; }
  .hero__portrait { grid-column: 1 / span 5; grid-row: 1; height: clamp(340px, 45svh, 560px); padding: 0 14px 14px 0; }
  .hero__mint { inset: 14px 0 0 14px; }
  .hero__covers { --w: 29cqw; grid-column: 1 / -1; grid-row: 2; margin-top: calc(var(--w) * 1.545 * -.42); }
  .hero__cover { left: calc(100cqw - var(--w) * 2.7 - 1cqw + var(--i) * var(--w) * .85); }
  .hero__cover:nth-child(1) { --top: 16px; --r: -6deg !important; }
  .hero__cover:nth-child(2) { --top: 0px; --r: 1.5deg !important; }
  .hero__cover:nth-child(3) { --top: 22px; --r: 5deg !important; }
  .hero__line { grid-column: 1 / -1; margin-top: 22px; font-size: var(--f-h3); line-height: 1.12; max-width: none; }
  .hero__ln { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
  .hero__ln > span { display: block; }
  .hero__cta { grid-column: 1 / -1; margin-top: 22px; gap: 16px; }
  .hero__cta .btn { height: 56px; padding: 0 24px; flex: 0 0 auto; }
}

/* desktop: portrait in columns 1-5 (1-4 from 1600), covers + line + buttons in the rest */
@media (min-width: 992px) {
  .hero { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 24px; }
  .hero > .wrap:first-child { flex: none; }
  .hero__stage {
    --pc: 5;
    flex: 1;
    min-height: 520px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    margin-top: 24px;
  }
  .hero__portrait { grid-column: 1 / span var(--pc); grid-row: 1; height: auto; min-height: 0; }
  .hero__side { display: flex; flex-direction: column; grid-column: calc(var(--pc) + 1) / -1; grid-row: 1; min-height: 0; }
  .hero__covers {
    flex: 1 1 auto;
    min-height: 220px;
    height: auto;
    margin: 0;
    container-type: size;
  }
  .hero__cover {
    --w: min(calc((100cqh - 44px) / 1.545), calc(100cqw / 2.84));
    width: var(--w);
    left: calc(2.5cqw + var(--i) * var(--w) * .919);
  }
  .hero__line { margin-top: 18px; }
  .hero__cta { margin-top: 24px; }
}
@media (min-width: 1600px) { .hero__stage { --pc: 4; } }

/* =========================================================================
   Books: the big-word slider
   ========================================================================= */
.books { position: relative; padding-top: var(--sect); overflow: clip; }
.books__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; }
.books__head .display { margin: 0; }
.books__intro { grid-column: 1 / -1; font-size: var(--f-lead); font-weight: 450; line-height: 1.35; max-width: 24ch; }
.books__ctrl { display: none; align-items: center; gap: 12px; }
.books__count { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 8px; white-space: nowrap; }
.js .books.is-live .books__ctrl { display: flex; }
.slider { position: relative; margin-top: clamp(28px, 4vw, 56px); outline: none; }
.slider:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.slider__track { display: grid; gap: 72px; }
.slide__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cover" "word" "text"; }
.slide__text { grid-area: text; display: grid; grid-template-columns: minmax(0, 1fr); }
.slide__year { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.slide__title { margin-top: 6px; font-size: clamp(30px, calc(1.2rem + 2vw), 48px); font-weight: 700; font-stretch: 112%; line-height: 1.02; letter-spacing: -.025em; max-width: 15ch; }
.slide__line { margin-top: 14px; font-size: var(--f-lead); font-weight: 450; line-height: 1.38; max-width: 36ch; }
.slide__credit { margin-top: 10px; font-size: var(--f-small); font-weight: 500; color: var(--ink-2); }
.slide__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.slide__cover { grid-area: cover; position: relative; z-index: 2; justify-self: start; width: min(60vw, 300px); margin-top: 8px; rotate: -4deg; }
.slide__cover img { width: 100%; border-radius: var(--r-img); box-shadow: 0 2px 0 rgba(16, 20, 16, .06), 0 30px 60px -28px rgba(16, 20, 16, .5), inset 0 0 0 1px rgba(16, 20, 16, .08); }
.slide__note { position: absolute; left: 70%; top: 54%; width: max-content; rotate: 6deg; z-index: 3; }
.slide__note > span { display: block; padding-left: 50px; }
.note__one { display: inline-block; width: .34em; height: .74em; vertical-align: -.02em; margin-right: .02em; overflow: visible; }
.note__one path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.slide__note-arrow { position: absolute; left: -6px; top: -50px; width: 62px; height: 52px; overflow: visible; rotate: 200deg; }
.slide__word {
  grid-area: word;
  position: relative;
  z-index: 1;
  justify-self: start;
  margin-top: -.2em;
  font-size: calc((100vw - 2 * var(--margin)) / 3.2);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .8;
  letter-spacing: -.045em;
  white-space: nowrap;
  padding-bottom: .06em;
  isolation: isolate;
}
.slide__word::before {
  content: "";
  position: absolute;
  left: -.03em;
  bottom: .04em;
  width: var(--ww, calc(100% + .06em));
  height: .32em;
  background: var(--mint);
  z-index: -1;
  transform-origin: left;
}
@media (max-width: 991px) {
  .slide__text { margin-top: 18px; }
  .slide__year { order: -2; }
}
@media (min-width: 768px) {
  .books__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .books__intro { grid-column: auto; padding-bottom: .55em; }
  .slide__cover { width: min(40vw, 320px); }
}
@media (min-width: 768px) and (max-width: 991px) {
  .slide__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: calc(var(--gutter) * 2); grid-template-areas: "cover text" "word word"; align-items: start; }
  .slide__cover { width: 100%; max-width: 300px; justify-self: center; }
  .slide__text { margin-top: 0; }
  .slide__note { display: none; }
}
@media (min-width: 992px) {
  .slide__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    grid-template-areas: none;
    grid-template-rows: auto auto;
  }
  .slide__text { grid-column: 9 / -1; grid-row: 1; position: relative; z-index: 3; align-self: start; }
  .slide__cover { grid-column: 5 / span 4; grid-row: 1 / span 2; justify-self: center; align-self: start; width: calc(min(60svh, 560px) * .6475); margin-top: 0; }
  .slide__word { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; font-size: min(calc((100vw - 2 * var(--margin)) / 3.2), 44svh); }
  .slide__note { left: auto; right: calc(100% + 18px); top: 30%; rotate: -5deg; }
  .slide__note > span { padding: 0; }
  .slide__note-arrow { left: auto; right: -64px; top: 18px; width: 70px; height: 54px; rotate: 0deg; }

  /* live slider at desktop: head + slide in one screen; word along the bottom */
  .books.is-live {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    height: max(100svh, 700px);
    padding-top: calc(var(--hh) + clamp(12px, 3svh, 40px));
    padding-bottom: clamp(16px, 3svh, 40px);
  }
  .books.is-live > .books__head, .books.is-live > .slider { grid-area: 1 / 1; }
  .books.is-live > .books__head {
    z-index: 4;
    align-self: start;
    pointer-events: none;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 18px;
    align-items: start;
  }
  .books.is-live > .books__head > * { pointer-events: auto; }
  .books.is-live .books__title { grid-column: 1 / span 4; }
  .books.is-live .books__intro { grid-column: 1 / span 4; grid-row: 2; padding: 0; font-size: var(--f-body); max-width: 22ch; }
  .books.is-live .books__ctrl { grid-column: 1 / span 4; grid-row: 3; margin-top: 10px; }
  .books.is-live .slider { margin-top: 0; }
  .books.is-live .slider, .books.is-live .slider__track, .books.is-live .slide, .books.is-live .slide__grid { height: 100%; }
  .books.is-live .slide__grid { grid-template-rows: minmax(0, 1fr) auto; }
  .books.is-live .slide__text { padding-top: 4px; }
  .books.is-live .slide__cover { margin-top: 4px; }
  .books.is-live .slide__word { align-self: end; margin-top: 0; font-size: clamp(140px, calc((100svh - 560px) * 1.05), calc((100vw - 2 * var(--margin)) / 3.2)); }
  .books.is-live .slide__line { font-size: clamp(18px, calc(.9rem + .4vw), 21px); }
  .books.is-live .slide__cta .btn { padding: 0 20px; }
}

/* JS slider mode */
.js .slider.is-live .slider__track { gap: 0; }
.js .slider.is-live .slide { grid-area: 1 / 1; visibility: hidden; pointer-events: none; }
.js .slider.is-live .slide.is-active, .js .slider.is-live .slide.is-leaving { visibility: visible; }
.js .slider.is-live .slide.is-active { pointer-events: auto; }
.slider.is-live { touch-action: pan-y; }
.slider.is-live .slide__cover, .slider.is-live .slide__word { user-select: none; -webkit-user-select: none; }
.slider.is-live .slide__word { overflow: clip; overflow-clip-margin: .1em; }
.slider.is-live .slide__word .ch { display: inline-block; transform: translateY(105%); transition: transform .6s var(--ease); transition-delay: calc(var(--i) * 15ms); }
.slider.is-live .slide.is-active .slide__word .ch { transform: none; transition: transform 1.2s var(--ease-out); transition-delay: calc(.25s + var(--i) * 15ms); }
.slider.is-live .slide.is-leaving .slide__word .ch { transform: translateY(-105%); }
.slider.is-live .slide .slide__word::before { transform: scaleX(0); transition: transform .5s var(--ease); }
.slider.is-live .slide.is-active .slide__word::before { transform: scaleX(1); transition: transform .9s var(--ease) .45s; }
.slider.is-live .slide__cover { opacity: 0; transform: translateY(-60px) rotate(8deg) scale(.92); transition: transform .6s var(--ease), opacity .6s var(--ease); }
.slider.is-live .slide.is-active .slide__cover { opacity: 1; transform: translateX(var(--dx, 0px)) rotate(var(--dr, 0deg)); transition: transform 1.35s var(--ease-p4-out) .2s, opacity .5s var(--ease-out) .2s; }
.slider.is-live .slide.is-active .slide__cover.is-snap { transition: transform .6s var(--ease-energy); }
.slider.is-live.is-dragging .slide.is-active .slide__cover { transition: none; }
.slider.is-live .slide.is-leaving .slide__cover { opacity: 0; transform: translateX(-8vw) rotate(-14deg); transition: transform .6s var(--ease), opacity .6s var(--ease); }
.slider.is-live .slide__text > * { opacity: 0; transform: translateY(18px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.slider.is-live .slide.is-active .slide__text > * { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(.35s + var(--n, 0) * 80ms); }
.slider.is-live .slide__note { opacity: 0; transition: opacity .3s; }
.slider.is-live .slide.is-active .slide__note { opacity: 1; transition: opacity .4s 1.2s; }
.slider.is-live:not(.is-inview) .slide.is-active .slide__word .ch { transform: translateY(105%); transition: none; }
.slider.is-live:not(.is-inview) .slide.is-active .slide__cover { opacity: 0; transform: translateY(-60px) rotate(8deg) scale(.92); transition: none; }
.slider.is-live:not(.is-inview) .slide.is-active .slide__text > * { opacity: 0; transform: translateY(18px); transition: none; }
.slider.is-live:not(.is-inview) .slide.is-active .slide__word::before { transform: scaleX(0); transition: none; }
.slider.is-live:not(.is-inview) .slide__note { opacity: 0; }
.slide__note .draw { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .slider.is-live .slide__note .draw { stroke-dashoffset: 1.05; transition: stroke-dashoffset .5s var(--ease); }
  .slider.is-live.is-inview .slide.is-active .slide__note .draw { stroke-dashoffset: 0; transition-delay: 1.5s; }
  .slider.is-live.is-inview .slide.is-active .slide__note .draw--2 { transition-delay: 1.95s; transition-duration: .25s; }
}

/* =========================================================================
   Marquee (mint band): chapter themes, each book's cover after its themes
   ========================================================================= */
.marquee { position: relative; isolation: isolate; padding-block: clamp(26px, 3.6vw, 56px); }
.ground { position: absolute; inset: 0; z-index: -1; background: var(--mint); }
.marquee__viewport { overflow: clip; }
.marquee__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1em .28em;
  padding-inline: var(--margin);
  font-size: clamp(28px, calc(1rem + 3vw), 64px);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.marquee__sl { display: none; font-weight: 300; font-stretch: 100%; }
.marquee__item:has(+ .marquee__sl)::after { content: " /"; font-weight: 300; font-stretch: 100%; }
.marquee__sep img { height: .78em; width: auto; border-radius: var(--r-img); box-shadow: 0 10px 20px -12px rgba(16, 20, 16, .5), inset 0 0 0 1px rgba(16, 20, 16, .08); rotate: -6deg; }
.marquee__sep:nth-of-type(2n) img { rotate: 6deg; }
@media (prefers-reduced-motion: no-preference) {
  .js .marquee__track {
    flex-wrap: nowrap;
    width: max-content;
    padding-inline: 0;
    gap: .3em;
    font-size: clamp(48px, calc(1.5rem + 6.5vw), 150px);
    line-height: 1;
    will-change: transform;
  }
  .js .marquee__track > li { padding-block: .06em; white-space: nowrap; }
  .js .marquee__sl { display: block; }
  .js .marquee__item:has(+ .marquee__sl)::after { content: none; }
  .js .marquee:not(.is-inview) .marquee__track > li { transform: translateY(120%); filter: blur(.2rem); opacity: 0; }
  .js .marquee .marquee__track > li { transition: transform 1.2s var(--ease-bounce-soft), filter 1.2s var(--ease-out), opacity .6s var(--ease-out); transition-delay: calc(min(var(--i, 0), 8) * .15s); }
}

/* =========================================================================
   Statement + "This takes a few forms." (pinned on desktop)
   ========================================================================= */
.forms-sec { position: relative; }
.statement { padding-block: var(--sect) clamp(40px, 5vw, 80px); }
.statement__text {
  font-size: var(--f-statement);
  font-weight: 600;
  font-stretch: 108%;
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 20ch;
  text-wrap: balance;
}
.forms { padding-bottom: var(--sect); }
.forms__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.forms__title { margin-bottom: clamp(28px, 4vw, 48px); }
.forms__list { border-bottom: 1px solid var(--line); }
.form { border-top: 1px solid var(--line); }
.form__head {
  position: relative;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 20px 0 8px;
  min-height: 64px;
  text-decoration: none;
}
.form__n { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.form__label {
  position: relative;
  isolation: isolate;
  justify-self: start;
  font-size: var(--f-row);
  font-weight: 750;
  font-stretch: 118%;
  letter-spacing: -.03em;
  line-height: 1;
}
.form__lt { position: relative; z-index: 1; }
.form__mark {
  position: absolute;
  left: -.06em;
  right: -.06em;
  bottom: .02em;
  height: .44em;
  background: var(--mint);
  transform: skewX(-8deg) rotate(-1.2deg) scaleX(var(--fp, 0));
  transform-origin: left;
}
.form__arrow { font-size: clamp(22px, 2vw, 30px); font-weight: 600; line-height: 1; transition: translate .3s var(--ease-out-expo); }
@media (hover: hover) { .form__head:hover .form__arrow { translate: 6px 0; } }
.form__body { display: grid; grid-template-rows: 1fr; }
.form__inner { overflow: hidden; min-height: 0; }
.form__desc { padding: 6px 0 22px calc(2.4em + 12px); font-size: var(--f-body); line-height: 1.5; max-width: calc(56ch + 3em); }
.forms__aside { display: none; }

/* desktop pin (JS + motion + room): sticky panel, rows light up one by one, the plate swaps */
@media (min-width: 992px) {
  .forms__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .forms__title { grid-column: 1 / -1; white-space: nowrap; }
  .forms__main { grid-column: 1 / span 7; grid-row: 2; }
  .form__label { font-size: clamp(34px, calc(.6rem + 3vw), 56px); }
  .form__desc { font-size: clamp(18px, calc(1rem + .3vw), 21px); line-height: 1.45; max-width: 44ch; padding-left: calc(2.4em * 17 / 20 + 12px); }
  html.can-pin .forms { height: calc(100svh + 3 * 80svh); padding: 0; }
  html.can-pin .forms__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: clip; }
  html.can-pin .forms__grid { width: 100%; align-items: center; }
  html.can-pin .form { transition: opacity .6s var(--ease); }
  html.can-pin .form:not(.is-active) { opacity: .28; }
  html.can-pin .form__body { grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
  html.can-pin .form.is-active .form__body { grid-template-rows: 1fr; }
  html.can-pin .form__desc { opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  html.can-pin .form.is-active .form__desc { opacity: 1; transform: none; transition: opacity .8s var(--ease-out) .2s, transform 1s var(--ease-out) .2s; }
  html.can-pin .form__head { padding-bottom: 20px; }
  html.can-pin .form.is-active .form__head { padding-bottom: 8px; }
  html.can-pin .forms__aside { display: block; grid-column: 9 / -1; grid-row: 2; align-self: start; }
  html.can-pin .forms-sec .statement { padding-bottom: 0; }
}
.plates { position: relative; aspect-ratio: 542 / 640; max-height: calc(100svh - 340px); margin-left: auto; overflow: clip; }
.plate { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: var(--r-img); background: var(--mint-wash); clip-path: inset(100% 0 0 0); transform: rotate(-3deg); transition: clip-path .9s var(--ease), transform .9s var(--ease), opacity .6s var(--ease), scale .6s var(--ease); }
.plate.is-on { clip-path: inset(0); transform: none; z-index: 2; }
.plate.is-out { clip-path: inset(0); transform: none; scale: .94; opacity: 0; z-index: 1; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 14px; background: var(--white); font-size: var(--f-small); font-weight: 600; line-height: 1.3; border-top-right-radius: var(--r-img); }
.plate--mint { background: var(--mint); display: grid; place-items: center; }
.plate--mint .rf-mark { width: 64%; height: auto; color: var(--ink); fill: currentColor; }
.plates__count { margin-top: 14px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rf-mark { fill: currentColor; color: var(--ink); overflow: visible; }

/* =========================================================================
   Venture sections (shared)
   ========================================================================= */
.venture { position: relative; isolation: isolate; padding-block: var(--sect); }
.venture .lead + .body-l { margin-top: 18px; }
.venture .btn-row { margin-top: 32px; }
.photo { position: relative; }
.photo__frame { position: relative; overflow: hidden; border-radius: var(--r-img); background: var(--mint-wash); }
.photo__frame img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; translate: 0 var(--py, 0px); }

/* ---------- Scribe: the year-of-surviving letter is the centrepiece ---------- */
.scribe__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.scribe__top .display { margin: 0 0 8px; }
.scribe__role { font-size: var(--f-body); font-weight: 500; line-height: 1.45; max-width: 34ch; padding-top: 14px; border-top: 2px solid var(--ink); }
.bleed { margin-top: clamp(40px, 6vw, 96px); }
.bleed .photo__frame { border-radius: 0; aspect-ratio: 4 / 3; }
.bleed .photo__frame img { object-position: 50% 12%; }
.bleed .caption { margin-top: 12px; }
.letter { margin-top: clamp(56px, 8vw, 128px); }
.letter__src { font-size: var(--f-small); font-weight: 500; color: var(--ink-2); max-width: 64ch; }
.letter__src .tlink { color: var(--ink); text-decoration-thickness: 1.5px; }
.letter__cols { display: grid; gap: 8px; margin-top: 24px; }
.letter__col { container-type: inline-size; }
.letter__when {
  font-size: min(72px, calc(100cqw / 8.4));
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -.035em;
  line-height: 1;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.letter__list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--f-h3); font-weight: 600; font-stretch: 104%; line-height: 1.18; letter-spacing: -.012em; }
.letter__col--then .letter__list li { font-weight: 500; }
.letter__arrow { display: flex; justify-content: flex-start; padding: 8px 0 8px 12px; }
.letter__arrow svg { width: 96px; height: 40px; rotate: 90deg; overflow: visible; }
.pull {
  margin-top: clamp(64px, 8vw, 128px);
  font-size: clamp(28px, calc(1rem + 2.6vw), 64px);
  font-weight: 650;
  font-stretch: 106%;
  line-height: 1.1;
  letter-spacing: -.022em;
  max-width: 26ch;
}
.pull__covers { display: inline-flex; vertical-align: -.16em; margin-inline: .06em; }
.pull__covers img { height: 1.08em; width: auto; border-radius: 1px; box-shadow: 0 6px 14px -8px rgba(16, 20, 16, .6), inset 0 0 0 1px rgba(16, 20, 16, .08); }
.pull__covers img:nth-child(1) { rotate: -7deg; }
.pull__covers img:nth-child(2) { rotate: 2deg; margin-left: -.18em; position: relative; z-index: 1; }
.pull__covers img:nth-child(3) { rotate: 8deg; margin-left: -.18em; position: relative; z-index: 2; }
.scribe__foot { display: grid; gap: 40px; margin-top: clamp(40px, 5vw, 72px); }
.scribe__story .btn-row { margin-top: 28px; }
.press__title { display: none; font-size: var(--f-h3); font-weight: 650; font-stretch: 105%; letter-spacing: -.015em; line-height: 1.12; margin-bottom: 16px; }
.press .row { grid-template-columns: minmax(0, 1fr) auto; }
.press .row > .mono { grid-column: 1 / -1; }
.press .row > .row__title { grid-column: 1; }

/* disclosures: open on desktop, folded on phones */
.more__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--f-row-s);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.more__sum::-webkit-details-marker { display: none; }
.more__sum::after { content: "+"; font-size: 26px; font-weight: 500; line-height: 1; transition: rotate .45s var(--ease); }
.more[open] > .more__sum::after { rotate: 45deg; }
.more[open] > .more__sum { margin-bottom: 18px; }
.press.more[open] > .more__sum { margin-bottom: 0; border-bottom: 0; }

@media (min-width: 768px) {
  .bleed .photo__frame { aspect-ratio: 2 / 1; max-height: 86svh; }
  .letter__cols { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: start; gap: var(--gutter); }
  .letter__arrow { padding: 0; align-self: start; margin-top: clamp(4px, 1vw, 16px); }
  .letter__arrow svg { width: 100%; height: auto; rotate: 0deg; }
  .more__sum { display: none; }
  .more[open] > .more__sum { margin: 0; }
  .press__title { display: block; }
}
@media (min-width: 992px) {
  .scribe__top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .scribe__top .display { grid-column: 1 / -1; }
  .scribe__lead { grid-column: 1 / span 6; }
  .scribe__role { grid-column: 9 / -1; justify-self: stretch; }
  .letter__cols { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .letter__col--then { grid-column: 1 / span 5; }
  .letter__arrow { grid-column: 6 / span 2; }
  .letter__col--now { grid-column: 8 / -1; }
  .pull { max-width: none; width: calc(100% / 12 * 10); }
  .scribe__foot { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .scribe__story { grid-column: 1 / span 6; }
  .press { grid-column: 8 / -1; }
}

/* ---------- Rolling Fun (mint): the ring turns as you scroll ---------- */
.rolling__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.rolling__ring { margin-bottom: 32px; }
.ring { width: min(60vw, 300px); height: auto; rotate: calc(var(--rp, 0) * 360deg); }
.rolling .display { margin-bottom: 16px; }
.rolling__tag { font-size: var(--f-h3); font-weight: 650; font-stretch: 105%; line-height: 1.12; letter-spacing: -.015em; margin-bottom: clamp(28px, 3vw, 44px); }
.rolling .lead { max-width: 30ch; font-size: clamp(22px, calc(1rem + 1vw), 32px); font-weight: 550; font-stretch: 104%; line-height: 1.2; letter-spacing: -.012em; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 32px; border-top: 1px solid var(--line-mint); }
.facts__item { padding: 16px 0; border-bottom: 1px solid var(--line-mint); }
.facts dt { font-size: 17px; font-weight: 650; line-height: 1.3; }
.facts dd { margin-top: 4px; font-size: var(--f-body); line-height: 1.45; }
.facts .tlink { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
.rolling__posts { margin-top: clamp(56px, 7vw, 112px); }
@media (min-width: 600px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (min-width: 992px) {
  .rolling__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .rolling__text { grid-column: 1 / span 7; grid-row: 1; }
  .rolling__ring { grid-column: 8 / -1; grid-row: 1; margin: 0; display: grid; place-items: center end; }
  .ring { width: min(100%, 520px); }
  .rolling .facts { max-width: 760px; }
}

/* ---------- Smart Friends ---------- */
.podcast__grid { display: grid; gap: 40px; }
.podcast__art { position: relative; }
.podcast__show .photo__frame { aspect-ratio: 16 / 9; }
.podcast__inset { width: 58%; margin: -14% 0 0 auto; position: relative; z-index: 2; rotate: 2.5deg; }
.podcast__inset img { width: 100%; border-radius: var(--r-img); box-shadow: 0 0 0 4px var(--white), 0 24px 48px -24px rgba(16, 20, 16, .5); }
.podcast__inset .caption { rotate: -2.5deg; margin-top: 14px; }
.episodes { margin-top: clamp(64px, 8vw, 120px); }
.guests { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--f-body); line-height: 1.5; max-width: 52ch; }
.guests strong { font-weight: 650; }
.ep { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "thumb date arrow" "thumb title title"; align-items: center; column-gap: 14px; }
.ep > .mono { grid-area: date; grid-column: auto; }
.ep > .row__title { grid-area: title; grid-column: auto; }
.ep > .row__arrow { grid-area: arrow; justify-self: end; }
.ep__thumb { grid-area: thumb; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-img); align-self: start; }
.ep__thumb--art { object-position: 82% 50%; }
@media (min-width: 768px) {
  .ep { grid-template-columns: 9.5em minmax(0, 1fr) auto; grid-template-areas: "date title arrow"; align-items: baseline; }
  .ep__thumb { display: none; }
}
@media (min-width: 992px) {
  .podcast__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .podcast__text { grid-column: 1 / span 5; padding-top: 8px; }
  .podcast__art { grid-column: 7 / -1; }
  .podcast__inset { position: absolute; left: -18%; bottom: -22%; width: 46%; margin: 0; rotate: -3deg; }
  .podcast__inset .caption { rotate: 3deg; }
  .episodes { margin-top: clamp(120px, 12vw, 200px); }
}

/* ---------- One Good Idea (mint): the form is the hero ---------- */
.newsletter .display__a, .newsletter .display__b { display: block; }
.newsletter .display__b { margin-top: .18em; font-size: var(--f-h2); font-weight: 700; font-stretch: 112%; letter-spacing: -.03em; line-height: 1; }
.newsletter__lead { font-size: clamp(21px, calc(1rem + 1vw), 30px); font-weight: 550; font-stretch: 104%; line-height: 1.2; letter-spacing: -.012em; max-width: 30ch; }
.signup { position: relative; margin-top: clamp(28px, 3vw, 44px); max-width: 920px; }
.signup__label { display: block; font-size: 17px; font-weight: 650; margin-bottom: 8px; }
.signup__row { display: flex; flex-direction: column; gap: 12px; }
.signup__input {
  height: 60px;
  width: 100%;
  min-width: 0;
  padding: 0 18px;
  border: 2px solid var(--ink);
  border-radius: var(--r-ctl);
  background: var(--white);
  color: var(--ink);
  font: 500 18px/1 "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  font-stretch: 100%;
}
.signup__input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.signup__btn { height: 60px; }
.signup__msg { min-height: 1.4em; margin-top: 10px; font-size: var(--f-small); font-weight: 600; }
.signup__note { display: flex; align-items: flex-end; gap: 6px; margin-top: -4px; rotate: -3deg; width: max-content; }
.signup__arrow { width: 54px; height: 46px; overflow: visible; flex: none; }
.newsletter__grid { display: grid; gap: 48px; margin-top: clamp(48px, 6vw, 96px); }
.quote { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-mint); max-width: 40ch; }
.quote p { font-size: var(--f-lead); font-weight: 550; line-height: 1.35; }
.quote footer { margin-top: 8px; font-size: var(--f-small); font-weight: 600; }
.newsletter__eds .rows__title { margin-top: 0; }
@media (min-width: 600px) {
  .signup__row { flex-direction: row; }
  .signup__input { height: 64px; font-size: 20px; }
  .signup__btn { flex: none; height: 64px; padding: 0 28px; }
  .signup__note { margin-left: auto; margin-right: 24px; }
}
@media (min-width: 992px) {
  .newsletter__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .newsletter__about { grid-column: 1 / span 6; }
  .newsletter__eds { grid-column: 8 / -1; }
  .signup { max-width: calc((100% - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter)); }
}

/* =========================================================================
   Writing: draggable row
   ========================================================================= */
.writing { padding-block: var(--sect); }
.writing__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.writing__head .h2 { max-width: 12ch; }
@media (max-width: 479px) { .writing__head .btn-row { width: 100%; } }
.drag { margin-top: clamp(32px, 4vw, 56px); }
.drag__track {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margin);
  padding-inline: var(--margin);
  padding-block: 8px 20px;
  scrollbar-width: none;
}
.drag__track::-webkit-scrollbar { display: none; }
.card { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; }
.card:last-child { margin-right: var(--margin); }
.card a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; rotate: var(--tilt, 0deg); transition: rotate .9s var(--ease-elastic-soft); -webkit-user-drag: none; }
.card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-img); background: var(--mint-wash); margin-bottom: 6px; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); pointer-events: none; }
.card__img--contain { background: #F4F7F1; }
.card__img--contain img { object-fit: contain; }
.card__type { font-size: var(--f-small); font-weight: 600; }
.card__title { font-size: clamp(20px, calc(.9rem + .6vw), 25px); font-weight: 650; font-stretch: 105%; line-height: 1.15; letter-spacing: -.012em; }
@media (hover: hover) {
  .card a:hover .card__img img { scale: 1.05; }
  .card a:hover .card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
}
.drag.is-mouse .drag__track { scroll-snap-type: none; cursor: grab; }
.drag.is-dragging .drag__track { cursor: grabbing; }
.drag.is-dragging a { pointer-events: none; }
.drag__foot { display: flex; align-items: center; gap: 24px; margin-top: 16px; }
.drag__bar { position: relative; flex: 1; height: 2px; background: var(--line); }
.drag__bar span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--dp, .2)); }
.drag__btns { display: flex; gap: 12px; }

/* =========================================================================
   Footer (mint)
   ========================================================================= */
.footer { position: relative; isolation: isolate; padding-top: var(--sect); overflow: clip; }
.footer__grid { display: grid; gap: 48px; }
.footer__title-row { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); margin-bottom: 24px; }
.footer__title-row .display { margin: 0; }
.footer__face { width: clamp(96px, 11vw, 168px); aspect-ratio: 1; object-fit: cover; border-radius: var(--r-img); rotate: -3deg; box-shadow: 0 0 0 4px var(--white), 0 20px 40px -24px rgba(16, 20, 16, .6); }
.footer .btn-row { margin-top: 28px; }
.row--index { grid-template-columns: 2.6em minmax(0, 1fr) auto !important; align-items: baseline; }
.row__n { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.row--index > .row__title { grid-column: 2 !important; }
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 28px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 12px;
  border-top: 1px solid var(--line-mint);
  font-size: var(--f-small);
}
.footer__social { display: flex; flex-wrap: wrap; gap: 0 22px; }
.footer__meta .tlink { display: inline-flex; align-items: center; min-height: 44px; text-decoration-thickness: 1.5px; font-weight: 600; background-position: 0 70%; }
.footer__copy { font-weight: 500; }
.footer__top { margin-left: auto; }
.wm-foot { margin-top: clamp(32px, 4vw, 64px); padding-bottom: calc(var(--margin) * .5); }
.wordmark--foot { padding-bottom: .1em; user-select: none; }
.wordmark .ch { display: inline-block; position: relative; }
.wordmark--foot .ch.bob { animation: letter-bob 1.1s both; animation-delay: var(--bd, 0s); }
@media (min-width: 992px) {
  .footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .footer__hi { grid-column: 1 / span 6; }
  .footer__links { grid-column: 8 / -1; padding-top: 12px; }
}

/* =========================================================================
   Hover-float (episode rows only, fine pointers)
   ========================================================================= */
.float { display: none; position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; width: 200px; height: 200px; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .float { display: block; } }
.float__in {
  width: 100%;
  height: 100%;
  border-radius: var(--r-img);
  background: var(--mint) center / cover no-repeat;
  box-shadow: 0 24px 48px -24px rgba(16, 20, 16, .5);
  opacity: 0;
  scale: .6;
  transform-origin: 0 0;
  transition: opacity .35s var(--ease-out-expo), scale .35s var(--ease-out-expo);
}
.float.is-on .float__in { opacity: 1; scale: 1; }

/* =========================================================================
   Reveal system (JS on, motion allowed)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--rd, 0s); }
  .js [data-reveal].is-inview { opacity: 1; transform: none; }

  /* split text: chars / words (Trevor's split timings) */
  .js [data-split] .ch, .js [data-split] .wd-in {
    display: inline-block;
    transform: translateY(120%);
    clip-path: inset(-100% -10% 120% -10%);
    opacity: 0;
    transition: transform 1.2s var(--ease-out), clip-path 1.2s var(--ease-out), opacity .6s var(--ease-out);
  }
  .js [data-split="chars"] .ch { transition-delay: calc(var(--i) * 15ms + var(--sd, 0s)); }
  .js [data-split="words"] .wd-in { transition-delay: calc(var(--i) * 40ms + var(--sd, 0s)); }
  .js [data-split].is-inview .ch, .js [data-split].is-inview .wd-in { transform: none; clip-path: inset(-20% -10% -25% -10%); opacity: 1; }

  /* photos */
  .js [data-photo] .photo__frame { clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease); }
  .js [data-photo] .photo__frame img { scale: 1.12; transition: scale 1.2s var(--ease-out); }
  .js [data-photo].is-inview .photo__frame { clip-path: inset(0); }
  .js [data-photo].is-inview .photo__frame img { scale: 1; }
  .js [data-photo] .caption { opacity: 0; transition: opacity .6s var(--ease-out) .5s; }
  .js [data-photo].is-inview .caption { opacity: 1; }

  /* handwritten note writes itself in */
  .js .signup__note span { clip-path: inset(-20% 100% -30% -6%); transition: clip-path 1.1s var(--ease-write) .6s; }
  .js .signup__note.is-inview span { clip-path: inset(-20% -6% -30% -6%); }
  .js .signup__note .draw { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; transition: stroke-dashoffset .5s var(--ease) 1.5s; }
  .js .signup__note .draw--2 { transition-delay: 1.95s; transition-duration: .25s; }
  .js .signup__note.is-inview .draw { stroke-dashoffset: 0; }

  /* the letter: arrow draws, the right column follows */
  .js [data-letter] .letter__col { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out); }
  .js [data-letter] .letter__col--now { transition-delay: .55s; }
  .js [data-letter].is-inview .letter__col { opacity: 1; transform: none; }
  .js [data-letter] .draw { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; transition: stroke-dashoffset .8s var(--ease) .35s; }
  .js [data-letter] .draw--2 { transition-delay: .95s; transition-duration: .35s; }
  .js [data-letter].is-inview .draw { stroke-dashoffset: 0; }

  .js .forms__list .form:nth-child(2) { --rd: .08s; }
  .js .forms__list .form:nth-child(3) { --rd: .16s; }
  .js .forms__list .form:nth-child(4) { --rd: .24s; }

  /* highlighter marks scrub from 0 (JS drives --p); the hero one is timed with the intro */
  .js [data-hl] { --p: 0; }
  html.js:not(.hero-in) [data-hl-hero] { --p: 0; }
  html.js:not(.intro-done) [data-hl-hero] { transition: --p .8s var(--ease); transition-delay: calc(1.1s * var(--k)); }

  /* footer wordmark */
  .js .wordmark--foot .ch-in { display: inline-block; transform: translateY(110%); clip-path: inset(-100% -20% 130% -20%); transition: transform 1.2s var(--ease-out), clip-path 1.2s var(--ease-out); transition-delay: calc(var(--i) * 15ms); }
  .js .wordmark--foot.is-inview .ch-in { transform: none; clip-path: inset(-50% -20% -50% -20%); }

  /* ---------- hero intro (html.hero-in starts it; html.intro-done ends it) ----------
     .10s name chars rise · .25s portrait wipes up · .35s mint block · .45s covers drop
     .80s line · .95s buttons · 1.1s highlighter. Settled by ~2.0s; halved on a return visit. */
  .js .wordmark--hero .ch-in { display: inline-block; clip-path: inset(-50% -20% -50% -20%); }
  html.js:not(.intro-done) .wordmark--hero .ch-in { transition: transform 1.2s var(--ease-out), clip-path 1.2s var(--ease-out); transition-delay: calc((.1s + var(--i) * 15ms) * var(--k)); }
  html.js:not(.hero-in) .wordmark--hero .ch-in { transform: translateY(110%); clip-path: inset(-100% -20% 130% -20%); }

  .js .hero__frame { clip-path: inset(0); }
  html.js:not(.intro-done) .hero__frame { transition: clip-path .9s var(--ease); transition-delay: calc(.25s * var(--k)); }
  html.js:not(.hero-in) .hero__frame { clip-path: inset(100% 0 0 0); }
  html.js:not(.intro-done) #hero-photo { transition: scale 1.2s var(--ease-out); transition-delay: calc(.25s * var(--k)); }
  html.js:not(.hero-in) #hero-photo { scale: 1.15; }
  html.js:not(.intro-done) .hero__mint { transition: transform .6s var(--ease); transition-delay: calc(.35s * var(--k)); }
  html.js:not(.hero-in) .hero__mint { transform: scaleY(0); }

  html.js:not(.intro-done) .hero__cover { transition: transform 1.35s var(--ease-p4-out), opacity .5s var(--ease-out); transition-delay: calc((.45s + var(--i) * .1s) * var(--k)); }
  html.js:not(.hero-in) .hero__cover { transform: translateY(-60px) rotate(-10deg) scale(.9); opacity: 0; }

  html.js:not(.intro-done) .hero__ln > span { transition: transform 1.2s var(--ease-out), opacity .6s var(--ease-out); transition-delay: calc((.8s + var(--li, 0) * 80ms) * var(--k)); }
  html.js:not(.hero-in) .hero__ln > span { transform: translateY(110%); opacity: 0; }
  .hero__ln + .hero__ln > span { --li: 1; }

  html.js:not(.intro-done) .hero__cta .btn { transition: transform .6s var(--ease-out), filter .6s var(--ease-out), opacity .4s var(--ease-out), rotate .45s var(--ease-bounce), scale .15s var(--ease-out); transition-delay: calc(.95s * var(--k)); }
  html.js:not(.intro-done) .hero__cta .btn + .btn { transition-delay: calc(.99s * var(--k)); }
  html.js:not(.hero-in) .hero__cta .btn { transform: translateY(120%); filter: blur(.2rem); opacity: 0; }

  html.js:not(.intro-done) .site-header__bar > * { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(.6s * var(--k)); }
  html.js:not(.hero-in) .site-header__bar > * { opacity: 0; transform: translateY(-12px); }

  html.intro-skip .hero, html.intro-skip .hero *, html.intro-skip .site-header, html.intro-skip .site-header * { transition: none !important; }
}
/* mobile: the line is one flowing paragraph, so it fades up as one */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.js:not(.hero-in) .hero__ln > span { transform: translateY(16px); }
}

/* reduced motion: final states, no smooth extras */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
html:not(.js) .books__ctrl { display: none; }


/* ---------- Smooth-scroll performance ---------- */
/* highlighter fills once, as a short transition, instead of repainting every scroll frame */
.js [data-hl] { transition: --p .9s cubic-bezier(.16, 1, .3, 1); }
/* mint grounds widen once on entry (compositor-friendly, no per-frame clip-path) */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .js .ground--pre { clip-path: inset(0 4vw 0 4vw round 8px); transition: clip-path 1.1s cubic-bezier(.76, 0, .24, 1); }
  .js .ground--pre.ground--in { clip-path: inset(0 0 0 0 round 0); }
}
/* things moved by scroll get their own GPU layer, so they don't repaint */
.photo__frame img { will-change: translate; }
.ring { will-change: rotate; }
.drag__bar span { will-change: transform; }
.form__mark { will-change: transform; }
.marquee__track { will-change: transform; }
/* the pinned "forms" panel gets its own layer, so pinning doesn't repaint the page */
html.can-pin .forms__pin { will-change: transform; transform: translateZ(0); }
.plate { will-change: opacity, transform; }