/* One invisible frame for all project chrome. Glyphs share 44px slots while
   the existing edge interaction areas still extend to the viewport edge. */
body.page-project-detail{
 --project-frame-side:max(clamp(16px,3.2vw,48px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
 --project-frame-left:var(--project-frame-side);
 --project-frame-right:var(--project-frame-side);
 --project-frame-top:max(clamp(12px,2.2svh,32px),env(safe-area-inset-top,0px));
 --project-frame-bottom:max(clamp(12px,2.2svh,32px),env(safe-area-inset-bottom,0px));
 --project-frame-slot:44px;
}
:is(html,#project-control-frame) body.page-project-detail .site-header .brand{
 left:var(--project-frame-left)!important;top:var(--project-frame-top)!important;
 height:44px!important;display:flex!important;align-items:center;transform:none!important;
}
:is(html,#project-control-frame) body.page-project-detail .story-reader__index{top:var(--project-frame-top)!important;right:max(0px,calc(var(--project-frame-right) - 22px))!important;width:min(44px,calc(var(--project-frame-right) + 22px))!important;min-width:0!important}
:is(html,#project-control-frame) body.page-project-detail .story-reader__index svg{position:absolute;right:min(22px,var(--project-frame-right));top:50%;translate:50% -50%}
:is(html,#project-control-frame) body.page-project-detail .project-micro-actions{top:var(--project-frame-top)!important;right:calc(var(--project-frame-right) + 22px)!important;gap:0}
:is(html,#project-control-frame) body.page-project-detail .project-micro-actions button{width:44px;height:44px;box-sizing:border-box}
:is(html,#project-control-frame) body.page-project-detail .project-cover__number{top:var(--project-frame-top)!important;left:auto!important;right:calc(var(--project-frame-right) + 144px)!important;height:44px!important}
:is(html,#project-control-frame) body.page-project-detail .story-auto-toggle{left:max(0px,calc(var(--project-frame-left) - 22px))!important;bottom:var(--project-frame-bottom)!important;width:44px;height:44px;box-sizing:border-box;padding:0;display:grid;place-items:center;color:#fff;mix-blend-mode:normal}
:is(html,#project-control-frame) body.page-project-detail .story-auto-toggle svg{position:absolute;left:min(22px,var(--project-frame-left));top:50%;translate:-50% -50%}
:is(html,#project-control-frame) body.page-project-detail .story-project-nav__previous{left:0!important;right:auto!important;width:calc(var(--project-frame-left) + 44px)!important;padding:0 0 0 var(--project-frame-left)!important;box-sizing:border-box}
:is(html,#project-control-frame) body.page-project-detail .story-project-nav__next{right:0!important;left:auto!important;width:calc(var(--project-frame-right) + 44px)!important;padding:0 var(--project-frame-right) 0 0!important;box-sizing:border-box}
:is(html,#project-control-frame) body.page-project-detail .story-project-nav a{place-items:center!important}
:is(html,#project-control-frame) body.page-project-detail .story-previous-slide{top:var(--project-frame-top)!important;height:44px!important;padding:0!important;box-sizing:border-box;display:grid;place-items:center}
:is(html,#project-control-frame) body.page-project-detail .story-next-slide{position:fixed!important;bottom:0!important;height:calc(var(--project-frame-bottom) + 44px)!important;padding:0 0 var(--project-frame-bottom)!important;box-sizing:border-box}
:is(html,#project-control-frame) body.page-project-detail #project-story .project-cover .project-cover__content{
 padding-left:calc(var(--project-frame-left) + 22px)!important;padding-right:calc(var(--project-frame-right) + 22px)!important;
 padding-bottom:calc(var(--project-frame-bottom) + 60px)!important;
}
:is(html,#project-control-frame) body.page-project-detail .project-cover .project-cover-disclosure{position:absolute;right:max(0px,calc(var(--project-frame-right) - 22px));bottom:var(--project-frame-bottom);width:44px;height:44px;margin:0!important;padding:0;box-sizing:border-box}
:is(html,#project-control-frame) body.page-project-detail .story-progress{
 left:max(0px,calc(var(--project-frame-left) - 22px))!important;right:auto!important;bottom:auto!important;
 top:var(--project-progress-top,calc(70% - 84px));height:var(--project-progress-height,48px);width:44px;color:#fff;
 z-index:2350;background:transparent;pointer-events:auto;touch-action:none;cursor:pointer;outline:none;
}
:is(html,#project-control-frame) body.page-project-detail .story-progress::before{content:'';position:absolute;left:calc(min(22px,var(--project-frame-left)) - 1px);top:0;bottom:0;width:2px;background:#ffffff24;pointer-events:none}
:is(html,#project-control-frame) body.page-project-detail .story-progress span{position:absolute;left:calc(min(22px,var(--project-frame-left)) - 1px);top:0;width:2px;pointer-events:none}
:is(html,#project-control-frame) body.page-project-detail .story-progress:focus-visible::before{outline:1px solid #ffffff80;outline-offset:4px}
:is(html,#project-control-frame) body.page-project-detail .project-cover-disclosure>span{position:absolute;right:min(22px,var(--project-frame-right));top:50%;translate:50% -50%}
/* Paint is compact; invisible 44px touch slots and edge selection areas stay. */
:is(html,#project-control-frame) body.page-project-detail :is(.project-micro-actions button,.story-reader__index):is(:hover,:focus-visible){background:transparent!important;transform:none!important;outline:none!important}
:is(html,#project-control-frame) body.page-project-detail :is(.project-micro-actions button,.story-reader__index)::before{
 content:'';position:absolute;width:28px;height:28px;left:50%;top:50%;translate:-50% -50%;border-radius:50%;background:#ffffff24;opacity:0;pointer-events:none;transition:opacity .22s ease;
}
:is(html,#project-control-frame) body.page-project-detail .project-micro-actions button{position:relative}
:is(html,#project-control-frame) body.page-project-detail .story-reader__index::before{left:auto;right:min(22px,var(--project-frame-right));translate:50% -50%}
:is(html,#project-control-frame) body.page-project-detail :is(.project-micro-actions button,.story-reader__index):is(:hover,:focus-visible)::before{opacity:1}
:is(html,#project-control-frame) body.page-project-detail :is(.project-micro-actions button,.story-reader__index):focus-visible::before{outline:1px solid #fff;outline-offset:-1px}
:is(html,#project-control-frame) body.page-project-detail .story-project-nav__previous svg{position:absolute;left:var(--project-frame-left);top:50%;translate:-50% -50%}
:is(html,#project-control-frame) body.page-project-detail .story-project-nav__next svg{position:absolute;right:var(--project-frame-right);top:50%;translate:50% -50%}
:is(html,#project-control-frame) body.page-project-detail :is(.story-auto-toggle,.project-cover-disclosure):focus-visible{outline:none!important}
:is(html,#project-control-frame) body.page-project-detail :is(.story-auto-toggle,.project-cover-disclosure)::before{content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;width:28px;height:28px;border-radius:50%;pointer-events:none;opacity:0;box-sizing:border-box;border:1px solid #fff;transition:opacity .22s}
:is(html,#project-control-frame) body.page-project-detail .story-auto-toggle::before{left:min(22px,var(--project-frame-left))}
:is(html,#project-control-frame) body.page-project-detail .project-cover-disclosure::before{left:auto;right:min(22px,var(--project-frame-right));translate:50% -50%}
:is(html,#project-control-frame) body.page-project-detail :is(.story-auto-toggle,.project-cover-disclosure):focus-visible::before{opacity:1}
/* Identical rotated triangles at every phone ratio, not separately scaled glyphs. */
:is(html,#project-control-frame) body.page-project-detail .story-project-nav a svg{width:9px!important;height:16.5px!important;scale:1!important}
:is(html,#project-control-frame) body.page-project-detail :is(.story-previous-slide,.story-next-slide) svg{width:16.5px!important;height:9px!important;scale:1!important}
/* Project imagery never changes the colour of the logo, labels or controls. */
html:root[data-theme].monochrome-chrome body.page-project-detail .site-header .brand,
:is(html,#project-control-frame) body.page-project-detail :is(.story-reader,.project-micro-actions,.story-auto-toggle,.story-project-nav,.story-previous-slide,.story-next-slide,.story-progress,.story-edge-label){color:#fff!important;mix-blend-mode:normal!important}
:is(html,#project-control-frame) body.page-project-detail #project-story :is(h1,h2,h3,h4,p,dt,dd,figcaption,.story-copy,.story-copy__body,.project-cover__content,.project-cover__number,.project-cover__eyebrow,.project-cover-disclosure,.story-media__caption){color:#fff!important;mix-blend-mode:normal!important}
@media(prefers-reduced-motion:reduce){
 :is(html,#project-control-frame) body.page-project-detail :is(.project-micro-actions button,.story-reader__index)::before{transition:none}
}
/* Idle hides chrome, not the project identity. Keyboard focus remains visible. */
:is(html,#project-control-frame) body.page-project-detail :is(.story-reader,.story-project-nav a,.story-progress,.story-auto-toggle){transition:opacity .18s ease!important}
:is(html,#project-control-frame) body.page-project-detail.project-controls-idle :is(.story-reader,.story-project-nav a,.story-progress,.story-auto-toggle,.story-edge-label){opacity:0!important;pointer-events:none!important;transition:opacity .55s ease!important}
:is(html,#project-control-frame) body.page-project-detail.project-controls-idle .story-reader :is(a,button){pointer-events:none!important}
@media(prefers-reduced-motion:reduce){:is(html,#project-control-frame) body.page-project-detail :is(.story-reader,.story-project-nav a,.story-progress,.story-auto-toggle){transition:none!important}}
@media(max-width:600px){
 /* Keep the project number on its own row on narrow phones. */
 :is(html,#project-control-frame) body.page-project-detail .project-cover__number{top:calc(var(--project-frame-top) + 48px)!important;left:calc(var(--project-frame-left) + 22px)!important;right:auto!important;height:20px!important}
 /* Keep the arrow on the logo centreline, not on the old second header row.
    Reserve its 44px target between the logo and the three action buttons. */
 :is(html,#project-control-frame) body.page-project-detail .site-header .brand{width:min(148px,calc(50% - var(--project-frame-left) - 30px))!important}
 :is(html,#project-control-frame) body.page-project-detail:not(.project-on-hero) .story-previous-slide{top:var(--project-frame-top)!important;left:50%!important;width:44px!important}
}
@media(orientation:landscape) and (max-height:550px) and (max-width:1100px){
 /* Expanded facts cross the side-arrow baseline on shallow screens. Keep
    their reading area just inside the navigation glyphs. */
 :is(html,#project-control-frame) body.page-project-detail .project-cover__data-inner{padding-inline:16px;box-sizing:border-box}
}