/* ─────────────────────────────────────────────────────────────────────
   studio-nav.css
   The studio face's global header for PROJECT DETAIL pages.

   Case studies are shared by both faces of the same work:

     personal portfolio  index.html / all-works.html  → g-nav (nav-component.js)
     studio              studio.html (4 routes)       → this header

   studio-nav.js injects the markup below only when a project page is being
   read inside the studio flow, and nav-component.js stands down in that
   case — so a case study never wears two identities at once.

   Deliberately self-contained: project pages each carry their own type and
   colour system (vigil-v2.css, critical-ops.css, …), so nothing here reads a
   page-level custom property or font. Mono-only, like the studio's own nav —
   chrome that stays chrome whatever page it sits on.
   ───────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: RFDisplay;
  src: local("Iowan Old Style"), local("Baskerville");
  font-display: swap;
}

@font-face {
  font-family: RFHalimun;
  src: url("fonts/Halimun.woff2") format("woff2"),
       local("Halimun"),
       local("Halimun Script Style");
  font-display: swap;
}

.rf-pnav {
  --rf-ink: #0a0908;
  --rf-paper: #f1ede4;
  --rf-acid: #dfff45;
  --rf-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --rf-pad: clamp(18px, 3.25vw, 56px);
  --rf-ease: cubic-bezier(.22, 1, .36, 1);

  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  left: 0;
  color: var(--rf-paper);
  /* Solid enough to read over a full-bleed hero photograph, translucent
     enough that the page still moves behind it. */
  background: rgba(10, 9, 8, .66);
  border-bottom: 1px solid rgba(241, 237, 228, .1);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  transition:
    transform .45s var(--rf-ease),
    background .35s ease,
    border-color .35s ease;
}

.rf-pnav.is-solid {
  background: rgba(10, 9, 8, .93);
  border-bottom-color: rgba(241, 237, 228, .16);
}

/* Hidden on the way down, back on the way up — same manners as the
   personal face's nav, so scrolling feels identical across both. */
.rf-pnav.is-hidden {
  transform: translateY(-100%);
}

.rf-pnav a {
  color: inherit;
  text-decoration: none;
}

.rf-pnav__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: 68px;
  padding: 0 var(--rf-pad);
}

/* ── Brand ──────────────────────────────────────────────────────────── */

.rf-pnav__brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
}

/* Sized by width: the mark is a drawing at a fixed 6:1 ratio. */
.rf-pnav__wordmark {
  display: block;
  width: clamp(84px, 7vw, 104px);
  height: auto;
}

/* Only if site-data.js never arrived and the header fell back to live text. */
.rf-pnav__wordmark--text {
  width: auto;
  font: 400 clamp(15px, 1.3vw, 19px)/1 "Iowan Old Style", Baskerville, "Times New Roman", serif;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Centre: which project you are reading ──────────────────────────── */

.rf-pnav__project {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  font: 500 10px/1 var(--rf-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rf-pnav__num {
  color: var(--rf-acid);
  font-variant-numeric: tabular-nums;
}

.rf-pnav__name {
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-overflow: ellipsis;
}

.rf-pnav__disc {
  opacity: .5;
}

.rf-pnav__disc::before {
  content: "· ";
}

/* ── Right: studio routes, next project, menu ───────────────────────── */

.rf-pnav__actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  justify-self: end;
  font: 500 10px/1 var(--rf-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rf-pnav__link {
  position: relative;
  padding: 8px 0;
  opacity: .72;
  transition: opacity .25s ease;
}

.rf-pnav__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--rf-ease);
}

.rf-pnav__link:hover {
  opacity: 1;
}

.rf-pnav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.rf-pnav__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(241, 237, 228, .22);
  border-radius: 999px;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}

.rf-pnav__next small {
  opacity: .5;
}

.rf-pnav__next b {
  font-weight: 600;
  letter-spacing: .12em;
}

.rf-pnav__next i {
  font-style: normal;
  transition: transform .35s var(--rf-ease);
}

.rf-pnav__next:hover {
  border-color: var(--rf-acid);
  background: var(--rf-acid);
  color: var(--rf-ink);
}

.rf-pnav__next:hover i {
  transform: translate(3px, -3px);
}

.rf-pnav__menu {
  display: grid;
  align-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.rf-pnav__menu span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform .35s var(--rf-ease);
}

.rf-pnav__menu:hover span:first-child {
  transform: translateX(-3px);
}

.rf-pnav__menu:hover span:last-child {
  transform: translateX(3px);
}

/* ── Reading progress, welded to the header's bottom edge ───────────── */

.rf-pnav__progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
}

.rf-pnav__progress i {
  display: block;
  height: 100%;
  background: var(--rf-acid);
  transform: scaleX(0);
  transform-origin: left;
}

/* ── Menu overlay ───────────────────────────────────────────────────── */

.rf-menu {
  --rf-ink: #0a0908;
  --rf-acid: #dfff45;
  --rf-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --rf-serif: RFDisplay, "Times New Roman", serif;
  --rf-pad: clamp(18px, 3.25vw, 56px);
  --rf-ease: cubic-bezier(.22, 1, .36, 1);

  position: fixed;
  z-index: 1300;
  inset: 0;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  padding: var(--rf-pad);
  opacity: 0;
  background: var(--rf-acid);
  color: var(--rf-ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--rf-ease), opacity .2s, visibility .7s;
}

.rf-menu.is-open {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0);
}

.rf-menu a {
  color: inherit;
  text-decoration: none;
}

.rf-menu__close {
  position: absolute;
  top: 22px;
  right: var(--rf-pad);
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 500 10px/1 var(--rf-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.rf-menu__routes {
  display: grid;
  gap: clamp(6px, 1.4vh, 16px);
}

.rf-menu__routes a {
  display: flex;
  align-items: baseline;
  gap: 24px;
  width: fit-content;
  font: 400 clamp(46px, 11vw, 112px)/.92 var(--rf-serif);
  letter-spacing: -.065em;
  transition: opacity .25s ease, transform .45s var(--rf-ease);
}

.rf-menu__routes a small {
  font: 9px/1 var(--rf-mono);
  letter-spacing: .12em;
  opacity: .45;
}

.rf-menu__routes a:hover {
  opacity: .55;
  transform: translateX(10px);
}

.rf-menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 4vw, 60px);
  margin-top: clamp(28px, 5vh, 56px);
  padding-top: 20px;
  border-top: 1px solid rgba(10, 9, 8, .25);
  font: 500 10px/1.6 var(--rf-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rf-menu__foot a {
  border-bottom: 1px solid rgba(10, 9, 8, .35);
}

.rf-menu__foot span {
  opacity: .55;
}

/* ── Narrow screens: shed the least useful piece first ──────────────── */

@media (max-width: 1180px) {
  .rf-pnav__disc { display: none; }
}

@media (max-width: 1000px) {
  .rf-pnav__link { display: none; }
}

@media (max-width: 820px) {
  /* Three zones still, but the centre is the only one allowed to give up
     width — mark and controls keep their intrinsic size, the project name
     ellipsises into whatever is left. */
  .rf-pnav__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    height: 60px;
  }
  .rf-pnav__project {
    justify-self: center;
    overflow: hidden;
  }
  .rf-pnav__next small,
  .rf-pnav__next b { display: none; }
  .rf-pnav__next { padding: 8px 11px; }
  .rf-pnav__next { min-width: 44px; min-height: 44px; justify-content: center; }
  .rf-pnav__menu { width: 44px; height: 44px; }
}

@media (max-width: 560px) {
  /* Down to the essentials: whose site, which project, and the way out. */
  .rf-pnav__wordmark { width: 78px; }
  .rf-pnav__wordmark--text { width: auto; font-size: 15px; }
  .rf-pnav__num,
  .rf-pnav__next { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rf-pnav,
  .rf-pnav__next i,
  .rf-pnav__menu span,
  .rf-menu,
  .rf-menu__routes a { transition-duration: .01ms; }
}