/* rdennis.com
   Type: one family set, Instrument. Instrument Serif carries every headline,
   number and emphasis; Instrument Sans carries everything you read at length
   or press. No mono, no all-caps labels, no letterspaced kickers.
   Colour: violet is the brand; the spectrum (coral, saffron, mint, sky, pink)
   is the four audiences a story has to reach, plus play. Every section sits on
   one ground and restates its ink, so contrast holds wherever you land.
   Glyphs: nothing that holds text may clip it. Descenders keep their room
   (scripts/check-a11y.mjs measures every line box against its clipping
   ancestors). */

@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/instrument-sans-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --paper: #FBF7F1;
  --ink: #150A2B;
  --ink-2: #4D4566;
  --line: rgba(21, 10, 43, 0.14);
  --violet: #7622F7;
  --violet-deep: #5A12D6;
  --echo: #9B62FF;
  --pale: #E9E2FF;
  --lilac: #DCD0FF;
  --coral: #FF5B3A;
  --saffron: #FFC233;
  --mint: #1FD39A;
  --sky: #36A9FF;
  --pink: #FF6FB5;
  --lime: #C8F542;
  --before: #E7E2DA;
  --gray: #5E5870;

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Display sizes step down on phones on their own; a headline never wraps
     past three or four lines at 390px. */
  --t-hero: clamp(3.1rem, 1rem + 6.4vw, 8.75rem);
  --t-xxl: clamp(2.6rem, 1.3rem + 4.8vw, 6.5rem);
  --t-xl: clamp(2rem, 1.25rem + 2.9vw, 4rem);
  --t-l: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem);
  --t-lede: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --t-m: 1.0625rem;
  --t-s: 0.9375rem;
  --t-xs: 0.8125rem;

  --gut: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --sec: clamp(5rem, 3rem + 7vw, 9.5rem);
  --lap: 36px;
  --r-card: 28px;
  --r-tile: 18px;
  --r-input: 14px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  font: 400 var(--t-m)/1.55 var(--sans); color: var(--ink); background: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus, var(--violet)); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--saffron); color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--saffron); color: var(--ink); font-weight: 600; text-decoration: none; transition: top 0.2s; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- Grounds: each section names its ground and restates its ink ---------- */
[data-ground] { background: var(--bg); color: var(--fg); }
[data-ground="paper"]  { --bg: var(--paper);  --fg: var(--ink); --fg-2: var(--ink-2); --act: var(--violet); --on-act: #fff; --em: var(--violet);      --focus: var(--violet);      --card: #fff; --rule: var(--line); }
[data-ground="violet"] { --bg: var(--violet); --fg: #fff;       --fg-2: var(--pale);  --act: #fff;          --on-act: var(--ink); --em: var(--saffron); --focus: var(--saffron); --card: rgba(255,255,255,0.12); --rule: rgba(255,255,255,0.28); }
[data-ground="ink"]    { --bg: var(--ink);    --fg: #fff;       --fg-2: #C9C2DD;      --act: var(--saffron); --on-act: var(--ink); --em: var(--saffron); --focus: var(--saffron); --card: rgba(255,255,255,0.07); --rule: rgba(255,255,255,0.18); }
[data-ground="lilac"]  { --bg: var(--lilac);  --fg: var(--ink); --fg-2: var(--ink-2); --act: var(--violet); --on-act: #fff; --em: var(--violet-deep); --focus: var(--violet-deep); --card: #fff; --rule: rgba(21,10,43,0.16); }
[data-ground="coral"]  { --bg: var(--coral);  --fg: var(--ink); --fg-2: #2E0E04;      --act: var(--ink);    --on-act: #fff; --em: #fff;              --focus: var(--ink);         --card: rgba(255,255,255,0.22); --rule: rgba(21,10,43,0.22); }
[data-ground="saffron"]{ --bg: var(--saffron);--fg: var(--ink); --fg-2: #3A2A00;      --act: var(--ink);    --on-act: var(--saffron); --em: var(--violet-deep); --focus: var(--ink); --card: rgba(255,255,255,0.4); --rule: rgba(21,10,43,0.2); }
[data-ground="sky"]    { --bg: var(--sky);    --fg: var(--ink); --fg-2: #06243F;      --act: var(--ink);    --on-act: #fff; --em: var(--violet-deep); --focus: var(--ink); --card: rgba(255,255,255,0.32); --rule: rgba(21,10,43,0.2); }
[data-ground="mint"]   { --bg: var(--mint);   --fg: var(--ink); --fg-2: #06301F;      --act: var(--ink);    --on-act: var(--mint); --em: var(--ink);    --focus: var(--ink);         --card: rgba(255,255,255,0.35); --rule: rgba(21,10,43,0.2); }

/* Acts overlap like cards dealt onto the table: each new ground slides over the last. */
.act { position: relative; border-radius: var(--lap) var(--lap) 0 0; margin-top: calc(var(--lap) * -1); overflow-x: clip; }
.foot, .page-hero, .credits { overflow-x: clip; }
.act:first-child { margin-top: 0; border-radius: 0; }

/* ---------- Type ---------- */
.display, .h-hero, .h2, .h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 1; text-wrap: balance; }
.h-hero { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.022em; }
.h2 { font-size: var(--t-xxl); letter-spacing: -0.018em; }
.h3 { font-size: var(--t-xl); line-height: 1.02; }
.h-hero em, .h2 em, .h3 em, .display em { font-style: italic; color: var(--em); padding-right: 0.04em; }
.lede { font-size: var(--t-lede); line-height: 1.45; color: var(--fg-2); max-width: 36ch; text-wrap: pretty; }
.serif-l { font: 400 var(--t-l)/1.12 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.meta { font-size: var(--t-xs); line-height: 1.45; color: var(--fg-2); }
.meta a { color: var(--fg); }
.tag { display: inline-flex; align-items: center; gap: 0.55em; min-height: 34px; padding: 0.35em 0.9em; border-radius: 999px; background: var(--card); font: 600 0.875rem/1.1 var(--sans); }
.head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.head .lede { margin-top: 2px; }
.center { text-align: center; justify-items: center; }
.center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0 1.4em; border-radius: 999px; border: 0;
  background: var(--act); color: var(--on-act); font: 600 1rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(21, 10, 43, 0.55); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn .arr { width: 18px; height: 18px; transition: transform 0.25s var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px currentColor, 0 14px 30px -14px rgba(21, 10, 43, 0.4); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; }

/* ---------- Bar ---------- */
.bar { position: fixed; inset: 12px 12px auto; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.bar-in {
  --bar-bg: rgba(251, 247, 241, 0.82); --bar-fg: var(--ink); --bar-act: var(--violet); --bar-on: #fff;
  pointer-events: auto; width: min(100%, 1180px); display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--bar-bg); color: var(--bar-fg);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 32px -18px rgba(21, 10, 43, 0.45);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.bar[data-on="violet"] .bar-in { --bar-bg: rgba(74, 12, 186, 0.62); --bar-fg: #fff; --bar-act: #fff; --bar-on: var(--ink); }
.bar[data-on="ink"] .bar-in { --bar-bg: rgba(33, 20, 60, 0.72); --bar-fg: #fff; --bar-act: var(--saffron); --bar-on: var(--ink); }
.bar[data-on="coral"] .bar-in, .bar[data-on="saffron"] .bar-in, .bar[data-on="mint"] .bar-in, .bar[data-on="lilac"] .bar-in, .bar[data-on="sky"] .bar-in { --bar-bg: rgba(255, 255, 255, 0.72); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 6px; text-decoration: none; color: inherit; }
.brand-mark { width: 34px; height: auto; fill: currentColor; }
.brand-name { font: 400 1.3rem/1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }
.bar-links { display: none; gap: 2px; margin-left: auto; }
.bar-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 600 0.95rem/1 var(--sans); text-decoration: none; transition: background-color 0.2s; }
.bar-links a:hover, .bar-links a[aria-current] { background: color-mix(in srgb, var(--bar-fg) 10%, transparent); }
.bar-cta { margin-left: auto; min-height: 44px; padding: 0 1.1em; background: var(--bar-act); color: var(--bar-on); font-size: 0.95rem; }
.menu-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bar-fg) 10%, transparent); display: grid; place-items: center; }
.menu-lines { display: grid; gap: 5px; }
.menu-lines i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--ease-out); }
.menu-open .menu-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
html:not(.js) .menu-btn { display: none; }
@media (min-width: 820px) { .bar-links { display: flex; } .bar-cta { margin-left: 6px; } .menu-btn { display: none; } }
@media (max-width: 420px) { .brand-name { display: none; } }

.menu { position: fixed; inset: 0; z-index: 55; background: var(--violet); color: #fff; padding: 104px var(--gut) 32px; display: flex; flex-direction: column; justify-content: space-between; --focus: var(--saffron); }
.menu[hidden] { display: none; }
.menu ul { display: grid; gap: 4px; }
.menu li a { display: inline-block; font: 400 clamp(2.6rem, 11vw, 4rem)/1.1 var(--serif); text-decoration: none; padding: 0.04em 0 0.1em; }
.menu li a em { color: var(--saffron); }
.menu .btn { --act: #fff; --on-act: var(--ink); align-self: flex-start; }

/* Until the entrance plays (boot.js lifts this after 4s at most), the hero waits unseen. */
html.js-hero .hero h1, html.js-hero .hero [data-intro], html.js-hero [data-person], html.js-hero [data-echo], html.js-hero .hero-spin,
html.js-hero .page-hero h1, html.js-hero .page-hero [data-intro], html.js-hero [data-pop] { visibility: hidden; }

/* ---------- Loader (first visit) ---------- */
.loader { display: none; }
/* First visit: the mark fades in, holds, and the violet screen fades into the page.
   Pure CSS, so nothing waits on a script and nothing jumps. */
html.js-intro .loader { display: grid; position: fixed; inset: 0; z-index: 90; place-items: center; background: var(--violet); pointer-events: none; animation: rd-intro-out 0.6s var(--ease-io) 1.05s both; }
.loader-mark { width: min(36vw, 200px); fill: #fff; opacity: 0; transform: scale(0.96); animation: rd-mark-in 0.6s var(--ease-out) 0.1s both; }
@keyframes rd-mark-in { to { opacity: 1; transform: none; } }
@keyframes rd-intro-out { to { opacity: 0; visibility: hidden; } }

/* ---------- Spinning badge (Magic UI's spinning text, rebuilt) ---------- */
.spin { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; text-decoration: none; color: var(--fg); }
.spin svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.spin svg.ring text { font: italic 400 15px/1 var(--serif); fill: currentColor; }
.spin .dot { width: 64px; height: 64px; border-radius: 50%; background: var(--saffron); color: var(--ink); display: grid; place-items: center; transition: transform 0.3s var(--ease-out); }
.spin:hover .dot { transform: scale(1.08) rotate(-12deg); }
.spin .dot svg { width: 26px; height: 26px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Hero (home) ---------- */
.hero { overflow: clip; isolation: isolate; --echo-y: 0px; }
.hero-stage { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: end; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.hero-copy { position: relative; z-index: 3; align-self: center; display: grid; gap: 26px; padding: 132px 0 96px; }
.hero-copy .lede { max-width: 30ch; }
.status { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 36px; padding: 4px 14px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font: 600 0.9rem/1 var(--sans); }
.status canvas { width: 26px; height: 26px; }
/* The echo word is set from data-echo, so no text node sits under axe or a screen reader. */
.hero-echo::before { content: attr(data-echo); }
.hero-echo {
  position: absolute; z-index: 0; right: -1vw; top: 16%; margin: 0;
  font: italic 400 clamp(8rem, 25vw, 27rem)/0.9 var(--serif); letter-spacing: -0.045em; color: var(--echo);
  white-space: nowrap; pointer-events: none; user-select: none; padding: 0 0.08em 0.2em;
}
.hero-person { position: relative; z-index: 1; align-self: end; justify-self: end; width: min(100%, 610px); margin-right: -1.5vw; transform-origin: 50% 100%; }
.hero-person img { width: 100%; }
.hero-spin { position: absolute; z-index: 4; left: 52%; bottom: 13%; }
@media (max-width: 899px) {
  .hero-stage { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; }
  .hero-copy { padding: 108px 0 8px; gap: 20px; }
  .hero-person { justify-self: center; width: min(92vw, 460px); margin: 0 auto; }
  .hero-echo { top: auto; bottom: 26%; right: auto; left: 50%; translate: -50% 0; font-size: 44vw; }
  .hero-spin { left: 0; right: auto; bottom: 7%; scale: 0.8; }
}

/* ---------- The difference: before and after ---------- */
.diff { padding: var(--sec) 0; }
.compare-wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.compare {
  --split: 50%; position: relative; height: clamp(520px, 74vh, 700px); border-radius: var(--r-card); overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; box-shadow: 0 40px 80px -50px rgba(21, 10, 43, 0.6);
}
.cmp-panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 6vw, 88px); }
.cmp-before { background: var(--before); color: var(--gray); }
.cmp-before::before { content: ""; position: absolute; inset: 0; background: url('/assets/img/stock/sticky-notes-1600.webp') center / cover; filter: grayscale(1) contrast(0.85) brightness(1.18); opacity: 0.24; }
.cmp-after { background: var(--saffron); color: var(--ink); clip-path: inset(0 0 0 var(--split)); }
.cmp-after::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, 0.45), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(255, 111, 181, 0.35), transparent 70%); }
.cmp-list { position: relative; display: grid; gap: clamp(14px, 2vw, 26px); }
.cmp-list li { font: 400 clamp(2rem, 1.1rem + 2.6vw, 3.5rem)/1.06 var(--serif); letter-spacing: -0.012em; text-wrap: balance; padding-bottom: 0.04em; }
.cmp-before li { transform: rotate(var(--r, 0deg)) translateX(var(--x, 0)); opacity: 0.92; }
.cmp-before li:nth-child(1) { --r: -2.4deg; }
.cmp-before li:nth-child(2) { --r: 1.6deg; --x: 7%; }
.cmp-before li:nth-child(3) { --r: -1deg; --x: -2%; }
.cmp-before li:nth-child(4) { --r: 2.2deg; --x: 4%; }
.cmp-after mark { background: none; color: inherit; position: relative; }
.cmp-tag { position: absolute; top: clamp(18px, 3vw, 28px); z-index: 2; }
.cmp-before .cmp-tag { left: clamp(18px, 3vw, 28px); background: rgba(255, 255, 255, 0.72); color: var(--ink); }
.cmp-after .cmp-tag { right: clamp(18px, 3vw, 28px); background: var(--ink); color: #fff; }
.cmp-handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--split); width: 0; }
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--ink); }
.cmp-knob {
  position: absolute; top: 50%; left: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff; cursor: grab; touch-action: none;
  box-shadow: 0 14px 34px -12px rgba(21, 10, 43, 0.75); transition: transform 0.25s var(--ease-out);
}
.cmp-knob:hover { transform: scale(1.06); }
.cmp-knob:active { cursor: grabbing; transform: scale(0.96); }
.cmp-knob svg { width: 36px; height: 36px; }
.cmp-knob:focus-visible { outline-color: var(--violet); outline-offset: 5px; border-radius: 50%; }
.diff-foot { margin-top: clamp(32px, 4vw, 48px); text-align: center; font: italic 400 var(--t-l)/1.1 var(--serif); }
@media (max-width: 699px) {
  .compare { height: 76svh; min-height: 560px; }
  .cmp-list li { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .cmp-panel { justify-content: flex-end; padding-bottom: 96px; }
  .cmp-knob { top: auto; bottom: 18px; margin-top: 0; }
}

/* ---------- One story, every audience: the prism ---------- */
.prism { padding: var(--sec) 0; overflow: clip; }
.prism-scene { position: relative; max-width: 1240px; margin: 0 auto; padding-inline: var(--gut); }
.prism-art { position: relative; aspect-ratio: 1200 / 620; }
.prism-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.beam { fill: none; stroke-linecap: round; }
.beam-in { stroke: #fff; stroke-width: 10; }
.beam-c { stroke: var(--coral); } .beam-s { stroke: var(--saffron); } .beam-m { stroke: var(--mint); } .beam-k { stroke: var(--sky); }
.beam-glow { stroke-width: 26; opacity: 0.22; filter: blur(6px); }
.prism-glass { fill: url(#glass); stroke: rgba(255, 255, 255, 0.9); stroke-width: 2.5; stroke-linejoin: round; }
.prism-in { position: absolute; left: 2%; top: 49%; transform: translateY(-140%); font: italic 400 var(--t-l)/1 var(--serif); color: #fff; max-width: 11ch; }
.auds { position: absolute; inset: 0; pointer-events: none; }
.aud { position: absolute; left: 73.5%; width: 26%; transform: translateY(-50%); pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
.ico { fill: currentColor; flex: none; }
.aud .ico { grid-row: span 2; width: 34px; height: 34px; color: var(--c); }
.aud b { font: 400 var(--t-l)/1 var(--serif); color: var(--c); font-weight: 400; }
.aud span { font-size: var(--t-s); color: var(--fg-2); line-height: 1.35; }
.aud:nth-child(1) { --c: var(--coral); top: 17.7%; }
.aud:nth-child(2) { --c: var(--saffron); top: 40.3%; }
.aud:nth-child(3) { --c: var(--mint); top: 62.9%; }
.aud:nth-child(4) { --c: var(--sky); top: 85.5%; }
.prism-mobile { display: none; }
.prism-gif { position: absolute; left: var(--gut); bottom: -6px; width: clamp(170px, 18vw, 230px); display: grid; gap: 8px; rotate: -4deg; }
.prism-gif img { border-radius: 16px; background: #000; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 20px 40px -20px #000; }
.prism-gif figcaption { font-size: 0.75rem; line-height: 1.35; color: var(--fg-2); rotate: 4deg; }
.prism-gif a { color: var(--fg); }
@media (max-width: 759px) {
  .prism-art { aspect-ratio: auto; }
  .prism-art > svg.prism-desk, .prism-in { display: none; }
  .prism-art > svg.prism-mobile { display: block; position: relative; inset: auto; width: 100%; height: auto; overflow: visible; margin-bottom: 8px; }
  .auds { position: static; display: grid; gap: 10px; }
  .aud { position: relative; left: auto; top: auto !important; width: auto; transform: none; padding: 16px 18px; border-radius: var(--r-tile); background: var(--card); border-left: 6px solid var(--c); }
  .prism-gif { position: relative; left: auto; bottom: auto; margin: 28px auto 0; width: 220px; }
}

/* ---------- Proof ---------- */
.proof { padding: var(--sec) 0 calc(var(--sec) * 0.8); }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.proof-left { display: grid; gap: 28px; align-content: start; }
.muy { justify-self: start; width: min(100%, 440px); padding: 12px 12px 16px; border-radius: 20px; background: #fff; color: var(--ink); rotate: -2.2deg; box-shadow: 0 34px 60px -34px rgba(21, 10, 43, 0.55); }
.muy img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: #222; }
.muy figcaption { display: grid; gap: 6px; padding: 12px 4px 0; }
.muy figcaption p { font-size: 0.98rem; line-height: 1.4; }
.muy .meta { color: var(--ink-2); }
.muy .meta a { color: var(--ink); }
.deck-wrap { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; min-width: 0; }
.deck { width: 360px; max-width: 100%; height: 470px; overflow: visible; }
.deck .swiper-slide { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 26px 26px 24px; border-radius: 26px; background: var(--c); color: var(--ink); box-shadow: 0 30px 50px -36px rgba(21, 10, 43, 0.7); }
.deck .swiper-slide:nth-child(1) { --c: var(--coral); }
.deck .swiper-slide:nth-child(2) { --c: var(--sky); }
.deck .swiper-slide:nth-child(3) { --c: var(--mint); }
.deck .swiper-slide:nth-child(4) { --c: var(--pink); }
.card-logo { height: 34px; width: auto; max-width: 70%; fill: currentColor; }
.card-logo.sq { height: 44px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-top .card-logo { max-width: 58%; }
.card-case { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 0.88rem/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color 0.2s; }
.card-case:hover { background: var(--violet-deep); }
.card-num { font: 400 clamp(4.6rem, 3.6rem + 3vw, 6.6rem)/0.92 var(--serif); letter-spacing: -0.035em; padding-bottom: 0.08em; font-variant-numeric: lining-nums; }
.card-what { font: 600 1.08rem/1.35 var(--sans); }
.card-part { font-size: 0.98rem; line-height: 1.4; }
.card-src { font-size: 0.9rem; font-weight: 600; }
a.card-src { display: inline-flex; align-items: center; min-height: 32px; align-self: flex-start; }
.deck-nav { display: flex; align-items: center; gap: 14px; }
.deck-nav button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform 0.2s var(--ease-out); }
.deck-nav button:hover { transform: scale(1.06); }
.deck-nav button svg { width: 20px; height: 20px; }
.deck-count { min-width: 4.5ch; text-align: center; font: 600 0.95rem/1 var(--sans); }
.deck-note { max-width: 34ch; text-align: center; }
html:not(.js) .deck { height: auto; }
html:not(.js) .deck .swiper-wrapper { display: grid; gap: 16px; }
html:not(.js) .deck-nav { display: none; }
html:not(.js) .marquee { -webkit-mask-image: none; mask-image: none; }
html:not(.js) .marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }

.press-wall { margin-top: clamp(56px, 8vw, 104px); }
.press-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.press-head p.serif-l { font-style: italic; }
.marquee { position: relative; overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; will-change: transform; }
.press { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 62px; padding: 0 24px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; transition: transform 0.25s var(--ease-out), background-color 0.25s; }
.press:hover, .press:focus-visible { transform: translateY(-3px) rotate(-1.5deg); background: var(--saffron); }
.press svg { height: 22px; width: auto; fill: currentColor; }
.press svg.sq { height: 26px; }
.press .wm { font: 700 1.08rem/1 var(--sans); letter-spacing: -0.015em; white-space: nowrap; }
.press .yr { font: 600 0.8rem/1 var(--sans); color: var(--ink-2); }
.press-note { margin-top: 14px; }
@media (max-width: 899px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .muy { justify-self: center; }
}

/* ---------- The Sprint: a ticket ---------- */
.sprint { padding: var(--sec) 0; }
.sprint-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.sprint-copy { display: grid; gap: 24px; }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 128px; perspective: 1600px; filter: drop-shadow(0 42px 46px rgba(21, 10, 43, 0.38)); transform-style: preserve-3d; }
.tk-main { position: relative; display: grid; transform-style: preserve-3d; transition: transform 0.9s var(--ease-io); }
.ticket.is-flipped .tk-main { transform: rotateY(180deg); }
.tk-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3.4vw, 40px); border-radius: 24px 6px 6px 24px; background: #fff; color: var(--ink); -webkit-backface-visibility: hidden; backface-visibility: hidden; --focus: var(--violet); }
.tk-back { transform: rotateY(180deg); background: var(--saffron); }
.tk-kick { font: italic 400 1.35rem/1 var(--serif); color: var(--violet-deep); }
.tk-title { font: 400 clamp(2.3rem, 1.6rem + 2.4vw, 3.6rem)/0.98 var(--serif); letter-spacing: -0.02em; }
.tk-leave { font: 600 0.95rem/1 var(--sans); color: var(--ink-2); }
.tk-list { display: grid; gap: 8px; }
.tk-list li { display: flex; gap: 10px; align-items: baseline; font: 500 1.05rem/1.35 var(--sans); }
.tk-list li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--violet)); transform: translateY(-1px) rotate(45deg); }
.tk-list li:nth-child(1) { --c: var(--coral); } .tk-list li:nth-child(2) { --c: var(--saffron); } .tk-list li:nth-child(3) { --c: var(--mint); } .tk-list li:nth-child(4) { --c: var(--sky); }
.tk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: auto; padding-top: 16px; border-top: 1.5px dashed rgba(21, 10, 43, 0.2); }
.tk-fee { font-size: 0.95rem; } .tk-fee b { font-weight: 600; }
.tk-flip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: 600 0.92rem/1 var(--sans); display: inline-flex; align-items: center; gap: 8px; }
.tk-flip svg { width: 18px; height: 18px; }
.tk-steps { display: grid; gap: 12px; counter-reset: s; }
.tk-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 14px; align-items: center; }
.tk-steps .ico { grid-row: span 2; width: 34px; height: 34px; color: var(--violet-deep); }
.tk-steps b { font: 400 1.55rem/1.05 var(--serif); font-weight: 400; }
.tk-steps span { font-size: 0.95rem; color: #3A2A00; }
.tk-stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 10px; border-radius: 6px 24px 24px 6px; background: #fff; color: var(--ink); border-left: 2px dashed rgba(21, 10, 43, 0.3); cursor: grab; touch-action: none; }
.tk-stub:active { cursor: grabbing; }
.tk-codewrap { position: relative; width: 66px; height: 230px; flex: none; }
.tk-codewrap svg { position: absolute; left: 50%; top: 50%; width: 230px; height: 66px; max-width: none; transform: translate(-50%, -50%) rotate(90deg); }
.tk-stub .tk-tear { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font: 600 0.82rem/1.15 var(--sans); text-align: center; text-decoration: none; color: var(--ink); min-height: 44px; }
.tk-stub .tk-tear svg { width: 22px; height: 22px; }
.ticket::before, .ticket::after { content: ""; position: absolute; z-index: 2; right: 116px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); }
.ticket::before { top: -13px; } .ticket::after { bottom: -13px; }
@media (max-width: 899px) { .sprint-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) {
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .tk-face { border-radius: 24px 24px 6px 6px; }
  .tk-stub { flex-direction: row; border-left: 0; border-top: 2px dashed rgba(21, 10, 43, 0.3); border-radius: 6px 6px 24px 24px; padding: 14px 18px; }
  .tk-codewrap { width: 170px; height: 52px; }
  .tk-codewrap svg { width: 170px; height: 52px; transform: translate(-50%, -50%); }
  .ticket::before, .ticket::after { right: auto; top: auto; bottom: 74px; }
  .ticket::before { left: -13px; } .ticket::after { right: -13px; }
}

/* ---------- Speaking teaser ---------- */
.talk { padding: var(--sec) 0; overflow: clip; }
.talk-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.arch { position: relative; width: min(100%, 420px); aspect-ratio: 2 / 3; border-radius: 999px 999px 30px 30px; overflow: hidden; background: var(--ink); rotate: -3deg; box-shadow: 0 40px 60px -40px rgba(21, 10, 43, 0.75); justify-self: center; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.talk-copy { display: grid; gap: 26px; }
.hand { display: flex; padding: 10px 0 18px; }
.topic { position: relative; flex: none; width: clamp(180px, 15vw, 230px); aspect-ratio: 3 / 4; margin-left: -56px; border-radius: 22px; overflow: hidden; color: #fff; background: var(--ink); rotate: var(--rot, 0deg); box-shadow: 0 24px 40px -24px rgba(21, 10, 43, 0.8); transition: rotate 0.5s var(--ease-out), margin 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.topic:first-child { margin-left: 0; }
.topic:nth-child(1) { --rot: -7deg; } .topic:nth-child(2) { --rot: 1deg; z-index: 1; transform: translateY(-10px); } .topic:nth-child(3) { --rot: 8deg; }
.hand:hover .topic, .hand:focus-within .topic, .hand.is-open .topic { margin-left: 14px; rotate: 0deg; transform: none; }
.hand:hover .topic:first-child, .hand:focus-within .topic:first-child, .hand.is-open .topic:first-child { margin-left: 0; }
.topic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.topic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 10, 43, 0) 30%, rgba(21, 10, 43, 0.92) 78%); }
.topic h3 { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 18px; font: 400 1.5rem/1.08 var(--serif); letter-spacing: -0.01em; padding-bottom: 0.08em; }
.topic h3 a { color: #fff; text-decoration: none; }
.topic h3 a::after { content: ""; position: absolute; inset: -400px -16px -18px; }
.topic:focus-within { outline: 3px solid var(--saffron); outline-offset: 3px; }
.topic h3 a:focus-visible { outline: none; }
@media (max-width: 899px) {
  .talk-grid { grid-template-columns: minmax(0, 1fr); }
  .arch { width: min(78vw, 360px); }
  .hand { overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 10px var(--gut) 18px; margin-inline: calc(var(--gut) * -1); scrollbar-width: none; }
  .hand::-webkit-scrollbar { display: none; }
  .topic { margin-left: 0 !important; rotate: 0deg !important; transform: none !important; width: 66vw; max-width: 260px; scroll-snap-align: center; }
}

/* ---------- Contact ---------- */
.contact { padding: var(--sec) 0 calc(var(--sec) * 0.5); }
.vt { position: relative; margin: 0 auto clamp(18px, 3vw, 36px); }
.vt-text { display: block; text-align: center; font: italic 400 clamp(4.6rem, 17vw, 17rem)/1 var(--serif); letter-spacing: -0.035em; padding: 0 0.04em 0.16em; white-space: nowrap; background: url('/assets/media/ink-swirl.webp') center / cover; -webkit-background-clip: text; background-clip: text; color: transparent; }
.vt canvas { display: none; width: 100%; height: auto; }
.vt.is-live canvas { display: block; }
.vt.is-live .vt-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 760px; margin: 0 auto; text-align: center; justify-items: center; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.34); background: transparent; color: #fff; font: 600 1rem/1 var(--sans); transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease-out), border-color 0.2s; }
.chip:hover { transform: translateY(-2px); border-color: #fff; }
.chip[aria-pressed="true"] { background: var(--c, var(--saffron)); color: var(--ink); border-color: transparent; }
.chip:nth-child(6n+1) { --c: var(--coral); } .chip:nth-child(6n+2) { --c: var(--saffron); } .chip:nth-child(6n+3) { --c: var(--mint); }
.chip:nth-child(6n+4) { --c: var(--sky); } .chip:nth-child(6n+5) { --c: var(--pink); } .chip:nth-child(6n+6) { --c: var(--lime); }
.note-field { width: 100%; display: grid; gap: 8px; text-align: left; }
.note-field label { font-weight: 600; font-size: 0.95rem; }
.note-field textarea { width: 100%; min-height: 92px; resize: vertical; padding: 14px 16px; border-radius: var(--r-input); border: 1.5px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); color: #fff; font: 400 1rem/1.5 var(--sans); }
.note-field textarea:focus { border-color: var(--saffron); outline: none; box-shadow: 0 0 0 3px rgba(255, 194, 51, 0.35); }
.slide { position: relative; width: min(100%, 520px); height: 76px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
.slide-label { position: absolute; inset: 0; display: grid; place-items: center; font: 600 1.02rem/1 var(--sans); color: var(--fg-2); pointer-events: none; padding-left: 40px; }
.slide-goal { position: absolute; right: 8px; top: 8px; width: 60px; height: 60px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; color: var(--ink); transform: scale(0.5); }
.slide-goal svg { width: 26px; height: 26px; }
.slide-knob { position: absolute; z-index: 1; left: 8px; top: 8px; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--saffron); color: var(--ink); display: grid; place-items: center; touch-action: none; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.7); }
.slide-knob svg { width: 28px; height: 28px; }
.contact-small { display: grid; gap: 6px; }
@media (max-width: 559px) { .slide-label { padding-left: 56px; font-size: 0.95rem; } }

/* ---------- Footer ---------- */
.foot { padding: clamp(56px, 7vw, 96px) 0 28px; overflow: clip; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.foot-cols h2 { font: italic 400 1.6rem/1.05 var(--serif); color: var(--fg-2); margin-bottom: 10px; padding-bottom: 0.06em; }
.foot-cols ul { display: grid; gap: 2px; }
.foot-cols a { display: inline-flex; align-items: center; min-height: 40px; font: 500 1.05rem/1.25 var(--sans); text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
/* "Ryan Dennis" is 3.815em wide, so 25cqw fills about 95% of the footer at any width. */
.foot .wrap { container-type: inline-size; }
.foot-word { display: block; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0 0 0.2em; text-align: center; font: 400 min(16vw, 19rem)/1 var(--serif); font-size: 25cqw; letter-spacing: -0.045em; white-space: nowrap; background: linear-gradient(90deg, var(--coral), var(--saffron) 22%, var(--mint) 44%, var(--sky) 64%, var(--violet) 82%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-word.is-split { background: none; color: inherit; }
.foot-word .ch { display: inline-block; color: var(--c); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
.foot-mail { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--rule); transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease-out); }
.foot-mail:hover { background: var(--saffron); color: var(--ink); transform: translateY(-2px); }
.foot-mail svg { width: 22px; height: 22px; }
@media (max-width: 559px) { .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Inner pages: shared hero ---------- */
.page-hero { position: relative; overflow: clip; padding: 132px 0 var(--sec); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-hero-copy { display: grid; gap: 24px; }
@media (max-width: 899px) { .page-hero { padding-top: 112px; } .page-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* About: a square cutout on a colour disc, with stickers */
.disc { position: relative; justify-self: center; width: min(100%, 460px); aspect-ratio: 1; }
.disc::before { content: ""; position: absolute; inset: 6% 6% 0; border-radius: 50%; background: var(--mint); }
.disc img { position: relative; width: 100%; border-radius: 0 0 50% 50% / 0 0 46% 46%; }
.sticker { position: absolute; z-index: 2; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font: 600 0.95rem/1 var(--sans); color: var(--ink); background: var(--c); box-shadow: 0 14px 26px -14px rgba(21, 10, 43, 0.6); white-space: nowrap; }
.sticker:nth-of-type(1) { --c: var(--saffron); left: -4%; top: 16%; rotate: -8deg; }
.sticker:nth-of-type(2) { --c: var(--coral); right: -2%; top: 40%; rotate: 6deg; }
.sticker:nth-of-type(3) { --c: var(--sky); left: 6%; bottom: 12%; rotate: 4deg; }

/* About: the record (one place for the work history) */
.record { padding: var(--sec) 0; }
.rec { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.rec-tabs { position: relative; display: flex; flex-direction: column; border-left: 2px solid var(--rule); }
.rec-tab { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px 0 20px; border: 0; background: none; text-align: left; font: 600 1rem/1.2 var(--sans); color: var(--fg-2); transition: color 0.2s, background-color 0.2s; border-radius: 0 12px 12px 0; }
.rec-tab span { font-weight: 500; font-size: 0.85rem; }
.rec-tab:hover { color: var(--fg); background: rgba(21, 10, 43, 0.04); }
.rec-tab[aria-selected="true"] { color: var(--fg); }
.rec-ind { position: absolute; left: -2px; top: 0; width: 3px; height: 52px; border-radius: 3px; background: var(--violet); transition: transform 0.45s var(--ease-out); }
.rec-panel { display: grid; gap: 18px; align-content: start; min-height: 360px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); background: var(--card); box-shadow: 0 30px 50px -40px rgba(21, 10, 43, 0.5); }
.rec-panel[hidden] { display: none; }
.rec-logo { height: 34px; width: auto; max-width: 220px; fill: currentColor; }
.rec-logo.sq { height: 46px; }
.rec-wm { font: 700 1.5rem/1 var(--sans); letter-spacing: -0.02em; }
.rec-role { font: 400 var(--t-xl)/1.02 var(--serif); letter-spacing: -0.015em; text-wrap: balance; padding-bottom: 0.05em; }
.rec-when { font-weight: 600; color: var(--fg-2); }
.rec-what { font-size: 1.08rem; line-height: 1.5; max-width: 52ch; }
.rec-src { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-src a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--lilac); color: var(--ink); font: 600 0.88rem/1 var(--sans); text-decoration: none; }
.rec-src a:hover { background: var(--saffron); }
.rec-before { margin-top: 28px; }
@media (max-width: 799px) {
  .rec { grid-template-columns: minmax(0, 1fr); }
  .rec-tabs { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 2px solid var(--rule); scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .rec-tabs::-webkit-scrollbar { display: none; }
  .rec-tab { flex: none; border-radius: 12px 12px 0 0; padding: 0 16px; }
  .rec-tab span { display: none; }
  .rec-ind { display: none; }
  .rec-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 3px; border-radius: 3px; background: var(--violet); }
}

/* About: what guides me */
.guides { padding: var(--sec) 0; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.c3 { display: grid; align-content: start; gap: 14px; padding: 28px; border-radius: var(--r-card); background: var(--c); color: var(--ink); min-height: 260px; }
.c3:nth-child(1) { --c: var(--saffron); rotate: -1.2deg; } .c3:nth-child(2) { --c: var(--mint); rotate: 0.8deg; } .c3:nth-child(3) { --c: var(--pink); rotate: -0.6deg; }
.c3 h3 { font: 400 2.2rem/1 var(--serif); padding-bottom: 0.06em; }
.c3 p { font-size: 1.05rem; line-height: 1.5; }
.c3 a { font-weight: 600; }
@media (max-width: 799px) { .cards3 { grid-template-columns: minmax(0, 1fr); } .c3 { min-height: 0; } }

/* Closing call to action */
.closer { padding: var(--sec) 0; text-align: center; }
.closer .wrap { display: grid; justify-items: center; gap: 26px; }

/* Speaking: hero with stage light */
.stage-art { position: relative; justify-self: center; width: min(100%, 440px); }
.stage-art .arch { width: 100%; rotate: 2deg; }
.lights { position: absolute; inset: -18% -30% auto; height: 120%; pointer-events: none; mix-blend-mode: screen; opacity: 0.85; }
.lights i { position: absolute; top: 0; left: 50%; width: 46%; height: 100%; transform-origin: 50% 0; background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, var(--c) 10deg, transparent 22deg); filter: blur(10px); opacity: 0.55; animation: sweep 9s var(--ease-io) infinite alternate; }
.lights i:nth-child(1) { --c: var(--coral); animation-delay: -2s; translate: -90% 0; }
.lights i:nth-child(2) { --c: var(--saffron); translate: -50% 0; animation-duration: 11s; }
.lights i:nth-child(3) { --c: var(--sky); translate: -10% 0; animation-delay: -5s; }
@keyframes sweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

/* Speaking: topics, formats, kit */
.onstage { padding: calc(var(--sec) * 0.5) 0 calc(var(--sec) * 0.5 + var(--lap)); }
.stage-photo { border-radius: var(--r-card); overflow: hidden; background: var(--ink); box-shadow: 0 40px 70px -44px rgba(21, 10, 43, 0.7); aspect-ratio: 3 / 2; }
.stage-photo img { width: 100%; height: 100%; object-fit: cover; }
.topics { padding: var(--sec) 0; }
.tcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tcard { position: relative; display: grid; align-content: end; gap: 10px; min-height: 460px; padding: 24px; border-radius: var(--r-card); overflow: hidden; color: #fff; background: var(--ink); isolation: isolate; }
.tcard img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 10, 43, 0.05) 25%, rgba(21, 10, 43, 0.94) 72%); }
.tcard:hover img { transform: scale(1.06); }
.tcard h3 { font: 400 2.1rem/1 var(--serif); letter-spacing: -0.012em; padding-bottom: 0.05em; }
.tcard p { font-size: 1rem; line-height: 1.45; color: #E6E0F4; }
.tcard .num { position: absolute; top: 18px; left: 18px; padding: 6px 12px 7px; border-radius: 999px; background: rgba(21, 10, 43, 0.72); font: italic 400 1.35rem/1 var(--serif); color: var(--c); }
.tcard:nth-child(1) { --c: var(--coral); } .tcard:nth-child(2) { --c: var(--saffron); } .tcard:nth-child(3) { --c: var(--mint); }
.also { margin-top: 22px; }
@media (max-width: 899px) {
  .tcards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(82vw, 340px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .tcards::-webkit-scrollbar { display: none; }
  .tcard { scroll-snap-align: center; min-height: 420px; }
}
.formats { padding: var(--sec) 0; }
.fmt { display: flex; flex-wrap: wrap; gap: 12px; }
.fmt li { display: grid; gap: 2px; padding: 16px 22px; border-radius: 22px; background: var(--card); }
.fmt b { font: 400 1.7rem/1 var(--serif); font-weight: 400; padding-bottom: 0.05em; }
.fmt span { font-size: 0.92rem; color: var(--fg-2); }
.kit { padding: var(--sec) 0; }
/* The podcast: one card, cover plus a line. Coming soon on Spotify. */
.pod { display: inline-flex; align-items: center; gap: 16px; justify-self: start; padding: 10px 22px 10px 10px; border-radius: var(--r-tile); background: rgba(255, 255, 255, 0.82); color: var(--ink); text-decoration: none; box-shadow: 0 24px 40px -30px rgba(21, 10, 43, 0.55); transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.pod:hover { transform: translateY(-3px); box-shadow: 0 30px 46px -30px rgba(21, 10, 43, 0.6); }
.pod img { flex: none; width: 88px; height: 88px; border-radius: 12px; object-fit: cover; }
.pod-text { display: grid; gap: 4px; }
.pod-text b { font: 600 var(--t-m)/1.2 var(--sans); letter-spacing: -0.01em; }
.pod-text span { font: 500 var(--t-s)/1.3 var(--sans); color: var(--ink-2); }
.onstage .pod { margin: 0; }
.shots { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: 40px; }
.shot { margin: 0; }
.shot img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-card); background: var(--violet); box-shadow: 0 40px 70px -44px rgba(21, 10, 43, 0.6); }
.shot-links { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.shot-links li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.shot-links a { font: 400 var(--t-l)/1.1 var(--serif); letter-spacing: -0.01em; color: var(--ink); padding-bottom: 0.08em; }
.shot-links span { font: 500 var(--t-s)/1.3 var(--sans); color: var(--ink-2); white-space: nowrap; }
.bios { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bio { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: var(--r-card); background: var(--card); }
.bio-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bio-head h3 { font: 400 1.9rem/1 var(--serif); padding-bottom: 0.05em; }
.bio p { line-height: 1.55; }
.copy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: 600 0.9rem/1 var(--sans); justify-self: start; }
details.bio summary { cursor: pointer; list-style: none; }
details.bio summary::-webkit-details-marker { display: none; }
.onrec { display: flex; flex-wrap: wrap; gap: 10px; }
.onrec-groups { display: grid; gap: 26px; margin-top: 40px; }
.onrec-group { display: grid; gap: 12px; }
.onrec-group h3 { font: italic 400 1.6rem/1.1 var(--serif); padding-bottom: 0.06em; }
.onrec .press { height: auto; min-height: 56px; padding: 10px 22px; }
.onrec .press .wm { white-space: normal; }
@media (max-width: 799px) { .shots { grid-template-columns: minmax(0, 1fr); } .shot { width: min(100%, 360px); } .bios { grid-template-columns: minmax(0, 1fr); } }

/* Credits */
.credits { padding: 140px 0 var(--sec); }
.credit-list { display: grid; gap: 10px; margin-top: 18px; }
.credit-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: var(--r-tile); background: var(--card); }
.credit-list img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; background: var(--ink); }
.credit-list .t { font-weight: 600; }
.credit-list .m { font-size: 0.92rem; color: var(--fg-2); }
.credit-sec { margin-top: 48px; }
.credit-sec h2 { font: 400 var(--t-l)/1.05 var(--serif); padding-bottom: 0.05em; }
.libs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 18px; }
.libs li { padding: 16px 18px; border-radius: var(--r-tile); background: var(--card); display: grid; gap: 4px; }
.libs a { font-weight: 600; }
.libs .m { font-size: 0.9rem; color: var(--fg-2); }

/* 404 */
.lost { min-height: 100svh; display: grid; align-content: center; gap: 26px; padding: 120px 0 80px; overflow: clip; text-align: center; justify-items: center; }
.gallop { position: relative; width: 100%; height: 200px; margin: 10px 0 0; }
.gallop img { position: absolute; top: 0; left: 0; width: 300px; height: 200px; border-radius: 14px; animation: gallop 7s linear infinite; }
@keyframes gallop { from { transform: translateX(-320px); } to { transform: translateX(100vw); } }

/* ---------- Case studies (/work): still pages. Hover is the only motion. ---------- */
.case-hero { padding: 132px 0 calc(var(--sec) * 0.8 + var(--lap)); }
.case-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.case-hero-copy { display: grid; gap: 24px; align-content: center; }
.crumb { font: 600 0.95rem/1.3 var(--sans); color: var(--fg-2); }
.crumb a { display: inline-flex; align-items: center; min-height: 24px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.case-meta .cite-logo { height: 16px; }
.case-meta .cite-logo.sq { height: 20px; }
.case-hero[data-ground="sky"] { --disc: var(--saffron); }
.case-hero[data-ground="ink"] { --disc: var(--violet); }
.case-hero[data-ground="coral"] { --disc: var(--saffron); }
.case-hero[data-ground="lilac"] { --disc: var(--coral); }

/* a collage of three posts on a colour disc, every one readable */
.stack { position: relative; display: flex; flex-direction: column; padding: 28px 0; isolation: isolate; }
.stack::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(100%, 470px); aspect-ratio: 1; border-radius: 50%; background: var(--disc, var(--saffron)); translate: -50% -50%; }
.stack .post { position: relative; width: min(86%, 390px); padding-bottom: 20px; transition: rotate 0.5s var(--ease-out); }
.stack .post-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.stack .post:nth-child(1) { align-self: flex-start; rotate: -4deg; }
.stack .post:nth-child(2) { align-self: flex-end; rotate: 3deg; margin-top: -8px; z-index: 1; }
.stack .post:nth-child(3) { align-self: center; rotate: -1.5deg; margin-top: -8px; z-index: 2; }
.stack:hover .post:nth-child(1) { rotate: -6deg; }
.stack:hover .post:nth-child(2) { rotate: 5deg; }
.stack:hover .post:nth-child(3) { rotate: 0deg; }

/* a post, as X shows it, but static: no X script loads here */
.post { display: grid; gap: 12px; padding: 18px 20px 14px; border-radius: 22px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 1px 0 rgba(21, 10, 43, 0.05), 0 26px 44px -30px rgba(21, 10, 43, 0.6); --focus: var(--violet); }
.post-head { display: flex; align-items: center; gap: 12px; }
.post-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--lilac); }
.post-who { display: grid; font-size: 0.95rem; line-height: 1.25; }
.post-who b { font-weight: 700; }
.post-who span, .post-who time { color: var(--gray); }
.post-x { flex: none; width: 18px; height: 18px; margin-left: auto; fill: var(--ink); }
.post-text { font-size: 1.05rem; line-height: 1.5; overflow-wrap: anywhere; }
.post-quoting { padding: 10px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.92rem; line-height: 1.45; color: var(--gray); }
.post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--gray); }
.post-foot a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; transition: background-color 0.2s; }
.post-foot a:hover { background: var(--violet); }

/* a release, an article or a figure */
.cite { display: grid; gap: 12px; padding: 20px 22px; border-radius: 22px; background: var(--card); color: var(--fg); text-align: left; box-shadow: inset 0 0 0 1px var(--rule), 0 26px 44px -34px rgba(21, 10, 43, 0.5); }
.cite-src { display: flex; align-items: center; min-height: 28px; }
.cite-logo { height: 22px; width: auto; max-width: 180px; fill: currentColor; }
.cite-logo.sq { height: 28px; }
.cite-wm { font: 700 1.02rem/1.2 var(--sans); letter-spacing: -0.01em; }
.cite-title { font: 400 1.6rem/1.14 var(--serif); letter-spacing: -0.01em; text-wrap: pretty; padding-bottom: 0.06em; }
.cite-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 0.2s; }
.cite-title a:hover { text-decoration-color: currentColor; }
.cite-quote { padding-left: 16px; border-left: 3px solid var(--k, var(--violet)); font: italic 400 1.3rem/1.3 var(--serif); text-wrap: pretty; padding-bottom: 0.06em; }
.cite-note { font-size: 0.95rem; line-height: 1.5; color: var(--fg-2); }
.post .cite-note { color: var(--gray); }
.tag-mine { display: inline-flex; align-items: center; min-height: 24px; margin-left: 4px; padding: 0 10px; border-radius: 999px; background: var(--saffron); color: var(--ink); font-size: 0.82rem; font-weight: 600; }

/* the line */
.case-line { padding: var(--sec) 0 calc(var(--sec) + var(--lap)); text-align: center; }
.case-line .wrap { display: grid; justify-items: center; gap: 26px; }
.line-quote { max-width: 15ch; font: italic 400 var(--t-xxl)/1.02 var(--serif); letter-spacing: -0.022em; text-wrap: balance; padding: 0 0.06em 0.1em; }
.line-quote::before { content: "\201C"; color: var(--saffron); }
.line-quote::after { content: "\201D"; color: var(--saffron); }
/* a tag or a line of my own carries no quotation marks */
.line-quote.is-plain::before, .line-quote.is-plain::after { content: none; }
.line-quote.is-plain { color: var(--saffron); }
.line-where { max-width: 52ch; font-size: var(--t-lede); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }

/* the trail: the news on the left, my posts on the right, one spine of dates */
.case-trail { padding: var(--sec) 0 calc(var(--sec) + var(--lap)); }
.k-release { --k: var(--saffron); } .k-press { --k: var(--sky); } .k-data { --k: var(--mint); } .k-post { --k: var(--violet); }
.tl-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0 0 clamp(32px, 4vw, 56px); font: 600 0.95rem/1 var(--sans); }
.tl-key li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.tl-key li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--k); }
.tl { position: relative; display: grid; gap: clamp(22px, 3vw, 34px); }
.tl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 3px; background: linear-gradient(180deg, var(--coral), var(--saffron) 25%, var(--mint) 50%, var(--sky) 75%, var(--violet)); }
.tl-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); align-items: start; }
.tl-dot { display: none; }
.tl-date { grid-row: 1; grid-column: 2; justify-self: center; position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; padding: 0 12px; border-radius: 999px; background: var(--k); color: var(--ink); font: 600 0.85rem/1 var(--sans); white-space: nowrap; box-shadow: 0 0 0 5px var(--bg); }
.k-post .tl-date { color: #fff; }
.tl-body { grid-row: 1; grid-column: 1; display: grid; gap: 8px; justify-items: end; }
.k-post .tl-body { grid-column: 3; justify-items: start; }
.tl-body > article { width: 100%; max-width: 520px; transition: translate 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.tl-body > article:hover { translate: 0 -3px; }
.kind { font: 600 0.9rem/1.2 var(--sans); color: var(--fg-2); }
@media (max-width: 899px) {
  .tl::before { left: 11px; margin-left: 0; }
  .tl-item { grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; }
  .tl-dot { display: block; grid-row: 1; grid-column: 1; justify-self: center; align-self: center; width: 16px; height: 16px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 4px var(--bg); position: relative; z-index: 1; }
  .tl-date { grid-column: 2; justify-self: start; margin-top: 0; box-shadow: none; }
  .tl-body, .k-post .tl-body { grid-row: 2; grid-column: 2; justify-items: start; }
}

/* what the numbers did */
.case-changed { padding: var(--sec) 0 calc(var(--sec) + var(--lap)); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { display: grid; align-content: start; gap: 12px; padding: 30px 28px 26px; border-radius: var(--r-card); background: #fff; color: var(--ink); box-shadow: inset 0 9px 0 var(--c); }
.stat:nth-child(1) { --c: var(--coral); rotate: -1deg; } .stat:nth-child(2) { --c: var(--saffron); rotate: 0.6deg; } .stat:nth-child(3) { --c: var(--mint); rotate: -0.4deg; }
.stat b { font: 400 clamp(3.2rem, 2rem + 3.6vw, 5.4rem)/1 var(--serif); letter-spacing: -0.03em; padding-bottom: 0.08em; }
.stat span { font-size: 1.02rem; line-height: 1.45; }
.stat-src { justify-self: start; display: inline-flex; align-items: center; min-height: 34px; margin-top: 4px; padding: 0 14px; border-radius: 999px; background: var(--lilac); color: var(--ink); font: 600 0.88rem/1 var(--sans); text-decoration: none; transition: background-color 0.2s; }
.stat-src:hover { background: var(--saffron); }
.stats-note { max-width: 70ch; margin-top: 26px; }

/* my part, and how I read it */
.case-part { padding: var(--sec) 0 calc(var(--sec) + var(--lap)); }
.part-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.mine { display: grid; gap: 16px; margin-top: 28px; }
.mine li { position: relative; padding-left: 42px; font-size: 1.12rem; line-height: 1.45; }
.mine li::before { content: ""; position: absolute; left: 0; top: 0.05em; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }
.mine li::after { content: ""; position: absolute; left: 9px; top: calc(0.05em + 9px); width: 10px; height: 6px; border-left: 2.5px solid var(--saffron); border-bottom: 2.5px solid var(--saffron); rotate: -45deg; }
.readit { display: grid; gap: 18px; justify-items: start; padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-card); background: var(--card); rotate: 1deg; }

/* case cards */
.case-next, .case-index { padding: var(--sec) 0 calc(var(--sec) + var(--lap)); }
.case-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-card { display: grid; align-content: start; gap: 16px; min-height: 250px; padding: 28px; border-radius: var(--r-card); text-decoration: none; transition: translate 0.35s var(--ease-out), rotate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.case-card:hover { translate: 0 -4px; rotate: -0.6deg; box-shadow: 0 30px 50px -30px rgba(21, 10, 43, 0.6); }
.case-card .cite-logo { height: 26px; }
.case-card .cite-logo.sq { height: 34px; }
.case-card-title { font: 400 clamp(2rem, 1.4rem + 1.6vw, 2.75rem)/1.04 var(--serif); letter-spacing: -0.015em; text-wrap: balance; padding-bottom: 0.06em; }
.case-card-title em { color: var(--em); padding-right: 0.04em; }
.case-card-meta { font-size: 0.95rem; color: var(--fg-2); }
.case-card-go { display: inline-flex; align-items: center; gap: 0.5em; margin-top: auto; font-weight: 600; }
.case-card-go .arr { width: 18px; height: 18px; transition: translate 0.25s var(--ease-out); }
.case-card:hover .case-card-go .arr { translate: 3px 0; }
.case-card-lg { min-height: 340px; }
.closer .btn-row { justify-content: center; }

/* the index header Ryan asked for: large, in capitals (CSS only, so screen readers read words) */
.cases-title { margin-bottom: clamp(28px, 4vw, 48px); font: 400 var(--t-xxl)/0.95 var(--serif); letter-spacing: 0.01em; text-transform: uppercase; padding-bottom: 0.08em; }

/* the PDF of each case, through CryptoLately's intake */
.case-pdf { padding: var(--sec) 0 calc(var(--sec) + var(--lap)); }
.pdf-grid { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.pdf-cover { width: min(100%, 320px); justify-self: center; border-radius: 6px; background: #fff; rotate: -3deg; box-shadow: 0 40px 70px -36px rgba(0, 0, 0, 0.8); transition: rotate 0.5s var(--ease-out); }
.case-pdf:hover .pdf-cover { rotate: 0deg; }
.pdf-copy { display: grid; gap: 18px; justify-items: start; }
.pdf-form { display: grid; gap: 8px; width: min(100%, 520px); }
.pdf-form label { font-weight: 600; font-size: 0.95rem; }
.pdf-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pdf-row input { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); color: #fff; font: 400 1rem/1 var(--sans); }
.pdf-row input::placeholder { color: #A9A2BD; }
.pdf-row input:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(255, 194, 51, 0.35); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 799px) { .pdf-grid { grid-template-columns: minmax(0, 1fr); } .pdf-cover { width: min(64vw, 240px); } }

@media (max-width: 899px) {
  .case-hero { padding-top: 112px; }
  .case-hero-grid, .part-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 799px) { .stats, .case-cards, .case-cards-3 { grid-template-columns: minmax(0, 1fr); } .stat, .readit { rotate: none; } }
/* phones: two posts, not three, so the hero stays short */
@media (max-width: 559px) { .stack .post:nth-child(1) { display: none; } .stack .post:nth-child(2) { margin-top: 0; } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 80; max-width: min(92vw, 520px); padding: 14px 20px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 0.95rem/1.35 var(--sans); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); transform: translateX(-50%); text-align: center; }
.toast[hidden] { display: none; }

/* ---------- Easter egg: a metal sheen on the mark ---------- */
.is-metal .brand-mark, svg.is-metal { animation: metal 1.2s var(--ease-out); }
@keyframes metal { 0% { filter: none; } 35% { filter: drop-shadow(0 0 0 #fff) brightness(2.2) saturate(0); } 100% { filter: none; } }

/* ---------- Page transitions (cross-document view transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.32s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in 0.5s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px) scale(0.99); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Motion off: everything is already in its final place ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track > [aria-hidden="true"] { display: none; }
  .gallop img { left: 50%; transform: translateX(-50%); }
}

/* ---------- Print ---------- */
@media print {
  .bar, .menu, .loader, .toast, .compare .cmp-handle, .slide, .deck-nav, .spin, video, canvas { display: none !important; }
  body, [data-ground] { background: #fff !important; color: #000 !important; }
  .act { margin: 0; border-radius: 0; }
  .cmp-panel { position: static; clip-path: none !important; }
  .compare { height: auto; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}