/* THE DOCUMENT SURFACE. The four site-meta pages: the privacy policy, the terms of use, the FAQ
 * and the connect form.
 *
 * WHY THEY ARE THEIR OWN TIER. The product bar names what this site IS: the register, the donor
 * intelligence, the news desk, the toolkit, the member states. These four pages are not products,
 * they are statements ABOUT the site, so they never enter that bar and they are reached from the
 * footer of every page instead. They still CARRY the bar, because a reader who lands on a policy
 * from a search result must not be stranded, and the page tab names the surface the way it does on
 * the toolkit and the member states.
 *
 * WHY A NARROWER MEASURE THAN .container. The register's 1280 measure exists to hold a table of
 * 1,862 rows. Continuous prose at that width is unreadable, so the chrome keeps .container and the
 * text sits in an inner .doc capped at 72 characters. That is the one layout departure on these
 * pages and reading measure is the whole reason for it.
 *
 * TYPE. Source Serif 4 for the prose, IBM Plex Mono for numbers and labels, exactly as the rest of
 * the site. WEIGHTS ARE 400 AND 600 ONLY. Source Serif 4 is a variable face that will happily
 * render 200, and a legal notice set in a hairline weight reads as decoration rather than as a
 * statement anyone stands behind, so no rule here asks for less than 400.
 *
 * COLOUR. Tokens only, from shared/tokens.css, which also carries the dark scheme. Orange stays
 * reserved for the page tab, as everywhere else on the site. The one place a state colour is
 * needed is the form: --accent when a message is sent, --orange-strong when it is not, which is
 * the same orange the news desk already uses to mark a caveat.
 *
 * REQUIRES shared/tokens.css then shared/chrome.css, in that order, before this file. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper-2)}
body{margin:0;background:transparent;color:var(--ink);
  font:400 15px/1.5 var(--sans);min-height:100vh;display:flex;flex-direction:column}

/* ---------------------------------------------------------------- the ground
   TWO FIXED LAYERS BEHIND THE SHEET, both in the site's own hand.
   body::before is brushed colour: displaced, blurred ellipses under a turbulence filter, which is
   the technique #brushes, #l2brush, #cwash and the masthead wash already use on this site. A flat
   linear gradient would have been easier and would have read as a different hand.
   body::after is gcc-skyline.webp, a picture the register already ships, as a faint band at the
   foot. Both are deliberately very transparent: the sheet is the thing being read.
   THEY ARE PSEUDO-ELEMENTS, NOT BACKGROUNDS, because a background shorthand in any page's own
   stylesheet would wipe them. That is the same reason chrome.css paints the masthead wash this
   way rather than setting background-image on the band. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' seed='13' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='90' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='26'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Cellipse cx='170' cy='150' rx='430' ry='170' fill='%233E4CC4' opacity='0.30' transform='rotate(-11 170 150)'/%3E%3Cellipse cx='1040' cy='300' rx='400' ry='150' fill='%2300BCF2' opacity='0.22' transform='rotate(9 1040 300)'/%3E%3Cellipse cx='620' cy='690' rx='470' ry='170' fill='%23E2853A' opacity='0.20' transform='rotate(-5 620 690)'/%3E%3Cellipse cx='120' cy='780' rx='330' ry='140' fill='%235B63E6' opacity='0.18' transform='rotate(7 120 780)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% 100%;background-position:center;
  opacity:.55}
body::after{content:"";position:fixed;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;
  height:min(38vh,320px);
  background:url("../gcc-skyline.webp") center bottom/cover no-repeat;
  opacity:.07;
  mask:linear-gradient(to bottom,transparent 0,#000 62%,#000 100%);
  -webkit-mask:linear-gradient(to bottom,transparent 0,#000 62%,#000 100%)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme='light']) body::before{opacity:.42}
  :root:not([data-theme='light']) body::after{opacity:.10}
  /* THE READING SURFACE HAD NO DARK VALUE. .sheet is painted with var(--i-surface,#fff), and
     --i-surface is defined nowhere in the repository, so the fallback won in both schemes while
     --ink flipped to #EEF0F6 around it. The result on /privacy/ was 43 elements at 1.14:1, near
     white text on white paper, which is the whole policy unreadable. Defining the token here
     rather than editing the three var() sites keeps the light default exactly as it was.
     #161A26 is the tokens.css dark --paper-2, so the sheet sits one step above the page ground,
     the same relationship it has in light. Measured 15.23:1 against --ink. */
  :root:not([data-theme='light']){--i-surface:#161A26}}
@media (forced-colors:active){ body::before,body::after{display:none} }

.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--s4)}

/* ---------------------------------------------------------------- the masthead
   Transcribed from the toolkit so the band is the same band. The wash and the tab come from
   chrome.css; these are the two type rules that live in each page's own sheet there. */
header.top{background:var(--mast);position:relative}
header.top .container{padding-top:var(--s4);padding-bottom:var(--s4)}
header.top .brandline{margin:0;font:600 20px/1.25 var(--display);
  color:#F6F5F2;letter-spacing:0;text-wrap:balance}
header.top .brandline a.home{color:inherit;text-decoration:none}
header.top .brandline a.home:hover .abbr{color:#D6DCF4}
header.top .brandline a.home:focus-visible{outline:2px solid #C6CFE4;outline-offset:4px}
header.top .brandline .abbr{color:#B8C2E8;font-weight:400}
header.top .kick{display:flex;align-items:center;gap:13px;margin:17px 0 0;
  font:600 11px/1.6 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:#C6CFE4;
  padding-right:200px}
header.top .kick::before{content:"";flex:none;width:34px;height:2px;border-radius:1px;
  background:#8E9CD4}
@media (max-width:640px){ header.top .kick{padding-right:0} }

/* ---------------------------------------------------------------- the sheet
   One white sheet on the tinted ground, the same construction the toolkit uses for an article,
   because these pages are the same kind of thing: one document, read top to bottom. */
main{flex:1 0 auto}
.doc-wrap{padding:var(--s5) 0 var(--s5)}
/* THE SHEET IS LANDSCAPE, AND ITS WIDTH IS USED RATHER THAN LEFT EMPTY.
   The first attempt capped the sheet at 920 around a centred column, because at the register's
   full measure a single column left a 507px void on one side. Ali asked for the wider, landscape
   feel instead, so the sheet opens out and the extra width now carries the section index in a rail
   beside the prose. That is the toolkit's own construction, a numbered tree next to the content,
   and it is what turns the width into composition rather than a gap.
   THE PROSE MEASURE DOES NOT MOVE. A wide sheet is a layout; a wide line of text is unreadable, so
   .doc-body stays at 72 characters however wide the sheet gets. */
.sheet{background:var(--i-surface,#fff);border:1px solid var(--line);
  padding:var(--s5) clamp(var(--s4),4vw,56px);
  max-width:1200px;margin-inline:auto}
.doc{max-width:none}

/* the head runs above the two columns, with its own text capped so the title and the standfirst
   never stretch into a line nobody can track */
.doc-head{max-width:62ch;margin:0 0 var(--s4)}

.doc-cols{display:block}
.doc-body{max-width:72ch}
@media (min-width:1000px){
  .doc-cols{display:grid;grid-template-columns:250px minmax(0,1fr);
    gap:clamp(32px,4vw,72px);align-items:start}
  /* the rail holds still while the document scrolls past it, which is the point of a contents
     list on a long notice */
  .doc-cols > .index{position:sticky;top:var(--s4)}
}

/* the title block. VERSION is a mono row rather than a sentence, so the date is a fact on the
   page and not a line of prose that has to be written and rewritten. */
.doc h1{margin:0;font:600 clamp(28px,4.4vw,40px)/1.1 var(--display);color:var(--mast);
  letter-spacing:-.2px}
.doc .standfirst{margin:14px 0 0;font:400 17px/1.5 var(--serif);color:var(--ink-2)}
.doc .meta{display:flex;gap:14px;align-items:baseline;margin:var(--s4) 0 0;
  padding-top:var(--s3);border-top:1px solid var(--line)}
.doc .meta dt{flex:none;min-width:74px;margin:0;
  font:400 11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.doc .meta dd{margin:0;font:600 14px/1.6 var(--serif);color:var(--ink)}

/* THE INDEX RAIL. Nothing in it is written: it is the section titles the document already has,
   linked. A contents page, on paper. Below 1000px it stops being a rail and becomes a plain list
   above the text, because a 250px column beside prose does not fit on a phone. */
.doc .index{margin:0 0 var(--s4);padding:0 0 var(--s3);border-bottom:1px solid var(--line)}
.doc .index ul{margin:0;padding:0;list-style:none;columns:2;column-gap:var(--s4)}
.doc .index li{margin:0 0 7px;break-inside:avoid}
.doc .index a{display:flex;gap:10px;font:400 14px/1.45 var(--serif);color:var(--ink-2);
  text-decoration:none;border-bottom:1px solid transparent}
.doc .index a span{flex:none;min-width:1.4em;
  font:600 12px/1.6 var(--mono);color:var(--accent)}
.doc .index a:hover{color:var(--accent);border-bottom-color:var(--accent-line)}
@media (min-width:1000px){
  .doc .index{margin:0;padding:0 var(--s4) 0 0;border-bottom:0;
    border-right:1px solid var(--line)}
  .doc .index ul{columns:1}
}
@media (max-width:640px){ .doc .index ul{columns:1} }

/* THE STANDING NOTICE, on the FAQ, the terms and the connect page. It is a caveat, so it takes the
   orange this site already reserves for a caveat on the news desk, and it is set a step smaller
   than the body because it qualifies the document rather than forming part of its argument. */
.notice{margin:0 0 var(--s5);padding:14px 18px;
  background:var(--orange-soft);border-left:3px solid var(--orange-strong)}
.notice p{margin:0;font:400 14px/1.6 var(--serif);color:var(--ink)}

/* the connect page's alternative to the form, placed below it because it begins with "Or" */
.alt{max-width:52ch;margin:var(--s4) 0 var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--line);font:400 15px/1.6 var(--serif);color:var(--ink-2)}

/* ---------------------------------------------------------------- the body
   Section numbers are mono and blueberry, the title is serif 600 in the masthead navy. Same
   relationship the Word edition uses, because it is the same document. */
.doc h2{display:flex;gap:16px;align-items:baseline;
  margin:var(--s5) 0 var(--s3);scroll-margin-top:var(--s4);
  font:600 clamp(19px,2.2vw,22px)/1.25 var(--display);color:var(--mast)}
.doc h2 .n{flex:none;min-width:1.5em;
  font:600 14px/1.5 var(--mono);color:var(--accent);letter-spacing:.02em}
.doc h2.grp{display:block;margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--line);
  font:600 11px/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
/* THE FIRST THING IN THE BODY COLUMN CARRIES NO RULE AND NO LEAD-IN SPACE.
   Seen on the render, not computed: the FAQ opened with a hairline floating above its first group
   label, because that rule exists to SEPARATE groups and there is nothing above the first one to
   separate it from. The same space also pushed the body's first line below the rail's first item,
   so the two columns read as accidentally offset rather than aligned. */
.doc-body > *:first-child{margin-top:0}
.doc-body > h2.grp:first-child{padding-top:0;border-top:0}
.doc h3{margin:var(--s4) 0 6px;font:600 16px/1.35 var(--serif);color:var(--mast)}
.doc p{margin:0 0 var(--s3);font:400 15.5px/1.65 var(--serif);color:var(--ink)}
.doc p .lead{font-weight:600;color:var(--mast)}
.doc ul,.doc ol{margin:0 0 var(--s3);padding-left:1.6em}
.doc li{margin:0 0 8px;font:400 15.5px/1.65 var(--serif);color:var(--ink)}
.doc ol{list-style:lower-alpha}
.doc ol li::marker{font:600 14px var(--mono);color:var(--accent)}
.doc ul li::marker{color:var(--accent)}
/* A BARE URL IS ONE UNBREAKABLE WORD. Five links on the privacy page are the URL itself, and
   the longest is 282px, which pushed a 320px phone 35px sideways. break-word splits a word
   only when it cannot fit a line alone, so ordinary link text never breaks. */
.doc a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px;
  overflow-wrap:break-word;
  text-decoration-thickness:1px}
.doc a:hover{text-decoration-thickness:2px}

/* the contact panel in section 1 of the policy, and the same treatment for the address on the
   connect page. The address is the one thing on either page a reader came for. */
.doc .kv{margin:0 0 var(--s4);padding:12px 16px;background:var(--accent-soft);
  border-left:2px solid var(--accent)}
.doc .kv span{font:400 14px/1.6 var(--serif);color:var(--ink-2)}
.doc .kv b{font:600 14.5px/1.6 var(--mono);color:var(--accent-2);font-weight:600}

/* ---------------------------------------------------------------- the form
   Fields are 44px, borders are --line-2, the ring is --focus. Nothing is styled into a state it
   is not in: a field is not painted red before it has been filled in wrongly. */
.cform{margin:var(--s5) 0 0;max-width:52ch}
.cf-row{margin:0 0 var(--s4)}
.cf-row label{display:block;margin:0 0 6px;
  font:400 11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cform input[type=text],.cform input[type=email],.cform textarea{
  width:100%;min-height:44px;padding:11px 13px;
  background:var(--i-surface,#fff);color:var(--ink);
  border:1px solid var(--line-2);border-radius:2px;
  font:400 15px/1.5 var(--serif)}
.cform textarea{min-height:168px;resize:vertical}
.cform input:focus-visible,.cform textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink-3);opacity:1}

/* the honeypot. Off-screen rather than display:none, because some bots skip hidden inputs and
   fill the ones they can see in the DOM. aria-hidden and tabindex -1 keep it away from anyone
   real, including a screen reader. */
.cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf-check{display:flex;gap:11px;align-items:flex-start;margin:0 0 var(--s4);
  padding:13px 15px;background:var(--paper-2);border:1px solid var(--line)}
.cf-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.cf-check label{margin:0;font:400 14px/1.45 var(--serif);
  letter-spacing:0;text-transform:none;color:var(--ink)}

.cf-send{min-height:44px;padding:0 26px;border:0;border-radius:2px;cursor:pointer;
  background:var(--accent);color:#FFFFFF;
  font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.cf-send:hover{background:var(--accent-2)}
.cf-send:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.cf-send[disabled]{opacity:.55;cursor:default}

/* THE RESULT LINE. It says what happened and never more than happened. A form that reports
   success on a failed request is the one defect this pattern has actually shipped before, so the
   only thing that turns this green is the receiver confirming it sent. */
.cf-out{margin:var(--s3) 0 0;padding:12px 15px;border-left:2px solid;
  font:400 14.5px/1.55 var(--serif);display:none}
.cf-out.on{display:block}
.cf-out.ok{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.cf-out.bad{border-color:var(--orange-strong);background:var(--orange-soft);color:var(--ink)}

/* ---------------------------------------------------------------- the footer
   The same signature the main page carries, so the four pages end the way every other page ends.
   Its three-column form lives in index.html, which owns the main page's footer. */
/* ONE DECLARATION, AND IT IS LOAD-BEARING. The whole footer now lives in shared/chrome.css, which
   every page loads. This file used to carry a second implementation, a flat row of links plus a
   brand line, and its own footer.sig .wrap at max-width 1280 with 24px padding. That last one was
   not harmless: doc.css loads after chrome.css, so these five pages rendered 437px columns while
   every other page rendered 403px, same markup, different measure.
   What must stay is margin-top:auto. body above is a flex column at min-height 100vh, so auto is
   what pins the footer to the bottom of a short page; chrome.css sets a fixed space instead, which
   would leave it floating mid-page on the shortest of these. */
footer.sig{margin-top:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;
    scroll-behavior:auto !important}
}

@media print{
  html{background:#fff}
  body::before,body::after{display:none}
  .pbar,footer.sig,.doc .index{display:none}
  .notice{background:none;border-left-color:#666}
  .sheet{border:0;padding:0}
  .doc a{color:inherit;text-decoration:none}
}

/* ============================================================ /alialmokdad/
 * A COPY OF HIS OWN ABOUT PAGE, IN THIS SITE'S HAND RATHER THAN THAT SITE'S.
 * alialmokdad.com runs gold on near-black in Cormorant. Reproducing that here would put a second
 * site's identity inside the register. So the words are his, verbatim, and the treatment is this
 * one: blueberry on light, Source Serif for the voice, IBM Plex Mono for the chrome, and the
 * oversized numerals the register already uses to count things. Same person, visibly a different
 * document, which is the point.
 *
 * IT IS THE WIDEST PAGE IN THIS SET. The notices are documents and are measured for reading; this
 * is a profile, so the expertise list runs two across from 900px and the whole sheet is allowed to
 * breathe rather than being held to a single column. */

.sheet:has(.bio-head){max-width:1240px}

.doc .bio-head{max-width:none;margin:0 0 var(--s5);padding-bottom:var(--s4);
  border-bottom:1px solid var(--line)}
.doc .bio-eyebrow{margin:0 0 var(--s3);
  font:600 11px/1.6 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
/* the one bold move on the page: the name at a size nothing else here comes near */
.doc .bio-head h1{margin:0;font:600 clamp(42px,7.4vw,84px)/1.02 var(--display);
  color:var(--mast);letter-spacing:-1.4px;text-wrap:balance}
.doc .bio-sub{margin:var(--s3) 0 0;font:400 clamp(17px,2vw,21px)/1.4 var(--serif);
  color:var(--ink-2);font-style:italic}

/* the three services, as pills. The label is beside the mark rather than hidden behind it, so the
   link is legible to someone who does not recognise a glyph. */
.doc .bio-soc{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s4) 0 0}
.doc .bio-soc .soc{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;
  border:1px solid var(--line-2);border-radius:999px;text-decoration:none;
  background:var(--i-surface,#fff);
  transition:border-color .15s ease-out,color .15s ease-out}
.doc .bio-soc .soc svg{width:16px;height:16px;flex:none;fill:var(--accent)}
.doc .bio-soc .soc span{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2)}
.doc .bio-soc .soc:hover{border-color:var(--accent)}
.doc .bio-soc .soc:hover span{color:var(--accent)}
.doc .bio-soc .soc:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.doc .bio-sec{margin:0 0 var(--s5)}
.doc .bio-sec > h2{margin:0 0 var(--s3);font:600 clamp(22px,2.6vw,28px)/1.2 var(--display);
  color:var(--mast)}
.doc .bio-label{margin:0 0 6px;
  font:600 11px/1.6 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.doc .bio-sec > p{max-width:72ch;margin:0 0 var(--s3);font:400 16px/1.7 var(--serif);color:var(--ink)}

/* THE EXPERTISE LIST. Nine entries, so a single column is a wall and three across would cut the
   measure too short. Two across from 900px, each one led by its number in mono at a size that
   makes the list countable at a glance. */
.doc .x-list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:var(--s4) var(--s5)}
@media (min-width:900px){ .doc .x-list{grid-template-columns:1fr 1fr} }
.doc .x-list li{margin:0;padding:var(--s3) 0 0;border-top:1px solid var(--line)}
.doc .x-list .x-n{margin:0 0 4px;font:600 13px/1 var(--mono);letter-spacing:.1em;color:var(--accent)}
.doc .x-list h3{margin:0 0 8px;font:600 17px/1.3 var(--serif);color:var(--mast)}
.doc .x-list li p:last-child{margin:0;font:400 14.5px/1.65 var(--serif);color:var(--ink-2)}

.doc .bio-close{margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--line);
  font:600 11px/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* the FAQ answer that leads here */
.doc .more{margin:-6px 0 var(--s3)}
.doc .more a{font:600 11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-line)}
.doc .more a:hover{border-bottom-color:var(--accent)}

/* MOTION, AND ONLY WHERE IT MEANS SOMETHING. The nine entries settle in sequence on load, which
   reads as a list arriving rather than as decoration, and the name rises once. Anyone who has
   asked for less motion gets none: the guard is the site's own reduced-motion block, and these
   rules put the element in its final state there rather than leaving it invisible. */
@keyframes bio-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .doc .bio-head h1,.bio-sub,.bio-soc{animation:bio-rise .55s cubic-bezier(.2,.7,.2,1) both}
  .doc .bio-sub{animation-delay:.06s}
  .doc .bio-soc{animation-delay:.12s}
  .doc .x-list li{animation:bio-rise .5s cubic-bezier(.2,.7,.2,1) both}
  .doc .x-list li:nth-child(1){animation-delay:.02s}
  .doc .x-list li:nth-child(2){animation-delay:.06s}
  .doc .x-list li:nth-child(3){animation-delay:.10s}
  .doc .x-list li:nth-child(4){animation-delay:.14s}
  .doc .x-list li:nth-child(5){animation-delay:.18s}
  .doc .x-list li:nth-child(6){animation-delay:.22s}
  .doc .x-list li:nth-child(7){animation-delay:.26s}
  .doc .x-list li:nth-child(8){animation-delay:.30s}
  .doc .x-list li:nth-child(9){animation-delay:.34s}
}

@media print{
  .doc .bio-soc{display:none}
  .doc .x-list{grid-template-columns:1fr 1fr}
}

/* THE TWO PROSE SECTIONS RUN SIDE BY SIDE from 1000px. Measured before this rule: 521px of a
   1232px sheet sat empty to the right of a 598px column, which is the same lopsided void the
   notices had. A profile has no contents rail to fill that width, so the width carries the two
   halves of the story instead. Below 1000px they stack, because two 40-character columns are
   worse than one readable one. */
.doc .bio-cols{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:1000px){
  .doc .bio-cols{grid-template-columns:1fr 1fr;gap:clamp(40px,4vw,72px);align-items:start}
  .doc .bio-cols > .bio-sec{margin-bottom:0}
}
.doc .bio-cols > .bio-sec > p{max-width:62ch}

/* ============================================================ THE PROFILE, RESHAPED
 * Ali asked for this page landscape, for the social links to be proper marks, and for the whole
 * thing to look better. These rules come after the originals above deliberately: they override
 * rather than replace, so the notices that share this stylesheet are untouched.
 *
 * WHAT WAS WRONG WITH THE HEAD. The name, the descriptor and the three links were a vertical pile,
 * so the first screen of a 1240px sheet used a third of its width and the rest was empty. They now
 * share one band, identity on one side and marks on the other, which is what makes the page read
 * wide instead of tall.
 *
 * The descriptor is longer than the line it replaced, one clause rather than four words, so it is
 * capped at a readable measure instead of being allowed to run the full width of the sheet. */
.doc .bio-head{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:end}
@media (min-width:900px){
  .doc .bio-head{grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(28px,4vw,64px);padding-bottom:var(--s4)}
}
.doc .bio-id{min-width:0}
.doc .bio-id h1{margin:0}
/* MEASURED, NOT GUESSED. 34ch was the first attempt and it was far too tight: at 1440 the identity
   column is 898px wide, the descriptor used 356px of it, wrapped to four lines, and left a 600px
   void between its last line and the marks. The descriptor is 99 characters, so a 52ch measure puts
   it on two lines and takes about 90px off the height of the band. */
.doc .bio-sub{max-width:min(100%, 52ch)}
@media (min-width:900px){
  /* the marks sit on the baseline of the name, not floating above the descriptor */
  .doc .bio-head .bio-soc{margin:0;justify-content:flex-end}
}

/* THE MARKS. A circle each, the glyph the whole control, the service name in aria-label and title
 * rather than set beside it in uppercase mono. 46px so the target clears the 44px minimum with a
 * pixel to spare on each side, and the fill inverts on hover so the state is unmistakable rather
 * than a border changing colour by one shade. */
.doc .bio-soc{gap:12px}
.doc .bio-soc .soc{width:46px;height:46px;min-height:0;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:var(--paper);
  transition:background .2s ease-out, border-color .2s ease-out, transform .2s ease-out}
.doc .bio-soc .soc svg{width:20px;height:20px;transition:fill .2s ease-out}
.doc .bio-soc .soc:hover{background:var(--accent);border-color:var(--accent);
  transform:translateY(-2px)}
.doc .bio-soc .soc:hover svg{fill:#FFFFFF}
.doc .bio-soc .soc:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* NINE ENTRIES ACROSS THREE COLUMNS from 1200px, which is where a third column stops cutting the
 * measure too short: at 1240px minus the gutters each column holds about 46 characters, and the
 * detail lines are two to three sentences. Three across turns a nine-deep wall into three rows,
 * which is the same content read landscape. Below that the existing two-column and single-column
 * rules still apply. */
@media (min-width:1200px){
  .doc .x-list{grid-template-columns:repeat(3,1fr);gap:var(--s4) clamp(28px,3vw,48px)}
}

/* the number leads the entry rather than sitting above it, so the eye can count down a column */
.doc .x-list li{display:grid;grid-template-columns:auto 1fr;
  column-gap:14px;row-gap:0;align-items:baseline}
.doc .x-list .x-n{grid-row:1;grid-column:1;margin:0;font-size:12px;color:var(--ink-3)}
.doc .x-list h3{grid-row:1;grid-column:2;margin:0}
.doc .x-list li p:last-child{grid-row:2;grid-column:2;margin:6px 0 0}

@media (prefers-reduced-motion:reduce){
  .doc .bio-soc .soc,.doc .bio-soc .soc svg{transition:none}
  .doc .bio-soc .soc:hover{transform:none}
}
@media print{
  .doc .bio-head{grid-template-columns:1fr}
  @media (min-width:1200px){ .doc .x-list{grid-template-columns:1fr 1fr} }
}

/* ---------------------------------------------------------------- the connect page, landscape

   It was a 345px form pinned to the left of a 980px sheet with the rest empty, and the email
   sentence wrapping to four lines beside 500px of nothing. Two columns now: the form, which is
   the reason for the page, and the ways to reach a person.

   1.25fr against 1fr rather than an even split, because a form with three fields and a button
   needs the room and three marks plus one sentence do not. minmax(0,...) on both tracks because
   a grid child with a long unbroken string, and the email address is one, will otherwise refuse
   to shrink below its content and push the whole sheet sideways.

   It collapses at 860px, which is where the form fields stop being comfortable rather than a
   round number: below that the two columns each become too narrow to read and stacking is the
   honest answer. The reach column goes FIRST in the source order it already has, so on a phone
   the form still comes first and the marks follow it. */
/* stretch, not start. The divider on the reach column is a border, so with content-height
   columns it stopped at the bottom of the email sentence, roughly 40 per cent down a much taller
   form, and a rule that ends in mid-air reads as something unfinished rather than as a division. */
.doc .cgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:stretch}
@media (max-width:860px){
  .doc .cgrid{grid-template-columns:minmax(0,1fr);gap:36px}
}

/* The heading sits at the same weight and face as a section heading elsewhere in these documents,
   so the column reads as part of the page rather than as a widget dropped into it. */
.doc .reach-h{margin:0 0 18px;font:600 20px/1.25 var(--display);color:var(--ink);
  letter-spacing:-.2px;font-optical-sizing:auto}
@media (max-width:600px){ .doc .reach-h{font-size:18px} }

/* The marks were built for the profile page's header, where they sit in a row at the end of a
   line. Here they open a column, so they align left and get room beneath them for the sentence
   that follows. Everything else about them, the 46px circle and the invert on hover, is
   inherited rather than restated. */
.doc .cgrid-reach .bio-soc{justify-content:flex-start;margin:0 0 20px}
.doc .cgrid-reach .alt{margin:0}

/* A hairline between the columns on wide screens only, drawn on the reach column rather than as
   a border on the grid, so it disappears with the second column when the layout stacks. */
@media (min-width:861px){
  .doc .cgrid-reach{padding-left:clamp(28px,4vw,56px);
    border-left:1px solid var(--line)}
  .doc .cgrid{gap:0}
}

/* THE FORM FILLS ITS OWN COLUMN. .cform carries max-width:52ch, which was right when the form was
   the width of the page and stopped a 980px input. Inside a 603px column it capped the fields at
   301px and left the left-hand column half empty, which is the same fault the page had before,
   one level in. The cap is released here rather than changed at source, because 52ch is still the
   right measure anywhere the form is not in this grid.
   The top margin goes too: var(--s5) pushed the first field 48px below the heading beside it, so
   the two columns started on different lines. */
.doc .cgrid-form .cform{max-width:none;margin-top:0}

/* ---------------------------------------------------------------- dark headings
   THE SECOND HALF OF THE SAME FAULT. Giving --i-surface a dark value fixed the reading surface
   and left the headings behind, because --mast is used two ways: it paints the masthead band and
   it colours .doc h1, h2, h2 .n, h3, .lead and the three bio and cross-list headings. As a band it
   must stay dark in dark mode, so it cannot be flipped in tokens.css without breaking the band.
   Before this block those headings measured 1.10:1, dark navy on the now-dark sheet.

   --accent is the same navy lifted for a dark ground: 8.68:1 on the sheet, against the body's
   15.23:1. That is deliberately the same ordering the light scheme has, where the heading at
   13.24:1 sits just under the body at 17.23:1, so the heading still reads as an accent rather
   than shouting louder than the prose.

   THIS BLOCK IS AT THE END OF THE FILE ON PURPOSE. Every selector below is repeated verbatim from
   its light rule, so the specificity is identical and only source order decides. Placed with the
   other dark rules at line 53 it would have lost to the light rules at 121 to 324 and been dead
   on arrival, which is the exact defect this round set out to remove. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme='light']) .doc h1{color:var(--accent)}
  :root:not([data-theme='light']) .doc h2{color:var(--accent)}
  :root:not([data-theme='light']) .doc h3{color:var(--accent)}
  :root:not([data-theme='light']) .doc p .lead{color:var(--accent)}
  :root:not([data-theme='light']) .doc .bio-head h1{color:var(--accent)}
  :root:not([data-theme='light']) .doc .bio-sec > h2{color:var(--accent)}
  :root:not([data-theme='light']) .doc .x-list h3{color:var(--accent)}

  /* THE OTHER DIRECTION OF THE SAME FAULT, and it was already live before this round.
     --accent is a BACKGROUND in two places, and both put a hardcoded #FFFFFF on top of it. That
     is right in light, where --accent is #3E4CC4 and white measures 6.92:1. In dark --accent
     lifts to #AAB4F0 and --accent-2 to #C4CCF6, so white fell to 2.00:1 on the send button at
     rest and 1.58:1 on hover, and the social icon went the same way. The label has to go dark
     when the ground goes light: #0E1018 is the dark --paper, measuring 9.49:1 at rest and
     12.04:1 on hover. Nothing here touches the light scheme, where white stays correct. */
  :root:not([data-theme='light']) .cf-send{color:#0E1018}
  :root:not([data-theme='light']) .doc .bio-soc .soc:hover svg{fill:#0E1018}}

/* PHONE ONLY: document prose at a phone reading size. Measured at 390px, the profile page set its
   body paragraphs at 14.5px, nine of them, which is a comfortable desktop size read at arm's
   length and a small one read at a phone's distance. 16px is the size the platform itself uses for
   body text. The notice pages are left where they are: their paragraphs already sit at 16. */
@media (max-width:600px){
  /* THE LAST SELECTOR HERE IS NOT REDUNDANT. .doc .x-list li p:last-child sets its size
     through the font SHORTHAND at a higher specificity than .doc .x-list p, so the plain
     descendant selector matched and still lost. Measured: the rule applied and the text
     computed at 14.5px anyway. Matching the specificity is what actually moves it. */
  .doc .bio-sec p,.doc .bio-lede,.doc .x-list p,
  .doc .x-list li p:last-child{font-size:16px;line-height:1.62}
  /* the four meta links in the footer of every generated page */
  footer.sig .sig-col a{min-height:44px}
}

/* ==================== PHONE ONLY: the human check meets the minimum target size
 * The checkbox measured 20x20 and its label 105x20, so the only control the form actually
 * requires was the smallest thing on the page and sat under the 24px minimum. It is 24px now,
 * and the label is given the same height and centred against it so the text row is part of the
 * target rather than a caption beside it. The row's own align-items is flex-start, which is
 * right for a wrapping label and wrong once the box is taller than one line of text, so the
 * label centres itself instead of the row changing for everything in it.
 *
 * The same 20x20 applies on a laptop, where the minimum is the same and a mouse does not excuse
 * it, but that width belongs to another session. */
@media (max-width:600px){
  .cf-check input[type=checkbox]{width:24px;height:24px;flex:none}
  .cf-check label{min-height:24px;display:flex;align-items:center}
}

/* ==================== PHONE ONLY: the document index becomes a list you can hit
 * The index is the only navigation these pages have, and on a phone it is how anyone reaches
 * clause seven of a fourteen clause document. Measured: each row 21px tall with 28px between
 * one target and the next, six of them on the FAQ, ten on the privacy policy, fourteen on the
 * terms. That is a stack of small links with seven pixels of nothing between them, and a
 * mis-tap lands you in the wrong clause.
 *
 * These are not inline links inside a sentence, so the exception that covers a link in a
 * paragraph does not cover them. Each row is a flex row already, so it takes a height and
 * centres its content without anything else changing, and the row margin goes because the
 * height now does that job: the step is 44 rather than 28 plus a gap.
 *
 * It costs 96px on the FAQ, 160 on the privacy policy and 224 on the terms, against pages of
 * about 7000px. Worth it for navigation that works.
 *
 * AND THE STANDALONE more LINK, which measured 33x15. It is the entire content of its own
 * paragraph rather than a word inside a sentence, so it is a control and not prose, and 15px
 * tall is the smallest target on the site. Its text is untouched. */
@media (max-width:600px){
  .doc .index a{min-height:44px;align-items:center}
  .doc .index li{margin:0}
  .doc .more a{display:inline-flex;align-items:center;min-height:44px}
}

/* ==================== PHONE ONLY: a tap says it landed
 * Checked every control a finger reaches on this surface against every :active rule loaded,
 * and these had none: the product bar links on every page, the news place, topic and read
 * links, the document index rows, the more link and the way back from a country profile. The
 * register rows, the category cards, the append control and the landing tiles already had one.
 *
 * WHAT THEY DO IS WHAT HOVER ALREADY DOES, because hover never fires on a phone and a state
 * was already chosen for each of these. So nothing new is invented, no colour is added and no
 * transform is introduced, which is also why none of this needs a reduced motion guard: a
 * colour is not motion.
 */
@media (max-width:600px){
  .doc .index a:active{color:var(--accent);border-bottom-color:var(--accent-line)}
  .doc .more a:active{border-bottom-color:var(--accent)}
}


/* ============================================ AN EXPLICIT DARK CHOICE
 * These are the same dark values as the blocks above, answering to a chosen theme
 * rather than to the operating system, because a media query cannot be changed from
 * script and the toggle has to work on a machine set to light.
 * Generated from the prefers-color-scheme blocks in this same file, so the two can
 * never drift: edit the block above and regenerate, never edit one of these by hand. */
:root[data-theme='dark'] body::before{opacity:.42}
:root[data-theme='dark'] body::after{opacity:.10}
:root[data-theme='dark']{--i-surface:#161A26}
:root[data-theme='dark'] .doc h1{color:var(--accent)}
:root[data-theme='dark'] .doc h2{color:var(--accent)}
:root[data-theme='dark'] .doc h3{color:var(--accent)}
:root[data-theme='dark'] .doc p .lead{color:var(--accent)}
:root[data-theme='dark'] .doc .bio-head h1{color:var(--accent)}
:root[data-theme='dark'] .doc .bio-sec > h2{color:var(--accent)}
:root[data-theme='dark'] .doc .x-list h3{color:var(--accent)}
:root[data-theme='dark'] .cf-send{color:#0E1018}
:root[data-theme='dark'] .doc .bio-soc .soc:hover svg{fill:#0E1018}