/* Θέμα «Mad Lions»: το φωτεινό (Light) look του themadlions.com πάνω στο Boulevart. Κρεμ χαρτί, Jost παντού,
   τίτλοι λεπτοί με την τελευταία λέξη έντονη, μικρές ετικέτες με αραιά κεφαλαία, «χάπια» από γυαλί, λευκές κάρτες.
   Το Jost δεν έχει ελληνικά: τα ελληνικά γράμματα έρχονται από το Commissioner (το φορτώνει ήδη το Daylight).
   Φορτώνεται ΜΕΤΑ το daylight.css (το <html> έχει και τις δύο κλάσεις) και αλλάζει μόνο ό,τι διαφέρει. */
/* Οι γραμματοσειρές από το ίδιο το site (όχι από το Google): πιο γρήγορα, και τα στοιχεία των επισκεπτών δεν πάνε στο Google.
   Jost και Commissioner, άδεια SIL Open Font License. */
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/commissioner-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
html.skin-lions {
  --bg: #f3f0e8;
  --bg-2: #ffffff;
  --bg-3: #ebe7dd;
  --line: rgba(0, 0, 0, .1);
  --line-2: rgba(0, 0, 0, .18);
  --text: #151412;
  --soft: #3d3a34;
  --muted: #6f6a60;
  --accent: #2346e6;
  --accent-2: #1a35b8;
  --glass: rgba(0, 0, 0, .04);
  --glass-edge: rgba(0, 0, 0, .12);
  --display: "Jost", "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --body: "Jost", "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Jost", "Commissioner", system-ui, sans-serif;
  --r-lg: 20px;
  --r-md: 18px;
  --r-sm: 14px;
  background: var(--bg);
}
.skin-lions body { font: 400 16.5px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
.skin-lions body::after { opacity: .018; }

/* ---------- τυπογραφία: λεπτό + έντονο στον ίδιο τίτλο, όπως «Films, made mad.» */
.skin-lions .h1, .skin-lions .h2, .skin-lions .display { font-family: var(--display); font-weight: 300; letter-spacing: -.01em; line-height: 1.04; }
.skin-lions .h2 { font-size: clamp(34px, 5.4vw, 72px); }
.skin-lions .h1 { font-size: clamp(38px, 5.8vw, 84px); }
.skin-lions .h1 b, .skin-lions .h2 b, .skin-lions .h1 strong, .skin-lions .h2 strong { font-weight: 700; }
.skin-lions .h3 { font: 500 19px/1.3 var(--body); letter-spacing: 0; }
.skin-lions .eyebrow { gap: 0; font: 500 12.5px/1 var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.skin-lions .eyebrow::before { display: none; }
.skin-lions .lead, .skin-lions .intro-text, .skin-lions .stage-lead, .skin-lions .muted { font-weight: 300; }

/* ---------- κεφαλίδα: διάφανη πάνω στη φωτογραφία, γυαλί όταν κατεβαίνει, μενού με αραιά κεφαλαία */
.skin-lions .top.is-stuck::before { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
/* στην αρχική το λογότυπο εμφανίζεται μόνο όταν κατεβαίνει η σελίδα, αφού το BOULEVART είναι ήδη μεγάλο στη μέση */
.skin-lions .brand { transition: opacity .4s, transform .4s var(--ease); }
.skin-lions .is-home .top:not(.is-stuck) .brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.skin-lions .nav { font: 500 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.skin-lions .nav a:not(.btn):not(.lang) { padding: 8px 12px; border-radius: 999px; opacity: .8; transition: background .2s, opacity .2s; }
.skin-lions .nav a:not(.btn):not(.lang):hover { background: var(--glass); opacity: 1; }
.skin-lions .nav a:not(.btn):not(.lang)::after { display: none; }
.skin-lions .nav .lang { background: var(--glass); box-shadow: 0 0 0 1px var(--glass-edge) inset; font: 500 12px var(--body); letter-spacing: .08em; }
@media (max-width: 880px) {
  .skin-lions .nav { background: rgba(243, 240, 232, .98); font: 300 38px/1.15 var(--display); letter-spacing: -.01em; text-transform: none; }
  .skin-lions .nav .lang { font: 500 13px var(--body); }
}

/* ---------- κουμπιά: «χάπια» από γυαλί· το κύριο σε μπλε */
.skin-lions .btn { background: var(--accent); color: #fff; font: 500 15px/1 var(--body); letter-spacing: .04em; min-height: 48px; padding: 0 24px; box-shadow: 0 10px 30px rgba(35, 70, 230, .22); }
.skin-lions .btn::before { background: var(--accent-2); }
.skin-lions .btn::after { content: none; }
.skin-lions .btn:hover { box-shadow: 0 12px 34px rgba(35, 70, 230, .3); transform: translateY(-1px); }
.skin-lions .btn-ghost { background: var(--glass); color: var(--text); box-shadow: 0 0 0 1px var(--glass-edge) inset; }
.skin-lions .btn-ghost::before { background: rgba(0, 0, 0, .06); }
.skin-lions .btn-ghost:hover { color: var(--text); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset; }
.skin-lions .btn-sm { min-height: 38px; padding: 0 18px; font-size: 13px; box-shadow: none; }
.skin-lions .pill span, .skin-lions .pill-btn { background: var(--glass); border-color: var(--glass-edge); border-radius: 999px; }
.skin-lions .pill input:checked + span, .skin-lions .pill-btn.is-on { background: var(--text); color: #fff; }

/* ---------- hero: η φωτογραφία ασπρόμαυρη πίσω από κρεμ πέπλο, το BOULEVART στη μέση, λεπτό + έντονο */
.skin-lions .hero { display: grid; place-items: center; height: 100svh; min-height: 600px; padding: 0; overflow: hidden; }
.skin-lions .hero .hero-bg { display: block; filter: grayscale(1) contrast(1.06); }
.skin-lions .hero::after { content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(243, 240, 232, .55), rgba(243, 240, 232, .9) 75%), linear-gradient(180deg, rgba(243, 240, 232, .6), transparent 30%, transparent 60%, var(--bg)); }
.ml-hero { position: relative; z-index: 1; padding: 0 var(--gutter); text-align: center; }
.ml-wm { margin: 0; font: 300 clamp(48px, 11.5vw, 176px)/.9 var(--display); letter-spacing: .02em; color: var(--text); white-space: nowrap; animation: ml-in 1.4s var(--ease) both; }
.ml-wm b { font-weight: 700; }
.ml-kick { margin: clamp(18px, 2.4vw, 30px) 0 0; font: 500 clamp(12px, 1.3vw, 15px)/1.5 var(--body); letter-spacing: .34em; text-transform: uppercase; color: var(--accent); animation: ml-in 1.2s var(--ease) .25s both; }
.ml-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: clamp(26px, 3.4vw, 40px) 0 0; animation: ml-in 1.2s var(--ease) .45s both; }
.ml-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: clamp(26px, 3vw, 36px) 0 0; font: 400 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); animation: ml-in 1.2s var(--ease) .6s both; }
.ml-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 22px 2px -22px; border-radius: 50%; background: var(--accent); vertical-align: middle; position: relative; left: 11px; }
@keyframes ml-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- λωρίδα */
.skin-lions .marquee span { font: 500 clamp(12px, 1.1vw, 14px)/1 var(--body); letter-spacing: .28em; }

/* ---------- επιφάνειες: λευκές κάρτες, στρογγυλές, ανεβαίνουν λίγο στο hover */
.skin-lions .stage-row, .skin-lions .card, .skin-lions .prop-card, .skin-lions .pack, .skin-lions .faq details, .skin-lions .rating, .skin-lions .foot-card, .skin-lions .band-in { border-radius: var(--r-md); }
.skin-lions .card, .skin-lions .prop-card, .skin-lions .pack, .skin-lions .foot-card { transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .4s; }
.skin-lions .card:hover, .skin-lions .prop-card:hover, .skin-lions .pack:hover { transform: translateY(-4px); border-color: rgba(35, 70, 230, .45); }
.skin-lions .stats dt, .skin-lions .rating-n { font-family: var(--display); font-weight: 300; letter-spacing: -.02em; }
.skin-lions .stats dd, .skin-lions .stage-kicker, .skin-lions .stage-facts dt, .skin-lions .foot-tag { font-family: var(--body); letter-spacing: .2em; text-transform: uppercase; }
.skin-lions .stage-facts .is-price dd, .skin-lions .pack-p, .skin-lions .prop-price, .skin-lions .prop-card em { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
.skin-lions .pack .h3, .skin-lions .step legend, .skin-lions .choice strong, .skin-lions .foot-card strong, .skin-lions .prop-card strong { font-family: var(--display); font-weight: 500; letter-spacing: 0; }
.skin-lions .ticks li { border-radius: 999px; }
.skin-lions .lb { background: rgba(243, 240, 232, .97); }

@media (max-width: 700px) {
  .ml-wm { font-size: clamp(40px, 13.6vw, 72px); letter-spacing: 0; }
  .ml-kick { letter-spacing: .24em; }
  .ml-meta { gap: 8px 18px; letter-spacing: .1em; }
  .ml-cta .btn { width: auto; flex: 0 0 auto; min-height: 46px; padding: 0 20px; }
  .skin-lions .h2 { font-size: clamp(30px, 8.6vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .ml-wm, .ml-kick, .ml-cta, .ml-meta { animation: none; }
}