@font-face { font-family: "Allura"; src: url("/fonts/allura-latin-400.woff2") format("woff2"); font-weight: 400; font-display: block; }

/* Tokens: docs/brand/design.md */
:root {
  color-scheme: light dark;
  --color-bg: #FAF8F5;
  --color-surface: #FFFFFF;
  --color-text: #1B1A19;
  --color-text-muted: #5E5A55;
  --color-border: #DDD8D0;
  --color-accent: #0F6B6B;
  --color-accent-hover: #0B5555;
  --color-accent-subtle: #E3F1EF;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-script: "Allura", "Snell Roundhand", "Apple Chancery", cursive;
  --text-sm: 0.875rem;
  --text-base: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
  --text-display: clamp(2.5rem, 1.75rem + 3.75vw, 4rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgb(27 26 25 / 0.06), 0 2px 8px rgb(27 26 25 / 0.05);
  --shadow-md: 0 2px 4px rgb(27 26 25 / 0.06), 0 8px 24px rgb(27 26 25 / 0.1);
  --gutter: var(--space-4);
  --section-pad: var(--space-8);
  --max: 72rem;
  --header-h: 4rem;
}
@media (min-width: 768px) { :root { --gutter: var(--space-6); --section-pad: var(--space-9); } }
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1B1A19; --color-surface: #252321; --color-text: #F2EFEA; --color-text-muted: #ADA79F;
    --color-border: #3A3734; --color-accent: #5CC8BE; --color-accent-hover: #7FD6CE;
    --color-accent-subtle: #17302E;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.25);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.4);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 1px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; -webkit-text-size-adjust: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-weight: 700; }
h2 { font-size: var(--text-2xl); line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
h2::before { content: ""; display: block; width: 2.5rem; height: 2px; margin-bottom: var(--space-4); background: var(--color-accent); }
h3 { font-size: var(--text-lg); line-height: 1.45; font-weight: 600; }
p { margin: 0; }
a { color: var(--color-accent); text-underline-offset: 0.15em; }
a:hover { color: var(--color-accent-hover); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
img, picture { display: block; max-width: 100%; height: auto; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
.nowrap { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--color-border); box-shadow: var(--shadow-sm); }
.label { justify-self: start; display: inline-block; font-size: var(--text-sm); line-height: 1.5; font-weight: 600; padding: 0.125rem var(--space-3); border-radius: var(--radius-full); background: var(--color-accent-subtle); color: var(--color-accent); }
/* Outline button: border, text, and icon all use currentColor */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-accent); border: 1px solid currentColor; text-decoration: none; font-weight: 600; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.btn:hover { color: var(--color-accent-hover); }
.btn svg { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .lineup .photo, .nav-desktop a, .menu-panel a { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: none; }
}

/* Header: sticky; inline links at 768px and up, <details> hamburger below */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); }
.logo { display: block; color: var(--color-text); }
.logo svg { display: block; height: 32px; width: auto; }
.logo .mark { color: var(--color-accent); }
.logo .word { fill: var(--color-text); }
.nav-desktop { display: none; gap: var(--space-5); position: relative; }
.nav-desktop a, .menu-panel a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.nav-desktop a:hover, .menu-panel a:hover { color: var(--color-accent); }
.nav-desktop a[aria-current], .menu-panel a[aria-current] { color: var(--color-accent); text-decoration: underline 2px; text-underline-offset: 0.45em; }
/* js/site.js adds one underline that slides between desktop links in step with the scroll */
.nav-desktop.has-indicator a[aria-current] { text-decoration: none; }
.nav-indicator { position: absolute; left: 0; bottom: -0.55em; width: 1px; height: 2px; background: var(--color-accent); transform-origin: 0 50%; pointer-events: none; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-text); border-radius: var(--radius-sm); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] .i-open, .menu:not([open]) .i-close { display: none; }
.menu-panel { position: absolute; inset-inline: 0; top: 100%; z-index: 10; background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: grid; padding-block: var(--space-2); }
.menu-panel a { padding: var(--space-3) var(--gutter); }
@media (min-width: 768px) { .nav-desktop { display: flex; } .menu { display: none; } }

/* <details> open animation (menu and bios): the content fades in and slides down a few pixels on open; close is instant.

   PREFERRED, NOT USED: grow and shrink the height on open AND close, commented out below.
   WHY NOT: the Nu HTML Checker (vnu.jar, latest build 2026-10-12) does not accept `interpolate-size` or
   `allow-discrete` yet and reports them as CSS errors. Restore this block (both @supports rules together)
   and delete the keyframe fallback once Nu accepts them.

@supports selector(::details-content) {
  .menu::details-content { position: absolute; inset-inline: 0; top: 100%; z-index: 10; }
  .menu-panel { position: static; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    details { interpolate-size: allow-keywords; }
    details::details-content { block-size: 0; overflow-y: clip; transition: block-size .25s ease, content-visibility .25s allow-discrete; }
    details[open]::details-content { block-size: auto; }
  }
}
*/
@media (prefers-reduced-motion: no-preference) {
  @keyframes slide-open { from { opacity: 0; transform: translateY(-0.5rem); } }
  .menu[open] .menu-panel, .bio[open] .bio-body { animation: slide-open .25s ease-out; }
}

/* Bio expander */
.bio summary { cursor: pointer; color: var(--color-accent); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-sm); }
.bio summary::-webkit-details-marker { display: none; }
.bio summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-radius: var(--radius-full); font-size: 0.875rem; line-height: 1; }
.bio[open] summary::before { content: "\2212"; }
.bio summary:hover { color: var(--color-accent-hover); }
.bio[open] .more, .bio:not([open]) .less { display: none; }
.bio-body { display: grid; gap: var(--space-4); padding-top: var(--space-4); max-width: 68ch; }

.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Hero: headline beside the team lineup */
/* overflow-x: clip keeps the page at viewport width while Allura loads. Until it arrives (font-display: block), the
   hidden script text is laid out in the wider fallback cursive, and nowrap pushes "Your AI Team." past the right
   edge at 360px; without the clip the whole page scrolls sideways for that moment, or for good if the font fails. */
.hero { padding-block: var(--space-7) var(--space-8); overflow-x: clip; }
@media (min-width: 768px) { .hero { padding-block: var(--space-8) var(--space-9); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); } }
.hero h1 { font-size: var(--text-display); line-height: 1.1; letter-spacing: -0.02em; }
.hero h1 .line { display: block; }
.hero h1 .line + .line { margin-top: 0.15em; }
/* Allura has one weight; the stroke thickens it without a synthesized bold */
.hero h1 .script { font-family: var(--font-script); font-weight: 400; -webkit-text-stroke: 0.024em currentColor; font-size: 1.3em; white-space: nowrap; line-height: 0.8; letter-spacing: 0; color: var(--color-accent); padding-inline: 0.04em; }
.hero .sub { font-size: var(--text-lg); line-height: 1.45; color: var(--color-text-muted); max-width: 40ch; margin-top: var(--space-5); }
.hero .status { font-weight: 600; max-width: 40ch; margin-top: var(--space-4); }
.hero .btn { margin-top: var(--space-6); }
/* Photos wrap in stages as the lineup's width allows, 3+3+1, then 4+3, then 7 in a row, and grow to fill the width
   between stages. Half-column offsets center the short rows. Thresholds keep each photo at least about 5.5rem wide. */
.lineup { list-style: none; margin: 0; padding: var(--space-3); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@media (min-width: 640px) { .lineup { padding: var(--space-5); } }
.lineup li { grid-column: span 2; }
.lineup li:last-child { grid-column: 3 / span 2; }
/* Lineup stages by viewport width (media queries).

   PREFERRED, NOT USED: stage by the lineup box's own width with container queries, commented out below. They need
   no arithmetic and survive layout changes.
   WHY NOT: the Nu HTML Checker (vnu.jar, latest build 2026-10-12) does not accept `container`, `container-type`,
   `container-name`, or `@container` yet and reports them as CSS errors. Restore this block and delete the two
   media queries below once Nu accepts them.

.lineup-box { container: lineup / inline-size; }
@container lineup (min-width: 26rem) {
  .lineup { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .lineup li:last-child { grid-column: span 2; }
  .lineup li:nth-child(5) { grid-column: 2 / span 2; }
}
@container lineup (min-width: 46rem) {
  .lineup { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .lineup li, .lineup li:nth-child(5), .lineup li:last-child { grid-column: auto; }
}

   Media query widths are the viewport widths at which the lineup box reaches 26rem (416px) and 46rem (736px):
   - under 900px the box is the viewport minus two gutters (16px each under 768px, 32px each from 768px):
     416px at 448px, 736px at 800px;
   - from 900px the hero has two columns, so the box is (min(viewport, 72rem) - 2 x 32px gutter - 64px gap) / 2:
     416px at 960px; it never reaches 736px (512px at most).
   Recompute if --gutter, --max, the .hero-grid 900px breakpoint, or its gap change. On desktop browsers with
   classic scrollbars, viewport width includes the scrollbar, so each stage starts about 15px sooner than the
   container query would.
*/
@media (448px <= width < 800px), (width >= 960px) {
  .lineup { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .lineup li:last-child { grid-column: span 2; }
  .lineup li:nth-child(5) { grid-column: 2 / span 2; }
}
@media (800px <= width < 900px) {
  .lineup { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .lineup li, .lineup li:nth-child(5), .lineup li:last-child { grid-column: auto; }
}
.lineup a { display: grid; gap: var(--space-2); text-decoration: none; color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; font-weight: 500; }
.lineup a:hover { color: var(--color-accent); }
@media (prefers-reduced-motion: no-preference) {
  .lineup a:hover .photo { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  .hero-grid > div:first-child, .lineup li { animation: rise .7s ease-out both; }
  .lineup li:nth-child(1) { animation-delay: .1s; } .lineup li:nth-child(2) { animation-delay: .16s; }
  .lineup li:nth-child(3) { animation-delay: .22s; } .lineup li:nth-child(4) { animation-delay: .28s; }
  .lineup li:nth-child(5) { animation-delay: .34s; } .lineup li:nth-child(6) { animation-delay: .4s; }
  .lineup li:nth-child(7) { animation-delay: .46s; }
}

/* What we build */
.band { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.services { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.services article { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.services h3 { margin-bottom: var(--space-1); }

/* How we work: sticky intro beside timeline steps */
.how { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .how { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); } .how-intro { position: sticky; top: calc(var(--header-h) + var(--space-6)); align-self: start; } }
.how-intro { display: grid; gap: var(--space-4); }
.how-intro p { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); max-width: 40ch; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4) var(--space-5); padding-bottom: var(--space-7); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: calc(1.25rem - 0.5px); top: 3.25rem; bottom: 0.75rem; width: 1px; background: var(--color-border); }
.timeline li:last-child::before { display: none; }
.timeline .n { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); color: var(--color-accent); background: var(--color-accent-subtle); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.timeline .body { display: grid; gap: var(--space-2); padding-top: 0.45rem; max-width: 60ch; }

/* Team: two-column roster */
.members { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
@media (min-width: 960px) { .members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); } }
.member { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start; scroll-margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.member:target { border-top-color: var(--color-accent); }
@media (min-width: 640px) { .member { grid-template-columns: 7.5rem minmax(0, 1fr); } }
.member .text { display: grid; gap: var(--space-3); min-width: 0; }
.prompt-tag { font-weight: 600; }
.member .head { display: grid; gap: var(--space-1); }
.member .title { color: var(--color-text-muted); line-height: 1.45; }
.member .email { font-size: var(--text-sm); overflow-wrap: anywhere; }

/* Closing contact band */
.closing { background: var(--color-accent-subtle); }
.closing-inner { display: grid; gap: var(--space-5); align-items: center; }
.closing-inner .copy { display: grid; gap: var(--space-3); max-width: 52ch; }
@media (min-width: 860px) { .closing-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); } }

/* 404 */
.notfound { display: grid; gap: var(--space-5); max-width: 68ch; }
.notfound h1 { font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.01em; }