/* Built file: the token layers used to be eight chained @imports, which the
   browser could only discover one after the other. They are inlined here so the
   whole design system arrives in a single request. Edit assets/css/tokens/*.css
   and re-run the merge, or edit below. */

/* --- tokens/fonts.css --- */
/* Jolto webfonts — served from Google Fonts (see readme.md "Font substitutions"). */
:root{
  --font-display:"Bricolage Grotesque","Schibsted Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --font-sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --font-editorial:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* --- tokens/colors.css --- */
:root{
  /* Brand core — paper, purple, lime + the fourth colour (see guidelines/concept-*) */
  --jolt-purple:#8116E0;
  --jolt-lime:#D0FF00;
  --jolt-paper:#FEFEFC;
  --jolt-sand:#F2E4C9;
  --jolt-fourth:var(--jolt-sand);

  /* Purple ramp (derived in oklch from --jolt-purple) */
  --purple-050:#F6EDFE;
  --purple-100:#EBD9FD;
  --purple-200:#D7B4FA;
  --purple-300:#BC85F4;
  --purple-400:#9F4BEB;
  --purple-500:#8116E0;
  --purple-600:#6D0FC0;
  --purple-700:#570B99;
  --purple-800:#3E0870;

  /* Sand ramp — the fourth colour */
  --sand-100:#FBF5EA;
  --sand-200:#F2E4C9;
  --sand-300:#E4CFA8;
  --sand-400:#CDB587;

  /* Lime ramp */
  --lime-100:#F4FFC2;
  --lime-200:#E6FF7A;
  --lime-300:#D0FF00;
  --lime-400:#B6E000;
  --lime-500:#96B900;
  --lime-600:#6E8800;

  /* Neutrals — paper to a mid purple-grey. The ramp stops before anything dark. */
  --ink-000:#FEFEFC;
  --ink-050:#F8F6FB;
  --ink-100:#EEEAF3;
  --ink-200:#DCD5E5;
  --ink-300:#B7AEC5;
  --ink-400:#8C839B;
  --ink-500:#6E6280;
  --ink-600:#4A3D5C;

  /* Semantic — surfaces */
  --surface-page:var(--ink-000);
  --surface-raised:#FFFFFF;
  --surface-sunken:var(--ink-050);
  --surface-card:#FFFFFF;
  --surface-inverse:var(--purple-700);
  --surface-brand:var(--purple-500);
  --surface-accent:var(--lime-300);
  --surface-sand:var(--jolt-sand);

  /* Semantic — text */
  --text-display:var(--purple-700);
  --text-body:var(--ink-600);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-on-brand:var(--jolt-paper);
  --text-on-accent:var(--purple-700);
  --text-on-sand:var(--purple-700);
  --text-on-inverse:var(--jolt-paper);
  --text-link:var(--purple-500);
  --text-link-hover:var(--purple-600);

  /* Semantic — lines */
  --border-hairline:var(--ink-200);
  --border-strong:var(--purple-700);
  --border-inverse:rgba(254,254,252,.22);
  --border-focus:var(--purple-500);

  /* Semantic — status (kept deliberately narrow) */
  --status-positive:#1F7A3D;
  --status-warning:#B8720A;
  --status-critical:#C0271C;
  --status-info:var(--purple-500);
}

/* --- tokens/typography.css --- */
:root{
  /* Display scale — tight, optically negative tracking */
  --type-mega:clamp(56px,11vw,168px);
  --type-d1:clamp(44px,6.5vw,96px);
  --type-d2:clamp(36px,4.6vw,68px);
  --type-d3:clamp(28px,3.2vw,48px);
  --type-h1:34px;
  --type-h2:26px;
  --type-h3:20px;
  --type-body-lg:19px;
  --type-body:16px;
  --type-body-sm:14px;
  --type-caption:12px;
  --type-label:11px;

  --leading-display:0.92; /* @kind other */
  --leading-tight:1.08;
  --leading-snug:1.25;
  --leading-body:1.55;
  --leading-loose:1.7;

  --track-mega:-0.04em;
  --track-display:-0.035em;
  --track-wordmark:-0.035em;
  --track-heading:-0.02em;
  --track-body:-0.005em;
  --track-label:0.1em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:900;
}
.jolto-mega{font:var(--weight-medium) var(--type-mega)/var(--leading-display) var(--font-display);letter-spacing:var(--track-mega);color:var(--text-display)}
.jolto-d1{font:var(--weight-medium) var(--type-d1)/var(--leading-display) var(--font-display);letter-spacing:var(--track-display);color:var(--text-display)}
.jolto-d2{font:var(--weight-medium) var(--type-d2)/var(--leading-tight) var(--font-display);letter-spacing:var(--track-display);color:var(--text-display)}
.jolto-d3{font:var(--weight-medium) var(--type-d3)/var(--leading-tight) var(--font-display);letter-spacing:var(--track-heading);color:var(--text-display)}
.jolto-h2{font:var(--weight-semibold) var(--type-h2)/var(--leading-snug) var(--font-sans);letter-spacing:var(--track-heading);color:var(--text-display)}
.jolto-h3{font:var(--weight-semibold) var(--type-h3)/var(--leading-snug) var(--font-sans);letter-spacing:var(--track-heading);color:var(--text-display)}
.jolto-editorial{font:400 var(--type-d2)/1.02 var(--font-editorial);letter-spacing:-0.015em;color:var(--text-display)}
.jolto-body{font:var(--weight-regular) var(--type-body)/var(--leading-body) var(--font-sans);letter-spacing:var(--track-body);color:var(--text-body);text-wrap:pretty}
.jolto-body-lg{font:var(--weight-regular) var(--type-body-lg)/var(--leading-body) var(--font-sans);letter-spacing:var(--track-body);color:var(--text-body);text-wrap:pretty}
.jolto-caption{font:var(--weight-regular) var(--type-caption)/1.4 var(--font-sans);color:var(--text-muted)}
.jolto-label{font:var(--weight-medium) var(--type-label)/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}

/* --- tokens/spacing.css --- */
:root{
  /* 4px base, doubling at the top for editorial whitespace */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:192px;

  --gutter:24px;
  --page-pad:clamp(20px,5vw,72px);
  --measure:64ch;
  --max-width:1360px;
  --section-y:clamp(64px,10vw,192px); /* @kind spacing */
  --grid-columns:12; /* @kind other */
}

/* --- tokens/radius.css --- */
:root{
  --radius-0:0px;
  --radius-1:6px;
  --radius-2:10px;
  --radius-3:16px;
  --radius-4:24px;
  --radius-5:36px;
  --radius-pill:999px;
  --border-width:1px;
  --border-width-strong:1.5px;
}

/* --- tokens/elevation.css --- */
:root{
  /* Shadows are used sparingly: hairline borders do most of the separation work. */
  --shadow-none:none;
  --shadow-1:0 1px 2px rgba(87,11,153,.07);
  --shadow-2:0 8px 24px -8px rgba(87,11,153,.16);
  --shadow-3:0 24px 64px -24px rgba(87,11,153,.28);
  --shadow-brand:0 20px 48px -20px rgba(129,22,224,.45);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);
  --blur-glass:saturate(180%) blur(18px); /* @kind other */
  --overlay-scrim:rgba(87,11,153,.55); /* @kind color */
}

/* --- tokens/motion.css --- */
:root{
  --dur-instant:90ms; /* @kind other */
  --dur-fast:160ms; /* @kind other */
  --dur-base:260ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
  --ease-spring:cubic-bezier(.34,1.42,.64,1); /* @kind other */
  --press-scale:0.975; /* @kind other */
  --hover-lift:-2px; /* @kind spacing */
}
@keyframes jolto-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes jolto-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes jolto-scroll-line{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes jolto-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms; /* @kind other */ --dur-base:0ms; /* @kind other */ --dur-slow:0ms /* @kind other */}}

/* --- tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--type-body);line-height:var(--leading-body);letter-spacing:var(--track-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--text-link) 35%,transparent);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}
::selection{background:var(--jolt-lime);color:var(--purple-700)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-1)}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
button{font:inherit}

/* --- site --- */
/* Section reveals slide in horizontally; clip keeps that off the scrollbar
   without turning the body into a scroll container (sticky nav stays intact). */
body{overflow-x:clip}

/* The WP admin bar is fixed over the viewport top, so the sticky header has to
   start below it. Under 600px the admin bar scrolls away, so no offset there. */
:root{--jolto-sticky-top:0px}
body.admin-bar{--jolto-sticky-top:32px}
@media screen and (max-width:782px){body.admin-bar{--jolto-sticky-top:46px}}
@media screen and (max-width:600px){body.admin-bar{--jolto-sticky-top:0px}}

/* Phones: the big editorial spacing steps are what sit between sections, so
   halving just those tightens the rhythm without touching gaps inside blocks. */
@media (max-width:760px){
  :root{
    --space-7:28px;
    --space-8:36px;
    --space-9:48px;
    --space-10:60px;
    --space-11:88px;
    --section-y:56px;
  }
}

/* Nothing on the page may push the document wider than the screen. Grid and
   flex children default to min-width:auto, so one long word can widen a whole
   section; clipping the viewport and letting words break stops that. */
/* jolto-no-hscroll */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
@media (max-width:860px){
  h1,h2,h3,p,span,a,li{overflow-wrap:break-word}
  .jolto-svc-packrow>*{min-width:0}
}

/* Long gradients over a saturated colour band in 8-bit. A faint noise layer
   dithers the steps away; it is invisible on its own at this opacity. */
.jolto-dither{position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
@media (prefers-reduced-motion:reduce){.jolto-dither{opacity:.04}}