/*
 * Fantastic Fest 2026 - Eventive microsite overrides
 * https://fantasticfest2026.eventive.org/
 *
 * Loaded by a <link> in the Configurator's head_scripts field (see README.md).
 * Not enqueued by WordPress - it lives in this repo so it stays versioned
 * next to the design tokens it mirrors.
 *
 * Fonts and imagery come from drop.pierre.io, which sends
 * Access-Control-Allow-Origin: * (required - @font-face is a CORS request and
 * a missing header fails silently with a fallback font).
 *
 * WHAT THIS FILE CAN AND CANNOT DO
 *
 * The app is React + material-ui 0.x + Radium. Essentially every node carries
 * its colour, spacing and `font-family: Lato, sans-serif` as an INLINE style.
 * Inline styles beat any stylesheet rule regardless of specificity, so almost
 * everything below needs !important - and colours are better set from the
 * Configurator's `palette` keys, which feed those inline styles at the source.
 *
 * Selector strategy, in order of preference:
 *   1. `Eventive--*` class names and `#Eventive--banner` - tenant-facing,
 *      most likely to survive an Eventive deploy.
 *   2. Semantic selectors: [role="menuitem"], button[type="button"].
 *   3. Attribute matches on the inline style string, e.g.
 *      div[style*="width: 256px"]. These are brittle by nature; each one is
 *      flagged below. They fail safe (the rule stops applying, nothing
 *      breaks) but will need re-checking after Eventive releases.
 */

/* ---------------------------------------------------------------- Fonts */

@font-face {
	font-family: 'Clarendon Wide';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://drop.pierre.io/fantastic-fest/fonts/clarendon-wide-500.woff2') format('woff2'),
		url('https://drop.pierre.io/fantastic-fest/fonts/clarendon-wide-500.woff') format('woff');
}

@font-face {
	font-family: 'Clarendon Wide';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://drop.pierre.io/fantastic-fest/fonts/clarendon-wide-700.woff2') format('woff2'),
		url('https://drop.pierre.io/fantastic-fest/fonts/clarendon-wide-700.woff') format('woff');
}

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://drop.pierre.io/fantastic-fest/fonts/cormorant-garamond-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://drop.pierre.io/fantastic-fest/fonts/cormorant-garamond-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://drop.pierre.io/fantastic-fest/fonts/cormorant-garamond-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Azeret Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://drop.pierre.io/fantastic-fest/fonts/azeret-mono-500.woff2') format('woff2');
}

/* --------------------------------------------------------------- Tokens */

/* Mirrors assets/css/tokens.css. Prefixed --ff- to avoid any collision. */
:root {
	--ff-bg: #1a1a1a;
	--ff-surface: #232323;
	--ff-text: #dbdbdb;
	--ff-text-secondary: #c3c3c3;
	--ff-text-muted: #888888;
	--ff-white: #ffffff;

	--ff-clarendon: 'Clarendon Wide', 'Times New Roman', serif;
	--ff-cormorant: 'Cormorant Garamond', Georgia, serif;
	--ff-mono: 'Azeret Mono', 'Courier New', monospace;

	--ff-glow-white: 0 0 2px #ffffff;
	--ff-glow-grey: 0 0 2px #909090;

	/*
	 * The other half of the design system's "stroke and blur". Figma reports
	 * it on a text layer as `border: 0.25px solid <fill colour>` - the stroke
	 * matches the fill every time, so it thickens the glyph rather than
	 * outlining it. Always pair with currentColor.
	 */
	--ff-text-stroke: 0.25px;

	/* Card elevation, matching .card in the theme's layout.css. */
	--ff-card-shadow: 0 0 10px 0 #5d5d5d;
}

/* ----------------------------------------------------------- Page shell */

/*
 * Eventive's own head <style> sets `html:not(.embedded){background-color:#fff}`.
 * Matching that selector exactly and loading later is enough to win - no
 * !important needed, since it is a stylesheet rule rather than an inline one.
 * `.embedded` is left alone: that is the iframe embed mode.
 */
html:not(.embedded) {
	background-color: var(--ff-bg) !important;
}

/*
 * Flat fill only. The edge smoke is the WebGL shader mounted by smoke.js -
 * see that file for why, rather than the smoke_left/right.png plates. This
 * colour is also the fallback whenever the shader doesn't start (no WebGL,
 * reduced-motion, blocked CDN).
 */
body {
	background-color: var(--ff-bg) !important;
	color: var(--ff-text) !important;
	font-size: 22px !important;
}

::selection {
	background-color: var(--ff-bg);
}

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

/* Cookie consent modal shown to new/anonymous visitors. */
#cc-main .cm__body {
	background-color: #1d1d1d !important;
}

#cc-main .cm__btn {
	font-size: 1rem !important;
}

/*
 * Ported from the theme's assets/css/effects.css. smoke.js appends the two
 * hosts to <body> and createSmokeSideShader() adds these classes itself, so
 * the selectors have to match the theme's exactly.
 *
 * z-index 0 + pointer-events none matches the WordPress build: the plates
 * paint above static in-flow content but never intercept clicks. Eventive's
 * own chrome sits far higher (app bar 1100, drawer 1300, dialogs 1500) so
 * none of it is covered.
 */
.smoke-side-shader {
	position: fixed;
	inset-block: 0;
	z-index: 0;
	width: min(var(--smoke-side-width, 347px), 48vw);
	pointer-events: none;
}

.smoke-side-shader--left {
	left: 0;
}

.smoke-side-shader--right {
	right: 0;
}

.smoke-side-shader__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* ----------------------------------------------------------- Typography */

/*
 * Eventive writes many content sizes inline. Raise its common sub-22px text
 * steps to the site's 22px body-copy floor. Leave the fixed navigation drawer
 * and buttons alone: both intentionally use more compact type.
 */
body :is(
	[style*="font-size: 11px"],
	[style*="font-size: 12px"],
	[style*="font-size: 13px"],
	[style*="font-size: 14px"],
	[style*="font-size: 15px"],
	[style*="font-size: 16px"],
	[style*="font-size: 17px"],
	[style*="font-size: 18px"],
	[style*="font-size: 19px"],
	[style*="font-size: 20px"],
	[style*="font-size: 21px"],
	[style*="font-size: 8pt"],
	[style*="font-size: 9pt"],
	[style*="font-size: 10pt"],
	[style*="font-size: 11pt"],
	[style*="font-size: 12pt"],
	[style*="font-size: 13pt"],
	[style*="font-size: 14pt"],
	[style*="font-size: 15pt"],
	[style*="font-size: 16pt"]
):not(div[style*="width: 256px"][style*="position: fixed"] *):not(button):not(button *) {
	font-size: 1.375rem !important;
}

/*
 * material-ui writes `font-family: Lato, sans-serif` inline on nearly every
 * element, so this has to be both broad and !important. Listed by element
 * rather than `body *` so the icomoon icon font (which sets its own
 * font-family on [class^="icon-"], a higher-specificity selector) is not
 * disturbed.
 *
 * If Eventive ever changes their stack string, `[style*="Lato"]` is a tighter
 * alternative that targets exactly the nodes carrying the inline declaration.
 */
body,
body div,
body span,
body p,
body a,
body li,
body button,
body input,
body select,
body textarea,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	font-family: var(--ff-cormorant) !important;
	color: var(--ff-text) !important;
}

body h1,
body h2,
body h3 {
	font-family: var(--ff-clarendon) !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
}

body h1 {
	line-height: 0.9 !important;
}

body h2,
body h3 {
	line-height: 1 !important;
}

/* --------------------------------------------------------- Welcome page */

/*
 * The banner <img> is the large wordmark over the smoke plate. It only
 * appears once `banner_image` is set in the Configurator - until then the
 * element renders with no src.
 */
#Eventive--banner {
	margin-top: 0 !important;
}

/*
 * The <h1> repeats the event name as text directly under the banner, which
 * the design does not have (the wordmark is the banner artwork). Prefer
 * `welcome_hide_title: true` in config; this is the belt-and-braces version.
 */
.Eventive--WelcomePage > div > div > h1,
.Eventive--WelcomePage > div > div > h2:empty {
	display: none !important;
}

/*
 * welcome_intro_content lands here, wrapped by Quill's .ql-* alignment
 * classes. Runs at the 22px step, so it takes the muted grey and grey glow.
 */
/*
 * All Configurator rich text - the welcome intro, pass descriptions, section
 * notices, the unreleased-schedule and unreleased-film-guide placeholders -
 * is body copy on the 22px step, so it takes that step's muted grey with the
 * grey glow and the 0.25px stroke.
 *
 * !important on the type properties because Eventive sizes some of these
 * blocks inline and some not: the welcome intro and pass descriptions arrive
 * with no font-size, but the schedule placeholder carries `font-size: 16px`
 * on the wrapper. Without it those blocks silently keep Eventive's size.
 */
.tenant-injected-html {
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.03em !important;
	color: var(--ff-text-muted) !important;
	text-shadow: var(--ff-glow-grey);
	-webkit-text-stroke: var(--ff-text-stroke) currentColor;
	paint-order: stroke fill;
}

/* Measure and centring are specific to the welcome page, not the type. */
.Eventive--WelcomePage .tenant-injected-html {
	max-width: 560px;
	margin: 0 auto;
}

.tenant-injected-html p {
	margin: 0 0 14px;
}

.tenant-injected-html p:last-child {
	margin-bottom: 0;
}

/*
 * Configurator rich text is authored in Quill, which writes colour inline -
 * the INDUSTRY pass description carries `color: rgb(0, 0, 0)`, i.e. black on
 * a dark card. Better stripped at source in the Configurator; this stops it
 * being invisible in the meantime.
 */
.tenant-injected-html [style*="color"] {
	color: inherit !important;
}

/* -------------------------------------------------------------- Buttons */

/*
 * Catch-all Material UI button treatment. Component-specific variants below
 * (navigation, disabled passes, and secondary actions) intentionally override
 * this baseline with their more specific selectors.
 */
body button[type="button"],
body button[type="submit"] {
	background-color: #d1d1d1 !important;
	color: var(--ff-bg) !important;
}

body button[type="button"] div,
body button[type="button"] span,
body button[type="submit"] div,
body button[type="submit"] span {
	color: var(--ff-bg) !important;
}

/*
 * Each button sits in a wrapper div carrying material-ui's paper shadow and
 * 2px radius inline; the <button> holds the fill, and a nested <span> holds
 * the label with `text-transform: uppercase` inline. All three need
 * overriding to get the design's square, light, sentence-case button.
 */
.Eventive--WelcomeButtons > div,
.eventive__pass-button__button {
	box-shadow: none !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	margin-right: 10px !important;
}

.Eventive--WelcomeButtons button[type="button"],
.eventive__pass-button__button button[type="button"] {
	background-color: var(--ff-text) !important;
	border-radius: 0 !important;
	/* Design gives the label box as 138x22; the button sizes off padding. */
	height: auto !important;
	line-height: normal !important;
	padding: 11px 20px !important;
}

/* Sold-out passes, so the dead control doesn't outshine the live ones. */
.eventive__pass-button__button button[disabled] {
	background-color: var(--ff-text-muted) !important;
}

/*
 * material-ui pins this inner wrapper to `height: 36px` inline, sized for its
 * own 14px label. The label is now 22px, and its line box is laid out from
 * the TOP of that fixed 36px box - so the text rides high with the slack
 * left underneath. Collapsing the wrapper to auto lets it shrink to the line
 * box, and the button's own symmetric padding does the centring.
 *
 * Both depths are listed because the two states nest differently: an enabled
 * button is button > div > div > span, a disabled one is button > div > span.
 */
.Eventive--WelcomeButtons button[type="button"] > div,
.Eventive--WelcomeButtons button[type="button"] > div > div,
.eventive__pass-button__button button[type="button"] > div,
.eventive__pass-button__button button[type="button"] > div > div,
.login-login button[type="button"] > div,
.login-login button[type="button"] > div > div,
.login-home button[type="button"] > div,
.login-home button[type="button"] > div > div,
.login-back button[type="button"] > div,
.login-back button[type="button"] > div > div {
	height: auto !important;
}

/*
 * Label spec straight from the design, with one correction: Figma reports a
 * text-layer stroke as `border: 0.25px solid #191919`, which in CSS would
 * draw a rectangle around the label rather than outlining the glyphs.
 * -webkit-text-stroke is the real equivalent. Note the stroke colour matches
 * the fill, so it thickens the glyph rather than outlining it - hence
 * currentColor, which keeps it correct if the button colour ever changes.
 * paint-order keeps the stroke from eating into the glyph interior.
 */
.Eventive--WelcomeButtons button[type="button"] span,
.eventive__pass-button__button button[type="button"] span,
.login-login button[type="button"] span,
.login-home button[type="button"] span,
.login-back button[type="button"] span {
	color: var(--ff-bg) !important;
	font-family: var(--ff-cormorant) !important;
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.03em !important;
	text-transform: none !important;
	text-shadow: var(--ff-glow-grey);
	-webkit-text-stroke: var(--ff-text-stroke) currentColor;
	paint-order: stroke fill;
}

/*
 * MENU and LOGIN in the app bar.
 *
 * BRITTLE - the bar carries no class, so it is matched on the inline
 * `z-index: 1100` that material-ui gives it. Nothing else in the app uses
 * that value (overlay 1200, drawer 1300, dialogs 1500, snackbar 2900), so it
 * is unambiguous today. Re-check after any Eventive release.
 *
 * Both buttons render as `button > div` with the label as a bare text node -
 * no <span>, unlike the welcome buttons - so the type rules go on that div.
 */
div[style*="z-index: 1100"] button[type="button"] {
	background-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--ff-text) !important;
}

/*
 * line-height is deliberately NOT set here. The design's 90% describes its
 * own 98x18 text box; the button inherits `line-height: 36px` inline, which
 * is what vertically centres the label in the 36px bar. Overriding it to 0.9
 * would drop the text to the top of that box - the same failure as the
 * welcome buttons.
 */
div[style*="z-index: 1100"] button[type="button"] > div {
	color: var(--ff-text) !important;
	font-family: var(--ff-clarendon) !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
}

/* --------------------------------------------------------------- Drawer */

/* Material UI action menus, such as the My Passes transfer menu. */
[role="menu"] {
	background-color: var(--ff-bg) !important;
}

/* White ticket/pass detail dialog containing QR codes. */
.eventive-background-container .eventive-content-container,
.eventive-background-container .eventive-content-container div,
.eventive-background-container .eventive-content-container span,
.eventive-background-container .eventive-content-container p,
.eventive-background-container .eventive-content-container a,
.eventive-background-container .eventive-content-container h1,
.eventive-background-container .eventive-content-container h2,
.eventive-background-container .eventive-content-container h3 {
	color: #212121 !important;
}

/*
 * The slide-out nav. Its header block takes palette.primary1Color, so the
 * teal there is fixed in config, not here. The menu rows are cleanly
 * addressable; the drawer panel itself has no class at all.
 */
/*
 * Header ("Fantastic Fest 2026") and menu rows both take the app bar's
 * MENU/LOGIN treatment.
 *
 * line-height is left alone again: the rows carry `line-height: 48px` /
 * `min-height: 48px` inline, which is what centres the label and holds the
 * touch target. The header keeps its own inline 26px.
 */
div[style*="width: 256px"] > div:first-child > div,
span[role="menuitem"],
span[role="menuitem"] div {
	color: var(--ff-text) !important;
	font-family: var(--ff-clarendon) !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
}

/* Logged-in account summary beneath the drawer title. */
div[style*="width: 256px"][style*="position: fixed"] > div:first-child > div:last-child,
div[style*="width: 256px"][style*="position: fixed"] > div:first-child > div:last-child div,
div[style*="width: 256px"][style*="position: fixed"] > div:first-child > div:last-child a {
	font-family: var(--ff-clarendon) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
}

div[style*="width: 256px"][style*="position: fixed"] > div:first-child > div:last-child > div:first-child {
	margin-bottom: 6px !important;
}

div[style*="width: 256px"][style*="position: fixed"] > div:first-child > div:last-child a {
	color: var(--ff-text-secondary) !important;
	text-decoration: none !important;
}

/*
 * Current-page indicator, mirroring .primary-menu in the theme's layout.css:
 * every row carries a 1px glow, the active one a 4px. Needed because the
 * rule above flattens Eventive's own cue - it marks the active row by colour
 * alone (#d1d1d1 against #212121), which uniform --ff-text erases.
 *
 * BRITTLE - the active row has no class or aria-current, so it is matched on
 * the two inline values material-ui only writes on the selected item. Either
 * one alone would do; both are listed so a change to one doesn't silently
 * drop the indicator. Note these match the style ATTRIBUTE text, so the
 * `font-weight: 500 !important` above doesn't interfere.
 */
span[role="menuitem"] {
	text-shadow: 0 0 1px var(--ff-white) !important;
}

span[role="menuitem"][style*="font-weight: 400"],
span[role="menuitem"][style*="rgb(209, 209, 209)"] {
	text-shadow: 0 0 4px var(--ff-white) !important;
}

/*
 * BRITTLE - matches the drawer panel by its inline width. There is no class
 * on this node. Re-check after any Eventive release.
 *
 * Two surfaces carry material-ui's white `canvasColor` inline, not one: the
 * panel itself, and the scrolling list container inside it. Missing the
 * second leaves the drawer looking entirely unstyled, since the list covers
 * nearly all of the panel.
 *
 * Better fixed in config if `invert_colors` does what its name suggests -
 * canvasColor is not exposed through the `palette` keys, so this is CSS
 * standing in for a setting.
 */
div[style*="width: 256px"][style*="position: fixed"] {
	background-color: var(--ff-surface) !important;
}

/* The scrolling list container - last child of the panel, below the header. */
div[style*="width: 256px"][style*="position: fixed"] > div:last-child {
	background-color: transparent !important;
}

/* -------------------------------------------------- Account activation */

/*
 * BRITTLE - Eventive's activation fields and drawer share the same inline
 * width. Keep the field wrappers transparent and undo material-ui's 0.75
 * floating-label scale, while retaining its vertical offset.
 */
form div[style*="width: 256px"] {
	background-color: transparent !important;
}

form div[style*="width: 256px"] > label {
	color: var(--ff-text-secondary) !important;
	font-size: 16px !important;
	transform: translate(0, -28px) !important;
}

form div[style*="width: 256px"] > input {
	color: var(--ff-text) !important;
}

form div[style*="width: 256px"] > input:disabled {
	color: var(--ff-text-muted) !important;
	-webkit-text-fill-color: var(--ff-text-muted) !important;
}

/*
 * Welcome/instruction copy immediately above account forms. Do not include
 * the inline colour in the match: Eventive varies that palette value between
 * account states even though the 11pt text treatment remains the same.
 */
div:has(> form) > div[style*="font-size: 11pt"],
div[style*="font-size: 11pt"]:has(+ form),
div:has(> form) > div[style*="font-size: 11pt"] > div,
div[style*="font-size: 11pt"]:has(+ form) > div {
	color: var(--ff-text-secondary) !important;
	font-size: 22px !important;
	line-height: 1.5 !important;
}

/* Activation action: Eventive's pale button needs a dark, readable label. */
form:has(div[style*="width: 256px"]) button[type="button"] {
	background-color: #d1d1d1 !important;
}

form:has(div[style*="width: 256px"]) button[type="button"] span {
	color: var(--ff-bg) !important;
}

/* --------------------------------------------------------------- Footer */

.Eventive--Footer {
	background-color: transparent !important;
	color: var(--ff-text-muted) !important;
	padding: 72px 24px !important;
}

.Eventive--Footer a {
	color: var(--ff-text-muted) !important;
}

/* -------------------------------------------------- Film search bar */

/*
 * /films - the floating filter/search pill. Its own white fill and shadow
 * are the intended float-above-smoke treatment and stay as-is; only the
 * typed value is wrong. The <input> carries no inline `color` of its own, so
 * it was inheriting the site-wide light grey from the `body input` rule
 * above - illegible on this pill's white background. That rule loses here on
 * specificity (a class beats a bare element), so no !important tug-of-war,
 * just a more specific selector.
 */
.Films--film_filter_editor input {
	color: var(--ff-bg) !important;
}

/*
 * The global ::selection rule above paints the page's dark bg colour, which
 * is right for selections on the page itself but unreadable here: dark text
 * on a dark highlight, on this input's own white pill. Same button grey
 * already used elsewhere as a light neutral, with the input's dark text
 * colour carried through so the selected characters stay legible.
 */
.Films--film_filter_editor input::selection {
	background-color: #d1d1d1;
	color: var(--ff-bg);
}

/* --------------------------------------------------------- Passes page */

/*
 * /passes/buy. Eventive renders one bordered container with the passes as
 * flush columns divided by 1px rules; the design wants each column to be a
 * separate card. So the container loses its own border and gains a gap, and
 * each column picks up the border and surface fill instead.
 *
 * Anchored on `h2#passes` - the section heading is given a stable id from
 * `pass_sales_sections[].title`, and the grid is always its next sibling.
 * The equivalent memberships section would be h2#memberships; it isn't
 * styled here because memberships_enabled is false.
 */
h2#passes {
	text-align: left !important;
	color: var(--ff-text) !important;
	/* Design asks for 30px under the heading; inline gives 0.5em = 15px. */
	margin: 1em 0 30px !important;
}

h2#passes + div {
	border: 0 !important;
	border-radius: 0 !important;
	gap: 30px !important;
	flex-wrap: wrap !important;
}

/*
 * Each pass column becomes its own card: no border, just the surface fill and
 * the design system's card shadow.
 *
 * Two per row. The inline `flex: 1 1 0%` makes every column share the line
 * equally, so a 4th pass wrapping onto its own row stretches to full width -
 * flex-grow has to go to 0 and the basis to half the row (minus half the
 * 30px gap) for a tidy 2x2. Odd counts then leave a half-width card rather
 * than a full-bleed one. min-width drops it to a single column when half a
 * row gets too narrow to read.
 */
h2#passes + div > div {
	background-color: var(--ff-surface) !important;
	/* Shorthand so the inline `border-right` divider is overridden too. */
	border: 0 !important;
	box-shadow: var(--ff-card-shadow) !important;
	padding: 30px !important;
	flex: 0 1 calc(50% - 15px) !important;
	width: auto !important;
	min-width: 260px !important;
}

/* Pass name: 16px/0.08em uppercase, with the white glow and stroke. */
h2#passes + div > div > h4 {
	margin: 0 0 20px !important;
	text-align: left !important;
	color: var(--ff-text) !important;
	font-family: var(--ff-cormorant) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	line-height: 1.5 !important;
	text-transform: uppercase !important;
	text-shadow: var(--ff-glow-white) !important;
	-webkit-text-stroke: var(--ff-text-stroke) currentColor !important;
	paint-order: stroke fill !important;
}

/* Buy button: bottom-left rather than centred. */
h2#passes + div > div > div:last-child {
	text-align: left !important;
	margin-top: 30px !important;
}

/* ----------------------------------------------------------- Login page */

/*
 * Unusually well marked up - .Eventive--LoginPage plus .login-* on every
 * control - so none of this needs an inline-style match.
 */

/* Intro copy on the 22px body step, same as every other page. */
.Eventive--LoginPage > div > p {
	margin: 0 0 30px !important;
	font-family: var(--ff-cormorant) !important;
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.03em !important;
	color: var(--ff-text-muted) !important;
	text-shadow: var(--ff-glow-grey);
	-webkit-text-stroke: var(--ff-text-stroke) currentColor;
	paint-order: stroke fill;
}

/*
 * Fields. Every part of these was drawn for a light canvas: the typed value
 * is #212121, the floating label #9e9e9e, the resting underline #e0e0e0 and
 * the focus underline picks up primary1Color - now #1a1a1a. On a dark page
 * that means invisible input text and an invisible focus state, so these are
 * corrected regardless of the styling brief.
 */
.login-email-address input,
.login-password input {
	color: var(--ff-text) !important;
	font-family: var(--ff-cormorant) !important;
	font-size: 1.375rem !important;
	font-weight: 700 !important;
}

.login-email-address > div:first-child,
.login-password > div:first-child {
	color: var(--ff-text-muted) !important;
	font-family: var(--ff-cormorant) !important;
	font-weight: 700 !important;
}

/* Resting underline. */
.login-email-address hr:first-child,
.login-password hr:first-child {
	border-bottom-color: #5d5d5d !important;
}

/* Focus underline - the one that scales in on focus. */
.login-email-address hr:last-child,
.login-password hr:last-child {
	border-bottom-color: var(--ff-text) !important;
}

/* Shared wrapper: material-ui's paper shadow and 2px radius, removed. */
.login-login,
.login-home,
.login-back {
	box-shadow: none !important;
	border-radius: 0 !important;
	background-color: transparent !important;
}

.login-login button[type="button"],
.login-home button[type="button"],
.login-back button[type="button"] {
	border-radius: 0 !important;
	height: auto !important;
	line-height: normal !important;
	padding: 11px 20px !important;
}

/*
 * Login is the call to action: solid fill, dark label, on its own row.
 *
 * All three wrappers are inline-block siblings in one container, so making
 * this one block-level is enough to break the line - Home and Go back then
 * flow onto the next row together. The button inside carries `width: 100%`
 * inline, which would stretch it across the full row once the wrapper is a
 * block, so it goes back to shrink-to-fit and centres on the inherited
 * text-align.
 */
.login-login {
	display: block !important;
	margin-bottom: 20px !important;
}

.login-login button[type="button"] {
	background-color: var(--ff-text) !important;
	width: auto !important;
}

/* Was offsetting the pair, now that it starts the row rather than following. */
.login-home {
	margin-left: 0 !important;
}

/*
 * Home and Go back are navigation, not calls to action - transparent with a
 * light label, so only one control on the form reads as the primary one.
 */
.login-home button[type="button"],
.login-back button[type="button"] {
	background-color: transparent !important;
}

.login-home button[type="button"] span,
.login-back button[type="button"] span {
	color: var(--ff-text) !important;
	text-shadow: var(--ff-glow-white);
}

/*
 * Eventive's global stylesheet sets `a:link, a:visited { color: #0000f2 }`,
 * which outranks a bare class selector - hence !important rather than just
 * matching on .login-forgot-password.
 */
.login-forgot-password {
	font-family: var(--ff-cormorant) !important;
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.03em !important;
	color: var(--ff-text-muted) !important;
	text-decoration: underline !important;
	text-shadow: var(--ff-glow-grey);
}

/* ----------------------------------------------------------- Film page */

/*
 * /films/<slug>. The backdrop/poster block at the top already sits on a dark
 * `rgba(0, 0, 0, 0.54)` overlay, but the info block below it (showings,
 * synopsis, metadata list) is Eventive's own white card with near-black text
 * - both colours are inline but not `!important`, so an `!important`
 * stylesheet rule beats them per the cascade note at the top of this file.
 * `body div` above already re-colours the text to --ff-text; only the white
 * fill is unaddressed.
 *
 * BRITTLE - the info block has no class, so it is matched as the unclassed
 * direct child of `.FilmPage` carrying `padding: 16px` inline. `.FilmPage`
 * itself is also flattened, belt-and-braces, in case its own white shows
 * through the 8px gap below the backdrop block.
 */
.FilmPage {
	background-color: var(--ff-bg) !important;
}

.FilmPage > div[style*="padding: 16px"] {
	background-color: var(--ff-bg) !important;
}

/*
 * Divider under the showings button, same white-canvas grey. Not scoped to
 * the padding: 16px container above since Radium may write this div's style
 * attribute in a different property order; matching within .FilmPage is
 * still specific enough.
 */
.FilmPage div[style*="border-bottom: 1px solid rgb(204, 204, 204)"] {
	border-bottom-color: var(--ff-surface) !important;
}

/*
 * Genre/audience pills (e.g. "Feature", "Strong Women"). `.Tag` is a real
 * component class - not scoped to .FilmPage since the same pills also render
 * in the film guide grid. Eventive fills and borders these per-tag from
 * `tag_colors` (bright green/violet); the Figma design wants one flat, muted
 * treatment instead. `background` and `border` are inline shorthands set by
 * Radium, not `!important`, so the stylesheet wins per the cascade note at
 * the top of this file. `body span` above already re-colours the label text.
 */
.Tag {
	background: transparent !important;
	border: 1px solid var(--ff-text-muted) !important;
	box-shadow: var(--ff-glow-grey) !important;
}

/* ------------------------------------------------------------- Not done */

/*
 * The design's bordered intro panel and the large bordered content box below
 * the buttons have no markup yet - they come from `welcome_custom.__html`,
 * which is currently empty. Author that HTML in the Configurator first (it
 * renders inside .tenant-injected-html), then style it here.
 */