/*
Theme Name: Runner Up 2025
Description: Runner Up Rooftop Bar theme, built to the Runner Up Brand Bible (July 2023): Amelia + Derniere headings, Neue Haas Grotesk sub-headings and body, Salmon / Bermuda / Yolk palette.
Version: 1.0
Text Domain: blankslate
*/

/* ==========================================================================
   Brand tokens
   ========================================================================== */

@font-face {
	font-family: 'am';
	src: url('t/Amelia.woff2') format('woff2'), url('t/Amelia.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'den';
	src: url('t/Derniere.woff2') format('woff2'), url('t/Derniere.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colour — Brand Bible p.29. Primary + accent for each. */
	--salmon: #ef4c4f;         /* Pantone 235U */
	--salmon-accent: #ff6b6d;
	--bermuda: #1c75bc;        /* Pantone 116U */
	--bermuda-accent: #5095cb;
	--yolk: #f0b530;           /* Pantone 3076U */
	--yolk-accent: #f6d02c;
	--paper: #dfe2de;          /* light text on dark grounds */
	--stone: #c7c6b3;          /* neutral section ground */
	--ink: #000;

	/* Ticket palette — sampled from vintage raffle tickets */
	--t-lime: #6cb564;
	--t-lilac: #c2a4e2;
	--t-pink: #febdcb;
	--t-kraft: #d2a780;
	--t-red: #e95250;
	--t-white: #f9fbfc;
	--t-green: #47a66f;
	--t-yellow: #f6e848;
	--t-ink: #231f20;          /* print black */
	--t-blue: #0a5cb8;         /* print blue */

	/* Type — Brand Bible pp.25–28 */
	--font-h1: 'am', neue-haas-grotesk-display, helvetica, arial, sans-serif;     /* Amelia */
	--font-h2: 'den', 'am', georgia, serif;                                       /* Derniere */
	--font-text: neue-haas-grotesk-display, 'Helvetica Neue', helvetica, arial, sans-serif;

	/* Scale. Heading and its grotesk sub-heading share one size, as in the bible's section openers. */
	/* Neue Haas treatment, shared by every NHG element.
	   Adobe numbers this family one step up: 500 = 55 Roman, 600 = 65 Medium. */
	--nhg-weight: 600;
	--nhg-stroke: 0.035em;

	--fs-label: 0.6875rem;                                    /* 11px — "PART ONE", "NOTES" */
	--fs-body: clamp(1.2rem, 1.02rem + 0.36vw, 1.425rem);     /* 19 → 23px */
	--fs-heading: clamp(2rem, 1.1rem + 1.9vw, 3rem);          /* 32 → 48px */
	--fs-nav: clamp(1.5rem, 1.1rem + 0.9vw, 2rem);            /* 24 → 32px */
	--lh-heading: 1.08;
	--lh-body: 1.25;

	/* Spacing — 8px base */
	--s-1: 0.5rem;
	--s-2: 1rem;
	--s-3: 1.5rem;
	--s-4: 2.5rem;
	--s-5: 4rem;
	--s-6: 6rem;
	--gutter: clamp(1.5rem, 3.4vw, 2.5rem);   /* bible page margin ≈ 40px */
	--section-y: clamp(4rem, 8vw, 7.5rem);
	--measure: 28em;                          /* centred body copy runs ~40 characters */
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--stone);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: 0.01em;
	/* Bible p.29: body copy is Neue Haas Grotesk Medium, with a slight stroke for the ink-bleed feel (p.28 tip). */
	font-weight: var(--nhg-weight);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

p {
	margin: 0 0 1.25em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover,
a:focus-visible {
	opacity: 0.75;
}

a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

address {
	font-style: normal;
}

strong,
b {
	font-weight: var(--nhg-weight);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-h1);
	font-weight: normal;
	font-size: var(--fs-heading);
	line-height: var(--lh-heading);
	letter-spacing: 0.02em;
	-webkit-text-stroke: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	top: var(--s-1);
	left: var(--s-1);
	z-index: 1000;
	padding: var(--s-2) var(--s-3);
	background: var(--stone);
	color: var(--ink);
	font-size: var(--fs-label);
	text-transform: uppercase;
}

/* ==========================================================================
   Type roles
   ========================================================================== */

/* Neue Haas stroke — set on each NHG role so the stroke tracks that element's own size */
body,
.ru-label,
.ru-heading__b,
.ru-button,
.ru-events .event p.event-date,
.ru-instagram #sb_instagram .sbi_follow_btn a {
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
}

/* Small caps label — the bible's "PART ONE" / "PRIMARY HEADING 1" */
.ru-label {
	margin: 0 0 var(--s-4);
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: var(--nhg-weight);
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Section opener: Amelia heading over a Neue Haas Medium sub-heading at the same size */
.ru-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 var(--s-4);
}

.ru-heading__a {
	font-family: var(--font-h1);
	letter-spacing: 0.02em;
}

.ru-heading__b {
	font-family: var(--font-text);
	font-weight: var(--nhg-weight);
	letter-spacing: -0.01em;
}

.ru-heading--sub {
	margin-top: var(--s-5);
}

/* Centred body copy column */
.ru-prose,
.ru-section > p,
.ru-faq > p {
	max-width: var(--measure);
	margin-left: auto;
	margin-right: auto;
}

.ru-prose a,
.ru-section p a {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.18em;
}

.ru-button {
	display: inline-block;
	margin-top: var(--s-3);
	padding: 0.95em 1.6em 0.9em;
	background: transparent;
	color: var(--btn-bg, var(--salmon));
	border: 2px solid var(--btn-bg, var(--salmon));
	border-radius: 0;
	font-size: 0.8125rem;
	font-weight: var(--nhg-weight);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ru-button:hover,
.ru-button:focus-visible {
	opacity: 1;
	background: var(--btn-bg, var(--salmon));
	color: var(--btn-fg, var(--yolk-accent));
}

/* ==========================================================================
   Layout — two columns (nav / content)
   ========================================================================== */

.ru {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
}

/* Left: clouds + nav, pinned while the content column scrolls */
.ru-side {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden auto;
	background: url('img/clouds-poster.jpg') center / cover var(--bermuda-accent);
	color: var(--salmon);
	scrollbar-width: none;
}

.ru-side::-webkit-scrollbar {
	display: none;
}

.ru-side__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.ru-side__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-4);
	min-height: 100%;
	padding: var(--section-y) var(--gutter);
	text-align: center;
}

.ru-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ru-nav li {
	font-family: var(--font-h1);
	font-size: var(--fs-nav);
	line-height: 1.12;
	letter-spacing: 0.02em;
	-webkit-text-stroke: 0;
}

.ru-nav a:hover {
	opacity: 1;
	color: var(--bermuda);
}

.ru-logo {
	display: block;
	width: min(45%, 17rem);
}

.ru-logo:hover {
	opacity: 1;
}

/* Right: stacked colour blocks */
.ru-main {
	min-width: 0;
	background: var(--stone);
}

.ru-main > article:not(.ru-stack) {
	padding: var(--section-y) var(--gutter);
	text-align: center;
}

.ru-section {
	padding: var(--section-y) var(--gutter);
	text-align: center;
}

.ru-fill {
	min-height: 100vh;
}

.ru-photo {
	margin: 0;
}

.ru-photo img {
	width: 100%;
}

/* ==========================================================================
   Colour pairings — taken from the bible's spreads
   ========================================================================== */

/* Each scheme sets: ground, base colour (labels), heading/accent colour, body copy colour, button.
   Sections pick a scheme in Appearance → Customize → Section colours. */
.ru-salmon {
	--sc-bg: var(--salmon);
	--sc-fg: var(--yolk-accent);
	--sc-head: var(--yolk-accent);
	--sc-body: var(--yolk-accent);
	--btn-bg: var(--yolk-accent);
	--btn-fg: var(--salmon);
}

.ru-yolk {
	--sc-bg: var(--yolk);
	--sc-fg: var(--salmon);
	--sc-head: var(--salmon);
	--sc-body: var(--salmon);
	--btn-bg: var(--salmon);
	--btn-fg: var(--yolk-accent);
}

.ru-bermuda {
	--sc-bg: var(--bermuda);
	--sc-fg: var(--yolk-accent);
	--sc-head: var(--yolk-accent);
	--sc-body: var(--paper);
	--btn-bg: var(--yolk-accent);
	--btn-fg: var(--bermuda);
}

.ru-paper {
	--sc-bg: var(--stone);
	--sc-fg: var(--ink);
	--sc-head: var(--salmon);
	--sc-body: var(--ink);
	--btn-bg: var(--salmon);
	--btn-fg: var(--yolk-accent);
}

.ru-night {
	--sc-bg: var(--ink);
	--sc-fg: var(--paper);
	--sc-head: var(--yolk-accent);
	--sc-body: var(--paper);
	--btn-bg: var(--yolk-accent);
	--btn-fg: var(--ink);
}

/* Ticket schemes: paper ground, black print, blue where the ticket uses it */
.ru-lime {
	--sc-bg: var(--t-lime);
	--sc-fg: var(--t-ink);
	--sc-head: var(--t-ink);
	--sc-body: var(--t-ink);
	--btn-bg: var(--t-ink);
	--btn-fg: var(--t-lime);
}

.ru-lilac {
	--sc-bg: var(--t-lilac);
	--sc-fg: var(--t-ink);
	--sc-head: var(--t-blue);
	--sc-body: var(--t-ink);
	--btn-bg: var(--t-blue);
	--btn-fg: var(--t-lilac);
}

.ru-pink {
	--sc-bg: var(--t-pink);
	--sc-fg: var(--t-ink);
	--sc-head: var(--t-ink);
	--sc-body: var(--t-ink);
	--btn-bg: var(--t-ink);
	--btn-fg: var(--t-pink);
}

.ru-kraft {
	--sc-bg: var(--t-kraft);
	--sc-fg: var(--t-ink);
	--sc-head: var(--t-blue);
	--sc-body: var(--t-ink);
	--btn-bg: var(--t-blue);
	--btn-fg: var(--t-kraft);
}

.ru-red {
	--sc-bg: var(--t-red);
	--sc-fg: var(--t-ink);
	--sc-head: var(--t-ink);
	--sc-body: var(--t-ink);
	--btn-bg: var(--t-ink);
	--btn-fg: var(--t-red);
}

.ru-white {
	--sc-bg: var(--t-white);
	--sc-fg: var(--t-ink);
	--sc-head: var(--t-blue);
	--sc-body: var(--t-ink);
	--btn-bg: var(--t-blue);
	--btn-fg: var(--t-white);
}

.ru-green {
	--sc-bg: var(--t-green);
	--sc-fg: var(--t-ink);
	--sc-head: var(--t-ink);
	--sc-body: var(--t-ink);
	--btn-bg: var(--t-ink);
	--btn-fg: var(--t-green);
}

.ru-yellow {
	--sc-bg: var(--t-yellow);
	--sc-fg: var(--t-ink);
	--sc-head: var(--t-ink);
	--sc-body: var(--t-ink);
	--btn-bg: var(--t-ink);
	--btn-fg: var(--t-yellow);
}

.ru-salmon,
.ru-yolk,
.ru-bermuda,
.ru-paper,
.ru-night,
.ru-lime,
.ru-lilac,
.ru-pink,
.ru-kraft,
.ru-red,
.ru-white,
.ru-green,
.ru-yellow {
	background-color: var(--sc-bg);
	color: var(--sc-fg);
}

.ru-night {
	background: url('img/night.jpg') center / cover var(--sc-bg);
}

.ru-section h1,
.ru-section h2,
.ru-section h3,
.ru-section .ru-heading__a,
.ru-section .ru-events .event p {
	color: var(--sc-head);
}

/* Grotesk sub-heading stays in the base print colour, like the ticket numbers */
.ru-section .ru-heading__b {
	color: var(--sc-fg);
}

.ru-section .ru-hours,
.ru-section .ru-prose,
.ru-section .ru-about,
.ru-faq p {
	color: var(--sc-body);
}

.ru-section .ru-events .event p.event-date {
	color: var(--sc-fg);
}

/* ==========================================================================
   Sections
   ========================================================================== */

/* Lists set exactly like paragraphs: same size, leading, weight and centred measure */
.ru-section ul:not(.ru-menu__list),
.ru-section ol {
	max-width: var(--measure);
	margin: 0 auto 1.25em;
	padding: 0;
	list-style: none;
}

.ru-section ul:not(.ru-menu__list):last-child,
.ru-section ol:last-child {
	margin-bottom: 0;
}

.ru-section li {
	margin: 0;
}

/* What's On — Events Manager list */
.ru-events .em,
.ru-events .em-view-container,
.ru-events .em-list {
	all: unset;
	display: block;
}

.ru-events .event {
	margin: 0 0 var(--s-5);
}

.ru-events .event:last-child {
	margin-bottom: 0;
}

.ru-events .event p {
	max-width: none;
	margin: 0;
	font-family: var(--font-h1);
	font-size: calc(var(--fs-heading) * 0.75);
	line-height: var(--lh-heading);
	letter-spacing: 0.02em;
	-webkit-text-stroke: 0;
}

.ru-events .event p.event-date {
	margin-bottom: var(--s-2);
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: var(--nhg-weight);
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ru-events .event a {
	text-decoration: none;
}

.ru-events .event a:hover {
	opacity: 0.7;
}

/* Specials */
.ru-specials {
	width: 100%;
	max-width: 36rem;
	margin: 0 auto;
}

/* About — Derniere, the bible's second heading face */
.ru-about {
	max-width: var(--measure);   /* same text column as the FAQ */
	margin: 0 auto;
}

.ru-about p {
	margin: 0 0 0.9em;
	font-family: var(--font-h2);
	font-size: clamp(1.625rem, 1rem + 1.3vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: 0;
	-webkit-text-stroke: 0.8px currentColor;
}

.ru-about p:last-child {
	margin-bottom: 0;
}

.ru-about a {
	text-decoration: none;
	color: var(--sc-head);
}

/* FAQ */
.ru-faq h2 {
	margin: 0 0 var(--s-5);
}

.ru-faq p + p {
	margin-top: var(--s-4);
}

.ru-faq p strong {
	display: block;
	margin-bottom: var(--s-1);
	color: var(--sc-head);
	font-weight: var(--nhg-weight);
}

.ru-faq p strong + br {
	display: none;
}

.ru-faq a {
	color: var(--sc-head);
}

/* Instagram (Smash Balloon) */
.ru-instagram #sb_instagram {
	padding-bottom: 0 !important;
}

.ru-instagram #sb_instagram .sbi_follow_btn a {
	padding: 0.95em 1.6em 0.9em;
	background: transparent !important;
	color: var(--btn-bg) !important;
	border: 2px solid var(--btn-bg);
	border-radius: 0;
	font-family: var(--font-text);
	font-size: 0.8125rem;
	font-weight: var(--nhg-weight);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ru-instagram #sb_instagram .sbi_follow_btn a:hover,
.ru-instagram #sb_instagram .sbi_follow_btn a:focus-visible {
	opacity: 1;
	background: var(--btn-bg) !important;
	color: var(--btn-fg) !important;
}

.ru-instagram #sb_instagram .sbi_follow_btn svg {
	display: none;
}

/* ==========================================================================
   Menu page
   ========================================================================== */

.ru-menu__group {
	max-width: 32rem;
	margin: var(--s-5) auto 0;
	text-align: left;
}

.ru-menu__title {
	margin-bottom: var(--s-3);
	text-align: center;
}

.ru-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ru-menu__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-3);
	padding: var(--s-2) 0;
	border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.ru-menu__note {
	display: block;
	margin-top: 0.15em;
	font-size: 0.8em;
	opacity: 0.85;
}

.ru-menu__price {
	font-weight: var(--nhg-weight);
}

span.brush {
	font-family: var(--font-h2);
	font-size: 1.3em;
	letter-spacing: 0;
	-webkit-text-stroke: 0.5px currentColor;
}

/* ==========================================================================
   Small screens — columns stack, nav becomes the opening panel
   ========================================================================== */

@media (max-width: 768px) {
	.ru {
		grid-template-columns: 1fr;
	}

	.ru-side {
		position: relative;
		height: auto;
		min-height: 88vh;
		min-height: 88svh;
		overflow: hidden;
	}

	.ru-logo {
		width: min(60%, 16rem);
	}

	.ru-fill {
		min-height: 0;
	}
}