/*
Theme Name: RADION
Theme URI: https://radion.amsterdam
Author: RADION Amsterdam
Description: Custom WordPress theme for RADION — nightclub in the former ACTA building, Amsterdam. Built from the 2026 rebrand: Bebas Neue display type, Inter text, black #231F20 and off-white #CCCCCB with dark red accent, scan-line emblem and custom wordmark. Includes an Events (program) post type and Stager advanced ticket-widget integration.
Version: 1.37.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: radion
*/

/* ============================================================
   1. FONTS — Bebas Neue (display) + Inter variable (text)
   Brand book 04: Bebas for headlines/event titles/section
   markers, always uppercase. Inter for body, captions, UI.
   Inter never bolder than SemiBold 600.
   ============================================================ */
@font-face {
  font-family: 'Bebas Neue';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BebasNeue-Thin.woff2') format('woff2');
}
@font-face {
  font-family: 'Bebas Neue';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BebasNeue-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Bebas Neue';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BebasNeue-Book.woff2') format('woff2');
}
@font-face {
  font-family: 'Bebas Neue';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BebasNeue-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Bebas Neue';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/BebasNeue-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('assets/fonts/InterVariable-Italic.woff2') format('woff2');
}

/* ============================================================
   2. TOKENS
   Brand book 03: black + off-white carry the identity. One accent
   (dark red), used for one action per view and the page-hero rule.
   Everything is sharp: no radius anywhere, no shadows anywhere.
   ============================================================ */
:root {
  --r-black: #231F20;      /* Neue Black C */
  --r-offwhite: #CCCCCB;   /* Cool Gray 1 C */
  --r-accent: #5B0808;
  --r-grey: #8E8C8B;
  --r-dim: #8A8887;        /* 4.6:1 on the black: legible as text, still quieter than --r-grey */
  --r-panel: #2B2728;
  --r-line: rgba(204, 204, 203, .14);
  --r-line-strong: rgba(204, 204, 203, .35);

  /* Club Care page: set in the brand's own black and off-white. The warm
     beige it used to carry read as a wrong colour (feedback 16.09). */
  --r-warm: var(--r-panel);
  --r-warm-line: var(--r-line-strong);
  --r-warm-text: var(--r-offwhite);

  --f-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --f-text: 'Inter', system-ui, sans-serif;

  --trk-display: .03em;
  --trk-display-sm: .02em;
  --trk-label: .08em;

  /* Type scale. Display is Bebas 500 nearly everywhere; 700 is kept
     for the DD.MM dates, the one place the page is allowed to shout. */
  --fs-title: clamp(40px, 7vw, 120px);   /* page titles */
  --fs-head: clamp(30px, 4.2vw, 68px);   /* section heads */
  --fs-date: clamp(28px, 3vw, 52px);     /* DD.MM */
  --fs-card: clamp(20px, 1.7vw, 28px);   /* card / row titles */

  --pad-x: clamp(16px, 4vw, 52px);
  --sec-y: clamp(48px, 8vh, 104px);
  /* The home page breathes more between its sections (feedback 16.09). */
  --sec-y-home: clamp(76px, 13vh, 168px);
  --menu-w: clamp(280px, 24vw, 420px);
  /* The page container and, for full-bleed rows, the distance from the
     viewport edge to the container's inner (padded) edge. */
  --page-w: 1500px;
  --page-edge: max(var(--pad-x), calc((100% - var(--page-w)) / 2 + var(--pad-x)));

  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

/* ============================================================
   3. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* The black sits on html and on body. Event pages are the exception:
   their body stays transparent, because a body background paints above
   the z-index:-1 page wash (.r-event-bloom) and would hide it. html still
   gives those pages the same #231F20 underneath. */
html { background: var(--r-black); }
html, body { margin: 0; padding: 0; color: var(--r-offwhite); }
body {
  /* #231F20 on body as well (feedback 17.09: "home page background
     #231f20 — for body"). */
  background-color: var(--r-black);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.single-radion_event { background-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
::selection { background: var(--r-offwhite); color: var(--r-black); }
input, button, textarea { font: inherit; color: inherit; }

/* Typography */
.r-display, .r-h1, .r-h2, .r-bebas {
  font-family: var(--f-display);
  text-transform: uppercase;
  margin: 0;
}
.r-display { font-weight: 500; font-size: clamp(48px, 9vw, 160px); line-height: .9; letter-spacing: var(--trk-display); }
.r-h1 { font-weight: 500; font-size: var(--fs-title); line-height: .9; letter-spacing: var(--trk-display); }
.r-h1--line { font-size: var(--fs-head); }
.r-h2 { font-weight: 500; font-size: clamp(24px, 3vw, 44px); line-height: .96; letter-spacing: var(--trk-display-sm); }
.r-h3 {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}
.r-body { font-size: 16px; line-height: 1.6; font-weight: 400; }
.r-body-sm { font-size: 14px; line-height: 1.55; font-weight: 400; }
.r-caption { font-size: 12px; line-height: 1.55; letter-spacing: var(--trk-display-sm); color: var(--r-grey); }
.r-label {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--trk-label);
  text-transform: uppercase;
}
.r-label--grey { color: var(--r-grey); }
.r-label--dim { color: var(--r-dim); }
em, i { font-style: italic; }
strong, b { font-weight: 600; } /* never heavier than SemiBold */

/* Editor content */
.r-prose { max-width: 760px; }
.r-prose h2, .r-prose h3 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: var(--trk-display-sm); line-height: 1; margin: 2.2em 0 .5em; }
.r-prose h2 { font-weight: 500; font-size: clamp(24px, 3vw, 40px); }
.r-prose h3 { font-weight: 400; font-size: clamp(20px, 2.4vw, 30px); }
.r-prose p, .r-prose ul, .r-prose ol { margin: 0 0 1.2em; }
.r-prose a { border-bottom: 1px solid var(--r-line-strong); transition: color .3s, border-color .3s; }
.r-prose a:hover { color: var(--r-offwhite); border-color: var(--r-accent); }
.r-prose blockquote { margin: 1.6em 0; padding-left: 1.2em; border-left: 2px solid var(--r-accent); color: var(--r-grey); }
.r-prose hr { border: 0; border-top: 1px solid var(--r-line); margin: 2.4em 0; }
.r-prose figure { margin: 1.8em 0; }
.r-prose figcaption { font-size: 12px; color: var(--r-grey); margin-top: 8px; }
/* Imagery is in colour by default; the hover takes it to the scan-line
   monochrome — the reverse used to hold, sitewide. */
.r-prose img { filter: none; transition: filter .5s; }
.r-prose img:hover { filter: grayscale(1) brightness(.6) contrast(1.15); }
/* + / - lists (brand voice: + what you can do, - what is not tolerated).
   Symbols only; no rule under every row. */
.r-prose ul { list-style: none; padding-left: 0; }
.r-prose ul li { position: relative; padding: 6px 0 6px 28px; margin: 0; }
.r-prose ul li::before { content: '+'; position: absolute; left: 2px; top: 5px; font-weight: 600; color: var(--r-grey); }
.r-prose ul li.is-minus { padding-left: 34px; box-shadow: inset 2px 0 0 var(--r-accent); }
.r-prose ul li.is-minus::before { content: '\2212'; color: var(--r-offwhite); left: 12px; }
.r-prose ol { padding-left: 0; list-style: none; counter-reset: rlist; }
.r-prose ol li { position: relative; padding: 6px 0 6px 40px; margin: 0; counter-increment: rlist; }
.r-prose ol li::before { content: counter(rlist, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-weight: 600; font-size: 12px; letter-spacing: var(--trk-label); color: var(--r-grey); }

/* Section 4 (grain + scan-line overlays) was removed in v1.35.0: the
   noise and the 3px scan lines sat over the whole page — most visibly as
   a flickering texture on the hero video — and the client asked three
   times for the video to play untreated. Nothing else depended on it. */

/* ============================================================
   5. HEADER + NAVIGATION DRAWER
   ============================================================ */
.r-header {
  /* Above the drawer (8500): its button is also the drawer's close control. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 8600;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--pad-x);
}
/* The bar sits on the hero clip and on every scrolling page, so it
   carries its own ground: black at the top, gone by the bottom
   (feedback 08.09). A pseudo-element rather than a background on the
   bar itself, so the wash can reach below the header's box without
   that box swallowing clicks meant for the page. */
.r-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% + clamp(26px, 5vh, 60px));
  background: linear-gradient(180deg,
    rgba(35, 31, 32, .95) 0%,
    rgba(35, 31, 32, .82) 38%,
    rgba(35, 31, 32, .42) 72%,
    rgba(35, 31, 32, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
.r-header__logo { display: block; }
.r-header__logo img { display: block; height: clamp(36px, 4vw, 56px); width: auto; }
.r-header__mark { display: block; line-height: 0; }
.r-header__mark svg { display: block; height: clamp(36px, 4vw, 56px); width: auto; }
/* The emblem is 28 horizontal bars: on hover it plays as a signal
   locking in, bar by bar, rather than as a picture that scales. */
.r-header__mark svg path {
  transform-box: view-box;
  transition: transform .55s var(--ease-out), opacity .55s;
  transition-delay: calc(var(--i, 0) * 9ms);
}
.r-header__logo:hover .r-header__mark svg path:nth-child(odd),
.r-header__logo:focus-visible .r-header__mark svg path:nth-child(odd)  { transform: translateX(26px); }
.r-header__logo:hover .r-header__mark svg path:nth-child(even),
.r-header__logo:focus-visible .r-header__mark svg path:nth-child(even) { transform: translateX(-18px); opacity: .55; }

.r-header__right { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); }
.r-menu-btn {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; padding: 8px 2px;
}
/* Three bars that fold into a cross while the drawer is open. */
.r-menu-btn__bars { display: inline-flex; flex-direction: column; gap: 4px; }
.r-menu-btn__bars span {
  width: 22px; height: 2px; background: var(--r-offwhite); display: block;
  transition: transform .45s var(--ease-drawer), opacity .3s;
}
.r-menu-btn[aria-expanded="true"] .r-menu-btn__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.r-menu-btn[aria-expanded="true"] .r-menu-btn__bars span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.r-menu-btn[aria-expanded="true"] .r-menu-btn__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Drawer: about a third of the screen on the right, under the header.
   main.js slides it in and pushes the page (#r-content, .r-footer) left
   by the same width. Display type, but small: a list, not a billboard. */
.r-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--menu-w); z-index: 8500;
  background: var(--r-black); border-left: 1px solid var(--r-line);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(96px, 14vh, 140px) clamp(22px, 2.4vw, 40px) 36px;
  transform: translateX(101%);
  visibility: hidden;
  overflow-y: auto;
}
.r-menu.is-ready { visibility: visible; }
.r-menu__list { display: flex; flex-direction: column; gap: clamp(4px, 1vh, 10px); list-style: none; margin: 0; padding: 0; }
.r-menu__list a {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1;
  letter-spacing: var(--trk-display-sm);
  text-transform: uppercase;
  color: var(--r-offwhite);
  display: inline-block;
  transition: color .3s;
}
.r-menu__list a:hover { color: var(--r-accent); }
.r-menu__meta { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 32px; }
.r-menu__meta a { transition: color .3s; }
.r-menu__meta a:hover { color: var(--r-accent); }
.r-menu-scrim {
  position: fixed; inset: 0; z-index: 8400;
  background: rgba(35, 31, 32, .35);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
html.r-menu-open .r-menu-scrim { opacity: 1; pointer-events: auto; }
/* Phones: the drawer takes half the screen, not most of it (feedback
   16.09 - it was min(86vw, 380px)). The longest label, "Safer clubbing",
   measures 124px at 24px Bebas, so the 172px floor and the tighter side
   padding keep every item on one line down to a 320px screen. */
@media (max-width: 640px) {
  :root { --menu-w: max(50vw, 172px); }
  .r-menu { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   6. HOME HERO
   The name and the city on the room, nothing else, centred on a full
   viewport whose foot fades into the Program section under it. The
   scan-reveal slats that used to break hero-scale images apart were
   removed in v1.36.0 (feedback 08.09).
   ============================================================ */
.r-hero {
  position: relative;
  /* Full viewport (feedback 08.09). svh first so a phone's collapsing
     toolbar cannot crop the mark; vh is the floor under it. */
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: var(--r-black);
}
/* The poster is painted here too, under the <video>, so the clip can
   stay invisible until it is really playing (see .is-pending). */
.r-hero__bg { position: absolute; inset: 0; background: var(--r-black) var(--hero-poster, none) center / cover no-repeat; }
/* The clip plays untreated - no filter grade on the video. The shade
   below stays: it is what keeps the title legible, not a look. */
.r-hero__video {
  display: block; width: 100%; height: 100%; object-fit: cover; background: var(--r-black);
  transition: opacity 1.2s var(--ease-out);
}
/* main.js hides the clip until its first frame is actually playing. What
   shows through meanwhile is the same poster the <video> carries, so the
   still crossfades into motion instead of cutting to the clip's dark
   opening frame. Without main.js nothing is ever hidden: the poster
   attribute does the whole job on its own. */
.r-hero__video.is-pending { opacity: 0; }
/* The last stop is the page's own black, so the foot of the clip
   dissolves into the Program section instead of meeting an edge
   (feedback 08.09). */
.r-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(35, 31, 32, .55) 0%,
    rgba(35, 31, 32, .18) 26%,
    rgba(35, 31, 32, .30) 54%,
    rgba(35, 31, 32, .80) 84%,
    var(--r-black) 100%);
}
/* The mark and the city sit in the middle of the frame and are simply
   there on arrival: no entrance, no assembly (feedback 08.09). */
.r-hero__content {
  position: absolute; left: var(--pad-x); right: var(--pad-x);
  top: 50%; transform: translateY(-50%);
  z-index: 2;
}
.r-hero__title { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.r-hero__row { display: block; }
/* The wordmark is the brand's own artwork, never retyped (brand book p12). */
.r-hero__wordmark { width: clamp(200px, 30vw, 520px); height: auto; margin: 0 auto; }
.r-wm { position: relative; display: block; }
.r-wm__base { display: block; width: 100%; height: auto; }
.r-hero__city {
  /* block, not inline: the row wrapper no longer sets display on its
     child (the entrance that needed it is gone), and margin-top does
     nothing on an inline box. */
  display: block;
  font-family: var(--f-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 34px); letter-spacing: .18em; line-height: 1;
  color: var(--r-offwhite); margin-top: .55em;
}

/* ============================================================
   7. PAGE HERO (interior pages) - kicker, red rule, title.
   ============================================================ */
.r-page-hero { padding: clamp(130px, 20vh, 220px) var(--pad-x) clamp(26px, 5vh, 60px); position: relative; overflow: hidden; max-width: var(--page-w); margin: 0 auto; }
.r-page-hero__kicker { margin-bottom: 18px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.r-page-hero .r-h1 { font-size: var(--fs-title); position: relative; }
.r-rule { width: 56px; height: 4px; background: var(--r-accent); margin-bottom: 20px; }

/* ============================================================
   8. SECTIONS
   ============================================================ */
/* One 1500px container for everything: sections, the page hero (so the H1
   sits on the same left edge as the copy under it), the event layout and
   the home program row. */
.r-section { padding: var(--sec-y) var(--pad-x); max-width: var(--page-w); margin: 0 auto; }
.r-section--flush { max-width: none; padding-left: 0; padding-right: 0; }
/* Contact keeps its own wide block inside the same container. */
.r-section--wide { max-width: var(--page-w); }
/* Hero → "Program": the original breath plus 50px (client's number). */
.r-section--program { padding-top: calc(clamp(28px, 4vh, 52px) + 50px); }
/* More space between the home sections (feedback 16.09). The hero →
   Program gap above is the client's own number and stays as it is. */
.r-is-front .r-section { padding-top: var(--sec-y-home); padding-bottom: var(--sec-y-home); }
.r-is-front .r-section--program { padding-top: calc(clamp(28px, 4vh, 52px) + 50px); }
.r-section__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(20px, 4vh, 40px);
}
/* The home program row is the one full-screen block: title row and
   posters run from the viewport edge, not the container's. */
.r-section--flush .r-section__head { padding: 0 var(--pad-x); }
.r-section__tools { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
/* The posters start straight under the title row. The head is lifted above
   the track: the track's negative margin (hover headroom) reaches up into
   this row, and .r-coming is positioned, so without a stacking order the
   arrows and "Full program" would sit under a transparent band. */
/* 15px under the title row (client's number). */
.r-section--program .r-section__head { margin-bottom: 15px; position: relative; z-index: 1; }
.r-section__more { margin: clamp(20px, 3vh, 36px) 0 0; }
.r-lede {
  font-family: var(--f-text); font-weight: 500;
  font-size: clamp(19px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -.01em;
  max-width: 980px;
}
.r-lede .is-dim { color: var(--r-grey); }
.r-link-underline {
  border-bottom: 1px solid var(--r-line-strong); padding-bottom: 4px; white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.r-link-underline:hover { color: var(--r-grey); border-color: var(--r-accent); }

/* Home - About: the photograph leads. Two equal columns; the picture keeps
   its native 3:2 and fills its column edge to edge, so it is as large as the
   column allows. The copy beside it is sized to that picture (larger type,
   fills the column width) so words and image read as one proportioned block.
   The row's height comes from the photograph, never from the text -- tying
   the photo to the text stack (v1.35.3) shrank it whenever the copy was short. */
.r-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.r-about__text { display: flex; flex-direction: column; min-width: 0; }
.r-about__head { margin-bottom: clamp(20px, 3vh, 36px); }
.r-about__copy { max-width: none; font-size: clamp(18px, 1.75vw, 28px); line-height: 1.5; }
.r-about__copy p { margin: 0 0 1em; }
.r-about__copy p:last-child { margin-bottom: 0; }
.r-about__copy .is-dim { color: var(--r-grey); }
.r-about__photo { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.r-about__frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 2; }
.r-about__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: none; transition: filter .5s, transform .6s var(--ease-out); }
.r-about__photo:hover img { filter: grayscale(1) brightness(.6) contrast(1.15); transform: scale(1.05); }
.r-about__photo figcaption { margin-top: 8px; }
/* Photography and video credits, moved off the footer (feedback 08.09).
   text-transform:none: the video credit is set as the studio writes it. */
.r-credits {
  display: flex; flex-wrap: wrap; gap: 6px clamp(16px, 2vw, 34px);
  margin: clamp(18px, 3vh, 32px) 0 0; text-transform: none;
}
@media (max-width: 760px) {
  .r-about { grid-template-columns: 1fr; }
  .r-about__copy { font-size: clamp(17px, 4.2vw, 20px); }
}

/* ============================================================
   9. PROGRAM ROW - the home page's poster row
   Native scroll-snap carries the slider; the arrows are an enhancement.
   The track bleeds to the viewport edges while its padding keeps the
   first card aligned with the section's text.
   ============================================================ */
.r-coming { position: relative; }
.r-coming__track {
  --per: 4;
  --gap: clamp(14px, 1.8vw, 30px);
  display: flex;
  gap: var(--gap);
  /* The vertical padding is headroom for the hover scale — the track can
     only clip on the cross axis, so the cards get room to grow instead.
     5vw (28–80px) covers 5% of the tallest card at every width — the
     scale is 1.1, so each side needs 5% of the card's height; the
     negative margins hand the space back to the section rhythm. */
  padding: clamp(28px, 5vw, 80px) var(--pad-x);
  margin: calc(clamp(28px, 5vw, 80px) * -1) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-x);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.r-coming__track::-webkit-scrollbar { display: none; }
.r-ecard:focus-visible { outline-offset: -1px; }
/* The whole card scales on hover — not an inner zoom on the picture —
   and rises above its neighbours while it does. */
.r-ecard {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align: start;
  display: block; color: inherit;
  position: relative;
  transition: transform .5s var(--ease-out);
}
.r-ecard:hover,
.r-ecard:focus-visible { transform: scale(1.1); z-index: 2; }
@media (max-width: 1180px) { .r-coming__track { --per: 3; } }
@media (max-width: 900px)  { .r-coming__track { --per: 2; } }
@media (max-width: 620px)  { .r-coming__track { --per: 1.15; } }

.r-coming__nav { display: flex; gap: 8px; }
/* main.js toggles hidden; display:flex above would otherwise beat the UA rule. */
.r-coming__nav[hidden] { display: none; }
.r-coming__btn {
  width: 40px; height: 40px;
  background: transparent; color: var(--r-offwhite);
  border: 1px solid var(--r-line-strong);
  cursor: pointer; font-size: 16px; line-height: 1;
  transition: background .3s, color .3s, border-color .3s, opacity .3s;
}
.r-coming__btn:hover:not(:disabled) { background: var(--r-offwhite); color: var(--r-black); border-color: var(--r-offwhite); }
.r-coming__btn:disabled { opacity: .3; cursor: default; }

/* Every card carries the same 4:5 frame so the row reads as one size;
   the poster is scaled to fit inside it, never cropped — a 16:9 still
   simply sits on the black within the same box, against the date line.
   That box is the page's own #231F20, not the lighter panel grey: a 3:4
   poster left two visible grey bars beside it (feedback 16.09, "home
   page background #231f20"). */
.r-ecard__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--r-black); }
.r-ecard__media.is-empty { background: linear-gradient(160deg, var(--r-panel) 0%, rgba(91, 8, 8, .55) 100%); }
.r-ecard__media img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  filter: none;
  transition: filter .5s;
}
.r-coming__track { align-items: flex-start; }
/* And the poster itself reacts: colour to monochrome, a touch darker. */
.r-ecard:hover .r-ecard__media img { filter: grayscale(1) contrast(1.15) brightness(.65); }
.r-ecard__date {
  margin-top: 14px;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-date); line-height: .9; letter-spacing: var(--trk-display);
}
.r-ecard__date .is-month { color: var(--r-dim); }
.r-ecard__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; color: var(--r-grey); }
.r-ecard__meta .is-dim { color: var(--r-dim); }
.r-ecard__title {
  font-family: var(--f-display); font-weight: 500; text-transform: uppercase;
  font-size: var(--fs-card); line-height: 1; letter-spacing: var(--trk-display-sm);
  margin: 8px 0 0;
}
.r-ecard__lineup { color: var(--r-grey); margin: 6px 0 0; }

/* ============================================================
   10. PROGRAM - the archive rows
   Artwork, date, title + lineup, tag. The artwork is always on.
   ============================================================ */
.r-events { border-top: 1px solid var(--r-line); }
.r-event-row {
  display: grid; grid-template-columns: clamp(72px, 9vw, 120px) minmax(96px, .7fr) minmax(0, 2.6fr) auto;
  align-items: center; gap: clamp(14px, 2.2vw, 30px);
  /* Rules bleed edge to edge; the content sits on the page container's edge. */
  padding: clamp(14px, 2.4vh, 26px) var(--page-edge);
  border-bottom: 1px solid var(--r-line);
  transition: background .4s;
}
.r-event-row:hover { background: rgba(204, 204, 203, .03); }
/* Artwork at its own proportions, like the home cards; only the
   no-image plate keeps a 4:5 box. */
.r-event-row__media { overflow: hidden; }
.r-event-row__media img {
  display: block; width: 100%; height: auto;
  filter: none;
  transition: filter .5s, transform .9s var(--ease-out);
}
.r-event-row:hover .r-event-row__media img { filter: grayscale(1) contrast(1.15) brightness(.6); transform: scale(1.06); }
.r-event-row__media.is-empty { aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--r-panel) 0%, rgba(91, 8, 8, .55) 100%); }
.r-event-row__day { color: var(--r-grey); margin-bottom: 4px; }
.r-event-row__date {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-date); line-height: .9; letter-spacing: var(--trk-display);
}
.r-event-row__date .is-month { color: var(--r-dim); }
.r-event-row__body { min-width: 0; }
.r-event-row__title {
  font-family: var(--f-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 36px); line-height: 1; letter-spacing: var(--trk-display-sm);
}
.r-event-row__detail {
  margin: 6px 0 0; color: var(--r-grey);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.r-event-row__tag { color: var(--r-grey); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.r-event-row__arrow { display: inline-block; transition: transform .4s var(--ease-out); }
.r-event-row:hover .r-event-row__arrow { transform: translateX(8px); }
@media (max-width: 640px) {
  .r-event-row {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas: "media when tag" "media body body";
    align-items: start; row-gap: 8px;
  }
  .r-event-row__media { grid-area: media; }
  .r-event-row__when { grid-area: when; }
  .r-event-row__body { grid-area: body; }
  .r-event-row__tag { grid-area: tag; align-self: start; }
}
.r-events__month {
  padding: clamp(26px, 4vh, 44px) var(--page-edge) 10px;
  border-bottom: 1px solid var(--r-line);
  color: var(--r-dim);
}

/* ============================================================
   11. NEWS - one large post, two small (home); the feed continues
   the same grid.
   ============================================================ */
.r-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 30px); }
/* Mixed archives (search) drop full-width event rows into the grid. */
.r-news-grid > .r-event-row { grid-column: 1 / -1; }
/* Home: one large post, two small. */
.r-news-grid--lead { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.r-news-grid--lead .r-card:first-child { grid-row: 1 / span 2; }
.r-card { display: flex; flex-direction: column; gap: 14px; }
.r-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--r-black); }
/* min-height 0, not a floor: a floor taller than the two small cards
   made the lead card outgrow the rows it spans, so its bottom edge no
   longer met the second small card's. The lead's height is exactly what
   the two small cards add up to. */
.r-news-grid--lead .r-card:first-child .r-card__media { aspect-ratio: auto; flex: 1; min-height: 0; }
.r-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: none;
  transition: transform .6s var(--ease-out), filter .5s;
}
/* Most photographs on this site are already monochrome, so grayscale alone
   is invisible: the hover also zooms and darkens, which reads on any image. */
.r-card:hover .r-card__media img { transform: scale(1.06); filter: grayscale(1) contrast(1.15) brightness(.6); }
.r-card__meta { display: flex; gap: 14px; color: var(--r-grey); }
.r-card__title {
  margin: 0; font-family: var(--f-text); font-weight: 600;
  font-size: clamp(18px, 1.5vw, 24px); line-height: 1.2; letter-spacing: -.01em;
}
/* Every card in the lead grid reserves the same two-line title block, and
   the lead's title is set at the same size as the small ones, so the lead
   picture's bottom edge lands exactly on the second small picture's. */
.r-news-grid--lead .r-card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.4em;
}
.r-news-grid--lead .r-card:first-child .r-card__title { font-size: clamp(18px, 1.5vw, 24px); }
@media (max-width: 760px) {
  .r-news-grid--lead { grid-template-columns: 1fr; }
  .r-news-grid--lead .r-card:first-child { grid-row: auto; }
  .r-news-grid--lead .r-card:first-child .r-card__media { aspect-ratio: 16 / 10; min-height: 0; }
}

/* ============================================================
   12. FOOTER
   One short band, not a section: the two social links on the left,
   the newsletter on the right over the full height of that band, and
   a single horizontal line of address, hours and legal under it. No
   navigation list, and no rule above the block (feedback 08.09).
   ============================================================ */
.r-footer { padding: clamp(26px, 4vh, 46px) var(--pad-x) 0; }
.r-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 32%);
  gap: clamp(20px, 4vw, 60px);
  align-items: stretch;
  padding-bottom: clamp(16px, 3vh, 28px);
}
.r-footer__col { display: flex; flex-direction: column; gap: 10px; }
.r-footer__col .r-label--dim { margin-bottom: 6px; }
.r-footer__col a { transition: color .3s; }
.r-footer__col a:hover { color: var(--r-grey); }
/* Social sits on the floor of the band; the newsletter spans it, which
   is what keeps the footer one row deep. */
.r-footer__col--social { justify-content: flex-end; }
.r-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(16px, 2vw, 30px); }
.r-footer__col--newsletter { justify-content: space-between; gap: 12px; }
@media (max-width: 700px) {
  .r-footer__grid { grid-template-columns: 1fr; gap: clamp(20px, 4vh, 34px); }
  .r-footer__col--social { justify-content: flex-start; }
  /* Once the legal line wraps, spreading it edge to edge leaves ragged
     gaps mid-row; packed left it reads as one sentence of facts. */
  .r-footer__legal { justify-content: flex-start; }
}
.r-newsletter { position: relative; display: flex; border-bottom: 1px solid var(--r-line-strong); padding-bottom: 8px; gap: 8px; transition: border-color .3s, opacity .3s; }
.r-newsletter input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--r-offwhite); font-size: 14px; }
.r-newsletter input::placeholder { color: var(--r-grey); }
.r-newsletter button { background: none; border: 0; cursor: pointer; color: var(--r-offwhite); font-size: 14px; min-width: 28px; min-height: 28px; margin: -6px -4px; }
.r-newsletter button:hover { color: var(--r-grey); }
.r-newsletter button[disabled] { opacity: .45; cursor: default; }
.r-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.r-newsletter[data-state="ok"] { border-bottom-color: var(--r-offwhite); }
.r-newsletter[data-state="error"] { border-bottom-color: var(--r-accent); }
.r-newsletter[data-state="busy"] { opacity: .6; }
.r-newsletter__msg { margin: 0; color: var(--r-offwhite); }
.r-newsletter__note { margin: 0; }
/* The old "Find us" column, now the one horizontal line at the bottom. */
.r-footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 8px clamp(14px, 2vw, 30px);
  border-top: 1px solid var(--r-line);
  padding: 14px 0 22px; color: var(--r-dim);
}
.r-footer__legal a:hover { color: var(--r-grey); }

/* ============================================================
   13. SINGLE EVENT
   ============================================================ */
.r-event-bloom {
  position: fixed; inset: 0;
  background-size: cover; background-position: center;
  /* brightness .5 keeps off-white type at 4.9:1 over a white poster. */
  filter: saturate(240%) brightness(.5) blur(clamp(38px, 6vw, 80px));
  opacity: .5;
  z-index: -1;
  pointer-events: none;
}
.r-event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  /* auto 1fr: the aside spans both rows, and without this its extra height
     was split evenly between them, pushing the copy ~180px below the H1.
     Now the title row is exactly as tall as the title; the rest goes to
     the copy row. */
  grid-template-rows: auto 1fr;
  align-content: start;
  column-gap: clamp(24px, 3.4vw, 64px);
  padding: clamp(104px, 13vh, 150px) var(--pad-x) clamp(60px, 10vh, 120px);
  max-width: var(--page-w); margin: 0 auto;
}
.r-event-hero          { grid-column: 1; grid-row: 1; position: relative; padding: 0 0 clamp(24px, 4vh, 44px); }
.r-event-layout__main  { grid-column: 1; grid-row: 2; }
/* The aside stretches both rows: that is the track the sticky tickets
   box travels in. The poster scrolls away; only the box pins. */
.r-event-layout__aside { grid-column: 2; grid-row: 1 / span 2; }
@media (min-width: 881px) { .r-tickets-box { position: sticky; top: 96px; } }
.r-event-hero__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; color: var(--r-grey); }
.r-event-hero__date {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(42px, 6vw, 100px); line-height: .86; letter-spacing: var(--trk-display);
}
.r-event-hero__date .is-month { color: rgba(204, 204, 203, .55); }
.r-event-hero .r-h1 { font-size: clamp(32px, 5vw, 84px); margin-top: 6px; }
.r-event-figure { margin: 0 0 clamp(16px, 2vh, 24px); }
/* Colour by default, monochrome on hover — the sitewide imagery rule. */
.r-event-figure { overflow: hidden; }
.r-event-figure img { display: block; width: 100%; height: auto; filter: none; transition: filter .5s, transform .6s var(--ease-out); }
.r-event-figure:hover img { filter: grayscale(1) contrast(1.15) brightness(.6); transform: scale(1.04); }
@media (max-width: 880px) {
  .r-event-layout { grid-template-columns: 1fr; }
  .r-event-hero, .r-event-layout__main, .r-event-layout__aside { grid-column: auto; grid-row: auto; }
  .r-event-hero          { order: 1; }
  .r-event-layout__aside { order: 2; margin-bottom: clamp(28px, 5vh, 48px); }
  .r-event-layout__main  { order: 3; }
}
.r-lineup__head { margin-top: 42px; }
.r-lineup { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.r-lineup li { padding: 5px 0; font-weight: 400; }
@media (min-width: 900px) { .r-lineup { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 50px); } }
.r-facts { border-top: 1px solid var(--r-line); margin-top: 42px; }
.r-facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--r-line); }
.r-facts__row dt { color: var(--r-grey); }
.r-facts__row dd { margin: 0; text-align: right; }
.r-tickets-box { border-top: 3px solid var(--r-accent); padding: clamp(18px, 2.4vw, 30px); background: var(--r-panel); }
.r-tickets-box .r-h2 { margin-bottom: 14px; }
/* Over the colour wash --r-grey can drop to 2.4:1 on a light poster, so
   the secondary text on this page is off-white; the label size and the
   dt/dd split carry the hierarchy. */
.single-radion_event .r-event-hero__meta,
.single-radion_event .r-facts__row dt,
.single-radion_event .r-prose blockquote,
.single-radion_event .r-prose figcaption { color: var(--r-offwhite); }
#radion-stager-event { min-height: 120px; }
.r-stager-next { margin-top: 16px; }

/* News single */
.r-article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; color: var(--r-grey); }
.r-article-media { margin: 0; position: relative; overflow: hidden; }
.r-article-media { overflow: hidden; }
.r-article-media img { display: block; width: 100%; max-height: 62vh; object-fit: cover; filter: none; transition: filter .5s, transform .6s var(--ease-out); }
.r-article-media:hover img { filter: grayscale(1) brightness(.6) contrast(1.15); transform: scale(1.04); }

/* Buttons - sharp, one style, the accent only on the primary action. */
.r-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-text); font-weight: 600; font-size: 12px;
  letter-spacing: var(--trk-label); text-transform: uppercase;
  border: 1px solid var(--r-line-strong); padding: 14px 22px;
  transition: background .3s, color .3s, border-color .3s, transform .2s;
  cursor: pointer; background: none;
}
.r-btn:hover { background: var(--r-offwhite); color: var(--r-black); border-color: var(--r-offwhite); }
.r-btn:active { transform: translateY(1px); }
.r-btn--accent { background: var(--r-accent); border-color: var(--r-accent); color: var(--r-offwhite); }
.r-btn--accent:hover { background: var(--r-offwhite); border-color: var(--r-offwhite); color: var(--r-black); }

/* ============================================================
   14. INTERIOR PAGE COMPONENTS
   ============================================================ */
.r-secblock {
  display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 2fr);
  gap: clamp(20px, 4vw, 70px);
  padding: clamp(30px, 5vh, 60px) 0;
  border-top: 1px solid var(--r-line);
}
.r-secblock:last-of-type { border-bottom: 1px solid var(--r-line); }
.r-secblock__side { align-self: start; }
.r-secblock__title {
  font-family: var(--f-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 48px); line-height: .96; letter-spacing: var(--trk-display-sm);
  margin: 0;
}
.r-secblock__side .r-rule { margin: 16px 0 0; background: var(--r-line-strong); } /* the accent is the page-hero rule's alone */
@media (max-width: 760px) {
  .r-secblock { grid-template-columns: 1fr; gap: 14px; }
  .r-secblock__side .r-rule { display: none; }
}

/* Contact cards */
.r-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: 8px 0 24px; }
.r-contact-card {
  display: flex; flex-direction: column; gap: 12px; position: relative;
  border: 1px solid var(--r-line);
  padding: clamp(16px, 2vw, 26px);
  transition: border-color .3s, background .3s;
}
.r-contact-card:hover { border-color: var(--r-line-strong); background: rgba(204,204,203,.04); }
.r-contact-card__mail {
  font-weight: 500; font-size: clamp(13px, .95vw, 15px);
  white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.r-contact-card__arrow { position: absolute; top: 14px; right: 16px; color: var(--r-grey); transition: color .3s, transform .3s; }
.r-contact-card:hover .r-contact-card__arrow { color: var(--r-offwhite); transform: translate(2px, -2px); }

/* Anchor nav (policies) */
.r-anchor-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 0 6px; }
.r-anchor-nav a { color: var(--r-grey); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.r-anchor-nav a:hover { color: var(--r-offwhite); border-color: var(--r-accent); }

/* Club Care page - one warm, unhurried column. */
.r-page-hero--care { padding-bottom: clamp(20px, 4vh, 40px); }
/* The section sits in the page container like every other (so it shares
   the H1's left edge); the single warm column inside it is capped at 820px. */
.r-care { padding-top: 0; }
.r-care > * { max-width: 820px; }
.r-care-box {
  background: var(--r-warm); color: var(--r-offwhite);
  border-left: 3px solid var(--r-warm-text);
  padding: clamp(22px, 3vw, 40px); margin: 0 0 clamp(30px, 5vh, 56px);
}
.r-care-box__label { display: block; color: var(--r-warm-text); margin-bottom: 12px; }
.r-care-box__body p { margin: 0 0 .8em; line-height: 1.65; }
.r-care-box__body p:last-child { margin-bottom: 0; }
.r-care-box a { border-bottom: 1px solid var(--r-warm-line); transition: border-color .3s; }
.r-care-box a:hover { border-color: var(--r-warm-text); }
.r-care__intro { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; margin-bottom: clamp(24px, 4vh, 40px); }
.r-care__intro p { margin: 0 0 1em; }
.r-care__block + .r-care__block { margin-top: clamp(26px, 4vh, 44px); }
.r-care__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1; letter-spacing: var(--trk-display-sm);
  margin: 0 0 10px; color: var(--r-warm-text);
}
.r-care .r-prose { max-width: none; line-height: 1.7; }
.r-care .r-prose p { margin: 0 0 1em; }
.r-care .r-prose p:last-child { margin-bottom: 0; }
.r-care__photo { margin: clamp(30px, 5vh, 56px) 0; }
.r-care__photo { overflow: hidden; }
.r-care__photo img { display: block; width: 100%; max-height: 56vh; object-fit: cover; filter: none; transition: filter .5s, transform .6s var(--ease-out); }
.r-care__photo:hover img { filter: grayscale(1) brightness(.6) contrast(1.15); transform: scale(1.04); }
.r-care__photo figcaption { margin: 10px 0 0; }

/* CTA panels (collaborations) */
.r-cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: clamp(24px, 4vh, 44px); }
.r-cta-panel { border-top: 1px solid var(--r-line-strong); padding: clamp(20px, 3vw, 36px) 0 0; display: flex; flex-direction: column; gap: 14px; }
.r-cta-panel .r-h2 { font-size: clamp(22px, 2.4vw, 34px); }
.r-cta-panel p { margin: 0; color: var(--r-grey); }
.r-cta-panel .r-btn { align-self: flex-start; margin-top: auto; }

/* Payment successful (templates/page-payment-success.php). The tick takes
   the red rule's place under the label: one accent square, sharp like
   everything else. Two-class selectors so the phone rule for .r-section
   further down does not put the top padding back. */
.r-page-hero--success { padding-bottom: clamp(22px, 4vh, 44px); }
.r-success__mark {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 22px;
  background: var(--r-accent); color: var(--r-offwhite);
}
.r-success__mark svg { width: 30px; height: 30px; display: block; }
.r-section.r-success { padding-top: 0; }
.r-success__lede { margin-bottom: clamp(30px, 6vh, 60px); }
.r-success__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 5vh, 56px); }
.r-section.r-section--more { padding-top: clamp(20px, 4vh, 44px); }

/* Job cards */
.r-job-card { border-top: 1px solid var(--r-line-strong); padding: clamp(20px, 3vw, 36px) 0; }
.r-job-card + .r-job-card { margin-top: 8px; }
.r-job-card .r-h2 { font-size: clamp(22px, 2.4vw, 34px); margin-bottom: 12px; }
.r-job-card__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; color: var(--r-grey); }
.r-job-card .r-btn { margin-top: 16px; }
.is-accent-tag { color: var(--r-offwhite); }

/* Facts / address strip on contact */
.r-info-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(16px, 3vw, 40px); border-top: 1px solid var(--r-line); border-bottom: 1px solid var(--r-line); padding: clamp(18px, 3vh, 30px) 0; margin: clamp(24px, 4vh, 44px) 0; }
.r-info-strip > div { display: flex; flex-direction: column; gap: 8px; }

/* Venue-rental spread: the portrait holds the left column and stays
   with the reader while the copy scrolls past it. */
.r-rent-spread { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.r-rent-spread--solo { grid-template-columns: minmax(0, 1fr); } /* photo hidden from the page editor */
.r-rent-block + .r-rent-block { margin-top: clamp(24px, 4vh, 44px); }
.r-rent-block__title {
  font-family: var(--f-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(24px, 3vw, 40px); line-height: .96; letter-spacing: var(--trk-display-sm);
  margin: 0 0 12px;
}
.r-rent-figure { margin: 0; max-width: none; position: sticky; top: 96px; }
.r-rent-figure { overflow: hidden; }
.r-rent-figure img { display: block; width: 100%; height: auto; filter: none; transition: filter .5s, transform .6s var(--ease-out); }
.r-rent-figure:hover img { filter: grayscale(1) brightness(.6) contrast(1.15); transform: scale(1.04); }
.r-rent-figure figcaption { margin-top: 10px; }
@media (max-width: 900px) {
  .r-rent-spread { grid-template-columns: 1fr; gap: clamp(22px, 4vh, 40px); }
  .r-rent-figure { position: static; max-width: 460px; }
}

/* ============================================================
   15. UTILITY PAGES / PAGINATION
   ============================================================ */
.r-utility { min-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 120px var(--pad-x); text-align: center; }
.r-utility__emblem { width: clamp(120px, 18vw, 220px); }
.r-utility__emblem img { display: block; width: 100%; }
.post-password-form input[type="password"] { background: none; border: 1px solid var(--r-line-strong); padding: 12px 16px; color: var(--r-offwhite); }
.post-password-form input[type="submit"] {
  background: var(--r-offwhite); color: var(--r-black); border: 0; padding: 12px 22px;
  font-weight: 600; font-size: 12px; letter-spacing: var(--trk-label); text-transform: uppercase; cursor: pointer;
}
.r-pagination { display: flex; gap: 16px; flex-wrap: wrap; padding: clamp(26px, 5vh, 50px) var(--pad-x); }
.r-pagination a, .r-pagination span { padding-bottom: 4px; border-bottom: 1px solid var(--r-line-strong); }
.r-pagination a:hover { color: var(--r-grey); border-color: var(--r-accent); }
.r-pagination .current { color: var(--r-dim); border-color: var(--r-line); }

/* ============================================================
   16. MOTION
   Entrances only, all transform/opacity, all gated on JS being alive
   and motion not being reduced. Never on the display headings.
   ============================================================ */
[data-reveal] { opacity: calc(var(--shown, 0)); transform: translateY(calc((1 - var(--shown, 0)) * 28px)); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }

html:not(.no-js) .r-anim {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--stag, 0) * 60ms);
}
html:not(.no-js) .r-anim--left { transform: translateX(-32px); }
html:not(.no-js) .r-anim.is-in { opacity: 1; transform: none; }

/* Display headings carry no entrance anywhere: page H1s, the home section
   titles and the hero are simply there on arrival (feedback 16.09, after
   round 3 and 08.09 did the same for the hero). The letter/word mask
   reveal and the pre-paint hold that served it were removed with it. */

/* The page-transition sheet (.r-wipe) was removed with its script (feedback 17.09). */

/* iOS zooms the page when a field under 16px takes focus. */
@media (hover: none), (pointer: coarse) {
  .r-newsletter input,
  input[type="text"], input[type="email"], input[type="search"], input[type="url"],
  input[type="tel"], input[type="number"], input[type="password"], input[type="date"],
  select, textarea { font-size: 16px; }
}
/* Phones pay the most for a full-screen blended layer and see it least. */

/* Interior pages on a phone: keep the proportions, cut the floors. */
@media (max-width: 620px) {
  .r-page-hero { padding-top: clamp(104px, 15vh, 150px); padding-bottom: clamp(22px, 4vh, 40px); }
  .r-page-hero__kicker { margin-bottom: 12px; gap: 8px; }
  .r-page-hero__kicker .r-label { flex: 1 1 100%; }
  .r-page-hero__kicker .r-label:last-child { flex-basis: auto; }
  .r-rule { margin-bottom: 14px; }
  .r-section { padding-top: clamp(44px, 8vh, 90px); padding-bottom: clamp(44px, 8vh, 90px); }
  .r-is-front .r-section { padding-top: clamp(64px, 11vh, 120px); padding-bottom: clamp(64px, 11vh, 120px); }
  .r-is-front .r-section--program { padding-top: calc(clamp(28px, 4vh, 52px) + 50px); }
  .r-secblock { padding: clamp(26px, 5vh, 48px) 0; }
  .r-info-strip { margin: 26px 0; padding: 22px 0; gap: 22px; }
  .r-contact-card { padding: 15px 16px; gap: 8px; }
  .r-contact-grid { gap: 10px; margin-bottom: 8px; }
  .r-contact-card__arrow { top: 12px; right: 13px; }
  .r-care-box { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .r-header__mark svg path { transition: none; }
  .r-header__logo:hover .r-header__mark svg path { transform: none; opacity: 1; }
  html:not(.no-js) .r-anim { opacity: 1; transform: none; transition: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .r-menu-scrim { transition: none; }
  .r-menu-btn__bars span { transition: none; }
  .r-ecard__media img, .r-card__media img, .r-event-row__media img,
  .r-about__photo img, .r-event-figure img, .r-care__photo img, .r-rent-figure img, .r-article-media img, .r-prose img { transition: none; }
  .r-ecard:hover .r-ecard__media img, .r-card:hover .r-card__media img, .r-event-row:hover .r-event-row__media img { transform: none; }
  .r-ecard { transition: none; }
  .r-ecard:hover, .r-ecard:focus-visible { transform: none; }
}

/* No-JS: everything JS would reveal is simply visible */
.no-js [data-reveal] { opacity: 1; transform: none; }
/* Without main.js the drawer cannot open, so it renders as a plain row
   of links under the header and the dead toggle is hidden. */
.no-js .r-menu-btn { display: none; }
.no-js .r-menu {
  position: static; width: auto; transform: none; visibility: visible;
  border-left: 0; border-bottom: 1px solid var(--r-line);
  padding: 92px var(--pad-x) 20px;
}
.no-js .r-menu__list { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.no-js .r-menu__list a { font-size: 18px; }
.no-js .r-menu__meta { display: none; }

/* Accessibility */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid var(--r-offwhite); outline-offset: 3px; }

/* WP admin bar offset */
.admin-bar .r-header { top: 32px; }
.admin-bar .r-menu { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .r-header { top: 46px; }
  .admin-bar .r-menu { top: 46px; }
}
@media (max-width: 600px) { .admin-bar #wpadminbar { position: fixed; } }

/* WP core alignment classes (minimal) */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 0 auto 1em; }
.wp-caption { max-width: 100%; }