/* ==========================================================================
   Austin Milne — portfolio design system
   Shared by the homepage and the case studies. Plain CSS, no build step.
   Sections: tokens · base · type · layout · nav · buttons · motion · chat · footer
   ========================================================================== */

/* ---------- Font fallbacks ----------
   Local fonts scaled to the web fonts' widths, so text doesn't reflow (layout shift) when the web fonts arrive. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 82.6%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 102.9%; }

/* ---------- Tokens ---------- */
:root {
  --paper: #F5F0E7;
  --paper-2: #EDE5D7;
  --paper-3: #E4DACA;
  --card: #FFFDF9;
  --ink: #1D1915;
  --ink-2: #4A433B;
  --muted: #6F665B;
  --faint: #A89C8B;
  --line: rgba(29, 25, 21, 0.12);
  --line-strong: rgba(29, 25, 21, 0.24);
  --accent: #C1652F;
  --accent-ink: #A24E1E;
  --accent-soft: rgba(193, 101, 47, 0.12);
  --night: #16130F;
  --night-2: #211C17;
  --night-line: rgba(242, 235, 223, 0.14);
  --on-night: #F2EBDF;
  --on-night-muted: #A99E90;
  --header: rgba(245, 240, 231, 0.82);
  --shadow: 0 1px 2px rgba(29, 25, 21, 0.06), 0 12px 32px -12px rgba(29, 25, 21, 0.18);
  --shadow-lg: 0 2px 6px rgba(29, 25, 21, 0.06), 0 40px 80px -32px rgba(29, 25, 21, 0.32);
  --img-dim: 1;

  --f-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --f-body: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-mega: clamp(3.1rem, 8.4vw, 8.75rem);
  --fs-h1: clamp(2.6rem, 5.6vw, 5.4rem);
  --fs-h2: clamp(2.05rem, 3.8vw, 3.6rem);
  --fs-h3: clamp(1.4rem, 2vw, 1.85rem);
  --fs-h4: 1.2rem;
  --fs-lead: clamp(1.15rem, 1.45vw, 1.38rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-mono: 0.72rem;

  --gutter: clamp(16px, 4.2vw, 64px);
  --max: 1360px;
  --measure: 66ch;
  /* Radius scale. Use the semantic names (--radius for cards, --radius-lg for big panels)
     unless a component needs a specific step. */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-16: 16px;
  --radius-pill: 999px;
  --radius: var(--radius-6);
  --radius-lg: var(--radius-10);
  /* Spacing scale (4px base). Margins, padding, and gaps use these steps rather than one-off values.
     Fluid steps grow with the viewport, for space between blocks; section steps are for a section's top and bottom. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;
  --space-fluid-xs: clamp(8px, 1.4vw, 16px);
  --space-fluid-sm: clamp(12px, 2vw, 24px);
  --space-fluid-md: clamp(16px, 2.4vw, 32px);
  --space-fluid-lg: clamp(24px, 3vw, 40px);
  --space-fluid-xl: clamp(32px, 4vw, 48px);
  --space-fluid-2xl: clamp(40px, 5vw, 64px);
  --space-section-sm: clamp(56px, 7vw, 96px);
  --space-section-md: clamp(64px, 9vw, 128px);
  --space-section-lg: clamp(80px, 11vw, 160px);
  --space-section-xl: clamp(96px, 13vw, 192px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-h: 68px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --paper: #12100D;
  --paper-2: #1A1713;
  --paper-3: #24201B;
  --card: #1C1915;
  --ink: #EFE8DC;
  --ink-2: #C3B9AB;
  --muted: #998F82;
  --faint: #6B6257;
  --line: rgba(239, 232, 220, 0.11);
  --line-strong: rgba(239, 232, 220, 0.22);
  --accent: #E07F48;
  --accent-ink: #EE9762;
  --accent-soft: rgba(224, 127, 72, 0.14);
  --night: #0B0A08;
  --night-2: #16130F;
  --night-line: rgba(242, 235, 223, 0.12);
  --header: rgba(18, 16, 13, 0.8);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 40px 80px -32px rgba(0, 0, 0, 0.8);
  --img-dim: 0.9;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-4); }
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--radius-pill);
  transform: translateY(-160%); transition: transform 0.2s var(--ease); text-decoration: none; font-weight: 600;
}
.skip-link:focus { transform: none; }
.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; }

/* Map-pin cursor on clickable things: a small piece of the travel motif, carried over from the old site. */
a[href], button:not(:disabled), [role="button"], summary, label[for] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='27' viewBox='0 0 20 27'%3E%3Cpath d='M10 0C4.5 0 0 4.5 0 10c0 6.67 10 16.67 10 16.67s10-10 10-16.67C20 4.5 15.5 0 10 0z' fill='%23C1652F'/%3E%3Ccircle cx='10' cy='10' r='4.17' fill='white'/%3E%3C/svg%3E") 10 25, pointer;
}

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.display, .h1, .h2, .h3 {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: -0.022em;
  line-height: 1.02;
}
.display { font-size: var(--fs-mega); font-weight: 340; letter-spacing: -0.035em; line-height: 0.94; }
.h1 { font-size: var(--fs-h1); font-weight: 360; letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); font-weight: 380; line-height: 1.04; }
.h3 { font-size: var(--fs-h3); font-weight: 420; line-height: 1.15; letter-spacing: -0.012em; }
.h4 { font-family: var(--f-body); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
em, .ital { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.display em, .h1 em, .h2 em, .h3 em { color: var(--accent-ink); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 42ch; }
.body-copy { color: var(--ink-2); max-width: var(--measure); }
.body-copy p + p { margin-top: 1em; }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.mono, .eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4;
}
.eyebrow { color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.eyebrow .accent, .accent-ink { color: var(--accent-ink); }
.num {
  font-family: var(--f-display);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 330;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.section { padding-block: clamp(88px, 12vw, 180px); position: relative; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.stack > * + * { margin-top: var(--stack, 1rem); }
.night { background: var(--night); color: var(--on-night); --ink: var(--on-night); --ink-2: #D5CBBD; --muted: var(--on-night-muted); --line: var(--night-line); --line-strong: rgba(242,235,223,0.26); --accent-ink: #EC9563; --card: var(--night-2); }
html[data-theme="dark"] .night { --card: #191612; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--nav-h);
  display: flex; align-items: center;
  transition: transform 0.45s var(--ease), background-color 0.3s ease, box-shadow 0.3s ease;
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--header); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line); opacity: 0; transition: opacity 0.3s ease;
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-hidden { transform: translateY(-100%); }
/* Three columns, so the links sit at the true centre however wide the name and the buttons are. */
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: 100%; }
.nav-inner > .brand { grid-column: 1; justify-self: start; }
.nav-inner > nav { grid-column: 2; }
.nav-inner > .nav-actions { grid-column: 3; justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-family: var(--f-display); font-style: italic; font-size: 15px; font-weight: 500;
  transition: transform 0.5s var(--ease), background-color 0.3s;
}
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.05); background: var(--accent); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: 0.94rem; color: var(--ink-2); position: relative; padding-block: 6px; transition: color 0.2s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent;
  display: inline-grid; place-items: center; transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.3s var(--ease);
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn:active { transform: scale(0.94); }
.theme-btn .sun, html[data-theme="dark"] .theme-btn .moon { display: none; }
html[data-theme="dark"] .theme-btn .sun { display: block; }
.menu-btn { display: none; }
.nav-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--read, 0)); }

@media (max-width: 860px) {
  .nav-links, .nav-actions .btn-ask-label { display: none; }
  .menu-btn { display: inline-grid; }
}

/* Mobile menu sheet */
.sheet {
  position: fixed; inset: 0; z-index: 120; background: var(--paper);
  display: flex; flex-direction: column; padding: 20px var(--gutter) 32px; overflow-y: auto; overscroll-behavior: contain;
  /* Its own compositing layer: without it, animated parts of the page could paint over the sheet while it wipes in. */
  will-change: clip-path, transform; transform: translateZ(0);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.6s var(--ease-in-out), visibility 0s linear 0.6s;
}
.sheet.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.6s var(--ease-in-out), visibility 0s; }
/* The page behind stays put while the menu is open. */
html.menu-open { overflow: hidden; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; height: calc(var(--nav-h) - 20px); flex: none; }
.sheet nav { margin-top: clamp(24px, 5vh, 48px); display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.sheet nav a { font-family: var(--f-display); font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.1; text-decoration: none; letter-spacing: -0.03em; display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sheet nav a span { font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; width: 2ch; }
.sheet nav a::after { content: "→"; margin-left: auto; font-family: var(--f-body); font-size: 1.1rem; color: var(--muted); transition: transform 0.3s var(--ease), color 0.2s; }
.sheet nav a:hover::after, .sheet nav a:focus-visible::after { transform: translateX(4px); color: var(--ink); }
.sheet-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 10px; }
.sheet-foot .btn { justify-content: center; width: 100%; }

/* ---------- Buttons & links ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  height: 50px; padding: 0 24px; border-radius: var(--radius-pill); border: 1px solid var(--bg);
  background: var(--bg); color: var(--fg); text-decoration: none; font-weight: 600; font-size: 0.97rem; letter-spacing: -0.005em;
  position: relative; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.3s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  transform: translateY(101%); border-radius: inherit; transition: transform 0.5s var(--ease);
}
.btn:hover { color: #fff; border-color: var(--accent); }
.btn:hover::before { transform: none; }
.btn:active { transform: scale(0.97); }
.btn .arrow { transition: transform 0.45s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:hover .arrow.down { transform: translateY(3px); }
.btn-ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line-strong); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 0.88rem; gap: 8px; }
.btn .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-soft); animation: pulse 2.4s ease-out infinite; }
.btn:hover .pulse { background: #fff; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(193,101,47,0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(193,101,47,0); } }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600;
  padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease), color 0.2s;
}
.link-arrow:hover { color: var(--accent-ink); background-size: 0% 1px; background-position: 100% 100%; }
.link-arrow svg { transition: transform 0.45s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.chip.is-concept { border-style: dashed; color: var(--accent-ink); border-color: var(--accent); }
.chip.is-shipped::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3E9A5E; }

/* ---------- Media frames ---------- */
.frame {
  position: relative; border-radius: var(--radius); overflow: hidden; background: #fff;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.frame img, .frame video { width: 100%; }
.panel { border-radius: var(--radius-lg); background: var(--paper-2); position: relative; overflow: hidden; }

/* ---------- Motion ---------- */
/* Everything is visible by default. Only when JS is running (html.js) and motion is allowed do
   elements start hidden and animate in as they reach the viewport. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
  .js [data-reveal="fade"] { transform: none; }
  .js [data-reveal="scale"] { transform: scale(0.96); }
  .js [data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
  .js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(12% 6% 12% 6% round 24px); transition: clip-path 1.3s var(--ease-in-out); transition-delay: var(--d, 0s); }
  .js [data-reveal="mask"] > img, .js [data-reveal="mask"] > video, .js [data-reveal="mask"] > picture { transform: scale(1.12); transition: transform 1.6s var(--ease); transition-delay: var(--d, 0s); }
  .js [data-reveal].is-in { opacity: 1; transform: none; clip-path: none; }
  .js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
  .js [data-reveal="mask"].is-in > img, .js [data-reveal="mask"].is-in > video, .js [data-reveal="mask"].is-in > picture { transform: none; }

  /* Split headings: each word rises out of its own line mask. */
  .js [data-split] .w { display: inline-block; overflow: clip; vertical-align: top; padding: 0.1em 0.14em 0.26em; margin: -0.1em -0.14em -0.26em; }
  .js [data-split] .w > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1.05s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 0.045s); }
  .js [data-split].is-in .w > span { transform: none; }

  .js [data-stagger] > * { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 0.07s); }
  .js [data-stagger].is-in > * { opacity: 1; transform: none; }

  /* No cross-document view transition: snapshotting the homepage before showing the next page
     sometimes delayed it by 0.3–1.5 s. The reveals above give each page its entrance instead. */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Ask AI drawer ---------- */
.chat-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(15, 12, 9, 0.36); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.chat {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 141; width: min(460px, 100vw);
  background: var(--paper); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(0,0,0,0.16);
  display: flex; flex-direction: column; transform: translateX(104%); visibility: hidden;
  transition: transform 0.55s var(--ease), visibility 0s linear 0.55s;
}
html.chat-open { overflow: hidden; }
html.chat-open .chat-backdrop { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
html.chat-open .chat { transform: none; visibility: visible; transition: transform 0.55s var(--ease); }
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.chat-title { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1; }
.chat-badge { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.07em; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 2px 7px; vertical-align: middle; margin-left: 6px; }
.chat-log { flex: 1; min-height: 200px; overflow-y: auto; overscroll-behavior: contain; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.msg { max-width: 90%; padding: 13px 16px; border-radius: var(--radius-8); font-size: 0.95rem; line-height: 1.6; white-space: pre-line; animation: msg-in 0.4s var(--ease) both; }
.msg.ai { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.user { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.msg-links { display: flex; flex-direction: column; gap: 8px; align-self: flex-start; width: 90%; }
.msg-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); text-decoration: none; transition: border-color 0.2s, transform 0.3s var(--ease); }
.msg-link:hover { border-color: var(--accent); transform: translateX(3px); }
.msg-link b { display: block; font-size: 0.92rem; line-height: 1.3; }
.msg-link span { font-size: 0.8rem; color: var(--muted); }
.typing { display: inline-flex; gap: 5px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: blink 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.chat-foot { border-top: 1px solid var(--line); padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.prompts { display: flex; flex-wrap: wrap; gap: 8px; }
.prompt { background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 7px 13px; font-size: 0.83rem; text-align: left; transition: border-color 0.2s, color 0.2s; }
.prompt:hover { border-color: var(--accent); color: var(--accent-ink); }
.chat-form { display: flex; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 6px 6px 6px 18px; transition: border-color 0.2s; }
.chat-form:focus-within { border-color: var(--accent); }
.chat-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.95rem; color: var(--ink); }
.chat-form button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); display: grid; place-items: center; transition: background-color 0.2s; }
.chat-form button:hover { background: var(--accent); }
.chat-note { font-size: 0.75rem; color: var(--muted); }

/* ---------- Footer / contact ---------- */
.footer { padding: 28px 0 36px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* ---------- Utilities ---------- */
.nowrap { white-space: nowrap; }
.hide-sm { }
@media (max-width: 720px) { .hide-sm { display: none !important; } }
@media (min-width: 721px) { .show-sm { display: none !important; } }

/* ---------- Capability demo (js/capdemo.js) ---------- */
.capdemo { display: none; }
.js .capdemo { display: block; }
.capdemo { --cd-up: #3E9A5E; --cd-down: #D2453B; --cd-line: #2F6FE4; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(16px, 2.2vw, 26px); box-shadow: var(--shadow-lg); }
.night .capdemo { --cd-line: #6EA1FF; }
html[data-theme="dark"] .capdemo { --cd-line: #6EA1FF; }
.cd-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cd-metric { font-weight: 600; font-size: 1.05rem; }
.cd-sub { color: var(--muted); font-size: 10px; margin-top: 2px; }
.cd-switches { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-switch { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; font-size: 0.84rem; transition: border-color 0.2s, background-color 0.2s; }
.cd-switch:hover { border-color: var(--ink); }
.cd-track { width: 28px; height: 16px; border-radius: var(--radius-pill); background: var(--paper-3); position: relative; transition: background-color 0.3s var(--ease); }
.cd-track span { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.35s var(--ease); }
.cd-switch[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.cd-switch[aria-checked="true"] .cd-track { background: var(--accent); }
.cd-switch[aria-checked="true"] .cd-track span { transform: translateX(12px); }
.cd-chart { margin-top: 14px; }
.cd-chart svg { width: 100%; height: auto; overflow: visible; }
.cd-grid { stroke: var(--line); stroke-width: 1; }
.cd-axis { font-family: var(--f-mono); font-size: 10px; fill: var(--muted); }
.cd-line { fill: none; stroke: var(--cd-line); stroke-width: 2.2; stroke-linejoin: round; }
.cd-today { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.cd-band { opacity: 0.12; } .cd-band-up { fill: var(--cd-up); } .cd-band-down { fill: var(--cd-down); }
.cd-hi { fill: none; stroke: var(--cd-up); stroke-width: 1.2; opacity: 0.55; }
.cd-lo { fill: none; stroke: var(--cd-down); stroke-width: 1.2; opacity: 0.5; }
.cd-fcline { fill: none; stroke: var(--cd-line); stroke-width: 2.2; stroke-dasharray: 5 5; }
.cd-k-fc { fill: var(--cd-line); } .cd-k-hi { fill: var(--cd-up); opacity: .55; } .cd-k-lo { fill: var(--cd-down); opacity: .5; }
.cd-median { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 2 4; }
.cd-median-label { fill: var(--accent-ink); }
.cd-chip { fill: rgba(62, 154, 94, 0.14); }
.cd-chip-text { font-family: var(--f-body); font-size: 12px; font-weight: 600; fill: #2E7D4A; }
html[data-theme="dark"] .cd-chip-text, .night .cd-chip-text { fill: #7BD39A; }
.cd-dot { stroke: var(--card); stroke-width: 2; }
.cd-dot.up { fill: var(--cd-up); } .cd-dot.down { fill: var(--cd-down); }
.cd-tip rect { fill: var(--card); stroke: var(--line-strong); filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12)); }
.cd-tip-t { font-family: var(--f-body); font-size: 11px; fill: var(--ink-2); }
.cd-tip-h { font-weight: 600; fill: var(--ink); }
.cd-tip-a { fill: var(--cd-down); font-weight: 600; }
.cd-layer { opacity: 0; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); pointer-events: none; }
.cd-fc { transform: translateX(-10px); }
.cd-an .cd-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.5s var(--ease); }
.cd-an .cd-tip { opacity: 0; transition: opacity 0.4s ease 0.25s; }
.show-forecast .cd-fc, .show-benchmark .cd-bench, .show-anomalies .cd-an { opacity: 1; transform: none; }
.cd-ext { transition: opacity 0.4s var(--ease); }
.show-forecast .cd-ext { opacity: 0; }
.show-anomalies .cd-an .cd-dot { transform: scale(1); }
.show-anomalies .cd-an .cd-dot:nth-child(2) { transition-delay: 0.08s; } .show-anomalies .cd-an .cd-dot:nth-child(3) { transition-delay: 0.16s; }
.show-anomalies .cd-an .cd-tip { opacity: 1; }
.cd-explain { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); min-height: 92px; }
.cd-explain-title { font-weight: 600; }
.cd-explain-text { color: var(--ink-2); font-size: 0.92rem; margin-top: 4px; max-width: 62ch; }
.cd-note { margin-top: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--muted); }
.night .btn:not(.btn-ghost) { --fg: var(--night); }
.night .btn:not(.btn-ghost):hover { --fg: #fff; }
@media (max-width: 860px) { .nav-inner > nav { display: none; } }
@media (max-width: 560px) { .nav-actions { gap: 8px; } }
figure { margin: 0; }


/* Returning to the homepage from a case study: no entrance animations for what's already on screen. */
.am-instant [data-reveal], .am-instant [data-reveal] > img, .am-instant [data-reveal] > video,
.am-instant [data-split] .w > span, .am-instant [data-stagger] > *, .am-instant .diagram .edge { transition: none !important; }
/* Brand mark: Austin's photo in the circle (same crop as the original site). */
.brand-mark { background: #D9CFBF url("../assets/austin-milne.webp") no-repeat -2px -14px / 38px auto; font-size: 0; color: transparent; }
.brand:hover .brand-mark { background: #D9CFBF url("../assets/austin-milne.webp") no-repeat -2px -14px / 38px auto; transform: scale(1.06); }
[id][tabindex="-1"]:focus { outline: none; }

/* Split headings stay hidden until js/site.js has split them into words, so they don't draw once in full and then
   re-animate. If the script never runs, they show after 2 s anyway. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-split]:not([data-split-ready]) { opacity: 0; animation: am-split-fallback 0s linear 2s forwards; }
}
@keyframes am-split-fallback { to { opacity: 1; } }
.mono .arr { display: inline-block; transform: translateY(-0.12em); } /* the arrow glyph sits low next to capitals */

/* Mask reveal: keep the growing image on its own layer the whole time, so it isn't re-drawn (and doesn't flash)
   when the animation ends; the frame shows a neutral fill, not white, if the image is still loading. */
.js [data-reveal="mask"] { background: var(--paper-2); }
.js [data-reveal="mask"] > img, .js [data-reveal="mask"] > video { will-change: transform; backface-visibility: hidden; }
/* Chat header: one sans-serif line, sized as a panel title. */
.chat-head { align-items: center; }
.chat-title { font-family: var(--f-body); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; margin: 0; }
.chat-sub { margin-top: 4px; font-size: 0.85rem; color: var(--muted); }
/* Compact chat header: smaller close button and padding. */
.chat-head { padding: 14px 20px 14px 24px; }
.chat-head .icon-btn { width: 32px; height: 32px; }
.chat-head .icon-btn svg { width: 11px; height: 11px; }
.chat-title { font-size: 1rem; }
/* Header a little taller, with the accent dot before the title (as in the earlier style). */
.chat-head { padding: 22px 24px 22px 28px; }
.chat-head .icon-btn { width: 40px; height: 40px; }
.chat-head .icon-btn svg { width: 12px; height: 12px; }
.chat-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.chat-sub { margin-top: 6px; padding-left: 18px; }
/* Match the earlier header's proportions. */
.chat-head { padding: 16px 22px 16px 26px; }
.chat-head .icon-btn { width: 30px; height: 30px; }
.chat-head .icon-btn svg { width: 10px; height: 10px; }
.chat-sub { margin-top: 3px; }