/* Kairos public site: ink and gold on parchment (brand handoff, 2026-10-06).
   Plain CSS, self-hosted fonts, no third-party anything. The hero's halftone
   is drawn by dither.js over a pre-rendered fallback. */
@font-face { font-family: Jost; src: url('fonts/Jost-Variable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/CormorantGaramond-Italic-Variable.woff2') format('woff2'); font-style: italic; font-weight: 300 700; font-display: swap; }
:root {
  color-scheme: light;
  --bg: #F3EADB; --panel: #FBF6EE; --sunk: #EDE2D0;
  --text: #3A2A20; --dim: #6B5646; --faint: #745F4D; --accent: #815E1E;
  --gold: #B8893B; --gold-hi: #D9B260;
  --night: #2A1F18; --night-text: #F3EADB; --night-dim: #D2C3AF;
  --border: rgba(58,42,32,.13); --strong: rgba(58,42,32,.24); --hairline: rgba(184,137,59,.55);
  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans: Jost, 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --nav-h: 72px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--sunk); color: var(--text); }
.wrap { width: min(1184px, calc(100% - 64px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 999px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* -- navigation: over the hero at first, solid once the page scrolls -- */
.site-nav { position: sticky; top: 0; z-index: 30; height: var(--nav-h); transition: background 220ms ease, border-color 220ms ease; border-bottom: 1px solid transparent; }
.site-nav.scrolled, .site-nav.open { background: rgba(251,246,238,.94); border-color: var(--border); backdrop-filter: blur(14px); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; width: 132px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a { font-size: 13px; color: var(--text); transition: color 160ms ease; }
.nav-links a:hover { color: var(--accent); }
.menu-button { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); cursor: pointer; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 16px; height: 1.5px; margin: 0 auto; background: var(--text); border-radius: 2px; transition: transform 200ms var(--ease), opacity 160ms ease; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -5px; } .menu-icon::after { top: 5px; }
.site-nav.open .menu-icon { background: transparent; }
.site-nav.open .menu-icon::before { transform: translateY(5px) rotate(45deg); }
.site-nav.open .menu-icon::after { transform: translateY(-5px) rotate(-45deg); }

/* -- buttons -- */
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--strong); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background 180ms ease, color 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease; }
.button.primary { color: var(--panel); background: var(--text); border-color: var(--text); }
.button.primary:hover { background: #543D2E; box-shadow: 0 6px 18px rgba(58,42,32,.18); transform: translateY(-1px); }
.button.secondary { color: var(--text); background: rgba(251,246,238,.6); border-color: var(--hairline); }
.button.secondary:hover { background: var(--panel); }
.button:active { transform: translateY(1px); }
.nav-cta { padding: 9px 16px; font-size: 12px; }

/* -- type -- */
.eyebrow, .section-number { font: 500 11px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0; }
h1, h2, .idea-text { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
h1 { font-size: clamp(50px, 7vw, 104px); line-height: .98; margin: 18px 0 22px; max-width: 760px; }
/* The second clause is the lighter echo, always on its own line. */
h1 span, h2 span { display: block; color: var(--faint); }

/* -- hero -- */
.hero { position: relative; margin-top: calc(-1 * var(--nav-h)); padding-top: calc(var(--nav-h) + 96px); isolation: isolate; }
/* The art grows with the page width, so the whole figure shows down to the
   chest (site.js crops the empty sky above it), and fades out softly into
   the page with no edge. Past 2000 px it stops growing, so the figure keeps
   its place beside the text, and its sides fade too. */
.hero-art { --fade-down: linear-gradient(180deg, #000 62%, rgba(0,0,0,.45) 82%, transparent 100%);
  position: absolute; inset: 0 0 auto; height: clamp(800px, 50vw, 1000px); z-index: -1; overflow: hidden; background: var(--bg) url('img/hero-dither.webp') 62% top / auto no-repeat;
  -webkit-mask-image: var(--fade-down); mask-image: var(--fade-down); }
@media (min-width: 2001px) {
  .hero-art { left: calc(50% - 1000px); right: auto; width: 2000px;
    -webkit-mask-image: var(--fade-down), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: var(--fade-down), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}
.hero-art.is-dithered { background-image: none; }
.dither-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A parchment wash on the text side, and along the top behind the
   navigation, keeps every line readable over the dots. */
.hero-art::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(243,234,219,.92) 0, rgba(243,234,219,0) 150px),
  linear-gradient(90deg, rgba(243,234,219,.9) 0%, rgba(243,234,219,.66) 30%, rgba(243,234,219,0) 48%); }
/* Room under the text so the figure's head, arm and scales clear the demo window. */
.hero-inner { padding-bottom: clamp(72px, 12vw - 40px, 200px); }
.hero-description { color: var(--dim); font-size: 17px; line-height: 1.75; margin: 0 0 30px; max-width: 520px; }
.release-line { color: var(--faint); font-size: 12px; margin: 18px 0 0; }
/* The live demo, framed as a window. */
.demo-window { margin: 0; }
.film-window { margin: 0; }
.film-window video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border: 1px solid var(--strong); border-radius: 16px; background: var(--sunk); box-shadow: 0 30px 80px rgba(58,42,32,.2); }
.demo-chrome { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border: 1px solid var(--strong); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--sunk); }
.demo-dots { display: flex; gap: 6px; }
.demo-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(58,42,32,.18); }
.demo-title { font-size: 12px; color: var(--dim); }
.demo-open { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text); }
.demo-open:hover { color: var(--accent); }
.demo-window iframe { display: block; width: 100%; aspect-ratio: 16/10; min-height: 520px; border: 1px solid var(--strong); border-radius: 0 0 16px 16px; background: var(--bg); box-shadow: 0 30px 80px rgba(58,42,32,.2); }
figcaption { display: flex; justify-content: space-between; gap: 16px; color: var(--faint); font-size: 12px; padding: 14px 2px; }

/* -- the name -- */
.idea { display: grid; grid-template-columns: 1.35fr 1fr; gap: 72px; align-items: center; padding-block: 120px 40px; }
.idea-text { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.22; margin: 20px 0 0; }
.idea-text em { font-style: normal; }
.idea-text span { color: var(--faint); }
.idea-figure { margin: 0; }
.idea-figure img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--hairline); }

/* -- sections -- */
.section { padding-block: 104px; }
.section-heading { margin-bottom: 48px; max-width: 760px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1.06; margin: 16px 0 0; }
.section-heading > p:last-child:not(.eyebrow) { color: var(--dim); font-size: 15px; margin: 18px 0 0; }

/* -- features: six numbered cards, the first in ink -- */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feature { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); overflow: hidden; transition: border-color 180ms ease, transform 220ms var(--ease); }
.feature:hover { border-color: var(--hairline); transform: translateY(-2px); }
.feature-mark { font: 500 12px var(--sans); color: var(--accent); letter-spacing: .08em; }
.feature h3 { font-weight: 500; font-size: 21px; margin: 18px 0 10px; }
.feature p { font-size: 15px; color: var(--dim); margin: 0 0 28px; max-width: 520px; }
/* Each image is a crop of the part of the screen that shows its feature,
   shown whole: height auto overrides the tag's height attribute, which
   would otherwise force a tall box and zoom the picture to fill it. */
.feature img { display: block; width: 100%; height: auto; margin-top: auto; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(58,42,32,.08); }
.feature.featured { background: var(--night); border-color: var(--night); color: var(--night-text); }
.feature.featured .feature-mark { color: var(--gold-hi); }
.feature.featured p { color: var(--night-dim); }
.feature.featured img { border-color: rgba(243,234,219,.16); }

/* -- everything: the full capability list -- */
.everything-section { background: var(--sunk); border-block: 1px solid var(--border); }
.everything-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; }
.capability h3 { font-size: 15px; font-weight: 500; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.capability ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.capability li { position: relative; padding-left: 18px; font-size: 14px; color: var(--dim); line-height: 1.5; }
/* The gold point: the one gilded mark. */
.capability li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* -- tour -- */
.tour { display: grid; gap: 96px; }
.tour-row { display: grid; grid-template-columns: 1fr 1.8fr; gap: 60px; align-items: center; }
.tour-row.reverse { grid-template-columns: 1.8fr 1fr; }
.tour-row.reverse .tour-copy { order: 2; }
.tour-copy h3 { font-family: var(--serif); font-style: italic; font-size: 38px; font-weight: 500; line-height: 1.1; margin: 14px 0 16px; }
.tour-copy p { font-size: 15px; color: var(--dim); margin: 0; }
.tour-copy .detail { color: var(--faint); font-size: 14px; margin-top: 16px; }
.screenshot { display: block; border: 1px solid var(--strong); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(58,42,32,.12); transition: border-color 160ms ease; }
.screenshot:hover { border-color: var(--gold); }
.screenshot img { display: block; width: 100%; height: auto; }

/* -- the one dark band -- */
.principles-band { background: var(--night); color: var(--night-text); padding-block: 88px; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.principles .section-number { color: var(--night-dim); }
.principles h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 32px; line-height: 1.1; margin: 16px 0 12px; }
.principles p { color: var(--night-dim); font-size: 15px; margin: 0; max-width: 340px; }

/* -- download -- */
.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.download-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.download-card.recommended { border-color: var(--hairline); box-shadow: 0 14px 40px rgba(58,42,32,.1); }
.download-card h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 32px; line-height: 1; margin: 0; }
.download-card .meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 10px 0 14px; }
.download-card > p:not(.meta):not(.file) { font-size: 14px; color: var(--dim); margin: 0 0 24px; }
.download-card .button { margin-top: auto; }
.download-card .file { font-size: 12px; color: var(--faint); margin: 12px 0 0; overflow-wrap: anywhere; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; counter-reset: steps; list-style: none; padding: 0; margin: 64px auto 0; max-width: 940px; }
.steps li { counter-increment: steps; border-top: 1px solid var(--hairline); padding-top: 22px; }
.steps li::before { content: "0" counter(steps); font: 500 12px var(--sans); color: var(--accent); letter-spacing: .08em; }
.steps h3 { font-weight: 500; font-size: 16px; margin: 10px 0 6px; }
.steps p { font-size: 14px; color: var(--dim); margin: 0; }
.install-note { max-width: 760px; margin: 44px auto 0; color: var(--dim); font-size: 14px; border-top: 1px solid var(--border); padding-top: 18px; }
.install-note summary { cursor: pointer; text-align: center; color: var(--text); font-weight: 500; }
.install-note p { margin: 16px 0 0; }

/* -- questions -- */
.faq-section { background: var(--sunk); border-block: 1px solid var(--border); }
.faq { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--strong); }
.faq details { border-bottom: 1px solid var(--strong); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; cursor: pointer; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 50%; color: var(--dim); font-weight: 400; transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 4px 24px; color: var(--dim); font-size: 15px; max-width: 680px; }
/* Answers open and close smoothly where the browser can animate to auto
   height (::details-content); elsewhere they snap, as before. */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size 280ms var(--ease), content-visibility 280ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* Scroll-linked flow (David, 2026-10-07): each block's fade and rise follow
   its own place in the window, not a timer. It starts as it enters at the
   bottom and settles about a quarter of the way up, so it moves as fast as
   the scroll, stops when the scroll stops and eases back on the way up.
   Blocks start at 15% opacity, so the page never looks empty. Cards in a row
   start a little after the one to their left, so a row ripples in. The big
   images drift slightly slower than the page. `translate` and `scale` are
   used rather than `transform`, so the cards' hover lift still adds on.
   Browsers without scroll-driven animations show everything still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.section-heading, .idea > div, .feature, .capability, .tour-copy, .principles > div, .download-card, .steps li, .faq, .install-note) {
      animation: flow-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%;
    }
    .feature-grid > :nth-child(2n), :is(.everything-grid, .principles, .download-grid, .steps) > :nth-child(3n+2) { animation-range: entry 6% cover 32%; }
    :is(.everything-grid, .principles, .download-grid, .steps) > :nth-child(3n+3) { animation-range: entry 12% cover 36%; }
    :is(.screenshot, .idea-figure) { animation: flow-drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes flow-in { from { opacity: .15; translate: 0 24px; scale: .985; } }
@keyframes flow-drift { from { translate: 0 22px; } to { translate: 0 -22px; } }
.dither-cover { pointer-events: none; }

/* -- closing -- */
.closing { text-align: center; padding-block: 128px; background: linear-gradient(rgba(243,234,219,.35), rgba(243,234,219,.55)), url('img/sky.webp') center / cover no-repeat; border-bottom: 1px solid var(--border); }
.closing-mark { display: block; margin: 0 auto 6px; }
.closing h2 { font-size: clamp(44px, 6vw, 80px); line-height: 1.02; margin: 0 0 32px; }
.closing .actions { justify-content: center; }

/* -- footer -- */
.site-footer { padding-block: 64px 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer-brand p { color: var(--faint); font-family: var(--serif); font-style: italic; font-size: 19px; margin: 14px 0 0; }
.footer-grid h2 { font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 4px 0 14px; }
.footer-grid a:not(.brand) { display: block; color: var(--dim); font-size: 14px; margin-bottom: 8px; }
.footer-grid a:not(.brand):hover { color: var(--text); }
.footer-fine { grid-column: 1 / -1; color: var(--faint); font-size: 12px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--border); }

/* -- not found -- */
.not-found { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 32px; background: linear-gradient(rgba(243,234,219,.4), rgba(243,234,219,.7)), url('img/sky.webp') center / cover no-repeat; }
.not-found h1 { margin-inline: auto; }
.not-found p { color: var(--dim); margin: 0 0 28px; }
.not-found .actions { justify-content: center; }

@media (max-width: 960px) {
  .wrap { width: calc(100% - 40px); }
  .menu-button { display: grid; place-items: center; }
  .nav-cta { display: none; }
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 18px; background: rgba(251,246,238,.98); border-bottom: 1px solid var(--border); box-shadow: 0 18px 40px rgba(58,42,32,.12); }
  .site-nav.open .nav-links { display: flex; }
  .nav-links a { padding: 13px 0; font-size: 16px; border-bottom: 1px solid var(--border); }
  .nav-links a:last-child { border-bottom: 0; }
  .hero { padding-top: calc(var(--nav-h) + 56px); }
  .hero-art::after { background: linear-gradient(180deg, rgba(243,234,219,.9) 0%, rgba(243,234,219,.78) 55%, rgba(243,234,219,.35) 100%); }
  .idea { grid-template-columns: 1fr; gap: 40px; padding-block: 80px 20px; }
  .idea-figure { max-width: 480px; }
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .everything-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-row, .tour-row.reverse { grid-template-columns: 1fr; gap: 26px; }
  .tour-row.reverse .tour-copy { order: 0; }
  .tour { gap: 64px; }
  .principles { grid-template-columns: 1fr; gap: 40px; }
  .section { padding-block: 72px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :root { --nav-h: 64px; }
  .brand img { width: 112px; }
  h1 { font-size: clamp(44px, 13vw, 60px); }
  .hero-description { font-size: 16px; }
  .hero-inner { padding-bottom: 44px; }
  .actions .button { flex: 1 1 auto; }
  .demo-window iframe { aspect-ratio: auto; height: 640px; min-height: 0; }
  figcaption { flex-direction: column; gap: 2px; font-size: 11px; }
  .feature-grid, .download-grid, .everything-grid, .steps { grid-template-columns: 1fr; }
  .feature { padding: 24px; }
  .section { padding-block: 60px; }
  .tour-copy h3 { font-size: 30px; }
  .principles-band { padding-block: 64px; }
  .closing { padding-block: 88px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* -- the mascot (Ajar; the app's static/js/mascot.js and css/mascot.css) -- */
:root {
  --point: var(--gold); --bg-panel-solid: var(--bg); --text-dim: var(--dim); --text-faint: var(--faint);
  --danger: #A8432F; --shade-rgb: 58, 42, 32; --ink-rgb: 58, 42, 32;
  --k-gold-hi: #D9B260; --k-rose: #D99A92; --k-ink: #3A2A20;
  --m-body-d9b260: #D9B260; --m-body-b9d2e3: #B9D2E3; --m-body-e8c39e: #E8C39E;
  --m-body-d99a92: #D99A92; --m-body-b5c7a5: #B5C7A5; --m-body-cdbfd9: #CDBFD9;
}
.hero-inner { position: relative; }
.hero-mascot { width: 96px; height: 96px; margin: 0 0 6px -10px; }
.hero-mascot kairos-mascot { width: 100%; height: 100%; }
.mascot-strip { display: none; }
.has-mascot .mascot-strip { display: block; }
.mascot-lede { max-width: 640px; margin: 0 auto 32px; text-align: center; color: var(--dim); }
.mascot-states, .mascot-bots { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 16px; text-align: center; font-size: 14px; color: var(--dim); }
.mascot-states { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mascot-bots { grid-template-columns: repeat(4, minmax(0, 120px)); justify-content: center; margin-top: 28px; }
.mascot-states li, .mascot-bots li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mascot-slot { display: block; width: 104px; height: 104px; }
.mascot-slot kairos-mascot { width: 100%; height: 100%; }
@media (max-width: 760px) {
  .mascot-states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mascot-bots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mascot-slot { width: 84px; height: 84px; }
  .hero-mascot { width: 72px; height: 72px; }
}