/* Gene Academy component stylesheet  v1.9  (2026-10-09)
   Started as the shared stylesheet v1. The Gene Academy design system is now the source of truth.
   Principles
   1. One accent job each: navy = structure, teal = action/individual, gold = organisation/deadline.
   2. Rules (hairlines) group content, not shadows or glow. No emoji as icons. No mono-caps badges.
   3. Every page answers four questions in order: what is it, when, how much, how do I apply.
   4. Arabic first, English one tap away, choice remembered across pages (localStorage ga_lang).
   5. Works with no JavaScript: language rule is CSS, FAQ is <details>, prices are plain HTML.
   Load the same Google Fonts URL as index.html so the browser reuses the cache.
   In this system the colour values live in tokens.json; lengths that are tokens read
   var(--name, value) with the v1 value as the fallback, so this file also works alone.
   v1.1 additions, each marked below: --on-fill for labels on fills, the journal face swap,
   the confirmation receipt, and the dash for a data slot that has not been filled.
   v1.2: the edge of a control (inputs, selects, language button, ghost button, segmented control)
   is --rule-strong; dividers and panels stay --rule. Light --teal and --gold are darker; see tokens.
   v1.5: curriculum weights (.weights): hours as weight, credits as charge, per unit and per choice.
   v1.6: a price list total is its own .total row, never a second amount on another row.
   v1.9: forms for engagement and intake (fieldset, textarea, .btn, .chips, .cats, .q, .how, .ev, .brief). */

:root{
  /* colour tokens (--paper --card --ink --navy --teal --gold --muted --on-fill --rule --rule-strong) come from tokens.json, light and dark */
  --ar-display:var(--font-ar-display,'Noto Kufi Arabic','Noto Sans Arabic',sans-serif);
  --ar-body:var(--font-ar-body,'Noto Sans Arabic','Noto Kufi Arabic',sans-serif);
  --en-display:var(--font-en-display,'Noto Serif Display',Georgia,serif);
  --en-body:var(--font-en-body,'Noto Sans','Helvetica Neue',Arial,sans-serif);
  --display:var(--ar-display); --body:var(--ar-body);
  color-scheme:light;
}
html[lang=en]{--display:var(--en-display);--body:var(--en-body)}
/* v1.1  journal pages only: <html data-page="journal"> swaps the two Arabic faces and, since v1.3,
   the English body face (the journal reads in a serif). Nothing else changes. */
html[data-page=journal]{--ar-display:var(--font-journal-display,'Amiri','Noto Naskh Arabic',serif);
  --ar-body:var(--font-journal-body,'Noto Naskh Arabic','Amiri',serif);
  --en-body:var(--font-journal-en-body,'Noto Serif',Georgia,'Times New Roman',serif)}
:root[data-theme=dark]{color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
     font-size:16px;line-height:1.65;-webkit-text-size-adjust:100%}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
a{color:var(--navy)}
:focus-visible{outline:var(--focus-ring,2px) solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap-max,1000px);margin:0 auto;padding-inline:var(--gutter,20px)}
section{scroll-margin-top:16px}

/* language: one rule, out-specifies component rules */
html[lang=ar] [data-en],
html[lang=en] [data-ar]{display:none !important}

/* header (identical to index.html) */
.top{border-bottom:var(--hairline,1px) solid var(--rule);background:var(--card)}
.top .wrap{display:flex;align-items:center;gap:14px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin-inline-end:auto}
.seal{width:38px;height:38px;flex:none}
.brand b{font-family:var(--display);font-size:18px;font-weight:700;color:var(--navy);display:block;line-height:1.2}
.brand i{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.top a.util{font-size:13.5px;color:var(--navy);text-decoration:none;border-bottom:var(--hairline,1px) solid var(--rule);padding-bottom:2px}
.top a.util:hover{border-color:var(--gold)}
button.lang{font:inherit;font-size:13px;background:none;border:var(--hairline,1px) solid var(--rule-strong);
  color:var(--ink);padding:5px 12px;cursor:pointer;border-radius:var(--radius-control,2px)}
button.lang:hover{border-color:var(--teal)}

/* page hero */
.hero{padding-block:var(--hero-top,56px) 8px}
.eyebrow{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);margin:0 0 12px}
.hero h1{font-family:var(--display);font-size:clamp(31px,6.5vw,52px);line-height:1.2;
  margin:0 0 14px;font-weight:700;color:var(--navy);text-wrap:balance;max-width:20ch}
.hero .lead{color:var(--muted);font-size:17px;max-width:54ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
a.go,a.ghost{display:inline-block;font-family:var(--display);font-size:14px;font-weight:600;
  padding:11px 20px;text-decoration:none;border-radius:var(--radius-control,2px)}
a.go{color:var(--on-fill,#fff);background:var(--navy)}
a.go:hover{background:var(--teal)}
a.go.gold{background:var(--gold);color:var(--on-fill,#fff)}
a.ghost{color:var(--navy);border:var(--hairline,1px) solid var(--rule-strong);background:none}
a.ghost:hover{border-color:var(--gold)}

/* section heading with rule (the "band") */
.band{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);margin:var(--section-gap,52px) 0 16px;display:flex;align-items:center;gap:14px}
.band::after{content:"";flex:1;height:var(--hairline,1px);background:var(--rule)}
h2.title{font-family:var(--display);font-size:clamp(22px,4vw,30px);line-height:1.3;color:var(--navy);margin:0 0 10px;font-weight:700}
.sub{color:var(--muted);max-width:60ch;margin:0 0 18px}

/* key dates: four facts, hairlines between, no cards */
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-block:var(--hairline,1px) solid var(--rule);margin-top:34px}
.dates > div{padding:16px 0;padding-inline-end:18px;min-width:0}
.dates > div + div{border-inline-start:var(--hairline,1px) solid var(--rule);padding-inline-start:18px}
.dates b{display:block;font-family:var(--display);font-size:22px;color:var(--navy);line-height:1.25}
.dates span{display:block;font-size:13.5px;color:var(--muted)}
.dates .hot b{color:var(--gold)}
@media (max-width:620px){
  .dates > div + div{border-inline-start:0;padding-inline-start:0;border-top:var(--hairline,1px) solid var(--rule)}
}

/* numbered desks */
.desks{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 36px}
.desks li{border-top:var(--hairline,1px) solid var(--rule);padding:18px 0 20px;display:grid;grid-template-columns:44px 1fr;gap:4px 10px}
.desks .n{font-family:var(--display);font-size:20px;font-weight:700;color:var(--gold);line-height:1.3}
.desks b{font-family:var(--display);font-size:18px;color:var(--navy);display:block;line-height:1.35}
.desks p{color:var(--muted);font-size:15px;margin-top:4px}
.tag{display:inline-block;font-size:12.5px;color:var(--gold);border:var(--hairline,1px) solid var(--rule);padding:0 8px;margin-inline-start:8px;vertical-align:middle}

/* callout: one gold edge, no glow */
.callout{background:var(--card);border:var(--hairline,1px) solid var(--rule);border-inline-start:var(--accent-edge,3px) solid var(--gold);
  padding:var(--box-pad,22px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;margin-top:30px}
.callout > div{flex:1 1 360px;min-width:0}
.callout b{font-family:var(--display);font-size:19px;color:var(--navy);display:block;margin-bottom:6px;line-height:1.35}
.callout p{color:var(--muted);font-size:15px}

/* plain table */
.tablewrap{overflow-x:auto}
table.plain{width:100%;border-collapse:collapse;min-width:420px}
table.plain th{font-family:var(--display);font-size:13px;text-align:start;color:var(--muted);
  font-weight:600;padding:10px 12px;border-bottom:var(--table-head-rule,2px) solid var(--rule)}
table.plain td{padding:12px;border-bottom:var(--hairline,1px) solid var(--rule);font-size:15px}
table.plain tfoot td{font-weight:700;color:var(--navy);border-bottom:0}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* segmented control (country) */
.seg{display:inline-flex;border:var(--hairline,1px) solid var(--rule-strong);background:var(--card);margin-bottom:6px}
.seg button{font:inherit;font-size:14px;background:none;border:0;color:var(--ink);padding:9px 18px;cursor:pointer}
.seg button + button{border-inline-start:var(--hairline,1px) solid var(--rule-strong)}
.seg button[aria-pressed=true]{background:var(--navy);color:var(--on-fill,#fff)}
html:not(.js) .seg{display:none}

/* price list */
dl.prices{border-top:var(--hairline,1px) solid var(--rule)}
dl.prices > div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 18px;
  padding:13px 0;border-bottom:var(--hairline,1px) solid var(--rule)}
dl.prices dt{min-width:0}
dl.prices dd{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy)}
dl.prices dd + dd{margin-inline-start:12px}
dl.prices .key dt,dl.prices .key dd{color:var(--gold);font-weight:700}
dl.prices .grp{border-bottom:0;padding-bottom:4px;padding-top:18px}
dl.prices .grp dt{font-family:var(--display);font-size:13px;color:var(--muted);letter-spacing:.06em;font-weight:600}
.js [data-region]:not(.on){display:none}
.fine{font-size:14px;color:var(--muted);margin-top:14px}

/* fellows band */
.fellows{border:var(--hairline,1px) solid var(--rule);border-inline-start:var(--accent-edge,3px) solid var(--gold);background:var(--card);padding:26px var(--box-pad,22px)}
.fellows h2{font-family:var(--display);font-size:24px;color:var(--navy);margin:0 0 8px}
ol.steps{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 20px;counter-reset:s}
ol.steps li{counter-increment:s;border-top:var(--hairline,1px) solid var(--rule);padding:12px 0;font-size:15px}
ol.steps li::before{content:counter(s);font-family:var(--display);font-weight:700;color:var(--gold);margin-inline-end:10px}

/* checker */
.checker{background:var(--card);border:var(--hairline,1px) solid var(--rule);padding:24px var(--box-pad,22px)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
label{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
input,select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:var(--hairline,1px) solid var(--rule-strong);border-radius:var(--radius-control,2px);padding:10px 12px}
input:focus,select:focus{outline:var(--focus-ring,2px) solid var(--teal);outline-offset:1px;border-color:var(--teal)}
button.go{font-family:var(--display);font-size:14px;font-weight:600;color:var(--on-fill,#fff);background:var(--navy);
  border:0;border-radius:var(--radius-control,2px);padding:12px 22px;cursor:pointer;margin-top:18px}
button.go:hover{background:var(--teal)}
.result{margin-top:22px;padding-top:18px;border-top:var(--hairline,1px) solid var(--rule)}
.result[hidden]{display:none}
.result h3{font-family:var(--display);font-size:17px;color:var(--navy);margin:0 0 8px}
.result ul{padding-inline-start:20px;margin:0 0 12px}
.result .sch{border-top:var(--hairline,1px) solid var(--rule);padding:10px 0;font-size:15px}
.result .sch small{display:block;color:var(--muted)}
.result .closed{opacity:.8}
.result .closed small{color:inherit}  /* v1.2: a dimmed row keeps its status line readable */

/* FAQ */
.faq details{border-top:var(--hairline,1px) solid var(--rule)}
.faq details:last-child{border-bottom:var(--hairline,1px) solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--display);
  font-weight:600;color:var(--navy);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding-bottom:16px;color:var(--muted);max-width:62ch}

footer{margin-top:48px;border-top:var(--hairline,1px) solid var(--rule);padding-block:22px 90px;font-size:13px;color:var(--muted)}
footer p + p{margin-top:6px}
footer strong{color:var(--ink)}

/* mobile: one persistent way to act */
.sticky-apply{display:none}
@media (max-width:620px){
  .hero{padding-block:36px 4px}
  .sticky-apply{display:block;position:fixed;inset-inline:12px;bottom:12px;z-index:20;text-align:center;
    background:var(--navy);color:var(--on-fill,#fff);text-decoration:none;font-family:var(--display);font-weight:600;
    padding:13px;border-radius:var(--radius-control,2px);box-shadow:var(--shadow-sticky,0 2px 10px rgba(0,0,0,.25))}
}
/* v1.1  confirmation receipt: reads the visitor's reference back to them */
.receipt{background:var(--card);border:var(--hairline,1px) solid var(--rule);padding:var(--box-pad,22px);margin-top:30px}
.receipt[hidden]{display:none}
.receipt small{display:block;font-size:13.5px;color:var(--muted)}
.receipt b{display:block;font-family:var(--display);font-size:clamp(22px,4vw,30px);line-height:1.3;color:var(--navy);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;user-select:all}
.receipt p{color:var(--muted);font-size:15px;margin-top:6px;max-width:60ch}
.receipt .actions{margin-top:16px}

/* v1.1  data slots: a figure comes from a data file, never from the markup.
   A slot that was not filled shows a dash, not a guess. */
[data-slot]:empty::before{content:"\2014";color:var(--muted)}

/* v1.5  curriculum weights: every unit, and every choice a student can add, shows its weight in hours
   and its charge in credits. The bar is the unit's hours against the heaviest unit. No currency here. */
.weights ul{list-style:none;padding:0;margin:0}
.weights li,.weights .whead,.weights .sum{display:grid;grid-template-columns:minmax(0,1fr) var(--wh,5.5em) var(--wc,6.5em);
  gap:8px 14px;align-items:baseline;padding:12px 0;border-bottom:var(--hairline,1px) solid var(--rule)}
.weights .whead{font-family:var(--display);font-size:13px;font-weight:600;color:var(--muted);padding:10px 0;
  border-bottom:var(--table-head-rule,2px) solid var(--rule)}
.weights .whead span + span,.weights .h,.weights .c{text-align:end}
.weights .t{min-width:0}
.weights .t small{display:block;font-size:13.5px;color:var(--muted)}
.weights .h,.weights .c{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;color:var(--muted)}
.weights .h b,.weights .c b{font-size:16px;font-weight:600;color:var(--navy)}
.wbar{grid-column:1/-1;display:block;height:4px;background:var(--rule)}
.wbar i{display:block;height:100%;width:calc(var(--w,0)*100%);background:var(--navy)}
.weights .grp{font-family:var(--display);font-size:13px;font-weight:600;color:var(--muted);padding:18px 0 4px}
.weights .choice label{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:inherit;font-weight:400;cursor:pointer}
.weights input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:4px;padding:0;accent-color:var(--teal)}
html:not(.js) .weights input[type=checkbox]{display:none}
.weights .choice .wbar i{background:var(--teal)}
.js .weights .choice:not(.on) .wbar i{background:var(--rule-strong)}
.js .weights .choice:not(.on) .h b,.js .weights .choice:not(.on) .c b{color:var(--muted)}
.weights .sum .t{font-weight:700;color:var(--navy)}
.weights .sum b{font-weight:700}
.weights .sum.mine{border-bottom:0}
.weights .sum[hidden]{display:none}

/* v1.6  price list total: its own row and its own label, in navy. Gold stays for a deadline or organisation price. */
dl.prices .total dt,dl.prices .total dd{font-weight:700;color:var(--navy)}

/* v1.9  forms for engagement and intake  (2026-10-09)
   Taken into the system from the sgsj-join.html and ask-about-your-sample.html work, so there is one
   bundle.css again. Every font falls back to the system faces when the --type-* names from
   handoff/tokens.css are absent, so this file still works alone.
     fieldset, legend, textarea   long-form fields          .btn, .btn.ghost   the page-level action
     .row2                         two fields, one on phone  .chips, .radios    a grid of choices
     .check                        one consent line          .req               the required mark
     .err                          a validation message      .cats / .cat       choose-your-group
     .q, .how                      a question, how you know  .ev                a figure against its claim
     .brief, .kicker               a group briefing          .fact              three plain facts
     h2 > .n                       a step number in a head   .src, .note        provenance and scope
     ul.plain                      a ruled list              code               a reference to copy  */
fieldset{border:0;padding:0;margin:0 0 18px}
legend{font:var(--type-field-label,600 14px/1.65 var(--body));color:var(--ink);padding:0;margin-bottom:8px}
textarea{width:100%;font:inherit;font-size:16px;line-height:1.65;color:var(--ink);background:var(--paper);
  border:var(--hairline,1px) solid var(--rule-strong);border-radius:var(--radius-control,2px);
  padding:10px 12px;min-height:96px;resize:vertical}
textarea:focus{outline:var(--focus-ring,2px) solid var(--teal);outline-offset:1px;border-color:var(--teal)}

.btn{display:inline-block;font:var(--type-button-label,600 14px/1.65 var(--display));color:var(--on-fill,#fff);background:var(--navy);
  border:0;border-radius:var(--radius-control,2px);padding:12px 22px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--teal)}
.btn[disabled]{opacity:.55;cursor:default}
.btn[disabled]:hover{background:var(--navy)}
.btn.ghost{background:none;color:var(--navy);border:var(--hairline,1px) solid var(--rule-strong)}
.btn.ghost:hover{background:none;border-color:var(--gold)}

.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:16px}
.row2 > div{min-width:0}
.chips,.radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 18px}
.chips label,.radios label{display:flex;align-items:flex-start;gap:9px;font:var(--type-body-small,400 15px/1.65 var(--body));
  margin:0;padding:7px 0;cursor:pointer}
.chips input,.radios input,.check input{width:auto;flex:0 0 auto;margin-top:.3em;padding:0;accent-color:var(--teal)}
.check{display:flex;align-items:flex-start;gap:10px;font:var(--type-body-small,400 15px/1.65 var(--body));
  margin:0 0 12px;padding:2px 0;max-width:70ch;cursor:pointer}
.check[hidden]{display:none}
.req{color:var(--gold)}
.err{font:var(--type-body-small,400 15px/1.65 var(--body));color:var(--ink);background:var(--card);
  border:var(--hairline,1px) solid var(--rule);border-inline-start:var(--accent-edge,3px) solid var(--gold);
  padding:12px 14px;margin:16px 0 0;max-width:70ch}
.err[hidden]{display:none}

/* choose your group: name on one line, who it is for under it */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--hairline,1px);
  border:var(--hairline,1px) solid var(--rule);background:var(--rule);margin-top:18px}
.cat{font:var(--type-body-small,400 15px/1.65 var(--body));text-align:start;background:var(--card);color:var(--ink);
  border:0;padding:14px 16px;cursor:pointer;border-inline-start:var(--accent-edge,3px) solid transparent}
.cat strong{display:block;font-family:var(--display);font-weight:600;color:var(--navy)}
.cat span{display:block;color:var(--muted);margin-top:2px}
.cat:hover{border-inline-start-color:var(--rule-strong)}
.cat[aria-pressed=true]{background:var(--navy);color:var(--on-fill,#fff);border-inline-start-color:var(--gold)}
.cat[aria-pressed=true] strong,.cat[aria-pressed=true] span{color:inherit}

.q{border-top:var(--hairline,1px) solid var(--rule);padding:18px 0 4px}
.q > label{font:var(--type-field-label,600 14px/1.65 var(--body));color:var(--ink);margin-bottom:8px;max-width:70ch}
.q .radios{margin-top:2px}
.how{display:grid;grid-template-columns:minmax(170px,1fr) 2fr;gap:12px;margin-top:10px}
@media (max-width:620px){.how{grid-template-columns:1fr}}

.ev{border-top:var(--table-head-rule,2px) solid var(--rule)}
.ev > div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 20px;
  border-bottom:var(--hairline,1px) solid var(--rule);padding:12px 0}
.ev span{font:var(--type-body-small,400 15px/1.65 var(--body));color:var(--muted);flex:1 1 20ch;min-width:0}
.ev b{font:var(--type-desk-number,700 20px/1.3 var(--display));color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}

.brief{background:var(--card);border:var(--hairline,1px) solid var(--rule);
  border-inline-start:var(--accent-edge,3px) solid var(--navy);padding:var(--box-pad,22px);margin-top:18px}
.brief h3{font:var(--type-callout-title,700 19px/1.35 var(--display));color:var(--navy);margin:6px 0 10px}
.brief p{font:var(--type-body-text,400 16px/1.65 var(--body));color:var(--muted);margin:0 0 10px;max-width:70ch}
.brief p:last-child{margin-bottom:0}
.brief .ask{color:var(--ink);background:var(--paper);border:var(--hairline,1px) solid var(--rule);
  border-radius:var(--radius-control,2px);padding:12px 14px}
.kicker{font:var(--type-eyebrow-label,600 12.5px/1.65 var(--display));letter-spacing:var(--track-group,.06em);color:var(--muted)}

.fact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--hairline,1px);
  border:var(--hairline,1px) solid var(--rule);background:var(--rule);margin-bottom:16px}
.fact > div{background:var(--card);padding:16px}
.fact b{display:block;font:var(--type-desk-title,700 18px/1.35 var(--display));color:var(--navy);margin-bottom:4px}
.fact span{font:var(--type-body-small,400 15px/1.65 var(--body));color:var(--muted)}

h2 > .n{display:inline-block;font:var(--type-eyebrow-label,600 12.5px/1.65 var(--display));color:var(--gold);
  font-variant-numeric:tabular-nums;margin-inline-end:10px}
.src,.note{font:var(--type-meta-text,400 13.5px/1.65 var(--body));color:var(--muted);max-width:70ch}
.note[hidden]{display:none}
ul.plain{list-style:none;padding:0;margin:12px 0 0}
ul.plain li{border-top:var(--hairline,1px) solid var(--rule);padding:11px 0;font:var(--type-body-small,400 15px/1.65 var(--body));
  color:var(--muted);max-width:70ch}
/* a reference the visitor copies: the body face with tabular figures. There is no monospace face. */
code{font-family:var(--body);font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--ink);background:var(--paper);border:var(--hairline,1px) solid var(--rule);
  border-radius:var(--radius-control,2px);padding:3px 8px;overflow-wrap:anywhere;user-select:all;direction:ltr;
  display:inline-block;max-width:100%}
code[hidden]{display:none}
/* older names kept so pages already built with them still work; new pages use .top and button.lang */
.topline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:16px 24px}
.topline .brand{font:var(--type-brand-name,700 18px/1.2 var(--display));color:var(--navy);margin-inline-end:auto;display:block}
.langbtn{font:inherit;font-size:13px;background:none;color:var(--ink);cursor:pointer;
  border:var(--hairline,1px) solid var(--rule-strong);border-radius:var(--radius-control,2px);padding:5px 12px}
.langbtn:hover{border-color:var(--teal)}


@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}