/* ==========================================================================
   La barra del sito pubblico SHINKA.
   Sta in un file e non dentro la pagina perche' adesso la usano in quattro:
   la pagina lunga (/shinka/) e le tre pagine del programma. Un foglio solo,
   quindi una barra sola — se fosse copiata, le quattro pagine finirebbero per
   avere quattro menu leggermente diversi.
   ========================================================================== */

.shk-nav{position:sticky;top:0;z-index:9999;display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,3vw,28px);padding:9px clamp(16px,4vw,34px);background:rgba(25,24,22,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.14);font-family:'Commuters Sans Light','Raleway',-apple-system,sans-serif;}
.shk-nav,.shk-nav *{box-sizing:border-box;}
.shk-nav__voci{display:flex;align-items:center;gap:clamp(14px,2.6vw,28px);}
/* Tutte le voci con la stessa forma, e le due eccezioni scritte con la stessa
   forza: `.shk-nav a` vale piu' di `.shk-nav__logo`, quindi il logo e il
   bottone vanno nominati insieme alla barra o la regola generica se li mangia
   — ed e' esattamente quello che era successo. */
.shk-nav a{display:inline-block;padding:8px 0;color:rgba(255,255,255,.62);text-decoration:none;font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.3;transition:color .3s ease,background .3s ease;}
.shk-nav a:hover{color:#f3ede4;}
.shk-nav a.shk-nav__logo{flex:0 0 auto;padding:0;line-height:0;}
.shk-nav a.shk-nav__logo img{display:block;width:96px;height:auto;margin:0;filter:invert(1) brightness(1.6);}
.shk-nav a.shk-nav__cta{flex:0 0 auto;padding:11px 22px;background:#b6a793;color:#191816;letter-spacing:.18em;}
.shk-nav a.shk-nav__cta:hover{background:#f3ede4;color:#191816;}
/* Sold out: dove stava "Acquista", ma non e' un link — bordo oro e niente
   fondo, perche' un bottone pieno chiede di essere premuto. */
.shk-nav span.shk-nav__cta--soldout{flex:0 0 auto;padding:10px 21px;border:1px solid #b6a793;color:#b6a793;font-size:11px;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;cursor:default;}
@media(max-width:640px){
  .shk-nav{gap:8px;padding:7px 12px;}
  /* Il marchio sparisce e restano le voci: il logo grande ce l'ha gia' l'hero
     due centimetri piu' sotto, e in una barra fissa lo spazio e' l'unica cosa
     che non si puo' allargare. */
  .shk-nav a.shk-nav__logo{display:none;}
  .shk-nav__voci{flex:1 1 auto;justify-content:center;gap:13px;}
  .shk-nav a{font-size:9.5px;letter-spacing:.07em;white-space:nowrap;}
  .shk-nav a.shk-nav__cta{padding:9px 13px;}
  .shk-nav span.shk-nav__cta--soldout{padding:8px 12px;font-size:9.5px;letter-spacing:.07em;}
}
/* Sotto i 400px non ci stanno piu': si stringe. Sotto i 340 nemmeno cosi', e
   allora l'ultima voce esce dalla barra — la fascia resta li' dove e', a un
   dito di scorrimento, mentre una barra che sborda si porta dietro tutta la
   pagina che scivola di lato. */
@media(max-width:400px){
  .shk-nav__voci{gap:10px;}
  .shk-nav a{font-size:9px;letter-spacing:.04em;}
  .shk-nav a.shk-nav__cta{padding:9px 11px;letter-spacing:.1em;}
  .shk-nav span.shk-nav__cta--soldout{padding:8px 10px;font-size:9px;letter-spacing:.04em;}
}
@media(max-width:340px){
  /* Esce la voce FAQ, che e' quella che si puo' cercare dopo, non "Entra" che
     serve a chi ha gia' pagato. Prima era l'ultima voce qualunque fosse: da
     quando "Entra" e' una voce, l'ultima e' lei. */
  .shk-nav__voci a.shk-nav__faq{display:none;}
}