/* Neuroagency one-page site.
   Type: the three approved Neuroagency families (v6 Sans, v6 Sans Condensed, v6.1 Slab).
   Colour: histology stains, after the founder's neuroscience years. Hematoxylin ink,
   cresyl violet for links and figures, eosin pink for the one written-context panel. */

@font-face { font-family: "NA Sans"; src: url("/fonts/NeuroagencySans-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "NA Sans"; src: url("/fonts/NeuroagencySans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NA Sans"; src: url("/fonts/NeuroagencySans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "NA Sans Condensed"; src: url("/fonts/NeuroagencySansCondensed-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "NA Sans Condensed"; src: url("/fonts/NeuroagencySansCondensed-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NA Sans Condensed"; src: url("/fonts/NeuroagencySansCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "NA Slab"; src: url("/fonts/NeuroagencySlab-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "NA Slab"; src: url("/fonts/NeuroagencySlab-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NA Slab"; src: url("/fonts/NeuroagencySlab-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #FBF9FA;
  --ink: #1F1646;
  --ink-soft: #4E4670;
  --violet: #5A3EA6;
  --eosin: #F2C9D7;
  --line: #DED7EC;
  --sans: "NA Sans", "Helvetica Neue", Arial, sans-serif;
  --cond: "NA Sans Condensed", "NA Sans", "Helvetica Neue", Arial, sans-serif;
  --slab: "NA Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --gutter: clamp(1rem, 5vw, 4.5rem);
  --measure: 40rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #140F2B;
    --ink: #F2EDF7;
    --ink-soft: #BEB5D8;
    --violet: #C4B3F6;
    --eosin: #3A2450;
    --line: #2F2752;
  }
}

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

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  font-size: clamp(1rem, 0.5rem + 0.556vw, 1.25rem);
  background: var(--paper);
}

/* Full-bleed bands (hairlines run edge to edge); content sits in a 90rem frame
   centred on wide screens, one left edge for logo, headline and sections. */
body {
  --frame: 90rem;
  --pad: max(var(--gutter), calc((100% - var(--frame)) / 2 + var(--gutter)));
  margin: 0;
  container-type: inline-size;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

a { color: var(--violet); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.12em; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; border-radius: 2px; }

.skip {
  position: absolute; left: var(--gutter); top: -4rem;
  background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* Header */
.top {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding: 1.75rem var(--pad) 0;
}
/* The logo is the Astra drawing (visuals v2) as returned, shown cropped to the
   wordmark's box inside the 2172 x 724 image: x 140-2041, y 261-512. Its paper
   matches --paper in each theme, so no edge shows. */
.wordmark { display: block; line-height: 0; }
.wordmark-img {
  display: block; width: clamp(150px, 16vw, 200px); aspect-ratio: 1901 / 251;
  background: url("/logo/neuroagency-ink-slide.webp") no-repeat;
  background-size: 114.26% auto; background-position: 51.66% 55.18%;
}
@media (prefers-color-scheme: dark) {
  .wordmark-img { background-image: url("/logo/neuroagency-slide-night.webp"); }
}
.lang {
  display: inline-flex; align-items: center; min-width: 44px; min-height: 44px;
  padding: 0.5rem 0.25rem; font-size: 1rem; color: var(--ink-soft);
}

/* Hero: one sentence written by three constructions */
.hero {
  container-type: inline-size;
  padding: clamp(2rem, 9svh, 8rem) var(--pad) clamp(3rem, 9svh, 7rem);
}
.hero h1 {
  margin: 0;
  font-size: clamp(3rem, min(14.5vw, 26svh, 15.5cqi), 16rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.hero h1 span { display: block; }
.hero .l1 { font-family: var(--cond); font-weight: 700; }
.hero .l2 { font-family: var(--slab); font-weight: 700; padding-left: 0.42em; color: var(--violet); }
.hero .l3 { font-family: var(--sans); font-weight: 300; }
.lede {
  max-width: 22em; margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.3;
}
.signature {
  margin: 1rem 0 0; font-family: var(--slab); font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { animation: arrive 700ms cubic-bezier(.2,.7,.2,1) both; }
  .hero .l2 { animation-delay: 140ms; }
  .hero .l3 { animation-delay: 280ms; }
  @keyframes arrive { from { opacity: 0; transform: translateY(0.12em); } to { opacity: 1; transform: none; } }
}

/* Sections: heading in a narrow column, content in the reading column */
.block {
  display: grid; gap: 1.25rem clamp(3rem, 4vw, 5rem);
  padding: clamp(3rem, 8vh, 5rem) var(--pad);
  border-top: 1px solid var(--line);
}
.block > * { min-width: 0; }
/* The heading column stays bounded so the reading column starts close to it,
   not in the middle of the screen. */
@container (min-width: 51em) {
  .block { grid-template-columns: minmax(12rem, 22rem) minmax(0, var(--measure)); justify-content: start; }
  .block > * { grid-column: 2; }
  .block > h2 { grid-column: 1; grid-row: 1 / span 6; }
}
.block h2 {
  margin: 0; font-family: var(--slab); font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.005em;
  max-width: 14em;
}
.prose p, .prose-lead { margin: 0 0 1em; max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }

/* Adoption figures */
.stats { margin: 1.5rem 0 0; }
.stat { margin: 0; display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.stat .n {
  font-family: var(--cond); font-weight: 700; font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1; color: var(--violet); min-width: 3.1ch;
}
.stat-b .n { font-weight: 300; color: var(--ink-soft); }
.stat .label { max-width: 20em; line-height: 1.3; }
.stat-b { margin-top: 0.5rem; }
.stats figcaption { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); max-width: var(--measure); }

/* The written-context panel */
.canon {
  container-type: inline-size;
  margin: 1.5rem 0 0; background: var(--eosin); color: var(--ink);
  padding: clamp(1.25rem, 3vw, 2rem); border-radius: 3px;
  font-family: var(--slab);
}
.canon dl { margin: 0; display: grid; gap: 0.85rem; }
.canon dl > div { display: grid; gap: 0.1rem 1.5rem; }
@container (min-width: 28rem) { .canon dl > div { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.canon dt, .canon dd { min-width: 0; }
.canon dt { font-weight: 700; font-size: 1rem; }
.canon dd { margin: 0; font-weight: 400; font-size: 1.05rem; line-height: 1.45; }
.canon figcaption { margin-top: 1.25rem; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); }

/* Ventures */
.venture-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.venture-name {
  display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; max-width: 100%;
  font-family: var(--cond); font-weight: 700; font-size: clamp(2rem, 4.5vw, 2.8rem);
  line-height: 1; text-decoration: none; color: var(--ink);
}
.venture-name:hover { color: var(--violet); text-decoration: underline; text-decoration-thickness: 0.06em; }
.venture-list p { margin: 0.5rem 0 0; max-width: var(--measure); }
.built { margin: 2rem 0 0; font-family: var(--slab); color: var(--ink-soft); }

/* People */
.people-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.people-list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.7rem; }
.people-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--violet);
}

/* Contact */
.mail { font-family: var(--cond); font-weight: 700; font-size: clamp(1.4rem, 3.5vw, 2rem); }

/* Footer */
.foot {
  border-top: 1px solid var(--line);
  padding: 2rem var(--pad) 2.5rem; font-size: 0.875rem; color: var(--ink-soft);
}
.foot p { margin: 0 0 0.5rem; max-width: 60rem; }
.foot-name { color: var(--ink); }

@media (max-width: 480px) {
  body { font-size: 1.0625rem; }
  .hero .l2 { padding-left: 0.25em; }
}