@import url('./fonts.css');

/* ------------------------------------------------------------------
   Tokens (handoff: 00 · Read me)
   ------------------------------------------------------------------ */
:root {
  /* chat text: user questions and assistant answers are one size and leading everywhere (bubble size, 1.5 leading) */
  --chat-text: 15px; --chat-leading: 1.5;
  --text: #121212;
  --black: #000000;
  --bg: #ffffff;
  --surface: #f4f4f4;
  --surface-2: #f8f8fa;
  --surface-3: #fbfbfb;
  --muted: #8a8a8a;
  --body: #666666;
  --ink-soft: #3a3a3a;
  --line: #d9d9d9;
  --line-soft: #ebebeb;
  --lime: #c4fe47;
  --lime-soft: #ddf89a;
  --lime-wash: #eef8d9;

  --acc-waysorted: #265bd1;
  --acc-adaapt: #4742dd;
  --acc-medwiki: #e75301;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Viewport units that stay true under the tablet zoom (see head.html). Use calc(N * var(--vh)) instead of Nvh. */
  --tz: 1;
  --vh: calc(1vh / var(--tz));
  --svh: calc(1svh / var(--tz));
  --dvh: calc(1dvh / var(--tz));
  --gutter: 80px;
  --content: 1120px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 767px) {
  :root { --gutter: 24px; }
}

*, *::before, *::after { box-sizing: border-box; }
@media (min-width: 768px) and (max-width: 1279.98px) { body { zoom: var(--tz); } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--black);
  font-family: var(--sans);
  font-size: 15px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip, not hidden: no scroll container, so position: sticky keeps working */
}
html { overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.serif { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; font-variant-ligatures: common-ligatures; font-feature-settings: "liga" 1; }

/* Show / hide per breakpoint */
@media (max-width: 767px) { .desk-only { display: none !important; } }
@media (min-width: 768px) { .mob-only { display: none !important; } }

/* ------------------------------------------------------------------
   Shared atoms
   ------------------------------------------------------------------ */

/* 30px icon circle with ↗ arrow */
.icon-circle {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--black);
  color: #fff;
}
.icon-circle svg { width: 30px; height: 30px; }
.icon-circle--light { background: #fff; color: var(--black); }

/* ------------------------------------------------------------------
   Buttons — Figma design system "Buttons" 1562:2502 + "Arrow buttons · hover" 1562:2591 (Spec 1562:2771).
   Two components, never merged:
   · ArrowButton  <a|button class="abtn abtn--ink|grey|hairline|lime"><span class="abtn__label">Label</span>
                  <!-- include partials/arrow-slot.html --></a>      label + arrow circle (every Figma button with a circle)
   · Button       <a|button class="button button--ink|grey|hairline|lime">Label</a>   label only
   Rest 42px tall, padding 5/5/5/20, gap 10, 15/19 Medium, 32px circle with the ↗ glyph turned 45° (→).
   Hover: arrow turns to 0° (↗), circle scales 0.9 and moves 4px in, label moves 3px right (transforms only,
   so the width never changes), pill steps to its hover colour. Pressed keeps hover + one shade darker + 0.98.
   Forced-state classes (.is-hover / .is-pressed / .is-focus / .is-disabled) are for the /dev/buttons matrix.
   ------------------------------------------------------------------ */
.abtn, .button {
  --bg: #121212; --fg: #fff; --bg-h: #222222; --bg-p: #000;
  --line: transparent; --line-h: transparent;
  --circle: #fff; --arrow: #000; --circle-h: #c8f560; --arrow-h: #000;
  --ease-b: cubic-bezier(0.2, 0, 0, 1);
  position: relative;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  background: var(--bg); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px; font-weight: 500; line-height: 19px;
  white-space: nowrap; outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms var(--ease-b), box-shadow 200ms var(--ease-b), color 200ms var(--ease-b), transform 120ms var(--ease-b);
}
.abtn { height: 42px; gap: 10px; padding: 5px 5px 5px 20px; }
.button { height: 41px; padding: 11px 20px; }
/* variants */
.abtn--grey, .button--grey { --bg: #f4f4f4; --fg: #000; --bg-h: #ebebeb; --bg-p: #e0e0e0; --circle: #121212; --arrow: #fff; }
.abtn--hairline, .button--hairline { --bg: transparent; --fg: #000; --bg-h: #fbfbfb; --bg-p: #ebebeb; --line: #d9d9d9; --line-h: #000; --circle: #121212; --arrow: #fff; }
.abtn--hairline { height: 44px; padding: 6px 6px 6px 21px; }   /* Figma counts the 1px stroke inside the layout */
.abtn--lime, .button--lime { --bg: #c8f560; --fg: #000; --bg-h: #bceb4a; --bg-p: #b5e43e; --circle: #121212; --arrow: #fff; --circle-h: #fff; --arrow-h: #000; }

/* Figma rounds hug-text widths up to whole px (0–1px wider than Chrome); +0.5px keeps every label within ±0.5px */
.abtn__label { display: block; padding-right: 0.5px; transition: transform 300ms var(--ease-b); }
.abtn__slot { flex: none; width: 32px; height: 32px; }   /* fixed slot: the width never changes */
.abtn__circle {
  display: block; width: 32px; height: 32px; border-radius: 999px;
  background: var(--circle); color: var(--arrow);
  transition: transform 300ms var(--ease-b), background-color 300ms var(--ease-b), color 300ms var(--ease-b);
}
.abtn__circle svg { display: block; width: 32px; height: 32px; }
.abtn__arrow { transform-origin: 16px 16px; transform: rotate(45deg); transition: transform 300ms var(--ease-b); }

/* hover (pointer devices) + forced */
@media (hover: hover) {
  .abtn:hover, .button:hover { background-color: var(--bg-h); box-shadow: inset 0 0 0 1px var(--line-h); }
  .abtn:hover .abtn__label { transform: translateX(3px); }
  .abtn:hover .abtn__circle { transform: translateX(-4px) scale(0.9); background-color: var(--circle-h); color: var(--arrow-h); }
  .abtn:hover .abtn__arrow { transform: rotate(0deg); }
}
.abtn.is-hover, .button.is-hover { background-color: var(--bg-h); box-shadow: inset 0 0 0 1px var(--line-h); }
.abtn.is-hover .abtn__label { transform: translateX(3px); }
.abtn.is-hover .abtn__circle { transform: translateX(-4px) scale(0.9); background-color: var(--circle-h); color: var(--arrow-h); }
.abtn.is-hover .abtn__arrow { transform: rotate(0deg); }

/* pressed: keeps the hover arrow + lime circle, one shade darker, 0.98 (touch gets only this) */
.abtn:active, .button:active, .abtn.is-pressed, .button.is-pressed { background-color: var(--bg-p); box-shadow: inset 0 0 0 1px var(--line-h); }
.abtn:active, .button:active { transform: scale(0.98); }   /* live press only: the forced matrix cell stays 1:1 with Figma */
.abtn:active .abtn__label, .abtn.is-pressed .abtn__label { transform: translateX(3px); }
.abtn:active .abtn__circle, .abtn.is-pressed .abtn__circle { transform: translateX(-4px) scale(0.9); background-color: var(--circle-h); color: var(--arrow-h); }
.abtn:active .abtn__arrow, .abtn.is-pressed .abtn__arrow { transform: rotate(0deg); }

/* focus: rest look + double ring */
.abtn:focus-visible, .button:focus-visible, .abtn.is-focus, .button.is-focus {
  box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.9);
}
/* disabled: greyed, arrow stays → */
.abtn:disabled, .abtn[aria-disabled="true"], .abtn.is-disabled,
.button:disabled, .button[aria-disabled="true"], .button.is-disabled {
  --bg: #ebebeb; --bg-h: #ebebeb; --bg-p: #ebebeb; --fg: #adadad;
  --circle: #f4f4f4; --arrow: #adadad; --circle-h: #f4f4f4; --arrow-h: #adadad;
  pointer-events: none; cursor: default;
}
.button--grey:disabled, .button--grey[aria-disabled="true"], .button--grey.is-disabled { --bg: #f4f4f4; --bg-h: #f4f4f4; --bg-p: #f4f4f4; }
.abtn--hairline:disabled, .abtn--hairline[aria-disabled="true"], .abtn--hairline.is-disabled,
.button--hairline:disabled, .button--hairline[aria-disabled="true"], .button--hairline.is-disabled { --bg: transparent; --bg-h: transparent; --bg-p: transparent; --line: #ebebeb; --line-h: #ebebeb; }
.is-disabled .abtn__arrow, [aria-disabled="true"] .abtn__arrow, :disabled .abtn__arrow { transform: rotate(45deg) !important; }
.is-disabled .abtn__circle, [aria-disabled="true"] .abtn__circle, :disabled .abtn__circle { transform: none !important; }
.is-disabled .abtn__label, [aria-disabled="true"] .abtn__label, :disabled .abtn__label { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  /* no rotation, scale or shift: only colours change, 150ms */
  .abtn, .button { transition: background-color 150ms linear, box-shadow 150ms linear, color 150ms linear !important; transform: none !important; }
  .abtn .abtn__label, .abtn .abtn__circle, .abtn .abtn__arrow { transform: none !important; }
  .abtn .abtn__arrow { transform: rotate(45deg) !important; }
  .abtn .abtn__circle { transition: background-color 150ms linear, color 150ms linear !important; }
}

/* Grey prompt chip */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--w, 0);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--black);
  font-size: 15px; line-height: 18px;
  white-space: nowrap;
  transition: background-color 160ms;
}
.chip:hover { background: #ededf0; }
.chip--grey { background: var(--surface); color: var(--text); }

/* Glass chip ("Code view", "Play") */
.chip-glass {
  display: inline-flex; align-items: center;
  height: 42px;
  padding: 11px 18px 11px 19px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px var(--surface-3);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  font-size: 15px; line-height: 18px; color: var(--black);
}

/* "Type your own…" ask bar */
.ask {
  position: relative;
  display: flex; align-items: center;
  width: 329px; height: 42px;
  padding: 0 10px 0 28px;
  border-radius: 14px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 0.5px var(--line), 0 8px 8px 1px rgba(0, 0, 0, 0.07);
}
.ask__grip {
  position: absolute; left: 10px; top: 16px;
  width: 6px; height: 10px;
  background:
    radial-gradient(circle at 1px 1px, #d9d9d9 1px, transparent 1.1px) 0 0 / 4px 4px;
}
.ask__input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--chat-text); line-height: 18px; color: var(--text);
  padding: 0;
}
.ask__input::placeholder { color: var(--ink-soft); opacity: 1; }
.ask__send { flex: none; border-radius: 999px; outline: none; }
.ask__send .icon-circle { background: #000; }

/* Chatbox send circles (hero ask, footer "Ask Claude about me" pills): the ArrowButton circle hover. The circle
   scales to 0.9 and turns #C8F560 with a black arrow; the ↗ (already up-right at rest) nudges 1.5px further. Pressed
   0.85. Transforms + colours only; reduced motion keeps the colour change. */
.ask__send .icon-circle, .footer-ask .icon-circle, .m-footer__bar .icon-circle {
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), background-color 300ms cubic-bezier(0.2, 0, 0, 1), color 300ms cubic-bezier(0.2, 0, 0, 1);
}
.ask__send .icon-circle svg, .footer-ask .icon-circle svg, .m-footer__bar .icon-circle svg { transition: transform 300ms cubic-bezier(0.2, 0, 0, 1); }
@media (hover: hover) {
  .ask__send:hover .icon-circle, .footer-ask:hover .icon-circle, .m-footer__bar:hover .icon-circle { transform: scale(0.9); background-color: #c8f560; color: #000; }
  .ask__send:hover .icon-circle svg, .footer-ask:hover .icon-circle svg, .m-footer__bar:hover .icon-circle svg { transform: translate(1.5px, -1.5px); }
}
.ask__send:active .icon-circle, .footer-ask:active .icon-circle, .m-footer__bar:active .icon-circle { transform: scale(0.85); background-color: #c8f560; color: #000; }
.ask__send:focus-visible .icon-circle { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.9); }
@media (prefers-reduced-motion: reduce) {
  .ask__send .icon-circle, .footer-ask .icon-circle, .m-footer__bar .icon-circle,
  .ask__send .icon-circle svg, .footer-ask .icon-circle svg, .m-footer__bar .icon-circle svg { transform: none !important; transition-property: background-color, color; transition-duration: 150ms; }
}

/* ------------------------------------------------------------------
   Pixel pattern backdrop + white glow (hero, footer)
   ------------------------------------------------------------------ */
.pattern {
  position: absolute; pointer-events: none; max-width: none;
  background-repeat: no-repeat; background-size: 100% 100%;
}
.glow {
  position: absolute; pointer-events: none;
  border-radius: 50%;
  background: #fff;
  filter: blur(50px); /* Figma layer blur 100 */
}

/* ------------------------------------------------------------------
   Header (desktop)
   ------------------------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 0;
}
.nav-pill {
  position: absolute; top: 36px; left: 50%;
  width: 315px; height: 42px;
  margin-left: -157.5px;
  border-radius: 14px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 0.5px var(--line-soft);
  overflow: hidden;
  transition: left 500ms var(--ease), margin 500ms var(--ease), width 500ms var(--ease);
}
.nav-pill__logo { position: absolute; left: 13px; top: 6.68px; width: 29px; height: 27.68px; }
.nav-pill__links { position: absolute; left: 1px; top: 13px; }
.nav-pill__links a { position: absolute; top: 0; white-space: nowrap;
  font-size: 14px; line-height: 17px;
  color: rgba(0, 0, 0, 0.6);
  transition: color 160ms;
}
.nav-pill__links a:nth-child(1) { left: 69px; }
.nav-pill__links a:nth-child(2) { left: 129px; }
.nav-pill__links a:nth-child(3) { left: 194px; }
.nav-pill__links a:nth-child(4) { left: 253px; }
.nav-pill__links a:hover, .nav-pill__links a[aria-current] { color: #000; }
.nav-pill__fade {
  position: absolute; top: 0; right: 0; width: 167px; height: 42px;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(251, 251, 251, 0) 23.7%, var(--surface-3) 95.8%);
  transition: opacity 400ms var(--ease);
}
/* Collapsed (home, after the hero) */
.site-header.is-compact .nav-pill { left: 48px; margin-left: 0; width: 199px; }
.site-header.is-compact .nav-pill__fade { opacity: 1; }
.nav-pill__links { transition: transform 500ms var(--ease); }
.site-header.is-compact .nav-pill__links { transform: translate(-6px, -1px); }
.site-header.is-compact .nav-pill:hover .nav-pill__links { transform: none; }
.site-header.is-compact .nav-pill:hover { width: 315px; }
/* over the piece viewer the header takes its compact, left-aligned scroll state (and stays usable: viewer.js) */
.pv-open .site-header .nav-pill { left: 48px; margin-left: 0; width: 199px; }
.pv-open .site-header .nav-pill__fade { opacity: 1; }
.pv-open .site-header .nav-pill__links { transform: translate(-6px, -1px); }
.pv-open .site-header .nav-pill:hover { width: 315px; }
.pv-open .site-header .nav-pill:hover .nav-pill__links { transform: none; }
.pv-open .site-header .nav-pill:hover .nav-pill__fade { opacity: 0; }
.site-header.is-compact .nav-pill:hover .nav-pill__fade { opacity: 0; }

.site-header .btn--resume { position: absolute; top: 36px; right: 46px; }

/* ------------------------------------------------------------------
   Header (mobile) + quick-jump menu
   ------------------------------------------------------------------ */
.m-header {
  position: fixed; top: 17px; left: 16px; right: 16px; z-index: 60;
  display: flex; justify-content: space-between; align-items: flex-start;
  height: 48px; pointer-events: none;
  transition: top 260ms var(--ease);
}
.m-header.is-open { top: 20px; }
.m-header > * { pointer-events: auto; }
.brand-pill {
  position: relative;
  width: 100px; height: 48px;
  border-radius: 24px;
}
.brand-pill__art { position: absolute; inset: 0; width: 100px; height: 48px; }
.brand-pill__home { position: absolute; left: 0; top: 0; width: 50px; height: 48px; border-radius: 24px 0 0 24px; }
.brand-pill__menu { position: absolute; right: 0; top: 0; width: 50px; height: 48px; border-radius: 0 24px 24px 0; }
.brand-pill__art--open { opacity: 0; }
.m-header.is-open .brand-pill__art--open { opacity: 1; }
.m-header.is-open .brand-pill__art--closed { opacity: 0; }
.m-header .btn--resume { margin-top: 3px; }

.m-menu {
  position: fixed; inset: 0; z-index: 55;
  visibility: hidden; pointer-events: none;
}
.m-menu.is-open { visibility: visible; pointer-events: auto; }
.m-menu__scrim {
  position: absolute; inset: 0;
  background: rgba(244, 244, 244, 0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 240ms var(--ease);
}
.m-menu.is-open .m-menu__scrim { opacity: 1; }
.m-menu__panel {
  position: absolute; left: 16px; right: 16px; top: 80px;
  display: flex; flex-direction: column; gap: 12px;
  height: 419px;
  padding: 17px 17px 21px; /* Figma includes the 1px stroke in the auto-layout padding */
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e6e6e6;
  opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top left;
  transition: opacity 220ms var(--ease), transform 260ms var(--ease);
}
.m-menu.is-open .m-menu__panel { opacity: 1; transform: none; }
.m-menu__input {
  display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 8px 8px 8px 15px;
  border-radius: 14px;
  background: #f7f7f8; box-shadow: inset 0 0 0 1px #e0e0e0;
}
.m-menu__input input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0;
  font: inherit; font-size: 15px; line-height: 18px; color: var(--text);
}
.m-menu__input input::placeholder { color: rgba(18, 18, 18, 0.55); opacity: 1; }
.m-menu__go {
  width: 32px; height: 32px; border-radius: 999px; background: var(--text); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 500;
}
.m-menu__label {
  margin-top: 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; line-height: 13px;
  color: rgba(18, 18, 18, 0.4);
}
.m-menu__rows { display: flex; flex-direction: column; gap: 12px; }
.m-menu__row {
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 8px 12px 8px 8px;
  border-radius: 14px;
  transition: background-color 160ms;
}
.m-menu__row[aria-current], .m-menu__row:hover { background: var(--lime-wash); }
.m-menu__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--lime-soft); flex: none; }
.m-menu__title { display: block; font-size: 16px; font-weight: 500; line-height: 20px; color: var(--text); }
.m-menu__sub { display: block; margin-top: 2px; font-size: 12px; line-height: 15px; color: rgba(18, 18, 18, 0.5); }
.m-menu__foot a:nth-child(1) { min-width: 34px; } .m-menu__foot a:nth-child(2) { min-width: 52px; } .m-menu__foot a:nth-child(3) { min-width: 9px; }
.m-menu__foot { display: flex; gap: 18px; padding-top: 6px; font-size: 13px; line-height: 16px; color: rgba(18, 18, 18, 0.5); }

/* ------------------------------------------------------------------
   Footer: desktop 1245:32928 (1250×527 card at x15 in the 1280 frame), mobile 1473:7730 (390×659).
   The card is full-bleed: inset 15px at 1280 (fluid 8–16), never boxed into a content column.
   At 1280 everything sits exactly where Figma has it; around that the card reflows:
   ≥1024 two columns (heading left, glass panel right), 768–1023 one stacked column, <768 the mobile card.
   The footer opts out of the tablet zoom (head.html) so its text stays at true size (15px).
   ------------------------------------------------------------------ */
/* Space above the footer = Home's: clamp(80px, 13.6vw, 174px) from the page's last content (174 at 1280), 16px below
   the card; mobile 80 / 0. Every page ends <main> at its last content so this margin is the whole gap. */
.site-footer { --fi: clamp(8px, 1.172vw, 16px); position: relative; padding: 0 var(--fi) 16px; margin-top: clamp(80px, 13.6vw, 174px); }
@media (min-width: 768px) and (max-width: 1279.98px) { .site-footer { zoom: calc(1 / var(--tz)); } }
.footer-card {
  position: relative;
  border-radius: clamp(24px, 2.82vw, 36px);
  background: var(--surface-3);
  overflow: hidden;
  isolation: isolate;
}
.footer-card.desk-only {
  --fh: clamp(440px, 41.172vw, 527px);            /* 527 at 1280 */
  display: flex; justify-content: flex-end;
  height: var(--fh);
  padding: 22px 14px;
}
/* pixel art (1245:32929, exported clipped to the card: x10–1250, full height): two halves, each drawn at the card's height */
.footer-art { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; pointer-events: none; z-index: -2; }
.footer-art--l { left: 0; }
.footer-art--r { right: 0; }
.footer-art .pattern {
  top: 0; height: 100%; width: auto; aspect-ratio: 1240 / 527;
}
.footer-art--l .pattern { left: calc(var(--fh, 527px) * 10 / 527); }  /* art starts 10px in at 1280 */
.footer-art--r .pattern { right: 0; }
/* glow 1169 round at y−321, centred; scales with the card height so it never washes the art out on smaller cards */
.footer-card.desk-only .glow { --g: calc(var(--fh) * 1169 / 527); left: 50%; top: calc(var(--fh) * -321 / 527); width: var(--g); height: var(--g); margin-left: calc(var(--g) / -2); z-index: -1; }
.footer-card__title {
  position: absolute; left: clamp(24px, 7.8125vw, 100px); top: clamp(32px, 7.578vw, 97px);
  font-size: 48px; line-height: 0.96; color: #000;
}
.footer-quote {
  position: absolute; left: clamp(24px, 7.8125vw, 100px); top: 277px;
  display: flex; gap: 22px;
}
.footer-quote__avatar { width: 61px; height: 61px; border-radius: 12px; background: #ccc; flex: none; }
.footer-quote__text { width: 292px; height: 60px; font-size: 12px; line-height: 15px; color: #000; }
.footer-quote__name { margin-top: 22px; font-size: 14px; line-height: 17px; font-style: italic; color: #555; }
.footer-card__copy { position: absolute; left: clamp(24px, 4.375vw, 56px); bottom: 26px; font-size: 15px; line-height: 18px; color: var(--body); }

/* glass panel: right column, 637 wide at 1280 (480 at 1024), 22px from top/bottom, 14px from the right */
.footer-panel {
  position: relative;
  width: clamp(480px, 49.77vw, 637px); height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  padding: 1px 35px 0 0;                     /* ask block centred (y161 of 483); its column ends with the email */
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.footer-panel__ask { width: 423px; }
.footer-ask {
  position: relative;
  display: flex; align-items: center;
  width: 359px; height: 49px;
  padding: 0 10px 0 54px;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 0.5px var(--line);
  font-size: 15px; color: var(--ink-soft);
}
.footer-ask__logo { position: absolute; left: 6px; top: 12px; width: 39.01px; height: 24.54px; }
.footer-prompts { margin-top: 24px; }
.footer-prompts__row { display: flex; gap: 8px; margin-left: 13px; }
.footer-prompts__row + .footer-prompts__row { gap: 6px; margin: 9px 0 0 4px; }
.footer-links {
  position: absolute; right: 35px; bottom: 4px;
  display: flex; gap: 32px;
  font-size: 15px; line-height: 18px; color: var(--body);
}
.footer-links a:hover { color: #000; }
/* Figma text boxes (59/11/61/196) keep the row from drifting */
.footer-links a:nth-child(1) { min-width: 59px; }
.footer-links a:nth-child(2) { min-width: 11px; }
.footer-links a:nth-child(3) { min-width: 61px; }

/* 768–1023: one column (heading, ask block up to 560, links, then the copyright) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .footer-card.desk-only { --fh: 520px; display: flex; flex-direction: column; justify-content: flex-start; height: auto; min-height: var(--fh); padding: 40px; gap: 32px; }
  .footer-card__title, .footer-card__copy { position: static; }
  /* the card is less wide here: an elliptical glow keeps the content clean and leaves the art in the corners (like 1473:7730) */
  .footer-card.desk-only .glow { left: -10%; top: -14%; width: 88%; height: 118%; margin-left: 0; }
  .footer-card__copy { order: 3; font-size: 15px; }
  .footer-panel { width: 100%; height: auto; align-items: stretch; padding: 0; gap: 32px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .footer-panel__ask { width: 100%; max-width: 560px; }
  .footer-ask { width: 100%; }
  .footer-prompts__row, .footer-prompts__row + .footer-prompts__row { flex-wrap: wrap; gap: 8px; margin: 0; }
  .footer-prompts { display: flex; flex-direction: column; gap: 8px; }
  .footer-prompts .chip { width: auto; }
  .footer-links { position: static; flex-wrap: wrap; gap: 12px 32px; }
}
@media (max-width: 767px) {
  .site-footer { padding: 0; margin-top: 80px; }
  .footer-card { height: 659px; border-radius: 24px; }
  .footer-card .pattern { left: -512px; top: 0; width: 1414px; height: 659px; }
  .footer-card .glow { left: -117px; top: 32.95px; width: 624px; height: 593.1px; }
}
.m-footer__content {
  position: absolute; left: 12px; right: 12px; top: 12px; height: 629px;
  display: flex; flex-direction: column; gap: 40px;
  padding: 28px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
}
.m-footer__title { font-size: 32px; line-height: 36px; color: #000; }
.m-footer__quote { display: flex; gap: 14px; }
.m-footer__quote .footer-quote__avatar { width: 48px; height: 48px; }
.m-footer__quote p { font-size: 13px; line-height: 19px; color: #000; }
.m-footer__quote .footer-quote__name { margin-top: 12px; }
.m-footer__ask { display: flex; flex-direction: column; gap: 12px; }
.m-footer__bar {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 8px 8px 8px 14px;
  border-radius: 999px; background: var(--surface-3);
  font-size: 15px; line-height: 22px; color: var(--ink-soft);
}
.m-footer__bar img { width: 39.01px; height: 24.54px; }
.m-footer__bar > span:not(.icon-circle) { flex: 1; white-space: nowrap; }
.m-footer__prompts { display: flex; flex-wrap: wrap; gap: 8px; }
.m-footer__prompts .chip { padding: 11px 16px 9px; min-width: 0; font-size: 14px; line-height: 17px; }
.m-footer__divider { flex: none; height: 1px; background: rgba(0, 0, 0, 0.08); }
.m-footer__links { display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 22px; color: var(--body); }
.m-footer__socials { display: flex; gap: 24px; }
.m-footer__copy { font-size: 13px; line-height: 19px; color: #999; }
/* Mobile footer variants found in the file: Home/Taste (gap 40), About/Play (gap 32), case studies (gap 32, 40px heading, 13/140% quote, 18px links) */
.footer--tight .m-footer__content, .footer--case .m-footer__content { gap: 32px; height: 597px; }
.footer--case .m-footer__content { height: 590px; }
.footer--case .m-footer__title { font-size: 40px; line-height: 40px; }
.footer--case .m-footer__quote p { line-height: 1.4; }
.footer--case .m-footer__bar { line-height: 18px; }
.footer--case .m-footer__links { line-height: 18px; }

/* ------------------------------------------------------------------
   Motion utilities (html.motion is set in head.html unless reduced motion is on,
   so without it everything simply shows its end state)
   ------------------------------------------------------------------ */
/* Page transition: fade + 8px rise in, quick fade out on internal navigation. Header stays put. */
.motion main, .motion .site-footer { animation: page-in 200ms var(--ease) backwards; }
.motion.is-leaving main, .motion.is-leaving .site-footer { opacity: 0; transform: translateY(8px); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
/* starts at 0.01, not 0: Chrome never counts content first painted at opacity 0 as LCP (looks identical) */
@keyframes page-in { from { opacity: 0.01; transform: translateY(8px); } }

/* Scroll reveal: [data-reveal] fades + rises 16px when it enters the viewport.
   [data-reveal-stagger="80"] on a parent staggers its [data-reveal] children by that many ms. */
.motion [data-reveal] { transition: opacity 480ms var(--ease) var(--reveal-delay, 0ms), transform 560ms var(--ease) var(--reveal-delay, 0ms); }
.motion [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ScrollHold CTA label (scroll-hold.js; Home 06 and About "My Taste"): the letters rise 20ms apart, clipped by
   their line, once an ancestor gets .is-in */
.hold-letters { display: flex; overflow: hidden; }
.hold-letters .l { display: inline-block; white-space: pre; transform: translateY(105%); transition: transform 420ms var(--ease); }
.is-in .hold-letters .l { transform: none; }

/* ------------------------------------------------------------------
   Conversation messages: the Home hero's (home.js) and the footer chat's (chat.js), one design
   ------------------------------------------------------------------ */
.convo__thinking {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; line-height: 23px; color: rgba(18, 18, 18, 0.5);
}
.convo__thinking[hidden], .convo__response[hidden] { display: none; }
.px-loader { display: flex; gap: 4px; }
.px-loader i { width: 6px; height: 6px; background: #9bd62f; animation: px 900ms steps(1) infinite; }
.px-loader i:nth-child(2) { opacity: 0.6; animation-delay: 150ms; }
.px-loader i:nth-child(3) { opacity: 0.3; animation-delay: 300ms; }
@keyframes px { 0%, 100% { opacity: 1; } 33% { opacity: 0.6; } 66% { opacity: 0.3; } }
.convo__response { display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity 300ms var(--ease); }
.convo__response p { font-size: var(--chat-text); line-height: var(--chat-leading); color: rgba(18, 18, 18, 0.75); }
.convo__response.is-fading { opacity: 0.3; }
.convo__links { display: flex; gap: 16px; font-size: var(--chat-text); line-height: var(--chat-leading); }
.convo__links a { font-weight: 500; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.convo__links button { color: rgba(18, 18, 18, 0.45); }
.convo__links a[hidden] { display: none; }
/* B · answer streams in word by word; links + follow-up chips (C) arrive once it has finished */
.convo__response .w { animation: w-in 260ms var(--ease) both; }
@keyframes w-in { from { opacity: 0; } }
.convo__links { transition: opacity 260ms var(--ease); }
.convo__links:not(.is-in) { opacity: 0; pointer-events: none; }
.convo__followups { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; animation: convo-in 360ms var(--ease) both; }
.convo-in { animation: convo-in 420ms var(--ease) both; }
@keyframes convo-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 767px) {
  .convo__thinking { font-size: 15px; line-height: 22px; }
  .convo__followups .chip { font-size: 14px; line-height: 17px; padding: 12px 18px 10px; }
  .convo__links a { text-decoration: none; }
}

/* Footer chat (chat.js): the ask bar is a real input; the thread opens between it and the links row and the card
   grows in place (the ask bar keeps its position); chips hide while a thread is open. */
.footer-ask__input, .m-footer__bar input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent; padding: 0;
  font: inherit; color: var(--text);
}
.footer-ask__input::placeholder, .m-footer__bar input::placeholder { color: var(--ink-soft); opacity: 1; }
.m-footer__bar input { height: 22px; line-height: 22px; }   /* the old label's line box: text sits on the same pixel row */
.footer-ask .ask__send, .m-footer__bar .ask__send { display: grid; }
.footer-card.is-busy .ask__send .icon-circle, .footer-card.is-busy .ask__send:hover .icon-circle { background: #e0e0e0; color: #fff; transform: none; }
.footer-card.is-busy .ask__send .icon-circle svg { transform: none; }
.footer-card.is-busy .ask__send { cursor: default; }
.footer-prompts[hidden], .m-footer__prompts[hidden], .chat[hidden] { display: none; }
.chat { margin-top: 20px; }
.chat__thread {
  display: flex; flex-direction: column; gap: 16px;
  max-height: 360px; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 4px 2px 2px; scrollbar-width: thin;
}
.chat__thread.is-scrolled { -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px); }   /* read-back edge under the ask bar */
.chat__msg--user { display: flex; justify-content: flex-end; }
.chat__msg--user .chip { font-size: var(--chat-text); line-height: var(--chat-leading); max-width: 85%; white-space: normal; text-align: left; justify-content: flex-start; }
.chat__msg--user .chip:hover { background: var(--surface); }
.chat .convo__response { align-items: flex-start; gap: 8px; text-align: left; }
.chat .convo__thinking { display: flex; }
.chat__reset { margin-top: 12px; font-size: 14px; line-height: 21px; color: rgba(18, 18, 18, 0.45); text-decoration: underline; text-underline-offset: 2px; }
.chat__reset:hover { color: var(--text); }
.footer-card.desk-only.has-chat { height: auto; min-height: var(--fh); }
@media (min-width: 1024px) {
  .footer-card.has-chat .footer-panel { height: auto; justify-content: flex-start; padding-top: var(--chat-top, 161px); padding-bottom: 64px; }
}
@media (max-width: 767px) {
  .footer-card.mob-only.has-chat { height: auto; }
  .footer-card.mob-only.has-chat .m-footer__content { position: relative; left: auto; right: auto; top: auto; margin: 12px; height: auto; }
  .m-footer__ask .chat { margin-top: 0; }
  .chat__thread { max-height: 50svh; }
}

/* Focus: the design-system ring on keyboard focus only (no browser blue ring). Text inputs count as focus-visible
   on a click too, so the ask bars use .kbd-nav (set on Tab by chat.js). */
.chip:focus-visible, .chat__reset:focus-visible, .chat .convo__links a:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.9); }
.chat__reset:focus-visible, .chat .convo__links a:focus-visible { border-radius: 4px; }
.footer-ask input:focus, .m-footer__bar input:focus, .ask__send:focus { outline: none; }
.kbd-nav .footer-ask:has(input:focus) { box-shadow: inset 0 0 0 0.5px var(--line), 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.9); }
.kbd-nav .m-footer__bar:has(input:focus) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.9); }

/* ------------------------------------------------------------------
   PixelField (pixel-field.js): the living pattern canvas fills its host; the static Figma art underneath stays
   until the first frame is drawn, then fades out (after the canvas is in, so the two never show half and half)
   ------------------------------------------------------------------ */
.pf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease); }
.pf-live > .pf-canvas { opacity: 1; }
.pf-hidden { opacity: 0 !important; transition: opacity 400ms var(--ease) 400ms !important; }
.footer-field { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

/* ------------------------------------------------------------------
   Video covers (site.js): the poster is a normal <img> (alt, layout, the fallback); the silent loop sits on top and
   only gets its file when the cover nears the screen, then fades in once it is actually playing
   ------------------------------------------------------------------ */
.vcover { position: relative; overflow: hidden; }
.vcover picture, .vcover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vcover__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms var(--ease), transform 600ms var(--ease); pointer-events: none; }
.vcover.is-playing .vcover__video { opacity: 1; }
.cover:hover .vcover__video { transform: scale(1.02); }
/* square videos in wide covers (Medwiki): the whole video, centred, over a blurred still of it that fills the card */
.vcover--fit { background: #f3f3f3; }
.vcover.vcover--fit img.vcover__blur { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; object-fit: cover; filter: blur(22px) saturate(1.1); opacity: 0.85; }
.vcover.vcover--fit picture { position: relative; z-index: 1; height: 100%; }
.vcover.vcover--fit img.vcover__poster { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; }
.vcover.vcover--fit .vcover__video { object-fit: contain; z-index: 2; }