/* ==========================================================================
   Portale SHINKA — design system
   --------------------------------------------------------------------------
   Token e scale ripresi da #shk-ext in /var/www/superfly/web/shinka/index.html
   (le fasce scritte a mano sotto l'export Showit). La differenza e' che li'
   il fondo e' crema con alcune fasce scure, qui il fondo scuro e' l'ambiente:
   il portale e' "dentro", il sito pubblico e' "fuori".

   Font self-hosted: nessuna chiamata a Google, niente CLS da webfont esterni.
   ========================================================================== */

@font-face { font-family: 'Newsreader Display Extra Light Italic'; src: url('fonts/newsreader-extralightitalic.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Newsreader Display Light';              src: url('fonts/newsreader-light.woff')            format('woff'); font-display: swap; }
@font-face { font-family: 'Newsreader Display Light Italic';       src: url('fonts/newsreader-lightitalic.woff')      format('woff'); font-display: swap; }
@font-face { font-family: 'Commuters Sans Light';                  src: url('fonts/commuterssans-light.woff')         format('woff'); font-display: swap; }
@font-face { font-family: 'Commuter Sans Regular';                 src: url('fonts/commuterssans-regular.woff')       format('woff'); font-display: swap; }
@font-face { font-family: 'Made Canvas Light';                     src: url('fonts/made_canvas_light.woff')           format('woff'); font-display: swap; }

@import url('gfonts/fonts.css');

:root {
  --serif:   'Newsreader Display Extra Light Italic', 'Playfair Display', Georgia, serif;
  --sans:    'Raleway', 'Commuters Sans Light', -apple-system, 'Segoe UI', sans-serif;
  --label:   'Commuters Sans Light', 'Raleway', sans-serif;
  --display: 'Made Canvas Light', 'Raleway', sans-serif;

  --dark:    #191816;   /* fondo del portale */
  --dark2:   #211f1d;   /* superfici sollevate: card, barre */
  --dark3:   #2b2926;   /* bordi pieni, stati hover discreti */
  --gold:    #b6a793;   /* eyebrow, accenti, filetti */
  --sand:    #e1d1be;
  --cream:   #f3ede4;   /* titoli e testo forte su scuro */
  --ink:     #443f3d;   /* testo su fondo chiaro (bottoni pieni) */

  --testo:   rgba(255, 255, 255, .72);
  --testo2:  rgba(255, 255, 255, .52);
  --linea:   rgba(255, 255, 255, .14);
  --linea2:  rgba(182, 167, 147, .35);

  --ok:      #8ea67f;
  --errore:  #c98b7a;

  --wrap:    1140px;
  --t:       .35s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background: var(--dark);
  color: var(--testo);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.95rem, 3.7vw, 1.02rem);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--cream); text-decoration: none; transition: color var(--t), opacity var(--t); }
a:hover { color: var(--gold); }

::selection { background: var(--gold); color: var(--dark); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* --------------------------------------------------------------------------
   Impalcatura
   -------------------------------------------------------------------------- */
.shk-main { flex: 1 0 auto; }
.shk-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(22px, 6vw, 44px); }
/* Solo sopra e sotto, mai la scorciatoia a due valori: `padding: X 0` azzera
   anche i lati, e queste due classi stanno quasi sempre sullo stesso elemento
   di .shk-wrap, che i lati li ha appena messi. Su uno schermo largo non si
   vedeva — ci pensa il max-width a tenere il testo lontano dal bordo — ma sul
   telefono il contenitore riempie lo schermo e le parole toccavano il vetro. */
.shk-band { padding-top: clamp(56px, 9vw, 104px); padding-bottom: clamp(56px, 9vw, 104px); }
.shk-band--tight { padding-top: clamp(36px, 6vw, 64px); padding-bottom: clamp(36px, 6vw, 64px); }
/* L'aria sopra il titolo era misurata quando sopra c'era anche un occhiello.
   Dove il titolo e' la prima cosa (la dashboard, dopo i testi di Valeria) la
   stessa aria non e' respiro, e' un buco: sotto una barra fissa si legge come
   pagina non finita di caricare. */
.shk-band--alto { padding-top: clamp(30px, 4.4vw, 52px); }

/* Pagine pubbliche (login, registrazione): una sola colonna centrata,
   con l'immagine di sfondo tenuta molto indietro per non disturbare il form. */
.shk-gate {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vw, 88px) clamp(20px, 6vw, 44px);
  position: relative;
  isolation: isolate;
}
.shk-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/bg_shinka.jpg') center / cover no-repeat;
  opacity: .17;
}
.shk-gate::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(25,24,22,.55) 0%, rgba(25,24,22,.94) 72%);
}
.shk-gate__box { width: 100%; max-width: 460px; text-align: center; }
.shk-gate__box--largo { max-width: 560px; }


/* --------------------------------------------------------------------------
   Marchio
   -------------------------------------------------------------------------- */
/* Il logo e' nero su trasparente: su fondo scuro va invertito, come fa il
   sito pubblico nelle sue fasce .shk-dark. */
.shk-logo { filter: invert(1) brightness(1.6); }
.shk-logo--gate { width: clamp(150px, 34vw, 205px); margin: 0 auto clamp(26px, 4.5vw, 38px); }
.shk-logo--barra { width: 118px; }


/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
.shk-eyebrow {
  display: block;
  font-family: var(--label);
  font-size: clamp(10px, 2.6vw, 11.5px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  line-height: 1.6;
}

/* I font del progetto sono dichiarati senza peso, quindi valgono 400: chiedere
   700 non carica un altro file, fa fabbricare al browser un grassetto finto
   ingrassando i tratti — e su un Extra Light Italic il risultato e' impastato.
   I titoli quindi non ereditano il bold predefinito. Chi vuole un peso vero lo
   chiede a Raleway, che il 600 ce l'ha davvero. */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }

.shk-h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.85rem, 6vw, 2.85rem);
  line-height: 1.2;
  color: var(--cream);
  margin-top: .5em;
}

.shk-h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.55rem, 5vw, 2.3rem);
  line-height: 1.24;
  color: var(--cream);
  margin-top: .45em;
}

.shk-h3 {
  font-family: var(--display);
  font-size: clamp(1.05rem, 4vw, 1.28rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 300;
  line-height: 1.3;
}

.shk-p { margin-top: 1.15em; color: var(--testo); }
.shk-p--soft { color: var(--testo2); font-size: .93em; line-height: 1.75; }
/* 600 e non 400: il corpo e' Raleway 300, e il 400 e' lo stesso disegno —
   il grassetto si distingueva solo per il colore, e serviva un occhio attento.
   Con un peso vero si vede da subito, senza gridare. */
.shk-p strong, .shk-h1 strong, .shk-h2 strong { font-weight: 600; color: var(--cream); }

.shk-rule { width: 44px; height: 1px; background: var(--linea2); margin: clamp(30px, 5vw, 48px) auto; border: 0; }


/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.shk-btn {
  display: inline-block;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  padding: 19px 42px;
  cursor: pointer;
  text-align: center;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.shk-btn:hover:not(:disabled) { background: var(--cream); color: var(--dark); border-color: var(--cream); }
.shk-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Azione primaria: oro pieno. Una sola per schermata. */
.shk-btn--oro { background: var(--gold); border-color: var(--gold); color: var(--dark); font-weight: 400; }
.shk-btn--oro:hover:not(:disabled) { background: var(--cream); border-color: var(--cream); color: var(--dark); }

.shk-btn--block { display: block; width: 100%; }
.shk-btn--small { padding: 13px 24px; font-size: 11px; letter-spacing: .2em; }

@media (max-width: 520px) {
  .shk-btn { font-size: 11px; letter-spacing: .15em; padding: 18px 22px; }
}

/* Link testuale discreto (es. "Non hai un account?") */
.shk-link {
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.shk-link:hover { color: var(--cream); }


/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.shk-form { margin-top: clamp(28px, 5vw, 40px); text-align: left; }
.shk-form__riga { margin-top: 20px; }
.shk-form__riga:first-child { margin-top: 0; }

@media (min-width: 560px) {
  .shk-form__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .shk-form__coppia .shk-form__riga { margin-top: 20px; }
}

.shk-label {
  display: block;
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}

.shk-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border-radius: 0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linea);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: .02em;
  padding: 15px 16px;
  outline: none;
  transition: border-color var(--t), background var(--t);
}
.shk-input::placeholder { color: rgba(255, 255, 255, .3); }
.shk-input:focus { border-color: var(--gold); background: rgba(255, 255, 255, .06); }
.shk-input:-webkit-autofill {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px #232120 inset;
  caret-color: var(--cream);
}

/* Occhio mostra/nascondi password */
.shk-pw { position: relative; }
.shk-pw .shk-input { padding-right: 58px; }
.shk-pw__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
  color: var(--testo2);
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--t);
}
.shk-pw__toggle:hover { color: var(--gold); }

.shk-aiuto { display: block; margin-top: 7px; font-size: 12px; line-height: 1.6; color: var(--testo2); }

/* Checkbox: quadrato disegnato a mano, coerente con i filetti sottili
   del resto del sistema. L'input resta accessibile, solo visivamente nascosto. */
.shk-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; cursor: pointer; }
.shk-check input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}
.shk-check__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, .4);
  position: relative;
  transition: border-color var(--t), background var(--t);
}
.shk-check__box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--dark);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .2s ease;
}
.shk-check input:checked + .shk-check__box { background: var(--gold); border-color: var(--gold); }
.shk-check input:checked + .shk-check__box::after { transform: rotate(45deg) scale(1); }
.shk-check input:focus-visible + .shk-check__box { outline: 2px solid var(--gold); outline-offset: 3px; }
.shk-check__testo { font-size: 13px; line-height: 1.65; color: var(--testo2); }
.shk-check__testo a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.shk-form .shk-btn { margin-top: clamp(26px, 4vw, 34px); }


/* --------------------------------------------------------------------------
   Messaggi
   -------------------------------------------------------------------------- */
.shk-msg {
  text-align: left;
  font-size: .93rem;
  line-height: 1.7;
  padding: 15px 18px;
  border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, .04);
  margin-bottom: 26px;
}
.shk-msg a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.shk-msg--errore { border-left-color: var(--errore); color: #e8c9c0; }
.shk-msg--ok     { border-left-color: var(--ok);     color: #d6e2cf; }


/* --------------------------------------------------------------------------
   Barra superiore (area riservata)
   -------------------------------------------------------------------------- */
.shk-topbar {
  border-bottom: 1px solid var(--linea);
  background: rgba(25, 24, 22, .92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.shk-topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.shk-topbar__nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); }
.shk-topbar__nav a {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo2);
}
.shk-topbar__nav a:hover, .shk-topbar__nav a[aria-current='page'] { color: var(--cream); }
@media (max-width: 560px) {
  .shk-topbar__nav a { font-size: 11px; letter-spacing: .12em; }
  .shk-logo--barra { width: 96px; }
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.shk-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--linea);
  padding: clamp(28px, 5vw, 40px) 0;
  text-align: center;
}
.shk-footer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; }
.shk-footer a, .shk-footer span {
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo2);
}
.shk-footer a:hover { color: var(--gold); }


/* --------------------------------------------------------------------------
   Area riservata — intestazione del percorso
   -------------------------------------------------------------------------- */
.shk-intro { max-width: 720px; }
.shk-intro .shk-p { max-width: 62ch; }

.shk-progresso {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(26px, 4vw, 34px);
}
.shk-progresso__barra {
  flex: 1 1 auto;
  max-width: 240px;
  height: 1px;
  background: var(--linea);
  position: relative;
}
.shk-progresso__barra i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--gold);
  transition: width .6s ease;
}
.shk-progresso__testo {
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--testo2);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Griglia delle lezioni
   -------------------------------------------------------------------------- */
/* Filetti da 1px al posto dei box: e' la stessa grammatica della griglia
   webinar del sito pubblico (.shk-web-grid), dove a separare sono le linee. */
.shk-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(38px, 6vw, 56px);
}
@media (min-width: 860px) {
  .shk-griglia { grid-template-columns: repeat(3, 1fr); }
}

.shk-tessera {
  background: var(--dark);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background var(--t);
}
.shk-tessera--aperta:hover { background: var(--dark2); }

.shk-tessera__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--dark3);
}
.shk-tessera__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease, filter var(--t), opacity var(--t);
}
.shk-tessera--aperta:hover .shk-tessera__media img { transform: scale(1.04); }

/* Chiusa: l'immagine resta, ma spenta. Si intuisce cosa c'e' senza mostrarlo. */
.shk-tessera--chiusa .shk-tessera__media img { filter: grayscale(1) brightness(.42); opacity: .8; }

/* Triangolo play, disegnato in CSS: nessuna icona da caricare. */
.shk-tessera__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  background: rgba(25, 24, 22, .35);
  transition: background var(--t), border-color var(--t);
}
.shk-tessera__play::after {
  content: '';
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.shk-tessera--aperta:hover .shk-tessera__play { background: var(--gold); border-color: var(--gold); }
.shk-tessera--aperta:hover .shk-tessera__play::after { border-left-color: var(--dark); }

/* Lucchetto della tessera chiusa */
.shk-tessera__lucchetto {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 2px;
}
.shk-tessera__lucchetto::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 12px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.shk-tessera__corpo {
  padding: clamp(24px, 3.4vw, 32px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.shk-tessera__no {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  font-weight: 300;
}
.shk-tessera__titolo {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.42rem);
  line-height: 1.25;
  color: var(--cream);
  font-weight: 300;
  margin-top: .4em;
}
.shk-tessera__testo {
  font-size: .92rem;
  line-height: 1.72;
  color: var(--testo2);
  margin-top: .95em;
  flex: 1 1 auto;
}
.shk-tessera--chiusa .shk-tessera__titolo { color: rgba(243, 237, 228, .5); }
.shk-tessera--chiusa .shk-tessera__no     { color: rgba(182, 167, 147, .5); }

.shk-tessera__piede {
  /* auto e non una misura fissa: il corpo e' una colonna flessibile, e cosi' il
     piede si appoggia al fondo della tessera invece di scorrere dietro alla
     descrizione. Le descrizioni sono lunghe diverse, e prima i filetti delle
     cinque tessere cadevano a altezze diverse — 21px di scarto, che su una
     riga orizzontale si notano subito. */
  margin-top: auto;
  padding-top: 1.1em;
  border-top: 1px solid var(--linea);
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.9;
  /* Due righe garantite: e' cio' che tiene i filetti delle tessere su una riga
     sola. Senza, basta un testo piu' corto e il piede si alza. */
  min-height: calc(2 * 1.9em);
  color: var(--gold);
}
.shk-tessera--chiusa .shk-tessera__piede { color: var(--testo2); }
.shk-tessera__piede em { font-style: normal; color: var(--cream); }

/* Tutta la tessera aperta e' cliccabile, ma il link resta uno solo:
   lo stende sopra la card invece di annidare il markup. */
.shk-tessera__link { position: absolute; inset: 0; z-index: 2; }
.shk-tessera__link span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

/* Nastro "visto" */
.shk-tessera__visto {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  font-family: var(--label);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--gold);
  padding: 5px 10px;
}


/* --------------------------------------------------------------------------
   Pagina lezione
   -------------------------------------------------------------------------- */
.shk-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--linea);
  margin-top: clamp(26px, 4vw, 36px);
}
.shk-player video { width: 100%; height: 100%; display: block; background: #000; }

/* Stato "video non ancora caricato": la tessera c'e', il file no. */
.shk-player--vuoto {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--dark2);
}
.shk-player--vuoto p {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--testo2);
  line-height: 2;
}

.shk-lezione__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(34px, 5vw, 48px);
  padding-top: clamp(24px, 4vw, 32px);
  border-top: 1px solid var(--linea);
}


/* --------------------------------------------------------------------------
   Blocco "prossimo passo" a fondo dashboard
   -------------------------------------------------------------------------- */
.shk-prossimo {
  margin-top: clamp(38px, 6vw, 56px);
  border: 1px solid var(--linea2);
  padding: clamp(30px, 5vw, 52px);
  text-align: center;
}
.shk-prossimo .shk-h2 { margin-top: .3em; }
.shk-prossimo .shk-p { max-width: 56ch; margin-left: auto; margin-right: auto; }
.shk-prossimo .shk-btn { margin-top: clamp(26px, 4vw, 34px); }


/* --------------------------------------------------------------------------
   Avviso: indirizzo email da confermare
   L'indirizzo e' scritto per esteso apposta: e' la parte che fa il lavoro.
   Chi ha sbagliato a digitare se ne accorge leggendolo, non dal messaggio.
   -------------------------------------------------------------------------- */
.shk-verifica {
  border: 1px solid var(--linea2);
  background: rgba(182, 167, 147, .05);
  padding: clamp(22px, 3.4vw, 32px);
  margin-bottom: clamp(30px, 4.4vw, 44px);
}
.shk-verifica .shk-p { margin-top: .5em; max-width: 60ch; }
.shk-verifica__mail {
  color: var(--cream);
  font-weight: 400;
  border-bottom: 1px solid var(--linea2);
  white-space: nowrap;
}

.shk-verifica__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5em .85em;
  margin-top: 20px;
  font-size: .9rem;
  color: var(--testo2);
}
.shk-verifica__azioni form { display: inline; }
.shk-verifica__domanda { margin-right: -.2em; }

/* Filetto verticale fra le due azioni: una barra scritta a mano ("|") sarebbe
   un carattere di testo, letto ad alta voce dai lettori di schermo e allineato
   male con il maiuscoletto. Questo e' un segno grafico e basta. */
.shk-verifica__sep {
  align-self: center;
  width: 1px;
  height: 1.05em;
  background: var(--linea2);
}

/* Chiuso e' un elemento della riga; aperto prende tutta la larghezza, cosi' il
   modulo scende sotto invece di sfondare la riga. */
.shk-verifica__correggi[open] { flex-basis: 100%; margin-top: .4em; }

/* Aperto, "Correggi l'indirizzo" va a capo e il filetto resterebbe appeso in
   fondo alla riga di sopra, a separare il nulla. :has() guarda avanti fra i
   fratelli; dove non c'e' il filetto resta, ed e' solo un segno di troppo. */
.shk-verifica__azioni:has(.shk-verifica__correggi[open]) .shk-verifica__sep {
  visibility: hidden;
}

/* Bottone che deve sembrare un link: e' un'azione secondaria, e un bottone
   pieno accanto a quello del video litigherebbe per l'attenzione. */
.shk-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t);
}
.shk-linkbtn:hover { color: var(--sand); }

.shk-verifica__correggi { margin-top: 0; }
.shk-verifica__correggi > summary {
  cursor: pointer;
  font-size: .9rem;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}
.shk-verifica__correggi > summary::-webkit-details-marker { display: none; }
.shk-verifica__correggi > summary:hover { color: var(--sand); }
.shk-verifica__correggi[open] > summary { color: var(--testo2); text-decoration: none; }

.shk-verifica__correzione { margin-top: 18px; max-width: 420px; }
.shk-verifica__correzione .shk-input  { margin-top: 6px; }
.shk-verifica__correzione .shk-btn    { margin-top: 14px; }


/* Sottotitolo del programma sotto il logo (atrio). Non e' un eyebrow: e'
   troppo lungo per reggere il maiuscoletto spaziato senza andare a capo male. */
.shk-tagline {
  font-family: var(--label);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--gold);
  margin-top: -10px;
  margin-bottom: clamp(26px, 4vw, 34px);
}


/* --------------------------------------------------------------------------
   Carosello dei video (area riservata)
   Non e' una griglia: i video sono cinque e domani potrebbero essere di piu'.
   La pista scorre nativamente — dito, trackpad, tastiera — e le frecce sono
   solo una scorciatoia per il mouse.
   -------------------------------------------------------------------------- */
.shk-carosello {
  position: relative;
  margin-top: clamp(38px, 6vw, 56px);
}

.shk-pista {
  display: flex;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra di scorrimento sparisce: al suo posto ci sono le frecce, e su
     fondo scuro quella di sistema e' un graffio bianco. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shk-pista::-webkit-scrollbar { display: none; }

.shk-pista > .shk-tessera {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .shk-pista > .shk-tessera { flex-basis: calc(50% - .5px); } }
@media (min-width: 980px) { .shk-pista > .shk-tessera { flex-basis: calc(33.3333% - .67px); } }

/* Chi preferisce meno animazioni non si trova la pista che scivola da sola. */
@media (prefers-reduced-motion: reduce) {
  .shk-pista { scroll-behavior: auto; }
}

/* Frecce sopra la pista, non sovrapposte alle tessere: cosi' non coprono mai
   il contenuto e non dipendono dall'altezza della tessera, che cambia con la
   lunghezza del testo. Sono disabilitate agli estremi invece che nascoste,
   altrimenti la riga salterebbe a ogni scorrimento. */
.shk-frecce {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
.shk-frecce[hidden] { display: none; }

.shk-freccia {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea2);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), opacity var(--t);
}
.shk-freccia:hover:not(:disabled) { background: var(--dark2); color: var(--cream); border-color: var(--gold); }
.shk-freccia:disabled { opacity: .28; cursor: default; }

/* Chevron disegnato col bordo: nessun file da caricare, come il play e il
   lucchetto delle tessere. */
.shk-freccia::before {
  content: '';
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.shk-freccia--succ::before { transform: rotate(45deg);   margin-left: -3px; }
.shk-freccia--prec::before { transform: rotate(-135deg); margin-right: -3px; }


/* --------------------------------------------------------------------------
   Il programma prima di sbloccarsi
   Stesso trattamento delle tessere chiuse: si intuisce cosa c'e' senza
   mostrarlo, e il blocco non compare dal nulla all'ultimo video.
   -------------------------------------------------------------------------- */
.shk-prossimo--chiusa { border-color: var(--linea); }
.shk-prossimo--chiusa .shk-eyebrow,
.shk-prossimo--chiusa .shk-h2,
.shk-prossimo--chiusa .shk-p { opacity: .4; }

.shk-prossimo__chiuso {
  margin-top: clamp(22px, 3.4vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo2);
}

/* Stesso lucchetto delle tessere, in linea invece che centrato sull'immagine. */
.shk-lucchetto {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 2px;
  margin-top: 6px;
}
.shk-lucchetto::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}


/* --------------------------------------------------------------------------
   Pagina del programma: le tre targhe dei livelli
   Le immagini sono crema su pagina scura: sono loro la luce della pagina, e
   per questo intorno non ci va nient'altro che aria.
   -------------------------------------------------------------------------- */
.shk-intro--centro {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.shk-livelli {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 46px);
  margin-top: clamp(44px, 7vw, 68px);
}
@media (min-width: 820px) {
  .shk-livelli { grid-template-columns: repeat(3, 1fr); }
}

.shk-livello { text-align: center; }

.shk-livello__targa {
  display: block;
  width: 100%;
  height: auto;
  /* Quadrate come le ha disegnate Valeria: il testo occupa una fascia stretta
     al centro e l'aria intorno fa parte del segno, non e' spazio sprecato. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--t);
}
.shk-livello:hover .shk-livello__targa { transform: translateY(-3px); }

.shk-livello__btn { margin-top: clamp(18px, 2.6vw, 24px); }

.shk-livello__stato {
  display: inline-block;
  margin-top: clamp(18px, 2.6vw, 24px);
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Bottone "fantasma": ha la forma di un bottone ma non e' cliccabile, perche'
   la pagina che aprirebbe non esiste ancora. Meglio questo di un link a un 404. */
.shk-btn--fantasma {
  opacity: .5;
  cursor: default;
}
.shk-btn--fantasma:hover { background: transparent; color: var(--gold); }

.shk-btn--spento {
  opacity: .62;
  cursor: default;
  pointer-events: none;
}

.shk-btn--grande { padding-left: clamp(48px, 8vw, 82px); padding-right: clamp(48px, 8vw, 82px); }

.shk-iscrizione {
  margin-top: clamp(56px, 8vw, 88px);
  padding-top: clamp(44px, 6vw, 64px);
  border-top: 1px solid var(--linea);
  text-align: center;
}
.shk-iscrizione .shk-p { max-width: 46ch; margin: 20px auto 0; }


/* --------------------------------------------------------------------------
   Pagina di un singolo livello
   -------------------------------------------------------------------------- */
.shk-indietro { margin-bottom: clamp(26px, 4vw, 38px); }

.shk-livello-testa {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 40px);
  align-items: center;
}
@media (min-width: 780px) {
  .shk-livello-testa { grid-template-columns: 300px 1fr; gap: clamp(38px, 5vw, 56px); }
}
.shk-livello-testa__targa { display: block; width: 100%; height: auto; }
.shk-livello-testa .shk-h1 { margin-top: .15em; }

.shk-periodo {
  margin-top: 1em;
  font-family: var(--label);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* L'avvertenza del documento: c'e' ma non deve gridare. */
.shk-avvertenza {
  margin-top: clamp(34px, 5vw, 48px);
  max-width: 68ch;
  font-size: .92rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--testo2);
}

/* Il box: e' la parte che Valeria ha chiesto di evidenziare. Fondo appena
   sollevato e filetto oro a sinistra — lo stesso segno dei messaggi flash,
   perche' nel portale "guarda qui" si dice gia' cosi'. */
.shk-box {
  margin-top: clamp(40px, 6vw, 60px);
  border: 1px solid var(--linea2);
  border-left-width: 2px;
  border-left-color: var(--gold);
  background: rgba(182, 167, 147, .05);
  padding: clamp(28px, 4.4vw, 46px);
}
.shk-box__titolo {
  font-family: var(--label);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(24px, 3.4vw, 34px);
}
.shk-box__voce + .shk-box__voce { margin-top: clamp(24px, 3.4vw, 32px); }
.shk-box__voce-titolo {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cream);
  margin-bottom: .35em;
}
.shk-box .shk-p { max-width: 72ch; }
.shk-box strong { color: #fff; font-weight: 600; }

/* Il calendario */
.shk-calendario { margin-top: clamp(56px, 8vw, 84px); }

/* Apertura di sezione, non un'etichetta come le date qui sotto: stessa famiglia
   ma piu' grande, piu' spaziata, in crema invece che oro — dentro il calendario
   l'oro e' il colore dei dati — e con un filetto che chiude la riga. Prima era
   un eyebrow identico alle date, che pero' sono .76rem: il dato risultava piu'
   importante del titolo che lo contiene. */
.shk-calendario__titolo {
  font-family: var(--label);
  font-weight: 400;
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cream);
  padding-bottom: clamp(16px, 2.2vw, 22px);
  border-bottom: 1px solid var(--linea2);
  margin-bottom: clamp(10px, 1.6vw, 14px);
}

.shk-sessione { padding: clamp(26px, 4vw, 36px) 0; border-top: 1px solid var(--linea); }
/* La prima no: sopra c'e' gia' il filetto del titolo di sezione, e due righe a
   pochi pixel una dall'altra si leggono come un errore. */
.shk-sessione:first-of-type { border-top: 0; padding-top: clamp(18px, 2.6vw, 26px); }
.shk-sessione__data {
  display: block;
  font-family: var(--label);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75em;
}
.shk-sessione__titolo {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  color: var(--cream);
}
.shk-sessione__sommario { margin-top: .7em; max-width: 70ch; color: var(--testo); }

.shk-sessione__voci {
  margin-top: clamp(26px, 3.6vw, 34px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.8vw, 26px);
}
@media (min-width: 900px) {
  .shk-sessione__voci { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 34px); }
}
.shk-voce { padding-left: 18px; border-left: 1px solid var(--linea); }
.shk-voce__titolo {
  /* Light Italic e non Extra Light: l'Extra Light e' disegnato per i titoli
     grandi, e a 17px si assottiglia fino a sparire. Il progetto ha entrambi i
     file — qui serve quello con un po' piu' di corpo. */
  font-family: 'Newsreader Display Light Italic', 'Playfair Display', Georgia, serif;
  font-weight: 300;
  font-size: 1.05rem;
  /* Un filo d'aria fra le lettere: e' un carattere da titoli, disegnato per
     misure grandi, e a 17px si chiude su se' stesso. */
  letter-spacing: .012em;
  line-height: 1.38;
  color: var(--sand);
  margin-bottom: .4em;
}
.shk-voce__testo { font-size: .93rem; line-height: 1.7; color: var(--testo2); }

.shk-indietro--fondo {
  margin-top: clamp(44px, 6vw, 64px);
  margin-bottom: 0;
  padding-top: clamp(30px, 4vw, 42px);
  border-top: 1px solid var(--linea);
  text-align: center;
}

/* Gli altri livelli, in fondo alla pagina di un livello. */
.shk-altri {
  margin-top: clamp(50px, 7vw, 76px);
  padding-top: clamp(34px, 4.6vw, 48px);
  border-top: 1px solid var(--linea);
  text-align: center;
}
.shk-altri__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(22px, 3vw, 28px);
}
@media (min-width: 700px) {
  .shk-altri__lista { grid-template-columns: repeat(2, 1fr); }
}
.shk-altri__voce {
  background: var(--dark);
  padding: clamp(22px, 3.2vw, 30px) clamp(18px, 3vw, 28px);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.3;
  color: var(--cream);
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.shk-altri__voce:hover { background: var(--dark2); color: var(--sand); }
.shk-altri__tutti { margin-top: clamp(24px, 3.4vw, 32px); }


/* --------------------------------------------------------------------------
   Aree toccabili
   WCAG 2.2 chiede almeno 24x24px per un bersaglio. Diversi link erano alti
   14-20px: non per il testo, ma perche' l'area cliccabile finiva con la riga.
   Si allarga con il padding — l'aspetto non cambia, cambia dove si puo'
   premere, che su un telefono e' la differenza fra centrare e sbagliare.
   -------------------------------------------------------------------------- */
.shk-topbar__nav a {
  padding-top: 7px;
  padding-bottom: 7px;
}
.shk-footer__in a,
.shk-footer__in span {
  padding-top: 5px;
  padding-bottom: 5px;
}
/* I link di testo dentro un paragrafo sono esentati dalla regola (sono "inline"
   in una frase), ma quelli che stanno da soli come comando no. */
.shk-indietro .shk-link,
.shk-altri__tutti .shk-link,
.shk-link--comando {
  display: inline-block;
  padding-top: 6px;
  padding-bottom: 6px;
}

.shk-tessera__riga { display: block; }
.shk-tessera__riga:empty { display: none; }