/* ---------------------------------------------------------------
   Design tokens
--------------------------------------------------------------- */
:root {
  /* Colors */
  --canvas: #F0E8E0;
  --canvas-2: #E9E1D6;
  --ink: #20242B;
  --ink-dim: rgb(32 36 43 / 0.22);
  --surface-dark: #161B22;
  --on-dark: #F0E8E0;
  /* The single functional accent — the measurement system's indicator.
     Now the brand orange, sampled exactly from the logo mark
     (Full logo horizontal.svg → #F87036). Flows to the Method fill,
     the active tick and — via --accent-focus — the focus rings. */
  --accent: #F87036;
  /* --accent on cream is 2.35:1 — fine for the brand fill, but under the
     3:1 non-text minimum a keyboard focus ring needs. This is the same
     orange deepened to 3.33:1 on cream, used for focus outlines only. */
  --accent-focus: #D9531A;

  /* Fonts */
  --serif: 'Newsreader', Georgia, serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;

  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --s11: 192px;

  /* Motion */
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 150ms;
  --dur-ui: 250ms;
  --dur-swap: 900ms;
  --period-ambient: 18s;
  --scrub-floor: 0.22;

  /* Layout — a wide content frame, Distyl-style: on screens up to
     ~1440 nothing changes (padding alone), but wider monitors use the
     extra width instead of parking it in dead side margins. */
  --content-max: 1840px;
  --body-measure: 68ch;
}

/* ---------------------------------------------------------------
   Reset
--------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p {
  margin: 0;
}

/* ---------------------------------------------------------------
   Base
--------------------------------------------------------------- */
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
p {
  font-size: 18px;
  line-height: 1.6;
}

.mono-label {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------
   Layout — full-bleed section backgrounds, constrained content
--------------------------------------------------------------- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 600px) {
  .container {
    padding-inline: 48px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding-inline: 80px;
  }
}

/* ---------------------------------------------------------------
   Registration frame — decorative, fixed
--------------------------------------------------------------- */
.registration-frame {
  position: fixed;
  inset: 16px;
  border: 1px solid var(--rf-line, rgb(32 36 43 / 0.18));
  pointer-events: none;
  z-index: 40;
}

/* The twin sits above the ink frame and is clipped to the footer, so
   the hairline stays legible as the page crosses onto the dark band. */
.registration-frame--dark {
  --rf-line: rgb(240 232 224 / 0.22);
  --rf-tick: rgb(240 232 224 / 0.45);
  z-index: 41;
  clip-path: inset(100% 0 0 0);
}

/* Corner ticks: two offset hairlines per corner, drawn as crop marks
   rather than a closed L — the registration-mark reading. */
.rf-tick::before,
.rf-tick::after {
  content: '';
  position: absolute;
  background: var(--rf-tick, rgb(32 36 43 / 0.35));
}

.rf-tick::before {
  width: 8px;
  height: 1px;
}

.rf-tick::after {
  width: 1px;
  height: 8px;
}

.rf-tl::before { top: -1px; left: -4px; }
.rf-tl::after  { top: -4px; left: -1px; }
.rf-tr::before { top: -1px; right: -4px; }
.rf-tr::after  { top: -4px; right: -1px; }
.rf-bl::before { bottom: -1px; left: -4px; }
.rf-bl::after  { bottom: -4px; left: -1px; }
.rf-br::before { bottom: -1px; right: -4px; }
.rf-br::after  { bottom: -4px; right: -1px; }

@media (min-width: 1600px) {
  .registration-frame {
    inset: 24px;
  }
}

@media (max-width: 899px) {
  .registration-frame {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Sticky nav
--------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  height: 64px;
}

.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgb(32 36 43 / 0.15);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-swift);
}

.site-header.is-scrolled::after {
  opacity: 1;
}

.nav {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-wordmark {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* The real wordmark-with-mark lockup. Sized to sit clearly in the 64px
   nav — its wordmark reads a step larger than the mono nav links,
   vertically centred by the flex row, left-aligned. The SVG's own
   1045.5×267 viewBox holds the aspect, so only height is set — no
   stretch. */
.nav-logo {
  display: inline-flex;
  align-items: center;
}

.nav-logo-img {
  display: block;
  height: 52px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-links a {
  color: var(--ink);
  text-decoration: none;
}

/* Below the desktop breakpoint the five nav items cannot sit on one
   row without overflowing. The section links live in the footer
   sitemap too, so the header keeps only the wordmark and the CTA
   rather than introducing a menu pattern that isn't specified yet. */
@media (max-width: 899px) {
  .nav-links a:not(.bracket-cta) {
    display: none;
  }

  .nav-wordmark {
    font-size: 13px;
  }

  /* At 44px the wide lockup would butt against the CTA on a phone;
     step it down so the mark keeps clear space beside the CTA. */
  .nav-logo-img {
    height: 32px;
  }
}

/* ---------------------------------------------------------------
   Bracket CTA — reusable component (nav, Method, Close)
--------------------------------------------------------------- */
.bracket-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--s4);
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
}

.bracket-cta::before,
.bracket-cta::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  transition: transform var(--dur-micro) var(--ease-swift);
}

.bracket-cta::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.bracket-cta::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

.bracket-cta:hover::before {
  transform: translate(-3px, -3px);
}

.bracket-cta:hover::after {
  transform: translate(3px, 3px);
}

.bracket-cta:active::before {
  transform: translate(1px, 1px);
  transition-duration: 60ms;
  transition-timing-function: linear;
}

.bracket-cta:active::after {
  transform: translate(-1px, -1px);
  transition-duration: 60ms;
  transition-timing-function: linear;
}

.bracket-cta:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Section 01 — Hero
--------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto 1fr;
  row-gap: var(--s9);
  /* Fill the viewport below the 64px sticky header, so the bottom
     support line lands on the real fold rather than 64px under it. */
  min-height: calc(100vh - 64px);
}

/* At desktop widths the headline sets on three single lines, so the
   headline column is sized to its own content and the object takes
   whatever is left. Headline wins; the object shrinks. */
@media (min-width: 1200px) {
  .hero {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s9);
  }
}

.hero-h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  /* Sit high, close to the wordmark — the Distyl top/bottom split.
     Was 18vh, which dropped the title to ~24vh of the viewport. */
  padding-top: clamp(48px, 7vh, 96px);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.beat {
  display: block;
  max-width: 26ch;
}

@media (min-width: 1200px) {
  .beat {
    max-width: none;
    white-space: nowrap;
  }
}

.hero-support {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  padding-bottom: clamp(48px, 10vh, 120px);
  max-width: 40ch;
}

.hero-object {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: stretch;
  text-align: center;
}

.wireframe-stage {
  width: min(100%, 600px);
  aspect-ratio: 1;
  margin-inline: auto;
  pointer-events: none;
}

/* The projection is computed in JS (js/main.js); strokes inherit ink
   via currentColor and are depth-cued per edge. */
.wireframe-svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--ink);
}

.wireframe-caption {
  margin-top: -24px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgb(32 36 43 / 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.hero-object .pending-note {
  margin-top: var(--s2);
  white-space: nowrap;
}

@media (max-width: 899px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-block: var(--s8);
    gap: var(--s7);
  }

  .hero-h1 {
    padding-top: 0;
  }

  .hero-support {
    padding-bottom: 0;
    max-width: none;
  }

  .hero-object {
    width: 100%;
  }

  .wireframe-stage {
    width: min(64vw, 520px);
  }
}

/* ---------------------------------------------------------------
   Shared underline-draw hover (nav, writing rows, footer links)
--------------------------------------------------------------- */
.underline-draw {
  position: relative;
}

.underline-draw::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease-swift);
}

.nav-links a.underline-draw:hover::after,
.nav-links a.underline-draw:focus-visible::after,
.footer-links a.underline-draw:hover::after,
.footer-links a.underline-draw:focus-visible::after,
.footer-legal a.underline-draw:hover::after,
.footer-legal a.underline-draw:focus-visible::after {
  transform: scaleX(1);
}

/* WRITING rows removed 2026-07-21 — restore with Section 07. Do not delete.
.writing-row:hover .row-title.underline-draw::after,
.writing-row:focus-visible .row-title.underline-draw::after {
  transform: scaleX(1);
}
*/

/* ---------------------------------------------------------------
   Scrub engine — [data-beat] baseline (see js/main.js)
--------------------------------------------------------------- */
[data-beat] {
  opacity: var(--scrub-floor);
  transform: translateY(12px);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-beat] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
   Pinned-section pattern (Tension, Belief, Close)
--------------------------------------------------------------- */
.pin-section {
  position: relative;
}

.pin-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pin-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pin-tension {
  height: 230vh;
}

.pin-belief {
  height: 270vh;
}

.pin-close {
  height: 205vh;
}

/* Statements are one voice: the two beats of a section read as a
   single sentence broken across the pause, so they set as consecutive
   lines with no gap between them. */
.statement-beat {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 22ch;
}

.pin-belief .statement-beat {
  max-width: 24ch;
}

.beat-support {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  max-width: 52ch;
  text-align: center;
  margin-top: var(--s7);
}

.beat-paragraph {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.7;
  max-width: 58ch;
  text-align: center;
}

/* First paragraph sits a full beat below the statement; the rest are
   a paragraph-space apart. */
.statement-beat + .beat-paragraph {
  margin-top: 56px;
}

.beat-paragraph + .beat-paragraph {
  margin-top: 28px;
}

.beat-paragraph em {
  font-style: italic;
}

.pin-close .bracket-cta {
  margin-top: var(--s8);
  font-size: 15px;
  padding: var(--s3) 20px;
}

/* Brackets are inset from the tap target so they read as marks on the
   word, not a box around empty space. */
.pin-close .bracket-cta::before,
.pin-close .bracket-cta::after {
  width: 9px;
  height: 9px;
}

.pin-close .bracket-cta::before {
  top: 5px;
  left: 2px;
}

.pin-close .bracket-cta::after {
  bottom: 5px;
  right: 2px;
}

/* A word-filled paragraph carries its reveal in its groups, so the
   block itself is never dimmed or displaced. */
[data-words] {
  opacity: 1 !important;
  transform: none !important;
}

.word-group {
  will-change: opacity;
}

/* ---------------------------------------------------------------
   Section 04 — Method (the carousel)
   The only self-advancing element on the site. Timings are
   transcribed from the approved prototype: 9.5s dwell, 900ms swap
   on --ease-out-strong, 250ms tick travel on --ease-swift.
--------------------------------------------------------------- */
.method {
  padding-block: var(--s10);
  scroll-margin-top: 64px;
}

.method-inner {
  display: flex;
  gap: 8%;
  align-items: flex-start;
}

.method-rail-col {
  flex: 0 0 34%;
}

.method-card-col {
  flex: 1;
  min-width: 0;
}

.method-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgb(32 36 43 / 0.6);
}

.method-rail {
  position: relative;
  margin-top: var(--s7);
  padding-left: var(--s5);
}

/* The accent tick — the measurement system's marker for "you are
   here". Slides between steps rather than blinking on and off. */
.rail-tick {
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 3px;
  background: var(--accent);
  transition: top 250ms var(--ease-swift);
}

.rail-item {
  display: block;
  width: 100%;
  padding: 14px 0 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
}

.rail-item:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 3px;
}

.rail-label {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.45;
  transition: opacity 250ms var(--ease-swift);
}

.rail-item[aria-selected='true'] .rail-label {
  opacity: 1;
}

/* The groove is a quiet 3px ruler; the accent fill riding it is the
   thing meant to be seen. */
.rail-track {
  display: block;
  position: relative;
  margin-top: var(--s3);
  height: 3px;
  background: rgb(32 36 43 / 0.10);
}

/* Width is driven per-frame from the dwell clock in js/main.js, so a
   paused carousel shows a frozen bar rather than a lie. */
.rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--accent);
}

.method-stage {
  position: relative;
  min-height: 380px;
}

.method-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
}

.card-numeral {
  position: absolute;
  top: -20px;
  left: -4px;
  font-family: var(--mono);
  font-size: 72px;
  line-height: 1;
  color: rgb(32 36 43 / 0.12);
}

.card-title {
  position: relative;
  margin: 64px 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.1;
}

.card-body {
  margin: var(--s5) 0 0;
  max-width: 48ch;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
}

.method-cta {
  margin-top: var(--s6);
  padding: 14px 18px;
}

.method-cta::before,
.method-cta::after {
  width: 9px;
  height: 9px;
}

.method-cta::before { top: 2px; }
.method-cta::after { bottom: 2px; }

/* Single column: the rail becomes a horizontal row above the card and
   the sliding tick gives way to the fill bar, which already reads as
   an underline under the active label. */
@media (max-width: 900px) {
  .method-inner {
    flex-direction: column;
    gap: var(--s7);
  }

  .method-rail-col,
  .method-card-col {
    flex: 1 1 auto;
    width: 100%;
  }

  .method-rail {
    display: flex;
    gap: var(--s4);
    margin-top: var(--s6);
    padding-left: 0;
  }

  .rail-tick {
    display: none;
  }

  .rail-item {
    flex: 1;
    padding-top: 0;
  }

  .rail-label {
    display: block;
    font-size: 12px;
    white-space: nowrap;
  }

  .method-stage {
    min-height: 420px;
    touch-action: pan-y;
  }

  .card-title {
    margin-top: 56px;
    font-size: 36px;
  }
}

@media (max-width: 599px) {
  .rail-label {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .card-numeral {
    font-size: 56px;
  }
}

/* ---------------------------------------------------------------
   Section 05 — Testimonial band
   The calmest section on the page: a single ledger row between
   chapters, hairline-ruled, static on arrival. No motion.
--------------------------------------------------------------- */
.testimonial {
  border-top: 1px solid rgb(32 36 43 / 0.15);
  border-bottom: 1px solid rgb(32 36 43 / 0.15);
}

.testimonial-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s7);
  padding-block: var(--s8);
}

.testimonial-quote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  max-width: 64ch;
}

.testimonial-attr {
  flex-shrink: 0;
  color: rgb(32 36 43 / 0.55);
  text-transform: none;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .testimonial-row {
    flex-direction: column;
    gap: var(--s4);
  }

  .testimonial-attr {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------
   Section 06 — Trust
--------------------------------------------------------------- */
.trust {
  padding-block: var(--s9);
}

.trust-line {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.55;
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

/* ---------------------------------------------------------------
   Shared — pending-content note (hero object + footer glyph).
   Hoisted out of Section 07 because it is used site-wide; it MUST
   stay active while the Writing section is commented out below.
--------------------------------------------------------------- */
.pending-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgb(32 36 43 / 0.45);
}

.pending-note.on-dark {
  color: rgb(240 232 224 / 0.4);
}

/* ---------------------------------------------------------------
   Section 07 — Writing
   REMOVED 2026-07-21 at founder request; will return later. Do not
   delete. RESTORE: remove the fenced comment below (opening
   WRITING-CSS-START and closing WRITING-CSS-END), the .writing-row
   hover rule earlier in this file, the nav + footer "Writing" links,
   and the Writing markup in index.html.
--------------------------------------------------------------- */
/* WRITING-CSS-START
.writing {
  padding-block: var(--s10);
}

.writing-eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.writing-eyebrow .mono-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgb(32 36 43 / 0.6);
}

.writing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgb(32 36 43 / 0.15);
}

.writing-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--s5);
  padding-block: 22px;
  border-bottom: 1px solid rgb(32 36 43 / 0.15);
  text-decoration: none;
  color: var(--ink);
}

.row-title {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.3;
  justify-self: start;
}

.row-meta {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgb(32 36 43 / 0.6);
  white-space: nowrap;
}

.row-arrow {
  font-family: var(--mono);
  font-size: 14px;
  display: inline-block;
  transition: transform 150ms var(--ease-swift);
}

.writing-row:hover .row-arrow,
.writing-row:focus-visible .row-arrow {
  transform: translate(2px, -2px);
}

.writing-view-all {
  display: inline-block;
  margin-top: var(--s6);
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 599px) {
  .writing-row {
    grid-template-columns: 1fr auto;
    gap: var(--s2) var(--s4);
  }

  .row-title {
    grid-column: 1 / -1;
  }
}
WRITING-CSS-END */

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
/* The footer is an information layer, not a motion layer: dense,
   static, nothing revealed on scroll. */
.site-footer {
  background: var(--surface-dark);
  color: var(--on-dark);
  padding-block: var(--s9) 40px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s8);
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-glyph {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(240 232 224 / 0.4);
}

.footer-wordmark {
  color: var(--on-dark);
  font-size: 14px;
}

/* Light logo lockup for the dark footer band — white wordmark + orange
   mark on transparent, so it reads on #161B22. Cropped tight, so height
   sizes the artwork directly. */
.footer-logo {
  display: inline-flex;
  align-items: center;
}

.footer-logo-img {
  display: block;
  height: 30px;
  width: auto;
}

.footer-cols {
  display: flex;
  gap: var(--s9);
  flex-wrap: wrap;
}

.footer-col-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgb(240 232 224 / 0.45);
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.footer-links a {
  color: var(--on-dark);
  text-decoration: none;
}

/* Footer "Ask an AI" logo-mask note (kept for restore reference):
   Real brand logos, flattened to a single flat colour. Each logo webp
   is used as an alpha mask and painted in cream — the brands' own
   colours would break the footer's restrained two-colour palette.
   --logo is set per-tile inline. */

/* ---------------------------------------------------------------
   Footer — "Ask an AI about Nano Sapiens" block
   REMOVED 2026-07-21 at founder request; will return later. Do not
   delete. Logo files kept in assets/logos/. RESTORE: remove the
   fenced comment below (FOOTER-ASK-CSS-START / END), the AI-TILES
   responsive block at the end of this file, and the .footer-ask
   markup in index.html.
--------------------------------------------------------------- */
/* FOOTER-ASK-CSS-START
.footer-ask {
  margin-top: var(--s9);
}

.footer-ask-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(240 232 224 / 0.5);
}

.ai-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}

.ai-tile {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--s4);
  border: 1px solid rgb(240 232 224 / 0.25);
  color: var(--on-dark);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: border-color 150ms var(--ease-swift);
}

.ai-tile-mark {
  width: 30px;
  height: 30px;
  background-color: rgb(240 232 224 / 0.7);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: background-color 150ms var(--ease-swift);
}

.ai-tile:hover .ai-tile-mark,
.ai-tile:focus-visible .ai-tile-mark {
  background-color: var(--on-dark);
}

.ai-tile-arrow {
  position: absolute;
  top: 12px;
  right: 14px;
  opacity: 0;
  transition: opacity 150ms var(--ease-swift);
}

.ai-tile:hover,
.ai-tile:focus-visible {
  border-color: rgb(240 232 224 / 0.60);
}

.ai-tile:hover .ai-tile-arrow,
.ai-tile:focus-visible .ai-tile-arrow {
  opacity: 1;
}
FOOTER-ASK-CSS-END */

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s5);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid rgb(240 232 224 / 0.15);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgb(240 232 224 / 0.5);
}

.footer-legal-links {
  display: flex;
  gap: var(--s6);
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
}

/* AI-TILES responsive — removed 2026-07-21 with footer "Ask an AI" block; restore later. Do not delete.
@media (max-width: 899px) {
  .ai-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 599px) {
  .ai-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
*/