/* ═══════════════════════════════════════════════════════════════════════════
   ki.css — THE KORVA INSTITUTIONAL DESIGN SYSTEM (Session 58)

   One sheet, loaded LAST by base.html on every page EXCEPT the Masterclass
   lesson boards (the Session 56g chalkboard), which set `ki_off` and keep the
   exact cascade they shipped with. Everything here is in the `ki-` namespace,
   plus a small number of deliberate overrides of shared element rules, scoped
   to `body.ki` so that a page which opts out cannot be reached.

   ⚑ THE BRIEF. Korva read as a generic SaaS product: 12-16px corners, soft
   floating shadows, pill buttons, sparse navigation. A Perth parent buying
   selective entry preparation compares it with a tutoring college, a school
   and a test publisher, and those read as PRINT: ruled sections, serif
   headings, square corners, dense information, a navy-and-white palette.

   ⚑ THE BRAND COLOUR DID NOT MOVE. --ki-blue is #005F82, the Deep Cerulean the
   favicon, the brand mark and --teal-500 already carry (7.10:1 on white, text-
   safe). Everything else is chosen around it: a navy for bars, an ivory paper
   for alternating sections, and an ochre that is DECORATION ONLY (2.9:1 — rules
   and markers, never words). Its text-safe sibling is --ki-ochre-ink.

   ⚑ TYPE. Merriweather (headings) + Source Sans 3 (everything else). Merriweather
   was drawn for reading on screens, is sturdy at small sizes, and is the serif
   most associated with publishers and schools rather than with fashion; Source
   Sans is a humanist sans used across universities and government, and it is
   narrower than Geist, which buys room on dense pages. Three weights of Source
   Sans (400/600/700) and two of Merriweather (400 italic for captions, 700) are
   requested, and nothing here may reach for a fourth.

   Measured contrast, on #FFFFFF / on --ki-ivory #F7F5EF:
     --ki-ink     #1A2128   16.1 / 15.0
     --ki-ink-2   #3F4A54    9.3 /  8.6
     --ki-ink-3   #56616B    6.4 /  5.9
     --ki-blue    #005F82    7.1 /  6.6
     --ki-blue-dk #00415A   10.6 /  9.8
     --ki-ochre-ink #7A5710  6.4 / 5.9
     --ki-green   #2B6A3E    6.5 /  6.0
     --ki-red     #9E3324    7.0 /  6.5
     white on --ki-navy #0A2B39 14.8 · white on --ki-blue 7.1
     --ki-field   #7D8791 against white 3.6 (non-text 3:1 floor)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ki-blue:      #005F82;
  --ki-blue-dk:   #00415A;
  --ki-navy:      #0A2B39;
  --ki-navy-2:    #12384A;
  --ki-blue-50:   #EEF5F8;
  --ki-blue-100:  #D6E8EF;
  --ki-blue-200:  #A9CBD9;

  --ki-paper:     #FFFFFF;
  --ki-ivory:     #F7F5EF;
  --ki-stone:     #ECE8DE;

  --ki-ink:       #1A2128;
  --ki-ink-2:     #3F4A54;
  --ki-ink-3:     #56616B;
  --ki-on-navy:   #FFFFFF;
  --ki-on-navy-2: #C9D8E0;

  --ki-rule:      #D4D8DC;
  --ki-rule-2:    #B9C0C6;
  --ki-field:     #7D8791;

  --ki-ochre:     #C4962C;
  --ki-ochre-ink: #7A5710;
  --ki-green:     #2B6A3E;
  --ki-green-50:  #EDF5EF;
  --ki-red:       #9E3324;
  --ki-red-50:    #FBEFEC;

  --ki-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --ki-sans:  'Source Sans 3', 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;

  --ki-r:     2px;
  --ki-r-2:   4px;

  --ki-w:     1180px;
  --ki-w-text: 720px;
  --ki-gut:   24px;
}

/* ── 1. BASE ─────────────────────────────────────────────────────────────── */
body.ki {
  font-family: var(--ki-sans);
  color: var(--ki-ink);
}
/* the landing keeps the charcoal ground polish.css gives `.lnd--dark` pages */
body.ki:not(:has(.lnd--dark)) {
  background: var(--ki-paper);
  -webkit-font-smoothing: antialiased;
}
body.ki h1, body.ki h2, body.ki h3,
body.ki .ki-serif {
  font-family: var(--ki-serif);
  letter-spacing: 0;
}
body.ki button, body.ki input, body.ki select, body.ki textarea {
  font-family: var(--ki-sans);
}

.ki-wrap      { max-width: var(--ki-w); margin: 0 auto; padding: 0 var(--ki-gut); }
.ki-wrap--text { max-width: calc(var(--ki-w-text) + 2 * var(--ki-gut)); }
@media (max-width: 600px) { :root { --ki-gut: 16px; } }

/* ── 2. TYPE SCALE ───────────────────────────────────────────────────────── */
.ki-display { font: 700 clamp(30px, 4.2vw, 46px)/1.18 var(--ki-serif); color: var(--ki-ink); margin: 0; }
.ki-h1      { font: 700 clamp(28px, 3.4vw, 38px)/1.22 var(--ki-serif); color: var(--ki-ink); margin: 0; }
.ki-h2      { font: 700 clamp(22px, 2.4vw, 28px)/1.28 var(--ki-serif); color: var(--ki-ink); margin: 0; }
.ki-h3      { font: 700 19px/1.35 var(--ki-serif); color: var(--ki-ink); margin: 0; }
.ki-h4      { font: 700 15px/1.4 var(--ki-sans); color: var(--ki-ink); margin: 0; letter-spacing: .01em; }
.ki-lead    { font: 400 19px/1.6 var(--ki-sans); color: var(--ki-ink-2); margin: 0; }
.ki-body, .ki-prose p, .ki-prose li { font: 400 17px/1.65 var(--ki-sans); color: var(--ki-ink); }
.ki-small   { font: 400 14.5px/1.55 var(--ki-sans); color: var(--ki-ink-3); }
.ki-eyebrow {
  font: 700 13px/1.3 var(--ki-sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ki-blue); margin: 0;
}
.ki-eyebrow--ochre { color: var(--ki-ochre-ink); }
.ki-caption { font: italic 400 14px/1.5 var(--ki-serif); color: var(--ki-ink-3); }
.ki-num     { font: 700 15px/1 var(--ki-serif); color: var(--ki-blue); font-variant-numeric: lining-nums; }

.ki-prose p  { margin: 0 0 16px; }
.ki-prose ul, .ki-prose ol { margin: 0 0 16px; padding-left: 22px; }
.ki-prose li { margin-bottom: 6px; }
.ki-prose h2 { font: 700 24px/1.3 var(--ki-serif); margin: 36px 0 12px; color: var(--ki-ink); }
.ki-prose h3 { font: 700 18px/1.35 var(--ki-serif); margin: 26px 0 8px; color: var(--ki-ink); }

body.ki a.ki-link, .ki-prose a, .ki-link {
  color: var(--ki-blue); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
body.ki a.ki-link:hover, .ki-prose a:hover, .ki-link:hover { color: var(--ki-blue-dk); text-decoration-thickness: 2px; }

/* ── 3. RULES AND DIVIDERS ───────────────────────────────────────────────── */
.ki-rule         { border: 0; border-top: 1px solid var(--ki-rule); margin: 32px 0; }
.ki-rule--strong { border-top: 2px solid var(--ki-ink); }
.ki-rule--double { border-top: 3px double var(--ki-ink); }
.ki-rule--brand  { border-top: 3px solid var(--ki-blue); }
.ki-rule--short  { width: 56px; border-top: 3px solid var(--ki-ochre); margin: 14px 0 18px; }

/* ── 4. BUTTONS ──────────────────────────────────────────────────────────── */
.ki-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px;
  font: 700 16px/1.2 var(--ki-sans); letter-spacing: .01em;
  border: 2px solid var(--ki-blue); border-radius: var(--ki-r);
  background: var(--ki-blue); color: #fff !important; text-decoration: none !important;
  cursor: pointer; box-shadow: none; transition: background-color .12s, border-color .12s, color .12s;
}
.ki-btn:hover { background: var(--ki-blue-dk); border-color: var(--ki-blue-dk); transform: none; box-shadow: none; }
.ki-btn:focus-visible { outline: 3px solid var(--ki-ochre); outline-offset: 2px; }
.ki-btn--outline { background: transparent; color: var(--ki-blue) !important; }
.ki-btn--outline:hover { background: var(--ki-blue-50); color: var(--ki-blue-dk) !important; }
.ki-btn--navy { background: var(--ki-navy); border-color: var(--ki-navy); }
.ki-btn--white { background: #fff; border-color: #fff; color: var(--ki-navy) !important; }
.ki-btn--white:hover { background: var(--ki-blue-50); border-color: var(--ki-blue-50); }
.ki-btn--ghost-white { background: transparent; border-color: #fff; color: #fff !important; }
.ki-btn--ghost-white:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.ki-btn--sm { min-height: 38px; padding: 7px 14px; font-size: 14.5px; }
.ki-btn--block { display: flex; width: 100%; }
.ki-btn-text {
  font: 700 16px/1.3 var(--ki-sans); color: var(--ki-blue); text-decoration: none;
  border-bottom: 2px solid var(--ki-blue-200); padding-bottom: 1px;
}
.ki-btn-text:hover { color: var(--ki-blue-dk); border-bottom-color: var(--ki-blue-dk); }
.ki-btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* ── 5. FORMS ────────────────────────────────────────────────────────────── */
.ki-field { display: block; margin-bottom: 18px; }
.ki-label { display: block; font: 600 15px/1.4 var(--ki-sans); color: var(--ki-ink); margin-bottom: 6px; }
.ki-help  { display: block; font: 400 14px/1.5 var(--ki-sans); color: var(--ki-ink-3); margin-top: 6px; }
.ki-input, .ki-select, .ki-textarea {
  display: block; width: 100%; min-height: 46px; padding: 10px 12px;
  font: 400 16px/1.4 var(--ki-sans); color: var(--ki-ink);
  background: #fff; border: 1px solid var(--ki-field); border-radius: var(--ki-r);
  box-shadow: none;
}
.ki-input::placeholder, .ki-textarea::placeholder { color: #6B7680; }
.ki-input:focus, .ki-select:focus, .ki-textarea:focus {
  outline: 2px solid var(--ki-blue); outline-offset: 0; border-color: var(--ki-blue); background: #fff;
}
.ki-check { display: flex; gap: 10px; align-items: flex-start; font: 400 15px/1.5 var(--ki-sans); color: var(--ki-ink-2); }
.ki-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ki-blue); flex: none; }
.ki-alert { border: 1px solid; border-left-width: 4px; padding: 12px 14px; font: 400 15px/1.5 var(--ki-sans); margin-bottom: 18px; border-radius: 0; }
.ki-alert--error { border-color: var(--ki-red); background: var(--ki-red-50); color: #6E2014; }
.ki-alert--ok    { border-color: var(--ki-green); background: var(--ki-green-50); color: #1D4A2B; }
.ki-alert--info  { border-color: var(--ki-blue); background: var(--ki-blue-50); color: var(--ki-blue-dk); }

/* ── 6. SECTIONS, PANELS, COLUMNS ────────────────────────────────────────── */
.ki-section        { padding: 56px 0; border-top: 1px solid var(--ki-rule); background: var(--ki-paper); }
.ki-section--ivory { background: var(--ki-ivory); }
.ki-section--navy  { background: var(--ki-navy); color: var(--ki-on-navy); border-top: 0; }
.ki-section--navy .ki-h1, .ki-section--navy .ki-h2, .ki-section--navy .ki-h3, .ki-section--navy .ki-display { color: #fff; }
.ki-section--navy .ki-lead, .ki-section--navy p { color: var(--ki-on-navy-2); }
.ki-section--navy .ki-eyebrow { color: #E9C46A; }
.ki-section--flush { padding-top: 0; border-top: 0; }
@media (max-width: 760px) { .ki-section { padding: 40px 0; } }

/* A section heading in the publication style: eyebrow, serif title, short rule. */
.ki-head { margin-bottom: 28px; max-width: 760px; }
.ki-head .ki-eyebrow { margin-bottom: 8px; }
.ki-head .ki-lead { margin-top: 12px; }

/* Panel: a ruled box with a brand top-border. The replacement for a floating card. */
.ki-panel {
  background: #fff; border: 1px solid var(--ki-rule); border-top: 3px solid var(--ki-blue);
  padding: 22px 24px; border-radius: 0;
}
.ki-panel--plain { border-top-width: 1px; }
.ki-panel--ivory { background: var(--ki-ivory); }
.ki-panel--ochre { border-top-color: var(--ki-ochre); }
.ki-panel > :last-child { margin-bottom: 0; }

/* Newspaper columns: a grid whose gutters are vertical hairlines. */
.ki-cols { display: grid; grid-template-columns: repeat(var(--ki-cols, 3), minmax(0, 1fr)); }
.ki-cols > * { padding: 0 24px; border-left: 1px solid var(--ki-rule); }
.ki-cols > *:first-child { padding-left: 0; border-left: 0; }
.ki-cols > *:last-child { padding-right: 0; }
.ki-cols--2 { --ki-cols: 2; }
.ki-cols--4 { --ki-cols: 4; }
@media (max-width: 900px) {
  .ki-cols, .ki-cols--4 { --ki-cols: 2; row-gap: 28px; }
  .ki-cols > * { padding: 0 18px; }
  .ki-cols > *:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ki-cols > *:nth-child(even) { padding-right: 0; }
}
@media (max-width: 600px) {
  .ki-cols, .ki-cols--2, .ki-cols--4 { --ki-cols: 1; row-gap: 0; }
  .ki-cols > *, .ki-cols > *:nth-child(even) { padding: 18px 0; border-left: 0; border-top: 1px solid var(--ki-rule); }
  .ki-cols > *:first-child { border-top: 0; padding-top: 0; }
}
.ki-col-num { display: block; font: 700 30px/1 var(--ki-serif); color: var(--ki-ochre-ink); margin-bottom: 10px; }

/* Ruled list: rows separated by hairlines, a left label column. */
.ki-ruled { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ki-ink); }
.ki-ruled > li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 28px; padding: 18px 0; border-bottom: 1px solid var(--ki-rule); }
.ki-ruled__k { font: 700 16px/1.45 var(--ki-serif); color: var(--ki-ink); }
.ki-ruled__v { font: 400 16.5px/1.6 var(--ki-sans); color: var(--ki-ink-2); }
.ki-ruled__v p { margin: 0 0 8px; }
.ki-ruled__v p:last-child { margin: 0; }
@media (max-width: 700px) { .ki-ruled > li { grid-template-columns: 1fr; } }

/* Tick list. */
.ki-ticks { list-style: none; padding: 0; margin: 0; }
.ki-ticks li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--ki-rule); font: 400 16.5px/1.55 var(--ki-sans); color: var(--ki-ink); }
.ki-ticks li:last-child { border-bottom: 0; }
.ki-ticks li::before {
  content: ''; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--ki-blue); border-bottom: 2.5px solid var(--ki-blue); transform: rotate(-45deg);
}

/* Fact strip: a row of short facts between double rules (an information table, not a stat card). */
.ki-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px double var(--ki-ink); border-bottom: 1px solid var(--ki-rule); }
.ki-facts > div { padding: 16px 18px; border-left: 1px solid var(--ki-rule); }
.ki-facts > div:first-child { border-left: 0; padding-left: 0; }
.ki-facts dt { font: 700 13px/1.3 var(--ki-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ki-ink-3); margin-bottom: 6px; }
.ki-facts dd { margin: 0; font: 700 18px/1.35 var(--ki-serif); color: var(--ki-ink); }
@media (max-width: 760px) {
  .ki-facts { grid-template-columns: 1fr 1fr; }
  .ki-facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ki-facts > div:nth-child(n+3) { border-top: 1px solid var(--ki-rule); }
}

/* Table. */
.ki-table { width: 100%; border-collapse: collapse; font: 400 15.5px/1.5 var(--ki-sans); }
.ki-table th { text-align: left; font: 700 13px/1.3 var(--ki-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ki-ink-3); border-bottom: 2px solid var(--ki-ink); padding: 10px 12px 10px 0; }
.ki-table td { border-bottom: 1px solid var(--ki-rule); padding: 12px 12px 12px 0; color: var(--ki-ink); vertical-align: top; }

/* Figure / image container: bordered plate with a numbered caption. */
.ki-figure { margin: 0; }
.ki-figure__plate { border: 1px solid var(--ki-rule-2); background: #fff; padding: 8px; }
.ki-figure__plate img { display: block; width: 100%; height: auto; }
.ki-figure figcaption { margin-top: 10px; font: italic 400 14px/1.5 var(--ki-serif); color: var(--ki-ink-3); }
.ki-figure figcaption b { font-style: normal; font-family: var(--ki-sans); color: var(--ki-ink); margin-right: 4px; }

/* Quote / testimonial. Renders only from real entries — see _ki_testimonials.html. */
.ki-quote { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--ki-ochre); }
.ki-quote p { font: italic 400 18px/1.6 var(--ki-serif); color: var(--ki-ink); margin: 0 0 10px; }
.ki-quote cite { font: 700 14px/1.4 var(--ki-sans); font-style: normal; color: var(--ki-ink-3); letter-spacing: .02em; }

/* Disclosure list (FAQ). Square, ruled, plus/minus marker. */
.ki-faq { border-top: 2px solid var(--ki-ink); }
.ki-faq details { border-bottom: 1px solid var(--ki-rule); }
.ki-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 44px 18px 0; font: 700 17px/1.45 var(--ki-serif); color: var(--ki-ink);
}
.ki-faq summary::-webkit-details-marker { display: none; }
.ki-faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 13px; font: 400 26px/1 var(--ki-sans); color: var(--ki-blue);
}
.ki-faq details[open] summary::after { content: '\2212'; }
.ki-faq summary:hover { color: var(--ki-blue-dk); }
.ki-faq summary:focus-visible { outline: 3px solid var(--ki-ochre); outline-offset: 2px; }
.ki-faq .ki-faq__a { padding: 0 0 20px; max-width: 760px; }
.ki-faq .ki-faq__a p { font: 400 16.5px/1.65 var(--ki-sans); color: var(--ki-ink-2); margin: 0 0 10px; }
.ki-faq-group + .ki-faq-group { margin-top: 44px; }
.ki-faq-group > .ki-h3 { margin-bottom: 12px; }

/* Breadcrumbs. */
.ki-crumbs { font: 400 14px/1.4 var(--ki-sans); color: var(--ki-ink-3); margin: 0 0 14px; }
.ki-crumbs a { color: var(--ki-ink-3); text-decoration: underline; text-underline-offset: 2px; }
.ki-crumbs span[aria-hidden] { margin: 0 6px; }
.ki-section--navy .ki-crumbs, .ki-section--navy .ki-crumbs a { color: var(--ki-on-navy-2); }

/* Page header band: navy, square, ruled underneath in ochre. Used by every rebuilt page. */
.ki-pagehead { background: var(--ki-navy); color: #fff; padding: 52px 0 48px; border-bottom: 4px solid var(--ki-ochre); }
.ki-pagehead .ki-display, .ki-pagehead .ki-h1 { color: #fff; }
.ki-pagehead .ki-lead { color: var(--ki-on-navy-2); margin-top: 16px; max-width: 760px; }
.ki-pagehead .ki-eyebrow { color: #E9C46A; margin-bottom: 12px; }
@media (max-width: 600px) { .ki-pagehead { padding: 36px 0 32px; } }

/* Two-column page body with a sticky side index. */
.ki-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.ki-split--left { grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 980px) { .ki-split, .ki-split--left { grid-template-columns: 1fr; gap: 36px; } }
.ki-aside { position: sticky; top: 24px; }
.ki-toc { border-top: 3px solid var(--ki-blue); padding-top: 14px; }
.ki-toc ol, .ki-toc ul { list-style: none; margin: 0; padding: 0; }
.ki-toc li { border-bottom: 1px solid var(--ki-rule); }
.ki-toc a { display: block; padding: 9px 0; font: 600 15px/1.4 var(--ki-sans); color: var(--ki-ink-2); text-decoration: none; }
.ki-toc a:hover { color: var(--ki-blue); }
@media (max-width: 980px) { .ki-aside { position: static; } }

/* Contact block. */
.ki-contact { display: grid; gap: 4px; font: 400 16px/1.55 var(--ki-sans); color: var(--ki-ink-2); }
.ki-contact strong { color: var(--ki-ink); }
.ki-contact a { color: var(--ki-blue); font-weight: 700; }

/* Note in a legal or policy document: ruled, ochre-edged. */
.ki-note { border: 1px solid var(--ki-rule); border-left: 4px solid var(--ki-ochre); background: var(--ki-ivory); padding: 14px 16px; font: 400 15.5px/1.6 var(--ki-sans); color: var(--ki-ink-2); }

/* ── 7. PUBLIC NAVIGATION — two tiers, the school-website pattern ─────────── */
.ki-util { background: var(--ki-navy); color: var(--ki-on-navy-2); font: 400 13.5px/1.3 var(--ki-sans); }
.ki-util__in { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 38px; }
.ki-util a { color: #fff; text-decoration: none; font-weight: 600; }
.ki-util a:hover { text-decoration: underline; }
.ki-util__r { display: flex; gap: 20px; align-items: center; }
.ki-util__sep { width: 1px; height: 14px; background: rgba(255,255,255,.3); }
@media (max-width: 760px) { .ki-util__l { display: none; } .ki-util__in { justify-content: flex-end; } }

.ki-nav { background: #fff; border-bottom: 1px solid var(--ki-rule); position: relative; z-index: 120; }
.ki-nav__in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.ki-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ki-ink); flex: none; }
.ki-brand__mark {
  width: 40px; height: 40px; display: grid; place-items: center; background: var(--ki-blue); color: #fff;
  font: 700 21px/1 var(--ki-serif); border-radius: 0;
}
.ki-brand__name { display: grid; line-height: 1.1; }
.ki-brand__name b { font: 700 21px/1.1 var(--ki-serif); color: var(--ki-ink); }
.ki-brand__name small { font: 600 11.5px/1.2 var(--ki-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ki-ink-3); margin-top: 3px; }
.ki-nav__menu { display: flex; align-items: center; gap: 4px; flex: 1; }
.ki-nav__link {
  display: inline-flex; align-items: center; min-height: 76px; padding: 0 12px;
  font: 600 16px/1.2 var(--ki-sans); color: var(--ki-ink); text-decoration: none;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.ki-nav__link:hover { color: var(--ki-blue); border-bottom-color: var(--ki-blue-200); }
.ki-nav__link.is-active { color: var(--ki-blue); border-bottom-color: var(--ki-blue); }
.ki-nav__spacer { flex: 1; }
.ki-nav__login { font: 600 16px/1.2 var(--ki-sans); color: var(--ki-ink); text-decoration: none; padding: 10px 6px; }
.ki-nav__login:hover { color: var(--ki-blue); text-decoration: underline; }
.ki-nav__burger {
  display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--ki-rule-2);
  background: #fff; border-radius: 0; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.ki-nav__burger span { display: block; width: 20px; height: 2px; background: var(--ki-ink); }
.ki-nav__burger:hover { background: var(--ki-blue-50); }
@media (max-width: 1040px) {
  .ki-nav__in { min-height: 66px; flex-wrap: wrap; gap: 0 16px; }
  .ki-nav__burger { display: inline-flex; }
  .ki-nav__menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 16px; border-top: 1px solid var(--ki-rule); }
  .ki-nav__menu.is-open { display: flex; }
  .ki-nav__link { min-height: 48px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--ki-rule); }
  .ki-nav__link.is-active { border-bottom-color: var(--ki-rule); box-shadow: inset 4px 0 0 var(--ki-blue); padding-left: 14px; }
  .ki-nav__spacer { display: none; }
  .ki-nav__login { padding: 14px 4px; }
  .ki-nav__menu .ki-btn { margin-top: 8px; }
}
@media (max-width: 420px) { .ki-brand__name small { display: none; } }

/* ── 8. FOOTER ───────────────────────────────────────────────────────────── */
.ki-footer { background: var(--ki-navy); color: var(--ki-on-navy-2); font: 400 15px/1.6 var(--ki-sans); border-top: 4px solid var(--ki-ochre); }
.ki-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 52px 0 40px; }
.ki-footer h2 { font: 700 13px/1.3 var(--ki-sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.ki-footer ul { list-style: none; margin: 0; padding: 0; }
.ki-footer li a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ki-on-navy-2); text-decoration: none; }
.ki-footer li a:hover { color: #fff; text-decoration: underline; }
.ki-footer__brand b { display: block; font: 700 22px/1.2 var(--ki-serif); color: #fff; margin-bottom: 10px; }
.ki-footer__brand p { margin: 0 0 12px; max-width: 340px; }
.ki-footer__brand a { color: #fff; font-weight: 700; }
.ki-footer__bot { border-top: 1px solid rgba(255,255,255,.18); padding: 20px 0 28px; display: grid; gap: 8px; font-size: 13.5px; }
.ki-footer__bot p { margin: 0; color: var(--ki-on-navy-2); }
.ki-footer--compact .ki-footer__top { display: none; }
.ki-footer--compact .ki-footer__bot { border-top: 0; padding-top: 22px; }
.ki-footer__row { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.ki-footer__row a { color: var(--ki-on-navy-2); display: inline-flex; min-height: 28px; align-items: center; }
.ki-footer__row a:hover { color: #fff; }
@media (max-width: 900px) { .ki-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ki-footer__top { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; } }
/* the logged-in bottom bar is fixed; keep the footer's last line clear of it */
body.ki.has-knav-bottom .ki-footer__bot { padding-bottom: 28px; }

/* ── 9. FOCUS — one ring, everywhere in the system ───────────────────────── */
body.ki .ki-nav a:focus-visible, body.ki .ki-footer a:focus-visible, body.ki .ki-util a:focus-visible,
body.ki .ki-link:focus-visible, body.ki .ki-toc a:focus-visible, body.ki .ki-nav__burger:focus-visible {
  outline: 3px solid var(--ki-ochre); outline-offset: 2px;
}
body.ki .ki-footer a:focus-visible, body.ki .ki-util a:focus-visible { outline-color: #E9C46A; }

@media (prefers-reduced-motion: reduce) { .ki-btn { transition: none; } }

/* ── 10. THE LANDING PAGE — structure kept, the new bar laid over its hero ───
   ⚑ The landing's hero is exactly one viewport (`100svh`, measured by
   tools/assert_landing_hero.py) and the old bar floated over it. The brief keeps
   that structure, so the two-tier bar is laid OVER the hero here rather than
   pushed above it — the hero still fills the first screen and the CTA stays above
   the fold. The bar itself is opaque white, so nothing reads through it, and the
   hero's top padding grows by the bar's height. Scoped to `.hro--home`: no other
   page is affected. The hero's own Geist typography, ground and glow are
   untouched — the brief says the landing is fine as it is. */
body.ki:has(.hro--home) .ki-util { position: absolute; top: 0; left: 0; right: 0; z-index: 121; }
body.ki:has(.hro--home) .ki-nav  { position: absolute; top: 38px; left: 0; right: 0; z-index: 120; }
body.ki .lnd .hro--home .hro__in { padding-top: 168px; }
@media (max-width: 1040px) { body.ki .lnd .hro--home .hro__in { padding-top: 140px; } }
@media (max-width: 760px)  { body.ki .lnd .hro--home .hro__in { padding-top: 128px; } }

/* ── 11. SPECIFICITY HARDENING (found by the auth/legal agent, Session 58) ────
   Legacy element rules (`h1 { color }`, `p { color: var(--ink-soft) }`, and the
   theme-scoped variants at (0,1,2)) reach plain h1/p elements inside the navy
   bands. Every ink on a navy ground is restated here under `body.ki` so a bare
   element inside a header, a navy section or the footer can never paint dark. */
body.ki .ki-pagehead h1, body.ki .ki-pagehead h2, body.ki .ki-pagehead .ki-display,
body.ki .ki-pagehead .ki-h1, body.ki .ki-section--navy h1, body.ki .ki-section--navy h2,
body.ki .ki-section--navy h3, body.ki .ki-footer h2 { color: #fff; }
body.ki .ki-pagehead p, body.ki .ki-pagehead .ki-lead { color: var(--ki-on-navy-2); }
body.ki .ki-pagehead .ki-eyebrow, body.ki .ki-section--navy .ki-eyebrow { color: #E9C46A; }
body.ki .ki-pagehead .ki-crumbs, body.ki .ki-pagehead .ki-crumbs a,
body.ki .ki-section--navy .ki-crumbs, body.ki .ki-section--navy .ki-crumbs a { color: #D7E3EA; }
body.ki .ki-section--navy p, body.ki .ki-section--navy li { color: var(--ki-on-navy-2); }
body.ki .ki-footer p, body.ki .ki-footer li, body.ki .ki-footer span { color: var(--ki-on-navy-2); }
body.ki .ki-footer__brand b, body.ki .ki-footer a.ki-strong, body.ki .ki-footer__brand a { color: #fff; }
/* `body.ki h2 { font-family: serif }` is (0,1,2) and beats a one-class font
   shorthand on an h-element; these labels are sans by design. */
body.ki .ki-footer h2, body.ki h2.ki-eyebrow, body.ki h3.ki-eyebrow, body.ki h2.ki-h4, body.ki h3.ki-h4 { font-family: var(--ki-sans); }

/* ── 12. RHYTHM FLOOR — scratch_s44/audit_spacing.py holds the site to 8px between
   stacked blocks and 12px inside a box. Measured on the first Session 58 run
   (70 crowded-box, 153 crowded-text); each rule below closes one class of finding. */
.ki-btn { padding: 12px 24px; }
.ki-btn--sm { padding: 12px 16px; min-height: 44px; }
.ki-facts > div, .ki-facts > div:first-child { padding: 16px; }
.ki-facts dt { margin-bottom: 8px; }
.ki-ticks li + li { margin-top: 8px; }
.ki-ruled > li { row-gap: 10px; }
.ki-contact { gap: 8px; }
.ki-brand__name small { margin-top: 8px; }
.ki-eyebrow + .ki-h1, .ki-eyebrow + .ki-h2, .ki-eyebrow + .ki-h3, .ki-eyebrow + .ki-display,
.ki-eyebrow + h1, .ki-eyebrow + h2, .ki-eyebrow + h3 { margin-top: 10px; }
:is(.ki-h1, .ki-h2, .ki-h3, .ki-h4, h2, h3) + :is(p, .ki-small, .ki-lead) { margin-top: 8px; }
@media (max-width: 760px) {
  .ki-facts > div:nth-child(3) { padding-left: 16px; }
}
/* second pass: the same floor at a specificity the page sheets cannot undercut */
body.ki .ki-eyebrow { margin-bottom: 12px; }
body.ki .ki-eyebrow + :is(h1, h2, h3) { margin-top: 0; }
body.ki .ki-ruled > li { row-gap: 12px; }
body.ki :is(.ki-h1, .ki-h2, .ki-h3) + :is(p, .ki-small) { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   13. SESSION 59 — THE THREE BLUE GROUNDS
   The user approved the Session 58 direction and rejected its off-white ground.
   Every surface the system reaches now sits on one of three blues, chosen by a
   body class base.html sets (`ki_tier`, see the comment there):

     ki-t-public    #1A1F2E  the landing hero's own ground, exactly — every public
                             page matches the home page (the brief's "deep Korva blue")
     ki-t-portal    #0B2E4F  deeper and bluer: the parent portal — focused, calm
     ki-t-practice  #1D3A56  softer and less saturated, so questions, pictures and
                             SVG figures read against it without competing

   ⚑ IT IS A TOKEN FLIP, NOT A SECOND STYLESHEET. Each tier redefines the --ki-*
   tokens on <body>; every component above that reads a token follows. Korva blue
   #005F82 survives as --ki-brand (fills: the logo, brand buttons, active rules) —
   as TEXT it would be 1.6-2.2:1 on these grounds, so --ki-blue (the token
   components use for links, eyebrows, ticks) becomes a light Korva blue, #8CCBE6.

   Text hierarchy, measured on the LIGHTEST panel of each tier (worst case):
                           public #22283A   portal #10385E   practice #24445F
     --ki-head  #FFFFFF         14.4             11.6             10.0
     --ki-ink   #F3EFE6         12.8             10.4              8.9   (warm white)
     --ki-ink-2 #D2DBE5         10.6              8.6              7.4
     --ki-ink-3 #AEBBC9          7.7              6.2              5.3
     --ki-blue  #8CCBE6          8.3              6.7              5.8   (links, accents)
     --ki-ochre-ink #E9C46A      9.4              7.6              6.6
     #005F82 on a white button  7.1  — the primary action on every blue
   ═══════════════════════════════════════════════════════════════════════════ */
body.ki-t-public, body.ki-t-portal, body.ki-t-practice {
  --ki-brand:     #005F82;
  --ki-head:      #FFFFFF;
  --ki-ink:       #F3EFE6;
  --ki-ink-2:     #D2DBE5;
  --ki-ink-3:     #BCC7D3;   /* Session 59b: was #AEBBC9, which fell to 4.3:1 on the lifted practice panel */
  --ki-blue:      #8CCBE6;
  --ki-blue-dk:   #C2E4F3;
  --ki-blue-50:   rgba(140, 203, 230, .12);
  --ki-blue-100:  rgba(140, 203, 230, .22);
  --ki-blue-200:  rgba(140, 203, 230, .45);
  --ki-rule:      rgba(255, 255, 255, .14);   /* Session 59b: the panel hairline, 10-15% white */
  --ki-rule-2:    rgba(255, 255, 255, .30);
  --ki-field:     rgba(255, 255, 255, .46);
  --ki-ochre-ink: #E9C46A;
  --ki-green:     #8FDCA6;
  --ki-green-50:  rgba(143, 220, 166, .12);
  --ki-red:       #F4A493;
  --ki-red-50:    rgba(244, 164, 147, .12);
  --ki-on-navy:   #FFFFFF;
  --ki-on-navy-2: #D2DBE5;
  --ki-input-bg:  rgba(0, 0, 0, .24);
  color: var(--ki-ink);
}
body.ki-t-public {
  --ki-ground:  #1A1F2E;
  --ki-paper:   #1A1F2E;   /* page ground */
  --ki-ivory:   #1F2536;   /* the alternating band, a half step lighter */
  --ki-panel:   #2C3544;   /* raised panel — Session 59b: +10 dL* (was #22283A, +4.4: it blended) */
  --ki-panel-hover: #313B4A;
  --ki-stone:   #151926;   /* inset well */
  --ki-navy:    #12151F;   /* bars, page head, footer: the hero gradient's foot */
  --ki-navy-2:  #171B29;
  --ki-head-glow: radial-gradient(56% 90% at 18% 20%, rgba(61,123,168,.30) 0%, rgba(61,123,168,0) 70%),
                  radial-gradient(40% 70% at 86% 0%, rgba(61,123,168,.16) 0%, rgba(61,123,168,0) 70%);
}
body.ki-t-portal {
  --ki-ground:  #0B2E4F;
  --ki-paper:   #0B2E4F;
  --ki-ivory:   #0D3256;
  --ki-panel:   #234665;   /* Session 59b: +10 dL* (was #10385E, +4.5) */
  --ki-panel-hover: #294C6A;
  --ki-stone:   #082541;
  --ki-navy:    #071D33;
  --ki-navy-2:  #0A2440;
  --ki-head-glow: none;
}
body.ki-t-practice {
  --ki-ground:  #1D3A56;
  --ki-paper:   #1D3A56;
  --ki-ivory:   #21405D;
  --ki-panel:   #32506A;   /* Session 59b: +9 dL* (was #24445F, +4.1) — practice is the lightest ground, so the tightest margin: --ki-blue 4.74, --ki-ink-3 4.92 on it */
  --ki-panel-hover: #34526C;
  --ki-stone:   #18324B;
  --ki-navy:    #142B42;
  --ki-navy-2:  #17304A;
  --ki-head-glow: none;
}

/* grounds */
body.ki-t-public:not(:has(.lnd--dark)), body.ki-t-portal, body.ki-t-practice { background: var(--ki-ground); }
body.ki-t-public h1, body.ki-t-public h2, body.ki-t-public h3,
body.ki-t-portal h1, body.ki-t-portal h2, body.ki-t-portal h3,
body.ki-t-practice h1, body.ki-t-practice h2, body.ki-t-practice h3 { color: var(--ki-head); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-display, .ki-h1, .ki-h2, .ki-h3, .ki-h4, .ki-ruled__k, .ki-facts dd, .ki-faq summary) { color: var(--ki-head); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-faq summary:hover { color: var(--ki-blue-dk); }

/* panels: raised a step above the ground, hairline edge, light-blue top rule */
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-panel { background: var(--ki-panel); border-color: var(--ki-rule); border-top-color: var(--ki-blue); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-panel--plain { border-top-color: var(--ki-rule); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-panel--ochre { border-top-color: var(--ki-ochre); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-panel--ivory { background: var(--ki-stone); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-note { background: var(--ki-stone); border-color: var(--ki-rule); border-left-color: var(--ki-ochre); color: var(--ki-ink-2); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-figure__plate { background: #FFFFFF; border-color: var(--ki-rule-2); }

/* sections, page head */
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-section { background: var(--ki-paper); border-top-color: var(--ki-rule); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-section--ivory { background: var(--ki-ivory); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-section--navy { background-color: var(--ki-navy); background-image: var(--ki-head-glow); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-pagehead { background-color: var(--ki-navy); background-image: var(--ki-head-glow); }

/* rules on blue: white at low opacity; the heavy rules stay heavy */
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-rule--strong, .ki-ruled, .ki-faq) { border-top-color: rgba(255,255,255,.55); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-table th { border-bottom-color: rgba(255,255,255,.55); color: var(--ki-ink-3); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-rule--double, .ki-facts) { border-top-color: rgba(255,255,255,.55); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-rule--brand { border-top-color: var(--ki-blue); }

/* buttons on blue: white fill + Korva blue ink is the primary action */
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-btn { background: #FFFFFF; border-color: #FFFFFF; color: var(--ki-brand) !important; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-btn:hover { background: #E3F1F7; border-color: #E3F1F7; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-btn--outline, .ki-btn--ghost-white) { background: transparent; border-color: rgba(255,255,255,.85); color: #FFFFFF !important; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-btn--outline, .ki-btn--ghost-white):hover { background: rgba(255,255,255,.10); border-color: #FFFFFF; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-btn--brand, .ki-btn--navy) { background: var(--ki-brand); border-color: rgba(255,255,255,.35); color: #FFFFFF !important; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-btn--brand, .ki-btn--navy):hover { background: #00506E; border-color: #FFFFFF; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-btn--white { background: #FFFFFF; color: var(--ki-brand) !important; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-btn-text { color: var(--ki-blue); border-bottom-color: var(--ki-blue-200); }

/* forms on blue: visible, not harsh */
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-input, .ki-select, .ki-textarea) {
  background: var(--ki-input-bg); color: #FFFFFF; border-color: var(--ki-field);
}
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-input, .ki-textarea)::placeholder { color: #A9B4C1; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-input, .ki-select, .ki-textarea):focus {
  background: rgba(0, 0, 0, .32); border-color: var(--ki-blue); outline: 2px solid var(--ki-blue); outline-offset: 0;
}
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-select option { background: #1A1F2E; color: #FFFFFF; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-label { color: var(--ki-head); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-check input { accent-color: var(--ki-blue); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-alert--error { background: var(--ki-red-50); border-color: var(--ki-red); color: #FFE3DC; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-alert--ok    { background: var(--ki-green-50); border-color: var(--ki-green); color: #E2F7E8; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-alert--info  { background: var(--ki-blue-50); border-color: var(--ki-blue); color: #E3F1F7; }

/* the two-tier nav on blue: two steps of the tier's head colour */
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-util { background: var(--ki-navy); border-bottom: 1px solid var(--ki-rule); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-nav { background: var(--ki-navy-2); border-bottom-color: var(--ki-rule); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-brand__mark { background: var(--ki-brand); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-brand__name b { color: #FFFFFF; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-brand__name small { color: var(--ki-ink-3); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-nav__link, .ki-nav__login) { color: var(--ki-ink); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(.ki-nav__link, .ki-nav__login):hover { color: #FFFFFF; border-bottom-color: var(--ki-blue-200); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-nav__link.is-active { color: #FFFFFF; border-bottom-color: var(--ki-blue); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-nav__burger { background: transparent; border-color: var(--ki-rule-2); }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-nav__burger span { background: #FFFFFF; }
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-nav__burger:hover { background: rgba(255,255,255,.08); }
@media (max-width: 1040px) {
  :is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-nav__link.is-active { box-shadow: inset 4px 0 0 var(--ki-blue); }
}

/* footer: one step below the ground, so it ends the page rather than continuing it */
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) .ki-footer { background: var(--ki-navy); }

/* focus on blue: the light accent, not ochre-on-navy */
:is(body.ki-t-public, body.ki-t-portal, body.ki-t-practice) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: #E9C46A; }

/* ── 14. SESSION 60 — the soft-launch PREVIEW bar ──────────────────────────
   One thin bar above everything on a public page, light text on a darker accent.
   On the landing the two-tier nav is laid over the hero absolutely (section 10),
   so it moves down by the bar's height there. Removed for launch by setting
   KORVA_SOFT_LAUNCH_BANNER=0 — nothing here needs to change. */
.ki-preview {
  background: #7A4E0B; color: #FFFFFF; border-bottom: 1px solid #A8721E;
  font: 700 12.5px/1 var(--ki-sans); letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 0 16px; height: 30px; display: flex; align-items: center; justify-content: center;
}
body.ki.has-preview-bar:has(.hro--home) .ki-preview { position: absolute; top: 0; left: 0; right: 0; z-index: 122; }
body.ki.has-preview-bar:has(.hro--home) .ki-util { top: 30px; }
body.ki.has-preview-bar:has(.hro--home) .ki-nav  { top: 68px; }
body.ki.has-preview-bar .lnd .hro--home .hro__in { padding-top: 198px; }
@media (max-width: 1040px) { body.ki.has-preview-bar .lnd .hro--home .hro__in { padding-top: 170px; } }
@media (max-width: 760px)  { body.ki.has-preview-bar .lnd .hro--home .hro__in { padding-top: 158px; } }