/* ============================================================================
   site.css — layout and the site's own components, built on the Swiss system.

   The prototype this is derived from carried ~95% of its styling in inline
   attributes and had no media queries at all. Everything here is that design
   expressed as classes, plus the responsive behaviour it lacked.

   The system's four convictions, which every rule below respects:
     · one typeface, doing every job through weight and tracking
     · structure drawn with hard rules that meet at square corners
     · one accent, used at full strength or not at all
     · nothing is rounded, and nothing casts a shadow
   ========================================================================= */

/* --------------------------------------------------------------- page ---- */

html {
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

a { color: var(--color-accent); }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--color-accent); color: #fff; }

/* The UA rule for [hidden] is `display:none` at the lowest specificity, so any
   class that sets `display` silently defeats it. Everything hidden by script
   here relies on the attribute, so it has to win. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-text); color: var(--color-bg);
  padding: 12px 18px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* One container rule, used by every section. */
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: var(--gutter, 40px); }

.section       { padding-block: 56px 8px; }
.section-tight { padding-block: 40px 8px; }

/* ---------------------------------------------------------------- type --- */

.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
  margin: 0;
}
.label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent);
}

.title-hero {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(42px, 8.4vw, 96px); line-height: .95;
  letter-spacing: -0.03em; text-transform: uppercase;
  margin: 14px 0 20px;
}
.title-section {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(27px, 4.4vw, 46px); line-height: 1.03;
  letter-spacing: -0.02em; text-transform: uppercase;
  margin: 8px 0 20px;
}
.title-sub {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(19px, 2.3vw, 26px); line-height: 1.15;
  letter-spacing: -0.005em; text-transform: uppercase;
  margin: 0 0 12px;
}
.title-minor {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 16px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase;
  margin: 0 0 6px;
}

.lede {
  font-size: clamp(16px, 1.55vw, 19px); line-height: 1.55;
  max-width: 760px; margin: 0 0 24px;
}
.prose { color: var(--color-neutral-800); }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--color-accent); font-weight: 700; }
.prose b, .prose strong { font-weight: 700; }
.small { font-size: 13.5px; line-height: 1.6; }
.muted { color: var(--color-neutral-600); }
.tnum  { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- nav --- */

/* The nav is a row of hard cells. The current page is filled, not underlined —
   this system marks state by inverting a block, never by tinting a word. */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
  display: flex; align-items: stretch;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 clamp(16px, 3vw, 26px); margin-right: auto;
  font-family: var(--font-heading); font-weight: 900; font-size: 17px;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.nav-brand:hover { color: var(--color-accent); }
.nav-course {
  color: var(--color-accent); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-links li { display: flex; }
.nav-links a {
  display: flex; align-items: center; padding: 18px 15px;
  border-left: 1px solid var(--color-text);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { background: var(--color-accent); color: #fff; }
.nav-links a[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
.nav-print a { color: var(--color-neutral-600); }

.nav-toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text); border-left: 1px solid var(--color-text);
  padding: 0 16px;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-menu[open] > .nav-toggle { background: var(--color-text); color: var(--color-bg); }

.theme-toggle {
  border: 0; border-left: 1px solid var(--color-text);
  background: transparent; color: var(--color-text); cursor: pointer;
  width: 52px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { background: var(--color-accent); color: #fff; }
.theme-toggle svg { width: 16px; height: 16px; }

/* Desktop: the disclosure is not a disclosure. The <details> ships CLOSED so a
   phone — and a scriptless browser — gets a working collapsed menu; here we
   force it open, overriding both the legacy display:none mechanism and Chrome's
   newer ::details-content / content-visibility one. */
.nav-menu { display: flex; }
@media (min-width: 981px) {
  .nav-menu > .nav-toggle { display: none; }
  .nav-menu > .nav-links  { display: flex; }
  .nav-menu::details-content { content-visibility: visible; block-size: auto; }
}
@media (max-width: 980px) {
  .nav-menu { position: relative; }
  .nav-menu > .nav-links {
    position: absolute; right: 0; top: 100%; z-index: 70;
    flex-direction: column; min-width: 230px;
    background: var(--color-bg);
    border: 2px solid var(--color-text); border-top: 0;
  }
  .nav-menu > .nav-links a { border-left: 0; border-bottom: 1px solid var(--color-text); padding: 14px 18px; }
  .nav-menu > .nav-links li:last-child a { border-bottom: 0; }
}

/* -------------------------------------------------------------- layout --- */

.split { display: grid; grid-template-columns: 1.45fr 1fr; gap: 44px; align-items: start; }
.split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }

/* Card rows share their rules rather than floating apart. */
.grid-3 > *, .grid-2 > * { border-left: 1px solid var(--color-text); }
.grid-3 > *:first-child, .grid-2 > *:first-child { border-left: 0; }
.grid-3, .grid-2 { border: 1px solid var(--color-text); }
.grid-3 > .card-out, .grid-2 > .card-out { border: 0; border-left: 1px solid var(--color-text); }
.grid-3 > .card-out:first-child, .grid-2 > .card-out:first-child { border-left: 0; }

@media (max-width: 900px) {
  .split, .split-even { grid-template-columns: 1fr; gap: 26px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-3 > *:nth-child(2n+1) { border-left: 0; }
  .grid-3 > *:nth-child(n+3) { border-top: 1px solid var(--color-text); }
}
@media (max-width: 640px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .grid-3 > *, .grid-2 > * { border-left: 0; border-top: 1px solid var(--color-text); }
  .grid-3 > *:first-child, .grid-2 > *:first-child { border-top: 0; }
}
@media (max-width: 760px) { :root { --gutter: 22px; } }
@media (max-width: 420px) { :root { --gutter: 15px; } }

/* Contents — numbered rows on rules. */
.contents { border-top: 2px solid var(--color-text); }
.contents a {
  display: flex; gap: 20px; align-items: baseline;
  padding: 20px 4px; border-bottom: 1px solid var(--color-text);
  text-decoration: none; color: var(--color-text);
}
.contents a:hover { background: var(--color-accent); color: #fff; padding-inline: 14px 4px; }
.contents a:hover .n { color: #fff; }
.contents .n { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--color-accent); }
.contents .t { font-family: var(--font-heading); font-size: clamp(17px, 2vw, 22px); font-weight: 800; text-transform: uppercase; line-height: 1.15; }
@media (min-width: 761px) { .contents { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } }

/* ---------------------------------------------------------- components --- */

.panel { border: 1px solid var(--color-text); padding: 22px 24px; }
.panel-tight { padding: 16px 18px; }
/* Deliberately no `.panel + .panel { margin-top }` rule: panels are also grid
   cells here, and a sibling margin silently knocks every cell after the first
   out of alignment with its row. Stacked panels use .stack instead. */

.formula-grid {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px 20px;
  align-items: center; font-size: 15.5px;
}
.formula-grid dt { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
.formula-grid dd { margin: 0; }
@media (max-width: 620px) {
  .formula-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .formula-grid dd { margin-bottom: 12px; }
}

.aside { border: 1px solid var(--color-text); padding: 22px 24px; font-size: 14.5px; line-height: 1.65; }
.aside .label { display: block; margin-bottom: 12px; }
.aside p { margin: 0 0 10px; }
.aside p:last-child { margin-bottom: 0; }
.math-block { font-size: 15px; line-height: 1.9; }

/* "Watch out" — a heavy red edge, because a rule is how this system shouts. */
.watchout {
  border: 1px solid var(--color-text);
  border-left: 5px solid var(--color-accent);
  padding: 20px 24px; margin: 22px 0;
  font-size: 15px; line-height: 1.65;
}
.watchout .label { display: block; margin-bottom: 10px; }
.watchout ul { margin: 0; padding-left: 20px; }
.watchout li + li { margin-top: 9px; }
.watchout li::marker { color: var(--color-accent); }

.worked { border: 1px solid var(--color-text); padding: 22px 24px; margin: 18px 0; }
.worked > .label { display: block; margin-bottom: 8px; }
.worked-title { font-family: var(--font-heading); font-weight: 800; font-size: 17px; text-transform: uppercase; margin: 0 0 12px; }
.steps { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.85; }
.steps li { margin-bottom: 5px; }
.steps li::marker { color: var(--color-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.answer {
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 2px solid var(--color-text);
}

/* Figures. .plate supplies the frame; .plate-fig the air inside it. */
figure.plate, figure.plate-fig { margin: 0 0 8px; }
.figcap { font-size: 12.5px; color: var(--color-neutral-600); margin-top: 10px; line-height: 1.5; }
/* Figures are numbered so the prose can point at one. */
.figcap .fig-no {
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent); margin-right: .6em; white-space: nowrap;
}

/* Accordion — the native disclosure, restyled to a red switch. */
details.reveal { border-top: 1px solid var(--color-text); margin-top: 16px; padding-top: 14px; }
details.reveal > summary {
  cursor: pointer; list-style: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex; align-items: center; gap: 9px;
}
details.reveal > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal > summary::before {
  content: "+"; display: inline-grid; place-items: center;
  width: 16px; height: 16px; border: 1px solid currentColor;
  font-size: 12px; line-height: 1;
}
details.reveal[open] > summary::before { content: "\2212"; background: var(--color-accent); color: #fff; }
details.reveal > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.reveal-body { padding-top: 12px; }

.tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tag { font-variant-numeric: tabular-nums; }

.card-out { padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.card-out .card-body { flex: 1; font-size: 14px; line-height: 1.6; color: var(--color-neutral-700); }
a.card-out { text-decoration: none; color: inherit; }
a.card-out:hover { background: var(--color-accent); color: #fff; }
a.card-out:hover .kicker, a.card-out:hover .card-body, a.card-out:hover .btn { color: #fff; }
a.card-out:hover .btn { border-color: #fff; }
.verdict { color: var(--color-accent); font-weight: 700; }

/* A standalone card row outside a grid still needs its own frame. */
.stack > .card-out { border: 1px solid var(--color-text); }

.lesson-pager {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 2px solid var(--color-text); padding-top: 20px; margin-top: 8px;
}
.lesson-pager a { text-decoration: none; color: var(--color-text); }
.lesson-pager a:hover .t { color: var(--color-accent); }
.lesson-pager .dir {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px;
}
.lesson-pager .t { font-family: var(--font-heading); font-size: 15px; font-weight: 800; text-transform: uppercase; }

/* The lesson rail: hard cells, filled when current. */
.lesson-rail {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--color-text); margin: 0 0 34px;
}
.lesson-rail a {
  flex: 1 1 0; min-width: 130px; text-align: center;
  padding: 13px 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--color-text);
  border-left: 1px solid var(--color-text);
}
.lesson-rail a:first-child { border-left: 0; }
.lesson-rail a .n { margin-right: .45em; color: var(--color-neutral-600); }
.lesson-rail a[aria-current="page"] .n, .lesson-rail a:hover .n { color: inherit; }
.lesson-rail a:hover { background: var(--color-accent); color: #fff; }
.lesson-rail a[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
@media (max-width: 700px) {
  .lesson-rail a { flex: 1 1 50%; min-width: 50%; }
  .lesson-rail a:nth-child(2n+1) { border-left: 0; }
  .lesson-rail a:nth-child(n+3) { border-top: 1px solid var(--color-text); }
}

/* -------------------------------------------------------------- footer --- */

.site-footer { border-top: 2px solid var(--color-text); margin-top: 56px; }
.site-footer .wrap {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-block: 22px 56px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* --------------------------------------------------------------- video --- */

.video-facade {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  display: grid; place-items: center; gap: 12px;
  background: var(--color-text); color: var(--color-bg);
  border: 0; cursor: pointer; padding: 20px; text-align: center;
}
.video-facade:hover .play-glyph path { fill: var(--color-accent); }
.play-glyph { width: 62px; height: 62px; }
.play-glyph path { stroke: var(--color-accent); stroke-width: 2; fill: none; transition: fill .12s linear; }
.video-facade .vt { font-family: var(--font-heading); font-size: 18px; font-weight: 800; text-transform: uppercase; line-height: 1.2; }
.video-facade .vs { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-500); }
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
@media (prefers-reduced-motion: reduce) { .play-glyph path { transition: none; } }

/* ------------------------------------------------------------- widgets --- */

.widget { border: 1px solid var(--color-text); margin: 24px 0; }
.widget-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--color-text); flex-wrap: wrap;
}
.widget-title { font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.widget-body { padding: 20px 18px; }
.widget-controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px 20px; margin-bottom: 18px;
}
.widget-readout { border-top: 1px solid var(--color-text); margin-top: 16px; padding-top: 16px; font-size: 15px; line-height: 1.9; }
.widget-note { font-size: 12.5px; color: var(--color-neutral-600); margin-top: 12px; }
.widget-body .dgm { max-width: 460px; margin-inline: auto; }

.vec-field > .label { display: block; margin-bottom: 7px; }
.vec-inputs { display: flex; gap: 5px; align-items: center; }
.vec-inputs .input { width: 100%; min-width: 0; text-align: center; }
.vec-inputs .paren { color: var(--color-neutral-500); font-weight: 700; }

input[type="range"] { width: 100%; accent-color: var(--color-accent); }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row output { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; min-width: 5.5ch; color: var(--color-accent); }

.nojs-fallback { padding: 0; }

/* ---------------------------------------------------------------- quiz --- */

.q-card { border: 1px solid var(--color-text); padding: 24px 24px; margin: 0 0 18px; }
.q-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.q-num { font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
.q-marks { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.q-prompt { font-size: 16px; line-height: 1.6; margin: 0 0 16px; }

.q-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--color-text); }
.q-options li + li .q-option { border-top: 1px solid var(--color-text); }
.q-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  padding: 13px 15px; background: transparent; color: var(--color-text);
  border: 0; border-radius: 0;
}
.q-option:hover:not(:disabled) { background: var(--color-accent); color: #fff; }
.q-option:disabled { cursor: default; }
.q-option .mark { font-size: 15px; font-weight: 700; flex: none; }
.q-option[data-state="correct"] { background: var(--color-text); color: var(--color-bg); }
.q-option[data-state="wrong"]   { background: var(--color-accent); color: #fff; }
.q-option[data-state="dimmed"]  { opacity: .4; }

.q-entry { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.q-entry .input { max-width: 260px; }
.q-feedback { margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.q-feedback[data-ok="true"]  { color: var(--fig-good); }
.q-feedback[data-ok="false"] { color: var(--color-accent); }

.q-rubric { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; }
.q-rubric li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
.q-rubric input { margin-top: 4px; accent-color: var(--color-accent); }

.scorebar {
  border: 2px solid var(--color-text); padding: 18px 22px; margin: 0 0 26px;
  display: flex; gap: 20px 30px; flex-wrap: wrap; align-items: center;
}
.score-total { font-family: var(--font-heading); font-size: 30px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.score-cats { display: flex; gap: 18px; flex-wrap: wrap; }
.score-cat { display: flex; align-items: baseline; gap: 6px; }
.score-cat .k { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
.score-cat .v { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; }
.score-meter { flex: 1 1 150px; height: 6px; min-width: 110px; background: var(--color-neutral-300); }
.score-meter > i { display: block; height: 100%; background: var(--color-accent); }
.scorebar .btn { margin-left: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------- math, without script --- */

/* Reference formulas are authored as
       <span class="m" data-alt="d = |D₂ − D₁| ⁄ √(A²+B²+C²)"
             ><span class="tex">\(…\)</span></span>
   With scripting off, the Unicode in data-alt is what a reader sees; with
   scripting on, the inline script in <head> adds `js` to <html> and MathJax
   typesets the LaTeX instead. */
.m[data-alt] > .tex     { display: none; }
.m[data-alt]::after     { content: attr(data-alt); font-style: normal; }
.js .m[data-alt] > .tex { display: inline; }
.js .m[data-alt]::after { content: none; }

.nojs-note {
  border: 1px solid var(--color-text); border-left: 5px solid var(--color-accent);
  padding: 16px 20px; margin: 0 0 26px; font-size: 14px;
}

/* --------------------------------------------------------------- misc ---- */

.hr { background: var(--color-divider); }
.stack > * + * { margin-top: var(--stack, 16px); }
.center { text-align: center; }

.katc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--color-text); }
.katc-grid > * { border-left: 1px solid var(--color-text); }
.katc-grid > *:first-child { border-left: 0; }
.katc-grid > .panel { border: 0; border-left: 1px solid var(--color-text); }
.katc-grid > .panel:first-child { border-left: 0; }
@media (max-width: 760px) {
  .katc-grid { grid-template-columns: 1fr 1fr; }
  .katc-grid > *:nth-child(2n+1) { border-left: 0; }
  .katc-grid > *:nth-child(n+3) { border-top: 1px solid var(--color-text); }
}
@media (max-width: 420px) {
  .katc-grid { grid-template-columns: 1fr; }
  .katc-grid > * { border-left: 0; border-top: 1px solid var(--color-text); }
  .katc-grid > *:first-child { border-top: 0; }
}

.avatar {
  width: 68px; height: 68px; flex: none;
  background: var(--color-text); color: var(--color-bg);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 26px; font-weight: 900;
}