/* stitches.css — the stitches.nyc look, as tokens (2026-09-25).
   The first piece of the style guide: one type scale, the fonts, the colours.
   Served at /static/stitches.css; the demo pages load it. The Framer site
   uses the same values.

   Type scale — eight steps, nothing in between:
     12 · 13 · 20 · 24 · 32 · 40 · 60 · 80
   On phones a role steps down one size; body and small never change. */

@font-face { font-family: "IvyPresto Display"; font-weight: 600; font-style: normal; font-display: swap;
             src: url("https://framerusercontent.com/assets/QBLArsVX2lx3FbshxmiMwLPb8.woff2") format("woff2"); }
@font-face { font-family: "Abel"; font-weight: 400; font-style: normal; font-display: swap;
             src: url("https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE6V1LPJp6qGI.woff2") format("woff2"); }

:root {
    /* the scale */
    --size-12: 12px;  --size-13: 13px;  --size-20: 20px;  --size-24: 24px;
    --size-32: 32px;  --size-40: 40px;  --size-60: 60px;  --size-80: 80px;

    /* roles — desktop */
    --text-small:   var(--size-13);   /* meta, labels, fine print */
    --text-body:    var(--size-12);   /* everything you read (Thomas 09-25: 12, not 16) */
    --text-h3:      var(--size-20);   /* a caption, a small heading */
    --text-h2:      var(--size-24);   /* section headings */
    --text-number:  var(--size-32);   /* a live number (the demo's timer) */
    --text-headline: var(--size-60);  /* an H2 that leads the page (the demo's line) */
    --text-h1:      var(--size-80);   /* the page title — very large */

    /* fonts */
    --serif: "IvyPresto Display", Georgia, serif;
    --sans:  "Abel", "Avenir Next", system-ui, sans-serif;
    --mono:  ui-monospace, Menlo, monospace;

    /* colours */
    --violet:   rgb(23, 4, 51);
    --violet-2: rgb(18, 3, 40);
    --black:    #000;
    --white:    #fff;
    --body:     rgba(255, 255, 255, 0.78);
    --muted:    rgb(158, 158, 158);
    --line:     rgba(255, 255, 255, 0.18);
    --coral:    #FF5F74;           /* Electric Coral — P3 below on screens that can show it */
    --steel-blue: #6A8FAF;
    --ground: linear-gradient(180deg, var(--violet) 0%, var(--violet-2) 17%, var(--black) 100%);
}
/* On HDR/P3 screens the coral runs hotter than white. */
@supports (color: color(display-p3 1 0.373 0.455)) { :root { --coral: color(display-p3 1 0.373 0.455); } }

/* phones: each heading role steps down one size */
@media (max-width: 640px) {
    :root {
        --text-h2:     var(--size-20);
        --text-number: var(--size-24);
        --text-headline: var(--size-40);
        --text-h1:     var(--size-60);
    }
}

/* the base type */
body { font-family: var(--sans); font-size: var(--text-body); line-height: 1.65; letter-spacing: 0.01em; color: var(--body); }
h1 { font-family: var(--serif); font-weight: 600; font-size: var(--text-h1); line-height: 1; letter-spacing: -0.03em; color: var(--white); }
h1 em { font-style: normal; color: var(--coral); }
h2 { font-family: var(--serif); font-weight: 600; font-size: var(--text-h2); line-height: 1.2; letter-spacing: -0.01em; color: var(--white); }
h2.headline { font-size: var(--text-headline); line-height: 1.05; letter-spacing: -0.02em; }
h2.headline em { font-style: normal; color: var(--coral); }
h3 { font-family: var(--serif); font-weight: 600; font-size: var(--text-h3); line-height: 1.2; color: var(--white); }
small { font-size: var(--text-small); }