/* "← All projects" button for standalone case-study pages, matching .cs-close on /portfolio/.
   Include with <link rel="stylesheet" href="/css/back.css"> and put
   <a class="cs-back glass" href="/portfolio/"><span aria-hidden="true">&#8592;</span> All projects</a> right after nav.top.
   Wide screens: pinned top right beside the centred nav, like the in-page case studies.
   Narrower screens, where the nav fills the top: sits top right just under the nav and scrolls away. */
.cs-back{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 76px);right:max(16px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;font:500 14px/1 var(--body);color:var(--ink);text-decoration:none;padding:0 16px 0 10px;border-radius:99px;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.cs-back span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#1c1b19;font-size:15px;line-height:1}
.cs-back:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(40,30,15,.12)}
.cs-back:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* keep the hero's eyebrow clear of the button on short phone screens */
@media (max-width:1079px){.cs-back ~ main .hero{padding-top:clamp(136px,18vh,180px)}}
@media (min-width:1080px){.cs-back{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:max(28px,env(safe-area-inset-right,0px))}}
@media (prefers-reduced-motion:reduce){.cs-back{transition:none}}
@media print{.cs-back{display:none}}