/* JJ brand tokens. GENERATED from the JJ design system's tokens.json
   (claude.ai/artifact/2WkWDkxphR2MqaLXmRtdvg). Do not edit by hand: change the
   design system, then regenerate. Source: JJ Brand Guideline PDF, Fisheye Creative, 2026. */

@font-face{font-family:'Libre Baskerville';src:url('/fonts/LibreBaskerville-Variable.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Baskerville';src:url('/fonts/LibreBaskerville-Italic-Variable.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo Expanded';src:url('/fonts/ArchivoExpanded-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  /* colours: the five brand colours, three supporting values, print inks */
  --night-turquoise:#004137;
  --cool-black:#121923;
  --muted-khaki:#C6BE8B;
  --anzac:#E0B848;
  --black-green:#222F28;
  --green-tone:#134D3F;
  --cool-black-raised:#1B2533;
  --white:#FFFFFF;
  --black:#000000;
  /* families */
  --font-display:"Archivo Expanded", "Arial Black", sans-serif;
  --font-serif:"Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;
  /* spacing */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;
  --space-18:72px;
  --space-24:96px;
  --space-32:128px;
  /* radius */
  --radius-0:0;
  --radius-lg:16px;
  --radius-round:50%;
  /* border */
  --border-hairline:1px;
  --border-rule:2px;
  --border-box:4px;
  /* canvas */
  --post-width:1080px;
  --post-height:1350px;
  --square-height:1080px;
  --story-height:1920px;
  --slide-width:1920px;
  --slide-height:1080px;
  --page-width:794px;
  --page-height:1123px;
}

/* ground: green is the default, set data-theme on any section to switch it */
:root,[data-theme="green"]{
  --surface:var(--night-turquoise);
  --surface-raised:var(--green-tone);
  --ink:var(--muted-khaki);
  --ink-strong:var(--anzac);
  --accent:var(--anzac);
  --on-accent:var(--night-turquoise);
  --rule:rgba(255, 255, 255, 0.3);
  --rule-strong:var(--muted-khaki);
  --grid-line:var(--white);
  --keyline:var(--muted-khaki);
  --pattern:var(--green-tone);
  --focus:var(--accent);
  --focus-ring:0 0 0 2px #004137, 0 0 0 4px #E0B848;
}
[data-theme="night"]{
  --surface:var(--cool-black);
  --surface-raised:var(--cool-black-raised);
  --ink:var(--muted-khaki);
  --ink-strong:var(--anzac);
  --accent:var(--anzac);
  --on-accent:var(--night-turquoise);
  --rule:rgba(255, 255, 255, 0.3);
  --rule-strong:var(--muted-khaki);
  --grid-line:rgba(255, 255, 255, 0.3);
  --keyline:var(--night-turquoise);
  --pattern:var(--cool-black-raised);
  --focus:var(--accent);
  --focus-ring:0 0 0 2px #121923, 0 0 0 4px #E0B848;
}
[data-theme="khaki"]{
  --surface:var(--muted-khaki);
  --surface-raised:var(--muted-khaki);
  --ink:var(--night-turquoise);
  --ink-strong:var(--night-turquoise);
  --accent:var(--night-turquoise);
  --on-accent:var(--muted-khaki);
  --rule:rgba(10, 2, 0, 0.3);
  --rule-strong:var(--night-turquoise);
  --grid-line:rgba(10, 2, 0, 0.3);
  --keyline:var(--night-turquoise);
  --pattern:rgba(0, 65, 55, 0.08);
  --focus:var(--accent);
  --focus-ring:0 0 0 2px #C6BE8B, 0 0 0 4px #004137;
}

/* type styles */
.display-hero{font-family:var(--font-display);font-size:120px;line-height:0.94;font-weight:900;letter-spacing:-0.01em}
.display-xl{font-family:var(--font-display);font-size:88px;line-height:0.95;font-weight:900;letter-spacing:-0.01em}
.display-lg{font-family:var(--font-display);font-size:64px;line-height:0.95;font-weight:900;letter-spacing:-0.005em}
.display-md{font-family:var(--font-display);font-size:40px;line-height:1;font-weight:900}
.display-sm{font-family:var(--font-display);font-size:24px;line-height:1.1;font-weight:900;letter-spacing:0.01em}
.label{font-family:var(--font-display);font-size:13px;line-height:1.45;font-weight:900;letter-spacing:0.14em}
.label-sm{font-family:var(--font-display);font-size:11px;line-height:1.45;font-weight:900;letter-spacing:0.16em}
.statement{font-family:var(--font-serif);font-size:44px;line-height:1.2;font-weight:400;font-style:italic}
.quote{font-family:var(--font-serif);font-size:30px;line-height:1.35;font-weight:400;font-style:italic}
.subhead{font-family:var(--font-serif);font-size:26px;line-height:1.3;font-weight:700;font-style:italic}
.keyword{font-family:var(--font-serif);font-size:24px;line-height:1.25;font-weight:600}
.lede{font-family:var(--font-serif);font-size:21px;line-height:1.55;font-weight:400}
.body{font-family:var(--font-serif);font-size:17px;line-height:1.65;font-weight:400}
.body-sm{font-family:var(--font-serif);font-size:15px;line-height:1.6;font-weight:400}
.caption{font-family:var(--font-serif);font-size:13px;line-height:1.5;font-weight:400}
.fine-print{font-family:var(--font-serif);font-size:11px;line-height:1.5;font-weight:400}
.canvas-lede{font-family:var(--font-serif);font-size:40px;line-height:1.35;font-weight:400}
.canvas-body{font-family:var(--font-serif);font-size:30px;line-height:1.5;font-weight:400}
.canvas-caption{font-family:var(--font-serif);font-size:22px;line-height:1.45;font-weight:400}
.canvas-label{font-family:var(--font-display);font-size:20px;line-height:1.3;font-weight:900;letter-spacing:0.14em}