/* ART/GTO brand: the Notation identity, final kit (brand guidelines v1.0, 5 Nov 2026: marketing/identity/final/).
   Klein fields, vermilion = the answer, acid = the point, white and ink; Mist the only tint. Archivo Expanded 900 /
   STIX Two Text / Martian Mono; squared corners. Logo files: /brand/logo, /brand/lockup, /brand/wordmark, /brand/slash
   (copied from final/kit; f1 at 32 px and up, m01-6 at 16-31 px, the slash icon below 16 px; s7 is a video device only).
   The --b-* names are the site's; the kit's own --artgto-* tokens and .artgto-* atoms (final/kit/brand.css) are below them.
   Load after the page's own stylesheet; pages use these tokens, never raw hex. */
@import url("../fonts/brand/brand-fonts.css");

:root {
  /* colour */
  --b-klein: #1B2FD1;        /* ground: drenched fields, links on white */
  --b-klein-deep: #13209A;   /* hover on Klein, pressed */
  --b-verm: #FF4A1C;         /* the answer: one emphasis per view, the spade, primary action */
  --b-verm-deep: #D93A10;    /* vermilion text on white (≥4.5:1) */
  --b-acid: #D4FF3A;         /* the point: highlights, labels on Klein/ink, never text on white */
  --b-white: #FFFFFF;
  --b-paper: #EEF0FA;        /* Mist: the one quiet panel tint (Klein at 7 %), never cream */
  --b-ink: #0D0E1F;          /* proof ink: text on light, dark fields */
  --b-ink-2: #4A4D68;        /* ink-soft: secondary text on white */
  --b-peri: #8E9BFF;         /* secondary text and rules on Klein/ink */
  --b-rule: #D7DAE8;         /* hairlines on light */

  /* type */
  --b-display: "Archivo", system-ui, sans-serif;     /* use with font-stretch:125%; font-weight:900; uppercase for titles */
  --b-serif: "STIX Two Text", "Cambria Math", Georgia, serif;   /* prose and maths */
  --b-mono: "Martian Mono", ui-monospace, Consolas, monospace;  /* data, labels, numbers */
  /* one type scale for every page (Nov 2026: scaled down so the next section shows above the fold) */
  --b-t-display: clamp(30px, 4.2vw, 60px);   /* hero headline, one per page */
  --b-t-title: clamp(28px, 3.4vw, 48px);     /* page titles on subpages */
  --b-t-h2: clamp(24px, 2.8vw, 38px);        /* section titles */
  --b-t-h3: clamp(19px, 1.7vw, 24px);        /* cards, sub-sections */
  --b-t-lead: clamp(16px, 1.25vw, 18px);     /* the paragraph under a headline */
  --b-t-body: 17px;
  --b-hero-pad: clamp(28px, 4vw, 56px);      /* top / bottom padding of a hero field */
  --b-t-small: 15px;
  --b-t-label: 12px;

  /* shape and space */
  --b-radius: 0;             /* everything is squared */
  --b-frame: 3px;            /* panel frames */
  --b-s1: 6px; --b-s2: 12px; --b-s3: 24px; --b-s4: 48px; --b-s5: 96px;

  /* motion */
  --b-ease: cubic-bezier(.2, .9, .25, 1.15);   /* a block lands with a small overshoot */
  --b-dur: .28s;
}

/* Shared atoms any page may use */
.b-display { font-family: var(--b-display); font-weight: 900; font-stretch: 125%; letter-spacing: -.01em; line-height: .95; text-transform: uppercase; }
.b-mono { font-family: var(--b-mono); letter-spacing: .04em; }
.b-label { font-family: var(--b-mono); font-size: var(--b-t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.b-block { display: inline-block; padding: .18em .34em .12em; }            /* a slammed headline block */
.b-block--white { background: var(--b-white); color: var(--b-klein); }
.b-block--verm { background: var(--b-verm); color: var(--b-white); }
.b-block--ink { background: var(--b-ink); color: var(--b-white); }
.b-field--klein { background: var(--b-klein); color: var(--b-white); }
.b-field--ink { background: var(--b-ink); color: var(--b-white); }
.b-field--paper { background: var(--b-paper); color: var(--b-ink); }
.b-btn { display: inline-flex; align-items: center; gap: .5em; padding: 14px 22px; border: 0; border-radius: 0; cursor: pointer;
  font: 700 15px/1 var(--b-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  background: var(--b-verm); color: var(--b-ink); transition: transform var(--b-dur) var(--b-ease), background .2s; }   /* ink on vermilion: white is only 3.3:1 */
.b-btn:hover { background: var(--b-ink); color: var(--b-white); transform: translateY(-2px); }
.b-btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 var(--b-frame) currentColor; }
.b-btn--ghost:hover { background: var(--b-acid); color: var(--b-ink); box-shadow: none; }
.b-sec { font-family: var(--b-mono); font-size: var(--b-t-label); letter-spacing: .1em; color: var(--b-klein); }  /* "§1" section numbers */
:focus-visible { outline: 3px solid var(--b-verm); outline-offset: 2px; }

/* The kit's tokens and atoms (final/kit/brand.css), same values */
:root {
  --artgto-klein: var(--b-klein); --artgto-white: var(--b-white); --artgto-ink: var(--b-ink);
  --artgto-vermilion: var(--b-verm); --artgto-acid: var(--b-acid); --artgto-mist: var(--b-paper); --artgto-ink-soft: var(--b-ink-2);
  --artgto-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --artgto-text: 'STIX Two Text', Georgia, 'Times New Roman', serif;
  --artgto-mono: 'Martian Mono', ui-monospace, Consolas, monospace;
  --artgto-h1: clamp(34px, 5.4vw, 72px); --artgto-h2: clamp(28px, 3.8vw, 46px); --artgto-h3: 22px;
  --artgto-body: 17px; --artgto-label: 11px;
  --artgto-slash-angle: 45deg;  /* the spade's flank */
  --artgto-slash-weight: 0.28;  /* horizontal stem as a share of cap height */
}
.artgto-display { font-family: var(--artgto-display); font-weight: 900; font-stretch: 125%; letter-spacing: -0.015em; line-height: .98; }
.artgto-label { font: 600 var(--artgto-label)/1.4 var(--artgto-mono); letter-spacing: .12em; text-transform: uppercase; }
/* the 45-degree slash: dividers, bullets, frequency separators, chapter numbers, loading; vermilion = a step or the answer */
.artgto-slash, .b-slash { display: inline-block; width: 1.02em; height: .8em; background: var(--artgto-vermilion);
  clip-path: polygon(0 100%, 78% 0, 100% 0, 22% 100%); vertical-align: -.05em; }
.artgto-divider { display: flex; align-items: center; gap: .6em; }
.artgto-divider::before, .artgto-divider::after { content: ""; flex: 1; height: 2px; background: var(--artgto-ink); }
@media (prefers-reduced-motion: reduce) { .b-btn { transition: none; } }