/* B3GT — design tokens + base layer
   Tokens extracted from the approved Claude Design prototype, 2026-07-31.
   Single source of truth for colour, type and motion. */

/* IBM Plex, self-hosted (SIL Open Font License, see ../fonts/OFL.txt).
   Served from this site so no visitor's IP address goes to Google. The files
   are Google Fonts' own WOFF2 subsets, kept to what the five languages use:
   latin for all text in en/fr/es/pt, and arabic for IBM Plex Sans Arabic
   (plus that family's latin, so Latin words inside Arabic pages match what
   they looked like before). unicode-range means a page downloads a file only
   when it has characters in that range: the Arabic files never load on the
   Latin-script pages. IBM Plex Sans is one variable file covering 400-600. */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-serif-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-serif-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* colour */
  --b3-blue:#003179;
  --b3-deep:#001B4D;
  --ink:#14181F;
  --muted:#6A6660;
  --paper:#F6F4EF;
  --surface:#FCFBF8;
  --brick:#C0663F;
  --brick-deep:#A85436;
  --sand:#E4DCCB;
  --sap:#2F6B57;
  --rule:#D8D3C7;

  /* ExpressaTech's light, for the designer's credit in the footer only.
     Their colour, not ours: nothing of B3's may use these. */
  --et-white:rgba(255,255,255,.95);
  --et-cyan:rgba(80,200,255,.75);
  --et-ray:rgba(120,220,255,.85);
  --et-sweep:rgba(110,210,255,.8);

  /* type */
  --serif:"IBM Plex Serif",Georgia,serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-both:cubic-bezier(0.65,0,0.35,1);
  --dur-micro:180ms;
  --dur-base:380ms;
  --dur-reveal:720ms;
  --dur-hero:1400ms;

  /* ambient loop lengths. A different kind of time from --dur-*: those are
     transitions, measured in fractions of a second and felt as a response.
     These run for tens of seconds and are meant to be noticed only in
     peripheral vision, so they carry their own prefix. */
  --loop-drift:28s;
  --loop-arcs:20s;
  --loop-dots:6s;
  --loop-ticker:60s;

  /* layout */
  --wrap:1200px;
  --gut:clamp(20px,4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0}
h1{font-size:clamp(40px,7vw,88px);letter-spacing:-.02em}
h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.015em}
h3{font-size:clamp(22px,2.8vw,34px)}
p{margin:0 0 1em}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* mono label — the workhorse of the visual language */
.lbl{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.lbl--accent{color:var(--brick-deep)}
.lbl--sand{color:var(--sand)}

.rule{border:0;border-block-start:.5px solid var(--rule);margin:0}

/* accessibility */
.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:99;
  background:var(--b3-blue);color:var(--paper);padding:12px 20px;
}
.skip:focus{inset-inline-start:0}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* reveal — enhanced by main.js, renders fully if JS never runs */
.rv{opacity:0;transform:translateY(28px);
    transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

/* section entrance — the same settle, applied to a block's children in
   sequence instead of to one element. Saves tagging every heading and
   paragraph by hand, and keeps the cadence identical everywhere: one beat of
   70ms between children, the same hard decelerate, no bounce. */
.rvs>*{opacity:0;transform:translateY(22px);
       transition:opacity var(--dur-reveal) var(--ease-out),
                  transform var(--dur-reveal) var(--ease-out)}
.rvs.in>*{opacity:1;transform:none}
.rvs.in>*:nth-child(2){transition-delay:70ms}
.rvs.in>*:nth-child(3){transition-delay:140ms}
.rvs.in>*:nth-child(4){transition-delay:210ms}
.rvs.in>*:nth-child(5){transition-delay:280ms}
html:not(.js) .rvs>*{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
  .rvs>*{opacity:1;transform:none}
}