/* Project page: full-bleed shell and section tabs. */

/* clip, not hidden: it contains stray overflow without turning the shell into
   a scroll container, which would break the sticky folder sidebar. Setting
   overflow-x alone doesn't actually achieve that, though — an unset
   overflow-y next to any non-visible overflow-x computes to auto, not
   visible, so it becomes a scroll container regardless (just an invisible
   one, since nothing here has a bounded height to scroll within) — and
   *that's* what was breaking the sidebar: position: sticky sticks relative
   to the nearest such container, and this one never actually scrolls, so
   nothing inside it ever appeared to track the page's real scroll. Both
   axes need setting explicitly to actually get only the one clipped. */
.shell.is-wide { width: 100%; max-width: 100%; padding: 34px 0 90px; overflow-x: clip; overflow-y: visible; }
.shell.is-wide .view-nav { padding: 0 clamp(22px, 4vw, 64px); }
.shell.is-wide #view-panel { padding: 0 clamp(22px, 4vw, 64px); }

/* Phone navigation. Five sections wrap the tab row on a handset, so below 700px
   the open section's name takes over and a caret turns it into the list of the
   others — the same mechanic the home page uses for its title. */
.project-view-switch { display: none; }

@media (max-width: 700px) {
  .view-nav { display: none; }

  .project-view-switch { position: relative; display: block; margin-bottom: 20px; padding: 0 clamp(22px, 4vw, 64px); }
  .project-view-toggle {
    display: inline-flex; align-items: center; gap: .3em; max-width: 100%; padding: 0;
    border: 0; background: transparent; color: var(--ink); cursor: pointer;
    font: 400 27px/1.1 var(--serif); letter-spacing: -.01em; text-align: left;
  }
  .project-view-caret {
    width: 0; height: 0; flex: none; margin-bottom: .12em;
    border: .17em solid transparent; border-bottom: 0; border-top-color: currentColor; opacity: .55;
  }
  .project-view-toggle[aria-expanded="true"] .project-view-caret { opacity: 1; transform: rotate(180deg); }

  .project-view-menu {
    position: absolute; z-index: 60; top: calc(100% + 7px); left: clamp(22px, 4vw, 64px);
    max-height: min(58vh, 420px); width: min(240px, calc(100vw - 40px)); overflow-y: auto;
    border: 1px solid var(--line); border-radius: 3px; background: var(--paper-raised); box-shadow: var(--shadow);
  }
  .project-view-menu[hidden] { display: none; }
  .project-view-menu-item {
    min-height: var(--tap); display: block; width: 100%; padding: 0 16px;
    border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
    cursor: pointer; font: var(--text-reading)/1.35 var(--sans); text-align: left;
  }
  .project-view-menu-item:last-child { border-bottom: 0; }
  .project-view-menu-item.is-active { color: var(--blue); }
}