/* ==========================================================================
   Adi — AI-native shell (V5)
   Shared by every page: static header, cursor, highlight-to-ask, search
   circle / bar, Adi LLM chat drawer, project cards, next-project rail.
   Brand: #FFCD29 on black. Everything here is prefixed `ax-`.
   ========================================================================== */

/* Mobile WebKit and Blink inflate text when text-size-adjust is left at auto, which
   renders type larger than it is declared. It is pinned here rather than only in
   styles.css because index.html loads ai.css and home.css alone: the AI home page is
   on every page's stylesheet, this one, and nothing else guards it. Caught by
   tests/css.test.mjs, which checks each page's own stylesheet list. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root {
  --ax-brand: #FFCD29;
  --ax-brand-hi: #FFD95C;
  --ax-brand-deep: #4A3B0C;
  --ax-bg: #000;
  --ax-bg-2: #0B0B0B;
  --ax-glass: #1B1A17;
  --ax-line: #2A2926;
  --ax-ink: #F4F2EC;
  --ax-ink-2: #D6D3CB;
  --ax-muted: #9A978F;
  --ax-card: #E8E8E8;          /* chosen preview-card bed (light grey) */
  --ax-card-ink: #0A0A0A;
  --ax-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ax-ease: cubic-bezier(.16, 1, .3, 1);
  --ax-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ax-head-h: 76px;
  --ax-pad: clamp(1rem, 4vw, 3.5rem);
  --ax-drawer-w: min(420px, 100vw);
  --ax-bar-h: 56px;
}
@media (max-width: 640px) { :root { --ax-head-h: 64px; --ax-bar-h: 52px; } }

.ax-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Global selection: yellow highlight ---------- */
::selection { background: var(--ax-brand); color: #000; }

/* ---------- Static header (all pages) ---------- */
.ax-head {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--ax-head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--ax-pad);
  background: rgba(0, 0, 0, .86);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: var(--ax-font);
  transition: padding-right .5s var(--ax-ease);
}
.ax-brand { display: inline-flex; align-items: center; gap: .85rem; min-width: 0; color: var(--ax-ink); text-decoration: none; }
.ax-logo { flex: none; display: block; width: 58px; height: 34px; color: var(--ax-brand); }
.ax-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ax-logo circle { transform-box: fill-box; transform-origin: center; }
.ax-brand-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ax-name { font-size: 1.12rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; }
.ax-role { font-size: .8rem; color: var(--ax-muted); white-space: nowrap; }
.ax-nav { display: flex; align-items: center; gap: clamp(.75rem, 2.4vw, 1.9rem); }
.ax-nav a.ax-ext {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 44px;
  color: var(--ax-brand); text-decoration: none; font-size: .95rem; font-weight: 500;
  transition: opacity .2s;
}
.ax-nav a.ax-ext:hover { opacity: .8; text-decoration: underline; text-underline-offset: 4px; }
/* Under 760px these collapse to "in" and "CV", which measure 14px and 24px wide — under
   the 24x24 WCAG 2.5.8 asks for, on exactly the screens that are touched rather than
   clicked. The nav has only 17px of slack at 320px, so the box cannot grow; the hit area
   is extended instead. 5px a side against the 10px gaps between them, so two targets
   meet at the midpoint and never overlap. */
.ax-nav a.ax-ext, .ax-brand { position: relative; }
.ax-nav a.ax-ext::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px;
}
/* 23px tall at 320px, for the same reason and with the same minimum in mind. */
.ax-brand { min-height: 44px; }
.ax-nav a.ax-ext svg { transition: transform .25s var(--ax-ease); }
.ax-nav a.ax-ext:hover svg { transform: translate(2px, -2px); }
.ax-ext-short { display: none; }

/* Mode switch — sits before LinkedIn */
.ax-switch {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 .88rem/1 var(--ax-font); color: var(--ax-ink-2);
}
.ax-switch-track {
  position: relative; width: 44px; height: 24px; border-radius: 999px; flex: none;
  background: var(--ax-brand); box-shadow: 0 0 18px -4px rgba(255, 205, 41, .55);
  transition: background-color .3s, box-shadow .3s;
}
.ax-switch-thumb {
  position: absolute; top: 3px; left: 23px; width: 18px; height: 18px; border-radius: 50%;
  background: #000; transition: left .35s var(--ax-spring);
  display: grid; place-items: center;
}
.ax-switch-thumb::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-brand); }
.ax-switch[aria-checked="false"] .ax-switch-track { background: #3A3935; box-shadow: none; }
.ax-switch[aria-checked="false"] .ax-switch-thumb { left: 3px; background: var(--ax-ink); }
.ax-switch[aria-checked="false"] .ax-switch-thumb::after { background: #3A3935; }
.ax-switch:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 4px; border-radius: 8px; }
.ax-switch-label b { color: var(--ax-brand); font-weight: 600; }

@media (max-width: 760px) {
  .ax-role { display: none; }
  .ax-ext-long { display: none; }
  .ax-ext-short { display: inline; }
  .ax-switch-label { display: none; }
}
@media (max-width: 380px) {
  .ax-name { font-size: 1rem; }
  .ax-logo { width: 46px; height: 27px; }
  .ax-brand { gap: .6rem; }
}

/* Header shifts over when the drawer is open (desktop) */
@media (min-width: 1024px) {
  html.ax-drawer-open .ax-head { padding-right: calc(var(--ax-drawer-w) + var(--ax-pad)); }
}

/* Offset old page content for the fixed header */
body.ax-page { padding-top: var(--ax-head-h); }
body.ax-page > header.nav { display: none !important; }

/* ---------- Custom cursor: yellow dot ---------- */
@media (hover: hover) and (pointer: fine) {
  html.ax-cursor-on, html.ax-cursor-on * { cursor: none !important; }
  html.ax-cursor-on input, html.ax-cursor-on textarea, html.ax-cursor-on [contenteditable] { cursor: text !important; }
}
.ax-cursor {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--ax-brand); color: #000;
  display: grid; place-items: center;
  opacity: 0; transform: translate3d(-100px, -100px, 0);
  transition: width .25s var(--ax-spring), height .25s var(--ax-spring), margin .25s var(--ax-spring), opacity .2s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.ax-cursor svg { width: 0; height: 0; transition: width .2s, height .2s; }
.ax-cursor.is-on { opacity: 1; }
.ax-cursor.is-link { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.ax-cursor.is-card { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.ax-cursor.is-card svg { width: 22px; height: 22px; }
.ax-cursor.is-text { opacity: 0; }

/* ---------- Floating search circle (non-home pages) ---------- */
.ax-fab {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 55; width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0;
  background: var(--ax-glass); color: var(--ax-brand); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 0 0 1.5px rgba(255, 205, 41, .7), 0 0 26px 2px rgba(255, 205, 41, .38);
  animation: ax-glow 2.6s ease-in-out infinite;
  transition: transform .45s var(--ax-spring), opacity .3s, right .5s var(--ax-ease);
}
.ax-fab:hover { transform: scale(1.07); }
.ax-fab:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 4px; }
.ax-fab.is-hidden { transform: scale(.4); opacity: 0; pointer-events: none; }
@keyframes ax-glow {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 205, 41, .7), 0 0 22px 0 rgba(255, 205, 41, .30); }
  50% { box-shadow: 0 0 0 1.5px rgba(255, 205, 41, .95), 0 0 34px 6px rgba(255, 205, 41, .48); }
}
.ax-fab-arrive { animation: ax-arrive .9s var(--ax-spring) both, ax-glow 2.6s ease-in-out .9s infinite; }
@keyframes ax-arrive { from { transform: translateX(-38vw) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.ax-tip {
  position: fixed; z-index: 56; max-width: 240px;
  padding: .6rem .85rem; border-radius: 12px;
  background: var(--ax-ink); color: #000; font: 500 .85rem/1.35 var(--ax-font);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 100% 100%;
  transition: opacity .3s var(--ax-ease), transform .4s var(--ax-spring);
  pointer-events: none;
}
.ax-tip.is-on { opacity: 1; transform: none; }
.ax-tip::after {
  content: ''; position: absolute; right: 22px; bottom: -6px; width: 12px; height: 12px;
  background: var(--ax-ink); transform: rotate(45deg); border-radius: 2px;
}

/* ---------- Bottom-centre ask bar (non-home pages) ---------- */
.ax-dock {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 57;
  width: min(640px, calc(100vw - 32px));
  transform: translate(-50%, 24px) scale(.96); opacity: 0; pointer-events: none;
  transition: transform .55s var(--ax-spring), opacity .3s, left .5s var(--ax-ease);
}
.ax-dock.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
  html.ax-drawer-open .ax-dock { left: calc((100vw - var(--ax-drawer-w)) / 2); }
}

/* Shared bar (home spot + dock + drawer composer) */
.ax-bar {
  position: relative; display: flex; align-items: center; gap: .65rem;
  height: var(--ax-bar-h); padding: 0 .55rem 0 1.1rem; border-radius: 999px;
  background: var(--ax-glass); border: 1px solid rgba(255, 255, 255, .06);
  transition: box-shadow .35s, border-color .35s;
}
.ax-bar-icon { display: grid; color: var(--ax-muted); transition: color .3s; flex: none; }
.ax-bar input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; padding: 0;
  font: 500 1rem/1 var(--ax-font); color: var(--ax-ink); caret-color: var(--ax-brand);
}
.ax-bar input::placeholder { color: var(--ax-muted); opacity: 1; }
.ax-send {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: #3A3935; color: #B9B6AE;             /* rest: grey */
  transition: background-color .25s, color .25s, transform .35s var(--ax-spring), box-shadow .25s;
}
.ax-send:active { transform: scale(.92); }
.ax-send:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 2px; }
.ax-bar.is-focus, .ax-bar:focus-within {
  border-color: rgba(255, 205, 41, .55);
  box-shadow: 0 0 0 1px rgba(255, 205, 41, .25), 0 10px 40px -8px rgba(255, 205, 41, .34);
}
.ax-bar:focus-within .ax-bar-icon { color: var(--ax-brand); }
.ax-bar:focus-within .ax-send, .ax-bar.has-value .ax-send { background: var(--ax-brand); color: #000; }
.ax-bar:focus-within .ax-send:hover { background: var(--ax-brand-hi); box-shadow: 0 6px 22px -4px rgba(255, 205, 41, .7); }

/* ---------- Highlight → Ask Adi LLM pill ---------- */
.ax-ask {
  position: absolute; z-index: 58; display: inline-flex; align-items: center; gap: .5rem;
  height: 40px; padding: 0 .95rem 0 .35rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ax-glass); color: var(--ax-ink); font: 600 .88rem/1 var(--ax-font); white-space: nowrap;
  box-shadow: 0 0 0 1.5px rgba(255, 205, 41, .8), 0 0 24px rgba(255, 205, 41, .35), 0 10px 24px -8px rgba(0, 0, 0, .6);
  opacity: 0; transform: scale(.5); pointer-events: none;
}
.ax-ask .ax-ask-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ax-brand); color: #000; }
.ax-ask.is-on { opacity: 1; transform: none; pointer-events: auto; animation: ax-bounce .7s var(--ax-spring); }
@keyframes ax-bounce {
  0% { transform: translateY(-14px) scale(.5); opacity: 0; }
  55% { transform: translateY(3px) scale(1.04); opacity: 1; }
  75% { transform: translateY(-2px) scale(.99); }
  100% { transform: none; }
}
.ax-ask:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 3px; }

/* ---------- Adi LLM drawer ---------- */
.ax-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: var(--ax-drawer-w);
  display: flex; flex-direction: column;
  background: var(--ax-bg-2); border-left: 1px solid var(--ax-line);
  font-family: var(--ax-font); color: var(--ax-ink);
  transform: translateX(102%); visibility: hidden;
  transition: transform .55s var(--ax-ease), visibility 0s linear .55s;
}
html.ax-drawer-open .ax-drawer { transform: none; visibility: visible; transition: transform .55s var(--ax-ease), visibility 0s; }
@media (min-width: 1024px) {
  body.ax-page { transition: padding-right .55s var(--ax-ease); }
  html.ax-drawer-open body.ax-page { padding-right: var(--ax-drawer-w); }
  html.ax-drawer-open .ax-fab { right: calc(var(--ax-drawer-w) + 20px); }
}
@media (max-width: 1023px) {
  .ax-drawer { box-shadow: -20px 0 60px rgba(0, 0, 0, .6); }
  html.ax-drawer-open { overflow: hidden; }
}
.ax-dr-note {
  margin: 0; padding: .6rem 1.1rem; font-size: .76rem; line-height: 1.45; color: #1a1a1a;
  background: var(--ax-brand);
}
.ax-dr-note b { font-weight: 700; }
.ax-dr-head {
  display: flex; align-items: center; gap: .75rem; padding: .8rem .8rem .8rem 1.1rem;
  border-bottom: 1px solid var(--ax-line);
}
.ax-dr-head .ax-logo { width: 44px; height: 26px; }
.ax-dr-title { flex: 1; min-width: 0; }
.ax-dr-title strong { display: block; font-size: 1rem; letter-spacing: -.01em; }
.ax-dr-title span { display: block; font-size: .78rem; color: var(--ax-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-icon-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--ax-ink-2);
  transition: background-color .2s, color .2s;
}
.ax-icon-btn:hover { background: #1E1D1A; color: var(--ax-ink); }
.ax-icon-btn:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 2px; }

.ax-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.1rem .5rem; display: flex; flex-direction: column; gap: .9rem; scroll-behavior: smooth; }
.ax-log:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: -2px; }
.ax-intro { font-size: .95rem; line-height: 1.55; color: var(--ax-ink-2); }
.ax-intro strong { color: var(--ax-ink); }

.ax-msg { max-width: 92%; font-size: .95rem; line-height: 1.58; overflow-wrap: anywhere; }
.ax-msg.me {
  align-self: flex-end; background: var(--ax-ink); color: #000;
  padding: .6rem .95rem; border-radius: 18px 18px 4px 18px; font-weight: 500;
}
.ax-msg.ai { align-self: flex-start; color: var(--ax-ink-2); }
.ax-msg.ai p { margin: 0 0 .6rem; }
.ax-msg.ai p:last-child { margin-bottom: 0; }
.ax-msg.ai strong { color: var(--ax-ink); }
.ax-msg.ai ul { margin: .2rem 0 .6rem; padding-left: 1.1rem; }
.ax-msg.ai li { margin: .2rem 0; }
.ax-msg.ai a { color: var(--ax-brand); text-underline-offset: 3px; }
.ax-msg.ai .ax-cite { display: inline-flex; margin: 0 .1rem; font-size: .72rem; vertical-align: .15em; color: var(--ax-brand); text-decoration: none; }
.ax-msg.ai.is-error { color: #FFB4A8; }
.ax-sources { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.ax-sources a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 .7rem; border-radius: 999px;
  border: 1px solid var(--ax-line); color: var(--ax-ink-2); font-size: .78rem; text-decoration: none;
}
.ax-sources a:hover { border-color: var(--ax-brand); color: var(--ax-ink); }

.ax-think { align-self: flex-start; display: inline-flex; align-items: center; gap: .7rem; color: var(--ax-muted); font-size: .9rem; }
.ax-think .ax-logo { width: 36px; height: 21px; }
.ax-think-text { background: linear-gradient(90deg, var(--ax-muted) 0%, var(--ax-ink) 50%, var(--ax-muted) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ax-shimmer 1.6s linear infinite; }
@keyframes ax-shimmer { to { background-position: -200% 0; } }

.ax-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ax-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--ax-line); background: #121210; color: var(--ax-ink-2); cursor: pointer;
  font: 500 .875rem/1.3 var(--ax-font); text-align: left;   /* 14px: home only, and index.html has no styles.css, so its root is 16px not 17 */
  transition: border-color .2s, color .2s, background-color .2s;
}
.ax-chip:hover, .ax-chip:focus-visible { border-color: var(--ax-brand); color: var(--ax-ink); background: #1A1914; outline: none; }
.ax-chips-label { width: 100%; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ax-muted); font-weight: 600; margin: .2rem 0 .1rem; }

.ax-dr-foot { padding: .6rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ax-line); background: var(--ax-bg-2); }
.ax-quick { display: flex; gap: .5rem; margin-bottom: .65rem; overflow: hidden; max-height: 60px; transition: max-height .4s var(--ax-ease), opacity .3s, margin .3s; }
.ax-dr-foot.is-chatting .ax-quick { max-height: 0; opacity: 0; margin-bottom: 0; }
.ax-dr-foot.is-chatting:hover .ax-quick, .ax-dr-foot.is-chatting:focus-within .ax-quick { max-height: 60px; opacity: 1; margin-bottom: .65rem; }
.ax-dr-foot.is-chatting::before {
  content: ''; display: block; width: 36px; height: 4px; border-radius: 4px; margin: -.1rem auto .5rem;
  background: #3A3935; transition: opacity .2s;
}
.ax-dr-foot.is-chatting:hover::before, .ax-dr-foot.is-chatting:focus-within::before { opacity: 0; height: 0; margin: 0; }
.ax-proj-list { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .2rem; }
.ax-proj-mini {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 52px;
  padding: .7rem .95rem; border-radius: 14px; background: var(--ax-card); color: var(--ax-card-ink);
  text-decoration: none; font-weight: 600; font-size: .92rem;
  transition: transform .3s var(--ax-spring), background-color .2s;
}
.ax-proj-mini span small { display: block; font-weight: 500; font-size: .75rem; color: #3F3E3A; margin-top: .1rem; }
.ax-proj-mini:hover, .ax-proj-mini:focus-visible { transform: translateX(-3px); background: #F5F5F5; outline: none; }
.ax-proj-mini:focus-visible { box-shadow: 0 0 0 2px var(--ax-brand); }

/* Liquid-glass yellow pills (shared with home) */
.ax-pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 0; cursor: pointer; flex: none;
  font: 600 .9rem/1 var(--ax-font); color: #FFF4CC; text-decoration: none; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 244, 200, .08) 38%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(120% 80% at 50% 125%, rgba(255, 205, 41, .5), rgba(255, 205, 41, 0) 65%),
    #3A2F0B;
  box-shadow: inset 0 -10px 18px -8px rgba(255, 214, 80, .45), inset 0 10px 16px -10px rgba(255, 255, 255, .3), 0 10px 30px -12px rgba(255, 205, 41, .4);
  transition: transform .35s var(--ax-spring), box-shadow .25s, color .2s;
}
.ax-pill svg { color: var(--ax-brand); flex: none; }
.ax-pill:hover { transform: scale(1.04); color: #fff; }
.ax-pill:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 3px; }
.ax-pill[aria-expanded="true"] { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 205, 41, .8), 0 10px 30px -12px rgba(255, 205, 41, .5); }

/* ---------- Project preview cards (home thread) ---------- */
.ax-cards { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.6vw, 2rem); width: 100%; }
.ax-card {
  --h: clamp(260px, 36vw, 360px);
  position: relative; display: block; height: var(--h); border-radius: clamp(20px, 2.4vw, 28px);
  background: var(--ax-card); color: var(--ax-card-ink); text-decoration: none; overflow: hidden;
  transition: height .6s var(--ax-ease), transform .5s var(--ax-spring), box-shadow .4s;
  opacity: 0; transform: translateY(26px);
}
.ax-card.is-in { opacity: 1; transform: none; transition: height .6s var(--ax-ease), transform .7s var(--ax-ease), opacity .6s var(--ax-ease), box-shadow .4s; }
.ax-card-label {
  position: absolute; left: clamp(1.1rem, 2.6vw, 2rem); top: clamp(1rem, 2.4vw, 1.75rem); z-index: 2; max-width: 44%;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #3F3E3A;
  transition: opacity .35s;
}
.ax-card-label b { display: block; margin-top: .45rem; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.02em; text-transform: none; color: var(--ax-card-ink); line-height: 1.15; font-weight: 700; }
.ax-card-media { position: absolute; inset: 0; transition: opacity .6s var(--ax-ease), filter .6s var(--ax-ease), transform .7s var(--ax-ease); }
.ax-card-media img {
  position: absolute; right: 0; bottom: 0; width: 60%; height: auto; max-width: none;
  border-radius: 12px 0 0 0; box-shadow: -14px -14px 40px -18px rgba(0, 0, 0, .35);
}
.ax-card-media img.ax-phone { right: 36%; bottom: -18%; width: 19%; border-radius: 18px; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .45); }
.ax-card-body {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.5rem); max-width: 620px;
  opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ax-ease), transform .55s var(--ax-ease);
}
.ax-card-body h3 { margin: 0 0 .8rem; font: 700 clamp(1.3rem, 2.4vw, 1.85rem)/1.15 var(--ax-font); letter-spacing: -.025em; color: var(--ax-card-ink); text-wrap: balance; }
.ax-card-body p { margin: 0; font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.5; color: #1F1E1B; max-width: 46ch; }
.ax-card-body .ax-card-meta { margin-top: 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #3F3E3A; }
@media (hover: hover) {
  .ax-card:hover, .ax-card:focus-visible { --h: clamp(220px, 26vw, 270px); }
  .ax-card:hover .ax-card-media, .ax-card:focus-visible .ax-card-media { opacity: 0; filter: blur(10px); transform: scale(1.04); }
  .ax-card:hover .ax-card-label, .ax-card:focus-visible .ax-card-label { opacity: 0; }
  .ax-card:hover .ax-card-body, .ax-card:focus-visible .ax-card-body { opacity: 1; transform: none; }
}
.ax-card:focus-visible { outline: 3px solid var(--ax-brand); outline-offset: 4px; }
/* Touch: no hover, so show the story below the label and keep the image */
@media (hover: none) {
  .ax-card { --h: auto; min-height: 0; display: flex; flex-direction: column; }
  .ax-card-label { position: relative; left: auto; top: auto; max-width: none; padding: 1.25rem 1.25rem 0; }
  .ax-card-media { position: relative; inset: auto; height: 200px; margin-top: 1rem; }
  .ax-card-media img { width: 78%; }
  .ax-card-media img.ax-phone { right: 52%; width: 26%; bottom: -30%; }
  .ax-card-body { display: none; }
}

/* ---------- Next projects rail (end of project pages) ---------- */
.ax-next { width: min(1180px, calc(100% - 2 * var(--ax-pad))); margin: clamp(3rem, 8vw, 6rem) auto clamp(3rem, 6vw, 5rem); font-family: var(--ax-font); }
.ax-next h2 { margin: 0 0 1.25rem; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ax-muted); }
.ax-next-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.ax-next-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  min-height: 150px; padding: 1.25rem 1.35rem; border-radius: 20px;
  background: var(--ax-card); color: var(--ax-card-ink); text-decoration: none; overflow: hidden;
  transition: transform .45s var(--ax-spring), box-shadow .3s;
}
.ax-next-card small { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #3F3E3A; }
.ax-next-card strong { font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -.02em; line-height: 1.15; }
.ax-next-card .ax-arrow { position: absolute; right: 1.1rem; top: 1.1rem; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #000; color: var(--ax-brand); transition: transform .35s var(--ax-spring); }
.ax-next-card:hover, .ax-next-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(255, 205, 41, .45); outline: none; }
.ax-next-card:focus-visible { box-shadow: 0 0 0 3px var(--ax-brand); }
.ax-next-card:hover .ax-arrow { transform: rotate(45deg) scale(1.08); }
@media (max-width: 760px) {
  .ax-next-row { grid-template-columns: 1fr; }
  .ax-next-card { min-height: 104px; }
}

/* ---------- Left sectional slider (restyles the case-study TOC) ---------- */
@media (min-width: 1100px) {
  body.ax-page .cs-toc { top: calc(var(--ax-head-h) + 40px) !important; font-family: var(--ax-font); }
  body.ax-page .cs-toc .ax-rail { position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--ax-line); }
  body.ax-page .cs-toc .ax-rail i { position: absolute; left: -1px; top: 0; width: 4px; border-radius: 4px; background: var(--ax-brand); height: var(--ax-thumb-h, 24px); transform: translateY(var(--ax-thumb-y, 0)); transition: transform .35s var(--ax-ease), height .35s var(--ax-ease); box-shadow: 0 0 12px rgba(255, 205, 41, .6); }
  body.ax-page .cs-toc a.active { color: var(--ax-ink) !important; }
  body.ax-page .cs-toc a::before { opacity: 0; }
}

/* ---------- Toast ---------- */
.ax-toast {
  position: fixed; left: 50%; top: calc(var(--ax-head-h) + 14px); z-index: 80;
  transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
  padding: .7rem 1rem; border-radius: 12px; background: var(--ax-ink); color: #000;
  font: 500 .88rem/1.35 var(--ax-font); max-width: calc(100vw - 32px);
  transition: opacity .3s, transform .4s var(--ax-spring);
}
.ax-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .ax-fab, .ax-fab-arrive { animation: none; }
  .ax-ask.is-on { animation: none; }
  .ax-think-text { animation: none; color: var(--ax-muted); background: none; }
  .ax-card, .ax-card.is-in, .ax-card-media, .ax-card-body, .ax-drawer, .ax-dock, .ax-cursor { transition-duration: .01ms !important; }
}
@media (forced-colors: active) {
  .ax-cursor { display: none; }
  html.ax-cursor-on, html.ax-cursor-on * { cursor: auto !important; }
}

/* ---------- QA fixes (round 1) ---------- */
.ax-card { clip-path: inset(0 round clamp(20px, 2.4vw, 28px)); isolation: isolate; }
@media (hover: none) {
  .ax-card-body { display: block; position: relative; inset: auto; opacity: 1; transform: none; padding: .6rem 1.25rem 0; order: 1; }
  .ax-card-body h3, .ax-card-body .ax-card-meta { display: none; }
  .ax-card-media { order: 2; }
}
body.ax-page .cs-toc { transform: none !important; }
@media (max-width: 1799px) {
  html.ax-drawer-open body.ax-page .cs-toc { opacity: 0; pointer-events: none; }
}
body.ax-page .cs-toc { transition: opacity .3s; }
.ax-ask { top: 0; left: 0; }
body.ax-page { --color-bg: #000000; background: #000; }
.ax-fab.is-hidden { animation: none !important; }
@media (max-width: 760px) {
  .ax-logo { width: 46px; height: 27px; }
  .ax-brand { gap: .6rem; }
  .ax-name { font-size: 1rem; }
  .ax-nav { gap: .85rem; }
  .ax-nav a.ax-ext svg { display: none; }
  .ax-ext-short { font-weight: 600; }
}
@media (max-width: 400px) { .ax-head { padding: 0 16px; } .ax-nav { gap: .75rem; } }
@media (hover: none) {
  .ax-card-media { height: auto; padding: 1rem 0 0; overflow: hidden; }
  .ax-card-media img { position: relative; display: block; right: auto; bottom: auto; width: 84%; margin-left: auto; }
  .ax-card-media img.ax-phone { position: absolute; right: 50%; bottom: -24%; width: 24%; margin: 0; }
}
@media (max-width: 360px) {
  .ax-logo { width: 40px; height: 23px; }
  .ax-brand { gap: .5rem; }
  .ax-name { font-size: .92rem; }
  .ax-nav { gap: .6rem; }
}
/* Large desktop / ultrawide: scale the whole type system up */
@media (min-width: 2200px) { html { font-size: 118.75%; } }
@media (min-width: 3000px) { html { font-size: 137.5%; } }
.ax-drawer a.ax-proj-mini, .ax-drawer a.ax-proj-mini span, .ax-msg a.ax-proj-mini, .ax-msg a.ax-proj-mini span { color: var(--ax-card-ink); text-decoration: none; }
.ax-drawer a.ax-proj-mini svg { color: var(--ax-card-ink); }

/* ======================= Design feedback 1 ======================= */
/* Cards keep their height on hover: no neighbour jumping, content crossfades in place */
@media (hover: hover) {
  .ax-card:hover, .ax-card:focus-visible { --h: clamp(260px, 36vw, 360px); }
}
.ax-card { border-radius: 16px; }

/* Dock: home icon before the bar; projects + about icons after */
.ax-dock { display: flex; align-items: center; gap: .5rem; width: min(760px, calc(100vw - 24px)); }
.ax-dock .ax-bar { flex: 1 1 auto; min-width: 0; }
.ax-dock-btn {
  flex: none; width: var(--ax-bar-h); height: var(--ax-bar-h); border-radius: 50%;
  display: grid; place-items: center; text-decoration: none; color: #FFF4CC;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,244,200,.08) 38%, rgba(255,255,255,0) 52%),
    radial-gradient(120% 80% at 50% 125%, rgba(255,205,41,.5), rgba(255,205,41,0) 65%), #2A2410;
  box-shadow: inset 0 -10px 18px -8px rgba(255,214,80,.45), inset 0 10px 16px -10px rgba(255,255,255,.3), 0 10px 26px -10px rgba(255,205,41,.4);
  transition: transform .35s var(--ax-spring), box-shadow .25s;
}
.ax-dock-btn svg { color: var(--ax-brand); width: 18px; height: 18px; }
.ax-dock-btn:hover { transform: scale(1.06); }
.ax-dock-btn:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 3px; }
@media (max-width: 480px) { .ax-dock { gap: .35rem; } .ax-dock-btn { width: 44px; height: 44px; } }

/* Next-project rail: portrait cards, no arrows (the cursor carries the arrow) */
.ax-next-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ax-next-card { aspect-ratio: 4 / 5; min-height: 0; padding: 0; justify-content: flex-start; gap: 0; border-radius: 16px; }
.ax-next-card .ax-arrow { display: none; }
.ax-next-media { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ax-next-media img { position: absolute; left: 1.25rem; top: 1.25rem; width: calc(100% + 30%); max-width: none; height: auto; border-radius: 10px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.45); transition: transform .6s var(--ax-ease); }
.ax-next-card:hover .ax-next-media img { transform: translate(-8px, -6px) scale(1.02); }
.ax-next-text { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.25rem 1.3rem; }
.ax-next-title { font-size: .92rem; line-height: 1.4; color: #26251F; text-wrap: pretty; }
@media (max-width: 760px) {
  .ax-next-row { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: .85rem; padding-bottom: .5rem; margin-inline: calc(-1 * var(--ax-pad)); padding-inline: var(--ax-pad); scrollbar-width: none; }
  .ax-next-row::-webkit-scrollbar { display: none; }
  .ax-next-card { flex: 0 0 72%; scroll-snap-align: start; min-height: 0; }
}

/* Footer on AI-only pages (matches the case-study footer) */
.ax-footer { background: #1A1A1A; border-top: 1px solid rgba(255,255,255,.32); padding: 24px 0; font-family: var(--ax-font); }
.ax-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.ax-footer p { margin: 0; font-size: .85rem; color: #B4B4B4; }
@media (max-width: 640px) { .ax-footer-inner { padding: 0 20px; } }
.ax-next-media img { top: auto; bottom: 0; left: 1.25rem; width: 175%; border-radius: 10px 0 0 0; }
.ax-next-card:hover .ax-next-media img { transform: translate(-10px, 0) scale(1.02); }
/* The sectional slider steps aside once the reader reaches the rail and footer */
.cs-toc.ax-toc-away { opacity: 0 !important; pointer-events: none; transition: opacity .3s; }
/* Home footer clears the fixed composer in chat mode */
.is-chat .ax-footer { padding-bottom: calc(var(--bar-h, 56px) + 56px); }
.is-chat .ax-thread { padding-bottom: 48px; }

/* ======================= Standard website mode ======================= */
.ax-site-link, .ax-menu-btn { display: none; }
.ax-menu[hidden] { display: none !important; }
html.mode-site .ax-site-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; font-weight: 500; color: var(--ax-ink); text-decoration: none; position: relative; }
html.mode-site .ax-site-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--ax-brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ax-ease); }
html.mode-site .ax-site-link:hover::after, html.mode-site .ax-site-link[aria-current="page"]::after { transform: none; }
html.mode-site .ax-site-link:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 4px; border-radius: 4px; }
html.mode-site .ax-switch-label b { color: var(--ax-muted); }
@media (max-width: 860px) {
  html.mode-site .ax-nav > .ax-site-link, html.mode-site .ax-nav > a.ax-ext { display: none; }
  html.mode-site .ax-menu-btn {
    display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: #1B1A17; cursor: pointer;
  }
  html.mode-site .ax-menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ax-ink); transition: transform .3s var(--ax-ease); }
  html.mode-site .ax-menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  html.mode-site .ax-menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  html.mode-site .ax-menu-btn:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 2px; }
  html.mode-site .ax-menu {
    position: fixed; left: 0; right: 0; top: var(--ax-head-h); z-index: 70;
    display: flex; flex-direction: column; padding: .5rem var(--ax-pad) 1.5rem;
    background: #000; border-bottom: 1px solid var(--ax-line);
  }
  html.mode-site .ax-menu a { padding: .95rem 0; font-size: 1.15rem; font-weight: 600; color: var(--ax-ink); text-decoration: none; border-bottom: 1px solid var(--ax-line); }
  html.mode-site .ax-menu a:last-child { border-bottom: 0; }
  html.mode-site .ax-menu a[aria-current="page"] { color: var(--ax-brand); }
  html.mode-site .ax-menu a:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 2px; }
}
html.mode-site .ax-menu .ax-site-link::after { display: none; }
@media (max-width: 860px) { html.mode-site .ax-switch-label { display: inline; } }
@media (max-width: 360px) { html.mode-site .ax-brand-text { display: none; } }
.ax-switch-label { white-space: nowrap; }

/* ======================= Design feedback 2 ======================= */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Bottom controls ride above the footer instead of covering it */
.ax-fab { bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--ax-lift, 0px)); }
.ax-dock { bottom: calc(max(22px, env(safe-area-inset-bottom)) + var(--ax-lift, 0px)); }
.ax-home-dock { bottom: var(--ax-lift, 0px); }

/* "Check out more of my work": content-only cards, same width as the case-study column */
.ax-next { width: min(1020px, 100%); padding-inline: 40px; box-sizing: border-box; margin: clamp(3rem, 7vw, 5rem) auto clamp(3rem, 6vw, 4.5rem); }
.ax-next h2 { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.5rem; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--ax-ink); }
.ax-next-arrow { display: inline-grid; place-items: center; color: var(--ax-brand); animation: ax-float 1.8s ease-in-out infinite; }
@keyframes ax-float { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) { .ax-next-arrow { animation: none; } }
.ax-next-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.1rem); overflow: visible; margin: 0; padding: 0; }
.ax-next-card { aspect-ratio: 4 / 5; min-height: 0; padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; border-radius: 16px; }
.ax-next-media { display: none; }
.ax-next-text { padding: 0; gap: .5rem; }
.ax-next-card strong { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.ax-next-title { font-size: .95rem; }
@media (max-width: 1100px) { .ax-next { padding-inline: var(--ax-pad); } }
@media (max-width: 760px) {
  .ax-next-row { display: grid; grid-template-columns: 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .ax-next-card { aspect-ratio: auto; min-height: 150px; flex: none; }
}

/* Case-study image frames: true hairline */
.cs-frame { border-width: 1px; }
@media (min-resolution: 2dppx) { .cs-frame { border-width: .5px; } }

/* Video play/pause: white button so it reads on dark beds */
.cs-video-toggle { background: #FFFFFF !important; color: #0A0A0A !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.cs-video-toggle:hover { background: #EDEDED !important; }
.cs-video-toggle:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 2px; }
.ax-next { width: min(1020px, calc(100% - 2 * var(--ax-pad))); padding-inline: 0; }
@media (max-width: 1100px) { .ax-next { padding-inline: 0; } }
@media (max-width: 420px) { html.mode-site .ax-switch-label { display: none; } }

/* ======================= Design feedback 3 ======================= */
/* New full-bleed card artwork (art sits bottom-right on the #E8E8E8 bed, text top-left) */
.ax-card-media img, .ax-card-media img:not(.ax-phone) { position: absolute; inset: 0; right: auto; bottom: auto; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 100% 100%; border-radius: 0; box-shadow: none; transform: none; }
.ax-card-media img.ax-phone { display: none; }
@media (max-width: 760px) {
  .ax-card-media { position: relative; display: block; width: 100%; inset: auto; height: auto; padding: 0; margin-top: .5rem; aspect-ratio: 1600 / 971; overflow: hidden; }
}

/* Chat drawer, light mode (reference: quote, question box, plain answer, divider, ↳ follow-ups) */
.ax-drawer {
  --dl-bg: #F3F6F7; --dl-ink: #1E2329; --dl-ink-2: #2F363D; --dl-muted: #6A737D; --dl-line: #DCE2E5; --dl-quote: #E6EBED;
  background: var(--dl-bg); color: var(--dl-ink); border-left: 1px solid var(--dl-line);
}
@media (max-width: 1023px) { .ax-drawer { box-shadow: -20px 0 60px rgba(0, 0, 0, .45); } }
.ax-drawer .ax-dr-head { border-bottom: 1px solid var(--dl-line); background: #FFFFFF; }
.ax-drawer .ax-dr-head .ax-logo { color: #1E2329; }
.ax-drawer .ax-dr-title { display: flex; align-items: center; gap: .35rem; }
.ax-drawer .ax-dr-title strong { display: inline; color: var(--dl-ink); font-size: .98rem; }
.ax-drawer .ax-icon-btn { color: var(--dl-ink-2); }
.ax-drawer .ax-icon-btn:hover { background: #E9EDEF; color: var(--dl-ink); }
.ax-info { position: relative; display: inline-flex; }
.ax-info-btn { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--dl-muted); cursor: pointer; }
.ax-info-btn:hover, .ax-info-btn:focus-visible { color: var(--dl-ink); background: #E9EDEF; outline: none; }
.ax-info-btn:focus-visible { box-shadow: 0 0 0 2px #B38F14; }
.ax-tip-pop {
  position: absolute; left: -6px; top: calc(100% + 8px); z-index: 5; width: min(280px, 70vw);
  padding: .65rem .8rem; border-radius: 10px; background: var(--ax-brand); color: #1a1a1a;
  font-size: .76rem; line-height: 1.45; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility 0s linear .18s;
}
.ax-tip-pop::before { content: ''; position: absolute; left: 14px; top: -5px; width: 10px; height: 10px; background: var(--ax-brand); transform: rotate(45deg); }
.ax-info:hover .ax-tip-pop, .ax-info:focus-within .ax-tip-pop, .ax-info.is-open .ax-tip-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }

.ax-drawer .ax-log { padding: 1.25rem 1.25rem .75rem; gap: 1rem; }
.ax-drawer .ax-intro { font-size: .88235rem; color: var(--dl-ink-2); }
.ax-drawer .ax-intro strong { color: var(--dl-ink); }
.ax-drawer .ax-msg { font-size: .88235rem; line-height: 1.6; max-width: 100%; }
.ax-drawer .ax-msg.me { align-self: flex-end; max-width: 88%; background: #FBFCFC; color: var(--dl-ink); border: 1px solid var(--dl-line); border-radius: 3px; padding: .7rem 1rem; font-weight: 400; }
.ax-drawer .ax-msg.ai { color: var(--dl-ink-2); }
.ax-drawer .ax-msg.ai strong { color: var(--dl-ink); }
.ax-drawer .ax-msg.ai a { color: #7A5B00; }
.ax-drawer .ax-msg.ai.is-error { color: #A12A1A; }
.ax-drawer .ax-sources { display: none; }
.ax-quote { align-self: flex-end; max-width: 92%; margin: 0 0 -.5rem; padding: .7rem 1rem .7rem 2.3rem; position: relative; background: var(--dl-quote); color: var(--dl-muted); font-size: .88235rem; line-height: 1.55; border-radius: 3px; }
.ax-quote-mark { position: absolute; left: .85rem; top: .45rem; font: 700 1.5rem/1 Georgia, serif; color: var(--dl-ink-2); }
.ax-drawer .ax-think { color: var(--dl-muted); }
.ax-drawer .ax-think .ax-logo { color: #D9622B; }
.ax-drawer .ax-think-text { background-image: linear-gradient(90deg, var(--dl-muted) 0%, var(--dl-ink) 50%, var(--dl-muted) 100%); }

.ax-follow { display: flex; flex-direction: column; align-items: stretch; gap: .1rem; padding-top: .8rem; border-top: 1px solid var(--dl-line, rgba(255,255,255,.12)); }
.ax-follow .ax-chips-label { margin: 0 0 .3rem; color: var(--dl-muted, var(--ax-muted)); }
.ax-follow .ax-chip { display: flex; align-items: flex-start; gap: .55rem; min-height: 36px; padding: .45rem .1rem; border: 0; border-radius: 6px; background: transparent; color: var(--dl-muted, var(--ax-muted)); font: 400 .82353rem/1.4 var(--ax-font); text-align: left; }
.ax-follow .ax-chip:hover, .ax-follow .ax-chip:focus-visible { background: transparent; color: var(--dl-ink, var(--ax-ink)); border: 0; }
.ax-follow .ax-chip:focus-visible { outline: 2px solid #B38F14; outline-offset: 2px; }
.ax-follow-arrow { flex: none; color: currentColor; opacity: .8; }
.ax-intro + .ax-follow { border-top: 0; padding-top: 0; }

.ax-drawer .ax-dr-foot { background: #FFFFFF; border-top: 1px solid var(--dl-line); }
.ax-drawer .ax-dr-foot.is-chatting::before { background: #C9D0D4; }
.ax-drawer .ax-bar { background: #FFFFFF; border: 1px solid #CCD3D7; color: var(--dl-ink); box-shadow: none; }
.ax-drawer .ax-bar input { color: var(--dl-ink); }
.ax-drawer .ax-bar input::placeholder { color: #7B848D; }
.ax-drawer .ax-bar:focus-within { border-color: #B38F14; box-shadow: 0 0 0 3px rgba(255, 205, 41, .35); }
.ax-drawer .ax-bar .ax-bar-icon { color: #8A6A00; }
.ax-drawer .ax-pill { color: #3A2F0B; background: #FFF3C4; box-shadow: inset 0 0 0 1px #E8D27A; }
.ax-drawer .ax-pill svg { color: #8A6A00; }
.ax-drawer .ax-pill:hover { color: #1a1a1a; background: #FFE89A; }
.ax-drawer .ax-q-home { padding: 0; width: 44px; }
.ax-drawer .ax-proj-mini { background: #FFFFFF; border: 1px solid var(--dl-line); }
.ax-drawer .ax-bar input { caret-color: #1E2329; }
.ax-drawer .ax-think .ax-logo { color: #C99A06; }
/* Hover scale must not be clipped by the collapsing quick row */
.ax-quick { padding: 6px; margin: -6px -6px calc(.65rem - 6px); }
.ax-dr-foot.is-chatting .ax-quick { padding-block: 0; margin-block: 0; }
.ax-dr-foot.is-chatting:hover .ax-quick, .ax-dr-foot.is-chatting:focus-within .ax-quick { padding-block: 6px; margin: -6px -6px calc(.65rem - 6px); }
/* "Check out more of my work" arrow points down */
@keyframes ax-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.ax-next-arrow { animation-name: ax-float-y; }
.ax-drawer .ax-dr-title span.ax-info { display: inline-flex; overflow: visible; white-space: normal; margin: 0; font-size: inherit; color: inherit; }
.ax-drawer .ax-dr-title span.ax-tip-pop { display: block; overflow: visible; white-space: normal; margin: 0; font-size: .76rem; color: #1a1a1a; text-overflow: clip; }
.ax-drawer .ax-dr-head, .ax-drawer .ax-dr-title { overflow: visible; position: relative; z-index: 3; }
.is-chat .ax-footer { padding-bottom: 24px; }
@media (max-width: 760px) {
  /* Same composition as desktop: label top-left, artwork full-bleed on the #E8E8E8 bed */
  .ax-card, .ax-card:hover, .ax-card:focus-visible { --h: auto; height: auto; min-height: 0; display: block; aspect-ratio: 1600 / 971; }
  .ax-card .ax-card-label { position: absolute; left: 0; top: 0; z-index: 2; max-width: 55%; padding: 1rem 1.1rem 0; opacity: 1; }
  .ax-card .ax-card-label b { font-size: 1.05rem; }
  .ax-card .ax-card-media { position: absolute; inset: 0; width: auto; height: auto; margin: 0; aspect-ratio: auto; opacity: 1; filter: none; transform: none; }
  .ax-card .ax-card-body { display: none; }
}

/* ======================= Design feedback 4 ======================= */
/* Next-project cards: landscape, sized to their content */
.ax-next-card { aspect-ratio: auto; min-height: 0; padding: 1.1rem 1.25rem 1.2rem; justify-content: flex-start; gap: .55rem; }
.ax-next-text { gap: .3rem; }
.ax-next-card strong { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.ax-next-title { font-size: .9rem; line-height: 1.4; }
@media (max-width: 760px) { .ax-next-card { min-height: 0; } }
/* Room for the expanded ask bar at the end of AI-mode pages */
html:not(.mode-site) body.ax-page main, html:not(.mode-site) body.ax-about-page main { padding-bottom: 88px; }
/* DF4: follow-ups as pills, quote stands alone. Drawer reading copy is 15px and the
   follow-up pills 14px, asked for in October 2026. The rem values look odd because
   styles.css pins html{font-size:17px}, so 1rem is 17px on this site and not 16:
   15/17 is .88235rem and 14/17 is .82353rem. Written in rem rather than px so the two
   track the root, which ai.css lifts to 118.75% at >=2200px. A first pass shipped
   .9375rem and .875rem, the 16px arithmetic, and ran a pixel over on both. These are
   the winning declarations: the .ax-drawer rules further up are overridden here. */
.ax-drawer .ax-msg { font-size: .88235rem; line-height: 1.58; }
.ax-drawer .ax-msg.me { padding: .55rem .85rem; }
.ax-drawer .ax-intro p { font-size: .88235rem; }
/* Adi's answers are rendered as markdown, so the words live in a <p> inside .ax-msg,
   not in .ax-msg itself. styles.css carries a bare p{ font-size: var(--fs-body) },
   which matches that paragraph directly and so beats inheritance from the rules above:
   the container computed 15px while the text rendered at 19.55px. Reported October 2026
   as the drawer still looking big after its type was set; measuring .ax-msg confirmed
   15px and missed it, because that is not the element that renders the text. Measure a
   paragraph inside a real answer when changing chat type. */
.ax-drawer .ax-msg p, .ax-drawer .ax-msg li { font-size: inherit; line-height: inherit; }
.ax-drawer .ax-quote { font-size: .88235rem; margin-bottom: 0; }
/* Inputs stay 16px on touch screens so iOS does not zoom on focus */
.ax-bar input { font-weight: 400; }
@media (min-width: 768px) and (hover: hover) { .ax-bar input, .ax-drawer .ax-bar input { font-size: .9rem; } }
.ax-drawer .ax-follow { align-items: flex-start; gap: .45rem; }
.ax-drawer .ax-follow .ax-chip {
  align-items: center; gap: .4rem; min-height: 34px; max-width: 100%; padding: .4rem .85rem .4rem .7rem;
  border: 1px solid var(--dl-line); border-radius: 999px; background: #FFFFFF; color: var(--dl-ink-2);
  font-size: .82353rem; line-height: 1.35; text-align: left;
}
.ax-drawer .ax-follow .ax-chip:hover, .ax-drawer .ax-follow .ax-chip:focus-visible { border: 1px solid #C9B25A; background: #FFF8DC; color: var(--dl-ink); }
.ax-drawer .ax-follow .ax-chips-label { font-size: .7rem; }