/* detection-overlay.css */ .detection-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}.detection-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.detection-body{fill:#e8e9dc0b;stroke:#f3edda;stroke-width:1;stroke-dasharray:3 5;opacity:.55;vector-effect:non-scaling-stroke}.detection-object{fill:#ed7b36;stroke:#ffc08c;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px #fa8d45b0)}.detection-leader{fill:none;stroke:#ffbc84;stroke-width:1.25;vector-effect:non-scaling-stroke}.detection-readout{position:absolute;display:flex;align-items:center;gap:15px;padding:13px;background:#242a25f5;border:1px solid #e6a977;color:#f2ecdc;text-align:left;pointer-events:auto;box-shadow:0 10px 35px #0003;border-radius:3px}.detection-readout:hover,.detection-readout:focus-visible{border-color:#fff0d7;background:#354034}.detection-detail{width:73px;height:73px;flex:0 0 73px;background:#444b41;border:1px solid #dec1a155;border-radius:2px}.detection-detail-mask{fill:#ec7b3980;stroke:#ffe1b9;stroke-width:.7}.detection-copy{display:flex;flex-direction:column;gap:4px}.detection-label{font:20px/1.05 var(--serif);font-weight:400}.detection-score{font:27px/1 var(--serif);color:#ffbc85}.detection-basis{font:12px/1.2 var(--sans);color:#e3dbc9}.detection-overlay[data-condition=uncertain] .detection-object{fill:none;stroke-dasharray:.06 .035;filter:none;opacity:.55}.detection-overlay[data-condition=uncertain] .detection-detail image{filter:blur(1.5px)} @media(max-width:760px){.detection-readout{gap:12px;padding:12px}.detection-label{font-size:20px}.detection-score{font-size:27px}.detection-detail{width:68px;height:68px;flex-basis:68px}.detection-basis{font-size:12px}} /* src/agent-exchange.css */ /* Native evidence handoffs, contained within the existing eight-agent constellation. */ .agent-exchange-host .agent-exchange-member{z-index:2} .agent-exchange{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none;color:#d99a70;contain:layout paint} .agent-exchange *{pointer-events:none} .agent-exchange-track,.agent-exchange-flow,.agent-exchange-tip{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .agent-exchange-track{stroke:#e1bca1;stroke-width:1;stroke-opacity:.18;stroke-dasharray:2 6} .agent-exchange-flow{stroke:#dd9a68;stroke-width:1.55;stroke-opacity:.8} .agent-exchange-tip{stroke:#eeb78d;stroke-width:1.5} .agent-exchange-edge[data-state=waiting] .agent-exchange-track{stroke-opacity:.1} .agent-exchange-edge[data-state=received] .agent-exchange-flow{stroke-opacity:.45} .agent-exchange-packet{fill:#f8ddbd} .agent-exchange-halo{fill:#b76335;opacity:.19} .agent-exchange-edge[data-related=true] .agent-exchange-flow{stroke:#ffe3c2;stroke-width:2.1;stroke-opacity:1} .agent-exchange-edge[data-related=true] .agent-exchange-track{stroke-opacity:.4} .agent-exchange-edge[data-related=true] .agent-exchange-packet{fill:#fff5e3} .agent-exchange-edge[data-dim=true]{opacity:.2} .agent-exchange-signal rect{fill:#222923;fill-opacity:.92;stroke:#ddb18b;stroke-opacity:.32;stroke-width:.7} .agent-exchange-signal text{fill:#f4dcc4;font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.01em} .agent-exchange-signal[data-related=true] rect{fill:#5d3625;stroke-opacity:.6} .agent-exchange[data-reduced=true] .agent-exchange-track{stroke-dasharray:none} @media(prefers-reduced-motion:reduce){.agent-exchange-packet{display:none}} /* src/place-evidence.css */ /* Scoped native evidence layer. Existing video, headline and description stay intact. */ .place-evidence{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:var(--sans,Arial,sans-serif);color:#f0ece1} .place-evidence[hidden],.place-evidence [hidden]{display:none!important} .pe-field,.pe-markers{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none} .pe-connection{stroke:#efb080;stroke-width:1.2;stroke-dasharray:4 7;opacity:.68;vector-effect:non-scaling-stroke} .pe-particle{fill:#ffc59a;stroke:#302c25;stroke-width:1} .pe-dock{position:absolute;top:28px;right:28px;width:min(295px,34%);pointer-events:none} .pe-work{display:flex;flex-direction:column;gap:9px;align-items:flex-end} .pe-work-button,.pe-anchor,.pe-receipt-main,.pe-policy-button{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;pointer-events:auto} .pe-work-button{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 13px 10px 9px;border:1px solid #e8d8bc65;border-radius:24px;background:#252c25eb;box-shadow:0 5px 18px #0b140d22;overflow:hidden} .pe-role-number{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border:1px solid #d3986877;border-radius:50%;font:16px var(--serif,Georgia,serif);color:#f4bc8d} .pe-work-label{font-size:14px;line-height:1.25} .pe-work-progress{position:absolute;left:46px;right:16px;bottom:5px;height:1px;background:#e0cdb42b} .pe-work-progress>span{display:block;height:100%;background:#dc9c6d} .pe-work-button[data-status=waiting]{border-color:#e8d8bc35} .pe-work-button:hover,.pe-anchor:hover{background:#394235} .pe-anchor{position:absolute;display:flex;align-items:center;gap:6px;transform:translate(-18px,-50%);min-height:36px;max-width:190px;padding:4px 10px 4px 5px;border:1px solid #edd5b36b;border-radius:20px;background:#242c24d9;box-shadow:0 3px 14px #101a1526;font-size:12px;line-height:1.15;white-space:nowrap} .pe-anchor-left{transform:translate(calc(-100% + 18px),-50%);flex-direction:row-reverse;padding:4px 5px 4px 10px} .pe-anchor-dot{width:22px;height:22px;flex:0 0 22px;border:1px solid #f0b27a;border-radius:50%;position:relative} .pe-anchor-dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#f5ba84} .pe-anchor-label{max-width:145px;overflow:hidden;text-overflow:ellipsis} .pe-receipt{padding:15px 16px 13px;background:#efe9dff2;border:1px solid #fff7e6b3;border-left:2px solid var(--copper,#a4572f);box-shadow:0 8px 26px #17201625;color:#293128;pointer-events:auto} .pe-receipt-main{border:0;background:transparent;padding:0;display:flex;gap:11px;min-height:49px;width:100%} .pe-receipt-mark{font:25px var(--serif,Georgia,serif);color:#a96136;line-height:1.1} .pe-receipt-body{display:flex;flex-direction:column;gap:7px;min-width:0} .pe-task{font:22px/1.05 var(--serif,Georgia,serif);letter-spacing:-.025em} .pe-owner{font-size:12px;line-height:1.3;color:#56604f} .pe-policy-button{margin-top:12px;padding:10px 0 8px;min-height:38px;background:transparent;border:0;border-top:1px solid #b5ab983d;width:100%;font-size:13px;line-height:1.2;color:#824626} .pe-policy-button:hover{text-decoration:underline;text-underline-offset:4px} .pe-result{display:block;font-size:12px;line-height:1.35;color:#616653;margin-top:2px} .place-evidence button:focus-visible{outline:3px solid #efab77;outline-offset:4px} .pe-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:760px){ .pe-dock{top:18px;left:18px;right:18px;width:auto;max-width:330px;margin-left:auto} .pe-work{gap:7px;align-items:stretch} .pe-work-button{min-height:42px;padding-top:7px;padding-bottom:10px;background:#252c25f2} .pe-work-label{font-size:13px} .pe-anchor{font-size:12px;min-height:36px;max-width:145px} .pe-anchor-label{max-width:104px} .pe-receipt{padding:13px 14px 11px} .pe-task{font-size:23px} .pe-receipt-main{min-height:47px} .pe-owner{font-size:12px} .pe-policy-button{font-size:13px;min-height:38px;margin-top:8px} } @media(prefers-reduced-motion:reduce){.place-evidence *{animation:none!important;transition:none!important}} /* Long translated place names need another line once the phone type reaches 12 px. */ .pe-anchor{white-space:normal;line-height:1.4;text-align:start}.pe-anchor-label{min-width:0;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} @media(max-width:760px){.pe-anchor{max-width:165px}.pe-anchor-label{max-width:124px}} /* src/case-world.css */ .case-world{position:relative;isolation:isolate;min-height:390px;background:radial-gradient(ellipse at 50% 30%,#f2eee6 0%,#e9e4d9 68%,#dedbcf 100%);overflow:hidden} .case-world>canvas{display:block;width:100%;height:100%;outline:none;touch-action:pan-y} .case-world>canvas:focus-visible{outline:2px solid #b86d43;outline-offset:-5px} .case-world-ui{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:var(--sans)} .case-world-caption{position:absolute;left:20px;bottom:13px;margin:0;color:#424e45;font-size:12px;line-height:1.4;pointer-events:none;padding:4px 7px;background:#ece8dfe3;border-radius:3px} .case-world-pin{position:absolute;transform:translate(-50%,-50%);display:block;max-width:220px;border:1px solid #b9876099;border-radius:5px;background:#27332ff0;color:#f5e9d6;font:12px/1.35 Arial,Helvetica,sans-serif;box-shadow:0 4px 15px #1728201a;padding:7px 10px;text-align:center;pointer-events:auto;cursor:pointer} .case-world-pin[hidden]{display:none} .case-world-pin:hover,.case-world-pin[aria-pressed=true]{background:#8d4f30;border-color:#e9b68d} .case-world-pin:focus-visible{outline:2px solid #ba6f45;outline-offset:3px} .case-world-role{min-width:29px;padding:6px;border-radius:50%;max-width:35px;background:#303a36e8;border-color:#c9ac8b80;color:#e6d4bb;opacity:.45} .case-world-role[data-active=true]{opacity:1;border-color:#c9895d} .case-world[data-world-framing=hero]{background:transparent;min-height:0} .case-world[data-world-framing=hero] .case-world-ui{display:none} .case-world[data-unavailable=true]:after{content:'Spatial view unavailable';position:absolute;inset:0;display:grid;place-items:center;color:#465047;font:16px Arial,sans-serif;background:#e9e4d9} @media(max-width:600px){.case-world{min-height:390px}.case-world-pin{font-size:12px;max-width:160px;padding:6px 8px}.case-world-role{padding:5px;min-width:27px}.case-world-caption{left:12px;bottom:10px;font-size:12px}.case-world[data-world-framing=hero]{min-height:0}} /* Scene labels retain their full text at the floor instead of widening off the canvas. */ .case-world-pin{overflow-wrap:anywhere}.case-world-caption{right:12px;max-width:calc(100% - 24px);overflow-wrap:anywhere} /* refinements.css */ .school-plate{inset:0;background:transparent}.school-plate img{object-fit:fill;max-width:none}.school-cutaway{display:none}#school-architecture{isolation:isolate}#school-architecture .cw-controls,#school-architecture .cw-legend{display:none}#school-architecture canvas{position:absolute;inset:0;width:100%;height:100%} .source-reference{position:absolute;right:var(--pad);top:115px;z-index:3;display:flex;align-items:center;gap:12px;font:12px var(--sans);color:#efe9dd;background:#252925c9;padding:10px 14px;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.camera-icon{display:inline-block;width:17px;height:11px;border:1px solid currentColor;border-radius:2px;position:relative}.camera-icon:after{content:'';position:absolute;right:-5px;top:2px;border:3px solid transparent;border-right:3px solid currentColor}.story-stage[data-phase=agents] .source-reference,.story-stage[data-phase=response] .source-reference{opacity:0} .response-routes{display:grid;gap:0;margin:10px 0}.response-recipient{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 0;border-top:1px solid #c9c5b147;color:inherit;position:relative}.response-recipient svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.3;flex-shrink:0}.recipient-copy{display:grid;gap:3px;flex:1}.recipient-copy strong{font:16px/1.15 var(--sans);font-weight:500}.recipient-copy>span{font:12px/1.2 var(--sans);opacity:.65}.recipient-pulse{width:7px;height:7px;background:#c07c4e;border-radius:50%;box-shadow:0 0 0 4px #bf7b4c20}.response-recipient[data-status=acknowledged] .recipient-pulse{background:#7f9576;box-shadow:0 0 0 4px #859a7520}.response-recipient:disabled{cursor:default;opacity:1}.response-recipient:not(:disabled):hover .recipient-copy>span{opacity:1;color:#dc9c6c}.optional-decision{border-top:1px solid #c9c5b147;margin-top:8px;padding-top:16px}.optional-decision summary{font:15px/1.4 var(--sans);cursor:pointer;list-style:disclosure-closed}.optional-decision[open] summary{margin-bottom:14px}.optional-decision .response-route{border:0;padding-bottom:0}.response-panel .response-route:first-of-type{padding:13px 0}.response-panel .case-scores{margin:18px 0}.response-panel .case-scores strong{font-size:37px}.response-panel .response-heading h3{font-size:32px}.response-panel .response-route h4{font-size:18px}.response-panel .response-route p{font-size:13px;line-height:1.35}.school-receipt:has(.response-routes){display:block;width:min(380px,34vw)}.school-receipt .receipt-mark{display:none}.school-receipt h3{font-size:24px}.school-receipt p{font-size:14px}.school-receipt .response-recipient{padding:9px 0}.school-receipt .recipient-copy strong{font-size:14px}.community-story:has(.response-routes){max-height:78vh;overflow:auto}.community-story:has(.response-routes) .response-status{font-size:17px}.community-chapter:has(#community-response:not([hidden])) .community-story{max-height:78vh}.connected-section{position:relative;isolation:isolate;overflow:hidden}.connected-section>*:not(.scene-bridge){position:relative;z-index:1}.scene-bridge{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:.7;pointer-events:none;z-index:0;opacity:.6}.bridge-base{stroke:#aa9d8438}.bridge-signal{stroke:#a6532e;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--connection,0));opacity:.5}.places-heading{background:linear-gradient(180deg,#e5dfd3,#ece8df)}.community-chapter:before{content:'';position:absolute;inset:0 0 auto;height:90px;z-index:2;background:linear-gradient(#ece8dfaa,transparent);pointer-events:none} @media(max-width:760px){.school-plate img{object-position:72% center}.source-reference{right:18px;top:370px;font-size:12px;padding:7px 10px;gap:9px}.story-stage[data-phase=followup] #school-film{object-position:72% center}.school-receipt:has(.response-routes){width:auto;left:18px;right:18px;bottom:110px;padding:17px 20px}.school-receipt .response-recipient{padding:6px 0}.school-receipt h3{font-size:21px}.school-receipt>div>p{display:none}.school-receipt .response-routes{margin:10px 0 0}.school-receipt .recipient-copy>span{font-size:12px}.story-stage[data-phase=followup] .story-copy{top:95px}.story-stage[data-phase=followup] .story-copy h2{font-size:42px}.story-stage[data-phase=followup] .story-copy p{font-size:20px;max-width:300px}.community-story:has(.response-routes),.community-chapter:has(#community-response:not([hidden])) .community-story{max-height:none;overflow:visible}.response-panel .response-heading h3{font-size:29px}.scene-bridge{opacity:.3}.source-reference{transition:opacity .3s}.optional-decision summary{font-size:14px}} @media(prefers-reduced-motion:reduce){.source-reference{transition:none}.bridge-signal{stroke-dashoffset:0}} .pe-zone{fill:#a857352b;stroke:#e6a571;stroke-width:1.5}.pe-buffer{fill:#c9915410;stroke:#f0c28b80;stroke-dasharray:7 6;stroke-width:1}.place-panel:has(.place-evidence[data-case=industry]) video{object-position:48% center} #school-architecture .case-world-ui{display:none}#school-architecture .case-world-caption{display:none} #school-architecture{position:absolute;inset:0;height:100%;min-height:0} #place-site{position:absolute;inset:0;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;background:#252925}#place-site .case-world-ui{display:none}.place-copy,.place-playback{z-index:3}.place-evidence{z-index:2} .school-plate{inset:0 0 0 33%}.school-plate img{object-fit:fill;max-width:none;max-height:none} @media(max-width:760px){.school-plate{inset:26% 0 0}.school-plate img{object-position:center}} .school-plate{mask-image:linear-gradient(90deg,transparent,black 17%)} @media(max-width:760px){.school-plate{mask-image:linear-gradient(180deg,transparent,black 16%)}} .place-overlay{z-index:2;pointer-events:none} @media(max-width:760px){.story-stage[data-phase=response] .story-shade{background:linear-gradient(180deg,#252925f5,#252925db 74%,#252925b3)}.native-site .place-overlay{background:linear-gradient(180deg,transparent 25%,#25292533 42%,#252925e6 70%)}} .place-evidence.model-view .pe-field,.place-evidence.model-view .pe-markers{opacity:0;pointer-events:none} .story-stage:is([data-phase=observe],[data-phase=followup]) :is(.simulation-label,.processing-clock){color:#252925;background:#eee9dfed;border-radius:4px;padding:8px 10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .story-stage:is([data-phase=observe],[data-phase=followup]) .processing-clock span{color:#514b42} .pe-zone{fill:none;stroke:#efba76;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} /* hero-framing.css */ /* The opening keeps the original source at full height. Copy occupies the quiet facade above the person; later story compositions keep their rules. */ #school-stage:is([data-phase="reality"], :not([data-phase])) { height: 100svh; min-height: 0; } /* The film takes the same transform as the retained still from the first frame (motion-repair.css). Covering the stage here while the still settled into its camera window showed the doors without the person, then cut to a second crop when the still took over at the review (8 October). At progress 0 the shared transform is this same cover framing. */ #school-stage:is([data-phase="reality"], :not([data-phase])) .story-shade { background: none; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: clamp(132px, 18svh, 180px); left: var(--pad); right: auto; width: min(770px, 68%); color: #fff7e8; animation: none; text-shadow: 0 2px 14px #161c1866; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 { font-size: clamp(58px, 6.1vw, 88px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { margin-top: 19px; max-width: 620px; font-family: var(--sans); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button { margin-top: 23px; min-height: 50px; padding: 14px 23px; font-size: 19px; text-shadow: none; } #school-stage:is([data-phase="reality"], :not([data-phase])) .source-reference { top: 115px; } @media (min-width: 761px) and (max-height: 740px) { #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: 128px; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 { font-size: clamp(54px, 5.3vw, 70px); } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { max-width: 600px; margin-top: 16px; font-size: 18px; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button { margin-top: 17px; } } @media (min-width: 761px) and (max-height: 650px) { #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: 116px; left: 25vw; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { margin-top: 14px; font-size: 17px; line-height: 1.35; } } @media (max-width: 760px) { #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: 124px; left: 24px; right: 24px; width: auto; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 { max-width: 440px; font-size: clamp(40px, 11.2vw, 68px); line-height: 1; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 br { display: block; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { max-width: 390px; margin-top: 18px; font-size: 16px; line-height: 1.45; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button { margin-top: 19px; padding: 13px 21px; font-size: 18px; min-height: 48px; } #school-stage:is([data-phase="reality"], :not([data-phase])) .source-reference { top: auto; bottom: 118px; right: 18px; font-size: 12px; } } @media (max-width: 350px) { #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: 108px; left: 20px; right: 20px; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 { font-size: 38px; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { margin-top: 10px; font-size: 15px; line-height: 1.3; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button { margin-top: 16px; } } @media (max-height: 500px) and (orientation: landscape) { #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy { top: 104px; left: 25vw; width: min(540px, 67%); } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy h1 { font-size: 40px; max-width: none; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy p { max-width: 540px; font-size: 16px; line-height: 1.35; margin-top: 14px; } #school-stage:is([data-phase="reality"], :not([data-phase])) .hero-copy .button { margin-top: 12px; min-height: 44px; padding: 10px 18px; font-size: 17px; } #school-stage:is([data-phase="reality"], :not([data-phase])) .source-reference { top: 95px; bottom: auto; } } /* navigation.css */ .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 `
` 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