/* =========================================================
   Page-specific components (home, strips, quiz, easter eggs...)
   ========================================================= */

/* ---------- home hero ---------- */
.home-hero {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--header-h) + 40px) var(--gutter) 110px;
}
.hh-bg { position: absolute; inset: -8%; z-index: -3; background-image: var(--bg); background-size: cover; background-position: center 30%; }
@media (hover: hover) and (min-width: 900px) { .hh-bg { animation: kenburns 34s ease-in-out infinite alternate; } }
@media (max-width: 700px) { .hh-bg { background-image: var(--bg-s, var(--bg)); } }
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(26, 11, 61, 0.12), rgba(14, 6, 41, 0.62) 78%),
    linear-gradient(180deg, rgba(14, 6, 41, 0.45), transparent 30%, transparent 55%, var(--tint-2));
}
.hh-line { color: #fff6c9; font-size: clamp(1.05rem, 1.8vw, 1.3rem); animation: rise-in 1.2s 0.8s var(--ease-out) both; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.hh-line span + span::before { content: '\2726'; color: var(--gold); margin-inline-end: 14px; font-size: 0.7em; }
.hh-inner { max-width: 980px; }
.hh-logo-wrap { position: relative; width: min(600px, 86vw); margin: 0 auto 10px; transition: transform 0.6s var(--ease-out); }
.hh-logo { width: 100%; height: auto; animation: logo-in 1.6s var(--ease-spring) both, float 7s ease-in-out 1.6s infinite; filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.55)); }
@keyframes logo-in { from { opacity: 0; transform: scale(0.6) rotate(-8deg) translateY(40px); filter: blur(12px); } }
.hh-glow { position: absolute; inset: 10% 15%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 0, 0.45), rgba(124, 77, 255, 0.25) 45%, transparent 70%); filter: blur(30px); animation: breathe 5s ease-in-out infinite; }
.hh-title { font-size: clamp(1.7rem, 4.2vw, 3.2rem); font-weight: 800; line-height: 1.25; margin: 10px 0 18px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); animation: rise-in 1.2s 0.5s var(--ease-out) both; }
.hh-title .gold-text { display: block; text-shadow: none; }
.home-hero .hero-meta { animation: rise-in 1.2s 0.9s var(--ease-out) both; }
.home-hero .btn-row { animation: rise-in 1.2s 1.1s var(--ease-out) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(30px); filter: blur(8px); } }
.hh-notes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.note {
  position: absolute; bottom: -40px; left: var(--x); font-size: calc(1.6rem * var(--s)); color: var(--gold);
  opacity: 0; text-shadow: 0 0 14px rgba(255, 215, 0, 0.7);
  animation: note-rise 13s linear var(--d) infinite;
}
@keyframes note-rise {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  10% { opacity: 0.9; }
  50% { transform: translate(30px, -50vh) rotate(20deg); }
  90% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-20px, -105vh) rotate(-10deg); }
}

/* floating page emoji (hero.float) */
.floaters { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.floaters span { position: absolute; bottom: -60px; font-size: 2rem; animation: note-rise 14s ease-in-out infinite; opacity: 0; text-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); }

.gold-text .emoji { -webkit-text-fill-color: initial; color: initial; background: none; }
/* ---------- pillars ---------- */
.pillar {
  position: relative; text-align: center; padding: 0 0 28px; border-radius: var(--radius-l); overflow: hidden;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-border); box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease-out);
}
.pillar-img { aspect-ratio: 16 / 10; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.pillar-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.pillar:hover .pillar-img img { transform: scale(1.08); }
.pillar-emoji {
  width: 76px; height: 76px; margin: -46px auto 12px; position: relative; border-radius: 50%;
  display: grid; place-items: center; font-size: 2.2rem;
  background: var(--coin);
  box-shadow: var(--coin-ring);
  transition: transform 0.6s var(--ease-spring);
}
.pillar:hover .pillar-emoji { transform: rotate(-12deg) scale(1.12); }
.pillar h3 { font-size: 1.9rem; margin-bottom: 6px; }
.pillar p { color: var(--text-soft); padding: 0 24px; margin: 0; }

/* ---------- circles strip ---------- */
.strip-wrap { position: relative; }
.strip {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 16px max(var(--gutter), calc((100% - var(--max)) / 2)) 30px; scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.circle-card {
  flex: 0 0 min(270px, 72vw); aspect-ratio: 3 / 4; scroll-snap-align: center; position: relative; overflow: hidden;
  border-radius: 28px; text-decoration: none; color: #fff; isolation: isolate; box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease-spring), box-shadow 0.4s;
}
.circle-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease-out); }
.circle-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(10, 4, 30, 0.95)); }
.circle-card:hover { transform: translateY(-10px) rotate(-1.5deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), var(--glow); }
.circle-card:hover img { transform: scale(1.1); }
.cc-num {
  position: absolute; top: 14px; inset-inline-end: 14px; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 1.5rem; color: #2a1400;
  background: var(--coin);
  box-shadow: var(--coin-ring);
}
.cc-body { position: absolute; inset: auto 0 0 0; padding: 20px; display: grid; }
.cc-year { position: absolute; top: 14px; inset-inline-start: 16px; font-family: var(--font-hand); font-weight: 700; color: rgba(255, 255, 255, 0.85); font-size: 1.1rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
.circle-card.lead { flex-basis: min(340px, 80vw); }
.circle-card.lead::before { content: 'החדש'; position: absolute; top: 14px; inset-inline-start: 16px; z-index: 1; font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--pink); color: #3a0a24; }
.circle-card.lead .cc-year { top: 44px; }
.circle-card.origin { background: var(--paper); border: 1px dashed rgba(255, 215, 0, 0.45); display: grid; place-items: center; text-align: center; padding: 22px; }
.circle-card.origin::after { display: none; }
.cc-origin { display: grid; gap: 8px; justify-items: center; }
.cc-origin-year { font-family: var(--font-hand); font-size: 3rem; font-weight: 700; color: var(--gold); line-height: 1; }
.cc-origin strong { font-size: 1.3rem; }
.cc-origin small { color: var(--text-soft); }
/* the rail of years under the strip */
.strip { position: relative; }
.strip::after { content: ''; position: absolute; inset-inline: 0; bottom: 14px; height: 2px; background: linear-gradient(90deg, var(--sky), var(--violet), var(--gold)); opacity: 0.55; }
.strip-counter { text-align: center; margin: 0; color: var(--text-mute); }
/* pinned rail: the section grows by the rail's hidden width, the inner box sticks, and site.js moves the rail sideways
   as the page scrolls. Desktop only, and only when motion is allowed. Phones keep the swipe. */
.circles-sec.pinned { padding-block: 0; }
.circles-sec.pinned .pin { position: sticky; top: var(--pin-top, 0px); padding-block: var(--sp-5, 40px); }
.circles-sec.pinned .strip { scroll-snap-type: none; scroll-behavior: auto; overflow-x: hidden; }
@media (min-width: 561px) { .strip-counter { display: none; } }
.cc-body strong { font-size: 1.4rem; }
.cc-body small { color: var(--text-soft); }
.strip-btn { position: absolute; top: 50%; z-index: 3; translate: 0 -50%; background: rgba(20, 8, 50, 0.8); backdrop-filter: blur(8px); }
.strip-prev { inset-inline-start: 12px; }
.strip-next { inset-inline-end: 12px; }

/* ---------- countdown ---------- */
.countdown { display: flex; gap: 14px; justify-content: center; margin-top: 22px; }
.countdown div { min-width: 86px; padding: 14px 10px; border-radius: 18px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.15); }
.countdown b { display: block; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown span { color: var(--text-soft); font-size: 0.9rem; }

/* ---------- quotes ---------- */
.quotes { columns: 3 300px; column-gap: 22px; }
.quote-card {
  break-inside: avoid; margin: 0 0 26px; padding: 30px 26px 22px; border-radius: 26px 26px 26px 6px;
  background: var(--paper); border: 1px solid var(--paper-border);
  position: relative; isolation: isolate;
}
.quote-card blockquote { margin: 0 0 14px; font-size: 1.12rem; line-height: 1.6; }
.quote-card figcaption { font-family: var(--font-hand); color: var(--accent); font-weight: 600; }

/* ---------- features ---------- */
.feature { text-align: center; transition: transform 0.5s var(--ease-spring); }
.feature:hover { transform: translateY(-8px) rotate(-1deg); }
.feature-emoji { font-size: 3rem; margin-bottom: 10px; display: inline-block; transition: transform 0.5s var(--ease-spring); }
.feature:hover .feature-emoji { transform: translateY(-6px) rotate(-8deg); }

/* ---------- film tiles ---------- */
.film-tile { aspect-ratio: 2 / 3; rotate: var(--r, 0deg); }
.film-tile:nth-child(odd) { --r: -1.5deg; } .film-tile:nth-child(even) { --r: 1.5deg; }
.film-tile img { object-fit: cover; object-position: top; }
.film-tile:hover { rotate: 0deg; }
.film-tile.has-logo .film-logo { inset: 8% 12% 40%; }
.film-tile:not(.has-logo) .film-logo { display: none; }
.films-row { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1100px; margin-inline: auto; }
@media (max-width: 900px) { .films-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .films-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.film-tile::after { background: linear-gradient(180deg, rgba(10, 4, 30, 0.25), rgba(10, 4, 30, 0.92)); }
.film-logo { position: absolute; inset: 10% 10% 36%; display: grid; place-items: center; z-index: 1; transition: transform 0.6s var(--ease-spring); }
.tile .film-logo img { position: static; z-index: auto; width: auto; height: auto; max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)); transform: none; }
.film-tile:hover .film-logo { transform: scale(1.08) rotate(-2deg); }
.film-tile:hover { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 40px color-mix(in srgb, var(--fc) 45%, transparent); }

/* ---------- map ---------- */
.map-card { padding: 0; overflow: hidden; min-height: 340px; }
.map-card iframe { border: 0; width: 100%; height: 100%; min-height: 340px; display: block; filter: invert(0.9) hue-rotate(200deg) saturate(0.7); }

/* ---------- link in bio ---------- */
.linktree { min-height: 100svh; padding: calc(var(--header-h) + 50px) 0 60px; }
.lt-link.primary { border-radius: 14px; padding: 18px 20px; font-size: 1.25rem; position: relative; }
.lt-link.primary::before, .lt-link.primary::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--night-900); translate: 0 -50%; }
.lt-link.primary::before { inset-inline-start: -7px; } .lt-link.primary::after { inset-inline-end: -7px; }
.lt-links .lt-link.primary + .lt-link:not(.primary) { margin-top: 12px; }
.lt-link:not(.primary) { padding: 10px 14px; font-size: 1.02rem; font-weight: 600; }
.lt-link:not(.primary) .lt-ico { width: 40px; height: 40px; font-size: 1.25rem; }
.lt-links { grid-template-columns: 1fr 1fr; }
.lt-links .lt-link.primary { grid-column: 1 / -1; }
@media (max-width: 480px) { .lt-links { grid-template-columns: 1fr; } }
.lt-logo { width: min(340px, 80vw); height: auto; margin: 0 auto; animation: logo-in 1.4s var(--ease-spring) both, float 7s ease-in-out 1.4s infinite; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)); }
.lt-title { font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 700; margin-top: 12px; }
.lt-links { display: grid; gap: 14px; }
.lt-link {
  display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 20px; text-decoration: none; font-weight: 700; font-size: 1.12rem; text-align: start;
  background: var(--glass-grad); border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s var(--ease-spring), background 0.3s, border-color 0.3s;
}
.lt-link:hover { transform: scale(1.03) translateY(-2px); border-color: var(--gold); background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(124, 77, 255, 0.2)); }
.lt-link svg { width: 22px; height: 22px; color: var(--gold); }
.lt-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: rgba(255, 255, 255, 0.1); }

/* ---------- status lines under forms ---------- */
.gate-msg { text-align: center; min-height: 1.6em; margin: 14px 0 0; font-weight: 700; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

/* ---------- quiz dialogs ---------- */
.bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--pink), var(--violet)); transition: width 0.8s var(--ease-out); }
@keyframes pop { 50% { transform: scale(1.12); } }
.quiz-dialog { border: 0; border-radius: 28px; padding: 30px; max-width: min(520px, 92vw); background: var(--night-800); color: var(--text); box-shadow: var(--shadow); }
.quiz-dialog::backdrop { background: rgba(5, 2, 16, 0.8); backdrop-filter: blur(6px); }
.quiz-dialog [data-titles] .active { border-color: var(--gold); background: rgba(255, 215, 0, 0.18); }
.certificate {
  text-align: center; padding: 34px 26px; border-radius: 18px; color: #2e1065;
  background: radial-gradient(circle at 50% 0%, #fffdf2, #f6ecd0); border: 6px double #c8a84b; margin-bottom: 18px;
}
.certificate img { margin: 0 auto 8px; }
.certificate h2 { color: #7a5a12; font-size: 2.2rem; margin-bottom: 4px; }
.certificate p { margin: 4px 0; }
.certificate .cert-name { font-size: 2.2rem; color: #4c2a90; font-family: var(--font-hand); margin: 8px 0; }
.cert-foot { display: flex; justify-content: space-around; margin-top: 22px; }
.cert-foot div { display: grid; }
.cert-foot small { border-top: 1px solid #c8a84b; padding-top: 4px; color: #7a5a12; }
.sig { font-family: "Brush Script MT", cursive; font-size: 1.6rem; }
@media print {
  body * { visibility: hidden !important; }
  .certificate, .certificate * { visibility: visible !important; }
  .certificate { position: fixed; inset: 5%; }
}

/* ---------- 404 ---------- */
.lost { background-size: cover; background-position: center; position: relative; isolation: isolate; }
.lost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 6, 41, 0.2), rgba(14, 6, 41, 0.85)); }
.lost-kristoff { max-height: 70vh; width: auto; justify-self: center; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); object-position: top; }
.lost-grid { min-height: 100svh; padding-top: calc(var(--header-h) + 50px); padding-bottom: 40px; }
@media (max-width: 860px) { .lost-grid { min-height: 0; } .lost-kristoff { max-height: 52vh; } }

/* lightning (Hercules page) */
.zap { position: fixed; inset: 0; z-index: 400; pointer-events: none; background: rgba(210, 230, 255, 0.55); animation: zap 0.5s ease-out forwards; }
@keyframes zap { 0% { opacity: 0; } 10% { opacity: 1; } 20% { opacity: 0.2; } 30% { opacity: 0.9; } 100% { opacity: 0; } }

@media (max-width: 560px) {
  .q-options { grid-template-columns: 1fr; }
  .countdown { gap: 8px; }
  .countdown div { min-width: 64px; }
  .strip-btn { display: none; }
}

/* hidden A113 easter egg on the about page */
.a113-egg {
  position: absolute; inset-inline-start: 18px; margin-top: -40px; font: 700 0.75rem/1 monospace; letter-spacing: 0.1em;
  color: var(--text-mute); opacity: 0.35; text-decoration: none; padding: 6px 8px; border: 1px dashed currentColor; border-radius: 6px;
  transition: opacity 0.3s, transform 0.4s var(--ease-spring), color 0.3s;
}
.a113-egg:hover { opacity: 1; color: #a3e635; transform: rotate(-8deg) scale(1.2); }

/* ---------- the circle newspaper ---------- */
.paper-stack { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 40px; align-items: center; justify-content: center; }
.paper { border: 0; padding: 0; cursor: zoom-in; background: #efe6d0; position: relative; border-radius: 4px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.paper img { width: 100%; height: auto; border-radius: 4px; }
.paper-front { transform: rotate(-2deg); transition: transform 0.5s var(--ease-spring); }
.paper-front:hover { transform: rotate(0) scale(1.02); }
.js .paper-front[data-reveal="spin"] { opacity: 0; transform: rotate(-1080deg) scale(0.05); transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.4s; }
.js .paper-front[data-reveal="spin"].in { opacity: 1; transform: rotate(-2deg) scale(1); }
.paper-badge {
  position: absolute; top: -14px; inset-inline-start: -14px; padding: 8px 16px; border-radius: 999px; font-weight: 800;
  background: var(--pink); color: #3a0a24; transform: rotate(-10deg); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); animation: breathe 2.4s ease-in-out 3;
}
.paper-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px; }
.paper-small { transform: rotate(var(--r)); transition: transform 0.45s var(--ease-spring); }
.paper-small:hover { transform: rotate(0) scale(1.08); z-index: 2; }
.paper-num { position: absolute; bottom: -12px; left: 50%; translate: -50% 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--gold); color: #2a1400; }
@media (max-width: 860px) { .paper-stack { grid-template-columns: 1fr; } .paper-rest { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ---------- video: hero, loops, band ---------- */
.page-hero video.hero-bg { width: 112%; height: 112%; object-fit: cover; animation: none; }
.loops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.loop { margin: 0; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--night-700); box-shadow: var(--shadow); }
.loop:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.loop video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.loop:hover video { transform: scale(1.06); }
.loop figcaption { position: absolute; bottom: 12px; inset-inline-start: 14px; font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.video-band { position: relative; height: clamp(260px, 42vw, 520px); overflow: hidden; display: grid; place-items: center; margin-block: 30px; clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); }
.video-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 6, 41, 0.1), rgba(14, 6, 41, 0.65)); }
.video-band-text { position: relative; z-index: 1; margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: clamp(2.4rem, 7vw, 5rem); text-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
@media (max-width: 700px) { .loops { grid-template-columns: 1fr 1fr; } .loop:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; } }

.loops.vertical { grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); }
.loops.vertical .loop, .loops.vertical .loop:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 9 / 16; }
.grid-1 { grid-template-columns: 1fr; justify-items: center; }
.grid-1 .video.vertical { width: min(380px, 100%); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.badges img { width: 150px; height: auto; transition: transform .45s var(--ease-spring); filter: drop-shadow(0 12px 20px rgba(0,0,0,.4)); }
.badges img:hover { transform: translateY(-8px) rotate(-3deg) scale(1.06); }
.badges img:nth-last-child(-n+2) { width: 190px; }
.grid-1 > figure { width: min(380px, 100%); } .grid-1 .video.vertical { width: 100%; max-width: none; }

.gif-card { display: inline-block; margin: 0; padding: 10px 10px 0; border-radius: 6px; background: #f4ead8; transform: rotate(-2deg); box-shadow: 0 24px 50px -20px rgba(0,0,0,.7); transition: transform .5s var(--ease-spring); max-width: min(460px, 100%); }
.gif-card:hover { transform: rotate(0) scale(1.03); }
.gif-card video { width: 100%; border-radius: 3px; display: block; }
.gif-card figcaption { font-family: var(--font-hand); font-weight: 700; font-size: 1.5rem; color: #2e1065; padding: 8px 0 10px; }

.certificate .cert-note { margin-top: 14px; font-size: .95rem; color: #5b4a7a; }

/* ---------- about page ---------- */
.ab-kicker { font-family: var(--font-hand); color: var(--gold); font-size: 1.25rem; margin: 0 0 6px; }
.ab-big { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.15; }
.ab-collage { position: relative; min-height: 440px; }
.ab-polaroid { position: absolute; margin: 0; width: min(62%, 300px); padding: 10px 10px 34px; background: #fffdf6; border-radius: 6px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.75); rotate: var(--r); transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); }
.ab-polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 3px; }
.ab-polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--font-hand); color: #3b2a5c; font-size: 1rem; }
.ab-polaroid:nth-child(1) { top: 0; inset-inline-start: 0; z-index: 1; }
.ab-polaroid:nth-child(2) { top: 90px; inset-inline-end: 0; z-index: 2; }
.ab-polaroid:nth-child(3) { top: 230px; inset-inline-start: 14%; z-index: 3; }
.ab-polaroid:hover { rotate: 0deg; transform: scale(1.06); z-index: 5; }
@media (max-width: 860px) { .ab-collage { min-height: 470px; margin-top: 10px; } .ab-polaroid { width: min(60%, 300px); } .ab-polaroid:nth-child(3) { top: 210px; } }

.ab-journey { overflow: hidden; }
.ab-track { position: relative; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px max(var(--gutter), calc((100% - var(--max)) / 2)) 26px; scrollbar-width: none; }
.ab-track::-webkit-scrollbar { display: none; }
.ab-line { display: none; }
.ab-stop::before { content: ''; position: absolute; top: 28px; inset-inline: -18px 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--pink), var(--violet), var(--sky)); opacity: 0.7; z-index: -1; }
.ab-stop:first-child::before { inset-inline-start: 0; }
.ab-stop { position: relative; flex: 0 0 min(250px, 72vw); scroll-snap-align: center; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.ab-dot { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: var(--coin); box-shadow: var(--coin-ring); transition: transform 0.5s var(--ease-spring); }
.ab-stop:hover .ab-dot { transform: scale(1.15) rotate(-10deg); }
.ab-when { font-size: 0.85rem; color: var(--accent); font-weight: 700; margin-top: 8px; }
.ab-stop strong { font-size: 1.2rem; line-height: 1.25; }
.ab-what { color: var(--text-soft); font-size: 0.97rem; line-height: 1.5; }
.ab-swipe { text-align: center; font-size: 0.85rem; margin: 0; font-family: var(--font-hand); }
.ab-journey .ab-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }

.ab-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.ab-facts li { display: flex; gap: 14px; align-items: flex-start; }
.ab-facts li > span { flex: none; width: 40px; font-size: 1.7rem; line-height: 1.3; text-align: center; }
.ab-facts strong { font-size: 1.1rem; }
.ab-facts p { margin: 2px 0 0; color: var(--text-soft); }
.ab-love { padding: 0; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.ab-love-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ab-love-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ab-love:hover .ab-love-img img { transform: scale(1.06); }
.ab-hearts i { position: absolute; bottom: 10px; font-style: normal; font-size: 1.6rem; animation: note-rise 6s linear infinite; opacity: 0; }
.ab-hearts i:nth-child(1) { left: 20%; } .ab-hearts i:nth-child(2) { left: 50%; animation-delay: 2s; } .ab-hearts i:nth-child(3) { left: 78%; animation-delay: 4s; }
.ab-love-body { padding: 22px 24px 24px; }
.ab-love-body p { color: var(--text-soft); margin-bottom: 12px; }
.ab-more { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 700; }
.ab-more svg { width: 18px; height: 18px; }

.ab-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin-inline: auto; }
.ab-team { position: relative; overflow: hidden; padding: 22px 20px; border-radius: var(--radius); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(255, 255, 255, 0.03)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); transition: transform 0.45s var(--ease-spring); }
.ab-team:hover { transform: translateY(-6px) rotate(-1deg); }
.ab-team-emo { font-size: 2rem; display: block; margin-bottom: 6px; }
.ab-team strong { font-size: 1.15rem; }
.ab-team p { margin: 4px 0 0; color: var(--text-soft); font-size: 0.97rem; }
@media (max-width: 600px) { .ab-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ab-team { padding: 16px 14px; } .ab-team-emo { font-size: 1.6rem; } .ab-team p { font-size: 0.88rem; } }
.ab-teams-note { text-align: center; margin-top: 26px; font-family: var(--font-hand); font-size: 1.2rem; color: var(--lavender); }

/* ---------- steps strip: hand-drawn numerals, no boxes (screenings recipe) ---------- */
.recipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: rc; max-width: 1000px; margin-inline: auto; }
.recipe li { list-style: none; counter-increment: rc; text-align: center; padding: 0 8px; }
.recipe li::before { content: counter(rc); display: block; font-family: var(--font-hand); font-size: 3rem; line-height: 1; color: var(--accent); margin-bottom: 6px; }
.recipe strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.recipe span { color: var(--text-soft); font-size: 0.97rem; }
@media (max-width: 700px) { .recipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }

/* ---------- character cut-outs (film pages): no frame ---------- */
.cutout-fig { text-align: center; }
.cutout-fig img { max-height: 320px; width: auto; margin-inline: auto; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.55)); rotate: -3deg; transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); }
.cutout-fig:hover img { rotate: 2deg; transform: translateY(-6px); }
.cutout-fig figcaption { font-family: var(--font-hand); color: var(--accent); font-size: 1.3rem; margin-top: 10px; }

/* ---------- section tint: the page colour reaches below the hero ---------- */
.tinted { background: linear-gradient(180deg, color-mix(in srgb, var(--tint-1) 55%, transparent), transparent 70%); }

/* ---------- link-in-bio tickets ---------- */
.lt-link.primary { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #2a1400; border: 0; }
.lt-link.primary .lt-ico { background: rgba(0, 0, 0, 0.12); }
.lt-link.primary svg { color: #2a1400; }


/* ---------- home: manifesto band (no cards) ---------- */
.manifesto { position: relative; overflow: hidden; }
.mf { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: clamp(24px, 6vw, 90px); flex-wrap: wrap; align-items: flex-start; }
.mf li { text-align: center; max-width: 300px; translate: 0 calc(var(--i) * 14px - 14px); }
.mf-word { display: block; font-family: var(--font-hand); font-weight: 700; font-size: clamp(3rem, 7vw, 5.6rem); line-height: 1; color: var(--c); rotate: calc(var(--i) * 3deg - 3deg); text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); transition: rotate 0.5s var(--ease-spring); }
.mf li:hover .mf-word { rotate: 0deg; }
.mf-line { display: block; margin-top: 10px; color: var(--text-soft); font-size: 1.05rem; line-height: 1.55; }
.mf-pics { display: flex; justify-content: center; gap: 26px; margin-top: 34px; }
.mf-pic { width: 190px; padding: 8px 8px 24px; background: #fbf8ff; border-radius: 6px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7); rotate: var(--r); transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); }
.mf-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.mf-pic:hover { rotate: 0deg; transform: translateY(-6px); }
@media (max-width: 700px) {
  .mf { flex-direction: column; align-items: stretch; gap: 26px; }
  .mf li { max-width: none; translate: none; text-align: start; padding-inline-start: 6px; }
  .mf-word { font-size: 3.2rem; display: inline-block; }
  .mf-pics { gap: 12px; margin-top: 26px; }
  .mf-pic { width: calc(33.33% - 8px); padding: 5px 5px 16px; }
}

/* ---------- home: the show, three compositions ---------- */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--gold); font-weight: 700; text-decoration: none; font-size: 1.08rem; border-bottom: 2px solid transparent; transition: border-color 0.25s, gap 0.25s; }
.link-arrow:hover { border-color: var(--gold); gap: 12px; }
.link-arrow svg { width: 20px; height: 20px; }
.sc-text h2 { margin-bottom: 0.35em; }
.sc-text .lead { max-width: 520px; }
/* big: the photo is the section */
.sc-bleed { position: relative; min-height: max(clamp(520px, 72vh, 760px), 36vw); display: grid; align-items: end; padding: 80px 0 70px; margin-top: clamp(40px, 6vw, 96px); isolation: isolate; overflow: hidden; }
.sc-photo { position: absolute; inset: -12% 0; z-index: -2; background-image: var(--bg); background-size: cover; background-position: var(--pos, center 35%); }
@media (max-width: 700px) { .sc-photo { background-image: var(--bg-s, var(--bg)); } }
.sc-bleed::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--night-900) 0%, rgba(14, 6, 41, 0.15) 30%, rgba(14, 6, 41, 0.35) 60%, var(--night-900) 100%); }
.sc-bleed .sc-text { max-width: 640px; }
.sc-bleed h2 { font-size: clamp(2.4rem, 5vw, 4rem); text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); }
.sc-bleed .lead { color: var(--text-hero); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
/* small: a printed snapshot on the table */
.sc-snapshot .sc-grid { display: grid; grid-template-columns: minmax(280px, 460px) minmax(0, 1fr); gap: 40px 70px; align-items: center; }
.sc-snap { max-width: 460px; }
.sc-snap figcaption { text-align: center; margin: 12px 0 2px; color: #3b2a5c; font-size: 1.05rem; }
/* cinema: letterbox strip, text under it */
.sc-letterbox .sc-strip { position: relative; aspect-ratio: 2.35 / 1; overflow: hidden; border-block: 14px solid #000; background: #000; }
.sc-letterbox .sc-strip img { width: 100%; height: 100%; object-fit: cover; }
.sc-letterbox .sc-strip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45)); }
.sc-letterbox .sc-text { text-align: center; max-width: 620px; margin: 30px auto 0; }
.sc-letterbox .sc-text .lead { margin-inline: auto; }
.sc-letterbox .eyebrow { border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent); padding: 4px 14px; border-radius: 10px; }
@media (max-width: 860px) {
  .sc-snapshot .sc-grid { grid-template-columns: 1fr; }
  .sc-snap { max-width: 320px; margin-inline: auto; }
  .sc-bleed { min-height: 70svh; padding: 60px 0 50px; }
}

/* ---------- home: closing band (next circle + contact, one section) ---------- */
.home-close { position: relative; isolation: isolate; }
.home-close::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; -webkit-mask: url('../img/brand/doodle-tile.webp') 0 0 / 300px 318px repeat; mask: url('../img/brand/doodle-tile.webp') 0 0 / 300px 318px repeat; opacity: 0.045; }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 520px); gap: 40px 70px; align-items: center; }
.close-text h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-family: var(--font-hand); }
.close-note { margin-top: 26px; font-size: 1.1rem; }
.close-note a { color: var(--gold); }
.btn-row.start { justify-content: flex-start; }
@media (max-width: 860px) { .close-grid { grid-template-columns: 1fr; } }

/* ---------- marquee placement ---------- */
.marquee-sec { padding-block: 10px; }
.marquee-sec.kiss { margin-top: -54px; position: relative; z-index: 2; }
.logo-cloud.quiet img { height: 56px; filter: grayscale(1) brightness(1.6) contrast(0.9); opacity: 0.7; transition: filter 0.4s, opacity 0.4s; }
.logo-cloud.quiet img[src$=".svg"] { height: 40px; }
.logo-cloud.quiet .logo { height: 70px; }
.logo-cloud.quiet .logo:hover img { filter: none; opacity: 1; }


/* ---------- loops as a strip (vertical clips) ---------- */
.loops-strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(var(--gutter), calc((100% - var(--max)) / 2)) 24px; scrollbar-width: none; }
.loops-strip::-webkit-scrollbar { display: none; }
.loops-strip .loop { flex: 0 0 min(230px, 58vw); aspect-ratio: 9 / 16; scroll-snap-align: center; grid-column: auto; grid-row: auto; }

/* ---------- cinema: one vertical video with the story beside it ---------- */
.cinema-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 40px 70px; align-items: center; }
.cinema-screen { position: relative; }
.cinema-screen::before { content: ''; position: absolute; inset: -12%; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2, var(--violet)) 35%, transparent), transparent 65%); }
.cinema-screen .video.vertical { max-width: none; }
.cinema-lines { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.cinema-lines li { font-family: var(--font-hand); font-size: 1.2rem; color: var(--text-soft); padding-inline-start: 26px; position: relative; }
.cinema-lines li::before { content: '\2726'; position: absolute; inset-inline-start: 0; color: var(--gold); font-size: 0.85em; }
@media (max-width: 860px) { .cinema-grid { grid-template-columns: 1fr; } .cinema-screen { order: -1; max-width: 360px; margin-inline: auto; } }

/* ---------- crowdfunding ladder: the stickers along a gold line ---------- */
.ladder { list-style: none; margin: 0; padding: 30px 0 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; position: relative; }
.ladder::before { content: ''; position: absolute; inset-inline: 6%; top: 50%; height: 3px; background: var(--path); opacity: 0.35; border-radius: 3px; }
.ladder li { position: relative; rotate: calc((var(--i) - 8) * 1.2deg); transition: rotate 0.45s var(--ease-spring), transform 0.45s var(--ease-spring); }
.ladder li:hover { rotate: 0deg; transform: translateY(-8px) scale(1.06); z-index: 2; }
.ladder img { width: 140px; height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)); }
.ladder li:nth-last-child(-n+2) img { width: 190px; }
@media (max-width: 560px) { .ladder { gap: 12px 8px; } .ladder img { width: 96px; } .ladder li:nth-last-child(-n+2) img { width: 140px; } .ladder::before { display: none; } }


/* ---------- about: stats and values inside the intro ---------- */
.ab-stats { display: flex; gap: 28px 40px; flex-wrap: wrap; margin-top: 22px; }
.ab-stat b { display: block; font-size: 2.4rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ab-stat span { color: var(--text-mute); font-size: 0.95rem; }
.ab-values { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; font-family: var(--font-hand); font-size: 1.15rem; color: var(--lavender); }
.ab-values li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ab-values small { font-family: var(--font); color: var(--text-mute); font-size: 0.95rem; }
/* credits roll */
.credits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.credits li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); }
.credits .ab-team-emo { font-size: 1.6rem; margin: 0; width: 34px; text-align: center; }
.credits strong { display: block; font-size: 1.1rem; }
.credits strong::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-inline-end: 8px; vertical-align: 1px; }
.credits p { margin: 2px 0 0; color: var(--text-soft); font-size: 0.97rem; }
@media (max-width: 700px) { .credits { grid-template-columns: 1fr; gap: 6px; } }
/* 2 large + 4 small tiles */
.grid-24 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-24 > :nth-child(-n+2) { grid-column: span 2; aspect-ratio: 16 / 9; }
.grid-24 > :nth-child(n+3) { aspect-ratio: 1; }
.grid-24 > :nth-child(n+3) .tile-body { padding: 14px 16px; }
.grid-24 > :nth-child(n+3) h3 { font-size: 1.1rem; }
.grid-24 > :nth-child(n+3) p { display: none; }
@media (max-width: 700px) { .grid-24 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .grid-24 > :nth-child(-n+2) { grid-column: 1 / -1; } .grid-24 > :nth-child(n+3) .tile-tag { top: 10px; inset-inline-start: 10px; } }
/* quotes as pinned notes (light skins) */
.quotes.notes .quote-card.bare { background: none; border: 0; padding: 20px 26px 10px; }
.quotes.notes .quote-card.bare blockquote { font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.5; }
/* the songbook as an object */
.book-grid { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); gap: 40px 70px; align-items: center; }
.book { perspective: 1200px; }
.book-cover { position: relative; border-radius: 4px 12px 12px 4px; overflow: hidden; box-shadow: -14px 24px 50px -18px rgba(0, 0, 0, 0.8), inset 6px 0 12px -8px rgba(0, 0, 0, 0.5); transform: rotateY(-14deg) rotateX(2deg); transition: transform 0.6s var(--ease-out); }
.book:hover .book-cover { transform: rotateY(-6deg); }
.book-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0.14), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.18)); pointer-events: none; }
.book-cover-img { width: 100%; height: auto; display: block; }
.book-embed iframe { width: 100%; height: min(80vh, 900px); border: 0; border-radius: 14px; background: var(--night-800); margin-top: 20px; }
@media (max-width: 860px) { .book-grid { grid-template-columns: 1fr; } .book { max-width: 280px; margin-inline: auto; } .book-cover { transform: none; } }
/* video play disc sizes by role */
.grid .video .play { width: 64px; height: 64px; }
.grid .video .play svg { width: 26px; height: 26px; }
/* marquee after an inner hero */
.page-page .marquee-sec.kiss { margin-top: -40px; }


/* ---------- reading pages (terms, accessibility): a calm library ---------- */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px 60px; align-items: start; }
.doc-toc { position: sticky; top: calc(var(--header-h) + 30px); }
.doc-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; border-inline-start: 2px solid rgba(255, 255, 255, 0.12); }
.doc-toc a { display: block; padding: 6px 14px; color: var(--text-soft); text-decoration: none; font-size: 0.98rem; border-inline-start: 2px solid transparent; margin-inline-start: -2px; transition: color 0.2s, border-color 0.2s; }
.doc-toc a:hover { color: var(--gold); border-color: var(--gold); }
.doc-body { max-width: 66ch; }
.doc-sec + .doc-sec { margin-top: 44px; padding-top: 34px; border-top: 1px dashed rgba(255, 255, 255, 0.14); }
.doc-sec h2 { font-size: 1.6rem; }
.doc-sec .prose { font-size: 1.05rem; }
@media (max-width: 860px) { .doc { grid-template-columns: 1fr; } .doc-toc { position: static; } .doc-toc ul { display: flex; flex-wrap: wrap; border: 0; gap: 8px; } .doc-toc a { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 6px 12px; margin: 0; } }
.recipe-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; margin: 26px auto 0; }

/* ---------- one at a time (data-seq): the lit child ---------- */
.recipe li { transition: transform 0.5s var(--ease-spring); }
.recipe li::before { transition: transform 0.5s var(--ease-spring), text-shadow 0.4s; }
.recipe li.lit { transform: translateY(-6px); }
.recipe li.lit::before { transform: scale(1.25) rotate(-6deg); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 80%, transparent); }
.recipe li.lit strong { color: var(--accent); }
.recipe strong { transition: color 0.4s; }
.ladder li.lit { rotate: 0deg; transform: translateY(-10px) scale(1.1); z-index: 2; }
.ladder li.lit img { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 75%, transparent)) drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)); }
.ladder img { transition: filter 0.4s; }
.feature.lit { transform: translateY(-8px) rotate(-1deg); }
.feature.lit .feature-emoji { transform: translateY(-6px) rotate(-8deg) scale(1.2); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 70%, transparent)); }
.feature.lit h3 { color: var(--accent); }
.feature h3 { transition: color 0.4s; }

/* /sing: the book as the page's hero, one way in */
.book-hero { padding-top: calc(var(--header-h) + 40px); min-height: min(100svh, 900px); display: grid; align-items: center; }
.book-hero .book-grid { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); }
.book-hero .book-cover { display: block; animation: book-float 7s ease-in-out infinite; }
@keyframes book-float { 50% { translate: 0 -10px; } }
.book-eyebrow { margin: 0 0 4px; font-family: var(--font-hand); font-weight: 700; color: var(--accent-2, #c4b5fd); font-size: 1.2rem; }
.book-title { margin: 0 0 10px; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; }
.book-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.book-hero .btn-row .btn:first-child { font-size: 1.2rem; padding: 16px 34px; }
.book-feats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.book-feats li { display: flex; gap: 12px; align-items: flex-start; transition: transform 0.5s var(--ease-spring); }
.book-feats li > span { font-size: 1.7rem; line-height: 1.1; flex: none; transition: transform 0.5s var(--ease-spring); display: inline-block; }
.book-feats strong { display: block; color: var(--gold); font-family: var(--font-hand); font-size: 1.15rem; transition: color 0.4s, text-shadow 0.4s; }
.book-feats small { color: var(--text-soft); font-size: 0.95rem; line-height: 1.5; }
.book-feats li.lit { transform: translateY(-4px); }
.book-feats li.lit > span { transform: scale(1.3) rotate(-10deg); }
.book-feats li.lit strong { color: #fff1b8; text-shadow: 0 0 18px rgba(255, 215, 0, 0.7); }
.book-note { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--glass-border); color: var(--text-mute); font-size: 0.85rem; line-height: 1.6; max-width: 640px; }
@media (max-width: 860px) {
  .book-hero { padding-top: calc(var(--header-h) + 16px); min-height: 0; }
  .book-hero .book-grid { grid-template-columns: 1fr; gap: 24px; }
  .book-hero .book { max-width: 240px; }
  .book-hero .book-text { text-align: center; }
  .book-hero .btn-row { justify-content: center; }
  .book-hero .btn-row .btn:first-child { width: 100%; }
  .book-feats { grid-template-columns: 1fr; text-align: start; }
}
@media (prefers-reduced-motion: reduce) { .book-hero .book-cover { animation: none; } }

.certificate .cert-points { margin-top: 6px; font-weight: 800; color: #7a5a12; }
.certificate .cert-points:empty { display: none; }
.cert-actions { flex-wrap: wrap; }

/* ---------- /game ---------- */
.game-hero { padding: calc(var(--header-h) + 40px) 0 20px; min-height: min(86svh, 800px); display: grid; align-items: center; }
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px 60px; align-items: center; }
.game-cover { position: relative; display: block; border-radius: 26px; overflow: hidden; rotate: 2deg; box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 60px -14px rgba(124, 77, 255, 0.7);
  transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); animation: book-float 7s ease-in-out infinite; }
.game-cover:hover { rotate: 0deg; transform: scale(1.02); }
.game-cover img { width: 100%; height: auto; display: block; }
.game-cover-play { position: absolute; inset: auto 18px 18px auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #2a1400; box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6); animation: game-pulse 2.2s ease-out infinite; }
.game-cover-play svg { width: 26px; height: 26px; }
@keyframes game-pulse { to { box-shadow: 0 0 0 22px rgba(255, 215, 0, 0); } }
.game-play { font-size: 1.25rem; padding: 17px 38px; }
.game-path { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--font-hand); font-weight: 700; font-size: 1.1rem; }
.game-path li { display: flex; align-items: center; gap: 6px; }
.game-path li + li::before { content: '←'; color: var(--gold); margin-inline-end: 4px; }
.game-how { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
@media (max-width: 860px) {
  .game-hero { padding-top: calc(var(--header-h) + 16px); min-height: 0; }
  .game-grid { grid-template-columns: 1fr; }
  .game-cover { order: -1; rotate: 0deg; }
  .game-text { text-align: center; } .game-text .btn-row, .game-path { justify-content: center; }
  .game-play { width: 100%; }
  .game-how { grid-template-columns: 1fr; }
}
/* the stage: the game plays here, inside the page */
.game-stage-sec { padding: 10px 0 30px; scroll-margin-top: -10px; }
.game-wrap { width: min(100% - 2 * var(--gutter), 1500px); margin-inline: auto; }
.game-stage { position: relative; height: calc(100svh - var(--header-h) - 70px); min-height: 520px; border-radius: var(--radius-l); overflow: hidden; background: #0d0a1f;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 215, 0, 0.28), 0 0 70px -20px rgba(124, 77, 255, 0.55); }
.game-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0d0a1f; }
.game-poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; border: 0; padding: 20px; cursor: pointer; color: #fff; font: inherit; text-align: center;
  background: linear-gradient(180deg, rgba(20, 12, 50, 0.35), rgba(20, 12, 50, 0.85)), var(--poster) center / cover no-repeat; }
.game-poster strong { font-family: var(--font-hand); font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--gold); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); }
.game-poster small { font-family: var(--font-hand); color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; }
.game-poster-play { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #2a1400; animation: game-pulse 2.2s ease-out infinite; transition: transform 0.25s; }
.game-poster-play svg { width: 36px; height: 36px; }
.game-poster:hover .game-poster-play, .game-poster:focus-visible .game-poster-play { transform: scale(1.08); }
.game-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; padding-top: 12px; }
.game-bar-btn { background: none; border: 0; padding: 4px 2px; font: inherit; font-family: var(--font-hand); color: var(--text-soft); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 215, 0, 0.45); text-underline-offset: 5px; }
.game-bar-btn:hover { color: var(--gold); }
.game-stage:fullscreen { border-radius: 0; }
.game-on .fab { display: none; }
.game-direct { padding-top: calc(var(--header-h) + 8px); }
.game-direct .game-stage { height: calc(100svh - var(--header-h) - 62px); }
@media (max-width: 860px) {
  .game-stage-sec { padding-top: 0; }
  .game-wrap { width: 100%; }
  .game-stage { border-radius: 0; height: calc(100svh - var(--header-h)); min-height: 460px; box-shadow: none; }
  /* the phone is the game: fixed to the screen, the page under it does not scroll, no links under it */
  .game-direct { padding: 0; }
  .game-direct .game-stage { position: fixed; inset: 0; height: 100dvh; min-height: 0; z-index: 90; border-radius: 0; }
  .game-direct .game-bar { display: none; }
  body:has(.game-direct) { overflow: hidden; overscroll-behavior: none; }
  body:has(.game-direct) .site-header { z-index: 120; }
  /* the site menu steps aside; the game's pause menu brings it back ("תפריט האתר") */
  body:has(.game-direct):not(.game-nav) .site-header { transform: translateY(-130%) !important; }
}

/* ---------- the coming screening, above the archive ---------- */
.ns { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 26px 56px; align-items: center; padding: clamp(24px, 4vw, 48px);
  border-radius: 36px 36px 36px 12px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 6px rgba(14, 6, 41, 0.35), inset 0 0 0 7px color-mix(in srgb, var(--gold) 40%, transparent); }
.ns::before { content: ''; position: absolute; inset: -8%; z-index: -2; background: var(--bg) center / cover no-repeat; filter: blur(14px) saturate(1.4) brightness(0.6); animation: photo-drift 40s ease-in-out infinite alternate; }
.ns::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(43, 18, 80, 0.55), rgba(20, 8, 46, 0.8)); }
.ns-flyer { display: block; border-radius: 14px; overflow: hidden; rotate: -2.5deg; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 50px -10px rgba(255, 215, 0, 0.4); transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); }
.ns-flyer:hover { rotate: 0deg; transform: scale(1.03); }
.ns-flyer img { width: 100%; height: auto; display: block; }
.ns-eyebrow { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: #fff; }
.ns-logo { width: min(100%, 420px); height: auto; margin: -4px 0 0; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.6)); }
.ns-sub { margin: 6px 0 0; font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 800; color: #fff; }
.ns-facts { list-style: none; margin: 14px 0 0; padding: 0; }
.ns-facts li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: #fff; border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); }
.ns-facts li:last-child { border-bottom: 0; }
.ns-facts svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.ns-facts b { color: var(--gold); }
.ns-count { margin: 14px 0 18px; justify-content: flex-start; }
.ns .btn-row .btn:first-child { font-size: 1.2rem; padding: 16px 32px; }
@media (max-width: 860px) {
  .ns { grid-template-columns: 1fr; text-align: center; border-radius: 28px 28px 28px 10px; }
  .ns-flyer { width: min(70%, 300px); margin-inline: auto; }
  .ns-logo { margin-inline: auto; width: min(84%, 340px); }
  .ns-facts li { justify-content: flex-start; text-align: start; }
  .ns-count, .ns .btn-row { justify-content: center; }
  .ns .btn-row .btn:first-child { width: 100%; }
}


/* =====================================================================
   HOME: the cinema, the partners wall, the closing (next event + contact)
   ===================================================================== */
.home-cinema { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 0; background: linear-gradient(180deg, transparent, rgba(8, 3, 22, 0.78) 14%, rgba(28, 6, 20, 0.86) 60%, rgba(8, 3, 22, 0.8) 92%, transparent); }
.hc-beam { position: absolute; z-index: -1; top: -12%; width: 46%; height: 120%; pointer-events: none; opacity: 0; transform-origin: 50% 0; filter: blur(22px); transition: opacity 1.4s ease;
  background: linear-gradient(180deg, rgba(255, 224, 150, 0.3), rgba(255, 190, 90, 0.07) 58%, transparent); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: hc-sway 13s ease-in-out infinite alternate; }
.hc-beam.b1 { inset-inline-start: 4%; } .hc-beam.b2 { inset-inline-end: 0; animation-duration: 17s; animation-direction: alternate-reverse; background: linear-gradient(180deg, rgba(255, 120, 170, 0.28), rgba(255, 120, 170, 0.06) 58%, transparent); }
.home-cinema.in .hc-beam { opacity: 1; }
@keyframes hc-sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.hc-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 34px 60px; align-items: center; }
.hc-text h2 { font-family: var(--font-hand); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; margin: 6px 0 12px; }
.hc-tickets { display: grid; gap: 12px; margin: 22px 0 24px; }
.hc-ticket { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 20px 12px 22px; border-radius: 16px; text-decoration: none; color: #2a1400;
  background: linear-gradient(160deg, #fff4d6, #ffd98a); box-shadow: 0 18px 34px -20px rgba(0, 0, 0, 0.9); transition: transform 0.45s var(--ease-spring), box-shadow 0.4s;
  -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat; }
.hc-ticket:hover { transform: translateY(-4px) rotate(-0.6deg); }
.hc-ticket-logo { display: grid; place-items: center; height: 58px; padding-inline-end: 16px; border-inline-end: 2px dashed rgba(42, 20, 0, 0.35); }
.hc-ticket-logo img { max-height: 54px; max-width: 96px; width: auto; height: auto; object-fit: contain; }
.hc-ticket.dark .hc-ticket-logo img { filter: brightness(0) saturate(100%); opacity: 0.85; }
.hc-ticket-text strong { display: block; font-size: 1.12rem; line-height: 1.2; }
.hc-ticket-text small { display: block; font-family: var(--font-hand); font-weight: 700; font-size: 1.05rem; color: #8a3b00; }
.hc-ticket em { font-style: normal; font-weight: 800; font-size: 0.8rem; padding: 4px 12px; border-radius: 999px; background: #e0322f; color: #fff; animation: hc-pulse 2.4s ease-in-out infinite; }
@keyframes hc-pulse { 50% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(224, 50, 47, 0.18); } }

.hc-screen { position: relative; margin: 0; padding: 18px 0; }
.hc-photo { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 9.4; border: 6px solid #12060f; box-shadow: 0 0 0 2px rgba(255, 207, 90, 0.55), 0 0 90px -10px rgba(255, 190, 90, 0.55), 0 50px 80px -40px rgba(0, 0, 0, 0.95); }
.hc-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 16s ease-out; }
.home-cinema.in .hc-photo img { transform: scale(1.13); }
.hc-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 3, 16, 0.7)), radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(10, 3, 16, 0.55)); }
.hc-screen figcaption { position: absolute; inset-inline: 0; bottom: 34px; z-index: 1; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.4rem); color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.hc-bulbs { position: absolute; inset-inline: 10px; display: flex; justify-content: space-between; z-index: 2; }
.hc-bulbs.top { top: 7px; } .hc-bulbs.bottom { bottom: 7px; }
.hc-bulbs i { width: 9px; height: 9px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 10px 3px rgba(255, 200, 90, 0.9); animation: hc-bulb 1.8s steps(1) infinite; }
.hc-bulbs i:nth-child(3n + 1) { animation-delay: -0.6s; } .hc-bulbs i:nth-child(3n + 2) { animation-delay: -1.2s; }
@keyframes hc-bulb { 0%, 66% { opacity: 1; } 33% { opacity: 0.25; } }
.hc-popcorn { position: absolute; z-index: 3; width: clamp(84px, 11vw, 138px); inset-inline-end: -26px; bottom: -22px; transform: rotate(9deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.7)); }
.hc-kernels circle { fill: #fff4cf; stroke: #f0c65a; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: hc-pop 3.4s var(--ease-spring) infinite; }
.hc-kernels circle:nth-child(2n) { animation-delay: -1.1s; fill: #ffe9a6; } .hc-kernels circle:nth-child(3n) { animation-delay: -2.2s; }
@keyframes hc-pop { 0%, 70%, 100% { transform: translateY(0) scale(1); } 80% { transform: translateY(-16px) scale(1.18) rotate(20deg); } 90% { transform: translateY(2px) scale(0.96); } }

.hc-strip { position: relative; margin-top: clamp(34px, 5vw, 60px); padding: 26px 0; background: #07030d; overflow: hidden; direction: ltr;
  border-block: 2px solid rgba(255, 207, 90, 0.35); }
.hc-strip::before, .hc-strip::after { content: ''; position: absolute; inset-inline: 0; height: 14px; background: radial-gradient(circle, rgba(255, 244, 214, 0.9) 0 4.5px, transparent 5px) 0 50% / 26px 14px repeat-x; opacity: 0.55; }
.hc-strip::before { top: 6px; } .hc-strip::after { bottom: 6px; }
.hc-reel { display: flex; gap: 18px; width: max-content; animation: hc-roll 40s linear infinite; padding-inline-end: 18px; }
.hc-strip:hover .hc-reel, .hc-strip:focus-within .hc-reel { animation-play-state: paused; }
@keyframes hc-roll { to { transform: translateX(calc(-100% / 6)); } }
.hc-frame { position: relative; flex: none; width: clamp(130px, 13vw, 176px); aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; direction: rtl; background: #12060f; border: 2px solid rgba(255, 255, 255, 0.12); transition: transform 0.45s var(--ease-spring), border-color 0.3s; }
.hc-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.95) brightness(0.92); transition: filter 0.4s, transform 0.8s var(--ease-out); }
.hc-frame span { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 10px 9px; text-align: center; font-weight: 800; color: #fff; background: linear-gradient(180deg, transparent, rgba(7, 3, 13, 0.92)); }
.hc-frame em { display: inline-block; margin-inline-start: 6px; font-style: normal; font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; background: #e0322f; }
.hc-frame:hover, .hc-frame:focus-visible { transform: translateY(-6px) scale(1.04); border-color: var(--gold); }
.hc-frame:hover img, .hc-frame.next img { filter: none; }
.hc-frame.next { border-color: var(--gold); box-shadow: 0 0 34px -6px rgba(255, 207, 90, 0.8); }
@media (max-width: 900px) { .hc-grid { grid-template-columns: 1fr; } .hc-screen { order: -1; } .hc-popcorn { inset-inline-end: -6px; } .hc-text { text-align: center; } .hc-text .btn-row { justify-content: center; } .hc-ticket { text-align: start; grid-template-columns: 88px minmax(0, 1fr) auto; padding-inline: 18px; gap: 12px; } .hc-ticket-logo img { max-width: 74px; } }

/* ---------- partners: logos in the open, each with its own light. No frames. ---------- */
.home-partners { position: relative; }
.home-partners .section-head h2 { font-family: var(--font-hand); }
.hp-wall { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(26px, 3.4vw, 46px) clamp(30px, 4.4vw, 70px); }
.hp-wall li { flex: 0 1 230px; min-width: 0; }
.hp-card { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; text-decoration: none; color: var(--text); isolation: isolate; transition: transform 0.55s var(--ease-spring); }
.hp-plaque { position: relative; display: grid; place-items: center; width: 100%; height: 150px; margin-bottom: 10px; }
.hp-plaque::before { content: ''; position: absolute; z-index: -1; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.92), rgba(255, 244, 214, 0.55) 55%, transparent); filter: blur(14px); opacity: 0.85; transition: opacity 0.5s, transform 0.6s var(--ease-spring); }
.hp-plaque.dark::before { background: radial-gradient(closest-side, rgba(168, 110, 255, 0.5), rgba(120, 70, 220, 0.22) 55%, transparent); }
.hp-plaque img { max-width: 92%; max-height: 124px; width: auto; height: auto; object-fit: contain; border-radius: 10px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55)); transition: transform 0.6s var(--ease-spring), filter 0.4s; animation: hp-float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
@keyframes hp-float { 50% { transform: translateY(-7px); } }
.hp-card strong { font-size: 1.15rem; line-height: 1.25; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
.hp-card small { font-family: var(--font-hand); font-size: 1.02rem; line-height: 1.35; color: var(--gold); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
.hp-wall li.lit .hp-card, a.hp-card:hover, a.hp-card:focus-visible { transform: translateY(-6px); }
.hp-wall li.lit .hp-plaque::before, a.hp-card:hover .hp-plaque::before { opacity: 1; transform: scale(1.18); }
.hp-wall li.lit .hp-plaque img, a.hp-card:hover .hp-plaque img { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(255, 207, 90, 0.75)); }
@media (max-width: 700px) { .hp-wall { gap: 22px 14px; } .hp-wall li { flex: 1 1 140px; max-width: calc(50% - 7px); } .hp-plaque { height: 108px; } .hp-plaque img { max-height: 90px; } .hp-card strong { font-size: 1rem; } .hp-card small { font-size: 0.92rem; } }
@media (prefers-reduced-motion: reduce) { .hp-plaque img { animation: none; } }

/* ---------- closing: the next event (Tangled language) + contact ---------- */
.close-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 30px 44px; align-items: stretch; }
.nx-card { position: relative; isolation: isolate; overflow: hidden; height: 100%; padding: clamp(24px, 3.4vw, 44px); border-radius: 34px; color: #fff; border: 1px solid rgba(255, 207, 90, 0.5);
  background: linear-gradient(165deg, rgba(74, 28, 122, 0.92), rgba(27, 12, 54, 0.95)); box-shadow: inset 0 0 0 6px rgba(19, 10, 38, 0.4), inset 0 0 0 7px rgba(255, 207, 90, 0.3), 0 44px 80px -44px rgba(0, 0, 0, 0.95), 0 0 80px -34px rgba(255, 207, 90, 0.55); }
.nx-back { position: absolute; inset: -8%; z-index: -2; background: var(--img) center 42% / cover no-repeat; filter: blur(5px) saturate(1.4); animation: nx-drift 40s ease-in-out infinite alternate; }
.nx-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 80% at 70% 40%, rgba(58, 22, 104, 0.82), rgba(43, 18, 80, 0.6) 60%, rgba(19, 10, 38, 0.72)); }
@keyframes nx-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 2%); } }
.nx-lanterns { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nx-lanterns i { position: absolute; bottom: -40px; left: var(--x); width: calc(20px * var(--s)); height: calc(26px * var(--s)); border-radius: 22% 22% 36% 36%; background: linear-gradient(180deg, #fff3c4, #ffc653 60%, #ff9d3c); box-shadow: 0 0 24px 7px rgba(255, 190, 80, 0.5); opacity: 0; animation: nx-rise var(--d) linear infinite; animation-delay: var(--delay); }
@keyframes nx-rise { 0% { transform: translateY(0) rotate(-4deg); opacity: 0; } 12% { opacity: 0.85; } 80% { opacity: 0.7; } 100% { transform: translateY(-620px) translateX(30px) rotate(5deg); opacity: 0; } }
.nx-card .eyebrow { color: #ffe9b0; }
.nx-logo { width: min(100%, 380px); height: auto; margin: 6px 0 2px; filter: drop-shadow(0 10px 26px rgba(19, 10, 38, 0.9)); animation: nx-float 7s ease-in-out infinite; }
@keyframes nx-float { 50% { transform: translateY(-6px); } }
.nx-sub { margin: 0 0 12px; font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: #fff; text-shadow: 0 2px 14px rgba(19, 10, 38, 0.9); }
.nx-facts { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; font-size: 1.08rem; font-weight: 700; text-shadow: 0 2px 12px rgba(19, 10, 38, 0.95); }
.nx-facts li::before { content: '✦'; color: var(--gold); margin-inline-end: 8px; }
.nx-card .countdown { justify-content: flex-start; margin-top: 18px; }
.nx-card .countdown div { background: rgba(19, 10, 38, 0.62); border-color: rgba(255, 207, 90, 0.4); backdrop-filter: blur(6px); text-align: center; }
.nx-card .countdown span { color: #f3e9ff; }
.nx-btns { margin-top: 22px; align-items: center; }
.nx-price { font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: #ffe9b0; text-shadow: 0 2px 12px rgba(19, 10, 38, 0.95); }
.nx-card.plain h2 { font-family: var(--font-hand); font-size: clamp(2rem, 4vw, 3rem); }
.ct { display: flex; flex-direction: column; }
.ct h2 { font-family: var(--font-hand); font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.1; margin: 6px 0 10px; }
.ct .lead { margin: 0 0 18px; }
.ct-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.ct-way:first-child { grid-column: 1 / -1; }
.ct-way { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 12px 14px; border-radius: 18px; text-decoration: none; color: var(--text); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 0.45s var(--ease-spring), border-color 0.3s, background 0.3s; }
.ct-way svg { flex: none; width: 26px; height: 26px; color: var(--gold); transition: transform 0.45s var(--ease-spring); }
.ct-way span { min-width: 0; display: grid; }
.ct-way small { color: var(--text-soft); font-size: 0.8rem; }
.ct-way strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-way:hover, .ct-way:focus-visible, .ct-way.lit { transform: translateY(-4px); border-color: rgba(255, 207, 90, 0.8); background: rgba(255, 207, 90, 0.1); }
.ct-way:hover svg, .ct-way.lit svg { transform: scale(1.18) rotate(-8deg); }
.ct-form { flex: 1; }
@media (max-width: 1000px) { .close-grid { grid-template-columns: 1fr; } .ct-ways { grid-template-columns: 1fr; } .ct-way strong { white-space: normal; overflow-wrap: anywhere; } }
@media (max-width: 600px) { .nx-card { border-radius: 26px; } .nx-card .countdown { justify-content: center; } .nx-card { text-align: center; } .nx-facts li::before { display: none; } .nx-btns { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .hc-beam, .hc-bulbs i, .hc-kernels circle, .hc-reel, .hc-ticket em, .nx-back, .nx-lanterns i, .nx-logo, .hc-photo img { animation: none !important; transition: none !important; } .nx-lanterns i { display: none; } .hc-strip { overflow-x: auto; } }

/* ---------- the game's hall of fame on site pages (block game_board) ---------- */
.gb-list { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; }
.gb-list li { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid rgba(255, 215, 0, 0.16); }
.gb-list li:last-child { border-bottom: 0; }
.gb-rank { width: 30px; flex: none; text-align: center; color: var(--text-mute); font-weight: 700; font-variant-numeric: tabular-nums; }
.gb-top .gb-rank { font-size: 1.25rem; }
.gb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-top .gb-name { font-family: var(--font-hand); font-weight: 600; font-size: 1.1rem; }
.gb-pts { color: var(--gold); font-variant-numeric: tabular-nums; }
.gb-empty { justify-content: center; color: var(--text-mute); }
.gb-note { text-align: center; color: var(--text-mute); font-size: 0.95rem; margin-top: 18px; }
.gb-more { text-align: center; margin-top: 18px; }

/* stories with sound: a tap on the speaker turns the sound of one clip on */
.loop-sound { position: absolute; z-index: 2; top: 10px; inset-inline-end: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(10, 6, 30, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; }
.loop-sound[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); }
/* a flyer on top of its own painting, blurred and alive */
.has-backdrop { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 90px); }
.media-backdrop { position: absolute; inset: -40px; background-size: cover; background-position: center 30%; filter: blur(22px) saturate(1.15) brightness(0.55); transform: scale(1.08); animation: backdropDrift 26s ease-in-out infinite alternate; }
.has-backdrop > .wrap { position: relative; }
@keyframes backdropDrift { to { transform: scale(1.16) translateY(-2%); } }
@media (prefers-reduced-motion: reduce) { .media-backdrop { animation: none; } }

/* phone clips: one row, every clip keeps its own shape */
.clips-note { margin: -6px 0 0; color: var(--ink-soft, rgba(255, 255, 255, 0.72)); font-size: 0.95rem; }
.clips { --h: clamp(250px, 30vw, 400px); display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 18px max(var(--gutter), calc((100% - var(--max)) / 2)) 26px; scrollbar-width: none; }
.clips::-webkit-scrollbar { display: none; }
.clips .clip, .clips .clip:first-child { flex: 0 0 auto; height: var(--h); width: calc(var(--h) * var(--r)); aspect-ratio: auto; grid-column: auto; grid-row: auto; scroll-snap-align: center; }
.clips.one { justify-content: center; --h: clamp(250px, 38vw, 480px); }
.clips .clip figcaption { inset-inline-end: 14px; font-size: 1.1rem; line-height: 1.25; }
@media (max-width: 700px) {
  .clips { --h: 210px; gap: 12px; }
  .clips .clip.tall { --h: 380px; height: 380px; width: calc(380px * var(--r)); }
  .clips.one .clip:not(.tall) { width: 100%; height: auto; aspect-ratio: var(--r); }
  .clips .clip:not(.tall) { width: min(84vw, calc(var(--h) * var(--r))); height: auto; aspect-ratio: var(--r); }
}

/* sweep 29.9: phone targets and the smallest texts */
@media (max-width: 700px) { .link-arrow { min-height: 44px; } }
.tile-polaroid .tile-tag { font-size: 0.8rem; }

/* 3 or more clips: all of them at once as a board (Daniel: blocks, not one at a time).
   Only wide clips: rows of three, the last row centred. Wide and tall together: a 4-column board, wide clips take 2 columns, tall ones 2 rows. */
.clips.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; overflow: visible; padding: 18px max(var(--gutter), calc((100% - var(--max)) / 2)) 26px; }
.clips.grid .clip, .clips.grid .clip:first-child { flex: 0 0 calc((100% - 28px) / 3); width: auto; height: auto; aspect-ratio: 16 / 9; margin: 0; }
.clips.grid .clip video { width: 100%; height: 100%; object-fit: cover; }
.clips.grid.mixed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
.clips.grid.mixed .clip, .clips.grid.mixed .clip:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.clips.grid.mixed .clip.tall { grid-column: span 1; grid-row: span 2; aspect-ratio: auto; height: 100%; }
@media (max-width: 700px) {
  .clips.grid { gap: 8px; padding-inline: var(--gutter); }
  .clips.grid .clip, .clips.grid .clip:first-child, .clips.grid .clip.tall, .clips.grid .clip:not(.tall) { flex: 0 0 calc((100% - 8px) / 2); width: auto; height: auto; aspect-ratio: 16 / 9; }
  .clips.grid.mixed { grid-template-columns: 1fr 1fr; }
  .clips.grid.mixed .clip, .clips.grid.mixed .clip:not(.tall) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .clips.grid.mixed .clip.tall { grid-column: span 1; grid-row: span 1; aspect-ratio: 9 / 16; height: auto; }
}

/* phones: a landscape clip takes the full width, tall clips pair up; less empty space around the clips (Daniel, 29.9) */
@media (max-width: 700px) {
  .clips.grid:not(.mixed) .clip:not(.tall) { flex-basis: 100%; }
  .clips.grid:not(.mixed) .clip.tall { flex-basis: calc((100% - 8px) / 2); aspect-ratio: 9 / 16; }
  .clips.grid { padding-block: 10px 14px; }
  .clips-sec.section-tight { padding-block: 26px 18px; }
}

/* full-bleed showcase: the photo fades out into the page itself (the page behind has stars and doodles, so fading to a
   flat colour left a hard band at the top and bottom - Daniel, 30.9) */
.sc-bleed .sc-photo { inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%); }
.sc-bleed::after { background: linear-gradient(180deg, transparent 0%, rgba(14, 6, 41, 0.2) 30%, rgba(14, 6, 41, 0.45) 62%, transparent 100%); }
@media (max-width: 700px) { .sc-bleed .sc-photo { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%); } }