/* =====================================================
   THEME + BRAND COLOURS
   Change a colour here and it changes everywhere.
   ===================================================== */
:root {
  color-scheme: light dark;

  /* brand reds: main / lighter / darker */
  --red: #c22424;
  --red-light: #d63a3a;
  --red-dark: #8f1010;

  /* light theme: linen page, white cards */
  --page-bg: #f3f1ea;
  --text: #1d1c1c;
  --text-primary: var(--text);
  --text-secondary: #55524d;
  --card-bg: #ffffff;
  --card-hover: #f1eee6;
  --surface: #ffffff;
  --surface-hover: #f7f4ec;
  --surface-open: #fbf8f2;
  --surface-border: rgba(29, 28, 28, 0.12);
  --surface-border-hover: rgba(29, 28, 28, 0.35);
  --surface-border-open: rgba(194, 36, 36, 0.5);
  --panel-bg: rgba(255, 255, 255, 0.8);
  --panel-border: rgba(29, 28, 28, 0.1);
  --input-bg: #f3f1ea;
  --input-focus-bg: #ebe7dc;
  --input-border: rgba(29, 28, 28, 0.2);
  --accent: var(--red); /* focus rings, borders */
  --accent-light: #a31d1d; /* text links, required asterisks */
  --success: #0a7d57;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #1e2939;
    --text: #ffffff;
    --text-secondary: #c3cbd8;
    --card-bg: #364963;
    --card-hover: #40557a;
    --surface: #364963;
    --surface-hover: #40557a;
    --surface-open: #2d3e57;
    --surface-border: rgba(255, 255, 255, 0.12);
    --surface-border-hover: rgba(255, 255, 255, 0.35);
    --surface-border-open: rgba(255, 123, 123, 0.6);
    --panel-bg: rgba(255, 255, 255, 0.07);
    --panel-border: rgba(255, 255, 255, 0.12);
    --input-bg: rgba(255, 255, 255, 0.1);
    --input-focus-bg: rgba(255, 255, 255, 0.16);
    --input-border: rgba(255, 255, 255, 0.22);
    --accent: #ff7b7b;
    --accent-light: #ff9a9a;
    --success: #34d399;
  }
}

/* =====================================================
   BASE RESET
   Replaces the reset the Tailwind CDN script used to inject.
   Element selectors only, so every class in this file still wins.
   ===================================================== */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
img, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button {
  background-color: transparent;
  background-image: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  appearance: button;
}
textarea { resize: vertical; }
dialog { padding: 0; }

/* =====================================================
   ABOUT US LAYOUT
   The handful of utility classes the About Us markup uses, written
   out by hand (same names and values as Tailwind), so the page no
   longer needs the 300KB+ Tailwind CDN script.
   The --stick-* variables are set by javascript.js.
   ===================================================== */
.w-full { width: 100%; }
.max-w-7xl { max-width: 80rem; }
.max-w-md { max-width: 28rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.order-1 { order: 1; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.font-bold { font-weight: 700; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; margin-bottom: 0; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; margin-bottom: 0; }
.space-y-16 > :not([hidden]) ~ :not([hidden]) { margin-top: 4rem; margin-bottom: 0; }
.space-y-reverse > :not([hidden]) ~ :not([hidden]) { margin-top: 0; margin-bottom: 1rem; }
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms; }

@media (min-width: 768px) {
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .lg\:max-w-none { max-width: none; }
  .lg\:min-h-\[var\(--stick-items\)\] { min-height: var(--stick-items); }
  .lg\:sticky { position: sticky; }
  .lg\:top-0 { top: 0; }
  .lg\:h-screen { height: 100vh; }
  .lg\:h-full { height: 100%; }
  .lg\:min-h-full { min-height: 100%; }
  .lg\:absolute { position: absolute; }
  .lg\:inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
  .lg\:z-\[var\(--stick-visibility\)\] { z-index: var(--stick-visibility); }
  .lg\:flex-row { flex-direction: row; }
  .lg\:order-none { order: 0; }
  .lg\:opacity-\[var\(--stick-visibility\)\] { opacity: var(--stick-visibility); }
  .lg\:scale-\[var\(--stick-scale\)\] { transform: scale(var(--stick-scale)); }
  .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; margin-bottom: 0; }
  .lg\:space-x-20 > :not([hidden]) ~ :not([hidden]) { margin-right: 0; margin-left: 5rem; }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h, 94px);
  height: 100%;
  width: 100%;
  overflow-x: clip;

}

body {
  color: var(--text);
  background-color: var(--page-bg);
  font-size: 20px;
  overflow-x: clip;
}

.title {
  font-weight: 600;
  font-size: 3rem;
  z-index: 1000;
  text-decoration: underline var(--red);
}

/* Nav Bar */

* {
  margin: 0;
  padding: 0;
}  




nav1 {
  display: flex;
  justify-content: center;
  background-color: rgb(29, 28, 28);
  padding: 0.5rem 1rem;
  height: 10%;
  max-height: 100%;
  z-index: 1001;
  background: transparent;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0);
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-style: normal;
  position: sticky;
  top: 15px; 
  width: 70%;
  margin: auto;
  border-radius: 50px;
}
  

nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* logo | links | empty - keeps the links dead centre */
  align-items: center;
  gap: 1rem;
  background-color: rgb(29, 28, 28);
  padding: 0.5rem 1rem;
  height: 10%;
  max-height: 100%;
  z-index: 1001;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(5px);
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-style: normal;
  position: sticky;
  top: 0; 
  width: 100%;
  margin: auto;
  border-bottom: solid var(--red);
}



ul {
  display: flex;
  height: 10%;
  z-index: 1002;
  padding: 0.5rem 1rem;
  max-height: 100%;
}

nav ul {
  grid-column: 2;
  justify-self: center;
  margin: 0;
  height: auto;
  max-height: none;
  list-style: none;
}

nav li {
  padding: 0;
  text-decoration: none; /* Take away the default link styling  */
  color: #fdfdfd;
  transition: background-color 0.2s ease-in;
}

nav li a {
  display: block;
  padding: 1rem clamp(0.55rem, 1.1vw, 1rem);
  font-size: clamp(0.8rem, 1.3vw, 1.1rem);
  white-space: nowrap;
  color: #fdfdfd;
  text-decoration: none;
  transition: background-color 0.2s ease-in;
}
nav li:hover {
  background-color: var(--red-light) !important;
  transition: background-color 0.2s ease-in;
}

nav li a.active {
  transition: background-color 0.2s ease-in;
  background-color: var(--red);
}
nav > img.active {
  opacity: 1;
}

.nrad-link {
  grid-column: 1;
  justify-self: start;
  flex: 0 0 auto;
  display: block;
  margin-left: clamp(0px, 2vw, 2rem);
}
.nrad {
  display: block;
  height: clamp(2.75rem, 4.2vw, 4.5rem); /* scales with the screen */
  width: auto;
  max-width: 30vw;
  object-fit: contain;
  padding: 0;
}

/* Nav Bar End */

/* HERO (top of page) */
.hero {
  position: relative;
  isolation: isolate;
  display: grid; /* every slide sits in the same cell, so the hero is as tall as the tallest one */
  min-height: 560px;
  min-height: min(calc(100svh - var(--nav-h, 94px) - 10vh), 700px);
  text-align: center;
  color: #ffffff;
  background-color: #1448b4; /* shown until the images load */
  border-bottom: 6px solid var(--red);
  overflow: hidden;
}

/* One slide per show. Its background image is set by --hero-img in the HTML. */
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.25rem) 1rem clamp(2.5rem, 5vw, 3.25rem); /* extra room at the bottom for the dots */
  background-color: #1448b4;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Crossfade: the outgoing slide stays fully visible until the incoming one has
     faded in over the top, then disappears (the delayed 0s transition). */
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0s linear 1.2s;
}
.hero__slide.is-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  transition: opacity 1.2s ease;
}

.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 16, 50, 0.1) 0%, rgba(6, 16, 50, 0) 35%, rgba(6, 16, 50, 0.7) 100%);
}

/* Dots to jump between shows */
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}
.hero__dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  overflow: visible;
}
.hero__dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.85);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero__dot:hover::before { background: rgba(255, 255, 255, 0.8); }
.hero__dot[aria-current="true"]::before { background: #ffffff; transform: scale(1.25); }
.hero__dot:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* Previous / next arrows for the hero */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(6, 16, 50, 0.45);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero__arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__arrow--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.hero__arrow--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.hero__arrow:hover { background: var(--red); transform: translateY(-50%) scale(1.08); }
.hero__arrow:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

@media (max-width: 600px) {
  .hero__arrow { width: 38px; height: 38px; }
  .hero__arrow svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active { transition-duration: 0.01ms; }
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2.2vh, 1.4rem);
  width: 100%;
  max-width: 900px;
}

.hero__eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.75rem, 1.6vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.show {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92%, 640px);
  max-height: 42vh;
  object-fit: contain;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}

.hero__details {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.9rem;
  height: auto;
  max-height: none;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
}

.hero__details li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: rgba(8, 18, 52, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero__details .ico {
  color: #ff6a6a;
}

/* Venue link in the hero: the whole pill is clickable */
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.15rem; /* same as the pill... */
  margin: -0.55rem -1.15rem; /* ...cancelled out, so the click area fills the pill */
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.hero__link span {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.2s ease;
}
.hero__link:hover span {
  text-decoration-color: #ffffff;
}
.hero__link:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}
.hero__details li:has(> .hero__link):hover {
  background: rgba(8, 18, 52, 0.8);
  border-color: rgba(255, 255, 255, 0.45);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.book,
.hero__more {
  display: inline-block;
  padding: 0.85rem 2.4rem;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
}

.book {
  color: #ffffff;
  /*   background: linear-gradient(180deg, #FF8C8C 0%, #F22B2B 100%); */
  background-color: var(--red);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.book:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.hero__more {
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(8, 18, 52, 0.35);
}
.hero__more:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.book:focus-visible,
.hero__more:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.container {
  margin: 5% auto;
}

button {
  overflow: hidden;
  position: relative;
  transition: 0.4s ease;
  z-index: 1;
  &:before,
  &:after {
    transition: 0.3s ease;
    content: "";
    position: absolute;
    z-index: -1;
  }
}

.left {
  &:before {
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
  }
  &:hover {
    &:before {
      right: 0;
    }
  }
}




.card2{
  display: flex;
  height: 60vh;
    border-bottom: 10px solid var(--red);

}

.show2 {
  max-width: 40.%;
  object-fit: contain;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.date2 {
  width: 50%;
  position: relative;
  font-size: 2.5vmin;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #fdfdfd;
  text-shadow: 3px 3px #000000;
  padding-bottom: 2%;
  overflow: hidden;
}


.date3 {
  width: 50%;
  padding-left: 100px;
  top: 61%;
  position: relative;
  font-size: 2.5vmin;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #fdfdfd;
  text-shadow: 3px 3px #000000;
  padding-bottom: 2%;
  overflow: hidden;
}

















/*

.book:hover {
  background-color: rgb(116, 16, 16);
  cursor: pointer;
}
*/

/* What's On Test */

.main {
  display: grid;
  padding: 2rem;
  grid-template-columns: 70% 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 1300px;
  margin: 5% auto;
  margin-top: 1%;
}
.title1 {
  font-family: "Montserrat", sans-serif;
  color: var(--text);
  font-weight: 600;
  font-size: 3rem;
  z-index: 1000;
  text-decoration: underline var(--red);
  margin-bottom: 20px;
}
.tex2 {
  font-size: 18px;
  line-height: 1.3;
}

.poster {
  max-width: 100%;
  max-height: 600px;
  box-shadow: 0px 0px 20px 6px #000000;
  justify-self: end;
  border-radius: 10px;
  transition-duration: 0.2s;
}

.poster:hover {
  background: var(--red-dark);
		transform: scale(1.1);
  box-shadow: 0px 0px 20px 6px #000000;
  transition-duration: 0.2s;
}

.about {
  font-weight: 600;
  font-size: 3rem;
  z-index: 1000;
  text-decoration: underline var(--red);
  margin-bottom: 20px;
  position: absolute;
  padding-top: 15%;
}

.theatre {
  display: block;
  padding: 2rem;
  grid-template-columns: 70% 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 1300px;
  margin: 5% auto;
  font: 500 100%/1.5 system-ui;
}

.padding {
  padding-left: 3%;
  padding-right: 3%;
  overflow: clip;
}

h1 {
  font-family: "Montserrat", sans-serif;
  color: var(--text);
}

p {
  font-family: "Montserrat", sans-serif;
  color: var(--text);
}

.textpadding {
  padding-top: 10%;
}





.review {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-image: url("cinderella (19).jpg");
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.info {
  height: 50%;
  width: 40%;
  margin-top: 10%;
  margin-left: 50%;
  border: dashed;
}







@keyframes reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* ACCOLADES TEXT */

h4 {
  position: relative;
  color: rgb(255, 255, 255);
  /* font-size: calc(1rem + 3vw); */
}

.scroll-reveal h4 {
  text-align: center;
  position: relative;
  font-size: 9rem;
  line-height: 1;
  font-weight: 560;
}

.scroll-reveal p {
  text-align: center;
  position: relative;
  font-size: 4vmin;
  font-weight: 560;
  line-height: 1.3;
  max-width: 33ch;
  margin-inline: auto;
}
.scroll-reveal > * {
  margin: 0;
}

.scroll-reveal span {
  color: hsl(0 0% 100% / 0.2);
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image: linear-gradient(90deg, white, white);
  animation: scroll-reveal linear forwards;
  animation-timeline: view(y);
}

.scroll-reveal h4 span {
  animation-range-start: cover 20vh;
  animation-range-end: cover 80vh;
}

.scroll-reveal p span {
  animation-range-start: cover 22.5vh;
  animation-range-end: cover 63vh;
  font-size: 4w;
}

@keyframes scroll-reveal {
  to {
    background-size: 100% 100%;
  }
}
/*
.scroll-reveal2 {
  position: absolute;
  text-align: center;
  padding-block: clamp(8rem, 2vh, 20rem);
  height: 500px;
  background-image: url(background.png);
   Create the parallax scrolling effect 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -100;
}

*/

.scroll-reveal {
  color: transparent;
  padding-block: clamp(7rem, 3vh, 20rem);
  height: calc(66vh - 10%);
  /* Create the parallax scrolling effect */
  position: relative;
}

/* END OF ACCOLADES */




/* Theme colours come from the variables at the top of this file */
.darkmode {
  color: var(--text);
  background-color: var(--page-bg);
}

@media (prefers-color-scheme: dark) {
  .poster {
    box-shadow: 1px 1px 22px 1px #000000;
  }
}





/* THEATRE CARDS
   Cards size to their content, so an expanded card is exactly as tall as its
   text on every screen width. The text area opens/closes by animating a grid
   row between 0fr and 1fr. */

.profile {
  border-radius: 5px;
  width: 450px;
  max-width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  background-color: var(--card-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  /* shadow + background live on the base state, so they fade in AND out */
  transition: box-shadow 0.5s ease, background-color 0.5s ease;
}
.profile:hover {
  background-color: var(--card-hover);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
.profile__banner {
  display: block;
  height: 200px;
  width: 100%;
  background-color: rgb(187, 112, 187);
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
}

.profile__title {
  margin: 0;
  font: inherit;
}
.profile__head {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: visible;
}
.profile__head:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.profile__info {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1.25rem 0;
}
.profile__info-display {
  display: block;
  width: 100%;
  font-size: 1.5rem;
  font-weight: bold;
}

.profile__data-following-number {
  margin: 10px;
  font-size: 0.9rem;
}

.profile__data {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  text-align: center;
  transition: grid-template-rows 0.4s ease, opacity 0.4s ease;
}
.profile--expanded > .profile__data {
  grid-template-rows: 1fr;
  opacity: 1;
}
.profile__data > * {
  display: block;
  min-height: 0;
  overflow: hidden;
}
.profile__data > * > * {
  display: block;
}

.theatrepad {
  gap: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* an expanded card must not stretch its neighbours */
}

/* END OF THEATRE CARDS*/

/* SPECIAL THANKS - small sponsor strip in the footer */

.thanks {
  padding: 1.75rem 1rem 1.25rem;
  text-align: center;
  background-color: rgb(29, 28, 28); /* same charcoal as the nav */
  border-top: 4px solid var(--red); /* same red as the nav / hero edges */
  font-family: "Montserrat", sans-serif;
  color: #fdfdfd;
}

.thanks__title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fdfdfd;
}

.thanks__text {
  max-width: 48ch;
  margin: 0.4rem auto 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(253, 253, 253, 0.8);
}

.thanks__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 0.75rem;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* white tiles so any logo stays readable, whatever the page colours */
.thanks__logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
}
.thanks__logos li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  transition: opacity 0.2s ease;
}
.thanks__logos li a:hover { opacity: 0.85; }
.thanks__logos li a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.thanks__logos img {
  display: block;
  width: auto;
  height: 32px;
  max-width: 120px;
  object-fit: contain;
}

.thanks__follow {
  margin: 1.75rem 0 0.6rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253, 253, 253, 0.75);
}
.thanks__social {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.thanks__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(253, 253, 253, 0.55);
  border-radius: 50%;
  color: #fdfdfd;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.thanks__social a:hover,
.thanks__social a:focus-visible {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
}
.thanks__social a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.thanks__social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.thanks__copy {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: rgba(253, 253, 253, 0.6);
}

@media (max-width: 600px) {
  .thanks__logos img {
    height: 28px;
    max-width: 96px;
  }
}

/* END OF SPECIAL THANKS */


/* TESTIMONIALS */

.testimonial {
  text-align: center;
  color: #f2efe8;
  margin: 80px 40px;
  padding: 30px;
  border-radius: 30px;
  position: relative;
  z-index: 1;
}
.testimonial:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--red) 40%, var(--red-dark) 100%);
  border-radius: 30px;
  z-index: -1;
}
/*
        .testimonial .pic{
            border: 5px solid #F2EFE8;
            display: inline-block;
            margin-bottom: 10px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        .testimonial .pic img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
*/
.testimonial .testimonial-content {
  font-size: 21px;
  letter-spacing: 1px;
  line-height: 30px;
  margin-bottom: 20px;
  font-family: "Montserrat", sans-serif;
}
.testimonial .testimonial-title {
  margin: 0 0 18px;
}
.testimonial .testimonial-title cite {
  display: inline-block;
  font-style: normal;
  color: #f2efe8;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}

/* text for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Read on Google" link under a reviewer's name */
.testimonial .testimonial-source {
  margin: -8px 0 18px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
}
.testimonial .testimonial-source a {
  color: #f2efe8;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.testimonial .testimonial-source a:hover,
.testimonial .testimonial-source a:focus-visible {
  color: #ffffff;
}
.testimonial .testimonial-source a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 2px;
}

.stars {
  font-size: 65px;
  color: #fdfdfd;
}
/* Accolades carousel (built in the script at the bottom of the page).
   Slides are 100% of the viewport width, so nothing is measured in pixels and
   nothing needs recalculating when the layout or window changes. */
.tc-viewport {
  overflow: hidden;
  touch-action: pan-y; /* vertical scrolling still works, horizontal swipes go to the carousel */
}

.tc-track {
  display: flex;
  will-change: transform;
}

.tc-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.tc-nav {
  text-align: center;
}

.tc-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 5px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--red);
  color: #ffffff;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease-in;
}

.tc-nav button:hover {
  background: var(--red-dark);
}

.tc-nav button:focus-visible {
  outline: 3px solid #fdfdfd;
  outline-offset: 2px;
}

.tc-nav button::before,
.tc-nav button::after {
  content: none; /* the arrows are inline SVG now (Font Awesome was removed) */
}

.tc-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Equal-height review cards: every card fills its slide (the tallest review sets the height) and the text sits in the middle,
   so the card no longer grows and shrinks from one review to the next. */
.tc-slide {
  display: flex;
}
.tc-slide > .testimonial {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Arrows with the dots between them */
.tc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.tc-nav button {
  margin: 0;
}
.tc-dots {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
.tc-nav .tc-dot {
  width: 28px; /* roomy tap area; the visible dot is the smaller circle inside */
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
}
.tc-nav .tc-dot:hover {
  background: transparent;
}
.tc-nav .tc-dot::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.tc-nav .tc-dot:hover::before {
  opacity: 0.85;
}
.tc-nav .tc-dot[aria-current="true"]::before {
  background: var(--red);
  opacity: 1;
  transform: scale(1.25);
}
.tc-nav .tc-dot:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 0;
}

/* Section heading above the reviews (same look as the FAQ heading) */
.tc-heading {
  margin: 0;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: var(--text);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

#testimonial-slider .testimonial {
  margin-top: 2rem; /* the heading above already provides the space */
}

/* Review text colour (it used to be set inline on each paragraph; the page text colour made it black) */
.testimonial .testimonial-content p {
  color: #fdfdfd;
}

/* Next step under the reviews */
.tc-cta {
  text-align: center;
  margin-top: 1.75rem;
}

.tc-cta .book:focus-visible {
  outline-color: var(--text); /* the button sits on the page background, so a white outline would not show */
}

/* Quotation marks round each review (added here so the page markup stays clean) */
.testimonial .testimonial-content p::before { content: "\201C"; }
.testimonial .testimonial-content p::after  { content: "\201D"; }

/* END OF TESTIMONIALS */



/* QUOTE */
.main2 {
  padding: 2rem;
  grid-template-columns: 70% 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 1300px;
  margin: 5% auto;
}

.qback {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#quote {
  text-align: center;
  font-size: calc(1vw + 1vh + 1vmin);
  line-height: 1.5;
  user-select: none;
  z-index: 1;
  position: absolute;
  max-width: 1200px;

}

.word {
  opacity: 0;
  display: inline-block;
  white-space: pre;
}
/* ACCOLADES VIDEO */

.backvideo {
  position: relative;
  filter: brightness(50%);
  width: 100%;

  max-height: 100vh;
  background-color: rgb(29, 28, 28);
}

/* END OF ACCOLADES VIDEO */

/* END OF QUOTE */


/* CONTACT */


        .contact-container {
            max-width: 1400px;
            margin: -8rem auto 0;
            padding: 0 4rem 8rem;
            position: relative;
            z-index: 20;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 400px 1fr;
            gap: 3rem;
            align-items: start;
        }

        .info-panel {
            background: var(--panel-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--panel-border);
            border-radius: 24px;
            padding: 3rem;
            top: 2rem;
        }

        .info-section {
            margin-bottom: 3rem;
        }

        .info-section:last-child {
            margin-bottom: 0;
        }

        .info-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-secondary);
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .info-content {
            color: var(--text-primary);
            font-size: 1.1rem;
            line-height: 1.8;
        }

        .info-content a {
            color: var(--accent-light);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .info-content a:hover {
            color: var(--text-primary);
        }


        .form-panel {
            background: var(--panel-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--panel-border);
            border-radius: 24px;
            padding: 4rem;
        }

        .form-header {
            margin-bottom: 3rem;
        }

        .form-header h2 {
            font-size: 2.5rem;
            font-weight: 700;
            letter-spacing: -1px;
            margin-bottom: 0.5rem;
        }

        .form-header p {
            color: var(--text-secondary);
            font-size: 1.05rem;
        }

        .form-group {
            margin-bottom: 2rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.75rem;
            font-weight: 500;
            color: var(--text-primary);
            font-size: 0.9rem;
            letter-spacing: 0.3px;
        }

        .required {
            color: var(--accent-light);
            margin-left: 2px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 1rem 1.25rem;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: 12px;
            font-size: 1rem;
            font-family: inherit;
            color: var(--text-primary);
            /*transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);*/
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--text-secondary);
            opacity: 0.8;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            background: var(--input-focus-bg);
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(194, 36, 36, 0.18);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 150px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }


        .submit-btn {
            width: 100%;
            padding: 1.25rem;
            background: var(--red-light);
            color: #ffffff;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            margin-top: 1rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.3px;
        }

        .submit-btn:hover {
            background: var(--red-dark);
            transform: translateY(-1px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        /* decoy field for spam bots (kept off-screen, not display:none, so bots still see it) */
        .hp-field {
          position: absolute;
          left: -9999px;
          width: 1px;
          height: 1px;
          overflow: hidden;
        }
        .form-privacy {
          margin: 0.9rem 0 0;
          font-size: 0.85rem;
          line-height: 1.4;
          color: var(--text-secondary);
        }
        .success-message {
            display: none;
            padding: 1.5rem;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid var(--success);
            border-radius: 12px;
            color: var(--success);
            text-align: center;
            margin-top: 1.5rem;
            font-weight: 500;
        }
        @media (max-width: 1024px) {
            nav {
                padding: 1.5rem 2rem;
            }

            .nav-links {
                gap: 2rem;
            }

            .hero__slide {
                padding: 4rem 2rem 8rem;
            }

            .contact-container {
                padding: 0 2rem 4rem;
            }

            .contact-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }


            .form-panel {
                padding: 2.5rem;
            }

        }

        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }

            .form-row,
            .priority-grid {
                grid-template-columns: 1fr;
            }


            .nav-links {
                display: none;
            }
        }


/* END OF CONTACT */












/* FAQS */



.stage {
  min-height: 10vh;
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 5vw, 3rem);
}

.faq { width: min(680px, 100%); }

.faq__head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.faq__head h2 {
  margin: 0 0 .6rem;
  font-family: "Montserrat", sans-serif;
  color: var(--text);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.accordion { display: flex; flex-direction: column; gap: .75rem; }

.item {
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.item:hover { border-color: var(--surface-border-hover); background-color: var(--surface-hover); }
.item.is-open { background: var(--surface-open); border-color: var(--surface-border-open); }

.item h3 { margin: 0; }

.trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: none;
  border: 0;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 14px;
}

.chev {
  flex: none;
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s cubic-bezier(.7,0,.2,1);
}
.item.is-open .chev { transform: rotate(180deg); }

/* grid-template-rows animates the reveal without touching height/padding */
.panel {
  display: grid;
  grid-template-rows: 0fr;
}
.item.is-open .panel { grid-template-rows: 1fr; }

.panel__inner {
  overflow: hidden;
  line-height: 1.65;
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  padding: 0 1.25rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.item.is-open .panel__inner {
  padding: 0 1.25rem 1.25rem;
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* END OF FAQS */






@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slideUp {
    animation: slideUp 0.3s ease-out;
    opacity: 1;
}












@media (hover: none) {
  .poster:hover {
    transform: none;
  }
}

/* Hamburger button - hidden on desktop */
.nav-toggle {
  display: none;
  margin-left: auto;
}

/* =====================================================
   RESPONSIVE LAYOUT
   (replaces the old 1024 / 768 / 600px blocks)
   ===================================================== */

/* ---------- Nav: collapses to hamburger ----------
   Used on narrow screens AND on any device whose main input is touch
   (phones, tablets - including iPads held sideways), however wide. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  nav {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .nrad-link {
    margin-left: 0;
  }
  .nrad {
    height: clamp(40px, 6vw, 56px);
    max-width: 55vw;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  nav.open .nav-toggle span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  nav.open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  nav.open .nav-toggle span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    justify-self: stretch; /* the desktop rule centres it, which shrank the menu to fit its links */
    margin: 0;
    flex-direction: column;
    height: auto;
    max-height: none;
    padding: 0.5rem 0;
    list-style: none;
    background: rgb(29, 28, 28);
    border-bottom: solid var(--red);
  }

  nav.open ul {
    display: flex;
  }

  nav li a {
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
  }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 1024px) {
  /* HERO */
  .hero {
    min-height: 0;
  }

  .hero__slide {
    padding: 2rem 1rem 3.25rem; /* bottom room for the dots */
  }

  .show {
    max-width: 90%;
    max-height: 42vh;
  }

  /* WHAT'S ON: single column, poster centred */
  .main {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 1rem;
  }

  .main > div {
    width: 100%;
  }

  .tex2 {
    position: relative;
    background-color: #ffffff85;
    margin-bottom: 20px;
  }

  section img,
  .main img {
    max-width: 100%;
    height: auto;
  }

  .poster {
    width: min(100%, 350px);
    height: auto; /* the width/height attributes would otherwise squash it */
    max-height: none;
    object-fit: cover;
    justify-self: center;
  }

  .title1 {
    font-size: 35px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .about {
    position: relative;
    font-size: 35px;
  }

  /* QUOTE OVER VIDEO */
  .qback {
    position: relative;
    padding-top: 30px;
  }

  #quote {
    width: 90%;
    max-width: 900px;
    font-size: clamp(1.1rem, 4.6vw, 2.2rem);
  }

  .backvideo {
    min-height: 60vh;
    object-fit: cover;
  }

  /* THEATRE CARDS: one per row */
  .theatre {
    padding: 1.5rem 1rem;
  }

  .theatrepad {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .profile {
    width: 100%;
    max-width: 450px;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  .title {
    font-size: 2.2rem;
  }

  body h3.text-4xl {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  .main2 {
    padding: 1rem;
  }

  /* Gallery testimonials */
  .testimonial {
    margin: 40px 10px;
    padding: 24px 18px;
  }

  .stars {
    font-size: 44px;
  }

  .testimonial .testimonial-content {
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0.5px;
  }

  .testimonial .testimonial-title cite {
    font-size: 16px;
  }

  #testimonial-slider .testimonial {
    margin-top: 1.5rem;
  }

  /* Contact */
  .info-panel,
  .form-panel {
    padding: 1.5rem;
  }

  .form-header {
    margin-bottom: 2rem;
  }

  .form-header h2 {
    font-size: 2rem;
  }

  .info-content {
    overflow-wrap: anywhere;
  }

  /* FAQ */
  .panel__inner {
    font-size: 1rem;
  }
}

/* =====================================================
   ABOUT US - scroll effect on tablets / phones
   (below 1024px Tailwind's lg: classes switch the desktop effect off,
   so a script adds .m-sticky and drives the slides while you scroll)
   ===================================================== */
[data-sticky-sections].m-sticky {
  height: calc(100vh - var(--nav-h, 76px) + (var(--m-count, 3) - 1) * 70vh);
  height: calc(100svh - var(--nav-h, 76px) + (var(--m-count, 3) - 1) * 70svh);
}

.m-sticky > div {
  position: sticky;
  top: var(--nav-h, 76px);
  height: calc(100vh - var(--nav-h, 76px));
  height: calc(100svh - var(--nav-h, 76px));
  margin: 0 !important;
}

.m-sticky section {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  will-change: opacity, transform;
}

.m-sticky section > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.m-sticky section > div > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-sticky section > div > div:first-child {
  order: 1;
}

.m-sticky section img {
  width: auto;
  max-width: 100%;
  max-height: 36vh;
  max-height: 36svh;
  object-fit: contain;
}

.m-sticky .about {
  padding-top: 0;
  margin-bottom: 0.5rem;
}

/*



/* MOBILE VIEW 

@media only screen and (hover: none) and (pointer: coarse) {
  h1 {
    top: 20%;
  }

  h2 {
    font-size: calc(5rem + 3vw);
    white-space: nowrap;
    color: #eee;
    top: 0;
  }

  nav {
    display: none;
  }

  header {
    justify-content: center;
  }

  .nrad {
    max-height: 70%;
    width: auto;
    position: absolute;
    opacity: 0;
    padding: 0.5rem 1rem;
    top: 0;
    animation: reveal ease 1s forwards;
    animation-delay: 0.5s;
  }

  h1 {
    font-size: calc(4rem + 4vw);
  }

  .stack #test {
    font-size: calc(4rem + 4vw);
  }

  .stack span {
    font-size: calc(4rem + 4vw);
  }

  @keyframes glitch {
    4%,
    100% {
      text-shadow: 3px 3px #000000;
      transform: none;
    }
  }
}



*/






/* =====================================================
   ALIGN HEADINGS ON TABLETS / PHONES
   "About Us" uses Tailwind wrappers (px-4 md:px-6, plus an inner
   max-w-md mx-auto column) so its heading sat in a different place to
   What's On / The Theatre / Gallery. Give all four the same
   max-width and the same 1rem side padding below the desktop breakpoint.
   ===================================================== */
@media (max-width: 1024px) {
  #About {
    max-width: 1300px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* let the heading line up with the other sections' headings... */
  #About > [data-sticky-sections] {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* ...while the text + image stay in the same centred column as before */
  #About section > div {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
  }

  #Gallery {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* =====================================================
   GALLERY  (show carousel -> photo grid -> lightbox)
   Everything is prefixed gal- so it can't clash with the
   rest of the site. Colours use the site's reds, and
   translucent greys so it works in light AND dark mode.
   ===================================================== */

.gal-intro {
  color: inherit;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.gal {
  --gal-accent: var(--red);
  --gal-accent-dark: var(--red-dark);
  --gal-surface: rgba(128, 128, 128, 0.16);
  --gal-line: rgba(128, 128, 128, 0.4);
  font-family: "Montserrat", sans-serif;
  color: inherit;
}

/* the site-wide "button" rule adds sliding pseudo-elements; switch them off in here */
.gal button::before,
.gal button::after {
  content: none;
}

/* ---------- Carousel of shows ---------- */
.gal-carousel {
  position: relative;
}

.gal-track {
  position: relative; /* lets the script centre a card using offsetLeft */
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0.25rem 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.25rem; /* matches the padding above, so the first card snaps to scrollLeft 0 */
  scrollbar-width: thin;
}

.gal-card {
  flex: 0 0 auto;
  width: clamp(140px, 20vw, 210px);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: visible;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}

.gal-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid transparent;
  background: var(--gal-surface);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gal-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.gal-card:hover .gal-card__img {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.gal-card[aria-pressed="true"] .gal-card__img {
  border-color: var(--gal-accent);
  box-shadow: 0 0 0 3px rgba(194, 36, 36, 0.25);
}

.gal-card[aria-pressed="true"] .gal-card__title {
  text-decoration: underline var(--red);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

.gal-card:focus-visible,
.gal-photo:focus-visible,
.gal-close:focus-visible,
.gal-more:focus-visible,
.gal-arrow:focus-visible {
  outline: 3px solid var(--gal-accent);
  outline-offset: 3px;
}

/* arrows (hidden on touch devices - swiping is nicer there) */
.gal-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gal-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.gal-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gal-arrow--prev { left: -12px; }
.gal-arrow--next { right: -12px; }
.gal-arrow:hover { background: var(--gal-accent-dark); }
.gal-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

@media (hover: none) {
  .gal-arrow { display: none; }
}

/* ---------- Photo panel (opens below the carousel) ---------- */
.gal-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}

.gal-panel.is-open {
  grid-template-rows: 1fr;
}

.gal-panel__inner {
  min-height: 0;
  overflow: hidden;
}

.gal-body {
  padding: 1.25rem 4px 4px;
  border-top: 1px solid var(--gal-line);
}

.gal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.gal-head__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline var(--red);
  text-underline-offset: 0.2em;
}

.gal-head__meta {
  font-size: 0.9rem;
  opacity: 0.75;
}

.gal-close {
  margin-left: auto;
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--gal-accent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.gal-close:hover {
  background: var(--gal-accent);
  color: #fff;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 0.75rem;
}

.gal-photo {
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--gal-surface);
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.gal-photo[hidden] { display: none; }

.gal-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.35s ease;
}

.gal-photo.is-loading img { opacity: 0; }
.gal-photo:hover img { transform: scale(1.06); }

.gal-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.gal-more {
  padding: 0.85rem 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--red-light);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gal-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

.gal-empty {
  padding: 2.5rem 1rem;
  border: 2px dashed var(--gal-line);
  border-radius: 16px;
  text-align: center;
  opacity: 0.8;
}

/* ---------- Lightbox ---------- */
.gal-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 8, 12, 0.95);
  color: #fff;
  display: none;
}

.gal-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gal-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

html.gal-lb-open {
  overflow: hidden;
}

.gal-lb-stage {
  flex: 1;
  min-width: 0;
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 3.5rem 5rem 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.gal-lb-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  flex: 0 1 auto;
  object-fit: contain;
  border-radius: 6px;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.25s ease;
}

.gal-lightbox.is-loading .gal-lb-img { opacity: 0.25; }

.gal-lb-cap {
  flex: none;
  margin-top: 0.8rem;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0.85;
}

.gal-lb-btn {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gal-lb-btn { touch-action: manipulation; } /* quick repeated taps must not trigger double-tap zoom */
.gal-lb-btn:hover { background: var(--gal-accent); }
.gal-lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.gal-lb-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gal-lb-close { top: 0.75rem; right: 0.75rem; }
.gal-lb-prev { top: 50%; left: 0.75rem; transform: translateY(-50%); }
.gal-lb-next { top: 50%; right: 0.75rem; transform: translateY(-50%); }

@media (max-width: 700px) {
  .gal-lb-stage { padding: 4rem 0.5rem 4.5rem; }

  /* arrows drop to the bottom corners so they never cover the photo */
  .gal-lb-prev,
  .gal-lb-next {
    top: auto;
    bottom: 0.75rem;
    transform: none;
  }
}

@media (max-width: 600px) {
  .gal-track { gap: 0.75rem; }
  .gal-card { width: 38vw; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}

/* END OF GALLERY */


/* =====================================================
   HERO ON ULTRAWIDE SCREENS
   ===================================================== */
@media (min-width: 1700px) {
  /* the whole picture, uncropped, with the existing darkening gradient on top */
  .hero__slide::before {
    background:
      linear-gradient(to bottom, rgba(6, 16, 50, 0.1) 0%, rgba(6, 16, 50, 0) 35%, rgba(6, 16, 50, 0.7) 100%),
      var(--hero-img) center / contain no-repeat;
  }

  /* blurs the stretched copy (the slide's own background) behind it */
  .hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    -webkit-backdrop-filter: blur(28px) brightness(0.65);
    backdrop-filter: blur(28px) brightness(0.65);
  }
}


/* =====================================================
   SMALL SHARED PIECES
   ===================================================== */

/* text links inside cards / FAQ answers */
.text-link {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.text-link:hover {
  color: var(--text);
}

/* for the page's h1: there for screen readers and search engines, not shown */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* contact form: "could not send" message */
.error-message {
  padding: 1.5rem;
  background: rgba(194, 36, 36, 0.1);
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--accent-light);
  text-align: center;
  margin-top: 1.5rem;
  font-weight: 500;
}
.error-message[hidden] {
  display: none;
}


/* What's On: price / times / relaxed performance, in columns between two dividing lines */
.showinfo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem 2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.showinfo li {
  margin: 0;
  padding: 0;
}
.showinfo li b {
  display: block;
  margin-bottom: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.showinfo li span {
  display: block;
  font-family: "Josefin Sans", "Century Gothic", "Avenir Next", Avenir, sans-serif;
  font-size: 1.35rem;
  line-height: 1.5;
}

/* the "?" beside Relaxed performance (links to the FAQ) */
.showinfo li b .infohelp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.4rem;
  border: 1.5px solid var(--accent-light);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  vertical-align: middle;
  color: var(--accent-light);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.showinfo li b .infohelp::after {
  /* a bigger area to tap on phones */
  content: "";
  position: absolute;
  inset: -0.5rem;
}
.showinfo li b .infohelp:hover,
.showinfo li b .infohelp:focus-visible {
  background: var(--accent-light);
  color: var(--page-bg);
}
.showinfo li b .infohelp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Book Now button under the info row in What's On (the look comes from .book) */
.showbook {
  margin: 0.25rem 0 50px;
}


/* =====================================================
   TICKETSOURCE BOOKING POP-UP
   Opened by the "Book Now" buttons (see script at the bottom of the page).
   Uses the theme variables above, so it follows light / dark mode.
   The header shows the show's own background image (set per show in the SHOWS list in the page script).
   ===================================================== */
.book-dialog {
  width: min(960px, 96vw);
  max-width: none;
  height: auto;
  min-height: min(320px, 90vh);
  max-height: min(92vh, 900px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.book-dialog[open] {
  display: flex;
  flex-direction: column;
}

.book-dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

html.book-open {
  overflow: hidden;
}

/* Header: the show's background image (set per show by the page script) with the title image in the middle,
   Close on the right and a red bar underneath. The dark tint keeps the white text readable on any image.
   Three columns (empty | title image | Close) keep the title image dead centre. */
.book-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 8px solid var(--red);
  background-color: rgb(29, 28, 28);
  background-position: center;
  background-size: cover;
  color: #ffffff;
}

.book-logo {
  grid-column: 2;
  height: 4rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* the site's img reset sets display:block, which would override the hidden attribute */
.book-logo[hidden] {
  display: none;
}

/* The heading is there for screen readers; it only shows if the title image is missing or fails to load */
.book-title {
  grid-column: 2;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.book-title:not(.book-title--show) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.book-close {
  grid-column: 3;
  justify-self: end;
  padding: 0.5rem 1.2rem;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(8, 18, 52, 0.35);
  color: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.book-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.book-close:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* White behind the embed whatever the theme, because the TicketSource shop is designed for a light page */
.book-body {
  position: relative;
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  color: #1d1c1c;
}

.book-panel {
  width: 100%;
}

.book-panel iframe {
  width: 100% !important;
  border: 0;
}

.book-loading {
  padding: 2.5rem 1.25rem;
  text-align: center;
  font-size: 0.95rem;
}

.book-loading a,
.book-foot a {
  color: var(--accent-light);
  text-decoration: underline;
}

.book-foot {
  flex: 0 0 auto;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--surface-border);
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .book-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .book-logo { height: 3.2rem; }
}

/* Short screens, e.g. a phone held sideways: use the whole screen, slim the header and drop the footer link
   (the "didn't load" message inside the pop-up still has its own link) */
@media (max-height: 520px) {
  .book-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    border-radius: 0;
  }
  .book-head {
    padding: 0.35rem 1rem;
    border-bottom-width: 5px;
  }
  .book-logo { height: 2.4rem; }
  .book-close { padding: 0.35rem 1rem; }
  .book-foot { display: none; }
}

/* "Early Bird ends soon" alert on the Mother Goose show */
.earlybird {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin: 0 0 1.25rem;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: rgba(194, 36, 36, 0.08);
  color: var(--text);
  text-decoration: none;
}
.earlybird__tag {
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--red);
  color: #ffffff;
  animation: earlybird-pulse 2s ease-in-out 2;
}
.earlybird__msg {
  font-family: "Josefin Sans", "Century Gothic", "Avenir Next", Avenir, sans-serif;
  font-size: 1.1rem;
}
.earlybird:hover,
.earlybird:focus-visible {
  background: rgba(194, 36, 36, 0.16);
}
.earlybird:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@keyframes earlybird-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 36, 36, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(194, 36, 36, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .earlybird__tag { animation: none; }
}

/* Early Bird alert: tidier on phones (full width, stacked and centred instead of a wrapping pill) */
@media (max-width: 600px) {
  .earlybird {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0.25rem 0 1.25rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    text-align: center;
  }
  .earlybird__tag {
    font-size: 0.78rem;
    padding: 0.3rem 0.85rem;
  }
  .earlybird__msg {
    font-size: 1rem;
    line-height: 1.3;
  }
}

/* Mother Goose Early Bird price: old price struck through, new price as a bold badge */
.price-was {
  opacity: 0.6;
  text-decoration-thickness: 2px;
}
.price-now {
  display: inline-block;
  margin-left: 0.25rem;
  color: var(--text);
  font-family: "Montserrat", sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.3;
  vertical-align: middle;
}
.price-label {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  vertical-align: middle;
}

/* "Tickets selling fast" badge (added by a small script when the TicketSource proxy says a show is selling fast).
   Next to the Early Bird alert they share a row (.alertrow) so the two are always the same height. */
.alertrow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}
.alertrow .earlybird {
  margin: 0;
}
.sellingfast {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 0 1.25rem;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: rgba(194, 36, 36, 0.08);
  color: var(--text);
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.alertrow .sellingfast {
  margin: 0;
}
@media (max-width: 600px) {
  .alertrow {
    flex-direction: column;
  }
  .sellingfast {
    width: 100%;
    margin: 0.25rem 0 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
  }
  .alertrow .sellingfast {
    margin: 0;
  }
}


/* =====================================================================
   ACCESSIBILITY ADDITIONS
   ===================================================================== */

/* Smooth scrolling only for people who haven't asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .gal-track { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .slideUp { animation: none; }
}

/* Skip link: first thing a keyboard user tabs to */
.skip-link {
  position: fixed;
  top: -4rem;
  left: 0.75rem;
  z-index: 3000;
  padding: 0.75rem 1.1rem;
  border-radius: 8px;
  background: #ffffff;
  color: #1d1c1c;
  font-weight: 700;
  text-decoration: underline;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.skip-link:focus {
  top: 0.75rem;
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
main:focus { outline: none; }

/* Keyboard focus in the nav */
nav li a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -4px;
}
.nrad-link:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Quote: real text in the page (words are animated by the script), plus who said it */
.quote__text {
  margin: 0;
  color: #f3f1ea;
  font-family: "Playfair Display", serif;
}
.quote__cite {
  display: block;
  margin-top: 1.25rem;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-size: clamp(0.85rem, 1.3vw, 1.15rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3f1ea;
}

/* Pause / play for the background video */
.video-toggle {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  overflow: visible;
  cursor: pointer;
}
.video-toggle:hover { background: rgba(0, 0, 0, 0.8); }
.video-toggle:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.video-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}