body.page-project-detail{--project-control-top:12px;--project-control-height:44px;--project-control-edge:clamp(32px,4vw,58px)}
.project-micro-actions{position:fixed;top:var(--project-control-top);right:calc(var(--project-control-edge) + 54px);display:flex;gap:3px;z-index:2301;pointer-events:auto;color:#fff;mix-blend-mode:normal;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.project-on-hero .project-micro-actions{opacity:1;visibility:visible}
html body.page-project-detail :is(.project-micro-actions button,.story-reader__index){width:32px;height:var(--project-control-height);display:grid;place-items:center;padding:7px;background:transparent!important;border:0;border-radius:50%;color:inherit;cursor:pointer;transition:background .3s,transform .3s!important;text-shadow:none!important;-webkit-text-stroke:0!important}
html body.page-project-detail :is(.project-micro-actions button,.story-reader__index):hover{background:#ffffff24!important;transform:scale(1.08)}
.project-micro-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
html body.page-project-detail :is(.project-micro-actions button,.story-reader__index):focus-visible{outline:1px solid currentColor!important;outline-offset:3px}
.project-action-status{position:absolute;top:42px;right:0;white-space:nowrap;font-size:12px}
.page-project-detail>.press-basket{display:none}
/* Solid white navigation ink, including the containing layers: changing only
   the SVG cannot remove an ancestor's difference blend. Keep hover/motion intact. */
html body.page-project-detail #main-content :is(.story-reader,.story-project-nav,.story-project-nav a,.story-reader__index,.story-previous-slide,.story-next-slide,.project-micro-actions),
html body.page-project-detail .story-edge-label{color:#fff!important;mix-blend-mode:normal!important}
html body.page-project-detail .story-previous-slide{top:var(--project-control-top)!important;height:var(--project-control-height)!important}
/* The project index owns a separate slot before the actions, never their space. */
html body.page-project-detail .project-cover__number{
 top:var(--project-control-top);right:calc(var(--project-control-edge) + 141px);
 height:var(--project-control-height);display:flex;align-items:center;
 padding:0;border:0;line-height:1;font-variant-numeric:tabular-nums;
}
/* Back is a compact peer of Share/Download, not an edge-navigation zone.
   Retain the real return link and its existing reverse transition. */
html body.page-project-detail .story-reader__index{top:var(--project-control-top)!important;right:var(--project-control-edge)!important;width:44px!important;min-width:44px;height:var(--project-control-height)!important;box-sizing:border-box;padding:0!important;align-items:center;justify-content:center;opacity:1}
html body.page-project-detail .story-reader__index svg{display:block!important;width:18px;height:18px;fill:none!important;stroke:currentColor!important;stroke-width:1.2;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){html body.page-project-detail :is(.project-micro-actions button,.story-reader__index){transition:none!important}}
@media(max-width:900px){
 /* Logo + share + download + close: one row, with close always last. */
 body.page-project-detail{--project-control-top:calc(12px + env(safe-area-inset-top,0px));--project-control-edge:max(12px,env(safe-area-inset-right,0px))}
 html.mobile-menu-enabled body.page-project-detail .site-header .brand{top:var(--project-control-top)!important;display:flex!important;align-items:center;height:44px!important;width:clamp(112px,calc(100% - 184px),148px)!important}
 html.mobile-menu-enabled body.page-project-detail .mobile-menu-toggle{display:none!important}
 .project-micro-actions{right:calc(var(--project-control-edge) + 44px);gap:0;opacity:1;visibility:visible}
 html body.page-project-detail .project-micro-actions button{width:44px;padding:12px}
 .project-micro-actions svg{width:16px;height:16px}
 html.mobile-menu-enabled body.page-project-detail .story-reader__index,
 html body.page-project-detail .story-reader__index{top:var(--project-control-top)!important;right:var(--project-control-edge)!important;width:44px!important;min-width:44px;height:var(--project-control-height);padding:0!important}
 html body.page-project-detail.project-on-hero .story-previous-slide{display:none!important}
 html body.page-project-detail .project-cover__number{top:calc(64px + env(safe-area-inset-top,0px));height:24px;left:max(20px,env(safe-area-inset-left,0px));right:auto;font-size:11px}
 html body.page-project-detail:not(.project-on-hero) .story-previous-slide{top:calc(62px + env(safe-area-inset-top,0px))!important}
}