/*
Theme Name: Runner Up Frame
Description: Runner Up one-page theme — logo over the clouds, marquee frame, colour stripes and print grain. Built to the Runner Up Brand Bible (Amelia, Derniere, Neue Haas; Salmon / Bermuda / Yolk) with retro accents in New Spirit Condensed, Suspiria New and Shark New.
Version: 1.0
Text Domain: runnerup-frame
*/

/* ==========================================================================
   Fonts
   ========================================================================== */

@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: 'shark';
	src: url('t/Shark-New.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	/* Shark New (Lucas Liccini revival) covers basic Latin plus £ € dashes and curly quotes;
	   the few characters it lacks (< > \ ^ ` { | } ~) fall back to Neue Haas */
	unicode-range: U+0020-003B, U+003D, U+003F-005B, U+005D, U+005F, U+0061-007A, U+00A3, U+2013-2014, U+2018-201D, U+20AC;
}

@font-face {
	font-family: 'suspiria';
	src: url('t/Suspiria-New.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	/* Suspiria New: basic Latin, accented letters, curly quotes, dashes, ellipsis, € and £ */
	unicode-range: U+0020-007E, U+00A1-00A3, U+00A9, U+00AB, U+00AE, U+00B0, U+00B7, U+00BB, U+00BF-00CF, U+00D1-00D6, U+00D8-00DD, U+00DF-00EF, U+00F1-00F6, U+00F8-00FD, U+00FF, U+0152-0153, U+0178, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122;
}

@font-face {
	font-family: 'den';
	src: url('t/Derniere-New-Medium.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	/* Derniere New Medium (Lucas Liccini revival): letters, digits, ! & ' , . : ; ? £ — curly single quotes are
	   mapped to its apostrophe in the web copy. Anything else (hyphens, brackets, accents) falls back to Neue Haas. */
	unicode-range: U+0020-0021, U+0026-0027, U+002C, U+002E, U+0030-003B, U+003F, U+0041-005A, U+0061-007A, U+00A3, U+2018-2019;
}

/* Banner font choices (Customize → Runner Up Homepage → Banners) */
@font-face {
	font-family: 'den-regular';
	src: url('t/Derniere-New.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020-0021, U+0026-0027, U+002C, U+002E, U+0030-003B, U+003F, U+0041-005A, U+0061-007A, U+00A0, U+00A3;
}

@font-face {
	font-family: 'strada';
	src: url('t/Strada-New.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020-003B, U+003D, U+003F-005B, U+005D, U+005F, U+0061-007A, U+00A0, U+00A3, U+2013-2014, U+2018-2019, U+201C-201D, U+20AC;
}

@font-face {
	font-family: 'vanderburg';
	src: url('t/Vanderburg-New.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020-003B, U+003D, U+003F-005B, U+005D, U+005F, U+0061-007A, U+00A0, U+00A3, U+2013-2014, U+2018-2019, U+201C-201D, U+20AC;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* Palette sampled from vintage price-gun stickers (color/ references), mapped onto the brand roles */
	--salmon: #e65b2c;
	--salmon-accent: #ee9159;
	--bermuda: #26639b;
	--bermuda-accent: #a7c0d3;
	--yolk: #ddad56;
	--yolk-accent: #f5ce36;
	--paper: #e2dbc6;
	--stone: #cdc3b3;
	--ink: #121010;

	/* Tag palette — more price-sticker colours, used by the coloured sections */
	--t-lime: #90d87d;
	--t-lilac: #c8a2ae;
	--t-pink: #ee66af;
	--t-kraft: #e9a75c;
	--t-red: #ae341d;
	--t-white: #efeff4;
	--t-green: #6e9987;
	--t-yellow: #e3ba53;
	--t-ink: #121010;
	--t-blue: #26639b;

	--font-h1: 'am', neue-haas-grotesk-display, helvetica, arial, sans-serif;
	--font-h2: 'den', neue-haas-grotesk-display, helvetica, arial, sans-serif;
	--font-text: neue-haas-grotesk-display, 'Helvetica Neue', helvetica, arial, sans-serif;
	/* Retro accents */
	--font-feature: new-spirit-condensed, georgia, serif;              /* menu feature names (Adobe kit) */
	/* Characters a display face lacks fall back to Neue Haas */
	--font-gig: 'suspiria', neue-haas-grotesk-display, helvetica, arial, sans-serif;  /* gig names */
	--font-stripe: 'shark', neue-haas-grotesk-display, helvetica, arial, sans-serif;  /* stripe bands */
	--font-glyph: 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif; /* dingbats */

	/* Neue Haas: Adobe numbers this family one step up — 500 = 55 Roman, 600 = 65 Medium.
	   Set at 55 Roman with the stroke for a slightly inked Medium look. */
	--nhg-weight: 500;
	--nhg-stroke: 0.035em;

	--fs-label: 0.75rem;
	--fs-nav: 0.8125rem;
	--fs-body: clamp(1.2rem, 1.02rem + 0.36vw, 1.425rem);
	--fs-heading: clamp(2.5rem, 1.4rem + 2.8vw, 4rem);
	--lh-body: 1.25;

	--s-1: 0.5rem;
	--s-2: 1rem;
	--s-3: 1.5rem;
	--s-4: 2.5rem;
	--s-5: 4rem;
	--s-6: 6rem;

	--frame-pad: clamp(1.25rem, 4vw, 4rem);
	--wp-bar: 0px;               /* height of the WordPress admin bar when logged in (set below) */
	--band-h: 3.25rem;           /* one thickness for the menu bars, side tickers and slogan banners */
	--bar-h: var(--band-h);      /* top and bottom menu bars */
	--side-w: var(--band-h);     /* side tickers */
	--mq-h: var(--band-h);       /* ticker height when it runs horizontally (phones) */
	--measure: 30em;
	--wide: 64rem;
	--rule: 1.5px;
}

/* ==========================================================================
   Schemes — each page (and each coloured section) picks one. Set in Customize → Runner Up Colours.
   --sc-bg ground · --sc-fg labels/nav · --sc-head headings/accents · --sc-body copy · --btn-* buttons
   ========================================================================== */

.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-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(--paper); --sc-head: var(--yolk-accent); --sc-body: var(--paper); --btn-bg: var(--yolk-accent); --btn-fg: var(--t-red); } /* brick is dark: cream + yellow */
.ru-sun    { --sc-bg: var(--yolk-accent); --sc-fg: var(--t-ink); --sc-head: var(--t-blue); --sc-body: var(--t-ink); --btn-bg: var(--t-blue); --btn-fg: var(--yolk-accent); } /* bright tag yellow */
.ru-sky    { --sc-bg: var(--bermuda-accent); --sc-fg: var(--t-ink); --sc-head: var(--t-blue); --sc-body: var(--t-ink); --btn-bg: var(--t-blue); --btn-fg: var(--bermuda-accent); }
.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-nightgreen { --sc-bg: var(--t-ink); --sc-fg: var(--t-green); --sc-head: var(--t-green); --sc-body: var(--t-green); --btn-bg: var(--t-green); --btn-fg: var(--t-ink); } /* tag green inverted: black ground, green print */
.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); }

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

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

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

body {
	margin: 0;
	background: var(--sc-bg, var(--yolk));
	color: var(--sc-fg, var(--salmon));
	font-family: var(--font-text);
	font-size: var(--fs-body);
	font-weight: var(--nhg-weight);
	font-synthesis: none;
	line-height: var(--lh-body);
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Neue Haas stroke — on each NHG role so the em tracks that element's own size */
body,
.ru-label,
.ru-bar__links a,
.ru-marquee,
.ru-pills a,
.ru-toggle,
.ru-button,
.ru-prose--buttons p > a:only-child,
.ru-contact a {
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
}

/* Print grain over the whole page — the "slightly textured" part (the grain layer is positioned against the body) */
body {
	position: relative;
}

/* The overlay grain: 50% grey noise (measured mean 127/255) set to overlay at 23%, so lighter specks lighten and
   darker specks darken without dulling the page. It covers the page top to bottom rather than being pinned to the
   screen: iOS Safari trims pinned layers to its toolbars (a hard edge) and colours the strip behind the clock from
   the topmost pinned layer. */
body::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.8' intercept='-0.886'/%3E%3CfeFuncG type='linear' slope='2.8' intercept='-0.886'/%3E%3CfeFuncB type='linear' slope='2.8' intercept='-0.886'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
	background-size: 96px 96px; /* the 240px noise tile drawn at 40% size: specks 60% smaller */
	opacity: 0.23;
	mix-blend-mode: overlay;
}

body.ru-no-grain::after {
	display: none; /* switched off in Customize → Runner Up Homepage → Banners */
}

img,
video,
svg {
	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: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Text links: on hover/focus the text (and any stroke) turns the inverse of the background behind it.
   --link-bg is that background; it defaults to the section colour and is set where links sit on something
   else (the bars, the menu overlay, the cream menu intro). Buttons and pills keep their own fill-on-hover. */
a:hover,
a:focus-visible {
	color: rgb(from var(--link-bg, var(--sc-bg)) calc(255 - r) calc(255 - g) calc(255 - b));
}

@supports not (color: rgb(from red r g b)) {
	a:hover {
		opacity: 0.7;
	}
}

.ru-bar--top,
.ru-topbar,
.ru-overlay {
	--link-bg: var(--btn-bg);
}

.ru-bar--bottom {
	--link-bg: var(--t-green);
}

.ru-menu__intro {
	--link-bg: var(--paper);
}

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

address {
	font-style: normal;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: normal;
	-webkit-text-stroke: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.ru-skip {
	position: absolute;
	top: var(--s-1);
	left: var(--s-1);
	z-index: 100;
	padding: var(--s-1) var(--s-2);
	background: var(--sc-fg);
	color: var(--sc-bg);
	font-size: var(--fs-label);
	text-transform: uppercase;
	transform: translateY(-200%);
}

.ru-skip:focus {
	transform: none;
}

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

/* Small caps label — the bible's "PART ONE" */
.ru-label {
	margin: 0 0 var(--s-3);
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: var(--nhg-weight);
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sc-fg);
}

.ru-heading {
	font-family: var(--font-h1);
	font-size: var(--fs-heading);
	line-height: 1.04;
	letter-spacing: 0.02em;
	color: var(--sc-head);
}

.ru-prose {
	max-width: var(--measure);
	color: var(--sc-body);
}

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

/* About copy in Derniere, the bible's second heading face */
.ru-prose--display p {
	font-family: var(--font-h2);
	font-size: clamp(1.86rem, 1.14rem + 1.5vw, 2.59rem);
	font-weight: normal;
	line-height: 1.12;
	letter-spacing: normal;
	-webkit-text-stroke: 0.010em currentColor; /* light stroke, as on the menu titles */
}

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

/* Outline button, fills on hover. A link alone in a paragraph inside .ru-prose--buttons becomes one. */
/* Buttons share the pill look (see .ru-pills a): rounded outline in the section's text colour, fills on hover */
.ru-button,
.ru-prose--buttons p > a:only-child,
.ru-contact a {
	display: inline-block;
	padding: 0.6em 1.15em 0.55em;
	border: 2px solid var(--sc-fg);
	border-radius: 999px;
	background: transparent;
	color: var(--sc-fg);
	font-family: var(--font-text);
	font-size: 0.8125rem;
	font-weight: var(--nhg-weight);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* A button paragraph after text gets the same gap the homepage pills have */
.ru-prose--buttons p + p:has(> a:only-child) {
	margin-top: var(--s-3);
}

.ru-button:hover,
.ru-button:focus-visible,
.ru-prose--buttons p > a:only-child:hover,
.ru-prose--buttons p > a:only-child:focus-visible,
.ru-contact a:hover,
.ru-contact a:focus-visible {
	opacity: 1;
	background: var(--sc-fg);
	color: var(--sc-bg);
}

/* Side tickers switched off in the Customizer: no columns for them */
body.ru-no-tickers {
	--side-w: 0px;
}

/* Logged in: everything pinned to the top moves down below the WordPress admin bar */
body.admin-bar {
	--wp-bar: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--wp-bar: 46px;
	}

	/* WordPress lets its bar scroll away on small phones; keep it pinned so the offset stays right */
	body.admin-bar #wpadminbar {
		position: fixed;
	}
}

/* ==========================================================================
   The frame — main menu across the top, bookings across the bottom, tickers up each side
   ========================================================================== */

.ru-frame {
	min-height: 100vh;
	padding: var(--bar-h) var(--side-w);
}

/* Top and bottom menu bars */
.ru-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: var(--s-3);
	height: var(--bar-h);
	padding: 0 var(--s-3) 0 var(--s-2);
}

/* Main menu: the inverse of the page scheme. Monogram and links share one row, evenly spaced. */
.ru-bar--top {
	top: var(--wp-bar);
	justify-content: space-between;
	padding-inline: var(--s-3);
	background: var(--btn-bg);
	color: var(--btn-fg);
}

.ru-bar--top .ru-bar__links {
	display: contents;
}

/* Bookings: ticket green */
.ru-bar--bottom {
	bottom: 0;
	justify-content: center;
	background: var(--t-green);
	color: var(--t-ink);
}

.ru-bar__links {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
}

.ru-bar--bottom .ru-bar__links {
	justify-content: space-evenly;
}

.ru-bar__links li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.ru-bar__links a {
	font-size: var(--fs-nav);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ru-bar__links a[aria-current='page'] {
	text-decoration: underline;
	text-decoration-thickness: var(--rule);
	text-underline-offset: 0.45em;
}

/* Side tickers: the scrolling info runs vertically up the left and down the right */
.ru-marquee {
	position: fixed;
	top: calc(var(--bar-h) + var(--wp-bar));
	bottom: var(--bar-h);
	z-index: 30;
	display: flex;
	align-items: center; /* centres the text across the column (cross axis is horizontal in vertical writing) */
	width: var(--side-w);
	overflow: hidden;
	background: var(--sc-bg);
	color: var(--sc-head);
	border: 0;
	font-family: var(--font-text); /* Neue Haas, with the shared weight and stroke */
	font-size: var(--fs-nav);
	font-weight: var(--nhg-weight);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
}

.ru-marquee--left {
	left: 0;
	transform: rotate(180deg); /* reads bottom-to-top */
}

.ru-marquee--right {
	right: 0;
}

.ru-marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	line-height: 1;
	animation: ru-marquee-v 60s linear infinite;
}

.ru-marquee--right .ru-marquee__track {
	animation-duration: 45s;
}

.ru-marquee:hover .ru-marquee__track {
	animation-play-state: paused;
}

.ru-marquee__item,
.ru-marquee__sep {
	padding: 0.9rem 0;
}

@keyframes ru-marquee-v {
	to { transform: translateY(-50%); }
}

@keyframes ru-marquee {
	to { transform: translateX(-50%); }
}

/* RU monogram, drawn in the current text colour */
.ru-mark {
	display: block;
	flex: none;
	width: 2.1rem;
	aspect-ratio: 289 / 260;
	background: currentColor;
	-webkit-mask: url('img/ru.svg') center / contain no-repeat;
	mask: url('img/ru.svg') center / contain no-repeat;
}

.ru-mark:hover {
	opacity: 1; /* the logo takes the inverted-colour hover like text links (it's painted in currentColor) */
}

.ru-topbar {
	display: none;
}

.ru-main {
	min-width: 0;
}

.ru-main:focus {
	outline: none;
}

/* ==========================================================================
   Shared pieces — photo, headings, caps copy, pills, ruled panels
   ========================================================================== */

.ru-photo {
	margin: 0;
	max-width: 100%;
}

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

/* Display heading — Amelia */
.ru-hl {
	font-family: var(--font-h1);
	font-size: clamp(2.75rem, 1.6rem + 3.2vw, 5rem);
	line-height: 1.02;
	letter-spacing: 0.015em;
	color: var(--sc-head);
}

.ru-hl--xl {
	font-size: clamp(3.5rem, 1.8rem + 5.5vw, 8rem);
	line-height: 0.98;
}

.ru-caps {
	max-width: 32em;
	margin: var(--s-3) 0 0;
	font-size: 1.05rem;
	line-height: 1.32;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--sc-body);
}

.ru-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--s-3);
}

.ru-pills--stack {
	flex-direction: column;
	align-items: flex-start;
	margin-top: 0;
}

/* Two stacked menus (bookings + extras) read as one even column */
.ru-pills--stack + .ru-pills--stack {
	margin-top: 0.6rem;
}

.ru-pills li {
	display: flex;
}

.ru-pills a {
	display: inline-block;
	padding: 0.6em 1.15em 0.55em;
	border: 2px solid var(--sc-fg);
	border-radius: 999px;
	color: var(--sc-fg);
	font-size: 0.8125rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ru-pills a:hover,
.ru-pills a:focus-visible,
.ru-pills a[aria-current='page'] {
	opacity: 1;
	background: var(--sc-fg);
	color: var(--sc-bg);
}

/* Ruled box panels */
.ru-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--rule);                      /* the gaps show the rule colour: dividers between boxes only */
	margin-inline: calc(var(--frame-pad) * -1); /* boxes run edge to edge, past the section padding */
	background: var(--sc-fg);
	border-block: var(--rule) solid var(--sc-fg);
}

.ru-panel {
	min-width: 0;
	padding: var(--s-4) var(--frame-pad);
	background: var(--sc-bg);
}

.ru-panel > .ru-label:first-child {
	margin-bottom: var(--s-3);
}

.ru-panel__big {
	margin-bottom: 0;
	font-family: var(--font-h1);
	font-size: 2rem;
	line-height: 1.12;
	letter-spacing: 0.02em;
	color: var(--sc-head);
	-webkit-text-stroke: 0;
}

/* A small line under the big text, set like the panel title (e.g. directions under the address),
   with the same gap as between the title and the big text */
.ru-panel__after {
	margin: var(--s-3) 0 0;
}

/* Acknowledgement of Country: the same size as the panel labels, in sentence case so a paragraph reads easily */
.ru-panel__ack {
	max-width: 30em;
	margin: var(--s-3) 0 0;
	font-size: var(--fs-label);
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--sc-fg);
	-webkit-text-stroke: calc(var(--nhg-stroke) / 2) currentColor; /* half the usual stroke: lighter ink */
}

/* Linked like the address above: heading colour (yellow on the red Visit), no underline, same hover */
.ru-panel__ack a {
	color: var(--sc-head);
	text-decoration: none;
}

.ru-panel__ack a:hover,
.ru-panel__ack a:focus-visible {
	color: rgb(from var(--link-bg, var(--sc-bg)) calc(255 - r) calc(255 - g) calc(255 - b));
}

/* Lists read as paragraphs */
.ru-hours,
.ru-prose ul,
.ru-prose ol {
	max-width: var(--measure);
	margin: 0 0 1.25em;
	color: var(--sc-body);
}

.ru-hours li {
	position: relative;
}

.ru-hours .is-today {
	color: var(--sc-head);
}

/* ==========================================================================
   Home — logo over the clouds, then the one-page sections
   ========================================================================== */

/* Hero: the cloud loop full-bleed with the animated logo across it, like an old airline postcard */
.ru-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	height: calc(100vh - var(--bar-h) * 2 - var(--wp-bar));
	height: calc(100dvh - var(--bar-h) * 2 - var(--wp-bar));
	min-height: 32rem;
	overflow: hidden;
	background: var(--hero-poster, url('img/clouds-poster.jpg')) center / cover var(--bermuda-accent); /* the still, set in the Customizer */
}

.ru-hero__video {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* pure background: no clicks, right-click menu, hover controls or pop-out button */
	user-select: none;
	-webkit-touch-callout: none;
}

/* Never show the browser's own play button or controls over the background video (iOS Safari) */
.ru-hero__video::-webkit-media-controls,
.ru-hero__video::-webkit-media-controls-panel,
.ru-hero__video::-webkit-media-controls-play-button,
.ru-hero__video::-webkit-media-controls-start-playback-button,
.ru-hero__video::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0;
}

/* Autoplay blocked or motion turned down: hide the video and let the still cloud image behind it show */
.ru-hero__video.is-off {
	visibility: hidden;
}

.ru-logo {
	position: relative;
	display: grid;
	width: 40%; /* of the hero's width; phones are set further down */
	margin: 0;
	pointer-events: none;
}

.ru-logo img {
	grid-area: 1 / 1;
	width: 100%;
	opacity: 0;
	/* Defaults for the three built-in frames at 0.6s each. front-page.php sets each frame's delay and, for a
	   different number of frames or speed, the duration and keyframes (Customizer → Runner Up Homepage → Hero). */
	animation: ru-logo 1.8s steps(1, end) infinite;
}

@keyframes ru-logo {
	0% { opacity: 1; }
	33.333% { opacity: 0; }
}

.ru-hero__cue {
	position: absolute;
	left: var(--frame-pad);
	bottom: var(--s-3);
	margin: 0;
	font-family: var(--font-text);
	font-size: 0.73rem;
	font-weight: var(--nhg-weight);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--t-pink);
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
}

/* Colour stripe bands — a repeated line in Shark, each band nudged off-register */
.ru-stripes {
	overflow: hidden;
}

.ru-stripes p {
	/* Same thickness as the menu bars and tickers (--band-h); the text keeps its old proportion to the band */
	margin: 0;
	padding: 0;
	height: var(--band-h);
	background: var(--sc-bg);
	color: var(--sc-head);
	font-family: var(--stripe-font, var(--font-stripe));      /* Customizer: Banners → Font */
	font-size: calc(var(--band-h) * 0.44); /* 20% smaller than 0.55 */
	line-height: var(--band-h);   /* one line, centred in the band */
	letter-spacing: 0.06em;
	text-transform: var(--stripe-case, uppercase);            /* Customizer: Banners → Capitalisation */
	white-space: nowrap;
	-webkit-text-stroke: var(--stripe-stroke, 0) currentColor; /* Customizer: Banners → Stroke */
	opacity: 0.95;
}

/* The phrases scroll sideways like the old side tickers: the track holds two identical sets and slides by one */
.ru-stripe__track {
	display: inline-block;
	position: relative;
	top: var(--stripe-nudge, 0.07em); /* each font's letters sit at a different height in the line: a measured nudge centres them (set per font in inc/home.php) */
	text-indent: 0;
	animation: ru-marquee var(--stripe-time, 120s) linear infinite;
	will-change: transform;
}

/* Everything that scrolls alternates down the page: banners a, c, f, e run right to left; b, d (and the
   photo strip between c and f) run left to right */
.ru-stripes--b .ru-stripe__track,
.ru-stripes--d .ru-stripe__track {
	animation-direction: reverse;
}

.ru-stripes:hover .ru-stripe__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.ru-stripe__track {
		animation: none;
	}
}

/* Single bands between sections — all one size, each nudged to a different start */
.ru-stripes--a p { text-indent: -0.6em; }
.ru-stripes--b p { text-indent: -2.4em; }
.ru-stripes--c p { text-indent: -1.5em; }
.ru-stripes--d p { text-indent: -0.9em; }
.ru-stripes--e p { text-indent: -1.8em; }
.ru-stripes--f p { text-indent: -2.9em; }


/* Section header: label, heading, script aside */
.ru-head {
	margin-bottom: var(--s-4);
}

.ru-head .ru-label {
	margin: 0 0 var(--s-3);
}

/* Script aside — Derniere, the bible's second face, set loose under a heading */
.ru-script {
	margin: 0.35em 0 0 0.1em;
	font-family: var(--font-h2);
	font-size: clamp(1.75rem, 1.1rem + 1.55vw, 2.65rem);
	font-weight: normal;
	line-height: 1.05;
	letter-spacing: normal;
	color: var(--sc-fg);
	-webkit-text-stroke: 0;
	transform: rotate(-3deg);
	transform-origin: left center;
}

/* Plain colour sections */
.ru-section {
	padding: var(--s-6) var(--frame-pad);
	background: var(--sc-bg);
	color: var(--sc-fg);
}

/* What's on: heading column + event list */
.ru-whatson {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-5);
	align-items: start;
}

.ru-whatson__side {
	position: sticky;
	top: calc(var(--bar-h) + var(--wp-bar) + var(--s-4));
}

.ru-scatter {
	position: relative;
	height: 18rem;
	margin-top: var(--s-5);
}

.ru-scatter .ru-bgimg {
	z-index: 0;
	width: 58%;
	height: auto;
	aspect-ratio: 4 / 5;
	box-shadow: 0.35rem 0.45rem 0 color-mix(in srgb, var(--t-ink) 22%, transparent);
}

.ru-scatter .ru-bgimg:nth-child(1) {
	transform: rotate(-5deg);
}

.ru-scatter .ru-bgimg:nth-child(2) {
	left: auto;
	right: 0;
	top: 2.5rem;
	transform: rotate(4deg);
}

/* Visit */
/* Visit: four boxes across (two on mid widths), finishing flush with the band below */
.ru-visit {
	padding-bottom: 0;
}

.ru-visit .ru-panels {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-bottom: 0;
}

@media (max-width: 1200px) {
	.ru-visit .ru-panels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* FAQ */
.ru-faq .ru-faq__grid {
	max-width: 72rem;
}

/* ==========================================================================
   Photography — full-cover backgrounds, half splits, bands, mosaic, photo panels
   ========================================================================== */

.ru-bgimg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Label set on a chip so it reads over any photo */
.ru-label--chip {
	display: table;
	margin-bottom: var(--s-2);
	color: var(--t-white);
}

/* Half photo, half colour — the photo runs edge to edge */
.ru-half {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 82vh;
	background: var(--sc-bg);
	color: var(--sc-fg);
}

.ru-half__media {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 24rem;
}

.ru-half--flip .ru-half__media {
	order: 2;
}

.ru-half__text {
	align-self: center;
	padding: var(--s-6) var(--frame-pad);
}

.ru-half__text > .ru-label:first-child {
	margin-bottom: var(--s-2);
}

.ru-half__sub {
	margin-top: var(--s-4);
}

/* Inside a padded page, halves and bands break out to the frame edges */
.ru-page > .ru-half,
.ru-page > .ru-band,
/* Full-bleed photo band with content laid over it */
.ru-band {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: 88vh;
	padding: var(--s-6) var(--frame-pad);
	overflow: hidden;
}

.ru-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	align-items: end;
	gap: var(--s-4);
}

/* A photo band straight after a photo title butts up against it */
.ru-pagehead--photo + .ru-band {
	margin-top: calc(var(--s-5) * -1);
}

/* A page that ends on a photo band finishes flush with the bottom strip */
.ru-page:has(> .ru-band:last-child) {
	padding-bottom: 0;
}

/* Photo reel: whole photos side by side at one height. frame.js loops it when it overflows the screen. */
.ru-reel {
	--reel-h: clamp(22rem, 60.7vh, 44.2rem); /* 20% then 15% taller than the original clamp(16rem, 44vh, 32rem) */
	height: var(--reel-h);
	overflow: hidden;
}

.ru-reel__track {
	display: flex;
	width: max-content;
	height: 100%;
	margin-inline: auto;
}

.ru-reel__img {
	display: block;
	flex: none;
	width: auto;
	height: 100%;
}

.ru-reel.is-moving .ru-reel__track {
	margin-inline: 0;
	animation: ru-reel var(--reel-time, 60s) linear infinite;
}

.ru-reel.is-moving:hover .ru-reel__track {
	animation-play-state: paused;
}

/* Left to right: start one set in, slide back to the start, repeat */
/* In a menu section: under the title, running to the panel's edges */
.ru-reel--menu {
	--reel-h: clamp(14rem, 9rem + 14vw, 26rem);
	margin: 0 calc(var(--frame-pad) * -1) var(--s-4);
}

/* Portraits taller than 4:5 are cropped to 4:5 */
.ru-reel__img--4x5 {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@keyframes ru-reel {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ru-reel {
		overflow-x: auto;
	}
}

/* Page title over a full-bleed photo */
.ru-pagehead--photo {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: 68vh;
	margin: calc(var(--s-5) * -1) calc(var(--frame-pad) * -1) var(--s-5);
	padding: var(--s-5) var(--frame-pad);
	overflow: hidden;
}

.ru-pagehead--photo .ru-label {
	color: var(--t-white);
}

/* Headings over photos: cream */
.ru-pagehead--photo .ru-hl,
.ru-band .ru-hl {
	color: var(--t-white);
}

/* Photo cell inside the ruled panels */
.ru-panel--photo {
	position: relative;
	isolation: isolate;
	min-height: 20rem;
	padding: 0;
	overflow: hidden;
}

.ru-panel--wide {
	grid-column: 1 / -1;
	min-height: 26rem;
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

.ru-page {
	padding: var(--s-5) var(--frame-pad) var(--s-6);
}

.ru-pagehead {
	margin-bottom: var(--s-5);
}

.ru-pagehead .ru-label {
	margin-bottom: var(--s-2);
}

.ru-split {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--s-5);
}

.ru-split > .ru-photo {
	position: sticky;
	top: calc(var(--bar-h) + var(--wp-bar) + var(--s-3));
	justify-self: end;
	width: min(100%, 28rem);
}

.ru-page > .ru-panels {
	margin-top: var(--s-6);
}

.ru-sec {
	margin-top: var(--s-6);
}

.ru-sec__head {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--s-4);
}

.ru-sec__head .ru-label {
	margin: 0;
	white-space: nowrap;
}

.ru-sec__rule {
	flex: 1;
	border-top: var(--rule) solid var(--sc-fg);
}

/* FAQ — two columns */
.ru-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4) var(--s-5);
	color: var(--sc-body);
}

.ru-faq__q {
	margin: 0 0 var(--s-1);
	font: inherit;
	letter-spacing: inherit;
	color: var(--sc-head);
	-webkit-text-stroke: var(--nhg-stroke) currentColor; /* headings drop the stroke; the questions keep it */
}

.ru-faq__a p {
	margin: 0;
}

.ru-faq__a p + p {
	margin-top: 0.75em;
}

/* ==========================================================================
   Form pages — intro text beside a booking form (page-form.php, inc/forms.php)
   ========================================================================== */

.ru-formpage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-5);
	align-items: start;
}

.ru-formpage__intro h2,
.ru-formpage__intro h3 {
	margin: var(--s-4) 0 var(--s-1);
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: var(--nhg-weight);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sc-head);
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
}

.ru-formpage__intro > :first-child {
	margin-top: 0;
}

.ru-formpage__intro ul {
	padding-left: 1.1em;
	list-style: disc;
}

.ru-form {
	display: grid;
	gap: var(--s-3);
	color: var(--sc-body);
}

.ru-field {
	display: grid;
	gap: var(--s-1);
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ru-field__label {
	padding: 0;
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sc-head);
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
}

/* A fieldset's legend sits outside the grid gap, so it gets the same gap as a margin */
legend.ru-field__label {
	margin-bottom: var(--s-1);
}

.ru-field__opt {
	text-transform: none;
	letter-spacing: 0.02em;
	opacity: 0.7;
}

.ru-field input[type='text'],
.ru-field input[type='email'],
.ru-field input[type='tel'],
.ru-field input[type='number'],
.ru-field textarea,
.ru-field__other {
	width: 100%;
	padding: 0.7em 0.85em;
	border: 2px solid var(--sc-fg);
	border-radius: 0.6rem;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: 0.01em;
}

.ru-field textarea {
	resize: vertical;
}

/* Placeholder tips in the section's own text colour, softened, instead of the browser's grey */
.ru-form ::placeholder {
	color: var(--sc-body);
	opacity: 0.7;
}

.ru-field__hint {
	margin: 0;
	font-size: 0.9375rem;
	opacity: 0.8;
}

.ru-field__dates {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-1);
}

.ru-date {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.ru-date__label {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ru-field input[type='date'] {
	width: 100%;
	min-width: 0;
	padding: 0.65em 0.6em;
	border: 2px solid var(--sc-fg);
	border-radius: 0.6rem;
	background: transparent;
	color: inherit;
	font: inherit;
	color-scheme: light;
}

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

.ru-field input:focus-visible,
.ru-field textarea:focus-visible {
	outline: 2px solid var(--sc-fg);
	outline-offset: 2px;
}

.ru-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1);
}

/* Choices as pills: the radio is hidden, the pill fills when picked */
.ru-choice {
	position: relative;
	cursor: pointer;
}

.ru-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ru-choice span {
	display: inline-block;
	padding: 0.6em 1.15em 0.55em;
	border: 2px solid var(--sc-fg);
	border-radius: 999px;
	font-size: 0.8125rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ru-choice input:checked + span {
	background: var(--sc-fg);
	color: var(--sc-bg);
}

.ru-choice input:focus-visible + span {
	outline: 2px solid var(--sc-fg);
	outline-offset: 3px;
}

.ru-field__other {
	margin-top: var(--s-1);
}

.ru-field.has-error input,
.ru-field.has-error textarea,
.ru-field.has-error .ru-choice span {
	border-style: dashed;
}

.ru-field__err,
.ru-form__alert {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--sc-head);
}

.ru-form__alert {
	padding: 0.75em 1em;
	border: 2px dashed var(--sc-fg);
	border-radius: 0.6rem;
}

.ru-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ru-form__submit {
	margin: var(--s-1) 0 0;
}

.ru-form .ru-button {
	cursor: pointer;
	font-family: inherit;
}

.ru-form__privacy {
	max-width: 32em;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	opacity: 0.8;
}

.ru-form__privacy a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ru-form__thanks {
	padding: var(--s-3);
	border: 2px solid var(--sc-fg);
	border-radius: 0.6rem;
	font-size: 1.25rem;
	color: var(--sc-head);
}

@media (max-width: 899px) {
	.ru-formpage__grid {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}
}

/* ==========================================================================
   Menu — from the PDF
   ========================================================================== */

.ru-specials {
	width: 100%;
}

/* Specials row: a cream block the red artwork sits straight on — no white sheet needed */
.ru-menu__intro {
	align-items: center;
	margin-inline: calc(var(--frame-pad) * -1);
	padding: var(--s-5) var(--frame-pad);
	background: var(--paper);
}

.ru-menu__specials {
	max-width: 44rem;
}

/* Section pills stay pinned under the top menu bar */
.ru-menu__index {
	position: sticky;
	top: calc(var(--bar-h) + var(--wp-bar));
	z-index: 2;
	/* Full bleed: runs edge to edge between the side tickers; pills stay on the text margin */
	margin: var(--s-5) calc(var(--frame-pad) * -1) 0;
	padding: var(--s-2) var(--frame-pad);
	background: var(--sc-bg);
}

.ru-menu__index .ru-pills {
	margin: 0;
}

.ru-panels--menu {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;              /* colour blocks sit flush — no divider lines needed */
	margin-top: var(--s-2);
	border-block: 0;
}

/* Menu page: all type in black, on the page and on every block (outranks the block schemes) */
.ru-menu,
.ru-menu .ru-menu__section {
	--sc-fg: var(--t-ink);
	--sc-head: var(--t-ink);
	--sc-body: var(--t-ink);
	--btn-bg: var(--t-ink);
}

/* …except a block on the dark (inverted) scheme, which keeps its own print colour */
.ru-menu .ru-menu__section.ru-nightgreen {
	--sc-fg: var(--t-green);
	--sc-head: var(--t-green);
	--sc-body: var(--t-green);
	--btn-bg: var(--t-green);
}

/* The top of the menu page (title, photo, specials, floating pills) sits on cream */
.ru-menu {
	--sc-bg: var(--paper);
	--btn-fg: var(--paper);
	background: var(--paper);
}

/* Photo band under the title, full bleed */
.ru-photoband {
	position: relative;
	isolation: isolate;
	height: 48vh;
	min-height: 18rem;
	margin: 0 calc(var(--frame-pad) * -1);   /* the cream specials block follows straight on */
	overflow: hidden;
}

/* Each block paints its own scheme and sets its own text colours */
.ru-panels--menu .ru-panel {
	background: var(--sc-bg);
	color: var(--sc-fg);
}

/* More air above and below each block (photo panels stay full-bleed) */
.ru-panels--menu .ru-panel:not(.ru-panel--photo) {
	padding-block: var(--s-5);
}

/* Wine runs the full width; its five groups flow in two columns */
.ru-menu__section--wine,
.ru-menu__section--cocktails {
	grid-column: 1 / -1;
}

.ru-menu__section {
	scroll-margin-top: calc(var(--bar-h) + 5rem);
}

.ru-menu__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-3);
	margin-bottom: var(--s-3);
}

.ru-menu__note {
	flex-basis: 100%;
}

.ru-menu__title {
	font-family: var(--font-h2);
	font-size: clamp(2.75rem, 1.65rem + 3.3vw, 5rem);
	line-height: 1;
	letter-spacing: -0.03em; /* large Derniere titles set tighter */
	color: var(--sc-head);
	-webkit-text-stroke: 0.010em currentColor; /* light stroke, scales with size */
}

.ru-menu__head .ru-label {
	margin: 0;
}

.ru-menu__groups {
	column-gap: var(--s-5);
}

.ru-menu__section--wine .ru-menu__groups,
.ru-menu__section--cocktails .ru-menu__groups {
	columns: 2;
}

.ru-menu__group {
	break-inside: avoid;
	margin-bottom: var(--s-4);
}

.ru-menu__group .ru-label {
	margin-bottom: var(--s-2);
}

.ru-item {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--s-3);
	padding: 0.7rem 0;
	border-top: 1px solid color-mix(in srgb, var(--sc-fg) 35%, transparent);
	color: var(--sc-body);
}

.ru-item__name {
	font-size: 1.1rem;
	line-height: 1.25;
}

.ru-item__price {
	font-size: 1rem;
	white-space: nowrap;
	text-align: right;
}

.ru-item__desc {
	grid-column: 1;
	margin-top: 0.15em;
	font-size: 1.1rem;                                  /* same size as the drink names */
	line-height: 1.25;
	opacity: 0.85;
	-webkit-text-stroke: calc(var(--nhg-stroke) / 2) currentColor; /* same weight, lighter ink */
}

/* Beer & cider and softs: short notes sit on the same line as the name */
.ru-menu__section--beer-cider .ru-item,
.ru-menu__section--softs .ru-item {
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 0;          /* note hugs the name; the price keeps its own space below */
	align-items: baseline;
}

.ru-menu__section--beer-cider .ru-item__name,
.ru-menu__section--softs .ru-item__name { grid-column: 1; grid-row: 1; }

.ru-menu__section--beer-cider .ru-item__desc,
.ru-menu__section--softs .ru-item__desc {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 0 0.4em;
}

.ru-menu__section--beer-cider .ru-item__price,
.ru-menu__section--softs .ru-item__price { grid-column: 3; grid-row: 1; margin-left: var(--s-3); }

.ru-brush {
	font-family: var(--font-feature);
	font-size: 1.12em;
	font-style: normal;
	/* Medium. The kit has 400 and 700 only, so 500 resolves to 400 and the stroke adds the weight;
	   once New Spirit Condensed Medium is added to the Adobe kit, drop the stroke. */
	font-weight: 500;
	letter-spacing: 0;
	-webkit-text-stroke: 0.03em currentColor;
	color: var(--sc-head);
}

/* ==========================================================================
   Events — a plain running list: date pill, day, acts, ruled between
   ========================================================================== */

.ru-events {
	--event-small: 0.73rem; /* every small line in What's On: date box, note, category titles, times */
	/* The rules between days are a smooth wave, painted in the section colour through an SVG mask */
	--wave-h: 10px;
	--wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M0 5 Q3.5 1.5 7 5 T14 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
	position: relative;
	padding-top: calc(var(--wave-h) / 2);
}

.ru-events::before,
.ru-event::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: var(--wave-h);
	background: var(--sc-head); /* the section's heading colour: blue on lilac, like the gig names */
	-webkit-mask: var(--wave) left center / auto 100% repeat-x;
	mask: var(--wave) left center / auto 100% repeat-x;
	pointer-events: none;
}

.ru-events::before {
	top: 0;
}

.ru-event {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-1) var(--s-3);
	align-items: start;
	padding: var(--s-3) 0;
}

.ru-event::after {
	bottom: calc(var(--wave-h) / -2);
}

/* Hovering a day sets the waves above and below it rolling: the line below is its own, the line above is
   the previous day's (or the list's top line for the first day). One 14px wavelength per loop, so it's seamless. */
.ru-event:hover::after,
.ru-event:has(+ .ru-event:hover)::after,
.ru-events:has(> .ru-event:first-child:hover)::before {
	animation: ru-wave 0.6s linear infinite;
}

@keyframes ru-wave {
	from {
		-webkit-mask-position: 0 50%;
		mask-position: 0 50%;
	}
	to {
		-webkit-mask-position: 14px 50%;
		mask-position: 14px 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ru-event:hover::after,
	.ru-event:has(+ .ru-event:hover)::after,
	.ru-events:has(> .ru-event:first-child:hover)::before {
		animation: none;
	}
}

.ru-pill-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15em; /* day and date sit close together */
	margin: 0;
	padding: 0.6em 0.75em 0.55em;
	border: 2px solid var(--t-ink);
	border-radius: 0.6rem;
	font-family: var(--font-text);
	font-size: var(--event-small);
	font-weight: var(--nhg-weight);
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--t-ink);
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
	font-variant-numeric: tabular-nums;
}

/* Hovering anywhere on a day fills its date box in the heading colour (blue on lilac, like the waves),
   with the text in the section colour */
.ru-pill-date {
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ru-event:hover .ru-pill-date,
.ru-event:focus-within .ru-pill-date {
	border-color: var(--sc-head);
	background: var(--sc-head);
	color: var(--sc-bg);
}

.ru-pill-date__day {
	text-transform: uppercase;
}

.ru-event__acts {
	margin: 0;
	font-family: var(--font-gig);
	font-size: clamp(1.9rem, 1.2rem + 1.8vw, 3rem);
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sc-head);
}

/* Poster preview: placed by frame.js at the centre of the left (heading) column while a day with a poster is hovered */
.ru-peek {
	position: fixed;
	z-index: 25; /* under the frame bars and tickers */
	width: min(33.6rem, 36vw);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.97);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ru-peek.is-on {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.ru-peek img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - var(--bar-h) * 2 - 4rem);
	margin-inline: auto;
}

/* While a poster shows, the heading column under it fades away, and comes back when the poster goes */
.ru-whatson__side > * {
	transition: opacity 0.2s ease;
}

.ru-whatson.is-peeking .ru-whatson__side > * {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ru-peek {
		transition: none;
	}
}

@media (max-width: 899px) {
	.ru-peek {
		display: none; /* desktop only */
	}
}

/* One name per line; times sit after the name in small Neue Haas */
/* Name and time on one row, the time centred on the name. With Suspiria at line-height 1 the middle of the
   capitals is the middle of the line, so centring the boxes centres the time on the letters. */
.ru-act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.15em; /* was 0.35em */
}

.ru-act__time {
	font-family: var(--font-text);
	font-size: var(--event-small);
	font-weight: var(--nhg-weight);
	line-height: 1;
	letter-spacing: 0.06em;
	white-space: nowrap;
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
	color: var(--t-ink);
	font-variant-numeric: tabular-nums;
}

.ru-event__note {
	margin: 0 0 0.4rem;
	font-family: var(--font-text);
	font-size: var(--event-small);
	font-weight: var(--nhg-weight);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
	color: var(--t-ink);
}

/* Each category: a pill title, then its names */
.ru-event__cat + .ru-event__cat {
	margin-top: var(--s-2);
}

.ru-event__kind {
	margin: 0.35rem 0 0.3rem;
	font-family: var(--font-text);
	font-size: var(--event-small);
	font-weight: var(--nhg-weight);
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--t-ink);
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
}

/* ==========================================================================
   Dingbats — Wingdings-style glyphs, typed by what they mark
   ========================================================================== */

.ru-g {
	font-family: var(--font-glyph);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
	-webkit-text-stroke: 0;
	font-variant-emoji: text;
}

.ru-label .ru-g {
	font-size: 1.15em;
	margin-inline: 0.1em;
}

.ru-marquee__sep {
	font-size: 0.95rem;
	font-weight: 400;
}

.ru-stripes .ru-g {
	display: inline-block;
	text-indent: 0; /* the rows' negative indent is inherited and would collapse the glyph */
	font-size: 0.62em;
	vertical-align: 0.18em;
	margin-inline: 0.82em 0.72em; /* both gaps around the glyph are double the old ones (letter-spacing + space + margin) */
}

/* The only icons outside the banners and tickers: the hand on the hot-pink hero line and on today's hours */
.ru-hero__cue .ru-g {
	font-size: 1.2em;
	margin-right: 0.3em;
}

/* Today: the hand starts on the same margin as the other days and points at today's hours */
.ru-hours .is-today::before {
	content: '☞';
	margin-right: 0.35em;
	font-family: var(--font-glyph);
	-webkit-text-stroke: 0;
}

/* ==========================================================================
   Mobile menu overlay
   ========================================================================== */

.ru-overlay {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--s-4);
	padding: 6rem var(--frame-pad) var(--s-4);
	background: var(--btn-bg);
	color: var(--btn-fg);
	overflow-y: auto;
}

.ru-overlay[hidden] {
	display: none;
}

.ru-overlay__primary a {
	display: block;
	padding: 0.1em 0;
	font-family: var(--font-h1);
	font-size: clamp(2.75rem, 12vw, 3.75rem);
	line-height: 1.05;
	-webkit-text-stroke: 0;
}

/* Small links: one per line, left aligned */
.ru-overlay__secondary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-1);
	margin-top: var(--s-3);
}

.ru-overlay__secondary + .ru-overlay__secondary {
	margin-top: var(--s-2);
}

.ru-overlay__secondary a {
	font-size: var(--fs-nav);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	-webkit-text-stroke: var(--nhg-stroke) currentColor;
}

.ru-overlay .ru-label {
	color: inherit;
	margin: 0;
}

/* ==========================================================================
   Narrow screens — rails fold into a top bar + menu; bottom strip joins the page
   ========================================================================== */

@media (max-width: 899px) {
	:root {
		--side-w: 0px;
		--top-h: var(--band-h);
		--mq-h: 0px; /* no tickers on phones */
	}

	.ru-marquee {
		display: none !important;
	}

	.ru-frame {
		padding: calc(var(--mq-h) + var(--top-h)) 0 0;
	}

	/* Top menu bar folds into the RU + Menu bar; bookings bar joins the end of the page */
	.ru-bar--top {
		display: none;
	}

	.ru-bar--bottom {
		position: relative;
		justify-content: flex-start;
		height: auto;
		padding: var(--s-3) var(--frame-pad);
	}

	/* Bookings links: one per line, left aligned */
	.ru-bar--bottom .ru-bar__links {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--s-1);
	}

	/* Tickers run horizontally: info pinned at the top, gigs at the end of the page */
	.ru-marquee {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		align-items: center;
		justify-content: flex-start;
		width: auto;
		height: var(--mq-h);
		border: var(--rule) solid var(--sc-head);
		border-inline: 0;
		writing-mode: horizontal-tb;
		transform: none;
	}

	.ru-marquee__track {
		animation-name: ru-marquee;
	}

	.ru-marquee__item,
	.ru-marquee__sep {
		padding: 0 0.9rem;
	}

	.ru-topbar {
		position: fixed;
		top: calc(var(--mq-h) + var(--wp-bar));
		left: 0;
		right: 0;
		z-index: 95; /* above the grain (90): Safari paints the strip behind the clock in this bar's flat colour, so the bar stays flat too to match */
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--top-h);
		padding: 0 var(--frame-pad);
		background: var(--btn-bg);
		color: var(--btn-fg);
	}

	/* iOS Safari lets the page scroll under the status bar (clock, battery) above this bar: fill that strip
	   with the bar's colour so nothing shows through */
	.ru-topbar::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 200px;
		background: inherit;
		pointer-events: none;
	}

	.ru-topbar .ru-mark {
		width: 2.4rem;
	}

	.ru-toggle {
		padding: 0.6em 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		font-size: var(--fs-nav);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.ru-toggle__close,
	.ru-toggle[aria-expanded='true'] .ru-toggle__open {
		display: none;
	}

	.ru-toggle[aria-expanded='true'] .ru-toggle__close {
		display: inline;
	}

	.ru-menu-open,
	.ru-menu-open body {
		overflow: hidden;
	}

	.ru-overlay {
		top: calc(var(--mq-h) + var(--top-h) + var(--wp-bar));
		z-index: 34;
		padding-top: var(--s-4);
	}

	.ru-marquee--right {
		position: relative;
	}

	.ru-hero {
		height: calc(100svh - var(--mq-h) - var(--top-h) - var(--wp-bar));
		min-height: 30rem;
	}



	.ru-logo {
		width: 60%; /* was 75% */
	}

	.ru-whatson {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}

	.ru-whatson__side {
		position: static;
		container-type: inline-size; /* so the photo pair can size itself to the column */
	}

	/* The two tilted photos are 58% of the column wide at 4:5, the second dropped 2.5rem: the box must be
	   at least that tall (plus room for the tilt) or they spill over the list below. */
	.ru-scatter {
		height: calc(80cqw + 3rem);
		margin-top: var(--s-4);
	}



	.ru-half {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ru-half__media {
		min-height: 62vw;
	}

	.ru-half--flip .ru-half__media {
		order: 0;
	}

	.ru-half__text {
		padding-block: var(--s-5);
	}

	.ru-band {
		min-height: 0;
		padding-block: var(--s-6) var(--s-5);
	}

	.ru-band__inner {
		grid-template-columns: 1fr;
	}

	.ru-reel:not(.ru-reel--menu) {
		--reel-h: clamp(17.9rem, 82.8vw, 27.6rem); /* 20% then 15% taller than the original clamp(13rem, 60vw, 20rem) */
	}

	.ru-reel--menu {
		--reel-h: clamp(13rem, 60vw, 20rem);
	}

	.ru-pagehead--photo {
		min-height: 58vh;
	}

	.ru-panels,
	.ru-panels--menu,
	.ru-visit .ru-panels {
		grid-template-columns: 1fr;
	}

	.ru-menu__index {
		top: calc(var(--mq-h) + var(--top-h) + var(--wp-bar));
		padding-inline: 0;
	}

	/* One swipeable row of section buttons instead of four rows covering the screen */
	.ru-menu__index .ru-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-inline: var(--frame-pad);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ru-menu__index .ru-pills::-webkit-scrollbar {
		display: none;
	}

	.ru-menu__index .ru-pills a {
		white-space: nowrap;
	}

	/* Same breathing room above (and below) every section's heading as the photo halves (About, Drinks) */
	.ru-section {
		padding-top: var(--s-5);
	}

	.ru-section:not(.ru-visit) {
		padding-bottom: var(--s-5); /* Visit's panels run to its bottom edge */
	}

	/* Beer & softs: no room for the note beside a wrapped name, so it drops below like the other sections */
	.ru-menu__section--beer-cider .ru-item,
	.ru-menu__section--softs .ru-item {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--s-3);
	}

	.ru-menu__section--beer-cider .ru-item__desc,
	.ru-menu__section--softs .ru-item__desc {
		grid-column: 1;
		grid-row: 2;
		margin: 0.15em 0 0;
	}

	.ru-menu__section--beer-cider .ru-item__price,
	.ru-menu__section--softs .ru-item__price {
		grid-column: 2;
		margin-left: 0;
	}

	.ru-menu__section--wine .ru-menu__groups,
	.ru-menu__section--cocktails .ru-menu__groups {
		columns: 1;
	}

	.ru-split,
	.ru-faq__grid {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}

	.ru-split > .ru-photo {
		position: static;
		justify-self: stretch;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ru-logo img,
	.ru-marquee__track {
		animation: none;
	}

	.ru-logo img:first-of-type {
		opacity: 1;
	}

}