/* =========================================================================
   home2 — base
   Page-wide rules that are not a component: fonts, the page ground, the
   text-style behaviour every .t-* class shares, and the section frame.

   Values come from tokens.css (generated from Figma). Nothing here should
   carry a raw size that Figma has a variable for.
   ========================================================================= */

:root {
  /* the Figma font names, as the Adobe Fonts kit (nzp2cvf) serves them */
  --font-sans: "arponasans", "Arpona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "novel-mono-pro-condensed", "Novel Mono Pro Cnd", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The widest the content ever gets — the 1920 frame's 1920 − 2 × 240. */
  --max-content: 1440px;

  /* The horizontal inset of every section (and the header and footer).
     The 100% resolves where the variable is used — use it only as the
     padding-inline (or left/right) of something as wide as the page.

     The content only ever grows; each frame takes over where the one below
     has stretched to its content width (figma.json "_breakpoints"):

       0–1023      420 frame    Figma's page margin (24)
       1024–1391   1024 frame   Figma's page margin (96), content 832 → 1200
       1392–1439   1440 frame   content held at 1200, margins 96 → 120
       1440–1679   1440 frame   margin 120, content 1200 → 1440
       1680–1919   1440 frame   content held at 1440, margins grow
       1920+       1920 frame   content 1440, margins grow (240 at 1920) */
  --gutter: var(--spacing-page-margin);
}
@media (min-width: 1392px) {
  :root { --gutter: min(var(--spacing-page-margin), calc((100% - 1200px) / 2)); }   /* 1200 = the 1440 frame's content */
}
@media (min-width: 1680px) {
  :root { --gutter: calc((100% - var(--max-content)) / 2); }
}
:root {

  /* the old prototype's motion curves, kept for hovers (styles.css has the rest) */
  --e-hover: cubic-bezier(.53, .2, 0, 1);
  --e-zoom:  cubic-bezier(.22, 1, .36, 1);
}

html { scrollbar-gutter: stable; }

body.home2 {
  margin: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* resets at zero specificity, so any class wins over them — and before the
   text-style rules below, which must win over the margin reset */
:where(.home2) :where(h1, h2, h3, h4, p) { margin: 0; }
:where(.home2) :where(a) { color: inherit; text-decoration: none; }
:where(.home2) :where(img, svg) { display: block; }

/* ── text styles ──────────────────────────────────────────────────────
   Every Figma text node is set with "vertical trim: cap height to
   baseline", so its box is the cap height, not the line box. The same trim
   here is what makes the gaps between text nodes the ones Figma draws.
   Figma also turns discretionary ligatures on for every style. */
:where(.home2) :where([class^="t-"], [class*=" t-"]) {
  margin: 0;
  font-feature-settings: "dlig" 1;
  font-style: normal;
}
.home2 .t-button-default { font-feature-settings: "calt" 0; }
@supports (text-box: trim-both cap alphabetic) {
  .home2 [class^="t-"], .home2 [class*=" t-"] { text-box: trim-both cap alphabetic; }
  /* Figma rounds a trimmed text box to a whole pixel; the browser keeps the
     fraction of the cap height, and a column of text nodes drifts by it.
     The margin gives back exactly that fraction. Zero specificity, so a
     section that sets its own margin simply wins. Not on buttons, where the
     label is centred and has no box of its own to round. */
  :where(.home2) :where([class^="t-"], [class*=" t-"]):where(:not(.t-button-default, .cw-form *)) {
    margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap);
  }
}


/* ── section frame ────────────────────────────────────────────────────
   Every Figma section is the same auto-layout: a column, padded by
   section-padding top and bottom and page-margin at the sides, its
   children section-gap apart. .l-section is that; a section adds only
   what is its own. */
.l-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-section-gap);
  padding: var(--spacing-section-padding) var(--gutter);
  position: relative;
}
.l-section > * { max-width: 100%; }
/* Section grounds, named after the Figma fill. Designers stack a Black n%
   fill over White for the greys, so the classes do the same — a ground that
   changes in Figma is one class swapped in the section's markup. */
.l-section--white    { background: var(--color-white); }
.l-section--black-5  { background: linear-gradient(var(--color-black-5), var(--color-black-5)), var(--color-white); }   /* #f2f2f3 */
.l-section--black-10 { background: linear-gradient(var(--color-black-10), var(--color-black-10)), var(--color-white); } /* #e6e6e7 */
.l-section--gray     { background: var(--color-gray); }                                                                 /* #f5f5f5 */

/* A block that fills the section's content width. */
.l-fill { align-self: stretch; }

/* Visually hidden, still read. */
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }