/* Two project links on either side of the existing central menu circle. */
.project-menu {
  position:fixed;
  top:32px;
  left:50%;
  transform:translateX(-50%);
  width:256px;
  display:flex;
  justify-content:space-between;
  gap:0;
  z-index:12;
  pointer-events:none;
}
.project-menu-group { display:flex; gap:8px; }
.project-menu a {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--navigation-glass-border);
  background:var(--navigation-glass);
  box-shadow:var(--navigation-glass-shadow);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  color:var(--ink);
  pointer-events:auto;
}
.project-menu svg { width:18px; height:18px; }
.project-menu a:hover,
.project-menu a[aria-current="location"] { background:var(--navigation-glass-hover); }
.project-menu a:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
.project-menu-target { scroll-margin-top:96px; }
@media(max-width:600px) {
  .project-menu { width:232px; top:36px; }
  .project-menu a { width:32px; height:32px; }
  .project-menu svg { width:16px; height:16px; }
}
@media print { .project-menu { display:none; } }

.case-page.has-project-menu > .icon-menu {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Three compact project shortcuts on either side of the main circle. */
.project-menu { width: 352px; }
@media(max-width:600px) {
  .project-menu { width: 304px; }
  .project-menu-group { gap: 4px; }
}

/* Project shortcuts form a separate right-hand rail. */
.project-menu {
  top: 50%;
  left: auto;
  right: 24px;
  width: 40px;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 8px;
}
.project-menu-group {
  flex-direction: column;
  gap: 8px;
}
@media(max-width:600px) {
  .project-menu { top: 50%; right: 20px; width: 32px; gap: 8px; }
  .project-menu-group { gap: 8px; }
}

/* Reveal the global controls on upward scroll, while the project rail stays put. */
.project-back-link {
  position:fixed;
  left:24px;
  top:24px;
  z-index:12;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:8px 16px 8px 12px;
  border:1px solid var(--navigation-glass-border);
  border-radius:999px;
  background:var(--navigation-glass);
  box-shadow:var(--navigation-glass-shadow);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  color:var(--ink);
  font:14px/1.4 Arial,sans-serif;
}
.project-back-link svg { width:24px; height:24px; flex-shrink:0; }
.project-back-link:hover { background:var(--navigation-glass-hover); color:var(--ink); }
.case-page.has-project-menu > .icon-menu,
.project-back-link { transition:opacity .24s ease, visibility .24s ease; }
.case-page.has-project-menu.case-nav-hidden > .icon-menu,
.case-page.has-project-menu.case-nav-hidden > .project-back-link {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.case-page.has-project-menu > .icon-menu:focus-within,
.case-page.has-project-menu > .project-back-link:focus-visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.case-page.has-project-menu .case-back { display:none; }
@media(max-width:600px) {
  .project-back-link { left:20px; top:28px; width:40px; min-height:40px; padding:8px; }
  .project-back-link span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}
@media(prefers-reduced-motion:reduce) {
  .case-page.has-project-menu > .icon-menu,.project-back-link { transition:none; }
}
@media print { .project-back-link { display:none; } }

/* Slideshow control matches the collapsed central menu's 56px circle. */
.project-slideshow-button {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 50%;
  background: rgba(144,144,152,.16);
  color: #55545b;
  box-shadow: inset 0 1px 0 #ffffff66;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.project-slideshow-button svg { width: 24px; height: 24px; }
.project-slideshow-button:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
[data-theme="dark"] .project-slideshow-button { background: #8b8b961f; border-color: #ffffff32; color: #d2d1d7; }
@media(max-width:600px) { .project-slideshow-button { right:20px; } }
@media print { .project-slideshow-button { display:none; } }

/* A miniature of the Projects page's frosted folder replaces the back pill. */
.project-back-link.project-back-folder {
  width: 88px;
  height: 72px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.project-back-folder > .project-folder {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 280px;
  margin: 0;
  transform: scale(.24);
  transform-origin: top left;
}
.project-back-folder .folder-glass > span { display: block; }
@media(max-width:600px) {
  .project-back-link.project-back-folder { width:64px; height:56px; }
  .project-back-folder > .project-folder { transform:scale(.18); }
  .project-back-folder .concept-sheets span,
  .project-back-folder .folder-glass span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
}

.project-back-folder .folder-glass > .folder-back-arrow {
  position:absolute;
  left:50%;
  top:50%;
  width:80px;
  height:80px;
  transform:translate(-50%,-50%);
  color:var(--ink);
  fill:currentColor;
}

/* Bottom-right project rail with a dark indicator for the current section. */
.project-menu {
  top: auto;
  bottom: 24px;
  right: 24px;
  transform: none;
}
.project-menu a[aria-current="location"] {
  background: var(--design-surface);
  border-color: var(--design-border);
  color: var(--design-text-light);
}
@media(max-width:600px) {
  .project-menu { top:auto; bottom:24px; right:20px; transform:none; }
}

/* An edge-attached prototype tab replaces the circular slideshow control. */
.project-slideshow-button {
  top: 0;
  left: 136px;
  right: auto;
  width: auto;
  height: 64px;
  padding: 16px 24px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: var(--design-surface);
  color: var(--design-text-light);
  border-color: var(--design-border);
  font: 14px/1.4 Arial, sans-serif;
  cursor: pointer;
}
.project-slideshow-button svg { width:20px; height:20px; }
[data-theme="dark"] .project-slideshow-button {
  background: var(--design-surface);
  color: var(--design-text-light);
}
@media(max-width:600px) {
  .project-slideshow-button { left:96px; right:auto; height:56px; padding:12px 16px; }
}

/* Compact prototype tab attached to the upper-right edge. */
.project-slideshow-button {
  left: auto;
  right: 24px;
  height: 48px;
  padding: 8px 16px;
  gap: 8px;
  border-radius: 0 0 16px 16px;
  font-size: 12px;
}
.project-slideshow-button svg { width: 16px; height: 16px; }
@media(max-width:600px) {
  .project-slideshow-button {
    left: auto;
    right: 20px;
    height: 48px;
    padding: 8px 16px;
  }
}

/* Mold the prototype tab into the edge with curved shoulders. */
.project-slideshow-button {
  --prototype-tab-color: var(--design-surface);
  background: var(--prototype-tab-color);
  border: 0;
  border-radius: 0 0 24px 24px;
  box-shadow: none;
  overflow: visible;
}
.project-slideshow-button::before,
.project-slideshow-button::after {
  content: "";
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.project-slideshow-button::before {
  left: -16px;
  background: radial-gradient(circle at 0 100%, transparent 16px, var(--prototype-tab-color) 16.5px);
}
.project-slideshow-button::after {
  right: -16px;
  background: radial-gradient(circle at 100% 100%, transparent 16px, var(--prototype-tab-color) 16.5px);
}

/* Reveal section shortcuts only once the first project section is reached. */
.project-menu { opacity:0; visibility:hidden; transition:opacity .24s ease, visibility .24s ease; }
.project-menu.project-menu-visible { opacity:1; visibility:visible; }
.project-slideshow-button { transition:opacity .24s ease, visibility .24s ease; }
.case-page.has-project-menu.case-nav-hidden > .project-slideshow-button {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.case-page.has-project-menu > .project-slideshow-button:focus-visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
@media(prefers-reduced-motion:reduce) {
  .project-menu,.project-slideshow-button { transition:none; }
}

/* Keep the prototype tab off the project opening, even when scrolling upward. */
.case-page.has-project-menu.project-on-opening > .project-slideshow-button,
.case-page.has-project-menu.project-on-opening > .project-slideshow-button:focus-visible {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Compact section drawer, opened from one three-row button. */
.project-menu {
  top:auto; bottom:24px; right:24px; left:auto; transform:none;
  width:48px; height:48px; display:block; pointer-events:auto;
}
.project-section-toggle {
  width:48px; height:48px; display:grid; place-items:center;
  border:1px solid var(--navigation-glass-border); border-radius:50%;
  background:var(--navigation-glass); color:var(--ink);
  box-shadow:var(--navigation-glass-shadow); backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px); cursor:pointer;
}
.project-section-toggle svg { width:22px; height:22px; }
.project-section-panel {
  position:absolute; bottom:64px; right:0; width:224px; padding:16px;
  border:1px solid var(--navigation-glass-border); border-radius:24px;
  background:var(--navigation-glass); color:var(--ink);
  box-shadow:var(--navigation-glass-shadow); backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.project-menu.is-open .project-section-panel { opacity:1; visibility:visible; transform:none; }
.project-section-panel > p { margin:0 12px 12px; font:12px/1.4 Arial,sans-serif; opacity:.6; }
.project-section-panel .project-menu-group { display:flex; flex-direction:column; gap:4px; }
.project-section-panel a {
  box-sizing:border-box; display:flex; justify-content:flex-start; gap:12px;
  width:100%; height:40px; padding:8px 12px; border:0; border-radius:12px;
  background:transparent; box-shadow:none; backdrop-filter:none;
  -webkit-backdrop-filter:none; text-decoration:none; font:14px/1.4 Arial,sans-serif;
}
.project-section-toggle:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
@media(max-width:600px) { .project-menu { right:20px; bottom:24px; width:48px; } }
@media(prefers-reduced-motion:reduce) { .project-section-panel { transition:none; } }

/* Back to projects and a separate folder project picker. */
.project-back-link.project-back-circle {
  width:48px; height:48px; min-height:0; padding:0;
  box-sizing:border-box; justify-content:center; border-radius:50%;
}
.project-back-circle svg { width:24px; height:24px; }
.project-picker { position:fixed; top:24px; left:88px; z-index:13; }
.project-picker .project-picker-toggle { position:relative; top:auto; left:auto; display:block; cursor:pointer; }
.project-picker-list {
  position:absolute; top:88px; left:0; width:224px; padding:8px;
  border:1px solid var(--navigation-glass-border); border-radius:20px;
  background:var(--navigation-glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:var(--navigation-glass-shadow); opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:opacity .2s,transform .2s,visibility .2s;
}
.project-picker.is-open .project-picker-list { opacity:1; visibility:visible; transform:none; }
.project-picker-list a { display:block; padding:12px 16px; border-radius:12px; color:var(--ink); text-decoration:none; font:14px/1.4 Arial,sans-serif; }
.project-picker-list a:hover { background:var(--navigation-glass-hover); }
.project-picker-list a[aria-current="page"] { background:var(--design-surface); color:var(--design-text-light); }
.project-picker { transition:opacity .24s,visibility .24s; }
.case-nav-hidden .project-picker:not(:focus-within):not(.is-open) { opacity:0; visibility:hidden; pointer-events:none; }
@media(max-width:600px) {
  .project-picker { top:28px; left:80px; }
  .project-picker-list { top:72px; }
}
@media(prefers-reduced-motion:reduce) { .project-picker,.project-picker-list { transition:none; } }
@media print { .project-picker { display:none; } }

/* Small folder in the upper-right, with the same glass panel as sections. */
.project-picker { left:auto; right:24px; top:24px; }
.project-picker .project-back-folder { width:64px; height:56px; }
.project-picker .project-back-folder > .project-folder { transform:scale(.18); }
.project-picker-list { top:72px; left:auto; right:0; width:224px; padding:16px; border-radius:24px; }
.project-picker-list > p { margin:0 12px 12px; font:12px/1.4 Arial,sans-serif; opacity:.6; }
.project-picker-list a { display:flex; align-items:center; gap:12px; min-height:40px; box-sizing:border-box; padding:8px 12px; }
.project-picker-list a + a { margin-top:4px; }
.project-picker-list a svg { width:18px; height:18px; flex-shrink:0; }
.project-slideshow-button { right:104px; }
@media(max-width:600px) {
  .project-picker { left:auto; right:20px; top:24px; }
  .project-slideshow-button { right:100px; }
}

/* Stack project links vertically, overriding the general navigation layout. */
.project-picker > .project-picker-list {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:4px;
  box-sizing:border-box;
  width:256px;
  max-width:calc(100vw - 40px);
}
.project-picker-list > a { width:100%; flex:0 0 auto; margin:0; }
.project-picker-list > p { flex:0 0 auto; }
.project-back-link.project-back-circle {
  width:40px;
  height:40px;
}
.project-back-link.project-back-circle svg { width:20px; height:20px; }

/* Invisible bridges keep hover open while crossing the gap to the panel. */
.project-section-panel::after { content:""; position:absolute; left:0; right:0; top:100%; height:16px; }
.project-picker-list::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:20px; }

/* Direct project overview access on every project page. */
.case-page > .project-overview-folder {
 position:fixed;
 top:calc(var(--site-frame-width,12px) + 12px);
 right:calc(var(--site-frame-width,12px) + 84px);
 z-index:9998;
 display:block;
 width:72px;
 height:60px;
 text-decoration:none;
}
.project-overview-folder .project-folder {
 width:240px;
 height:180px;
 transform:scale(.3);
 transform-origin:top left;
 pointer-events:none;
}
.project-overview-folder:focus-visible { outline:2px solid var(--ink); outline-offset:4px; border-radius:12px; }

/* The project folder replaces the section burger and unfolds leftwards. */
.case-page > .project-menu { display:none; }
/* The opening always keeps the centre menu visible, including after idle. */
.case-page.has-project-menu.project-on-opening.case-nav-hidden > .icon-menu,
.case-page.has-project-menu.project-on-opening > .icon-menu {
 opacity:1;
 visibility:visible;
 pointer-events:auto;
}

/* Contact dock expands symmetrically from its stationary centre button. */
.case-page > .icon-menu.horizontal-contact-dock,
.case-page > .icon-menu.horizontal-contact-dock:hover,
.case-page > .icon-menu.horizontal-contact-dock:focus-within {
 display:block; box-sizing:border-box; width:56px; height:56px; max-height:none; padding:0; overflow:visible; border-radius:999px;
 transition:width .45s cubic-bezier(.22,1,.36,1);
}
.case-page > .icon-menu.horizontal-contact-dock.is-expanded { width:320px; }
.case-page .horizontal-contact-dock > .dock-centre-toggle {
 position:absolute; left:50%; top:0; transform:translateX(-50%); width:56px; height:56px; display:grid; place-items:center; padding:0; border:1px solid var(--navigation-glass-border); border-radius:50%; background:var(--navigation-glass); color:var(--ink); cursor:pointer; z-index:2;
}
.horizontal-contact-dock .dock-centre-toggle > span { display:none; }
.case-page .horizontal-contact-dock > :is(.dock-phone,.dock-email,.theme-toggle) {
 position:absolute; top:6px; left:calc(50% - 22px); right:auto; width:44px; height:44px; margin:0; padding:0; opacity:0; visibility:hidden; pointer-events:none;
 transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s,visibility .25s;
}
.case-page .horizontal-contact-dock.is-expanded > :is(.dock-phone,.dock-email,.theme-toggle) { opacity:1; visibility:visible; pointer-events:auto; }
.case-page .horizontal-contact-dock.is-expanded > .dock-phone { transform:translateX(-120px); }
.case-page .horizontal-contact-dock.is-expanded > .dock-email { transform:translateX(-64px); }
.case-page .horizontal-contact-dock.is-expanded > .theme-toggle { transform:translateX(64px); }
.horizontal-contact-dock .dock-centre-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { .case-page > .icon-menu.horizontal-contact-dock,.case-page .horizontal-contact-dock > * { transition:none; } }