.site-header .primary-nav{display:flex;align-items:center;gap:30px}.nav-group{position:relative}.nav-group>summary{display:flex;align-items:center;gap:12px;padding:16px 0;list-style:none;cursor:pointer;font-size:15px}.nav-group>summary::-webkit-details-marker{display:none}.nav-group>summary::after{content:'';flex:none;width:7px;height:7px;margin-block-start:-3px;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s,margin .2s;opacity:.75}.nav-group[open]>summary{color:var(--copper)}.nav-group[open]>summary::after{transform:rotate(225deg);margin-block-start:3px}.nav-group summary:focus-visible{outline:3px solid var(--copper);outline-offset:5px}.nav-panel{position:absolute;top:100%;left:-22px;min-width:290px;background:#ece8df;border:1px solid #c8c1b3;padding:14px 22px;box-shadow:0 14px 35px #20242114;z-index:80}.site-header .nav-panel>a{display:block;padding:13px 0;border-bottom:1px solid #d0c9bc;font-size:15px;line-height:1.4;white-space:nowrap}.site-header .nav-panel>a:last-child{border:0}.site-header [aria-current=page]{color:var(--copper)}.site-footer{display:grid!important;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:5vw!important;padding:55px var(--pad)!important;margin:0!important;border-top:1px solid #b8ae9640!important;text-align:left;background:#252b25;color:#f0ebdf}.build-chapter .site-footer{padding:55px 0 0!important;margin-top:65px!important}.site-footer>div{display:flex!important;flex-direction:column!important;gap:12px!important;align-items:flex-start}.site-footer .wordmark{font-size:42px}.site-footer .footer-purpose p{font-size:15px;line-height:1.5;margin-top:8px}.site-footer a:not(.wordmark){font-size:14px;line-height:1.5;padding:3px 0;color:#e1dfd2}.site-footer a:hover{color:#f0bc90}.site-footer .footer-label{font-size:14px;color:#b9bcac;margin-bottom:5px}.site-footer .text-link{font-size:13px;min-height:40px}.site-header .menu-toggle{display:none;min-height:44px;padding:10px 0 10px 15px;font-size:15px}.mobile-nav{z-index:100;position:absolute;left:0;right:0;top:94px;background:#ece8df;padding:25px var(--pad) 40px;border-bottom:1px solid var(--rule);max-height:calc(100svh - 94px);overflow:auto;color:var(--ink)}.mobile-nav:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:25px}.mobile-nav>div{display:grid;gap:8px;align-content:start}.mobile-nav>div>p{font-size:13px;color:#74766a;margin:0 0 7px}.mobile-nav a{font:19px/1.25 var(--serif);padding:10px 0}.mobile-nav [aria-current=page]{color:var(--copper)}.site-header{isolation:auto}.site-header:has(.nav-group[open]){z-index:90}.site-header:has(.menu-toggle[aria-expanded=true]){z-index:110;background:#ece8df}
@media(max-width:1050px){.site-header{gap:30px}.site-header .primary-nav{gap:23px}.site-footer{grid-template-columns:1fr 1fr;gap:35px 50px!important}}
@media(max-width:760px){.site-header{height:82px;padding:0 20px;gap:18px;display:flex!important}.site-header .wordmark{font-size:37px}.site-header .primary-nav,.site-header .header-cta{display:none!important}.site-header .menu-toggle{display:block!important;margin-left:auto}.mobile-nav{top:82px;max-height:calc(100svh - 82px);padding:22px 20px 35px}.site-footer{padding:40px 20px!important;gap:35px 25px!important}.site-footer .footer-purpose{grid-column:1/-1}.site-footer .footer-label{font-size:13px}.site-footer a:not(.wordmark){font-size:14px}.site-footer .footer-purpose p{font-size:15px}.site-footer .wordmark{font-size:40px}.build-chapter .site-footer{margin-top:45px!important}.site-footer>div:last-of-type{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr;gap:9px 25px!important}.site-footer>div:last-of-type .footer-label{grid-column:1/-1}.mobile-nav>div:last-child{grid-column:1/-1}.mobile-nav a{font-size:19px}}@media(max-width:360px){.mobile-nav:not([hidden]){grid-template-columns:1fr}.mobile-nav>div:last-child{grid-column:auto}.site-header{padding:0 18px}.site-footer{gap:30px 20px!important}.site-footer a:not(.wordmark){font-size:13px}}

/* Header reachability is independent of the cinematic scroll clock. */
html body .site-header[data-header-navigation]{position:fixed!important;inset:0 0 auto;z-index:200;transform:translateY(0);transition:transform .18s ease}
html body .site-header[data-header-state="hidden"]:not(:focus-within){transform:translateY(-102%);pointer-events:none}
html body .site-header[data-header-navigation]:focus-within{transform:translateY(0);transition:none}
html body .site-header[data-header-navigation] .nav-panel{max-height:calc(100svh - var(--site-nav-height) - 12px);overflow-y:auto;overscroll-behavior:contain}
html body .site-header[data-header-elevated="true"]{background:var(--paper)!important;border-bottom-color:var(--rule)!important}
html body:has(.site-header[data-header-navigation]) .mobile-nav{position:fixed!important;top:var(--site-nav-height);max-height:calc(100svh - var(--site-nav-height));z-index:199;overscroll-behavior:contain}
@media(prefers-reduced-motion:reduce){html body .site-header[data-header-navigation]{transition:none}}

/* The language control is a control, not a fourth menu.
   It was a `<details class="nav-group">` beside Platform and Places, which
   made changing language look like opening another section of the site. A
   native select in the bar, outside the nav, says "choose" rather than
   "browse"; the hit box clears the 24px floor of WCAG 2.5.8 and the caret is
   drawn here so every platform shows the same one. Logical properties, so the
   caret sits on the reader's trailing edge in Arabic. */
.site-header .language-switch{position:relative;display:inline-flex;align-items:center;margin-inline-start:auto;flex:0 0 auto}
/* The call to action already carries the bar's `margin-left:auto`. Two auto
   margins split the free space between them and left the control adrift in
   the middle of the bar, so the one that comes first takes it. */
.site-header:has(.language-switch) .header-cta{margin-left:0}
.site-header .language-switch select{appearance:none;-webkit-appearance:none;background:transparent;color:inherit;font:500 13px/1 inherit;letter-spacing:.02em;border:1px solid #ffffff38;border-radius:2px;padding-block:9px;padding-inline:12px 30px;min-height:34px;cursor:pointer}
.site-header .language-switch select:hover{border-color:var(--copper);color:var(--copper)}
.site-header .language-switch select:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.site-header .language-switch select option{background:#111713;color:#edf5f6}
.site-header .language-switch::after{content:'';position:absolute;inset-inline-end:13px;width:7px;height:7px;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:rotate(45deg);margin-block-start:-4px;pointer-events:none;opacity:.75}
.site-header .language-switch noscript{display:inline-flex;gap:10px;font-size:12px;padding-inline-start:10px}
@media(max-width:760px){.site-header .language-switch{margin-inline-start:auto;order:2}.site-header .language-switch select{font-size:12px;padding-block:8px;padding-inline:10px 26px;min-height:32px;max-width:104px;text-overflow:ellipsis}.site-header .menu-toggle{margin-left:12px!important;order:3}}

/* Without a script the language <select> cannot take a reader anywhere: the links the release writes beside it in a
   <noscript> are the control. On a phone those links sat beside the wordmark only by pushing the page wider than the
   screen (599 px at 390, every language), so they wrap within the bar; and the menu, which needs a script to open, is
   left out (LM5). Nothing here applies while a script runs. */
@media (scripting: none) {
 .site-header .language-switch select,.site-header .language-switch::after{display:none}
 /* The five links are wider than the select they replace: between a phone and a laptop (768 px) they pushed the
    pilot button 79 px past the screen's edge, so the switch may narrow and its links wrap. */
 .site-header .language-switch{flex:0 1 auto;min-width:0}
 .site-header .language-switch noscript{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
}
@media (scripting: none) and (max-width: 760px) {
 .site-header .menu-toggle{display:none!important}
 .site-header .language-switch{flex:1 1 auto;min-width:0;justify-content:flex-end}
 .site-header .language-switch noscript{padding-inline-start:0;column-gap:10px}
}