/* CarbonZero — the design system.

   One design, one set of classes, used by every template. A class is named for
   what the thing does — a pair, a display line, a card, a button — and it means
   the same thing on every page it is written on. Nothing here is scoped to a
   page, and nothing here may be.

   Each class carries the typeface that suits the thing it names: a title is
   serif, a button is sans. That is the whole of the typography rule; there is
   no second design for the pages somebody works in.

   Every value comes from docs/design-tokens.md, extracted from the prototype
   nando judged on his phone, and from the homepage he refined over 2026-08-16/17
   (ADR 0034). If a number here is wrong, the tokens file is where it is decided.

   **This file is seeded from two templates — the homepage and the page that
   explains applying — and grows as each remaining template converts** (ADR 0035,
   ticket 19). Until the last one has, `styles.css` is still served alongside it,
   holding what the pages that have not converted still need. It is linked after
   this file, so where the two describe the same thing at the same specificity an
   unconverted page keeps exactly what it has today.

   Nothing links this file by name. The template links it at an address carrying
   a version worked out from these very bytes, so changing one character here
   changes the address and no browser can hand a returning visitor the old file.
*/


/* ── the tokens ─────────────────────────────────────────────────────────────── */

:root {
  --ink:#141414;--brand:#25477F;--soft:#4a4a4a;--faint:#6f6f6f;--ground:#fff;
  --line:#e6e6e6;--line-strong:#141414;--measure:33rem;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* the wordmark's own face — see the @font-face block below */
  --wordmark:'Raleway',var(--sans);

  /* the width of the layout, from pygrow.bio's own stylesheet: .container
     {max-width:1100px}. The reading measure above still governs a block that is
     a column of prose; this governs the page around it. */
  --page:1100px;

  /* pygrow.bio's own button palette, lifted from its stylesheet:
     --pygrow-green #4CAF50, --pygrow-dark-green #2E7D32 (its hover),
     --pygrow-blue #1E88E5. pygrow sets no blue hover, so the darker #1565C0
     was chosen to match the green's step down. */
  --green:#4CAF50;--green-dark:#2E7D32;
  --blue:#1E88E5;--blue-dark:#1565C0;

  /* the photographs' frames. Slight, deliberately: enough to soften the corner,
     not enough to read as a style. */
  --photo-radius:8px;
}

/* THE WORDMARK'S TYPEFACE — Raleway, self-hosted from resources/public/fonts/,
   22KB, latin subset, SIL Open Font License. No build step and no CDN: the
   file is served from this host like everything else. Chosen 2026-08-16 over
   Fraunces, Instrument Serif, Bricolage Grotesque and Nunito. The licence is
   why it can later be outlined into a logo without a question. */
@font-face {
  font-family:'Raleway';src:url('/fonts/raleway.woff2') format('woff2');
  font-weight:600 700;font-style:normal;font-display:swap;
}


/* ── the page itself ────────────────────────────────────────────────────────── */

* {
  box-sizing:border-box;
}
html {
  -webkit-text-size-adjust:100%;
}
body {
  margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);
  font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;
}


/* ── the chrome every page is drawn inside ──────────────────────────────────── */

/* the header — sticky, its bottom border fading in past 40px of scroll */
.site-header {
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.9rem;
  padding:.85rem 1.15rem;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.site-header.is-scrolled {
  border-bottom-color:var(--line);
}
.site-header .spacer {
  flex:1;
}
/* the wordmark and the toggle step once at 768px, like the display sizes below.
   They have to: at 2rem the toggle, the wordmark and the Join Us button need
   exactly 375px, so the button clips on a phone. */
.nav-toggle {
  font:inherit;background:none;border:none;cursor:pointer;font-size:1.6rem;
  line-height:1;color:var(--ink);padding:.25rem;margin:-.25rem;
}
.wordmark {
  font-family:var(--wordmark);font-weight:700;letter-spacing:.01em;
  font-size:1.7rem;text-decoration:none;color:var(--brand);
}
/* "Zero" steps lighter one letter at a time. Same hue as the brand blue (217°)
   and the same saturation — only the lightness climbs, so it reads as one
   colour fading rather than four colours. It ends at 60% lightness, which is
   3.4:1 against white and clears the 3:1 that large text needs.

   These values assume a white ground. On a photograph, a dark footer or an
   email the light end breaks and the mark needs a second version.

   The link carries an aria-label because the letters are split into spans, and
   some screen readers spell out text broken up that way. */
.wordmark-fade span:nth-child(1) { color:hsl(217,54%,39%); }
.wordmark-fade span:nth-child(2) { color:hsl(217,54%,46%); }
.wordmark-fade span:nth-child(3) { color:hsl(217,54%,53%); }
.wordmark-fade span:nth-child(4) { color:hsl(217,54%,60%); }

/* a button, wherever one is: sans, whatever the words around it are set in */
.btn {
  display:inline-block;font-family:var(--sans);font-size:.9rem;
  letter-spacing:.01em;background:var(--ink);color:#fff;
  border:1px solid var(--ink);padding:.5rem 1rem;border-radius:6px;
  cursor:pointer;white-space:nowrap;text-decoration:none;
}
.btn:hover {
  background:#000;color:#fff;
}
.btn.btn-lg {
  font-size:1.25rem;padding:.7rem 1.7rem;font-weight:500;letter-spacing:0;
}
/* the two brand colours, in pygrow's shape. Neither outranks the other (ADR 0021
   decision 4) — two filled buttons in two colours, not a filled one beside an
   outline, which is what the site used to draw. The name says the colour because
   green is already on two different asks, so any other name would be false on
   one of them. */
.btn.btn-green,
.btn.btn-blue {
  border-width:0;
}
.btn.btn-green {
  background:var(--green);color:#fff;
}
.btn.btn-green:hover {
  background:var(--green-dark);color:#fff;
}
.btn.btn-blue {
  background:var(--blue);color:#fff;
}
.btn.btn-blue:hover {
  background:var(--blue-dark);color:#fff;
}
/* the header's buttons: the same size type as a big button, less padding */
.btn.btn-compact {
  font-size:1.25rem;padding:.5rem 1.15rem;font-weight:500;
}
/* the header never ranks the two asks: one button opening a dropdown below the
   breakpoint, both buttons side by side above it (ADR 0021 decision 4) */
.wide-only {
  display:none;
}
.dropdown {
  position:absolute;right:1.15rem;top:4.2rem;z-index:45;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:.4rem;display:none;
  flex-direction:column;gap:.15rem;min-width:14rem;
  box-shadow:0 6px 20px rgba(20,20,20,.14);
}
.dropdown.is-open {
  display:flex;
}
.dropdown a {
  font-family:var(--sans);font-size:1.15rem;text-align:left;
  padding:.65rem .8rem;color:var(--ink);text-decoration:none;border-radius:4px;
}
.dropdown a:hover {
  background:#f2f4f2;
}

.site-footer {
  border-top:1px solid var(--line);padding:2rem 1.5rem 3rem;text-align:center;
  font-family:var(--sans);font-size:.8rem;color:#8a8a8a;margin-top:3.6rem;
}
.site-footer a {
  color:#8a8a8a;text-decoration:none;margin:0 .55rem;
}

/* the drawer — the whole site's navigation, Log in pinned at the bottom */
.backdrop {
  position:fixed;inset:0;z-index:60;background:rgba(20,20,20,.3);opacity:0;
  pointer-events:none;transition:opacity .25s ease;
}
.backdrop.is-open {
  opacity:1;pointer-events:auto;
}
.drawer {
  position:fixed;top:0;left:0;bottom:0;z-index:70;width:min(20rem,82vw);
  background:var(--ground);border-right:1px solid var(--line);
  transform:translateX(-102%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  padding:1.15rem 1.15rem 2rem;display:flex;flex-direction:column;
}
.drawer.is-open {
  transform:translateX(0);
}
.drawer .drawer-head {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.5rem;
}
.drawer .drawer-close {
  font:inherit;background:none;border:none;font-size:1.4rem;cursor:pointer;
  color:var(--ink);line-height:1;
}
.drawer a {
  font-family:var(--sans);display:block;text-decoration:none;color:var(--ink);
  font-size:1.05rem;padding:.7rem 0;border-bottom:1px solid var(--line);
}
.drawer a.drawer-foot {
  margin-top:auto;border-bottom:none;color:var(--soft);font-size:.95rem;
}


/* ── the layout ──────────────────────────────────────────────────────────────
   One container, fluid between the gutters and 1100px. Below 1100px it is the
   window minus its gutters, so the layout is a different width at every window
   size rather than jumping between two. At 1100px it stops growing and centres.

   NO SIZE ANYWHERE IN THIS FILE IS TIED TO THE WIDTH OF THE WINDOW. There are
   no vw units and no clamp(). Text wraps as the window narrows; it never
   shrinks. The display sizes step once, at the one breakpoint — 768px, where
   the columns stack — and never again.
   ──────────────────────────────────────────────────────────────────────────── */
.container {
  width:100%;max-width:var(--page);margin:0 auto;
  padding-left:1.5rem;padding-right:1.5rem;
}


/* ── the homepage's own pieces ──────────────────────────────────────────────── */

/* the opening title stays at the top of the page at every width */
.hero {
  text-align:center;padding-top:3.4rem;padding-bottom:3rem;
}
/* padding-top/bottom, never the shorthand: the shorthand drops the 1.5rem side
   gutters .container gives every block */
.hero-title {
  font-size:2.4rem;line-height:1.14;font-weight:normal;margin:0;
}
.caps-line {
  font-family:var(--sans);font-size:.9rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft);margin:1.2rem 0 0;
}
/* two blocks arranged: stacked by default with the picture pulled to the front,
   so a phone reads picture then words; side by side above the breakpoint. What
   sits in the two halves is up to the page — words and a picture, or a card and
   a picture. */
.pair {
  display:grid;gap:1.6rem;margin:0 auto 3.2rem;
}
.pair .pair-media {
  order:-1;aspect-ratio:4/3;overflow:hidden;background:#ededed;
  border-radius:var(--photo-radius);
}
/* the radius is on the frame, not the image: the frame is what crops the
   photograph, and it is also what shows while the photograph is loading */
.pair .pair-media img {
  display:block;width:100%;height:100%;object-fit:cover;
}
.pair p {
  font-size:1.25rem;line-height:1.55;margin:0 0 1.2rem;
}
.pair p:last-child {
  margin-bottom:0;
}
.pair p em {
  font-style:italic;font-weight:700;
}
/* one line of large type across the full width, centred, with air above and
   below — a line meant to be read on its own rather than as part of a block */
.display-row {
  margin:1rem auto 3.4rem;
}
.display-line {
  font-size:1.62rem;line-height:1.28;font-weight:normal;margin:0;
  text-align:center;
}
/* the bottom margin matches a pair's, so what follows sits at the same distance
   from the cards as any two pairs sit apart */
.card-grid {
  display:grid;gap:2.4rem;margin-bottom:3.2rem;
}
.card h3 {
  font-family:var(--serif);font-size:1.75rem;font-weight:normal;
  margin:0 0 .5rem;
}
.card p {
  font-size:1.25rem;line-height:1.6;color:var(--soft);margin:0 0 1.3rem;
}


/* ── a page of text at the layout's full width ───────────────────────────────
   The shape a text-heavy page takes. It reads as a printed page would — a title
   and its italic line across the whole width, then text set in one or two
   columns.

   Nothing here is named for a page. `/apply` was the first to wear it
   (2026-08-18) and the second page to want any of it uses the same classes
   rather than a block of its own.

     .prose-page   the section: the sizes below
     .page-head    the title and its one italic line, spanning
     .columns     a block of text set in two columns above 768px, one below
     h2.span-all  a heading across both columns, with a rule above it
     p.subhead       a heading inside the columns
   ──────────────────────────────────────────────────────────────────────────── */
.prose-page {
  padding-bottom:3rem;
}
.page-head {
  margin:2.6rem 0;
}
/* a size down from the opening title on the homepage */
.page-head h1 {
  font-size:2.1rem;line-height:1.14;font-weight:normal;margin:0 0 1rem;
}
/* the same size and face as a display line */
.page-head .page-sub {
  font-size:1.62rem;line-height:1.28;font-style:italic;font-weight:normal;
  color:var(--soft);margin:0;
}
/* larger than a narrow column of prose, smaller than the words in a pair */
.prose-page p,
.prose-page li {
  font-size:1.2rem;line-height:1.6;
}
.prose-page p {
  margin:0 0 1.1rem;
}
/* a heading inside the text, reading as a heading rather than as a caption */
.prose-page p.subhead {
  font-family:var(--serif);font-size:1.25rem;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--ink);margin:1.8rem 0 .7rem;
}
/* a list is one thing, not a run of paragraphs: its items sit closer together
   than the prose, and it keeps the prose's own gap below it */
.prose-page ul {
  list-style:none;margin:0 0 1.1rem;padding:0;
}
.prose-page li {
  margin:0 0 .35rem;
}
.prose-page h2.span-all {
  font-size:1.9rem;font-weight:normal;line-height:1.18;
  border-top:1px solid var(--line);padding-top:1.8rem;margin:3rem 0 1.6rem;
}
/* a form on such a page stays at the reading measure rather than stretching */
.prose-page .form-stack {
  max-width:var(--measure);margin-left:auto;margin-right:auto;
}
.columns > :first-child {
  margin-top:0;
}

/* a note at the foot of a page, marked in the text by a symbol. Smaller and
   fainter than what it belongs to, and set apart by a rule. Written as
   `p.footnote` rather than `.footnote` so that it beats the prose size on a
   page of text without being scoped to one. */
p.footnote {
  font-size:.95rem;line-height:1.5;color:var(--faint);
  border-top:1px solid var(--line);padding-top:1rem;margin:2.6rem 0 0;
}

/* a short form: a label, a field, a button. Starting an application is name and
   email and nothing else. */
.form-stack {
  border-top:1px solid var(--line);padding-top:1.6rem;margin-top:2.4rem;
}
.form-stack label {
  display:block;font-family:var(--sans);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--faint);
  margin:1.1rem 0 .3rem;
}
.form-stack input {
  width:100%;font-family:var(--sans);font-size:1rem;line-height:1.5;
  padding:.6rem .7rem;border:1px solid var(--ink);border-radius:2px;
  background:var(--ground);color:var(--ink);
}
.form-stack button {
  margin-top:1.6rem;
}
/* what went wrong, next to what it went wrong on */
.form-error {
  font-family:var(--sans);font-size:.86rem;border-left:2px solid var(--ink);
  padding-left:.85rem;margin:1.2rem 0 0;
}


/* ── the one breakpoint — 768px, pygrow's own ────────────────────────────────
   Below it: a single column, everything stacked.
   Above it: two columns, alternating, and the display sizes step up once.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width:768px) {
  .nav-toggle {
    font-size:1.9rem;
  }
  .wordmark {
    font-size:2rem;
  }
  .narrow-only {
    display:none;
  }
  .wide-only {
    display:inline-block;
  }
  /* both together, deliberately: the founder's ask is an .card that also
     sits inside a .pair, so it matches both selectors. Sizing them in one rule
     is what stops the three cells drifting apart again. */
  .pair p,
  .card p {
    font-size:1.5rem;line-height:1.5;
  }
  .hero-title {
    font-size:3.7rem;
  }
  .display-line {
    font-size:2.3rem;
  }
  .hero {
    padding-top:5rem;padding-bottom:4.2rem;
  }
  .pair {
    grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center;
    margin-bottom:4.2rem;
  }
  /* words left, picture right — and .pair-reversed swaps them */
  .pair .pair-media {
    order:0;
  }
  .pair.pair-reversed .pair-media {
    order:-1;
  }
  .display-row {
    margin:1.4rem auto 4.4rem;
  }
  .card-grid {
    grid-template-columns:1fr 1fr;gap:3.2rem;margin-bottom:4.2rem;
  }
  /* a real multi-column flow: the text fills the left column and continues
     into the right. Below this width there is one column, as everywhere else. */
  .columns {
    column-count:2;column-gap:3.2rem;
  }
  /* nothing that is a heading may sit alone at the foot of a column, and no
     single line of a paragraph may either */
  .columns p,
  .columns ul {
    orphans:2;widows:2;
  }
  .columns p.subhead,
  .columns ul {
    break-inside:avoid;
  }
  .columns p.subhead {
    break-after:avoid;
  }
  .page-head h1 {
    font-size:3rem;
  }
  .page-head .page-sub {
    font-size:2.3rem;
  }
}


/* ── motion, for somebody who has asked for less of it ──────────────────────── */

@media (prefers-reduced-motion:reduce) {
  * {
    transition:none !important;
  }
}