/* Shared XP Dimension look: the landing page's chrome (nav, footer, type,
   colour) carried onto every page. Loaded after style.css. */
.xp-site {
  --xp-bg: #050507;
  --xp-surface: #100d18;
  --xp-card: #0c0a12;
  --xp-line: #ffffff30;
  --xp-line-soft: #ffffff1c;
  --xp-text: #e4e1e9;
  --xp-label: #c2bace;
  --xp-lilac: #b29aff;
  --xp-lilac-soft: #d8c8ff;
  --text-muted: #b5afc3;
  --accent: #b29aff;
  --accent-2: #d0bcff;
  --accent-glow: #8d5bea40;
  background: var(--xp-bg);
  color: #fff;
}
.xp-site main { margin-top: 0; }
.xp-site .navbar { background: linear-gradient(#08080dee, #08080d50); border: 0; }
.xp-site .nav-inner { max-width: none; height: 84px; padding-inline: 4vw; }
.xp-site .nav-logo img { height: 42px; }
.xp-site .nav-links { gap: 2rem; }
.xp-site .nav-links a { color: #e5e2ef; }
.xp-site .nav-links a[aria-current] { color: #fff; }
.xp-site .nav-links a[aria-current]::after { width: 100%; }
.xp-site :focus-visible { outline: 2px solid #d3caff; outline-offset: 6px; }

.xp-site .footer { padding: 65px 5.5vw 30px; background: var(--xp-surface); border-top: 0; }
.xp-site .footer-inner { max-width: none; padding-bottom: 50px; align-items: center; }
.footer-logo { display: block; margin-bottom: 20px; }
.footer-logo img { display: block; height: auto; }
.xp-site .footer-links a, .xp-site .footer-brand a { color: #d0c5df; }
.footer-legal { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid #ffffff25; padding-top: 28px; font-size: .8rem; color: #a99cb9; }
.footer-legal nav { display: flex; gap: 32px; }
.footer-legal a { color: #ded3e9; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 2000; background: #171020; padding: 14px 24px; color: #fff; }
.skip-link:focus { top: 15px; }

/* ---------- Sub pages ---------- */
.section-label { display: flex; justify-content: space-between; align-items: center; color: var(--xp-label); font-size: .72rem; letter-spacing: .12em; margin-bottom: 16px; }
.tour-link { color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 30px; width: fit-content; min-width: 185px; padding-block: 12px; border-bottom: 1px solid #b0a4da; font-size: .8rem; letter-spacing: .05em; margin-top: 24px; }
.tour-link:hover { color: #c9bbff; }
.tour-link span { font-size: 1.3rem; }

/* The quote is the first thing a visitor gets: a thought before the content. */
.page-intro { position: relative; isolation: isolate; overflow: hidden; min-height: 88svh; display: flex; flex-direction: column; justify-content: center; padding: 150px 5.5vw 120px; }
.page-intro::before {
  content: ''; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 42% at 76% 44%, #7c4dd62e, transparent 70%),
    radial-gradient(ellipse 22% 20% at 80% 72%, #ff8a3d14, transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 110%, #2a1c4a40, transparent 70%);
  animation: intro-breathe 11s ease-in-out infinite alternate;
}
.page-intro::after { content: ''; position: absolute; inset: auto 0 0; height: 140px; z-index: -1; background: linear-gradient(transparent, var(--xp-bg)); }
@keyframes intro-breathe { from { opacity: .75; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
.page-intro .section-label { width: min(100%, 1180px); }
.intro-question { color: var(--xp-label); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 26px; }
.intro-quote { max-width: 17.5em; font-size: clamp(2.3rem, 4.6vw, 4.6rem); line-height: 1.1; letter-spacing: -.05em; font-weight: 500; color: #f4f1f8; }
.intro-quote em { font-style: normal; color: #cdbcff; }
.intro-quote .word { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.25em); animation: word-in 1.1s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes word-in { to { opacity: 1; filter: blur(0); transform: none; } }
.page-intro .scroll-cue { position: absolute; bottom: 34px; left: 5.5vw; color: #d7d1e5; font-size: .75rem; display: flex; gap: 25px; align-items: center; opacity: 0; animation: word-in 1s ease 1.8s forwards; }
.page-intro .scroll-cue span { font-size: 1.35rem; }
.page-intro.is-compact { min-height: 0; padding-bottom: 40px; }
.page-intro.is-compact h1 { font-size: clamp(2.6rem, 4.4vw, 5rem); letter-spacing: -.055em; font-weight: 500; }
.page-intro.is-compact p { color: var(--xp-text); margin-top: 18px; max-width: 620px; }

.page-body { width: min(100% - 11vw, 1320px); margin: 0 auto; padding: 20px 0 130px; scroll-margin-top: 90px; }
.page-body > .section-label { border-bottom: 1px solid var(--xp-line); padding-bottom: 16px; margin-bottom: 36px; }

/* Games: equal cards, one per title */
.xp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.xp-card { position: relative; display: flex; flex-direction: column; background: var(--xp-card); border: 1px solid var(--xp-line-soft); border-radius: 6px; overflow: hidden; transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease; }
.xp-card:hover, .xp-card:focus-within { border-color: #b29aff66; transform: translateY(-3px); box-shadow: 0 24px 60px -24px #7c4dd666; }
.xp-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #09070e; }
.xp-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.xp-card-media .backdrop { object-fit: cover; filter: blur(28px) saturate(1.2) brightness(.35); transform: scale(1.2); }
.xp-card:hover .xp-card-media img:not(.backdrop) { transform: scale(1.035); }
.xp-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 60%, #0c0a12cc); pointer-events: none; }
.xp-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.xp-card-meta { color: var(--xp-label); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.xp-card h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.035em; margin-bottom: 12px; }
.xp-card p { color: #d6d1de; font-size: .95rem; line-height: 1.7; }
.xp-card .tour-link { margin-top: auto; padding-top: 22px; }
.xp-card .tour-link::after { content: ''; position: absolute; inset: 0; }

/* Compositions: an album-style tracklist */
.xp-site .compositions-list { max-width: none; margin: -36px 0 0; padding: 0; gap: 0; }
.xp-site .composition-item { gap: 22px; padding: 22px 18px; background: transparent; border: 0; border-bottom: 1px solid var(--xp-line); border-radius: 0; cursor: pointer; transition: background .35s ease; }
.xp-site .composition-item:hover { background: linear-gradient(90deg, #b29aff0d, transparent 70%); border-color: var(--xp-line); }
.xp-site .composition-item.playing { background: linear-gradient(90deg, #b29aff17, transparent 80%); border-color: var(--xp-line); box-shadow: none; }
.composition-index { width: 2ch; color: var(--xp-label); font-size: .75rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.xp-site .composition-play { width: 46px; height: 46px; min-width: 46px; background: transparent; border: 1px solid #d0c0ff80; color: #fff; font-size: .85rem; }
.xp-site .composition-play:hover, .xp-site .composition-item.playing .composition-play { background: var(--xp-lilac); border-color: var(--xp-lilac); color: #100a20; box-shadow: 0 6px 30px #8d5bea40; transform: none; }
.xp-site .composition-info h4 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.xp-site .composition-info span { color: var(--xp-label); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.xp-site .composition-time { color: var(--xp-label); opacity: .7; }
.xp-site .composition-waveform { height: 56px; opacity: .55; margin-top: 4px; }

/* Contact */
.xp-site .contact-layout { max-width: none; padding: 0; gap: 7vw; grid-template-columns: 1fr 1.1fr; }
.xp-site .contact-about h2, .xp-site .contact-form-section h2 { font-size: clamp(1.9rem, 2.8vw, 2.8rem); font-weight: 500; letter-spacing: -.05em; margin-bottom: 20px; }
.xp-site .contact-about p, .xp-site .contact-form-section > p { color: var(--xp-text); line-height: 1.75; }
.xp-site .contact-email-link { color: var(--xp-lilac-soft); display: inline-block; margin-top: 8px; border-bottom: 1px solid #b0a4da; padding-bottom: 6px; }
.xp-site .form-group label { color: var(--xp-label); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.xp-site .form-group label span { color: var(--xp-lilac); }
.xp-site .form-group input, .xp-site .form-group textarea { background: var(--xp-card); border: 1px solid var(--xp-line-soft); border-radius: 6px; padding: .9rem 1rem; }
.xp-site .form-group input:focus, .xp-site .form-group textarea:focus { border-color: #b29aff99; box-shadow: 0 0 0 4px #b29aff14; }
.xp-site .form-group textarea { min-height: 160px; }
.xp-site .btn-submit { background: var(--xp-lilac); color: #100a20; border: 1px solid #d0c0ff; font-weight: 800; padding: 15px 30px; box-shadow: 0 6px 40px #8d5bea40; }
.xp-site .btn-submit:hover { background: #d0bcff; transform: none; }
.offer-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-top: 110px; padding-top: 40px; border-top: 1px solid var(--xp-line); }
.offer-row h2 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 500; letter-spacing: -.05em; }
.offer-row p { color: var(--xp-text); margin-top: 8px; }
.offer-row .tour-link { margin-top: 0; }
.xp-site .offer-form-container { max-width: 640px; margin: 0; padding: 0; }

/* Legal */
.xp-site .legal-content { max-width: 820px; margin: 0; padding: 0; }
.xp-site .legal-content h2 { font-size: 2rem; font-weight: 500; letter-spacing: -.045em; }
.xp-site .legal-content h3 { font-size: 1.2rem; font-weight: 600; }
.xp-site .legal-content p, .xp-site .legal-content ul { color: var(--xp-text); }
.xp-site .lang-switch button { color: var(--xp-label); border: 1px solid transparent; border-radius: 25px; padding: .4rem 1rem; }
.xp-site .lang-switch button.active { color: #fff; background: transparent; border-color: #ffffff40; }

@media (max-width: 1200px) {
  .xp-site .nav-links { gap: 1.1rem; }
  .xp-site .nav-right { gap: 1rem; }
}
@media (max-width: 768px) {
  .xp-site .nav-inner { height: 70px; padding-inline: 22px; }
  .xp-site .nav-logo img { height: 30px; }
  .xp-site .nav-right { margin-left: auto; }
  .xp-site .nav-links { background: #100c18fa; width: min(300px, 85vw); padding-top: 100px; gap: 22px; }
  .xp-site .footer { padding: 45px 24px 28px; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }
  .footer-legal nav { order: -1; width: 100%; justify-content: center; }
  .page-intro { min-height: 82svh; padding: 120px 24px 100px; }
  .page-intro.is-compact { padding-bottom: 24px; }
  .intro-quote { font-size: clamp(2rem, 9vw, 3rem); }
  .page-intro .scroll-cue { left: 24px; bottom: 26px; }
  .page-body { width: calc(100% - 48px); padding-bottom: 90px; }
  .xp-site .contact-layout { grid-template-columns: 1fr; gap: 60px; }
  .xp-site .composition-item { gap: 14px; padding: 18px 4px; }
  .composition-index { display: none; }
  .offer-row { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-intro::before, .intro-quote .word, .page-intro .scroll-cue { animation: none; opacity: 1; filter: none; transform: none; }
}