/* JHAI design system 0.2.0. Built from styles.css by scripts/build-css.mjs. */
/* Asset paths are relative to the parent of this file's directory. */
/* tokens/fonts.css */
/* Self-hosted. Never swap these for a CDN link: the scale was set against these subsets. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-var-latin.woff2') format('woff2');
}
/* The italic is the turn. Emphasis is the true italic of the same family, never a
   lighter weight and never a second colour. font-synthesis is off, so a faux italic
   is a bug rather than a fallback. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-var-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}


/* tokens/colors.css */
/* JHAI colour tokens. Names are a binding contract: values may move, names may not. */
:root {
  /* ink ramp */
  --ink-950: #050606;
  --ink-900: #0E0F0E;
  --ink-sweep: #191C15;
  --ink-800: #222222;
  --ink-600: #4A4A48;
  --ink-500: #6B6B68;
  --ink-400: #6E6E6B;
  --ink-300: #B0B0AD;

  /* grounds. paper-50 is the only page ground; paper-0 is application chrome only */
  --paper-50: #F5F5F5;
  --paper-0: undefined;
  --plate-grey: #ECECEA;
  --ghost-fill: #E4E4E1;

  /* on dark */
  --dark-text-1: #E8E8E8;
  --dark-text-2: #B8B8B6;
  --dark-text-3: #A0A0A0;

  /* the accent is Bjarmi. never sage, anywhere */
  --bjarmi-ink: #547070;
  --bjarmi-glow: #87A6A6;
  --bjarmi-tint: rgba(84,112,112,0.10);

  /* hairlines ride whatever ground they land on */
  --line-light: rgba(0,0,0,0.12);
  --line-light-soft: rgba(0,0,0,0.06);
  --line-dark: rgba(255,255,255,0.12);
  --line-dark-soft: rgba(255,255,255,0.08);

  /* feedback. oxidised inks, never UI colours. there is no info hue */
  --error: #8A3A28;
  --error-on-dark: #C08A7A;
  --success: #2E5A3C;
  --success-on-dark: #8FB89A;
  --warning: #6E4E15;
  --warning-on-dark: #C9A96A;

  /* semantic aliases */
  --text-heading: var(--ink-800);
  --text-body: var(--ink-600);
  --text-secondary: var(--ink-500);
  --text-eyebrow: var(--ink-400);
  --surface-page: var(--paper-50);
  --surface-chrome: var(--paper-0);
  --surface-dark: var(--ink-950);
  --accent: var(--bjarmi-ink);
  --accent-on-dark: var(--bjarmi-glow);
}


/* tokens/typography.css */
/* Two families, three weights, one italic. Heading weight is ALWAYS 500. */
:root {
  --font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* display range. four sizes, descending. never above weight 500 */
  --type-hero: clamp(40px, 6vw, 72px);
  --type-display: clamp(36px, 5vw, 60px);
  --type-feature: clamp(32px, 4vw, 48px);
  --type-section: clamp(28px, 3.2vw, 40px);

  /* large non-headings */
  --type-stat: clamp(32px, 4.4vw, 56px);
  --type-ghost-numeral: clamp(44px, 5.5vw, 80px);

  /* card titles */
  --type-card-title-lg: 21px;
  --type-card-title: 19px;

  /* reading */
  --type-lede: 17px;
  --type-body: 14.5px;
  --type-small: 13.5px;
  --type-caption: 13px;

  /* mono */
  --type-eyebrow: 9.5px;
  --type-micro: 10px;

  --weight-heading: 500;
  --eyebrow-gap: 20px;
  --eyebrow-tracking: 0.24em;
}


/* tokens/spacing.css */
/* Nine steps, nothing between them. The ratio is the mechanism: 16px internal against a 240px interval. */
:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 48px; --space-9: 64px;

  --container: 1280px;
  --gutter: 48px;

  /* separation is the interval alone, because there is one ground */
  --section-y: 240px;
  --section-y-display: 280px;
  --gap-internal: 16px;
  --gap-airy-list: 40px;
  --gap-heading-block: 56px;
  --gap-grid: 48px;
  --gap-inline: 12px;

  /* two densities. the type never changes, only the padding */
  --row-comfortable: 28px;
  --row-compact: 14px;

  /* measures are roles, never pixel counts written at a call site */
  --measure-lede: 520px;
  --measure-side: 340px;
  --measure-heading: 620px;
  --measure-head-lede: 460px;
  --measure-row: 640px;
  --measure-standfirst: 820px;
  --measure-statement: 900px;
  --measure-term: 220px;
  --portrait-max: 26rem;

  /* hit targets. nothing interactive under 42px */
  --button-h: 50px;
  --button-h-nav: 42px;
  --button-h-lg: 56px;
  --field-h: 56px;

  /* application chrome */
  --tray-collapsed: 64px;
  --tray-expanded: 232px;
  --header-h: 80px;
  --header-h-scrolled: 64px;
  --header-offset: 120px;
}

@media (max-width: 760px) {
  :root {
    --gutter: 24px;
    --section-y: 120px;
    --section-y-display: 140px;
    --gap-heading-block: 36px;
    --gap-grid: 32px;
  }
}


/* tokens/shape.css */
/* Three radii. 12px on everything, and there are no sharp corners. */
:root {
  --radius-card: 12px;
  --radius-inner: 8px;   /* a control nested inside a 12px shell */
  --radius-pill: 999px;  /* tags only, never a button */
  --radius-check: 4px;   /* the one documented exception: an 18px checkbox */

  /* two shadows in the whole system */
  --shadow-field: 0 10px 40px rgba(10, 11, 11, 0.35);
  --shadow-lift: 0 24px 48px rgba(10, 11, 11, 0.22);
}


/* tokens/motion.css */
/* One curve, decelerating only. Nothing bounces. */
:root {
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 200ms;   /* colour and border */
  --dur-med: 400ms;    /* arrow shift, tray open */
  --dur-slow: 700ms;   /* image scale, scroll reveal */
  --hover-img-scale: 1.02;
  --hover-arrow-shift: 4px;
  --pressed-opacity: 0.82;
  --reveal-translate: 24px;
  --reveal-stagger: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* tokens/surfaces.css */
/*
 * The dark surface is a recipe, not a fill. There is no flat dark ground in this brand.
 * A control is not a ground: at 44px the 240px grain tile and the sweep are larger than
 * the object, so a button takes the flat base instead.
 */
:root {
  --grain-tile: 240px;
  --grain-tile-photo: 180px;
  --grain-opacity-photo: 0.05;
}

.jh-void {
  background-color: var(--ink-950);
  background-image:
    url('../assets/grain.svg'),
    radial-gradient(120% 90% at 50% 46%, rgba(5,6,6,0) 38%, rgba(2,3,3,.74) 100%),
    linear-gradient(90deg, rgba(22,25,20,.62) 0%, rgba(12,14,11,.22) 34%, rgba(5,6,6,0) 62%),
    radial-gradient(130% 110% at 86% -14%, var(--ink-sweep) 0%, rgba(12,14,11,0) 56%),
    linear-gradient(202deg, var(--ink-900) 0%, var(--ink-950) 64%);
  background-size: var(--grain-tile) var(--grain-tile), auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal, normal, normal;
  border-radius: var(--radius-card);
  color: var(--dark-text-1);
}


/* tokens/base.css */
/* The base every surface starts from. */
html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-page);
  color: var(--text-heading);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
* { box-sizing: border-box; }

a { color: var(--text-heading); text-decoration: none; }
a:hover { color: var(--text-body); }

/* weight and colour inherit, always */
em { font-style: italic; font-weight: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd, table { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* the accent's structural jobs */
::selection { background: var(--accent); color: var(--paper-50); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* tabular figures in columns of numerals only. this typeface widens the comma
   under tnum, so a price sets proportionally. */
.jh-tnum { font-variant-numeric: tabular-nums; }

.jh-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.jh-band { padding: var(--section-y) 0; }