/* ============================================================
   DevCo · Site navigation
   Apple-OS frosted-glass top bar + full-screen overlay "Index".
   Translucent, backdrop-blurred, hairline-bordered, hard edges.
   Floats over the content; the page is softly visible behind it.
   Adapts over both dark and light sections. Retract on scroll-down.
   ============================================================ */

/* ------------------------------------------------------------
   Brand wordmark — two-tone "Dev" + "Co".
   Inline SVG with <text>; swap to <img> when a real logo lands.
   ------------------------------------------------------------ */
.dc-brand{display:inline-flex;align-items:center;line-height:0;}
.dc-brand__mark{display:block;height:21px;width:auto;}
.dc-brand__mark--lg{height:clamp(34px,4.4vw,52px);}
.dc-brand__type{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:26px;
  letter-spacing:-.03em;
}
/* "Dev" follows the adaptive nav foreground; "Co" stays sage */
.dc-brand__type--ink{fill:var(--nav-fg,var(--ink));}
.dc-brand__type--sage{fill:var(--sage);}
/* overlay brand is always on the dark glass ground */
.dc-overlay__brand .dc-brand__type--ink{fill:var(--bone);}

/* ------------------------------------------------------------
   The bar — Apple-OS frosted glass
   ------------------------------------------------------------
   The glass is ALWAYS on (even at the very top): a translucent,
   earthy-tinted ground + backdrop-filter blur, so the bar floats
   over the page with the content softly blurred behind it.
   nav.js sets `is-onlight` when a light section sits beneath.
   ------------------------------------------------------------ */
.dc-nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);

  /* adaptive tokens — defaults are the dark-ground variant.
     nav.js flips `.is-onlight` to the light-ground variant. */
  --nav-fg:var(--bone);
  --nav-faint:var(--bone-faint);
  --nav-hair:var(--bone-hair);

  /* frosted-glass surface (dark ground): ink-tinted translucency */
  --glass-bg:rgba(20,18,14,.52);
  --glass-blur:18px;
  --glass-sat:150%;
  --glass-hair:rgba(237,230,214,.14);

  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom:var(--hair) solid var(--glass-hair);

  transition:transform .5s var(--ease-inout),
             background .4s var(--ease),
             border-color .4s var(--ease),
             padding .35s var(--ease);
  padding:16px 0;
  will-change:transform;
}

/* a faint inner top-light gives the surface a true "pane of glass"
   read — a hairline highlight along the upper edge */
.dc-nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-top:var(--hair) solid rgba(237,230,214,.10);
}

/* light-ground variant — paper-tinted glass, ink text */
.dc-nav.is-onlight{
  --nav-fg:var(--ink);
  --nav-faint:var(--ink-faint);
  --nav-hair:var(--ink-hair);
  --glass-bg:rgba(245,240,226,.66);
  --glass-hair:rgba(20,18,14,.14);
}
.dc-nav.is-onlight::before{
  border-top-color:rgba(255,255,255,.45);
}

/* scrolled — slim down a touch and deepen the tint slightly so the
   bar stays legible once content is moving fast behind it */
.dc-nav.is-scrolled{
  padding:10px 0;
  --glass-bg:rgba(20,18,14,.66);
  --glass-blur:22px;
}
.dc-nav.is-scrolled.is-onlight{
  --glass-bg:rgba(245,240,226,.78);
}

/* retract on scroll-down, return on scroll-up (client wants this kept) */
.dc-nav.is-hidden{transform:translateY(-101%);}

/* while the overlay is open the bar holds still; the overlay's own
   glass takes over, so the bar surface fades out */
.dc-nav.is-overlay-open{
  transform:none;
  --glass-bg:transparent;
  --glass-hair:transparent;
}
.dc-nav.is-overlay-open::before{border-top-color:transparent;}

/* graceful fallback — no backdrop-filter support: use a more
   opaque solid so the bar never becomes unreadable */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .dc-nav{--glass-bg:rgba(20,18,14,.94);}
  .dc-nav.is-onlight{--glass-bg:rgba(245,240,226,.96);}
}

.dc-nav__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;
}

/* ------------------------------------------------------------
   Primary links — centred set
   ------------------------------------------------------------ */
.dc-nav__links{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(18px,2.4vw,40px);list-style:none;margin:0;padding:0;
}
.dc-nav__link{
  position:relative;
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--nav-faint);
  padding:6px 0;
  transition:color .28s var(--ease);
}
.dc-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:var(--hair);background:var(--nav-fg);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.dc-nav__link:hover,
.dc-nav__link:focus-visible{color:var(--nav-fg);}
.dc-nav__link:hover::after,
.dc-nav__link:focus-visible::after{transform:scaleX(1);}

/* ------------------------------------------------------------
   Right cluster — CTA + Index trigger
   ------------------------------------------------------------ */
.dc-nav__actions{display:flex;align-items:center;gap:14px;justify-self:end;}

.dc-nav__cta{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--nav-fg);
  border:var(--hair) solid var(--nav-fg);
  padding:11px 17px;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.dc-nav__cta-arrow{transition:transform .26s var(--ease);}
.dc-nav__cta:hover,
.dc-nav__cta:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--bone);}
.dc-nav__cta:hover .dc-nav__cta-arrow,
.dc-nav__cta:focus-visible .dc-nav__cta-arrow{transform:translateX(4px);}

/* Index trigger — a small inset glass chip so it reads as a control
   that belongs to the bar surface */
.dc-nav__index{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:transparent;
  border:var(--hair) solid var(--nav-hair);
  color:var(--nav-fg);
  padding:11px 15px;
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:.13em;text-transform:uppercase;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.dc-nav__index:hover,
.dc-nav__index:focus-visible{
  background:var(--nav-fg);
  color:var(--bone);
  border-color:var(--nav-fg);
}
.dc-nav.is-onlight .dc-nav__index:hover,
.dc-nav.is-onlight .dc-nav__index:focus-visible{color:var(--bone);}
.dc-nav__index-glyph{display:inline-flex;flex-direction:column;gap:4px;width:14px;}
.dc-nav__index-glyph span{display:block;height:var(--hair);background:currentColor;}
.dc-nav__index-glyph span:nth-child(1){width:14px;}
.dc-nav__index-glyph span:nth-child(2){width:9px;}

/* ------------------------------------------------------------
   Full-screen overlay "Index" menu — glassy
   ------------------------------------------------------------
   Translucent ink-tinted glass; the page is softly blurred behind
   it (same OS-glass language as the bar), so the overlay reads as
   a frosted pane laid over the site, not an opaque blackout.
   ------------------------------------------------------------ */
.dc-overlay{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:rgba(20,18,14,.82);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  backdrop-filter:blur(28px) saturate(150%);
  color:var(--bone);
  display:flex;flex-direction:column;
  padding:clamp(20px,3.5vh,40px) var(--gutter) clamp(24px,4vh,48px);
  /* closed state */
  opacity:0;visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--ease-inout),
             opacity .3s var(--ease),
             visibility 0s linear .62s;
  overflow-y:auto;
}
.dc-overlay.is-open{
  opacity:1;visibility:visible;
  clip-path:inset(0 0 0 0);
  transition:clip-path .68s var(--ease-inout),
             opacity .2s var(--ease),
             visibility 0s linear 0s;
}
/* fallback — no backdrop-filter: near-solid ink so it stays legible */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .dc-overlay{background:rgba(20,18,14,.98);}
}

/* top survey-chrome row */
.dc-overlay__chrome{
  display:flex;justify-content:space-between;gap:24px;
  padding-bottom:clamp(14px,2vh,24px);
  border-bottom:var(--hair) solid var(--bone-hair);
  color:var(--bone-faint);
}

/* head — brand + close */
.dc-overlay__head{
  display:flex;justify-content:space-between;align-items:center;
  padding-block:clamp(18px,3vh,34px);
}
.dc-overlay__close{
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  background:rgba(237,230,214,.04);
  border:var(--hair) solid var(--bone-hair);
  color:var(--bone);
  padding:11px 16px;
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:.13em;text-transform:uppercase;
  transition:background .26s var(--ease),color .26s var(--ease);
}
.dc-overlay__close:hover,
.dc-overlay__close:focus-visible{background:var(--bone);color:var(--ink);}
.dc-overlay__close-x{position:relative;width:11px;height:11px;flex:none;}
.dc-overlay__close-x::before,
.dc-overlay__close-x::after{
  content:"";position:absolute;top:50%;left:0;width:100%;
  height:var(--hair);background:currentColor;
}
.dc-overlay__close-x::before{transform:rotate(45deg);}
.dc-overlay__close-x::after{transform:rotate(-45deg);}

/* body — two columns: pages | homepage index */
.dc-overlay__body{
  flex:1;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);
  gap:clamp(32px,6vw,96px);
  align-content:start;
  padding-block:clamp(22px,5vh,56px);
  border-top:var(--hair) solid var(--bone-hair);
}
.dc-overlay__label{
  color:var(--bone-faint);
  margin:0 0 clamp(16px,2.4vh,28px);
}

/* pages column — large editorial type */
.dc-overlay__pages{list-style:none;margin:0;padding:0;}
.dc-overlay__link{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:18px;align-items:baseline;
  padding:clamp(14px,2vh,22px) 0;
  border-top:var(--hair) solid var(--bone-hair);
  transition:padding-left .32s var(--ease);
}
.dc-overlay__pages li:last-child .dc-overlay__link{
  border-bottom:var(--hair) solid var(--bone-hair);
}
.dc-overlay__link:hover,
.dc-overlay__link:focus-visible{padding-left:10px;}
.dc-overlay__link-code{
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);
  letter-spacing:var(--tracking-mono);color:var(--bone-faint);
}
.dc-overlay__link-text{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,1.3rem + 3.2vw,4.4rem);
  line-height:1;letter-spacing:-.018em;
  transition:color .26s var(--ease),font-style .26s var(--ease);
}
.dc-overlay__link:hover .dc-overlay__link-text,
.dc-overlay__link:focus-visible .dc-overlay__link-text{font-style:italic;}
.dc-overlay__link-arrow{
  color:var(--bone-faint);
  transition:transform .3s var(--ease),color .3s var(--ease);
}
.dc-overlay__link:hover .dc-overlay__link-arrow,
.dc-overlay__link:focus-visible .dc-overlay__link-arrow{
  color:var(--accent);transform:translateX(6px);
}

/* homepage index column — survey-document rows */
.dc-overlay__index{list-style:none;margin:0;padding:0;
  border-top:var(--hair) solid var(--bone-hair);}
.dc-overlay__row{
  display:grid;grid-template-columns:54px 1fr auto;
  gap:18px;align-items:baseline;
  padding:clamp(11px,1.7vh,17px) 0;
  border-bottom:var(--hair) solid var(--bone-hair);
  transition:padding-left .3s var(--ease);
}
.dc-overlay__row:hover,
.dc-overlay__row:focus-visible{padding-left:8px;}
.dc-overlay__row-code{
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);
  letter-spacing:var(--tracking-mono);color:var(--bone-faint);
}
.dc-overlay__row-name{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,1rem + 1.1vw,2rem);
  line-height:1.1;letter-spacing:-.012em;
}
.dc-overlay__row-sub{
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--bone-faint);text-align:right;
}
.dc-overlay__row:hover .dc-overlay__row-code,
.dc-overlay__row:focus-visible .dc-overlay__row-code{color:var(--accent);}

/* staggered entrance for every overlay item */
.dc-overlay__item{
  opacity:0;transform:translateY(14px);
}
.dc-overlay.is-open .dc-overlay__item{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) calc(.18s + var(--i,0) * .045s),
             transform .5s var(--ease) calc(.18s + var(--i,0) * .045s);
}

/* foot — contact details */
.dc-overlay__foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;flex-wrap:wrap;
  padding-top:clamp(16px,2.6vh,28px);
  border-top:var(--hair) solid var(--bone-hair);
}
.dc-overlay__contact-line{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,.9rem + .7vw,1.5rem);
  margin:.18em 0 0;
}
.dc-overlay__contact-line a{transition:color .26s var(--ease);}
.dc-overlay__contact-line a:hover,
.dc-overlay__contact-line a:focus-visible{color:var(--accent);}
.dc-overlay__contact-line--muted{
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone-faint);
}
.dc-overlay__contact-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--bone);
  border:var(--hair) solid var(--bone-hair);
  padding:13px 19px;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.dc-overlay__contact-cta:hover,
.dc-overlay__contact-cta:focus-visible{
  background:var(--accent);border-color:var(--accent);color:var(--bone);
}

/* ------------------------------------------------------------
   Focus visibility — accessible across both grounds
   ------------------------------------------------------------ */
.dc-nav a:focus-visible,
.dc-nav button:focus-visible,
.dc-overlay a:focus-visible,
.dc-overlay button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ------------------------------------------------------------
   Responsive — proper mobile nav
   ------------------------------------------------------------
   Tablet (<=1080): the centred primary links collapse; the glass
   bar + Index trigger become the navigation. The full-screen
   overlay IS the mobile menu — every primary link and page is in
   it, so nothing is lost.
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .dc-nav__links{display:none;}
  .dc-nav__inner{grid-template-columns:1fr auto;}
}

/* Phone (<=640): drop the inline CTA (it lives in the overlay foot),
   tighten the bar, keep the Index trigger comfortably tappable. */
@media (max-width:640px){
  .dc-nav{padding:12px 0;}
  .dc-nav.is-scrolled{padding:9px 0;}
  .dc-nav__cta{display:none;}
  .dc-nav__inner{gap:16px;}
  .dc-nav__index{
    padding:12px 14px;            /* >=44px tap target */
    min-height:44px;
  }
  .dc-brand__mark{height:19px;}

  /* overlay — single column, comfortable rhythm on phones */
  .dc-overlay{padding-inline:var(--gutter);}
  .dc-overlay__chrome{font-size:var(--fs-mono-sm);}
  .dc-overlay__chrome span:nth-child(3){display:none;} /* coords drop */
  .dc-overlay__body{
    grid-template-columns:1fr;
    gap:clamp(26px,5vh,40px);
  }
  .dc-overlay__row-sub{display:none;}
  .dc-overlay__row{grid-template-columns:44px 1fr;}
  .dc-overlay__link-text{font-size:clamp(2rem,1.2rem + 5vw,3rem);}
  .dc-overlay__foot{flex-direction:column;align-items:flex-start;gap:18px;}
  .dc-overlay__contact-cta{width:100%;justify-content:space-between;}
}

/* very small phones (<=380): keep the Index label, just snug it up */
@media (max-width:380px){
  .dc-nav__index{gap:8px;padding:11px 12px;}
  .dc-overlay__head{padding-block:clamp(14px,2.4vh,22px);}
}

/* ------------------------------------------------------------
   Reduced motion — no transforms, instant state changes
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .dc-nav{transition:background .2s,border-color .2s;}
  .dc-nav.is-hidden{transform:none;}            /* never retract */
  .dc-overlay{
    clip-path:none;
    transition:opacity .2s linear,visibility 0s linear .2s;
  }
  .dc-overlay.is-open{transition:opacity .2s linear,visibility 0s linear 0s;}
  .dc-overlay__item{opacity:1;transform:none;}
  .dc-overlay.is-open .dc-overlay__item{transition:none;}
  .dc-nav__link::after,
  .dc-nav__cta-arrow,
  .dc-overlay__link,
  .dc-overlay__row,
  .dc-overlay__link-arrow{transition:none;}
}