/* Aita shared tokens and hero primitives. Keep colour values source-faithful. */
@font-face {
  font-family: "Aita";
  src: url("brand/aita-typeface/Aita-Regular.woff2") format("woff2"),
       url("brand/aita-typeface/Aita-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0041, U+0061, U+0069, U+0074;
}

/* Gambetta and Satoshi, founder-chosen 2026-08-16 (type lab pairing G).
   Self-hosted rather than loaded from api.fontshare.com: the QA gate allows
   only fonts.googleapis/gstatic as foreign origins, and a brand this size
   should not hang its typography off a third-party CDN. Source and licence
   are recorded in brand/fonts/README.md. */
@font-face {
  font-family: "Gambetta";
  src: url("brand/fonts/Gambetta-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Gambetta italic, the variable file Fontshare serves, 300 to 700. Pulled
   2026-08-21 for the lab's entrepreneurs-line options so a serif italic is
   the real one and not a slanted regular. */
@font-face {
  font-family: "Gambetta";
  src: url("brand/fonts/Gambetta-Italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("brand/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("brand/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* The page asks for 600 in a few places and Satoshi ships no 600, so CSS
   font matching resolves those to this face. */
@font-face {
  font-family: "Satoshi";
  src: url("brand/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Light and the italics, added 2026-08-18 with the type decision below. The
   page had only 400/500/700 upright, which meant headings could not be set
   light and every italic on the page was a synthesised slant. Both matter
   now: headings are Satoshi 300, and italic is Satoshi's own. */
@font-face {
  font-family: "Satoshi";
  src: url("brand/fonts/Satoshi-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("brand/fonts/Satoshi-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("brand/fonts/Satoshi-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("brand/fonts/Satoshi-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Mrs Saint Delafield, founder-chosen 2026-08-21 from the fifteen-face strip
   in lab/section4-foryou. Signs the name on the proof cards and nothing
   else. Two subsets as Google Fonts serves them, self-hosted for the same
   reason as the brand faces. OFL 1.1, licence beside the files. */
@font-face {
  font-family: "Mrs Saint Delafield";
  src: url("brand/fonts/MrsSaintDelafield-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Mrs Saint Delafield";
  src: url("brand/fonts/MrsSaintDelafield-Regular-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Copper on neutral, founder pick 2026-08-31 from lab/colour.

     What changed and why. The accent was brass, #A67C37, which sits at hue 38
     and is gold: Can's word on it was that it read yellow. Copper is the same
     warmth with the hue pulled down to 29, so the page keeps its metal and
     loses the gold. The ground was a brown black and a warm cream, which put
     the warmth in the BACKGROUND; it is now neutral grey at both ends, so
     copper is the only colour on the page and nothing competes with it. The
     ink follows the ground to neutral.

     The wash is the number that carries the intent. It is the one place the
     accent stops being an accent and becomes a surface, and it went from 0.06
     to 0.025 in light and 0.12 to 0.05 in dark: the copper touch is in the
     accents now, not in the grounds.

     --brass and --brass-bright are NOT restated in the dark block below.
     They are theme independent by design and always have been.

     --ok, --warn and --down are untouched status colours. Nothing on the
     homepage uses them today. --warn is a gold that would now sit oddly
     beside copper, so decide it deliberately if anything ever picks it up. */
  --ink: #161616;
  --paper: #F3F3F3;
  --bone: #E7E7E7;
  --soot: #1C1C1C;
  --clay: #7F7E7A;
  --brass: #B87333;
  --brass-bright: #CB8F58;
  --hairline-ink: rgba(243, 243, 243, 0.14);
  --hairline-paper: rgba(22, 22, 22, 0.14);
  --ok: #4F7F5A;
  --warn: #B98A2E;
  --down: #A94A3F;
  --rule-mark: rgba(22, 22, 22, 0.30);
  --ink-soft: rgba(22, 22, 22, 0.74);
  --brass-hair: rgba(184, 115, 51, 0.30);
  --brass-wash: rgba(184, 115, 51, 0.025);

  /* Type and spacing copied from the design lab. */
  /* Type decision, founder pick 2026-08-18 from lab/type (pairing A7).
     Satoshi carries the whole page — headings at 300 and body at 400 — and
     Gambetta is demoted from a level to a role: it appears in a pull quote
     and nowhere else. Four rules travel with it:

       1. Headings are --display (Satoshi) at weight 300.
       2. Emphasis is colour OR italic, never both on the same text.
          Colour marks a word and stays upright; italic is a whole line and
          is never coloured.
       3. The serif is never set italic.
       4. The Aita mark is never set inside text at 600 or heavier.

     --serif is kept pointing at Gambetta so nothing that still asks for it
     breaks, but --display and --quote are what the page should use. */
  --serif: 'Gambetta', Didot, 'Bodoni MT', 'Times New Roman', serif;
  --sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display-weight: 300;
  --quote: 'Gambetta', Didot, 'Bodoni MT', 'Times New Roman', serif;
  --script: 'Mrs Saint Delafield', 'Segoe Script', cursive;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* ── The type scale ──────────────────────────────────────────────────
     One ladder for the whole page, set 2026-08-20 on the founder's call:
     "we cannot constantly do some different font sizes."

     Before this, every section wrote its own numbers. The same role came out
     at three different sizes depending on which section invented it: eyebrow
     was 22.4px in section 2, 13px in sections 3 and 4, and 9.5px inside the
     roster card. Body was 17, 16, 16.3 and 17.9. Sections 3 to 9 had also
     inherited a 16px web default from the old homepage draft, so the hero's
     own supporting text set at 32px while every paragraph beneath it set at
     15 to 17. That gap is the complaint this fixes.

     --type-base is the body size and the ONLY fluid value here: 17px on a
     1366 laptop, 20.1px on the founder's 2120 screen, 21px from 2210 up.
     Every other step is a fixed ratio of it, so the proportions hold at every
     width and there is exactly one number to move.

     The ratio is 1.25, a major third. Calm rather than dramatic, which is
     what a page carrying this much copy wants: the steps stay far enough
     apart to read as different levels and close enough that nothing shouts.

       micro  0.64      12.9px    mono labels, rail roles, pills
       small  0.80      16.1px    captions, notes, mark names, rail names
       body   1.0       20.1px    every paragraph
       lead   1.25      25.2px    section ledes and closing lines
       h4     1.5625    31.5px    panel reliefs, list statements, figures
       h3     1.953     39.3px    the powered-by headline, panel pains
       h2     2.441     49.2px    section headlines

     The three display sizes above h2 are PINNED, not derived. The hero, the
     four-beat flow and the 67px statements were tuned by eye and ratified,
     and a ladder that reached them would have to bend to hit 102.4 and 67.2
     off a 20px body. They are named here anyway so there is still one place
     to change them, but the numbers are the ones already approved.

     --type-scale multiplies the whole ladder at once, the same pattern as
     --s2-copy-scale in section 2. It is the knob: move it, and every level
     moves together with its proportions intact. */
  --type-scale: 1;
  --type-base: clamp(17px, 0.95vw, 21px);

  --t-body: calc(var(--type-base) * var(--type-scale));
  --t-micro: calc(var(--t-body) * 0.64);
  --t-small: calc(var(--t-body) * 0.80);
  --t-lead: calc(var(--t-body) * 1.25);
  --t-h4: calc(var(--t-body) * 1.5625);
  --t-h3: calc(var(--t-body) * 1.953);
  --t-h2: calc(var(--t-body) * 2.441);

  /* Pinned. Section 2's headline is not here: it sizes in cqw off its own
     copy column, which is the whole reason it holds its proportion when the
     column moves, and a px ladder cannot express that. */
  --t-statement: clamp(2.2rem, 5.2vw, 4.2rem);
  --t-punch: clamp(2.4rem, 5vw, 3.6rem);
  --t-display: clamp(4rem, 10.6vw, 6.40rem);

  --measure: 940px;
  --gutter: 46px;

  /* The frame the whole page is set in. Founder call, 2026-08-20: nothing on
     the site should sit in a box narrower than the screen — the copy hugs the
     edges and the air belongs in the middle, not in the margins.

     A tenth of the viewport, not a fixed shell. The shells this replaces were
     capped at 1100-1440px and centred, so every pixel a monitor gained past
     the cap turned into margin: the hero headline sat 24% in on a 2560 screen
     and the roster 30%. As a percentage the gap holds at 10% at every width,
     which is the bottom of the 10-20% band Can asked for. The floor is the
     old gutter, so phones are untouched; the ceiling stops the frame running
     away on an ultrawide.

     --shell is the centred version for sections that still want a measure:
     full width minus the inset on both sides, capped so a line of body text
     never sets 2000px wide. 1560px is the smallest cap that keeps a centred
     shell inside the 10-20% band all the way up to 2560. */
  --page-inset: clamp(var(--gutter), 10vw, 300px);
  --shell-max: 1560px;
  --shell: min(100% - (2 * var(--page-inset)), var(--shell-max));

  /* The uncapped version: inset to inset, no measure. For sections that are
     a structure rather than a column of prose — section 3's picker is a rail
     and a panel read across, so a 1560px cap on it was margin, not measure.
     Founder call 2026-08-20: section 3 runs to the same 10% frame the header,
     the hero and section 2 already start at. */
  --shell-full: calc(100% - (2 * var(--page-inset)));

  /* Section 3's own cap, founder call 2026-08-20 after seeing the card run to
     the full frame: "this panel cannot be that wide, we need to manage that
     into a way more central position."

     A FLAT cap, not a share of the screen. It was 56vw with a 1080px floor,
     which held the same proportion as the monitor grew. The founder rejected
     that on a wide screen and approved it on a 1820px one, where the floor was
     what was active: "it should be definitely a bit more narrower regardless
     of the screen size. That should be like a narrow screen."

     Flat did not work either: on an ultrawide the card held 1080px while the
     screen ran away from it and read lost. "It just stays for a while and then
     starts to minimise. That should be getting bigger, not smaller."

     So it grows, but at a fifth of the rate the screen does. 56vw grew too
     fast and was rejected at 2560; 0vw was rejected at 3040. A 0.2 slope off
     a 1700px hinge keeps the approved width where it was approved and adds
     roughly 200px per 1000px of extra screen.

       1440  1080px  (75%)
       1700  1080px  (64%)   <- approved, "very nice"
       1820  1104px  (61%)
       2120  1164px  (55%)
       2560  1252px  (49%)
       3040  1348px  (44%)
       3440  1400px  (41%, the ceiling)

     min() against --shell-full keeps the 10% frame below ~1350px, so nothing
     narrower than the cap ever overflows. Retune with the 0.2 slope or the
     1400px ceiling. */
  --s3-max: clamp(1080px, calc(1080px + (100vw - 1700px) * 0.2), 1400px);

  --knobs: 236px;
  --bleed: 22px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --quad: 60vmin;
  --quad-ink: 0.09;

  /* Warmer homepage-draft palette, namespaced to preserve canonical tokens. */
  --warm-bg: #FAF6F1;
  --warm-bg-soft: #F3EDE4;
  --warm-card: #FFFFFF;
  /* The track of a segmented pill (.seg): the ground it sits on, so the
     passive side is not a surface at all and only the pressed thumb carries
     the warm tone. Can's call 2026-08-21, after a bone track read as pressed
     and a white one read as a second object. Resolved at use, so it follows
     the ground in dark too. */
  --seg-track: var(--paper);
  --warm-text: #3B2F2F;
  --warm-text-secondary: #6B5B4F;
  --warm-text-tertiary: #A89888;
  --warm-accent: #8B5E3C;
  --warm-accent-deep: #7A4F30;
  --warm-border: #F0E8DD;
  --warm-brass: #A9834B;
  --warm-ink-dot: #262019;
  --shadow-rest: 0 1px 1px rgba(59, 47, 47, 0.03), 0 16px 38px -26px rgba(150, 108, 68, 0.2);
  --shadow-lift: 0 1px 1px rgba(59, 47, 47, 0.03), 0 22px 48px -26px rgba(150, 108, 68, 0.3);
}

/* Dark, which is the shipped default: index.html opts in synchronously before
   first paint and only an explicit stored choice gives you light.

   Copper stays copper. It is the one token that reads correctly on both
   grounds, which is why --brass and --brass-bright are set once above and
   never restated here. --brass-hair IS restated, because light used to run it
   at 0.38 and both themes now sit at 0.30. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: #F2F2F0;
  --paper: #131313;
  --bone: #1D1D1D;
  --soot: #EBEBE8;
  --clay: #8F8F8A;
  --hairline-ink: rgba(19, 19, 19, 0.14);
  --hairline-paper: rgba(242, 242, 240, 0.14);
  --rule-mark: rgba(242, 242, 240, 0.30);
  --ink-soft: rgba(242, 242, 240, 0.74);
  --brass-hair: rgba(184, 115, 51, 0.30);
  --brass-wash: rgba(184, 115, 51, 0.05);

  --warm-bg: #17130C;
  --warm-bg-soft: #1E1912;
  --warm-card: #211C13;
  --warm-text: #EFE7DA;
  --warm-text-secondary: #C4B7A5;
  --warm-text-tertiary: #8F836F;
  --warm-border: #2A2418;
  --warm-ink-dot: #E8E0D0;
  --shadow-rest: 0 1px 1px rgba(0, 0, 0, 0.32), 0 16px 38px -26px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 1px 1px rgba(0, 0, 0, 0.32), 0 22px 48px -26px rgba(0, 0, 0, 0.8);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
}

::selection {
  background: var(--brass-hair);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
  border-radius: 3px;
}

.aita-wordmark {
  /* Bodoni Moda is no longer downloaded, so the wordmark degrades into the
     new brand serif rather than a face that will never arrive. */
  font-family: "Aita", "Gambetta", Didot, Georgia, serif;
  font-size: 24px;
  font-style: normal;
  font-synthesis: none;
  font-kerning: none;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.aita-hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
}

.aita-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: clamp(38px, 6vw, 112px);
  width: min(100%, 1360px);
  margin-inline: auto;
  padding: clamp(88px, 12vh, 136px) var(--gutter) clamp(58px, 8vh, 92px);
}

.aita-hero__copy {
  max-width: 620px;
}

.aita-hero__title {
  max-width: 13ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.25rem, 5.7vw, 5.4rem);
  font-variation-settings: "opsz" 78;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.99;
}

.aita-hero__lede {
  max-width: 46ch;
  margin: 1.7rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.68;
}

.aita-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.7rem;
  margin-top: 2.25rem;
}

.aita-button,
.aita-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  text-decoration: none;
}

.aita-button {
  padding: 0.72rem 1.45rem;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: var(--brass);
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}

.aita-button:hover {
  background: var(--brass-bright);
  color: var(--ink);
}

.aita-text-link {
  border-bottom: 1px solid var(--brass-hair);
  color: var(--ink);
  font-size: 0.92rem;
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}

.aita-text-link:hover {
  border-color: var(--brass);
  color: var(--warm-accent-deep);
}

.aita-hero__note {
  max-width: 52ch;
  margin: clamp(2.75rem, 6vh, 4.5rem) 0 0;
  color: var(--clay);
  font-size: 0.92rem;
  line-height: 1.62;
}

.aita-hero__visual {
  min-width: 0;
  display: grid;
  place-items: center;
}

.aita-spiral-mount {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 640px);
  aspect-ratio: 1;
  contain: layout paint style;
}

.aita-spiral-mount:empty::before {
  content: "";
  display: block;
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid var(--brass-hair);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--brass) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, transparent 0 42%, var(--brass-wash) 42.5% 43.5%, transparent 44%);
}

.aita-spiral__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  shape-rendering: geometricPrecision;
}

@media (max-width: 900px) {
  .aita-hero__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .aita-hero__copy {
    max-width: 680px;
  }

  .aita-hero__visual {
    width: min(100%, 560px);
    justify-self: center;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 34px;
    --bleed: 14px;
    --quad: 52vmin;
  }

  .aita-hero__inner {
    padding-block: 72px 48px;
  }

  .aita-hero__title {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .aita-hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aita-button,
  .aita-text-link {
    transition: none;
  }
}