/* Cyber Commons — shared styling for generated lesson pages.
   White ground, Rajdhani, and the Lossless cyan as the one interactive hue.
   On top of that every lesson section carries its own colour and icon, fixed
   across all 134 pages, so the shape of a lesson is learnable: a reader who
   has read two knows where the framework is on the third without reading a
   heading. Amber still means exactly one thing — the adversary — because the
   diagram vocabulary in every lesson reads it that way. */
:root{
  --ink:#ffffff; --ink-2:#f6f9fb; --surface:#eef4f8;
  --line:#d3e0e9; --line-soft:#e6eef4;
  --text:#0d1b26; --text-dim:#34495a; --text-faint:#5b7285;
  --defend:#0e7490; --defend-lt:#0891b2; --defend-soft:#cdeaf2;
  --secure:#a16207; --secure-soft:#fdf0d2;
  --accent:var(--defend);

  /* one hue per lesson section */
  --s-amber:#b45309;  --s-amber-bg:#fff8ec;  --s-amber-ln:#f3ddb6;
  --s-violet:#6d28d9; --s-violet-bg:#f8f5ff; --s-violet-ln:#e0d6f7;
  --s-cyan:#0e7490;   --s-cyan-bg:#f0fbfe;   --s-cyan-ln:#c4e8f2;
  --s-green:#047857;  --s-green-bg:#f1fbf7;  --s-green-ln:#bfe6d6;
  --s-blue:#1d4ed8;   --s-blue-bg:#f4f7ff;   --s-blue-ln:#d3ddfa;
  --s-pink:#be185d;   --s-pink-bg:#fff5f9;   --s-pink-ln:#f7d3e3;
  --s-slate:#475569;  --s-slate-bg:#f7f9fb;  --s-slate-ln:#dde5ec;

  --maxw:900px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);
  font-family:"Rajdhani","Inter",system-ui,-apple-system,sans-serif;
  font-size:17.5px;line-height:1.66;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}
a{color:var(--defend)}
h1,h2,h3,h4{font-family:"Rajdhani","Inter",system-ui,sans-serif;font-weight:700;
  line-height:1.18;letter-spacing:-.005em;margin:0}

/* nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(255,255,255,.88);border-bottom:1px solid var(--line-soft)}
.nav-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;
  justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Rajdhani";font-weight:700;
  font-size:19px;text-decoration:none;color:var(--text)}
.brand img{height:36px;width:auto;display:block}
.brand b{color:var(--defend);font-weight:700}
.brand small{display:block;font-family:"IBM Plex Mono";font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-faint);font-weight:400;margin-top:2px}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-size:14px;color:var(--text-dim);text-decoration:none}
.nav-links a:hover{color:var(--text)}
@media(max-width:700px){.nav-links a{display:none}}

/* lesson head */
.lhead{padding:36px 0 12px}
.crumb{font-family:"IBM Plex Mono";font-size:12px;color:var(--text-faint);
  letter-spacing:.04em;margin-bottom:16px}
.crumb a{color:var(--text-dim);text-decoration:none}
.crumb a:hover{color:var(--text)}
.sid{font-family:"IBM Plex Mono";font-size:13px;color:var(--accent);letter-spacing:.1em}
.lhead h1{font-size:clamp(27px,4.4vw,40px);margin:10px 0 14px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.badge{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:5px;padding:3px 9px}
.badge.d{color:var(--defend);border:1px solid var(--defend-soft)}
.badge.s{color:var(--secure);border:1px solid var(--secure-soft)}
.badge.b{color:var(--text-dim);border:1px solid var(--line)}
.badge.t{color:var(--text-dim);border:1px solid var(--line-soft)}

/* framework labels — which control vocabularies this lesson speaks to.
   Indicative mappings from curriculum/frameworks.json, not a certification. */
.fws{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 4px}
.fwl{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint);margin-right:2px}
.fw{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--line-soft);
  border-radius:5px;padding:3px 8px;background:var(--ink-2);text-decoration:none;
  font-family:"IBM Plex Mono";font-size:11px;color:var(--text);
  transition:border-color .18s,color .18s}
.fw:hover{border-color:var(--defend);color:var(--defend)}
.fw:hover i{color:var(--defend)}
.fw i{font-style:normal;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-faint)}

/* video */
.video{margin:26px 0 30px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--ink-2)}
.video .frame{position:relative;width:100%;aspect-ratio:16/9;background:#0d1b26;
  --on-dark:#b9cad8}
/* an empty slot should not push the lesson below the fold */
.video.empty .frame{aspect-ratio:auto;min-height:190px}
.video .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(77,155,255,.08),transparent 70%)}
.video .ph .icon{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--text-faint);font-size:20px;background:var(--surface)}
.video .ph p{margin:0;color:var(--on-dark,#b9cad8);font-size:14px;max-width:44ch}
.video .ph .lab{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark,#b9cad8)}
.video .cap{padding:12px 16px;border-top:1px solid var(--line-soft);font-family:"IBM Plex Mono";
  font-size:11.5px;color:var(--text-faint);display:flex;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.video .cap a{color:var(--defend);text-decoration:none}

/* risk / control cards */
.rc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media(max-width:720px){.rc{grid-template-columns:1fr}}
.rc > div{border:1px solid var(--line-soft);border-radius:12px;padding:20px;background:var(--ink-2)}
.rc .lab{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:9px}
.rc .risk .lab{color:var(--secure)}
.rc .ctrl .lab{color:var(--defend)}
.rc p{margin:0;font-size:14.8px;color:var(--text-dim)}

/* generic section */
.sec{margin:34px 0}
.sec > h2{font-size:20px;margin-bottom:6px}
.sec > .sub{color:var(--text-faint);font-size:13.5px;margin:0 0 16px}

/* code ------------------------------------------------------------------
   These were dark-theme rules that survived the switch to a white ground:
   a near-black `pre` with pale blue `#cfe0ff` text. On its own that was
   still legible. What made it invisible was the section rule below giving
   every `code` element a light pill background — so a fenced block ended up
   pale blue on near-white, and the `git clone` lines on A0.1 and every
   embedded SKILL.md frontmatter disappeared entirely.
   Both halves are fixed here: the block is light with dark text, and the
   pill is scoped so it can never apply inside a `pre`. */
pre{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;overflow-x:auto;margin:0;color:var(--text)}
code{font-family:"IBM Plex Mono",monospace;font-size:13.2px}
pre code{color:var(--text);background:none;border:0;padding:0;line-height:1.7}
:not(pre) > code{background:var(--surface);border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:13px;color:var(--text)}
/* .expect is gone with the box it styled — an "Expect" panel that rendered at
   the foot of the page, below the chapter bridge, repeating "What you just
   proved". See scripts/exercises/layout.py for what it was and why. */

/* exercise cta */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:"IBM Plex Mono";font-size:13.5px;
  text-decoration:none;padding:12px 18px;border-radius:10px;border:1px solid var(--line);
  color:var(--text);transition:border-color .2s,color .2s}
.btn:hover{border-color:var(--defend);color:var(--defend)}
.btn.p{background:var(--secure);color:#fff;border-color:var(--secure);font-weight:700}
.btn.p:hover{color:#231402;filter:brightness(1.06)}

/* tools used — packages and models in one list, not three categories */
.toolslab{margin-top:22px;text-transform:uppercase;letter-spacing:.08em;
  font-size:11px;color:var(--text-faint)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.chips span{font-family:"IBM Plex Mono";font-size:11.5px;color:var(--text-dim);
  border:1px solid var(--line-soft);border-radius:5px;padding:3px 9px}

/* notes (authored markdown) */
.notes{border-top:1px solid var(--line-soft);padding-top:26px;margin-top:34px}
.notes h2{font-size:22px;margin:26px 0 10px}
.notes h3{font-size:17.5px;margin:22px 0 8px}
.notes p{color:var(--text-dim);margin:0 0 14px}
.notes ul,.notes ol{color:var(--text-dim);padding-left:22px;margin:0 0 14px}
.notes li{margin-bottom:7px}
.notes blockquote{border-left:2px solid var(--line);margin:0 0 16px;padding-left:16px;
  color:var(--text-faint)}
.notes img{max-width:100%;border-radius:10px}
.notes pre{margin-bottom:16px}
.notes table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14.5px}
.notes th,.notes td{border:1px solid var(--line-soft);padding:9px 12px;text-align:left}
.notes th{background:var(--surface);font-family:"Rajdhani";font-weight:700}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 20px}
@media(max-width:640px){.pager{grid-template-columns:1fr}}
.pager a{border:1px solid var(--line-soft);border-radius:12px;padding:16px 18px;text-decoration:none;
  background:var(--ink-2);color:var(--text);transition:border-color .2s}
.pager a:hover{border-color:var(--defend)}
.pager .k{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);display:block;margin-bottom:5px}
.pager .t{font-family:"Rajdhani";font-weight:600;font-size:16px}
.pager .next{text-align:right}

footer{border-top:1px solid var(--line-soft);padding:30px 0 46px;margin-top:20px}
footer .fin{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-family:"IBM Plex Mono";font-size:11.5px;color:var(--text-faint)}
footer a{color:var(--text-dim);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------------- running a lesson
   The button through to the skill in the repository, and the collapsed note
   saying what a run needs. Collapsed because the same few sentences appear on
   every lesson page and a reader who has run one never needs them again. */
.btn.k{background:var(--defend);color:#fff;border-color:var(--defend);font-weight:700}
.btn.k:hover{color:#04101f;filter:brightness(1.08)}
.runnote{margin-top:10px;font-size:13.5px;line-height:1.55}
.runnote b{color:var(--text)}

/* The three ways to do a lesson. They were three paragraphs, and the second
   and third read as consolation prizes because they were headed "No agent?"
   and "Want just the code?". Numbered and boxed alike so a reader sees three
   choices rather than one instruction and two apologies. */
.waysintro{margin:0 0 14px}
.way{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--ink-2)}
.way:last-of-type{margin-bottom:0}
.way h4{margin:0 0 8px;font-size:16px;display:flex;align-items:baseline;gap:9px}
.way h4 em{font-style:normal;font-weight:400;font-size:13.5px;
  color:var(--text-dim)}
.way .wn{flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--defend);color:#fff;font-family:"IBM Plex Mono",monospace;
  font-size:12px;font-weight:600;display:inline-flex;align-items:center;
  justify-content:center;align-self:center}
.way p{margin:0 0 8px;font-size:14.5px;line-height:1.6}
.way pre{margin:0}
.way .runnote{margin-top:8px}
/* The agent table was never styled — it rendered as four bare rows of text. */
table.agents{width:100%;border-collapse:collapse;margin:4px 0 0;font-size:13.5px}
table.agents th{text-align:left;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;padding:0 10px 6px 0;
  border-bottom:1px solid var(--line)}
table.agents td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
table.agents tr:last-child td{border-bottom:0}
@media(max-width:640px){
  table.agents,table.agents tbody,table.agents tr,table.agents td{display:block;
    width:100%}
  table.agents thead{display:none}
  table.agents tr{padding:8px 0;border-bottom:1px solid var(--line)}
  table.agents td{border-bottom:0;padding:2px 0}
}
/* Collapsed by default: the same four sentences appear on every lesson page,
   and a reader who has run one never needs them again. */
details.runnote{margin-top:10px}
details.runnote>summary{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:6px;color:var(--text-faint);font-size:13px;
  padding:3px 0;user-select:none}
details.runnote>summary::-webkit-details-marker{display:none}
details.runnote>summary::before{content:"▸";font-size:11px;
  transition:transform .12s ease;display:inline-block}
details.runnote[open]>summary::before{transform:rotate(90deg)}
details.runnote>summary:hover{color:var(--text)}
details.runnote>summary:focus-visible{outline:2px solid var(--accent,#4D9BFF);
  outline-offset:3px;border-radius:3px}
.runbody{padding:2px 0 0 16px;border-left:1px solid var(--line,#8A93A6);
  margin:6px 0 0 3px}
.runbody p{margin:0 0 8px}
.runbody p:last-child{margin-bottom:0}


/* ---------- the seven lesson sections ---------------------------------------
   Each is a card with its own hue and icon. The colour is not decoration: it
   is how a reader navigates a page they have not read, and it is the same on
   every lesson so the position of a thing is learnable. */
.ls{margin:26px 0 0;border:1px solid var(--line);border-left-width:4px;
  border-radius:12px;background:#fff;overflow:hidden}
.lsh{display:flex;align-items:center;gap:11px;margin:0;padding:14px 20px;
  font-size:17px;font-weight:700;letter-spacing:.01em;
  border-bottom:1px solid var(--line-soft)}
.lsi{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;font-size:14px;flex:none}
.lsb{padding:18px 20px 22px}
.lsb>:first-child{margin-top:0}
.lsb>:last-child{margin-bottom:0}
.lsb p{margin:0 0 13px}
.lsb h3{font-size:17px;margin:22px 0 9px}
.lsb h4{font-size:15px;margin:18px 0 7px;color:var(--text-dim)}
.lsb ul,.lsb ol{margin:0 0 13px;padding-left:22px}
.lsb li{margin:0 0 6px}
.lsb table{width:100%;border-collapse:collapse;margin:0 0 15px;font-size:15.5px}
.lsb th,.lsb td{border:1px solid var(--line);padding:9px 11px;text-align:left;
  vertical-align:top}
.lsb th{background:var(--surface);font-weight:700}
.lsb :not(pre) > code{background:var(--surface);border-radius:4px;padding:1px 5px;
  font-family:"IBM Plex Mono",monospace;font-size:13.5px}

.ls-amber {border-color:var(--s-amber-ln); border-left-color:var(--s-amber)}
.ls-amber  .lsh{background:var(--s-amber-bg); color:var(--s-amber)}
.ls-amber  .lsi{background:var(--s-amber); color:#fff}
.ls-violet{border-color:var(--s-violet-ln);border-left-color:var(--s-violet)}
.ls-violet .lsh{background:var(--s-violet-bg);color:var(--s-violet)}
.ls-violet .lsi{background:var(--s-violet);color:#fff}
.ls-cyan  {border-color:var(--s-cyan-ln);  border-left-color:var(--s-cyan)}
.ls-cyan   .lsh{background:var(--s-cyan-bg);  color:var(--s-cyan)}
.ls-cyan   .lsi{background:var(--s-cyan);  color:#fff}
.ls-green {border-color:var(--s-green-ln); border-left-color:var(--s-green)}
.ls-green  .lsh{background:var(--s-green-bg); color:var(--s-green)}
.ls-green  .lsi{background:var(--s-green); color:#fff}
.ls-blue  {border-color:var(--s-blue-ln);  border-left-color:var(--s-blue)}
.ls-blue   .lsh{background:var(--s-blue-bg);  color:var(--s-blue)}
.ls-blue   .lsi{background:var(--s-blue);  color:#fff}
.ls-pink  {border-color:var(--s-pink-ln);  border-left-color:var(--s-pink)}
.ls-pink   .lsh{background:var(--s-pink-bg);  color:var(--s-pink)}
.ls-pink   .lsi{background:var(--s-pink);  color:#fff}
.ls-slate {border-color:var(--s-slate-ln); border-left-color:var(--s-slate)}
.ls-slate  .lsh{background:var(--s-slate-bg); color:var(--s-slate)}
.ls-slate  .lsi{background:var(--s-slate); color:#fff}

/* section internals */
.ls .lead{font-size:18px;line-height:1.6;color:var(--text)}
/* The hook on a lesson that renders no "Use case relevance" section — the two
   setup pages, whose subject is the reader's own machine. Same paragraph, no
   section chrome, because there is no use case for it to be the relevance of. */
.lead.solo{font-size:18px;line-height:1.6;color:var(--text);
  margin:18px 0 0;padding-left:14px;border-left:3px solid var(--line)}
.ct{margin:14px 0 0;padding:12px 15px;border-radius:9px;
  background:var(--s-amber-bg);border:1px solid var(--s-amber-ln);
  font-size:15.5px;color:var(--text-dim)}
.ct b{color:var(--s-amber)}

/* Day 2 as metrics somebody can take, under the Day table. Two columns
   because the denominator is half the metric: a count with no denominator is
   the failure mode a third of this curriculum is about. */
.metrics{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--ink-2)}
.metrics .lab{margin:0 0 8px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--s-violet,var(--text-faint));font-weight:600}
.metrics table{width:100%;border-collapse:collapse;font-size:14px}
.metrics th{text-align:left;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;padding:0 12px 6px 0;
  border-bottom:1px solid var(--line)}
.metrics td{padding:7px 12px 7px 0;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.5}
.metrics td:first-child{color:var(--text);font-weight:500}
.metrics td:last-child{color:var(--text-dim)}
.metrics tr:last-child td{border-bottom:0}
@media(max-width:640px){
  .metrics table,.metrics tbody,.metrics tr,.metrics td{display:block;width:100%}
  .metrics thead{display:none}
  .metrics tr{padding:7px 0;border-bottom:1px solid var(--line)}
  .metrics tr:last-child{border-bottom:0}
  .metrics td{border-bottom:0;padding:1px 0}
}

.days{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 0}
@media(max-width:760px){.days{grid-template-columns:1fr}}
.days>div{border:1px solid var(--line);border-radius:10px;padding:13px 14px;
  background:var(--ink-2)}
.days span{display:inline-block;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;margin-bottom:8px}
.days .d0 span{background:var(--s-amber-bg); color:var(--s-amber);
  border:1px solid var(--s-amber-ln)}
.days .d1 span{background:var(--s-cyan-bg);  color:var(--s-cyan);
  border:1px solid var(--s-cyan-ln)}
.days .d2 span{background:var(--s-green-bg); color:var(--s-green);
  border:1px solid var(--s-green-ln)}
.days p{margin:0;font-size:15px;line-height:1.5;color:var(--text-dim)}
.fnday{margin:15px 0 0;padding:12px 15px;border-radius:9px;
  background:var(--s-violet-bg);border:1px solid var(--s-violet-ln);
  font-size:15.5px;color:var(--text-dim)}
.fnday b{color:var(--s-violet)}

pre.dia{margin:0 0 18px;padding:16px 18px;border-radius:10px;overflow-x:auto;
  background:var(--s-cyan-bg);border:1px solid var(--s-cyan-ln);
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.5;
  color:var(--text-dim)}
blockquote.anchor{margin:16px 0;padding:11px 16px;border:0;
  border-left:3px solid var(--s-cyan);background:var(--s-cyan-bg);
  border-radius:0 9px 9px 0;font-size:15.5px;color:var(--text-dim)}
.how{margin:20px 0 0;padding-top:18px;border-top:1px dashed var(--line)}
.skillref{font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  color:var(--text-faint)}
pre.front{margin:0 0 16px;padding:13px 15px;border-radius:9px;overflow-x:auto;
  background:var(--surface);border:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--text-dim)}
.skillmd{padding-bottom:6px}
p.nextch{font-weight:700;color:var(--s-slate)}

/* A step the reader may open but is not made to read (build_site.fold_html).
   Same disclosure pattern as details.runnote, but boxed, because it holds whole
   sections and has to read as a unit rather than as a caption. */
details.fold{margin:18px 0;border:1px solid var(--line);border-radius:10px;
  background:var(--ink-2)}
details.fold>summary{cursor:pointer;list-style:none;padding:12px 16px;
  font-weight:600;color:var(--text)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"\25B8";display:inline-block;width:1.1em;
  color:var(--text-dim);transition:transform .15s var(--ease)}
details.fold[open]>summary::before{transform:rotate(90deg)}
details.fold>summary:hover{color:var(--defend)}
details.fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
details.fold .foldbody{padding:2px 16px 14px;border-top:1px solid var(--line-soft)}

/* Markdown pipe tables. The fallback renderer in build_site.py had no table
   case, so 45 tables across 28 lessons emitted as one paragraph of pipes on a
   single line — unreadable on every screen, not only small ones. `.tw` is the
   scroll container for the wide ones; the stacking rule below is what the
   students actually asked for, because a four-column table at phone width
   either squeezes to nothing or forces the horizontal page scroll this
   project's own design rules forbid. */
.tw{margin:4px 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.md{width:100%;border-collapse:collapse;font-size:14px}
table.md th{text-align:left;vertical-align:top;font-weight:600;
  padding:7px 12px 7px 0;border-bottom:2px solid var(--line);
  color:var(--text)}
table.md td{text-align:left;vertical-align:top;padding:7px 12px 7px 0;
  border-bottom:1px solid var(--line-soft);color:var(--text)}
table.md tr:last-child td{border-bottom:0}
table.md code{white-space:nowrap}

@media(max-width:640px){
  /* One block per row, each cell labelled with its column, so nothing is lost
     and nothing scrolls sideways. */
  .tw{overflow-x:visible}
  table.md,table.md tbody,table.md tr,table.md td{display:block;width:100%}
  table.md thead{display:none}
  table.md tr{padding:9px 0;border-bottom:1px solid var(--line)}
  table.md tr:last-child{border-bottom:0}
  table.md td{border-bottom:0;padding:2px 0}
  table.md td[data-h]:not([data-h=""])::before{content:attr(data-h) ": ";
    font-weight:600;color:var(--text-dim)}
  table.md code{white-space:normal;word-break:break-word}
}

/* The copy button on code blocks. Inserted by script after load, so this
   styling only ever applies to a page where the script ran — a blocked script
   leaves the <pre> exactly as it was. */
pre.hascopy{position:relative}
pre.hascopy > button.copy{position:absolute;top:8px;right:8px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1;
  padding:5px 8px;border-radius:5px;cursor:pointer;
  color:var(--text-dim);background:var(--bg);border:1px solid var(--line);
  opacity:0;transition:opacity .12s var(--ease),color .12s var(--ease)}
pre.hascopy:hover > button.copy,
pre.hascopy > button.copy:focus-visible{opacity:1}
pre.hascopy > button.copy:hover{color:var(--accent);border-color:var(--accent)}
pre.hascopy > button.copy:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
@media(max-width:640px){
  /* No hover on a touch screen, so it is always visible — which is the case
     the students were actually asking about. */
  pre.hascopy > button.copy{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  pre.hascopy > button.copy{transition:none}
}

/* ---------------------------------------------------------------------------
   The course guide (site/guide/function-a.html), generated by
   scripts/build_guide.py. It reuses the lesson section vocabulary —
   .ls / .lsh / .lsi / .lsb and the same hue per section — so a trainer who
   has read the lessons already knows what a colour means. Only the blocks
   below are new, and each is here rather than inline because the no-hidden-
   content rule means the page must read correctly with no script at all.

   Deliberately NOT reusing `.lab`: that name is already the small uppercase
   label inside .rc and .video .cap, so a lab block using it would render its
   whole contents at 10px uppercase. Hence `.tlab`. */
.toc{border:1px solid var(--line-soft);border-radius:12px;
  background:var(--ink-2);padding:16px 20px;margin:22px 0 4px}
.tocl{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:9px}
.toc ol{margin:0;padding-left:22px;color:var(--text-dim)}
.toc li{margin:0 0 4px}
.toc a{color:var(--defend);text-decoration:none}
.toc a:hover{text-decoration:underline}

.tlab{border:1px solid var(--line);border-radius:12px;padding:0 18px 16px;
  margin:20px 0 0;background:var(--ink)}
.tlabh{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  margin:0 -18px 14px;padding:12px 18px;border-bottom:1px solid var(--line-soft);
  background:var(--ink-2);border-radius:11px 11px 0 0}
.tlabid{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.09em;
  color:var(--accent)}
.tlabh a{font-family:"Rajdhani";font-weight:700;font-size:17px;
  color:var(--text);text-decoration:none}
.tlabh a:hover{color:var(--defend)}
.tlabmin{margin-left:auto;font-family:"IBM Plex Mono";font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.tlab .rc{margin:0 0 14px}

/* What the command actually prints. Green, matching the "real time execution"
   section hue, and marked with a left bar so it is distinguishable from the
   prose around it at a glance from a lectern. */
.expected{border-left:3px solid var(--s-green);background:var(--s-green-bg);
  border-radius:0 10px 10px 0;padding:13px 16px;margin:0 0 14px}
.expected > :first-child{margin-top:0}
.expected > :last-child{margin-bottom:0}
.expected pre{background:var(--ink);margin:10px 0 0}

/* The question to ask after the lab, and its answer. Pink, matching "Your
   turn", because it is the same kind of thing: something the reader does. */
.debrief{border-left:3px solid var(--s-pink);background:var(--s-pink-bg);
  border-radius:0 10px 10px 0;padding:13px 16px;margin:14px 0 0}
.debrief > :first-child{margin-top:0}
.debrief > :last-child{margin-bottom:0}
.dl{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--s-pink);margin-bottom:7px}

/* A block only somebody running the course for other people needs. Shaded and
   labelled rather than mixed into the prose, so a solo reader can skip it at a
   glance: the guide serves both readers and "project the component table" is
   noise to one of them. Slate, not amber - amber is the adversary throughout
   this curriculum and an audience is not one. */
.room{border:1px dashed var(--s-slate-ln);background:var(--s-slate-bg);
  border-radius:10px;padding:12px 16px;margin:0 0 14px}
.room > :first-child{margin-top:0}
.room > :last-child{margin-bottom:0}
.rl{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--s-slate);margin-bottom:7px}
.room ul{margin:0;padding-left:20px}

/* A key/value table has no thead, so its first column is the label. On a
   phone the stacking rules hide thead and prefix each cell from data-h; a kv
   row has no data-h, so its th must stay visible and stack above the value. */
table.md.kv th{width:30%;border-bottom:1px solid var(--line-soft);
  padding:7px 14px 7px 0;color:var(--text-dim)}
/* 640px, matching the stacking rule above it. Written at 760 first, which
   meant the key/value tables stacked between 641 and 760 while every other
   table on the page stayed a table — two layouts on one page, at the width a
   small tablet uses. */
@media(max-width:640px){
  table.md.kv,table.md.kv tbody,table.md.kv tr,
  table.md.kv th,table.md.kv td{display:block;width:100%}
  table.md.kv th{padding:0;border-bottom:0;font-size:13px;
    letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
  .tlabmin{margin-left:0}
}

/* The derived lesson blocks in the Function B-F course guides. Those pages
   carry one block per lesson built entirely from the tree, so they need two
   labels Function A's hand-authored guide does not: the Day 2 measure with its
   denominator, and what a skill's output contract requires. */
.tmeas{margin:0 0 12px;font-size:15px;color:var(--text-dim)}
.tmeas b{color:var(--s-violet)}
.tcontract{margin:0 0 12px;font-size:14.5px;color:var(--text-dim)}
.tcontract b{color:var(--text)}
.tlab > .anchor{margin:14px 0 0}
.tlab details.fold{margin:0 0 4px}

/* ---------------------------------------------------------------------------
   The course guides as a brochure (site/guide/*.html), generated by
   scripts/build_guide.py.

   The structure follows the reference brochure the guides were asked to match:
   a cover, an overview split into problem and solution, highlights as big
   numbers, what you will learn, the curriculum, who it is for, what is
   included, and a call to action. The colours are this site's own tokens, not
   the reference's. Cyan stays the interactive hue; amber is not used here at
   all, because it means the adversary and nothing in a brochure is one.

   Dark bands carry light text, and the contrast gate measures them: a dark
   panel with inherited dark text is exactly the combination it exists for. */
.bro{display:block}
.bro-in{max-width:var(--maxw);margin:0 auto;padding:56px 24px}
.bro h2{font-size:clamp(28px,4vw,40px);font-weight:500;margin:0 0 26px;
  padding-left:16px;border-left:2px solid var(--line);line-height:1.15}
.bro h3{font-size:18px;margin:0 0 8px}
.bro p{margin:0 0 12px}

/* cover */
.bro-cover{background:#0d1b26;color:#fff}
.bro-top{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:30px max(24px,calc((100% - var(--maxw))/2)) 74px;
  /* A solid colour first, then the gradient over it. The fallback is what a
     browser that drops the gradient shows, and it is also what the contrast
     gate measures against: it reads background-color only, so a gradient on
     its own resolved to the dark cover behind it and flagged dark text on
     dark. */
  background-color:#e0d6f7;
  background-image:linear-gradient(135deg,#cdeaf2 0%,#e0d6f7 55%,#f8f5ff 100%)}
.bro-top a{font-family:"Rajdhani";font-weight:600;font-size:clamp(26px,5vw,42px);
  color:#0d1b26;text-decoration:none;letter-spacing:.01em}
.bro-top span{font-size:34px;color:#0d1b26}
.bro-bottom{padding:44px max(24px,calc((100% - var(--maxw))/2)) 52px}
.bro-kicker{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#9fd5e6;margin-bottom:18px}
.bro-kicker img{display:none}
.bro-cover h1{font-size:clamp(32px,6vw,60px);color:#fff;margin:0 0 14px;
  line-height:1.08;max-width:18ch}
.bro-tag{font-size:19px;color:#cfe4ee;margin:0 0 34px;max-width:46ch}
.bro-meta{display:flex;gap:44px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.2);padding-top:22px}
.bro-meta span{display:block;font-family:"IBM Plex Mono";font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#9fd5e6;margin-bottom:4px}
.bro-meta b{font-size:16px;font-weight:600;color:#fff}
.bro-meta a{color:#9fd5e6}

/* export bar, screen only */
.pdfbar{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;
  gap:14px 24px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  font-size:14.5px;color:var(--text-dim);border-bottom:1px solid var(--line-soft)}
.pdfbar b{color:var(--text)}
.pdfbtns{display:flex;gap:10px;flex-wrap:wrap}
.pdfbtn{font-family:"IBM Plex Mono";font-size:12.5px;cursor:pointer;
  padding:9px 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--ink);color:var(--text)}
.pdfbtn:hover{border-color:var(--defend);color:var(--defend)}
.pdfbtn.p{background:var(--defend);border-color:var(--defend);color:#fff}
.pdfbtn.p:hover{color:#fff;filter:brightness(1.08)}
.pdfbtn:focus-visible{outline:2px solid var(--defend);outline-offset:2px}
.bro-video{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* section bands */
.bro-over{background:var(--s-violet-bg);border-top:1px solid var(--s-violet-ln);
  border-bottom:1px solid var(--s-violet-ln)}
.bro-cur{background:var(--ink-2);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.bro-inc{background:var(--s-cyan-bg);border-top:1px solid var(--s-cyan-ln);
  border-bottom:1px solid var(--s-cyan-ln)}
.bro-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.bro-cols p,.bro-cols li{font-size:15.5px;color:var(--text-dim)}
.bro-cols ul{margin:0;padding-left:20px}
.bro-cols li{margin:0 0 8px}

/* highlights: the big numbers */
.bro-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin:0 0 30px;padding:0 0 26px;border-bottom:1px solid var(--line-soft)}
.bro-stat b{display:block;font-family:"Rajdhani";font-size:clamp(40px,7vw,64px);
  font-weight:600;line-height:1;color:var(--defend)}
.bro-stat span{display:block;margin-top:6px;font-family:"IBM Plex Mono";
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint)}
.bro-facts p{font-size:16.5px;color:var(--text-dim)}
.bro-facts b{color:var(--text)}
.bro-facts small{color:var(--text-faint);font-size:13px}

/* what you will learn */
.bro-skills{list-style:none;counter-reset:skill;margin:0;padding:0}
.bro-skills li{counter-increment:skill;position:relative;padding:0 0 18px 52px;
  margin:0 0 18px;border-bottom:1px solid var(--line-soft)}
.bro-skills li:last-child{border-bottom:0;margin-bottom:0}
.bro-skills li::before{content:counter(skill);position:absolute;left:0;top:-2px;
  font-family:"Rajdhani";font-size:34px;font-weight:600;color:var(--defend);
  line-height:1}
.bro-skills b{display:block;font-size:18.5px;font-weight:600}
.bro-skills span{display:block;color:var(--text-dim);font-size:15.5px;
  margin:2px 0 4px}
.bro-skills em{font-style:normal;font-family:"IBM Plex Mono";font-size:12px;
  color:var(--text-faint)}

/* curriculum: one card per chapter, each the beginning of that chapter */
.bro-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:18px}
.bro-card{background:var(--ink);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px}
.bro-card p{font-size:15px;color:var(--text-dim)}
.bro-cid{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--defend);margin-bottom:6px}
.bro-chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 12px}
.bro-chips a{font-family:"IBM Plex Mono";font-size:11px;text-decoration:none;
  color:var(--text-dim);border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;background:var(--ink-2)}
.bro-chips a:hover{border-color:var(--defend);color:var(--defend)}
.bro-more a{font-family:"IBM Plex Mono";font-size:12.5px;color:var(--defend);
  text-decoration:none}
.bro-row{display:flex;justify-content:space-between;gap:12px;
  padding:8px 0;border-top:1px solid var(--line-soft);text-decoration:none;
  color:var(--text);font-size:15px}
.bro-row small{color:var(--text-faint);font-family:"IBM Plex Mono";
  font-size:11.5px;white-space:nowrap}
.bro-row:hover{color:var(--defend)}

/* who it is for */
.bro-lead{font-size:clamp(18px,2.4vw,22px);font-weight:600;line-height:1.4;
  margin:0 0 28px;max-width:46ch}
.bro-rows{display:grid;gap:0}
.bro-rows > div{display:grid;grid-template-columns:200px 1fr;gap:18px;
  padding:14px 0;border-top:1px solid var(--line-soft)}
.bro-rows span{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);padding-top:4px}
.bro-rows b{font-size:17px;font-weight:600}

/* call to action */
.bro-cta{background:#0d1b26;color:#fff}
.bro-cta h2{color:#fff;border-left-color:rgba(255,255,255,.3)}
.bro-go{margin:0 0 30px}
.bro-go a{display:inline-block;font-family:"Rajdhani";font-weight:700;
  font-size:clamp(24px,4vw,34px);color:#0d1b26;background:#9fd5e6;
  text-decoration:none;padding:12px 24px;border-radius:12px}
.bro-go a:hover{background:#cdeaf2}
.bro-cta .bro-rows > div{border-top-color:rgba(255,255,255,.18)}
.bro-cta .bro-rows span{color:#9fd5e6}
.bro-cta .bro-rows b,.bro-cta .bro-rows a{color:#fff}
.bro-cta .bro-rows a{text-decoration-color:#9fd5e6}

/* the run sheet under it */
.runsheet-head{padding:46px 0 6px;border-top:1px solid var(--line)}
.runsheet-head h2{font-size:clamp(26px,3.6vw,34px);margin:0 0 14px}

@media(max-width:760px){
  .bro-cols{grid-template-columns:1fr}
  .bro-stats{grid-template-columns:repeat(2,1fr)}
  .bro-rows > div{grid-template-columns:1fr;gap:2px}
  .bro-cards{grid-template-columns:1fr}
  .bro-in{padding:40px 20px}
}

/* ---------------------------------------------------------------------------
   Export as PDF. The reference brochure is a tall page, 810 by 1440, so the
   print layout is too: the cover and the closing page fill a page each and
   every other section starts on a new one.

   Margin zero is what stops a browser printing its own URL and page number
   into the corner of every page. The run sheet is hidden unless the visitor
   chose "full guide", because a hundred-page export is not what somebody who
   pressed Print on a brochure meant. */
@page{size:810px 1440px;margin:0}
@media print{
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff;font-size:15px}
  .nav,footer,.noprint,.toc,.pager,.video,.bro-video,.pdfbar,
  button.copy,.crumb{display:none!important}
  .runsheet{display:none}
  html[data-pdf="full"] .runsheet{display:block}

  /* A tall page needs larger type than a screen does, or each section fills
     the top third and the rest is white. `zoom` scales the whole section,
     which is why the heights below are the page height divided by it:
     1196px x 1.2 is 1435px, just under the 1440px page. Exactly 1440 would
     spill a pixel onto a second page and print a blank one after every
     section. 1.35 was tried first and pushed the last two outcomes of a
     seven-item list onto a page of their own. */
  .bro{break-after:page;zoom:1.2;min-height:1196px}
  .bro-in{max-width:none;padding:48px 40px}
  .bro-cover{display:flex;flex-direction:column}
  .bro-top{padding:34px 40px 96px}
  .bro-bottom{flex:1;padding:44px 40px}
  .bro-cta,.bro-cover{min-height:1196px}
  /* The lesson-id chips are navigation. On paper they are a block of small
     identifiers that cannot be clicked, and they made the longest cards run
     onto a second page. */
  .bro-chips,.bro-more{display:none}
  .bro-skills li{padding-bottom:12px;margin-bottom:12px}
  .bro-card,.bro-stat,.bro-skills li,.bro-rows > div{break-inside:avoid}
  .bro-cols{grid-template-columns:1fr 1fr 1fr;gap:20px}
  .bro-stats{grid-template-columns:1fr 1fr 1fr 1fr}
  .bro-cards{grid-template-columns:1fr 1fr}
  .bro-cards.many{grid-template-columns:1fr 1fr 1fr}
  .bro-cards.many .bro-card{padding:14px 14px}
  /* Five or six cards in three columns: two rows have to fit one page, and
     the first row alone was 63% of it. Smaller type is what makes the
     second row fit, rather than cutting a chapter's description. */
  .bro-cards.many .bro-card p{font-size:12.5px;line-height:1.4}
  .bro-cards.many .bro-card h3{font-size:15px;line-height:1.2}
  /* The count beside the title squeezed it to a few characters a line. */
  .bro-cards.many .bro-row{display:block;font-size:12.5px;padding:5px 0}
  .bro-cards.many .bro-row small{margin-left:6px}
  .runsheet .wrap{max-width:none;padding:48px 56px}
  .runsheet .tlab,.runsheet .ls{break-inside:auto}
  a{color:inherit;text-decoration:none}
  .bro-go a{color:#0d1b26}
}

/* Where a chapter begins: its course guide, linked from the first lesson and
   from the chapter heading in the lessons index. A quiet note, not a banner —
   it sits above the lesson and must not compete with the lesson's own title. */
.chapguide{margin:14px 0 0;padding:10px 14px;font-size:15px;
  border-left:3px solid var(--defend);background:var(--s-cyan-bg);
  border-radius:0 8px 8px 0;color:var(--text-dim)}
.chapguide b{color:var(--text)}
.chapguide a{color:var(--defend);font-weight:600;text-decoration:none}
.chapguide a:hover{text-decoration:underline}
.chaphead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:26px 0 8px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:18px}
.chaphead:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.chaphead a{margin-left:auto;font-family:"IBM Plex Mono";font-size:12.5px;
  font-weight:500;color:var(--defend);text-decoration:none}
.chaphead a:hover{text-decoration:underline}

/* The guide index is two pages, not eight. Each guide's brochure has a section
   per page; the index folds the same material into two, so its sections sit
   inside a `.bro-page` and the page, not the section, is what breaks. The six
   guides share a row layout that carries what "what you will learn",
   "curriculum" and "who should attend" carry in a function's own brochure. */
.bro-page{display:block}
.bro-guide{display:grid;grid-template-columns:56px 1fr;gap:14px;
  padding:14px 0;border-top:1px solid var(--line-soft)}
.bro-guides{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.bro-guide:nth-child(-n+2){border-top:0;padding-top:0}
.bro-gl{font-family:"Rajdhani";font-size:46px;font-weight:600;line-height:1;
  color:var(--defend)}
.bro-guide h3{margin:0 0 4px;font-size:19px}
.bro-guide h3 a{color:var(--text);text-decoration:none}
.bro-guide h3 a:hover{color:var(--defend)}
.bro-guide p{margin:0 0 5px;font-size:15px;color:var(--text-dim)}
.bro-gm{font-size:13.5px!important}
.bro-gm b{color:var(--text)}
.bro-gc{font-size:13px!important;line-height:1.55}
.bro-gc a{color:var(--text-dim);text-decoration:none}
.bro-gc a:hover{color:var(--defend)}
.bro-gc small{color:var(--text-faint)}
.bro-cols.two{grid-template-columns:1fr 1fr}
/* Website and source side by side. Stacked they were one row too many for
   the second page of the index. */
.bro-rows.inline{grid-template-columns:1fr 1fr;column-gap:28px}
.bro-rows.inline > div{grid-template-columns:1fr;gap:2px}
@media(max-width:760px){.bro-guides{grid-template-columns:1fr}
  .bro-guide:nth-child(2){border-top:1px solid var(--line-soft);padding-top:14px}
  .bro-guide{grid-template-columns:1fr;gap:4px}
  .bro-cols.two{grid-template-columns:1fr}}
@media print{
  /* No scale-up here, unlike the function guides: six guide rows, the overview
     and a call to action share two pages, and at 1.1x the last two guides
     (E and F) printed on a third and fourth page. */
  .bro-page{break-after:page;min-height:1436px;display:flex;
    flex-direction:column}
  .bro-page .bro{break-after:auto;zoom:1;min-height:0}
  .bro-page .bro-in{padding:30px 40px}
  .bro-page .bro-top{padding:26px 40px 40px}
  .bro-page .bro-bottom{padding:30px 40px 32px}
  .bro-page .bro-hi,.bro-page .bro-cta{flex:1}
  /* Two columns of guides, three rows. One long list of six ran about a
     fifth of a page too tall and pushed the end of the call to action
     onto a third page. */
  /* Stated outright rather than inherited: the mobile rule above
     collapses this grid at 760px, and a printed page evaluates it as
     narrow. The function guides' .bro-cols needed the same. */
  .bro-guides{grid-template-columns:1fr 1fr;gap:0 26px}
  .bro-guide:nth-child(2){border-top:0;padding-top:0}
  .bro-guide{break-inside:avoid;padding:11px 0;gap:10px;
    grid-template-columns:34px 1fr}
  .bro-guide:nth-child(-n+2){padding-top:0}
  .bro-gl{font-size:32px}
  .bro-guide h3{font-size:16px;line-height:1.2}
  .bro-guide p{font-size:12.5px;margin-bottom:3px;line-height:1.4}
  .bro-gm{font-size:11.5px!important}
  .bro-gc{font-size:11px!important;line-height:1.4}
  .bro-cols.two{grid-template-columns:1fr 1fr}
}