/* Fiction homepage: venue footage, clear identity and a dated event archive. */
body { --grey: #9999a6; }
section[id] { scroll-margin-top: 88px; }
a:focus-visible, button:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 6px; }
.nav { background: linear-gradient(180deg,rgba(5,5,7,.7),transparent); }
.nav-ticket-btn { background: #f0f0f5; color: #101015 !important; box-shadow: none; }
.nav-ticket-btn:hover { box-shadow: none; }
.hero { min-height: 690px; min-height: min(850px,92svh); justify-content: flex-end; text-align: left; padding: 170px 40px 100px; }
.hero-content { width: 100%; max-width: 1020px; }
.hero-bg::after { background: linear-gradient(180deg,rgba(5,5,7,.2) 0%,rgba(5,5,7,.15) 24%,rgba(5,5,7,.62) 62%,#0a0a0f 100%); }
.hero-video { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.hero-address { font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #e2e2e9; margin: 0 0 25px 5px; }
.hero-address span { padding: 0 13px; color: #a7a7b5; }
.hero h1.hero-wordmark { font-size: clamp(86px,18vw,208px); line-height: .8; letter-spacing: -.065em; font-weight: 700; margin: 0 0 45px -7px; color: #fafafa; }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 30px; border-top: 1px solid rgba(255,255,255,.3); padding-top: 28px; }
.hero-intro { font-size: clamp(21px,2.5vw,29px); line-height: 1.4; font-weight: 400; letter-spacing: -.6px; color: #f0f0f5; }
.hero-actions { animation: none; opacity: 1; align-items: center; justify-content: flex-start; gap: 30px; }
.hero-actions .btn { border-radius: 3px; padding: 16px 25px; gap: 30px; background: #f0f0f5; color: #101015; box-shadow: none; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 15px; }
.hero-actions .btn:hover { background: #d9ccfa; box-shadow: none; transform: translateY(-2px); }
.hero-booking { color: #f0f0f5; font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); padding: 9px 0; }
.hero-booking span { padding-left: 12px; }
.hero-booking:hover { color: #d9ccfa; }
.hero-credit { right: 40px; bottom: 22px; font-size: 9px; letter-spacing: 1px; color: #a2a2ad; }
.events-section { padding: 65px 0 85px; }
.events-header { margin-bottom: 34px; }
.section-label { letter-spacing: 2px; color: #bbb7ca; margin-bottom: 12px; font-size: 10px; }
.events-header .section-title { font-size: clamp(32px,4vw,44px); margin-bottom: 0; letter-spacing: -1.5px; }
.view-all-link { color: #d3d0df; font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 13px; }
.events-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; max-width: none; margin: 0; }
.event-card { border: 0; border-radius: 0; background: transparent; display: flex; flex-direction: column; }
.event-card:hover { transform: translateY(-4px); box-shadow: none; }
.event-img { height: auto; aspect-ratio: 2160 / 1220; border-radius: 4px; background: #15151d; }
.event-img-bg { display: block; object-fit: cover; }
.event-info { padding: 19px 0 0; display: flex; flex-direction: column; flex: 1; }
.event-date-line { font-size: 11px; color: #bab6c6; margin-bottom: 9px; }
.event-name { font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: -.35px; margin-bottom: 17px; }
.event-meta { padding-top: 14px; margin-top: auto; border-top: 1px solid #292832; gap: 10px; }
.event-time { font-size: 11px; font-weight: 400; color: #b2aebd; }
.event-ticket-link { font-size: 11px; text-transform: none; letter-spacing: 0; color: #ded2f7; }
.recent-section { background: #0a0a0f; padding: 0 0 85px; }
.recent-section .section-inner { border-top: 1px solid #292832; padding-top: 55px; }
.recent-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.recent-artwork { aspect-ratio: 2160 / 1220; overflow: hidden; background: #15151d; border-radius: 4px; }
.recent-artwork img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-meta { display: flex; justify-content: space-between; gap: 8px; color: #b2aebd; font-size: 10px; margin: 15px 0 8px; }
.recent-meta span { color: #898593; }
.recent-card h3 { font-family: 'Space Grotesk',sans-serif; font-size: 17px; line-height: 1.35; font-weight: 500; letter-spacing: -.3px; }
.venue-features { gap: 8px 16px; }
.venue-feature { background: none; border: 0; border-top: 1px solid #292832; border-radius: 0; padding: 12px 0; font-size: 12px; }
.venue-feature .icon, .func-icon { display: none; }
.func-card { border-radius: 4px; min-height: 120px; justify-content: center; }
.socials-section::before { display: none; }
@media (max-width:900px) {
  .hero { min-height: 700px; min-height: 86svh; padding-bottom: 85px; }
  .events-grid, .recent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; }
  .hero-actions { gap: 20px; }
}
@media (max-width:600px) {
  .hero { min-height: 650px; min-height: 85svh; padding: 130px 24px 75px; }
  .hero-address { margin: 0 0 24px; font-size: 9px; letter-spacing: 1.5px; }
  .hero-address span { padding: 0 7px; }
  .hero h1.hero-wordmark { font-size: 19vw; letter-spacing: -.065em; margin-left: -3px; margin-bottom: 30px; }
  .hero-bottom { align-items: flex-start; flex-direction: column; gap: 24px; padding-top: 22px; }
  .hero-intro { font-size: 24px; }
  .hero-actions { flex-direction: row; gap: 24px; align-items: center; flex-wrap: wrap; }
  .hero-actions .btn { width: auto; padding: 14px 19px; font-size: 13px; gap: 20px; }
  .hero-booking { font-size: 12px; }
  .hero-credit { right: 24px; font-size: 8px; }
  .events-section { padding: 50px 0; }
  .events-header { align-items: flex-start; gap: 18px; margin-bottom: 28px; }
  .events-header .view-all-link { margin-top: 7px; }
  .events-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 16px; }
  .event-name { font-size: 15px; margin-bottom: 13px; }
  .event-date-line { font-size: 10px; }
  .event-meta { flex-wrap: wrap; gap: 7px; }
  .event-info { padding-top: 13px; }
  .recent-section { padding: 0 0 50px; }
  .recent-section .section-inner { padding-top: 36px; }
  .recent-grid { gap: 28px 16px; }
  .recent-card h3 { font-size: 15px; }
  .recent-meta { font-size: 9px; flex-wrap: wrap; gap: 3px 8px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .hero-video { display: none; }
  .hero-bg { background: url('fiction-360-booth-opt.jpg') center/cover; }
  body, .reveal { animation: none; transition: none; opacity: 1; transform: none; }
}


/* Homepage visual system — 28 October 2026.
   Matches the existing hero actions; shared scripts and other pages are unchanged. */
body {
  --grey: #a5a5b1;
  --accent-1: #d9ccfa;
  --accent-2: #e1d8f1;
  --dark-border: #2b2b35;
  --surface: #111116;
  --edge: #2b2b35;
  --corner: 3px;
}
::selection { background: #d9ccfa; color: #101015; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #e1d8f1; outline-offset: 4px;
}
.nav.scrolled { border-bottom-color: var(--edge); }
.nav-links a::after { background: #e1d8f1; height: 1px; }
.nav-links .nav-ticket-btn, .btn, .newsletter-btn, .floating-ticket {
  border-radius: var(--corner); font-family: 'Inter',sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  line-height: 1.4; min-height: 52px; padding: 16px 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 22px;
  border: 1px solid transparent; box-shadow: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-primary, .nav-links .nav-ticket-btn, .newsletter-btn, .floating-ticket {
  background: #f0f0f5; color: #101015;
}
.btn-primary:hover, .nav-links .nav-ticket-btn:hover, .newsletter-btn:hover, .floating-ticket:hover {
  background: #d9ccfa; color: #101015; box-shadow: none; transform: translateY(-2px);
}
.nav-links .nav-ticket-btn { padding: 11px 20px; min-height: 44px; gap: 18px; }
.btn-outline { border-color: #7b7885; background: transparent; color: #f0f0f5; }
.btn-outline:hover { border-color: #e1d8f1; background: #202027; transform: translateY(-2px); }
.hero-actions .btn { min-height: 56px; }
.hero-address { margin-left: 0; }
.hero-booking { display: inline-flex; align-items: center; gap: 18px; }
.hero-booking span { padding-left: 0; }
.section-title, .venue-text h2, .bookings-header .section-title {
  font-size: clamp(32px,4vw,44px); font-weight: 600; line-height: 1.15; letter-spacing: -1.5px;
}
.section-label, .bookings-header .section-label, .venue-text h3 {
  font-family: 'Inter',sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 2px; color: #bbb7ca; margin-bottom: 14px;
}
.section-desc, .venue-text p { font-size: 16px; line-height: 1.75; color: var(--grey); }
.venue-section, .functions-section, .bookings-section, .socials-section, .newsletter-section {
  padding-top: 88px; padding-bottom: 88px; background: #0a0a0f;
}
.section-inner, .bookings-inner, .footer-inner { max-width: 1180px; padding-left: 40px; padding-right: 40px; }
.hero-content { max-width: 1100px; }
.bookings-section { padding-left: 0; padding-right: 0; }
.venue-section, .functions-section, .bookings-section, .socials-section, .newsletter-section { border-top: 1px solid var(--edge); }
.functions-section::before, .socials-section::before, .social-card::after { display: none; }
.venue-visual { height: 440px; border-radius: var(--corner); border-color: var(--edge); }
.venue-feature { border-top-color: var(--edge); font-size: 13px; }
.functions-inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; }
.functions-text .section-desc { margin-bottom: 28px; }
.functions-card-stack { gap: 12px; width: 100%; }
.func-card { min-height: 174px; width: auto; height: auto; padding: 25px 16px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--corner); justify-content: center; }
.func-card:hover { border-color: #706b7c; transform: none; }
.func-card .func-label { font-family: 'Inter',sans-serif; font-weight: 500; font-size: 14px; }
.func-card .func-desc { font-size: 12px; line-height: 1.6; color: var(--grey); }
.bookings-header, .socials-header { text-align: left; margin-bottom: 36px; }
.bookings-header p, .socials-header .section-desc { margin-left: 0; margin-right: 0; }
.bookings-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.booking-card { min-width: 0; padding: 28px 22px 22px; border-radius: var(--corner); background: var(--surface); border: 1px solid var(--edge); }
.booking-card:hover { border-color: #706b7c; transform: translateY(-2px); }
.booking-card.featured { border-color: #8b819b; background: #15141b; }
.booking-card-name { font-size: 20px; font-weight: 500; letter-spacing: -.4px; line-height: 1.3; min-height: 52px; margin-bottom: 12px; }
.booking-card-price { font-size: 34px; font-weight: 500; letter-spacing: -1px; color: #f0f0f5; }
.booking-card-divider { background: var(--edge); margin: 22px 0 18px; }
.booking-card-features { margin-bottom: 26px; }
.booking-card-features li { font-size: 13px; line-height: 1.55; padding: 6px 0; align-items: flex-start; gap: 10px; }
.booking-card-features li::before { color: #c6c1d1; font-size: 12px; font-weight: 500; flex-shrink: 0; margin-top: 1px; }
.booking-card-footer { min-height: 118px; margin-top: auto; }
.booking-card .btn { width: 100%; max-width: none; min-height: 52px; padding: 14px 14px; font-size: 12px; gap: 8px; justify-content: space-between; }
.booking-card-note { font-size: 11px; line-height: 1.5; color: #a5a5b1; opacity: 1; margin-top: 12px; }
.socials-grid { gap: 16px; }
.social-card { border-radius: var(--corner); padding: 28px; background: var(--surface); border: 1px solid var(--edge); }
.social-card:hover { border-color: #706b7c; transform: translateY(-2px); }
.social-name { font-size: 22px; font-weight: 500; letter-spacing: -.4px; }
.social-handle { color: #c6c1d1; font-weight: 400; letter-spacing: 0; }
.social-cta { text-transform: none; letter-spacing: 0; font-weight: 500; }
.newsletter-box { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 40px; text-align: left; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 56px; }
.newsletter-box > .section-label, .newsletter-box > .section-title, .newsletter-box > p:not(.newsletter-success) { grid-column: 1; }
.newsletter-box > .section-title { margin-bottom: 14px; }
.newsletter-form { grid-column: 2; grid-row: 1 / 4; align-self: center; margin-top: 0; gap: 10px; }
.newsletter-input { width: 100%; min-width: 0; background: var(--surface); border-color: #45434f; border-radius: var(--corner); padding: 15px 18px; min-height: 54px; font-size: 14px; }
.newsletter-input:focus { border-color: #d9ccfa; }
.newsletter-btn { flex: 0 0 auto; padding: 16px 22px; gap: 18px; }
.newsletter-success { grid-column: 2; }
.footer { border-color: var(--edge); }
.footer-bottom { border-color: var(--edge); }
.event-date-badge, .event-genre-tag { border-radius: var(--corner); }
.event-genre-tag { background: #19171f; color: #f0f0f5; }

/* These selectors also style the enquiry dialog created by fiction-site.js. */
body .fx-box { border-radius: var(--corner); border-color: #45434f; background: #111116; }
body .fx-box h3 { font-weight: 500; letter-spacing: -.6px; padding-right: 25px; }
body .fx-box p.fx-sub, body .fx-note { color: #a5a5b1; }
body .fx-box input, body .fx-box select, body .fx-box textarea { border-radius: var(--corner); border-color: #45434f; }
body .fx-box input:focus, body .fx-box select:focus, body .fx-box textarea:focus { border-color: #d9ccfa; }
body .fx-submit { border-radius: var(--corner); background: #f0f0f5; color: #101015; font-family: 'Inter',sans-serif; font-weight: 600; }
body .fx-submit:hover { background: #d9ccfa; }
body .fx-msg.ok { color: #e1d8f1; }

@media (max-width:1100px) {
  .bookings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .booking-card-name { min-height: 0; }
  .booking-card .btn { font-size: 14px; }
  .booking-card-footer { min-height: 100px; }
  .functions-inner { gap: 32px; }
  .functions-card-stack { gap: 10px; }
  .newsletter-box { column-gap: 30px; }
}
@media (max-width:900px) {
  .functions-inner { grid-template-columns: 1fr; gap: 32px; text-align: left; }
  .functions-text { margin: 0; }
  .functions-card-stack { margin: 0; max-width: none; }
  .func-card { min-height: 150px; }
  .newsletter-box { display: block; }
  .newsletter-form { margin-top: 28px; flex-direction: row; max-width: 620px; }
  .newsletter-success { max-width: 620px; }
}
@media (max-width:820px) {
  .socials-grid { max-width: none; }
}
@media (max-width:600px) {
  .section-inner, .bookings-inner, .footer-inner, .newsletter-box { padding-left: 24px; padding-right: 24px; }
  .venue-section, .functions-section, .bookings-section, .socials-section, .newsletter-section { padding-top: 56px; padding-bottom: 56px; }
  .hero { min-height: 680px; min-height: max(680px,88svh); }
      .hero-actions .btn { min-height: 50px; }
  .hero-actions { gap: 22px; }
  .section-title, .venue-text h2, .bookings-header .section-title { font-size: 32px; letter-spacing: -1px; }
  .venue-visual { height: 340px; }
  .venue-grid { gap: 28px; }
  .functions-card-stack { grid-template-columns: 1fr; gap: 10px; }
  .func-card { min-height: 0; padding: 22px; align-items: flex-start; text-align: left; }
  .func-card .func-desc { font-size: 13px; }
  .bookings-grid { grid-template-columns: 1fr; }
  .booking-card { padding: 26px 24px 24px; }
  .booking-card-features li { font-size: 14px; }
  .booking-card-footer { min-height: 0; }
  .booking-card .btn { padding-left: 20px; padding-right: 20px; }
  .social-card { padding: 26px 24px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-btn { width: 100%; justify-content: space-between; }
  .footer { padding-top: 56px; }
}
@media (prefers-reduced-motion:reduce) {
  .btn:hover, .newsletter-btn:hover, .nav-links .nav-ticket-btn:hover, .booking-card:hover, .social-card:hover, .event-card:hover { transform: none; }
}

/* Address-led hero, popular package label and consistent interaction states. */
.hero { min-height: 690px; min-height: min(800px,88svh); }
.hero .hero-address { margin: 0 0 16px; font-size: 11px; letter-spacing: 2px; }
.hero h1.hero-location { font-size: clamp(36px,4.4vw,56px); line-height: 1.1; font-weight: 500; letter-spacing: -1.8px; margin: 0 0 36px; }
.booking-card { padding-top: 48px; }
.booking-card.featured { border-color: #b5a5cc; }
.booking-card-popular { position: absolute; top: 0; right: 0; padding: 8px 12px; border-radius: 0 0 0 3px; background: #d9ccfa; color: #1b1524; font-family: 'Inter',sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1px; line-height: 1.4; text-transform: uppercase; }
.nav-links .nav-ticket-btn { background: #f0f0f5 !important; color: #101015 !important; }
.nav-links .nav-ticket-btn::after { display: none; }
.btn, .newsletter-btn, .nav-links .nav-ticket-btn, body .fx-submit { transition: background-color .2s, color .2s, border-color .2s; }
.btn-primary:hover, .hero-actions .btn:hover, .newsletter-btn:hover, .nav-links .nav-ticket-btn:hover, body .fx-submit:hover,
.btn-primary:focus-visible, .newsletter-btn:focus-visible, .nav-links .nav-ticket-btn:focus-visible, body .fx-submit:focus-visible {
  background: #d9ccfa !important; color: #101015 !important; box-shadow: none; transform: none;
}
.btn-outline:hover, .btn-outline:focus-visible { background: #25222c; border-color: #d9ccfa; color: #f0f0f5; transform: none; box-shadow: none; }
.hero-booking { transition: color .2s, border-color .2s; }
.hero-booking:hover, .hero-booking:focus-visible { color: #d9ccfa; border-bottom-color: #d9ccfa; }
.view-all-link:hover, .view-all-link:focus-visible { gap: 8px; color: #d9ccfa; }
.event-card:hover, .event-card:focus-visible { transform: none; box-shadow: none; }
.event-card:hover .event-img-bg, .event-card:hover .event-img-placeholder { transform: scale(1.025); }
.event-card:hover .event-ticket-link { gap: 6px; color: #f0f0f5; }
.booking-card:hover, .func-card:hover, .social-card:hover { transform: none; box-shadow: none; border-color: #706b7c; }
.booking-card.featured:hover { border-color: #d9ccfa; }
.social-card:hover, .social-card:focus-visible { background: #17161d; }
.social-card::after { display: none; }
.floating-ticket:hover { background: #d9ccfa; color: #101015; transform: translateX(-50%); box-shadow: none; }
::-webkit-scrollbar-thumb { background: #55515f; }
::-webkit-scrollbar-thumb:hover { background: #81768f; }
@media (max-width:600px) {
  .hero { min-height: 620px; min-height: max(620px,86svh); padding-bottom: 75px; }
  .hero h1.hero-location { font-size: 36px; letter-spacing: -1.3px; margin-bottom: 28px; }
  .hero .hero-address { font-size: 10px; }
  .booking-card { padding-top: 26px; }
  .booking-card.featured { padding-top: 50px; }
  .booking-card-popular { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .event-card:hover .event-img-bg, .event-card:hover .event-img-placeholder { transform: none; }
}