/* ── Shared nav styles ── */
:root{
  --itg-green:#96ff00;
  --itg-ink:#04060a;
  --itg-ease:cubic-bezier(.22,1,.36,1);
  --itg-dur:.27s;
}

/* ── shrink-on-scroll (2026-08-24, Nico) ──
   EXACTLY terra-web-2026's technique (src/components/Navbar.jsx + LenisContext.jsx):
   nav.js sets `--sp` = min(scrollY / 700, 1) on #nav-root from a passive scroll listener,
   and every size interpolates CONTINUOUSLY via calc(base - delta * var(--sp)) - no toggled
   class, no transition jump; the bar tracks the scroll like Terra's does. A soft shadow
   fades in with the same variable. */
#nav-root{position:sticky;top:0;z-index:100;background:#04060a;
          box-shadow:0 4px 20px -2px rgba(0,0,0,calc(.45 * var(--sp,0)));}
nav.site-nav{display:flex;align-items:center;justify-content:space-between;
             padding:calc(22px - 11px * var(--sp,0)) 40px;
             max-width:1280px;margin:0 auto;font-family:var(--font);}
.nav-logo{height:calc(56px - 14px * var(--sp,0));width:auto;display:block;}
.nav-right{display:flex;align-items:center;gap:18px;}

/* ── masked-reveal navlinks ── */
.itg-navlinks{position:relative;display:flex;align-items:center;}

/* the green rectangle (wipe) */
.itg-navrect{
  position:absolute;left:0;width:0;top:50%;height:calc(36px - 3px * var(--sp,0));z-index:1;
  pointer-events:none;
  transform:translateY(-50%) scaleX(0);transform-origin:left center;
  background:var(--itg-green);box-shadow:0 0 22px rgba(150,255,0,.55);
  transition:left var(--itg-dur) var(--itg-ease),
             width var(--itg-dur) var(--itg-ease),
             transform var(--itg-dur) var(--itg-ease);
}

/* resting (thin, white) links */
.itg-navlinks > a{
  position:relative;z-index:0;display:inline-grid;
  padding:9px 16px;text-decoration:none;color:#fff;white-space:nowrap;
  font-family:var(--font);font-size:calc(15px - 2px * var(--sp,0));
  letter-spacing:.08em;text-transform:uppercase;
}
/* Weight is constant across states, 700 everywhere (2026-08-13, Nico): hover used to jump
   400 -> 900; the whole navbar is now a flat 700 (Bold), matching the Subscribe button and
   the site's ghost buttons.
   .ghost must match .face and the clone span exactly — the clip-path window is measured from
   the real link, so any width mismatch drifts the clone off the text it overlays. */
.itg-navlinks > a .ghost{grid-area:1/1;font-weight:700;visibility:hidden;height:0;overflow:hidden;}
.itg-navlinks > a .face{grid-area:1/1;font-weight:700;}

/* bold-dark clone clipped to the rectangle's window */
.itg-navclone{
  position:absolute;left:0;top:0;height:100%;z-index:2;
  display:flex;align-items:center;pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--itg-dur) var(--itg-ease);
}
.itg-navclone > span{
  padding:9px 16px;white-space:nowrap;color:var(--itg-ink);
  font-family:var(--font);font-weight:700;
  /* MUST track the live links' interpolated size or the masked-hover clone drifts off the
     text it overlays (the clip window is measured from the real link) */
  font-size:calc(15px - 2px * var(--sp,0));
  letter-spacing:.08em;text-transform:uppercase;
}

/* ══ SUBSCRIBE button — shared component (2026-08-13, Nico) ═══════════════════════════════
   Same inversion as the sponsor CTA: lime fill at rest, then a dark wipe enters and the type
   turns lime with a lime border and glow. Used by the navbar, the newsletter CTA and the footer.
   Size is NOT set here — each instance keeps its own font-size/padding.
   The wipe is pure CSS (the sponsor button uses JS): transform-origin flips right -> left on
   hover, so it enters from the left and, on mouse-out, retreats to the right instead of
   rewinding leftwards. Children need z-index above ::before, so the label must be an element,
   never a bare text node. */
.btn-sub{
  position:relative;overflow:hidden;
  display:inline-grid;place-items:center;
  /* uppercase RESTORED 2026-08-25 (Nico): dropped earlier the same day as part of the CTA
     canon, then Nico asked for it back specifically on Subscribe - it is the one button that
     stays ALL-CAPS everywhere (nav, newsletter band, footer); every other CTA (.btn-ghost)
     stays sentence case. */
  font-family:var(--font);font-weight:700;text-transform:uppercase;
  color:#04060a;background:#96ff00;border:1px solid #96ff00;
  text-decoration:none;cursor:pointer;border-radius:0;
  transition:color .28s, border-color .28s, box-shadow .28s;
}
.btn-sub::before{
  content:'';position:absolute;inset:0;background:#04060a;z-index:0;pointer-events:none;
  transform:scaleX(0);transform-origin:right center;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.btn-sub > *{position:relative;z-index:1;}
.btn-sub:hover{color:#96ff00;border-color:#96ff00;box-shadow:0 0 30px rgba(150,255,0,0.5);}
.btn-sub:hover::before{transform:scaleX(1);transform-origin:left center;}

/* navbar instance — padding is 1px short of the old 11px to absorb the new 1px border.
   Shrinks with --sp like everything else in the bar. */
.nav-sub{font-size:calc(14px - 2px * var(--sp,0));letter-spacing:.08em;
         padding:calc(10px - 3px * var(--sp,0)) calc(21px - 5px * var(--sp,0));}

/* CTA-band instance (2026-08-17). `.btn-sub` carries no size of its own, so every instance sets it;
   the home's newsletter band did that with inline styles and episode-178.html would have been the
   second copy of the same three values. Promoted to a modifier instead, so the two CTA buttons
   cannot drift apart the way the ghost button's primary variant did. */
.btn-sub--cta{font-size:var(--t-ui);letter-spacing:.06em;padding:13px 27px;}
.nav-sub .nl-g{grid-area:1/1;font-weight:700;font-size:calc(14px - 2px * var(--sp,0));visibility:hidden;}
.nav-sub .nl-t{grid-area:1/1;}

.nav-divider{border:none;border-top:1px solid rgba(54,236,255,0.12);margin:0;}

/* ══ MOBILE NAV ═══════════════════════════════════════════════════════════════════════════════
   Added 2026-08-25. Until now nav.css had NO media query and there was no mobile nav at all:
   at 375px the link row measured 657px and was simply CLIPPED by `body{overflow-x:hidden}`, so
   a phone visitor got no visible horizontal scrollbar and no reachable navigation either. It
   failed silently, which is why it survived this long.

   FULL-SCREEN OVERLAY, not a side panel: nine destinations plus the Subscribe CTA need vertical
   room, and a narrow drawer over an already-dark page reads as a smudge rather than as a layer.

   The bar stays ABOVE the overlay so the logo and the close button remain in place. That works
   without a z-index fight because #nav-root has z-index:100 and therefore its own stacking
   context: the overlay is z-index 1 inside it, the bar is 2. No fixed-position element needs to
   out-rank anything on the page. */
:root{ --itg-nav-bp: 1080px; }   /* documented for reference; media queries need the literal */

/* DEFAULTS, above the breakpoint. Both of these must be display:none HERE and not only inside
   the media query: everything else about the mobile nav lives in `@media (max-width:1079px)`, so
   with no default the overlay was an unstyled block div on desktop and rendered its eight links
   as a plain stacked list under the navbar. Caught by the desktop half of the nav test. */
.itg-burger{display:none;}
.itg-mnav{display:none;}

@media (max-width:1079px){
  nav.site-nav{padding-left:20px;padding-right:20px;}

  /* the desktop link row and its Subscribe button live only in the overlay down here */
  .nav-right{display:none;}

  .itg-burger{
    display:grid;place-items:center;
    width:46px;height:46px;margin-left:auto;   /* 46px: comfortably over the 44px tap minimum */
    background:none;border:0;padding:0;cursor:pointer;
  }
  .itg-burger-box{position:relative;width:26px;height:16px;}
  .itg-burger-box i{
    position:absolute;left:0;width:100%;height:2px;background:#fff;border-radius:2px;
    transition:transform var(--itg-dur) var(--itg-ease),opacity .18s linear,background-color var(--itg-dur);
  }
  .itg-burger-box i:nth-child(1){top:0;}
  .itg-burger-box i:nth-child(2){top:7px;}
  .itg-burger-box i:nth-child(3){top:14px;}
  .itg-burger[aria-expanded="true"] .itg-burger-box i{background:var(--itg-green);}
  /* the two outer bars travel to the centre and cross; the middle one fades. Translate happens
     BEFORE rotate in the transform list, so each bar slides along its own axis and then turns,
     rather than swinging through an arc. */
  .itg-burger[aria-expanded="true"] .itg-burger-box i:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .itg-burger[aria-expanded="true"] .itg-burger-box i:nth-child(2){opacity:0;}
  .itg-burger[aria-expanded="true"] .itg-burger-box i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  nav.site-nav{position:relative;z-index:2;}

  .itg-mnav{
    display:flex;flex-direction:column;
    position:fixed;inset:0;z-index:1;
    background:var(--itg-ink);
    /* clears the bar, whose height tracks --sp like everything else here */
    padding:calc(112px - 22px * var(--sp,0)) 20px 32px;
    overflow-y:auto;overscroll-behavior:contain;
    /* CLOSED STATE. visibility (not display) so the panel can animate, and so its links stay
       out of the tab order while hidden. */
    opacity:0;visibility:hidden;transform:translateY(-14px);
    transition:opacity .26s var(--itg-ease),transform .3s var(--itg-ease),visibility 0s linear .3s;
  }
  .itg-mnav.open{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .26s var(--itg-ease),transform .3s var(--itg-ease),visibility 0s;
  }

  /* :not(.btn-sub) on EVERY rule in this group (Nico, 2026-08-25: "el subscribe en el menu en
     mobile el texto negro en reposo").
     `.itg-mnav a` is (0,1,1) and the shared `.btn-sub` component is only (0,1,0), so this generic
     list styling was beating the button and breaking it three ways at once: `color:#fff` put a
     white label on the lime fill (what Nico saw), `display:block` killed the inline-grid +
     place-items that centres that label, and `border-bottom` drew a stray hairline under it.
     Excluding the component is the right fix rather than re-declaring its properties here, which
     would fork the button's styling into a second place that then drifts.
     The aria-current rule matters just as much: on subscribe.html nav.js marks THAT link, so lime
     type on the lime fill would have made the CTA label invisible on exactly one page. */
  .itg-mnav a:not(.btn-sub){
    display:block;text-decoration:none;color:#fff;
    font-family:var(--font);font-weight:700;font-size:26px;line-height:1.1;
    letter-spacing:.06em;text-transform:uppercase;
    padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.10);
    transition:color var(--itg-dur) var(--itg-ease);
  }
  /* No :last-of-type reset any more: the last <a> IS the button, so that rule was only ever
     clearing a border the button should not have had. The hairline under Contact now closes the
     list, with the CTA following after its own 28px gap. */
  .itg-mnav a:not(.btn-sub):active,
  .itg-mnav a:not(.btn-sub):hover{color:var(--itg-green);}
  /* current page, marked by nav.js from the filename */
  .itg-mnav a:not(.btn-sub)[aria-current="page"]{color:var(--itg-green);}

  /* the CTA closes the list, full width, and keeps the shared .btn-sub inversion */
  .itg-mnav .btn-sub{
    margin-top:28px;width:100%;
    font-size:17px;letter-spacing:.08em;padding:17px 20px;
  }
}

/* The ask-widget launcher is position:fixed at z-index 900, so it floats OVER the overlay (which
   sits at 1 inside #nav-root's z-100 context) and stays tappable through the open menu. Hidden
   while the menu is open. This is a deliberate cross-module rule: the alternative was raising the
   overlay above 900, which would have put it over the sticky bar too and cost the logo and the
   close button. `html` carries the flag because nav.js already writes to <body>'s style for the
   scroll lock and stacking two responsibilities on one attribute invites a conflict. */
html.itg-mnav-open .itg-ask-launcher{opacity:0;pointer-events:none;}

/* Below the fold of a short phone the 26px list can still overflow; at 380px and under, tighten
   rather than let the CTA fall off the bottom. */
@media (max-width:380px){
  .itg-mnav a:not(.btn-sub){font-size:23px;padding:13px 4px;}
}

/* A phone in landscape is short, not narrow: the same list needs to scroll, and the generous
   vertical padding is what pushes it off screen. */
@media (max-width:1079px) and (max-height:520px){
  .itg-mnav{padding-top:88px;}
  .itg-mnav a:not(.btn-sub){font-size:20px;padding:10px 4px;}
  .itg-mnav .btn-sub{margin-top:18px;padding:13px 20px;}
}

/* ── STATIC CHROME FALLBACK ────────────────────────────────────────────────────────────────────
   generator/bake_chrome.py writes a plain nav + footer into #nav-root / #footer-root so the site
   has a real link structure without JavaScript; nav.js and footer.js replace it via innerHTML on
   any JS visit, so these rules are seen ONLY by a no-JS reader or a crawler that renders CSS.
   Kept deliberately plain: this is a fallback, not a second design system to maintain. */
.chrome-fallback{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;
                 max-width:1280px;margin:0 auto;padding:18px 40px;
                 font-family:var(--font,'Titillium Web',sans-serif);font-size:15px;}
.chrome-fallback a{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.06em;
                   text-transform:uppercase;}
.chrome-fallback a:hover{color:#96ff00;}
footer.chrome-fallback{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
                       gap:24px;padding:40px;border-top:1px solid rgba(54,236,255,.12);}
footer.chrome-fallback div{display:flex;flex-direction:column;gap:8px;}
footer.chrome-fallback strong{color:#36ecff;font-weight:700;text-transform:uppercase;
                              letter-spacing:.08em;font-size:13px;margin-bottom:4px;}
footer.chrome-fallback a{text-transform:none;letter-spacing:normal;font-weight:400;
                         color:rgba(255,255,255,.78);}