/* Pyxl Design System 2.0 tokens — copied verbatim from the design system, concatenated into one local file. No external requests. */

/* ── fonts.css ───────────────────────────── */
/* Pyxl webfonts. Variable TTFs shipped from the brand kit.
   Fraunces = display/editorial. Epilogue = body/interface/system — the only two families. */

@font-face{font-family:"Fraunces";src:url("/assets/fonts/Fraunces-Variable.ttf") format("truetype-variations"),url("/assets/fonts/Fraunces-Variable.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/Fraunces-Italic-Variable.ttf") format("truetype-variations"),url("/assets/fonts/Fraunces-Italic-Variable.ttf") format("truetype");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Epilogue";src:url("/assets/fonts/Epilogue-Variable.ttf") format("truetype-variations"),url("/assets/fonts/Epilogue-Variable.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Epilogue";src:url("/assets/fonts/Epilogue-Italic-Variable.ttf") format("truetype-variations"),url("/assets/fonts/Epilogue-Italic-Variable.ttf") format("truetype");font-weight:100 900;font-style:italic;font-display:swap}

/* ── colors.css ───────────────────────────── */
/* Pyxl 2.0 colour system — values transcribed from the Figma file's Variables
   collection and the COLORS specimen frame. Paper and Midnight lead; Electric,
   Electric, Coral, Sage and Orange are reserved for points of attention. Cyan is retired. */

:root{
  /* ── Core palette ─────────────────────────────────────────── */
  --color-paper-500:#FBF8F1;          /* rgb(251,248,241) page ground */
  --color-paper-200:#FDFCF8;          /* rgb(253,252,248) card ground on paper */
  --color-midnight-500:#020520;       /* rgb(2,5,32) ink + dark surfaces */
  --color-electric-blue-500:#0E43E3;  /* rgb(14,67,227) */
  --color-electric-blue-300:#4A79F5;  /* lightened electric — the only electric legible on midnight (4.8:1) */
  --color-cyan-500:#26EEFB;           /* rgb(38,238,251) — retired from the site; sage is the fifth accent */
  --color-orange-500:#FC9F25;         /* rgb(252,159,37) — never used alone: orange only appears
                                        as the far stop of --gradient-coral-to-orange */
  --color-orange-700:#8A4B00;         /* deepened orange — the only orange legible as text on paper (5.9:1) */
  --color-coral-500:#FC7353;          /* rgb(252,115,83) */
  /* retired 2026-08-24: dark red is out of use site-wide. Text accents clip
     --gradient-electric-to-coral; labelled fills use --gradient-coral-to-orange.
     Kept defined only so the .pyxl-dark remap and any stale reference still resolve. */
  --color-coral-700:#B8351B;          /* deepened coral — the coral legible as text on paper (5.56:1) */
  --color-sage-500:#C6D9C7;           /* muted botanical — the fifth accent, for supporting grounds on paper */
  --color-sage-700:#3F6B45;           /* deepened sage — the sage legible as text on paper (5.4:1) */
  --color-sage-300:#A8CBAB;           /* lightened sage — the sage legible on midnight (7.9:1) */

  /* ── Figma variable roles ─────────────────────────────────── */
  --primary-500:var(--color-midnight-500);
  --secondary-500:var(--color-electric-blue-500);
  --tertiary-500:var(--color-sage-500);
  --accent-500:var(--color-coral-500);
  --supporting-500:var(--color-orange-500);

  /* ── Semantic surfaces ────────────────────────────────────── */
  --surface-page:var(--color-paper-500);
  --surface-card:var(--color-paper-200);
  --surface-card-dark:var(--color-midnight-500);
  --surface-inset:rgba(2,5,32,0.04);
  --surface-tag-accent:linear-gradient(98.467deg,rgba(14,67,227,0.06) 0%,rgba(198,217,199,0.10) 100%);

  /* ── Semantic text ───────────────────────────────────────── */
  --text-body:var(--color-midnight-500);
  --text-muted:rgba(2,5,32,0.66);    /* 6.3:1 on paper */
  --text-subtle:rgba(2,5,32,0.60);   /* 5.3:1 on paper */
  --text-faint:rgba(2,5,32,0.56);    /* 4.6:1 on paper — the floor, still AA */
  --text-on-dark:var(--color-paper-500);
  --text-on-dark-muted:rgba(251,248,241,0.8);
  --text-on-dark-faint:rgba(251,248,241,0.5);   /* 4.7:1 on midnight */
  --text-link:var(--color-electric-blue-500);
  --text-eyebrow:var(--color-electric-blue-500);
  --text-eyebrow-on-dark:rgba(251,248,241,0.62); /* eyebrows on midnight are muted paper — cyan retired */

  /* ── Semantic lines ──────────────────────────────────────── */
  --line-hairline:rgba(2,5,32,0.1);
  --line-strong:var(--color-midnight-500);
  --line-ring:rgba(2,5,32,0.2);
  --line-accent:rgba(14,67,227,0.2);
  --line-on-dark:rgba(251,248,241,0.12);
}

/* Dark scope — apply to a midnight section or card to flip text roles. */
.pyxl-dark{
  --surface-page:var(--color-midnight-500);
  --surface-card:var(--color-midnight-500);
  --text-body:var(--color-paper-500);
  --text-muted:rgba(251,248,241,0.8);   /* 10.3:1 on midnight */
  --text-subtle:rgba(251,248,241,0.6);  /* 6.4:1 */
  --text-faint:rgba(251,248,241,0.5);   /* 4.7:1 — the floor, still AA */
  --text-eyebrow:rgba(251,248,241,0.62);
  --text-link:var(--color-electric-blue-300);
  --line-hairline:rgba(251,248,241,0.12);
  --line-ring:rgba(251,248,241,0.2);

  /* Accents flip too. The -500 electric and the deepened coral, sage and orange are
     tuned for paper and fail on midnight: electric-blue-500 measures 2.8:1 and
     coral-700 measures 3.41:1, both below AA for normal text. Each one remaps to the
     variant this palette already documents as the midnight-legible one, so a component
     can write var(--color-electric-blue-500) once and be correct in either scope. */
  --color-electric-blue-500:#4A79F5;  /* was #0E43E3 — 2.8:1 → 5.1:1 on midnight */
  --color-coral-700:#FC7353;          /* was #B8351B — 3.4:1 → 7.4:1 */
  --color-sage-700:#A8CBAB;           /* was #3F6B45 — 1.9:1 → 11.3:1 */
  --color-orange-700:#FC9F25;         /* was #8A4B00 — 1.7:1 → 9.7:1 */
  color:var(--text-body);
}

/* ── gradients.css ───────────────────────────── */
/* The four named gradients from the Figma Variables collection, plus the
   ambient-glow recipe from the brand guidelines. Gradients drive colour usage. */

:root{
  --gradients-electric-to-coral-100:var(--color-electric-blue-500);
  --gradients-electric-to-coral-200:var(--color-coral-500);
  --gradients-sage-to-electric-100:var(--color-sage-500);
  --gradients-cyan-to-electric-100:var(--color-cyan-500);
  --gradients-sage-to-electric-200:var(--color-electric-blue-500);
  --gradients-cyan-to-electric-200:var(--color-electric-blue-500);
  --gradients-midnight-to-electric-100:var(--color-midnight-500);
  --gradients-midnight-to-electric-200:var(--color-electric-blue-500);
  --gradients-coral-to-orange-100:var(--color-coral-500);
  --gradients-coral-to-orange-200:var(--color-orange-500);

  --gradient-electric-to-coral:linear-gradient(90deg,#0E43E3 0%,#FC7353 100%); /* @kind color */
  --gradient-sage-to-electric:linear-gradient(90deg,#C6D9C7 0%,#0E43E3 100%); /* @kind color */
  /* retired: superseded by --gradient-sage-to-electric */
  --gradient-cyan-to-electric:linear-gradient(90deg,#26EEFB 0%,#0E43E3 100%); /* @kind color */
  --gradient-electric-to-sage:linear-gradient(90deg,#0E43E3 0%,#C6D9C7 100%); /* @kind color */
  /* retired: superseded by --gradient-electric-to-sage */
  --gradient-electric-to-cyan:linear-gradient(90deg,#0E43E3 0%,#26EEFB 100%); /* @kind color */
  --gradient-midnight-to-electric:linear-gradient(90deg,#020520 0%,#0E43E3 100%); /* @kind color */
  /* The only sanctioned appearance of orange. Orange is never a flat fill or a text
     colour on its own — it is the far stop of this gradient and nothing else. */
  --gradient-coral-to-orange:linear-gradient(90deg,#FC7353 0%,#FC9F25 100%); /* @kind color */
  /* Same two stops running top-to-bottom, for vertical rules and left-edge accents.
     A 90deg gradient sliced onto a vertical edge renders flat, so a rule drawn down
     the side of a block needs this one to read as a gradient at all. */
  --gradient-coral-to-orange-v:linear-gradient(180deg,#FC7353 0%,#FC9F25 100%); /* @kind color */
  /* 135deg variant used for bullet dots and small marks */
  --gradient-rule:linear-gradient(135deg,#0E43E3 0%,#26EEFB 100%); /* @kind color */

  /* Ambient glow — dual off-centre radials, electric 36% / coral 30% */
  --ambient-glow:radial-gradient(60% 55% at 22% 18%,rgba(14,67,227,0.36) 0%,rgba(14,67,227,0) 70%),radial-gradient(55% 50% at 82% 72%,rgba(252,115,83,0.30) 0%,rgba(252,115,83,0) 70%); /* @kind color */
  /* Bloom behind dark-section graphics — sage since cyan was retired */
  --glow-bloom:0px -46px 213px 0px rgba(198,217,199,0.72);
  --glow-inset:inset 0px 0px 17.9px 0px rgba(198,217,199,0.3);
}

/* ── typography.css ───────────────────────────── */
/* Type system. Two families only. Fraunces carries display, headlines and pull quotes —
   normal 400 for the first clause, Light Italic 300 for the turn. Epilogue handles body,
   interface, the 9px uppercase system label and micro-labels. Sizes are the file's own. */

:root{
  --font-display:"Fraunces",ui-serif,Georgia,serif;
  --font-body:"Epilogue",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Aliases kept so existing references resolve; both are Epilogue. */
  --font-ui:var(--font-body);
  --font-mono:var(--font-body); /* @kind font */

  --font-weight-display:400;
  --font-weight-display-light:300;
  --font-weight-500:500;

  /* Display / editorial (Fraunces) */
  --size-hero:clamp(72px,10vw,148px);
  --lh-hero:1.0; /* @kind other */
  --tracking-hero:-0.02em;
  --size-hero-sub:56.685px;
  --size-section:56px;
  --lh-section:64.4px;
  --tracking-section:-0.84px;
  --size-card-title:32px;
  --lh-card-title:35.2px;
  --size-stat:28px;
  --lh-stat:28px;
  --tracking-stat:-0.56px;
  --size-faq:22px;
  --lh-faq:30.8px;
  --tracking-faq:-0.33px;

  /* Body / interface (Epilogue) */
  --size-lede:18.109px;
  --lh-lede:41.392px;
  --size-subhead:17px;
  --lh-subhead:27.2px;
  --size-body:16px;
  --lh-body:25.6px;
  --size-body-sm:14px;
  --lh-body-sm:21.7px;
  --size-body-xs:13px;
  --lh-body-xs:20.15px;
  --size-caption:11px;
  --lh-caption:17.6px;
  --size-label:10px;
  --lh-label:15.5px;
  --size-system:9px;
  --lh-system:13.95px;
  --size-micro:8px;
  --lh-micro:12.4px;

  /* System-label tracking ladder — wide, uppercase, 600wt */
  --tracking-system:1.8px;
  --tracking-label:0.8px;
  --tracking-label-wide:2.2px;
  --tracking-button:1.2px;
  --tracking-caption:1.32px;
}

/* Utility classes — the recurring type roles, so screens stay consistent. */
.pyxl-hero{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:var(--size-hero);line-height:var(--lh-hero);letter-spacing:var(--tracking-hero);color:var(--text-body)}
.pyxl-section-title{font-family:var(--font-display);font-weight:400;font-size:var(--size-section);line-height:var(--lh-section);letter-spacing:var(--tracking-section);color:var(--text-body)}
.pyxl-turn{font-family:var(--font-display);font-weight:300;font-style:italic}
.pyxl-card-title{font-family:var(--font-display);font-weight:300;font-size:var(--size-card-title);line-height:var(--lh-card-title)}
.pyxl-lede{font-family:var(--font-body);font-weight:400;font-size:var(--size-lede);line-height:var(--lh-lede);letter-spacing:-0.02em}
.pyxl-body{font-family:var(--font-body);font-weight:400;font-size:var(--size-body);line-height:var(--lh-body)}
.pyxl-system{font-family:var(--font-body);font-weight:600;font-size:var(--size-system);line-height:var(--lh-system);letter-spacing:var(--tracking-system);text-transform:uppercase}
.pyxl-micro{font-family:var(--font-body);font-weight:500;font-size:var(--size-micro);line-height:var(--lh-micro);letter-spacing:0.04em}

/* ── space.css ───────────────────────────── */
/* Spacing, radii, shadows and layout. Section rhythm is 140px top / 120px bottom
   at desktop; the content column is 1240px inside a 1472px frame. */

:root{
  --space-2:2px;
  --space-4:4px;
  --space-6:6px;
  --space-8:8px;
  --space-12:12px;
  --space-14:14px;
  --space-16:16px;
  --space-20:20px;
  --space-24:24px;
  --space-28:28px;
  --space-32:32px;
  --space-36:36px;
  --space-40:40px;
  --space-48:48px;
  --space-80:80px;
  --space-120:120px;
  --space-140:140px;

  --container-max:1240px;
  --container-gutter:116px;
  --grid-gap:20px;
  --section-pad-top:140px;
  --section-pad-bottom:120px;

  /* One box radius, one pill radius. Every box, card, panel, tile, image frame, input
     and media well is 32px — there are no sharp corners and no intermediate steps.
     Anything a person clicks that reads as a button is a pill. On an element shorter
     than 64px the browser clamps 32px to half the height, which is what makes small
     chips and tabs read as pills without a second token. The sm / panel / tile names
     are kept only so existing call sites keep resolving; they all return 32px. */
  --radius-card:32px;
  --radius-card-sm:32px;
  --radius-panel:32px;
  --radius-tile:32px;
  --radius-pill:100px;
  --radius-ring:14px;

  --stroke-hairline:0.625px;
  --stroke-1:1px;

  --shadow-card:0px 2px 16px 0px rgba(2,5,32,0.04);
  --shadow-card-dark:0px 2px 16px 0px rgba(0,0,0,0.2);
  --shadow-lift:0px 16px 48px 0px rgba(2,5,32,0.08);
  --shadow-hairline-ring:0 0 0 0.5px var(--color-midnight-500);
}

/* ── motion.css ───────────────────────────── */
/* Motion: restrained and purposeful. Three moves, nothing else. */

:root{
  --ease-standard:ease; /* @kind other */
  --ease-brand:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */ /* the brand curve: quick departure, long settle */
  --duration-hover:0.3s; /* @kind other */
  --duration-reveal:0.7s; /* @kind other */
  --lift-hover:-4px;
  --transition-card:transform var(--duration-hover) var(--ease-standard),box-shadow var(--duration-hover) var(--ease-standard);
  --transition-button:background-color var(--duration-hover) var(--ease-standard),color var(--duration-hover) var(--ease-standard);
}

@keyframes pyxl-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pyxl-reveal{animation:pyxl-fade-up var(--duration-reveal) var(--ease-standard) both}
@media (prefers-reduced-motion:reduce){.pyxl-reveal{animation:none}}

/* ── base.css ───────────────────────────── */
/* Minimal element defaults so specimen cards and screens start from brand ground. */

body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--size-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--color-midnight-500)}
::selection{background:var(--color-sage-500);color:var(--color-midnight-500)}

/* Paper grain. A fixed, multiply-blended fractal-noise wash that keeps large
   paper fields from reading as flat screen white. From the site prototype. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4wNiAwIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+")}

/* ── a11y.css ───────────────────────────── */
/* Accessibility layer — focus, motion, and screen-reader affordances.
   These are behavioural defaults, not brand decisions; every value here
   draws on the same tokens as the rest of the system. */

/* Focus ring. Keyboard only — never shown on mouse press.
   The indicator is a COMPOSITE and both halves are load-bearing. Coral #FC7353 measures
   7.38:1 on midnight but only 2.57:1 on paper, which is below the 3:1 that WCAG 2.2
   SC 1.4.11 requires of a non-text indicator. On paper the midnight halo below carries it
   at 4.46:1; on midnight the halo is invisible and the coral ring carries it alone.
   Do not remove either half believing the other is sufficient. */
*:focus{outline:none}
*:focus-visible{
  outline:2px solid var(--color-coral-500);
  outline-offset:3px;
  border-radius:2px;
}
/* On paper the coral ring alone is thin; a midnight halo carries it. */
:root :focus-visible{box-shadow:0 0 0 4px rgba(2,5,32,0.55)}
.pyxl-dark :focus-visible{box-shadow:0 0 0 4px rgba(2,5,32,0.9)}

/* Skip link. Visually hidden until focused, then a paper capsule top-left. */
.pyxl-skip{
  position:absolute;left:16px;top:-64px;z-index:999;
  padding:12px 20px;border-radius:100px;
  background:var(--color-midnight-500);color:var(--color-paper-500);
  font-family:var(--font-body);font-weight:600;font-size:13px;
  text-decoration:none;transition:top .18s cubic-bezier(0.22,1,0.36,1);
}
.pyxl-skip:focus{top:16px}

/* Screen-reader-only text. */
.pyxl-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Respect the OS motion preference. The brand's fluid motion is a
   flourish, never load-bearing, so it is safe to remove entirely. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}