/* ==========================================================================
   Public nav skin · assets/css/nav-public.css · home (index.html, right after front-door.css) + /work (after work-skin.css)
   Shah 3:20pm ET Oct 30: "put the same nav bar keep it the same on homepage and work I wanna see how that looks".
   The homepage nav, moved verbatim out of front-door.css (same rules, same order) so both pages load one copy:
   cobalt-glass bar, gold hover dot, the clear bar at the top of the page (navbar.js .scrolled past 50px) and the deep
   banner-blue glass once scrolled, production's nav faces. Notes below that say "HOME only" were written before the
   move; they now cover /work too. Case pages (work/<slug>/) don't load this file. Tokens: styles.css (--pub-*).
   ========================================================================== */

/* the two values front-door.css sets on the nav inside wider groups (U5 type scale, U1 focus rule); repeated here so
   /work, which doesn't load front-door.css, gets the same nav. Same values on home. */
html #main-navbar { --pub-fd-ui: .9375rem; }
html #main-navbar :focus-visible { outline: var(--pub-focus-ring-inverse); outline-offset: var(--pub-focus-offset); }

/* Header · cobalt glass on the hero */
html #main-navbar .container {
  background: var(--pub-glass-cobalt);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  border: 0;
  border-radius: var(--pub-r-card);
  box-shadow: var(--pub-e3), inset 0 0 0 1px rgb(255 255 255 / .2);
}
html #main-navbar .container::before { opacity: 0; }                        /* old video texture off: one material */
html #main-navbar .container::after { background: var(--pub-sheen); opacity: .16; }
html #main-navbar .nav-link,
html #main-navbar .nav-link-muted,
html #main-navbar .dropdown-text.desktop-text {
  font-family: var(--pub-font-ui);
  font-size: var(--pub-t-ui);
  font-weight: 500;
  letter-spacing: 0;
}
html #main-navbar .nav-link,
html #main-navbar .nav-link-muted {
  position: relative;
  border-radius: var(--pub-r-chip);
  transition: color var(--pub-dur-hover) var(--pub-ease), background-color var(--pub-dur-hover) var(--pub-ease),
              opacity var(--pub-dur-hover) var(--pub-ease), scale var(--pub-dur-press) var(--pub-ease-press);
}
html #main-navbar .nav-link-muted { color: rgb(255 255 255 / .78); }
/* the open/current "About Me" chip: cobalt glass, UI face (no script swap) */
html #main-navbar .nav-link[aria-current="page"],
html #main-navbar a.nav-link#nav-about-dropdown {
  font-family: var(--pub-font-ui);
  font-size: var(--pub-t-ui);
  background: rgb(255 255 255 / .1);
  border: 0;
  box-shadow: var(--pub-hi-top-glass), inset 0 0 0 1px rgb(255 255 255 / .22);
  color: var(--white);
}
/* hover: no face swap, no box; a 4px gold dot under the link, neighbours dim */
html #main-navbar .nav-link::after,
html #main-navbar .nav-link-muted::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: var(--pub-r-chip); background: var(--pub-inverse-gold);
  opacity: 0; scale: .4; transition: opacity var(--pub-dur-hover) var(--pub-ease), scale var(--pub-dur-hover) var(--pub-ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  html #main-navbar .nav-link:hover,
  html #main-navbar .nav-link-muted:hover {
    font-family: var(--pub-font-ui);
    font-size: var(--pub-t-ui);
    font-weight: 500;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    color: var(--white);
  }
  html #main-navbar a.nav-link#nav-about-dropdown:hover {
    background: rgb(255 255 255 / .14);
    box-shadow: var(--pub-hi-top-glass), inset 0 0 0 1px rgb(255 255 255 / .28);
  }
  html #main-navbar .nav-link:not(#nav-about-dropdown):hover::after,
  html #main-navbar .nav-link-muted:hover::after { opacity: 1; scale: 1; }
  html #main-navbar .nav-desktop:has(.nav-link:hover, .nav-link-muted:hover) :is(.nav-link, .nav-link-muted):not(:hover) { opacity: var(--pub-dim-soft); }
}
html #main-navbar .nav-link:active,
html #main-navbar .nav-link-muted:active { scale: var(--pub-press); transition-duration: var(--pub-dur-press); }

/* Header · stays cobalt glass when scrolled (Shah 10:19pm ET: "maintain that color tint" over the light/sand sections).
   Was a porcelain swap on .scrolled (navbar.js, 50px). Over the hero the clear cobalt glass reads blue because the
   cobalt-800 hero is behind it; over porcelain/sand it would read milky, so .scrolled adds a cobalt-800 fill under the
   same glass gradient. Same blur as on the hero (never animated), white type and gold dot kept, so nothing else moves. */
html #main-navbar.scrolled .container {
  background: var(--pub-glass-cobalt), rgb(7 56 154 / .84);   /* cobalt-800 at .84: the over-hero tint, white type 11:1+ */
}
@media (max-width: 768px) {
  html #main-navbar .container { border: 0; border-radius: var(--pub-r-card); }
}
html.glass-lite #main-navbar .container { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cobalt-900); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html #main-navbar .container { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cobalt-900); }
}
html #main-navbar .nav-dropdown-menu :focus-visible { outline: var(--pub-focus-ring); }             /* ledger dates on the navy card */
/* glass edges: a gold hairline on the header's top edge, a gold-300 ring on the chat card + pill */
html #main-navbar .container {
  box-shadow: var(--pub-e3), inset 0 0 0 1px rgb(255 255 255 / .2), inset 0 1px 0 var(--nl-gold-edge);
}

/* nav: legacy DM Serif title + script "Menu" → the D faces */
html #main-navbar .nav-title { font-family: var(--pub-font-display); font-weight: 560; font-size: 1.25rem; letter-spacing: -.02em; }
html #main-navbar :is(.menu-label, .mobile-text .font-cursive) { font-family: var(--pub-font-ui); font-style: normal; font-weight: 500; font-size: var(--pub-fd-ui); letter-spacing: 0; }

html #main-navbar :is(.nav-dropdown-item, .nav-dropdown-item:hover, .nav-dropdown-item[aria-current="page"]) {
  font-family: var(--pub-font-ui); font-style: normal; font-weight: 500; font-size: var(--pub-fd-ui);
}                              /* was .8 (styles.css) */

/* ==========================================================================
   § Nav type: production's faces and text effects back (Shah asked, Oct 30 2026 6:53am ET).
   Source, read only: byshah-deploy assets/css/styles.css .nav-title / .nav-link / .nav-link-muted /
   .nav-dropdown-item / .font-cursive. Fonts, sizes, weights, tracking and the hover / current face swap
   (Poppins 500 → Playwrite DK Uloopet 400) only. Glass, chips, colours and the gold hover dot stay.
   Undoes the "legacy DM Serif title + script Menu → the D faces" and "no face swap" rules above (home only).
   ========================================================================== */
html #main-navbar .nav-title { font-family: "DM Serif Display", serif; font-weight: 600; font-size: 24px; letter-spacing: -.01em; line-height: 1.2; transition: opacity .3s ease; }
html #main-navbar .nav-brand:hover .nav-title { opacity: .7; }
html #main-navbar :is(.nav-link, .nav-link-muted),
html #main-navbar a.nav-link#nav-about-dropdown {
  font-family: "Poppins", sans-serif; font-style: normal; font-size: 18px; font-weight: 500; letter-spacing: .01em; line-height: 1.2;
}
html #main-navbar .nav-link-muted { letter-spacing: normal; }
html #main-navbar .dropdown-text.desktop-text { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; }
html #main-navbar :is(.nav-link, .nav-link-muted)[aria-current="page"],
html #main-navbar a.nav-link#nav-about-dropdown[aria-current="page"],
html #main-navbar :is(.menu-label, .mobile-text .font-cursive) {
  font-family: "Playwrite DK Uloopet", cursive; font-style: normal; font-size: 16px; font-weight: 400;
}
html #main-navbar :is(.menu-label, .mobile-text .font-cursive) { letter-spacing: .01em; }
html #main-navbar :is(.nav-dropdown-item, .nav-dropdown-item:hover) {
  font-family: "Poppins", sans-serif; font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.2;
}
html #main-navbar .nav-dropdown-item[aria-current="page"] { font-family: "Playwrite DK Uloopet", cursive; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.2; }
@media (hover: hover) and (pointer: fine) {
  html #main-navbar :is(.nav-link, .nav-link-muted):hover,
  html #main-navbar a.nav-link#nav-about-dropdown:hover {
    font-family: "Playwrite DK Uloopet", cursive; font-size: 16px; font-weight: 400;   /* production's 1px lift left out: no new motion (on hold) */
  }
  html #main-navbar .nav-dropdown-item:hover { font-family: "Playwrite DK Uloopet", cursive; font-weight: 400; }
}
@media (max-width: 768px) {
  html #main-navbar .nav-title { font-size: 19px; }
  html #main-navbar :is(.nav-link, a.nav-link#nav-about-dropdown) { font-size: 16px; }
  html #main-navbar :is(.nav-link:hover, .nav-link[aria-current="page"], a.nav-link#nav-about-dropdown[aria-current="page"]) { font-size: 15px; }
  html #main-navbar :is(.menu-label, .mobile-text .font-cursive) { font-size: 16px; }
  html #main-navbar .nav-dropdown-item { font-size: 16px; }
  html #main-navbar :is(.nav-dropdown-item:hover, .nav-dropdown-item[aria-current="page"]) { font-size: 15px; }
}
@media (max-width: 380px) {
  html #main-navbar .nav-title { font-size: 16px; }
  html #main-navbar :is(.nav-link, a.nav-link#nav-about-dropdown) { font-size: 14px; }
  html #main-navbar :is(.nav-link:hover, .nav-link[aria-current="page"], a.nav-link#nav-about-dropdown[aria-current="page"]) { font-size: 13px; }
}

/* ── Nav · clear over the home hero (Shah 7:53am ET Oct 30: "The header should maybe be that clear transparent now
   based on new home back design"; header = the nav bar). HOME only (this file is index.html only; /work's banner is
   parked so its nav is unchanged). While the bar sits at the top of the hero (navbar.js adds .scrolled past 50px) it
   has no fill, no blur, no sheen and no drop shadow, so the banner art shows through untouched; a light hairline and
   the gold top edge keep its shape. Legibility comes from 80b500d's neutral black top band in .hero-overlay (.12 → .28) plus a
   soft neutral text-shadow (black, never tinted); nav text is ≥ 4.5:1 against the lightest banner pixel under it
   without the shadow. Fonts and text effects are d7cebf4's, untouched. Past 50px the existing cobalt glass returns
   (.scrolled, white type 11:1+ over light sections). Blur is never animated: it switches with the class and only
   background-color transitions (as before). The dropdown keeps its own glass. */
html #main-navbar:not(.scrolled) .container {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), inset 0 1px 0 var(--nl-gold-edge);
}
html #main-navbar:not(.scrolled) .container::after { opacity: 0; }
html #main-navbar:not(.scrolled) :is(.nav-title, .nav-link, .nav-link-muted, .menu-label) {
  text-shadow: 0 1px 2px rgb(0 0 0 / .28);
}
/* Résumé / LinkedIn: solid white while clear (production's colour; the .78 muted white fell to 2.7–4.0:1 over the
   lightest ribbon pixels at 1024–1440 even before this change). Dimming on hover of a neighbour is unchanged. */
html #main-navbar:not(.scrolled) .nav-link-muted { color: var(--white); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html #main-navbar:not(.scrolled) .container { background: var(--cobalt-900); }   /* solid fallback kept */
}

/* ── Nav · heavy banner blue once scrolled, clear-glass look kept (Shah 8:03–8:06am ET Oct 30: "After u scroll to
   lighter background try to maintain the look clear has when it's at the top" … "in lighter sections it would somehow
   look like how it looks on top that's nice heavy blue" … "With the clear effect"). HOME only. Replaces the brighter
   cobalt glass (c52a2d0, rgb(7 56 154 / .84) + white sheen) on .scrolled with the deep blue seen through the clear bar
   at the top (banner pixels under the bar: hue 233, rgb(11 21 97) top → rgb(14 27 113) bottom), darker at the top and a
   touch lighter at the bottom like the art. Still glass: translucent (~.91 top → ~.81 bottom, light content shows
   faintly), no white sheen, the same 1px white/.16 hairline + gold top edge as the clear state, white type (Résumé /
   LinkedIn solid white as at the top). Contrast: white ≥ 7.7:1 on every nav item (worst = the About/Menu chip) over the lightest content seen under the bar
   on every home section at 390/768/1440. Blur is static (never animated); only background-color transitions (styles.css).
   Chromium note: #main-navbar's view-transition-name makes it a backdrop root, so the blur does not render there;
   the fill alone carries the look, so it reads the same with or without blur. */
html #main-navbar.scrolled .container {
  background-color: rgb(16 30 116 / .80);
  background-image: linear-gradient(180deg, rgb(4 10 70 / .55), rgb(4 10 70 / .05));
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--pub-e3), inset 0 0 0 1px rgb(255 255 255 / .16), inset 0 1px 0 var(--nl-gold-edge);
}
html #main-navbar.scrolled .container::after { opacity: 0; }
html #main-navbar.scrolled .nav-link-muted { color: var(--white); }
html.glass-lite #main-navbar.scrolled .container { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cobalt-900); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html #main-navbar.scrolled .container { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cobalt-900); }
}

/* ── Nav · one pill on /work (Shah 3:51pm ET Oct 30: "Only one pill on /work: My Work"). /work only (body.work-page);
   home untouched. At rest the About Me chip drops its fill + outline so only the current-page "My Work" pill shows.
   Hover (fine pointers), keyboard focus and the open dropdown ([aria-expanded="true"]) still bring the chip back;
   the :focus-visible outline ring above is unaffected. */
html body.work-page #main-navbar a.nav-link#nav-about-dropdown:not([aria-current="page"]):not(:hover):not(:focus-visible):not([aria-expanded="true"]) {
  background: transparent;
  box-shadow: none;
}