/* jp design tokens — ported verbatim from the brand's design-system bundle. */

@font-face{font-family:"Aminute";src:url("../assets/fonts/Aminute.woff2") format("woff2"),url("../assets/fonts/Aminute.woff") format("woff"),url("../assets/fonts/Aminute.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* four brand colours — no fifth colour, no light/dark variants */
  --jp-black:#111112;
  --jp-orange:#F26B0F;
  --jp-lime:#D1F038;
  --jp-white:#F9F9FC;
  /* the only three greys that exist: contour colours, one per surface */
  --jp-stroke-on-black:#3B3B3D;
  --jp-stroke-on-lime:#BFCE5D;
  --jp-stroke-on-white:#D6D6D9;

  --font-display:"Aminute","Montserrat",system-ui,sans-serif;
  --font-text:"Montserrat",system-ui,sans-serif;

  --ease-arc:cubic-bezier(.5,0,.15,1);
  --ease-out-arc:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms;
  --dur-base:240ms;
  --dur-slow:520ms;

  --surface-page:var(--jp-black);
  --surface-card:var(--jp-black);
  --surface-invert:var(--jp-lime);
  --surface-light:var(--jp-white);

  --text-primary:var(--jp-white);
  --text-secondary:var(--jp-stroke-on-white);
  --text-on-accent:var(--jp-black);
  --text-on-invert:var(--jp-black);

  --accent-primary:var(--jp-orange);
  --accent-highlight:var(--jp-lime);

  --border-default:var(--jp-stroke-on-black);
  --border-on-invert:var(--jp-stroke-on-lime);
  --border-on-light:var(--jp-stroke-on-white);

  --action-bg:var(--jp-orange);
  --action-fg:var(--jp-black);
  --action-ghost-fg:var(--jp-white);
  --state-active:var(--jp-lime);
  --focus-ring:var(--jp-lime);

  --radius-card:8px;
  --radius-panel:8px;
  --radius-media:8px;
  --radius-input:999px;
  --radius-pill:999px;
  --radius-button:999px;
  --border-width:1.5px;
  --backdrop-stroke-ratio:0.0045;

  --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;
  --space-6:48px;--space-8:64px;--space-10:80px;--space-12:96px;--space-16:128px;
  --gutter:var(--space-3);
  --section-y:var(--space-12);
  --page-max:1200px;

  --text-display-xl:clamp(3rem,7vw,5.5rem);
  --text-display-l:clamp(2.5rem,5vw,3.75rem);
  --text-display-m:2.5rem;
  --text-display-s:2rem;
  --text-sub-l:1.25rem;
  --text-sub-s:0.9375rem;
  --text-body-l:0.875rem;
  --text-body-s:0.6875rem;
  --text-label:0.625rem;

  --weight-text:400;
  --weight-medium:500;

  --leading-display:0.94;
  --leading-sub:1.25;
  --leading-body:1.5;

  --tracking-display:-0.01em;
  --tracking-body:0;
  --tracking-label:0.13em;
}

html{background:var(--surface-page)}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-text);font-weight:var(--weight-text);font-size:var(--text-body-l);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;text-transform:lowercase;line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin:0}
h1{font-size:var(--text-display-l)}h2{font-size:var(--text-display-m)}h3{font-size:var(--text-display-s)}h4{font-size:var(--text-sub-l)}
p{margin:0}
a{color:var(--jp-orange);text-decoration:none;transition:color var(--dur-fast) var(--ease-arc)}
a:hover{color:var(--jp-lime)}
:focus-visible{outline:var(--border-width) solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-pill)}
::selection{background:var(--jp-lime);color:var(--jp-black)}
.jp-label{font-family:var(--font-text);font-weight:var(--weight-medium);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.jp-display{font-family:var(--font-display);text-transform:lowercase;font-weight:400;line-height:var(--leading-display)}