/* ══════════════════════════════════════════════════════════════════════════
   CAPITAL CULTURES · NAVIGATION
   The three-level menu: the full-width panel that hangs off the masthead and
   the curtain accordion that replaces it below 1080px. Loads after
   components.css, which keeps ownership of .mast, .util-btn, .nav-trigger,
   .curtain-top and .curtain-foot. Nothing here restyles those.

   DOSAGE (owner, 28.08.2026). The panel is a quiet ink surface. Its section
   ink arrives as punctuation only: the rules under the group heads, the
   kicker, the marker that slides out of a hovered link, the rail's left rule
   and the overprint wedge on the hem. Ground stays ink; spice stays a line.

   Every ink used for type here is `navInk` from lib/nav.mjs — the variant
   measured against the ink ground (sumac and indigo run lit, About runs
   paper). The wedge uses the same value, so it is visible in all seven.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1. LEVEL ONE ════════════════════════════════════════════════════════ */
.nav li{position:static}          /* the panel measures against .mast, full-bleed */

/* the underline components.css draws on hover also marks an open panel */
.nav .nav-top[aria-expanded="true"]::after{transform:none}
.nav .nav-top[aria-current="true"]{color:var(--sec-ink)}

/* ══ 2. THE PANEL ════════════════════════════════════════════════════════
   components.css treats every link inside .nav as a level-one item: display
   face, uppercase, its own padding and the sliding underline. The panel opts
   out of all of it once, here, and then dresses its own three levels.      */
.nav .mega a,.nav .mega .is-soon{
  font-family:var(--face-body);font-weight:400;text-transform:none;
  letter-spacing:normal;font-size:inherit;line-height:inherit;
  padding:0;display:block;
}
.nav .mega a::after{content:none;display:none}
.nav .mega-list{display:block;gap:0;list-style:none;margin:11px 0 0;padding:0}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--ink);color:var(--paper);
  border-top:var(--rule) solid var(--sec-ink);
  max-height:min(76vh,calc(100dvh - 84px));overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path 300ms var(--snap),visibility 0s linear 300ms;
}
.nav-item[data-open] > .mega{
  clip-path:inset(0);visibility:visible;
  transition:clip-path 340ms var(--snap),visibility 0s;
}

.mega-in{
  display:grid;gap:clamp(24px,3vw,52px);align-items:start;
  grid-template-columns:minmax(0,1fr) clamp(230px,20vw,300px);
  padding-block:clamp(26px,3vw,42px) clamp(24px,2.8vw,40px);
}
.mega-cols{
  display:grid;gap:clamp(20px,2.2vw,34px) clamp(18px,2vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  align-content:start;
}

/* ── level two ── */
.mega-group{min-width:0}
.nav .mega .mega-head{
  display:block;text-decoration:none;
  font-family:var(--face-display);text-transform:uppercase;
  letter-spacing:var(--ls-display);line-height:1.02;
  font-size:clamp(15px,1.1vw,18px);
  padding:0 0 8px;border-bottom:var(--rule) solid var(--sec-ink);
  transition:color var(--t-micro),border-bottom-width var(--t-micro);
}
.nav .mega a.mega-head:hover,.nav .mega a.mega-head:focus-visible{
  color:var(--sec-ink);border-bottom-width:var(--rule-thick);
}
.nav .mega .mega-head.is-label{color:var(--type-2)}
.mega-note{
  margin-top:9px;font-size:13px;line-height:1.4;color:var(--type-2);max-width:26ch;
}

/* ── level three ── */
.nav .mega-list li + li{margin-top:1px}
.nav .mega .mega-link{
  position:relative;font-size:14.5px;line-height:1.35;padding:4px 0;
  text-decoration:none;
  transition:padding-left var(--t-micro) var(--snap),color var(--t-micro);
}
.nav .mega .mega-link::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:8px;height:var(--rule-thick);background:var(--sec-ink);
  scale:0 1;transform-origin:0 50%;transition:scale var(--t-micro) var(--snap);
}
.nav .mega a.mega-link:hover,.nav .mega a.mega-link:focus-visible{padding-left:14px;color:var(--sec-ink)}
.nav .mega a.mega-link:hover::before,.nav .mega a.mega-link:focus-visible::before{scale:1}

.mega-mark{font-size:9px;color:var(--type-2);font-style:normal;margin-left:6px;
  display:inline;letter-spacing:var(--ls-mono)}
/* a line with no page yet keeps its level's type and steps back only in ink */
.nav .mega .is-soon{color:var(--type-2);cursor:default}
.nav .mega .mega-list .is-soon{font-size:14.5px;line-height:1.35;padding:4px 0}

/* ── the rail: one line, one action, one frame ── */
.mega-rail{
  border-left:var(--rule) solid var(--sec-ink);
  padding-left:clamp(16px,1.6vw,26px);min-width:0;
}
.mega-kicker{color:var(--sec-ink)}
.mega-line{margin-top:10px;font-size:15px;line-height:1.45;max-width:32ch}
.nav .mega .mega-act{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  background:var(--paper);color:var(--ink);border:var(--rule) solid var(--paper);
  padding:11px 15px;text-decoration:none;
  font-family:var(--face-mono);font-size:11px;font-weight:600;
  letter-spacing:var(--ls-mono);text-transform:uppercase;line-height:1.2;
  transition:background var(--t-micro),color var(--t-micro),border-color var(--t-micro);
}
.nav .mega a.mega-act:hover,.nav .mega a.mega-act:focus-visible{
  background:var(--ink);color:var(--sec-ink);border-color:var(--sec-ink);
}
.nav .mega .mega-act.is-soon{background:transparent;border-color:var(--type-2);color:var(--type-2)}
.mega-act .mono{font-style:normal;font-size:9px;color:inherit}

.mega-thumb{margin-top:clamp(18px,2vw,26px)}
.mega-thumb img{width:100%;height:clamp(112px,9.5vw,152px);object-fit:cover}
.mega-thumb figcaption{
  margin-top:8px;padding-top:7px;border-top:var(--rule) solid var(--sec-ink);
  color:var(--type-2);font-size:9px;line-height:1.4;
}

/* the overprint wedge — the same signature the band seams carry */
.mega-hem{position:relative;height:clamp(22px,2.2vw,34px);background:var(--ink);overflow:hidden}
.mega-hem::before{content:"";position:absolute;inset:0;background:var(--sec-ink);
  clip-path:polygon(0 100%,100% 0,100% 100%)}
.mega-hem::after{content:"";position:absolute;inset:0;background:var(--sec-ink);
  clip-path:polygon(0 100%,100% 0,100% 38%,0 64%);mix-blend-mode:multiply}

/* a narrow desktop drops the frame and lays the rail out along the hem */
@media(min-width:1080px) and (max-width:1240px){
  .mega-in{grid-template-columns:minmax(0,1fr)}
  .mega-rail{border-left:0;border-top:var(--rule) solid var(--sec-ink);
    padding-left:0;padding-top:18px;
    display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
  .mega-kicker{flex:0 0 auto}
  .mega-line{flex:1 1 300px;margin-top:0;max-width:46ch}
  .nav .mega .mega-act{margin-top:0;margin-left:auto;flex:0 0 auto}
  .mega-thumb{display:none}
}

/* ══ 3. THE CURTAIN — the same tree, stacked ═════════════════════════════ */
.cnav{overflow-y:auto;min-height:0;padding-block:4px 10px;overscroll-behavior:contain}
.cnav-sec{
  border-bottom:var(--rule) solid var(--type-2);
  clip-path:inset(0 100% 0 0);transition:clip-path 320ms var(--snap);
}
.curtain.open .cnav-sec{clip-path:inset(0)}
.curtain.open .cnav-sec:nth-child(2){transition-delay:40ms}
.curtain.open .cnav-sec:nth-child(3){transition-delay:80ms}
.curtain.open .cnav-sec:nth-child(4){transition-delay:120ms}
.curtain.open .cnav-sec:nth-child(5){transition-delay:160ms}
.curtain.open .cnav-sec:nth-child(6){transition-delay:200ms}
.curtain.open .cnav-sec:nth-child(7){transition-delay:240ms}

.cnav-row{position:relative;display:flex;align-items:center;gap:12px;
  padding-inline:var(--gut)}
.cnav-row::before{content:"";position:absolute;left:var(--gut);top:50%;translate:0 -50%;
  width:6px;height:clamp(20px,4.4vw,30px);background:var(--sec-ink)}
.cnav-l1{
  flex:1 1 auto;text-decoration:none;padding:13px 0 13px 18px;
  font-family:var(--face-display);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--ls-display);line-height:.94;
  font-size:clamp(26px,7vw,40px);
}
.cnav-sec[data-current="true"] .cnav-l1{color:var(--sec-ink)}

.cnav-toggle{
  flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  background:transparent;color:inherit;border:var(--rule) solid var(--type-2);
  cursor:pointer;padding:0;
  transition:background var(--t-micro),color var(--t-micro),border-color var(--t-micro);
}
.cnav-toggle:hover{border-color:var(--sec-ink);color:var(--sec-ink)}
.cnav-toggle[aria-expanded="true"]{background:var(--sec-ink);border-color:var(--sec-ink);
  color:var(--ink)}
.cnav-toggle .chev{width:10px;height:10px;border-right:var(--rule) solid currentColor;
  border-bottom:var(--rule) solid currentColor;translate:0 -3px;rotate:45deg;
  transition:rotate var(--t-micro) var(--snap)}
.cnav-toggle[aria-expanded="true"] .chev{rotate:225deg;translate:0 3px}
.cnav-toggle--s{width:40px;height:34px}

.cnav-body{padding:2px var(--gut) 18px calc(var(--gut) + 18px)}
.cnav-line{font-size:14px;line-height:1.45;color:var(--type-2);max-width:46ch;
  padding-bottom:12px;border-bottom:var(--rule) solid var(--sec-ink);margin-bottom:6px}
.cnav-l2s,.cnav-l3{list-style:none;margin:0;padding:0}
.cnav-l2-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.cnav-l2-link{
  flex:1 1 auto;display:block;text-decoration:none;padding:10px 0;
  font-family:var(--face-display);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--ls-display);line-height:1;font-size:clamp(17px,4.4vw,21px);
}
.cnav-l2-link.is-label{color:var(--type-2)}
.cnav-l3{padding-left:15px;margin:0 0 10px;
  border-left:var(--rule) solid var(--sec-ink)}
.cnav-l3-link{display:block;text-decoration:none;padding:9px 0;font-size:15px;line-height:1.3}
.cnav-l3 .is-soon,.cnav-l2-row .is-soon{padding-block:9px}
.cnav-body .mega-mark{font-size:9px}

/* ══ 4. MOTION OFF ══════════════════════════════════════════════════════
   base.css already kills every transition under reduce; restated here so the
   panel and the curtain are known-instant even if that rule is ever scoped. */
@media (prefers-reduced-motion:reduce){
  .mega,.nav-item[data-open] > .mega,.cnav-sec,.mega-link,.mega-link::before,
  .cnav-toggle,.cnav-toggle .chev{transition:none!important}
  .cnav-sec{clip-path:inset(0)!important}
}

@media print{.mega{display:none!important}}