/* =========================================================
   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: clamp(520px, 72vh, 760px); 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: 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 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%; }
}