.pl-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); transition: padding 250ms var(--ease-out), box-shadow 250ms var(--ease-out), background-color 250ms var(--ease-out), border-color 250ms var(--ease-out); }
.pl-header.is-scrolled { box-shadow: var(--shadow-soft); }

/* Home: header trasparente sopra l'hero scuro, solido dopo lo scroll (#16).
   Gated su `.js:not(.no-motion)`: senza JS — o se motion.js dà 404 (dopo 2s
   il timer inline aggiunge `no-motion`) — `is-scrolled` non viene mai aggiunto,
   quindi l'header deve restare il pannello solido di default, altrimenti dopo
   l'hero avremmo testo crema su body crema. `prefers-reduced-motion` (anch'esso
   `no-motion`) vede lo stesso header solido leggibile: preferibile.
   Qui `--bg` = crema chiara (l'header non è in un `.pl-chapter--dark`). */
.js:not(.no-motion) .pl-home .pl-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; }
.js:not(.no-motion) .pl-home .pl-header:not(.is-scrolled) .pl-logo,
.js:not(.no-motion) .pl-home .pl-header:not(.is-scrolled) .pl-nav a { color: var(--bg); }
.js:not(.no-motion) .pl-home .pl-header:not(.is-scrolled) .pl-nav__cta { border-color: var(--bg); color: var(--bg); }
/* Mobile, pannello nav aperto: header di nuovo solido e leggibile */
.js:not(.no-motion) .pl-home .pl-header:not(.is-scrolled):has(.pl-nav.is-open) { background: var(--bg); border-bottom-color: var(--border); }
.js:not(.no-motion) .pl-home .pl-header:not(.is-scrolled):has(.pl-nav.is-open) .pl-logo,
.js:not(.no-motion) .pl-home .pl-header:not(.is-scrolled):has(.pl-nav.is-open) .pl-nav a { color: var(--ink); }
.js:not(.no-motion) .pl-home .pl-header:not(.is-scrolled):has(.pl-nav.is-open) .pl-nav__cta { border-color: var(--accent); color: var(--accent); }
.pl-header__bar { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); }
.pl-header.is-scrolled .pl-header__bar { padding-block: var(--space-2); }
.pl-logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); line-height: 1; }
.pl-logo__cn { font-family: var(--font-cjk); font-size: 1.4rem; }
.pl-logo__en { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.35em; margin-left: 0.35em; }
.pl-nav ul { display: flex; gap: var(--space-4); align-items: center; list-style: none; margin: 0; padding: 0; }
.pl-nav a { text-decoration: none; color: var(--ink); font-size: 0.9375rem; position: relative; padding-block: var(--space-1); }
.pl-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out); }
.pl-nav a:hover::after, .pl-nav a[aria-current="page"]::after { transform: scaleX(1); }
.pl-nav__cta { border: 1px solid var(--accent); color: var(--accent); padding: var(--space-2) var(--space-3) !important; border-radius: var(--radius-sm); }
.pl-nav__cta::after { display: none; }
.pl-nav-toggle { display: none; }

.pl-footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: var(--space-6) var(--space-4); margin-top: var(--space-8); }
.pl-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: var(--space-5); align-items: start; }
.pl-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.pl-footer__nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.9375rem; }
.pl-footer__social { display: flex; gap: var(--space-3); }
.pl-footer__social a { color: var(--ink); }
.pl-footer__legal { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--ink-soft); font-size: 0.8125rem; }

@media (max-width: 760px) {
  .pl-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .pl-nav-toggle__bar, .pl-nav-toggle__bar::before, .pl-nav-toggle__bar::after { content: ""; display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
  .pl-nav-toggle__bar::before { position: absolute; top: -6px; } .pl-nav-toggle__bar::after { position: absolute; top: 6px; }
  .pl-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--border); }
  /* Il collasso della nav è gestito dal JS: senza JS resta visibile (#2). */
  .js .pl-nav { display: none; }
  .js .pl-nav.is-open { display: block; }
  /* Fallback no-JS: hamburger inerte nascosto, nav come lista verticale
     a tutta larghezza sotto la barra del logo. */
  html:not(.js) .pl-nav-toggle { display: none; }
  html:not(.js) .pl-header__bar { flex-wrap: wrap; }
  html:not(.js) .pl-nav { position: static; width: 100%; }
  .pl-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3); }
  .pl-nav a { padding-block: var(--space-3); }
  .pl-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}