/* ============================================================
   Groov-illa · grail-hunt.css
   Sezione "The Grail Hunt" — landing + 3 pagine-regione.
   Palette e font sono quelli del sito (groovilla-base.css):
   qui si definiscono solo i token che il mockup usava e la base
   non ha (--gh-paper, --gh-line, --gh-line-soft).
   Caricato via page_css sulla landing e sulle tre pagine-regione.
   ============================================================ */

.gh{
  --gh-paper:      oklch(0.985 0.008 90);
  --gh-line:       oklch(0.2 0.02 60/.16);
  --gh-line-soft:  oklch(0.2 0.02 60/.09);
  /* margini laterali allineati a .page (groovilla-base.css): 32px, 16px sotto i 720 */
  max-width:1180px;margin:0 auto;padding:0 32px 72px;
}
@media(max-width:720px){ .gh{padding:0 16px 48px} }

/* ── baule del tesoro (marcatore della sola landing) ──
   Sipario in tre tempi su 1,7s: il chiuso resta fermo 500ms, sfuma in 450,
   200ms di vuoto in cui non si vede nessuna delle due, poi l'aperto entra in
   550ms e resta. Le percentuali qui sotto sono quei millisecondi su 1700. */
.gh-chest{
  position:relative;width:104px;height:102px;margin:0 auto 20px;
  /* nessun fondo e nessun riquadro: le PNG sono scontornate, il baule
     si posa direttamente sul cream. Il momento vuoto fra le due e' la pagina. */
}
.gh-chest picture{position:absolute;inset:0;display:block}
.gh-chest img{width:100%;height:100%;display:block;object-fit:contain}
@keyframes gh-chest-shut{0%,29.4%{opacity:1}55.9%,100%{opacity:0}}
@keyframes gh-chest-reveal{0%,67.6%{opacity:0}100%{opacity:1}}
.gh-chest .ch-closed{opacity:1;animation:gh-chest-shut 1.7s ease 1 forwards}
.gh-chest .ch-open{opacity:0;animation:gh-chest-reveal 1.7s ease 1 forwards}
/* accessibilita': niente sipario, si vede subito il tesoro
   (come la bussola che mostra l'ago gia' fermo sul nord) */
@media(prefers-reduced-motion:reduce){
  .gh-chest .ch-closed{display:none}
  .gh-chest .ch-open{animation:none;opacity:1}
}

/* ── HERO landing ── */
.gh-hero{text-align:center;padding:44px 0 40px;border-bottom:1px solid var(--gh-line);margin-bottom:40px}
.gh-hero .gh-compass{margin:0 auto 20px}
.gh-hero-kick{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rust);margin-bottom:18px;
}
.gh-hero h1{
  font-family:var(--display);font-weight:400;font-size:clamp(42px,6.4vw,64px);
  line-height:.98;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink);
}
.gh-hero h1 em{font-family:var(--serif);font-style:italic;color:var(--olive-deep)}
.gh-hero .gh-sub{
  font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.45;
  color:var(--ink-2);max-width:620px;margin:0 auto 26px;
}
.gh-book-row{
  display:inline-flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;
  background:var(--gh-paper);border:1px solid var(--gh-line);border-radius:3px;padding:13px 22px;
}
.gh-book-row .bk{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);
}
.gh-book-row .bk strong{color:var(--rust);font-weight:600}

/* ── legenda ── */
.gh-legend{
  background:var(--gh-paper);border:1px dashed var(--gh-line);border-radius:3px;
  padding:15px 20px;margin-bottom:36px;font-family:var(--serif-article);
  font-size:14px;line-height:1.6;color:var(--ink-2);
}
.gh-legend b{color:var(--rust);font-weight:600}

/* ── indice delle regioni (landing) ── */
.gh-regions{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px}
@media(max-width:820px){ .gh-regions{grid-template-columns:1fr} }
.gh-region-card{
  background:var(--gh-paper);border:1px solid var(--gh-line);border-radius:4px;
  padding:24px 22px 20px;display:flex;flex-direction:column;
  transition:border-color .15s ease,transform .15s ease;
}
.gh-region-card:hover{border-color:var(--rust);transform:translateY(-2px)}
.gh-region-card .rg-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);margin-bottom:10px;
}
.gh-region-card h2{
  font-family:var(--display);font-weight:400;font-size:30px;line-height:1;margin:0 0 8px;color:var(--ink);
}
.gh-region-card .rg-kick{
  font-family:var(--serif);font-style:italic;font-size:15px;color:var(--olive-deep);margin-bottom:12px;
}
.gh-region-card .rg-cities{
  font-family:var(--serif-article);font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:16px;
}
.gh-region-card .rg-meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);margin-top:auto;padding-top:12px;border-top:1px solid var(--gh-line-soft);
  display:flex;justify-content:space-between;gap:10px;
}
.gh-region-card .rg-meta .go{color:var(--rust)}

/* ── testata pagina-regione ── */
.gh-reghead{padding:36px 0 26px;border-bottom:1px solid var(--gh-line);margin-bottom:32px}
.gh-reghead-top{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.gh-reghead h1{
  font-family:var(--display);font-weight:400;font-size:clamp(38px,5.4vw,58px);
  line-height:1;letter-spacing:-.02em;margin:0;color:var(--ink);
}
.gh-reghead h1 em{font-family:var(--serif);font-style:italic;color:var(--olive-deep)}
.gh-reghead .gh-kick{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);margin-bottom:8px;
}
.gh-reghead .gh-intro{
  font-family:var(--serif-article);font-size:16px;line-height:1.7;color:var(--ink-2);max-width:720px;margin:0 0 18px;
}
.gh-reghead .gh-stats{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
}

/* barra delle altre regioni */
.gh-regbar{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:34px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.gh-regbar a,.gh-regbar span.cur{
  border:1px solid var(--gh-line);border-radius:999px;padding:6px 14px;color:var(--ink-mute);
}
.gh-regbar a:hover{border-color:var(--rust);color:var(--rust)}
.gh-regbar span.cur{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ── blocco città ── */
.gh-city{margin-bottom:46px;scroll-margin-top:100px}
.gh-city-head{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:20px;padding-bottom:10px;border-bottom:1px dashed var(--gh-line);
}
.gh-city-head h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;margin:0;color:var(--ink)}
.gh-city-head .cc{
  font-family:var(--serif);font-style:italic;font-size:15px;color:var(--olive-deep);
  margin-left:auto;text-align:right;max-width:56ch;
}
@media(max-width:720px){ .gh-city-head .cc{margin-left:0;text-align:left} }

/* ── griglia schede ── */
.gh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:980px){ .gh-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:680px){ .gh-grid{grid-template-columns:1fr} }

/* ── mini-scheda ── */
.gh-card{
  background:var(--gh-paper);border:1px solid var(--gh-line);border-radius:4px;
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  scroll-margin-top:110px;   /* atterraggio QR: la scheda non finisce sotto la nav sticky */
}
.gh-card.major{border-color:var(--rust);border-width:1.5px}
.gh-card:target{
  box-shadow:0 0 0 3px oklch(0.55 0.14 45/.28);
  border-color:var(--rust);
}
.gh-card .gh-badge{
  position:absolute;top:12px;right:12px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--rust);color:var(--cream);padding:4px 9px;border-radius:2px;
}
.gh-card .gh-badge.sec{background:var(--olive-deep)}
.gh-card .gh-body{padding:18px;display:flex;flex-direction:column;flex:1}
.gh-card .gh-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:13px}
.gh-card .gh-cover{
  width:64px;height:64px;flex-shrink:0;background:var(--cream-2);
  border:1px solid var(--gh-line);border-radius:2px;position:relative;overflow:hidden;
}
.gh-card .gh-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* fallback: mini-vinile stilizzato quando la cover non c'è */
.gh-card .gh-cover .disc-mini{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle,var(--gh-paper) 0 14%,var(--ink-mute) 14% 18%,transparent 18%);
}
.gh-card .gh-head-txt{flex:1;min-width:0;padding-top:2px}
.gh-card .gh-yr{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-mute);margin-bottom:5px}
.gh-card h3{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.08;margin:0 0 2px;color:var(--ink)}
.gh-card .gh-artist{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--olive-deep)}
.gh-card .gh-qual{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-mute);margin-top:3px}
.gh-card .gh-story{font-family:var(--serif-article);font-size:13px;line-height:1.55;color:var(--ink-2);margin-bottom:11px}
.gh-card .gh-story em{font-style:italic}
.gh-card .gh-tell{
  background:var(--cream-2);border-left:2px solid var(--olive);
  padding:8px 10px;margin-bottom:11px;border-radius:0 3px 3px 0;
}
.gh-card .gh-tell .tl{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--olive-deep);margin-bottom:3px;
}
.gh-card .gh-tell .tv{font-family:var(--serif-article);font-size:12px;line-height:1.45;color:var(--ink-2)}
.gh-card .gh-tell code{font-family:var(--mono);font-size:11px;background:oklch(0.2 0.02 60/.07);padding:0 3px;border-radius:2px}
.gh-card .gh-price{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink);margin-bottom:13px}
.gh-card .gh-price b{color:var(--rust);font-weight:600}
.gh-card .gh-links{
  display:flex;flex-direction:column;gap:7px;margin-top:auto;
  padding-top:11px;border-top:1px solid var(--gh-line-soft);
}
.gh-card .lk{
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.gh-card .lk.buy{color:var(--rust)}
.gh-card .lk.rev{color:var(--ink)}
.gh-card .lk.book{color:var(--ink-mute)}
.gh-card .lk:hover{text-decoration:underline;text-underline-offset:3px}
.gh-card .lk span:last-child{opacity:.5}

/* ── coda pagina ── */
.gh-foot{
  text-align:center;padding:28px 0 0;margin-top:8px;border-top:1px solid var(--gh-line);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
}
.gh-foot a{color:var(--rust);border-bottom:1px solid currentColor}