/* The look for the Canadian AI Directory (#4184, look lock revision 2: North Modern, Swiss frame, gradient-mapped pictures).
   One token file: link it after site.css. Lock: agent-spaces/pennant/notes/canadian-ai/4184-look-lock.md
   Fonts: Inter Tight (display) and Inter (body), SIL OFL 1.1 (fonts/LICENSE), self-hosted. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-tight-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-tight-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-variable.woff2) format("woff2")}

/* Fallback faces: local Arial, scaled to Inter's and Inter Tight's widths and line metrics (measured from the font files over English letter frequency), so the swap to the web font does not move a line. */
@font-face{font-family:"Inter Fallback";font-weight:100 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:107.48%;ascent-override:90.14%;descent-override:22.44%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:102.35%;ascent-override:94.65%;descent-override:23.57%;line-gap-override:0%}
@font-face{font-family:"Inter Tight Fallback";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:95.84%;ascent-override:101.08%;descent-override:25.17%;line-gap-override:0%}
@font-face{font-family:"Inter Tight Fallback";font-weight:800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:97.94%;ascent-override:98.92%;descent-override:24.63%;line-gap-override:0%}

:root{
  /* Lock section 5 */
  --bg:#ffffff; --panel:#f2f4f5; --line:#000000; --ink:#000000; --muted:#5c6670;
  --act:#D71920; --proof:#D71920; --link:#00759F; --live:#008CC8;
  --sans:"Inter","Inter Fallback",Helvetica,Arial,sans-serif; --display:"Inter Tight","Inter Tight Fallback","Inter","Inter Fallback",sans-serif;
  --ft-bg:#000000; --ft-word:#D71920;
  /* What the shared parts in site.css read: the same names, mapped to the look */
  --fill:#e3e7e9; --fill-2:#000000; --strong:#000000;
  --serif:var(--sans);
  --rule:1px solid var(--line); --rh-w:2px; --head-case:none; --vr:1px solid #000;
  --w-head:800;
  /* The type scale (#4400). Every size on a page is one of these. The fluid steps run from 390 px to 1440 px
     (y = 15.26px + .19vw is 16px at 390 and 18px at 1440; the others are the same slope, 2px higher or lower). */
  --f-body:clamp(16px,15.26px + .19vw,18px);    /* running text */
  --f-text:clamp(15px,14.26px + .19vw,17px);    /* card, job and news rows: what a skimmer reads */
  --f-small:clamp(13px,12.26px + .19vw,15px);   /* true captions only: sources, dates, keys, footer */
  --f-title:clamp(18px,17.26px + .19vw,20px);   /* card and row titles, the wordmark */
  --f-door:clamp(21px,19.9px + .28vw,24px);     /* the big home-page doors */
  --f-lead:clamp(20px,16.3px + .95vw,28px);    /* a page's answer or opening line */
  --f-index:clamp(28px,26px + .5vw,34px);      /* big index numbers */
  --f-micro:11px;                               /* column heads inside a table that is already narrow */
  --f-chip:13px; --f-chip-sm:12px;              /* map chips: maps/chips.ts places them from exactly these sizes, so they stay fixed */
  --f-hero:clamp(40px,4.4vw,64px); --f-h1:clamp(44px,5.6vw,84px); --f-h1-sm:34px; --f-h2:clamp(28px,2.6vw,38px);
  --ft-ink:#ffffff; --ft-link:#c9d0d4; --ft-rule:#3a3f42;
}

body{font-family:var(--sans);letter-spacing:-.003em}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:0;line-height:1.05}
h3{font-weight:700}
a{color:var(--link);text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

/* The red geometric mark: a block with an arrow cut into it, as in North Modern */
.mark{font-family:var(--display);font-weight:800;letter-spacing:0;font-size:var(--f-title);line-height:1.1;color:var(--ink);text-decoration:none}
.mark:hover{color:var(--ink)}
.mark i{width:30px;height:30px;background:var(--act);clip-path:polygon(0 0,100% 0,100% 58%,50% 100%,0 58%)}
footer .mark i{background:var(--act)}

/* Header: white, one black rule under it; the current page is marked in cyan */
header{border-bottom:2px solid var(--line);background:var(--bg)}
header nav a{color:var(--ink);font-weight:500;font-size:var(--f-text)}
header nav a:hover{color:var(--link)}
header nav a.on{background:none;padding:0 0 4px;font-weight:700;box-shadow:inset 0 -3px 0 var(--live)}
.menu summary{border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.menu[open] summary{background:var(--ink);color:var(--bg)}

/* Actions are red and square */
.btn{border:0;background:var(--act);color:#fff;border-radius:0}
.btn.primary{background:var(--act);color:#fff}
.btn:hover{color:#fff;background:#b01218}
.chips button{border:1px solid var(--line);font-family:var(--sans)}
.pages .cur{box-shadow:inset 0 -3px 0 var(--live);color:var(--ink);font-weight:700;padding:6px 10px}
.tabs a.on{box-shadow:inset 0 -3px 0 var(--live);color:var(--ink);font-weight:700}
.tabs.strip{--ic:var(--act)}
.tabs.strip a.on{box-shadow:inset 0 3px 0 var(--act);font-weight:600}

/* Section heads: a 2px black rule, then the heading */
.rh .see{color:var(--ink)}

/* The six facts: the yes mark is the one red square */
.sym{border:2px solid var(--ink)}
.f b{font-family:var(--display);font-weight:700;font-size:var(--f-title);letter-spacing:-.01em}

/* The footer: black, with CAID drawn in red (an SVG built in site.js) */
footer{border-top:0}
.ft-cols h3{font-family:var(--display);color:var(--ft-ink);letter-spacing:0}
.ft-cols a:hover,.ft-bar a:hover{color:#fff}
.ft-bar a{color:var(--ft-link)}
.ft-name svg{fill:var(--ft-word)}

/* Numbers that stack in a list (#4402). Inter's default figures are proportional, so 4 and 88 sit ragged.
   Every list of counts, times or years takes tabular figures here, so digits of the same place line up; no page sets this itself.
   Facet counts follow their label, muted, on its line (#4184 design A). */
.fg label span{margin-left:0;flex:none;color:var(--muted)}
.fg label span,.latest li b,.index .n,.facts3 .n,.answer li>b,.provs li span,.cities a span,[data-jobs]{font-variant-numeric:tabular-nums}

/* Keyboard focus (#4405): one ring for every stop. The 2px of page colour between the control and the ring keeps it
   readable on white, on the red buttons, on the panel and on photographs; the footer swaps to its own two colours. */
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px var(--bg)}
footer :focus-visible{outline-color:var(--ft-ink);box-shadow:0 0 0 2px var(--ft-bg)}
main:focus{outline:none;box-shadow:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);font-weight:700;padding:12px 16px;z-index:10}
.skip:focus{position:fixed;left:12px;top:12px}