@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfair-display-600.ttf") format("truetype");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display-700.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-300.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.ttf") format("truetype");
}

:root {
  --twl-color-ink: #111111;
  --twl-color-canvas: #181616;
  --twl-color-paper: #fffdf8;
  --twl-color-gold: #c9ac8c;
  --twl-color-gold-rgb: 201 172 140;
  --twl-color-amber: #b08100;
  --twl-color-brick: #bd322c;
  --twl-color-pine: #20342f;
  --twl-color-stone: #a7a7a7;
  --twl-color-muted: rgba(255, 253, 248, 0.72);
  --twl-accent-color: var(--twl-color-gold);
  --twl-accent-rgb: var(--twl-color-gold-rgb);
  --twl-font-body: "Poppins", sans-serif;
  --twl-font-display: "Playfair Display", serif;
  --twl-space-xs: 0.75rem;
  --twl-space-sm: 1rem;
  --twl-space-md: 1.5rem;
  --twl-space-lg: 2rem;
  --twl-space-xl: 3rem;
  --twl-space-2xl: 4.5rem;
  --twl-radius-md: 1rem;
  --twl-radius-lg: 1.75rem;
  --twl-radius-xl: 2.25rem;
  --twl-radius-pill: 999px;
  --twl-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.22);
  --twl-border-subtle: 1px solid rgba(255, 253, 248, 0.14);
  --twl-shell-width: min(1600px, calc(100vw - 2rem));
  --twl-shell-edge: clamp(1rem, 2.6vw, 2.5rem);
  --twl-content-inline-pad: clamp(1rem, 4vw, 69px);
  --twl-content-stack: clamp(0.9rem, 1.7vw, 1.35rem);
  --twl-header-height: 5rem;
  --twl-scroll-offset: calc(var(--twl-header-height) + 1.5rem);
  --twl-page-max-width: min(100%, 1600px);
  --twl-page-reading-width: 100%;
  --twl-glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008));
  --twl-logo-white: url("../img/logos/TheatreworksLive.png");
  --twl-logo-black: url("../img/logos/TheatreworksLive-print.png");
  --twl-logo-circle: url("../img/logos/TheatreworksLive-circle.png");
  --twl-spinner-logo: var(--twl-logo-circle);
  --twl-glass-border: 1px solid rgba(255, 255, 255, 0.22);
  --twl-glass-shadow:
    0 24px 56px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 34px rgb(var(--twl-accent-rgb) / 0.16);
  --twl-color-panel: #2b2b2b;
  --twl-color-panel-soft: #3a3a3a;
  --twl-form-height: 3rem;
  --twl-form-radius: 1rem;
  --twl-form-border: 1px solid rgba(255, 255, 255, 0.16);
  --twl-form-border-strong: 1px solid rgb(var(--twl-accent-rgb) / 0.65);
  --twl-form-surface: rgba(8, 8, 8, 0.72);
  --twl-form-surface-focus: rgba(255, 255, 255, 0.06);
  --twl-form-placeholder: rgba(255, 255, 255, 0.54);
}