/* ==========================================================================
   saminazari.me — site styles
   Breakpoints: mobile < 810px, tablet 810–1199px, desktop >= 1200px
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-opsz-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --blue: #0022ff;
  --black: #000;
  --ink: #171717;
  --muted: #666;
  --body: #484848;
  --lead: #3d3d3d;
  --line: #d1d1d1;
  --line-soft: #f5f5f5;
  --card: #f6f6f6;
  --tile: #fbfbfb;
  --bg: #fff;                  /* page, header bar, panels */
  --on-accent: #fff;           /* text on the blue or on a --black button */
  --logo-tile: #fbfbfb;        /* about page logos stay on a light tile in dark mode too */
  --ring: rgba(0, 0, 0, 0.06); /* hairline edges drawn with box-shadow */
  --frame: rgba(0, 0, 0, 0.1); /* outline on framed images */
  --shadow-1: rgba(0, 0, 0, 0.06);
  --shadow-2: rgba(0, 0, 0, 0.04);

  --pad: 64px;                 /* page side padding */
  --side: 240px;               /* desktop: space kept clear for the fixed sidebar */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* strong ease-out for entrances and UI */
  --font: "Inter", "Inter Placeholder", system-ui, -apple-system, sans-serif;
}

/* Dark mode, following the visitor's system setting. Same design, re-tuned colours: the blue is a
   lighter version of the same hue (#0022ff is 7.9:1 on white but only 2.4:1 on near-black; #6b7dff is
   5.5:1), the page is near-black rather than pure black, and every text colour passes WCAG AA. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --blue: #6b7dff;
    --black: #f2f2f3;
    --ink: #e8e8ea;
    --muted: #9a9aa1;
    --body: #c2c2c7;
    --lead: #d2d2d6;
    --line: #3a3a3f;
    --line-soft: #232326;
    --card: #1c1c1f;
    --tile: #18181b;
    --bg: #0f0f10;
    --on-accent: #0f0f10;
    --ring: rgba(255, 255, 255, 0.09);
    --frame: rgba(255, 255, 255, 0.1);
    --shadow-1: rgba(0, 0, 0, 0.4);
    --shadow-2: rgba(0, 0, 0, 0.3);
  }
  /* Light screenshots on a dark page get a faint edge so they don't look cut out. */
  .flow figure :is(img, video):not(.framed), .project :is(img, video):not(.framed) { outline: 1px solid var(--frame); outline-offset: -1px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--black);
  font-family: var(--font);
  font-variation-settings: "opsz" 14;   /* "Inter" (text cut) */
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
hr { border: 0; height: 1px; margin: 0; background: var(--line-soft); }
/* Headings spread their words evenly over their lines; paragraphs avoid ending on a lone word. */
h1, h2, h3, h4, .t-heading, .stat-title { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }

/* "Inter Display" cut */
.display { font-variation-settings: "opsz" 32; }

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

/* ---------- Type styles ---------- */
.t-heading {                 /* section headings, project titles */
  font-size: 16px; line-height: 20.8px; font-weight: 500;
  font-variation-settings: "opsz" 32;
}
.t-body  { font-size: 15px; line-height: 22px; letter-spacing: -0.02em; color: var(--body); }
.t-lead  { font-size: 15px; line-height: 25px; letter-spacing: -0.02em; font-weight: 500; color: var(--lead); }
.t-small { font-size: 14px; line-height: 22px; letter-spacing: -0.02em; color: var(--muted); }
.t-label { font-size: 14px; line-height: 16.8px; }
.capitalize { text-transform: capitalize; }

/* ---------- Header: name + nav (fixed sidebar on desktop); SamiLLM's sparkles sit top right ----------
   The header is shared by every page and stays put while the router in site.js
   swaps only <main>. On desktop the name and nav are fixed on the left; tablet
   and mobile turn the same markup into a sticky top bar. */
.site-header { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 5; }
.site-name { position: fixed; top: 76px; left: var(--pad); font-size: 15px; line-height: 18px; color: var(--black); }
.site-nav { position: fixed; top: 279px; left: var(--pad); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.site-nav a { font-size: 15px; line-height: 22px; letter-spacing: -0.02em; color: var(--muted); transition: color 200ms ease; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--blue); }

/* Bounce dot: marks the current section and hops between items (see site.js).
   The outer span carries the position, the inner one the sideways hop. */
.bounce-dot { position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity 150ms ease; }
.bounce-dot.is-placed { opacity: 1; }
.bounce-dot > span { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* Page columns: centred in the window, but never under the desktop sidebar. */
.home-layout, .about-main, .fun-main, .case-main {
  --col: min(var(--w), 100% - var(--side) - var(--pad));
  width: var(--col);
  margin-left: max(var(--side), (100% - var(--col)) / 2);
}

/* ---------- Footer ---------- */
/* Email on the left, the signature centred, socials on the right (phones stack them, signature last). */
.site-footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--pad) 64px;
  margin-top: 170px;
}
.site-footer .email { justify-self: start; }
.footer-signature { order: 2; display: block; width: 88px; height: 39px; color: var(--blue); transition: opacity 200ms ease; }
.footer-signature svg { display: block; width: 100%; height: 100%; overflow: visible; }
.footer-signature:hover { opacity: .7; }
.socials { order: 3; justify-self: end; }
.site-footer .email { font-size: 14px; line-height: 16.8px; }
.socials { display: flex; align-items: center; gap: 28px; color: var(--ink); }
.socials a { display: block; }
.socials svg { display: block; }

.t-heading, .site-footer .email, .socials a { transition: opacity 200ms ease; }
a:hover .t-heading, .site-footer .email:hover, .socials a:hover { opacity: .7; }

/* ==========================================================================
   Home
   ========================================================================== */
.home-layout { --w: 834px; margin-top: 275px; }

.intro h1 {
  font-size: 24px; line-height: 31.2px; font-weight: 400; color: var(--blue);
  font-variation-settings: "opsz" 32;
}
.intro .t-small { margin-top: 32px; }
.intro .previously a:hover { color: var(--black); }

.projects { list-style: none; padding: 0; margin: 100px 0 0; }
.project { border-top: 1px solid var(--line); padding-top: 100px; padding-bottom: 100px; }
.project:last-child { padding-bottom: 0; }
.project a { display: block; transition: transform 160ms var(--ease-out); }
.project a:active { transform: scale(0.99); }
.project-head { display: grid; grid-template-columns: 334px 1fr; column-gap: 41px; }
.project-head .meta { margin-top: 3px; font-size: 15px; line-height: 22px; letter-spacing: -0.02em; color: var(--body); }
.project-head .summary { font-size: 14px; line-height: 16.8px; color: var(--muted); }
.project :is(img, video) { width: 100%; height: auto; margin-top: 48px; object-fit: contain; }
.project :is(img, video).r6 { border-radius: 6px; }
.project :is(img, video).r4 { border-radius: 4px; }

/* ==========================================================================
   About
   ========================================================================== */
.about-main { --w: 936px; margin-top: 301px; }

/* ---------- Fun ----------
   Filters along the top (built by site.js from each card's data-tags), then a
   staggered grid of cards: a picture or video, a title and a caption. */
.fun-main { --w: 936px; margin-top: 279px; }
.fun-filters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px -8px; }
.fun-filters:empty { display: none; }
.fun-filters button {
  font: inherit; font-size: 15px; line-height: 22px; letter-spacing: -0.02em;
  padding: 2px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.fun-filters button[aria-pressed="true"] { background: var(--blue); color: var(--on-accent); }
.fun-grid { list-style: none; margin: 0; padding: 0; column-count: 4; column-gap: 16px; }
.fun-item { break-inside: avoid; padding-bottom: 28px; }
.fun-item[hidden] { display: none; }
.fun-link { display: block; }
.fun-link :is(img, video) { width: 100%; height: auto; transition: opacity 200ms ease; }
a.fun-link { transition: transform 160ms var(--ease-out); }
a.fun-link:active { transform: scale(0.98); }
.fun-title { margin-top: 10px; font-size: 15px; line-height: 22px; letter-spacing: -0.02em; color: var(--black); }
.fun-meta { font-size: 15px; line-height: 22px; letter-spacing: -0.02em; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .fun-filters button:not([aria-pressed="true"]):hover { color: var(--black); }
  a.fun-link:hover :is(img, video) { opacity: 0.88; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.about-intro { display: flex; align-items: flex-start; gap: 48px; }
.about-intro img { width: 125px; height: 125px; border-radius: 50%; object-fit: cover; flex: none; }
.about-intro h1 { font-size: 32px; line-height: 41.6px; font-weight: 400; letter-spacing: -0.02em; }

.about-section { border-top: 1px solid var(--line); margin-top: 60px; padding-top: 63px; }
.about-section + .about-section { margin-top: 68px; padding-top: 69px; }
.about-section-head { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.ext-links { display: flex; align-items: center; gap: 24px; font-size: 15px; line-height: 25px; font-weight: 500; letter-spacing: -0.02em; color: var(--lead); }
.ext-links a { display: inline-flex; align-items: center; gap: 8px; }
.ext-links a:hover { color: var(--black); }
.ext-links .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--black); }

.timeline { list-style: none; padding: 0; margin-top: 70px; display: flex; flex-direction: column; gap: 48px; }
.timeline > li { display: grid; grid-template-columns: 1fr 1fr; }
.entry { display: flex; gap: 24px; align-items: flex-start; }
/* A layered shadow instead of a border: it reads as an edge without a hard grey line. */
.entry-logo { width: 72px; height: 72px; flex: none; border-radius: 8px; background: var(--logo-tile); display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--ring), 0 1px 2px -1px var(--shadow-1), 0 2px 4px 0 var(--shadow-2); }
.entry-meta { padding-top: 4px; }
.entry-meta .name { font-size: 14px; line-height: 16.8px; color: var(--black); }
.entry-meta .name a:hover { text-decoration: underline; }
.entry-meta .role { font-size: 14px; line-height: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--muted); }
.entry-meta .dates { display: flex; align-items: center; gap: 8px; }
.entry-meta .t-body { margin-top: 4px; }
.entry-meta .name + .t-body { margin-top: 4px; }
.entry-meta .t-body + .t-body { margin-top: 4px; }
.entry-desc { margin: 0; }

/* ==========================================================================
   Case studies
   ========================================================================== */
.case { --media: 799px; --text: 559px; --top: 265px; --hero-gap: 24px; }
.case-main { --w: var(--media); padding-top: var(--top); }
.case-main > :not(figure):not(hr):not(.stats-wrap):not(.case-crumbs-nav):not(.w-wide) { width: min(var(--text), 100%); margin-left: auto; margin-right: auto; }
/* Width chosen per block in the site editor: .w-text keeps a block (e.g. an image)
   to the text column, .w-wide lets one (e.g. a paragraph) span the image column. */
.case-main > .w-text { width: min(var(--text), 100%); margin-left: auto; margin-right: auto; }

/* Title first, then the collaborators, then "Case Study - Date" a line further down. */
.flow > .case-title { margin-top: 0; font-size: 24px; line-height: 31.2px; font-weight: 600; letter-spacing: -0.04em; }
.flow > .case-credits { margin-top: 48px; }
.flow > .case-meta { margin-top: 48px; font-size: 14px; line-height: 22px; letter-spacing: -0.02em; color: var(--muted); }
.flow > .case-credits + .case-meta { margin-top: 22px; }
.flow > .case-hero { margin-top: var(--hero-gap); }

/* Breadcrumb (desktop only): on case studies the top-left shows "← Work /
   project" instead of the name and main nav. It lives inside <main>, so it
   swaps with the page. */
.case-crumbs-nav { display: none; }
.case-crumbs { display: flex; align-items: center; gap: 6px; width: max-content; white-space: nowrap; font-size: 15px; line-height: 18px; color: var(--muted); }
.case-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--black); }
.case-crumbs a svg { width: 10px; height: 10px; }
.case-crumbs span::before { content: "/"; margin-right: 6px; }

@media (min-width: 1200px) {
  .has-crumbs .site-name, .has-crumbs .site-nav { display: none; }
  .flow > .case-crumbs-nav { display: block; position: fixed; top: 76px; left: var(--pad); margin: 0; z-index: 4; }
}

/* vertical rhythm inside the article */
.flow > * + * { margin-top: 24px; }
.flow > .case-crumbs-nav + * { margin-top: 0; }
.flow > hr { margin-top: 48px; }
.flow > hr + * { margin-top: 48px; }
.flow > h2 + *, .flow > h3 + * { margin-top: 12px; }
.flow > h2 + h3 { margin-top: 24px; }
.flow > p + p { margin-top: 20px; }
.flow > figure + figure { margin-top: 16px; }
.flow > .caption + figure { margin-top: 8px; }
.flow > figure.space-lg { margin-top: 48px; }
.flow > figure + h3 { margin-top: 40px; }
.flow > * + .stats-wrap, .flow > .callout + * { margin-top: 24px; }
.flow > .cta + * { margin-top: 32px; }
.flow > .cta { margin-top: 32px; }

.flow figure :is(img, video) { width: 100%; height: auto; border-radius: 6px; object-fit: cover; }
.flow figure.contain :is(img, video) { object-fit: contain; }
.flow figure.square :is(img, video) { border-radius: 0; }
:is(img, video)[style*="--ar"] { aspect-ratio: var(--ar); object-fit: cover; }
/* A see-through outline, so it darkens the image's own edge instead of drawing a flat grey line on it. */
:is(img, video).framed { outline: 1px solid var(--frame); outline-offset: -1px; }
/* Fill or fit chosen in the site editor for images outside case-study figures. */
main :is(img, video).fit { object-fit: contain; }
main :is(img, video).fill { object-fit: cover; }
/* site.js focuses the new <main> after each page swap so screen readers start at the new content.
   It isn't interactive, so don't draw the browser's focus ring around the whole page. */
main[tabindex="-1"]:focus { outline: none; }
.project .caption { margin-top: 24px; }
.project .caption + :is(img, video) { margin-top: 8px; }

.flow ul { padding-left: 21px; font-size: 14px; line-height: 22px; letter-spacing: -0.02em; color: var(--muted); }
.flow > p + ul { margin-top: 0; }

.callout { background: var(--card); border-radius: 16px; padding: 24px; }
.callout > * + * { margin-top: 12px; }
.callout .t-lead { color: var(--black); }
.callout .t-lead + .t-lead { margin-top: 20px; }
.callout.note { padding: 16px; }
.callout.note > .t-small { margin: 0; }
.quote { border-left: 2px solid var(--blue); padding-left: 20px; color: var(--black); }

.stats-wrap:not(.w-wide) { width: min(var(--text), 100%); margin-left: auto; margin-right: auto; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--card); border-radius: 16px; padding: 32px; text-align: center; }
.stat:nth-child(3) { grid-column: 1 / -1; }
.stat:nth-child(3) .stat-desc { max-width: 440px; margin-left: auto; margin-right: auto; }
.stat-num { font-size: 32px; line-height: 38.4px; font-weight: 400; font-variation-settings: "opsz" 32; }
.stat-num strong { font-weight: 700; }
.stat-label { font-size: 15px; line-height: 25px; font-weight: 500; letter-spacing: -0.02em; }
.stat-title { font-size: 16px; line-height: 20.8px; font-weight: 500; font-variation-settings: "opsz" 32; }
.stat-desc { margin-top: 24px; }
.stat-title + .stat-desc { margin-top: 24px; }

/* Tiles: small cards in a grid, each an image, a short title and a line or two of text.
   Three across; they span the image column (add .w-wide). */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 20px; border-radius: 16px; background: var(--card); }
.tile > img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; }
.tile > :not(img) { padding: 0 8px; }
.flow > * + .tiles { margin-top: 32px; }
.flow > .tiles + * { margin-top: 32px; }
/* Steps: a short numbered timeline, across the image column (add .w-wide), stacked on phones. */
.flow > .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0; list-style: none; }
.steps > li { position: relative; padding-top: 20px; border-top: 1px solid var(--line); }
.steps > li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.steps .step { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--blue); font-variant-numeric: tabular-nums; }
.steps .stat-title { margin-top: 4px; }
.steps .t-small { margin-top: 6px; }
.flow > * + .steps, .flow > .steps + * { margin-top: 32px; }
/* An interactive figure (mounted by a page script) gets more room around it. */
.flow > * + figure.lab, .flow > figure.lab + * { margin-top: 32px; }

.cta { display: flex; justify-content: center; width: auto !important; }
.cta a {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--black); color: var(--on-accent); border-radius: 100px;
  /* A little less padding on the arrow side, so the label looks centered. */
  padding: 8px 14px 8px 16px; font-size: 15px; line-height: 22px; letter-spacing: -0.02em;
  transition: opacity 200ms ease, transform 160ms var(--ease-out);
}
.cta a:hover { opacity: .8; }

/* A link in running text that opens another site: underlined, with a small arrow after it. */
a.ext { color: var(--black); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
a.ext svg { display: inline-block; margin-left: 4px; vertical-align: 0.15em; }
@media (hover: hover) and (pointer: fine) { a.ext:hover { text-decoration-color: currentColor; } }
.cta a:active { transform: scale(0.97); }

/* ---------- Page-load reveal ----------
   Content resolves from a soft blur as each page loads. Elements opt in with
   class="reveal" and set their order with style="--i: N" (60ms apart). */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal 650ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes reveal { from { opacity: 0; filter: blur(8px); transform: translateY(16px); } }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: reveal-fade 300ms ease both; }
  @keyframes reveal-fade { from { opacity: 0; } }
}

/* Blocks hidden just before leaving a page, so that coming back with the
   back/forward buttons starts hidden and replays the reveal (see site.js). */
.replay-pending { opacity: 0; }

/* ---------- Lazy images fade in instead of popping ---------- */
.js img[loading="lazy"] { transition: opacity 300ms var(--ease-out); }
.js img[loading="lazy"]:not(.is-loaded) { opacity: 0; }

/* ==========================================================================
   Tablet (810–1199px)
   ========================================================================== */
@media (max-width: 1199.98px) {
  :root { --pad: 48px; --side: var(--pad); }
  .site-header {
    position: sticky; height: auto; display: grid; grid-template-columns: 1fr auto; align-items: center;
    padding: 28px var(--pad); background: var(--bg);
  }
  .site-name { display: none; }
  .site-nav { position: relative; top: auto; left: auto; }
  .site-nav ul { flex-direction: row; gap: 24px; }
  .site-footer { margin-top: 140px; }

  .home-layout { --w: 100%; margin-top: 48px; }
  .intro .t-small { margin-top: 48px; }
  .intro h1 br { display: none; }
  .projects { margin-top: 100px; }
  .project-head { grid-template-columns: 362px 1fr; column-gap: 45px; }

  .about-main, .fun-main { --w: 100%; --pad: 50px; margin-top: 63px; }
  .fun-grid { column-count: 3; }
  .about-intro { flex-direction: column; gap: 48px; }

  .case { --media: 800px; --text: 600px; --top: 45px; --hero-gap: 48px; }
  .case-main { padding-top: var(--top); }
  .flow > .case-hero { margin-top: var(--hero-gap); }
  :is(img, video)[style*="--ar-t"] { aspect-ratio: var(--ar-t); }
}

/* ==========================================================================
   Mobile (< 810px)
   ========================================================================== */
@media (max-width: 809.98px) {
  :root { --pad: 20px; }
  .site-header { padding: 22px var(--pad) 21px; }
  .site-nav ul { gap: 20px; }
  .home-layout { margin-top: 76px; }
  .intro .t-small { margin-top: 32px; }
  .project { padding-top: 80px; padding-bottom: 80px; }
  .project-head { display: block; }
  .project-head .summary { margin-top: 16px; }

  .about-main, .fun-main { --pad: 20px; margin-top: 58px; }
  .fun-grid { column-count: 2; column-gap: 12px; }
  .fun-filters { margin-left: -8px; }
  .about-intro { gap: 24px; }
  .about-section-head { display: block; }
  .ext-links { margin-top: 32px; }
  .about-section + .about-section { margin-top: 72px; padding-top: 73px; }
  .timeline { margin-top: 72px; }
  .timeline > li { display: block; }
  .entry-desc { margin-top: 24px; }

  .case { --media: 100%; --text: 100%; --top: 64px; }
  .stats { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .flow > .steps { grid-template-columns: 1fr; gap: 20px; }
  .steps > li { padding: 0 0 0 20px; border-top: 0; border-left: 1px solid var(--line); }
  .steps > li::before { top: 5px; left: -4px; }
  :is(img, video)[style*="--ar-m"] { aspect-ratio: var(--ar-m); }
  .stat:nth-child(3) { grid-column: auto; }

  .site-footer { display: flex; flex-direction: column; gap: 24px; margin-top: 120px; }
  .footer-signature { order: 4; margin-top: 16px; }
}

@media (max-width: 479.98px) {
  .fun-grid { column-count: 1; }
}

/* ==========================================================================
   SamiLLM — the sparkles in the top right and their panel (see the end of site.js)
   ========================================================================== */
.ask-toggle {
  position: fixed; top: 71px; right: calc(var(--pad) - 6px); z-index: 6;
  height: 28px; display: inline-flex; align-items: center; padding: 0 6px;
  border: 0; border-radius: 100px; background: transparent; color: var(--blue); cursor: pointer;
  font: inherit; font-size: 15px; line-height: 22px; letter-spacing: -0.02em;
  transition: transform 160ms var(--ease-out);
}
.ask-toggle svg { display: block; flex: none; overflow: visible; }
/* The name sits folded away to the right of the sparkles. Opening it widens the button from its right
   edge, so the sparkles glide left while the name resolves from a soft blur, like the page reveal. */
.ask-toggle-label { display: grid; grid-template-columns: 0fr; transition: grid-template-columns 380ms var(--ease-out); }
.ask-toggle-label > span {
  overflow: hidden; white-space: nowrap; padding-left: 0; opacity: 0; filter: blur(4px); transform: translateX(-6px);
  transition: opacity 240ms ease, filter 300ms var(--ease-out), transform 380ms var(--ease-out), padding-left 380ms var(--ease-out);
}
.ask-stars { transform-box: fill-box; transform-origin: center; transition: transform 500ms var(--ease-out); }
.ask-toggle:active { transform: scale(0.95); }
.ask-toggle[aria-expanded="true"] .ask-stars { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .ask-toggle:hover:not([aria-expanded="true"]) .ask-toggle-label { grid-template-columns: 1fr; }
  .ask-toggle:hover:not([aria-expanded="true"]) .ask-toggle-label > span { padding-left: 6px; opacity: 1; filter: none; transform: none; }
  .ask-toggle:hover .ask-stars { transform: rotate(180deg); }
}
.ask-toggle:focus-visible .ask-toggle-label { grid-template-columns: 1fr; }
.ask-toggle:focus-visible .ask-toggle-label > span { padding-left: 6px; opacity: 1; filter: none; transform: none; }
/* Phones and other touch screens can't hover, so the name always shows there. */
@media (hover: none), (max-width: 809.98px) {
  .ask-toggle .ask-toggle-label { grid-template-columns: 1fr; }
  .ask-toggle .ask-toggle-label > span { padding-left: 6px; opacity: 1; filter: none; transform: none; }
}
/* Too narrow for the name beside the nav (320px phones): just the sparkles. */
@media (max-width: 359.98px) {
  .ask-toggle .ask-toggle-label { grid-template-columns: 0fr; }
  .ask-toggle .ask-toggle-label > span { padding-left: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-toggle-label, .ask-stars { transition: none; }
  .ask-toggle-label > span { filter: none; transform: none; transition: opacity 150ms ease; }
}
.ask-toggle:focus-visible, .ask button:focus-visible, .ask a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.ask {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 20;
  width: min(400px, 100%); display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line-soft);
  box-shadow: -1px 0 0 var(--shadow-2), -12px 0 32px -12px var(--shadow-1);
}
.ask[hidden] { display: none; }
.ask-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px 24px; }
.ask-title { font-size: 15px; line-height: 22px; letter-spacing: -0.02em; color: var(--black); }
.ask-actions { display: flex; gap: 4px; margin-right: -4px; }
.ask-icon {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.ask-icon[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .ask-icon:hover { background: var(--card); color: var(--black); } }

/* Messages scroll; with none yet, the greeting and suggestions sit at the bottom, next to the input. */
.ask-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 24px 8px; display: flex; flex-direction: column; }
.ask-log { display: flex; flex-direction: column; gap: 24px; margin-top: auto; }
.ask-log:empty { display: none; }
.ask-empty { margin-top: auto; }
.ask-empty[hidden] { display: none; }
.ask-hello { font-size: 20px; line-height: 26px; font-weight: 400; letter-spacing: -0.02em; color: var(--blue); font-variation-settings: "opsz" 32; }
.ask-suggestions { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 4px; }
.ask-suggestions button {
  display: flex; gap: 8px; width: 100%; padding: 6px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: var(--muted);
  transition: color 150ms ease;
}
.ask-suggestions span { flex: none; color: var(--line); transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .ask-suggestions button:hover { color: var(--black); }
  .ask-suggestions button:hover span { color: var(--blue); }
}

.ask-msg { font-size: 15px; line-height: 23px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ask-user { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--card); color: var(--ink); white-space: pre-wrap; }

/* An answer: the SamiLLM mark, then the text, then cards for the pages it mentions. */
.ask-assistant { display: flex; flex-direction: column; gap: 8px; color: var(--body); }
.ask-body:empty { display: none; }
.ask-body > * + * { margin-top: 10px; }
.ask-body strong { font-weight: 500; color: var(--ink); }
.ask-body ul { list-style: none; padding: 0; }
.ask-body li { position: relative; padding-left: 16px; }
.ask-body li + li { margin-top: 6px; }
.ask-body li::before { content: ""; position: absolute; left: 2px; top: 9.5px; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }
.ask-body a { color: var(--black); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .ask-body a:hover { text-decoration-color: currentColor; } }
.ask-error .ask-body { color: var(--muted); font-size: 14px; }

.ask-refs { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ask-card {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 12px; background: var(--bg); color: var(--black);
  /* The about page's logo-tile edge: a layered shadow instead of a hard grey border. */
  box-shadow: 0 0 0 1px var(--ring), 0 1px 2px -1px var(--shadow-1), 0 2px 4px 0 var(--shadow-2);
  transition: box-shadow 200ms ease, transform 160ms var(--ease-out);
}
.ask-card:active { transform: scale(0.98); }
.ask-card-img { flex: none; width: 64px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--tile); display: grid; place-items: center; outline: 1px solid var(--ring); outline-offset: -1px; }
.ask-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ask-card-mark { color: var(--blue); }
.ask-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ask-card-title { font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-card-meta { margin-top: 2px; font-size: 13px; line-height: 17px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-card-arrow { flex: none; color: var(--muted); transition: transform 200ms var(--ease-out), color 150ms ease; }
.ask-card-arrow svg { display: block; }
@media (hover: hover) and (pointer: fine) {
  .ask-card:hover { box-shadow: 0 0 0 1px var(--frame), 0 2px 4px -1px var(--shadow-1), 0 6px 12px -2px var(--shadow-1); }
  .ask-card:hover .ask-card-arrow { color: var(--blue); transform: translateX(2px); }
}
.ask-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* "Thinking": the SamiLLM sparkles trading places. Each one moves through the three
   spots of the mark in turn (big in the centre, small top right, small bottom left), growing and
   shrinking as it goes; they're a third of a cycle apart, so the mark is always whole between moves. */
.ask-mark { display: block; width: 18px; height: 18px; color: var(--blue); }
.ask-mark svg { display: block; width: 18px; height: 18px; overflow: visible; }
.ask-loader-star { transform-box: view-box; transform-origin: 0 0; transform: translate(46px, 46px); }
.ask-loader-star.s2 { transform: translate(59.65px, 32.35px) scale(0.35); }
.ask-loader-star.s3 { transform: translate(32.35px, 59.65px) scale(0.35); }
@media (prefers-reduced-motion: no-preference) {
  .is-live .ask-loader-star { animation: ask-trade 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite both; }
  .is-live .ask-loader-star.s2 { animation-delay: -0.6s; }
  .is-live .ask-loader-star.s3 { animation-delay: -1.2s; }
  @keyframes ask-trade {
    0%, 8%    { transform: translate(46px, 46px) scale(1); }
    33%, 41%  { transform: translate(59.65px, 32.35px) scale(0.35) rotate(90deg); }
    66%, 74%  { transform: translate(32.35px, 59.65px) scale(0.35) rotate(180deg); }
    100%      { transform: translate(46px, 46px) scale(1) rotate(270deg); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-live .ask-mark { animation: ask-fade 1.2s ease-in-out infinite alternate; }
  @keyframes ask-fade { from { opacity: 0.35; } }
}

.ask-form { padding: 8px 20px 20px; }
.ask-field {
  display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px;
  border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 150ms ease, background-color 150ms ease;
}
.ask-field:focus-within { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ask-field textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; padding: 3px 0;
  font: inherit; font-size: 15px; line-height: 22px; letter-spacing: -0.02em; color: var(--black); max-height: 120px;
}
.ask-field textarea::placeholder { color: var(--muted); }
.ask-send {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--black); color: var(--on-accent); cursor: pointer;
  transition: opacity 150ms ease, transform 160ms var(--ease-out);
}
.ask-send:disabled { opacity: 0.2; cursor: default; }
.ask-send:not(:disabled):active { transform: scale(0.92); }
.ask-note { margin-top: 8px; padding-left: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }

/* Tablet and phone: the sparkles sit at the right end of the top bar. */
@media (max-width: 1199.98px) {
  .ask-toggle { position: static; margin-right: -6px; }
}
/* Phone: the panel covers the screen and the page behind it stays put. */
@media (max-width: 809.98px) {
  /* Full screen; site.js sets height and top to the visible area while the keyboard is open. */
  .ask { width: 100%; height: 100dvh; bottom: auto; border-left: 0; box-shadow: none; overscroll-behavior: contain; }
  .ask-head { padding: 16px 16px 8px 20px; }
  .ask-scroll { padding: 8px 20px; }
  .ask-form { padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); }
  .ask-field textarea { font-size: 16px; }   /* 16px+ stops iOS zooming into the field */
  .ask-user { max-width: 90%; }
  html.ask-open, html.ask-open body { overflow: hidden; overscroll-behavior: none; }
}