/* ---- relay (Relay — Community radio 81) ------------------------------------
   THE STRUCTURAL MOVE: the bare count band. Four figures set enormous in the
   page's only orange over tiny caps, floating mid-page in whitespace with no
   ground and no photograph behind them. That band and the four-up icon row
   above it carry the whole who-we-are job between them, so no paragraph of
   history is ever written. Around them the rhythm is contained-narrow, bleed,
   contained-narrow, bleed: a full-viewport four-slide hero with the nav riding
   transparent on the photograph, the icon row, the count band, a gapless
   eight-tile wall wider than every word above it, and one ruled week of
   programmes as the last thing read. There is no split block anywhere.
   Orange is spent exactly three times — the on-air dot beside the wordmark,
   the four figures, and the underline that grows under a nav link. Padding
   sits on a lower-specificity rule than the per-band exceptions so those can
   still win; no :first-of-type / :nth-of-type is used to reach a section. */
body.t-relay.ws-body {
  --bg: #f3f1ea; --fg: #3b3a36; --heading: #121210; --text: #3b3a36; --muted: #86847c;
  --rl-signal: #e04e1b; --rl-line: #d8d4c9;
  --hero-a: rgba(13, 12, 10, .30); --hero-b: rgba(13, 12, 10, .64);
}
body.t-relay { background: var(--bg); }

/* nav rides transparent directly on the photograph and does not pin on scroll */
body.t-relay .ws-nav { position: absolute; top: 0; left: 0; right: 0; padding: 13px 0; background: transparent; backdrop-filter: none; border-bottom: 0; color: #f5f3ec; }
body.t-relay .ws-brand { color: #f5f3ec; text-transform: uppercase; letter-spacing: .26em; font-size: 12.5px; font-weight: 700; }
/* orange 1 of 3 — the on-air light */
body.t-relay .ws-brand::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 11px; border-radius: 50%; background: var(--rl-signal); vertical-align: 2px; }
/* orange 2 of 3 — the underline grows out of the link, it is never just there */
body.t-relay .ws-nav-links a { color: #f5f3ec; opacity: .84; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; padding-bottom: 4px; background-image: linear-gradient(var(--rl-signal), var(--rl-signal)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size .3s ease; }
body.t-relay .ws-nav-links a:hover, body.t-relay .ws-nav-links a.on { opacity: 1; color: #f5f3ec; border-bottom: 0; background-size: 100% 2px; }
/* the two at the right end read as buttons — slabs, no borders anywhere */
body.t-relay .ws-nav-links a:nth-last-of-type(2), body.t-relay .ws-nav-links a:last-of-type { padding: 11px 19px; background-image: none; background-color: rgba(245, 243, 236, .15); }
body.t-relay .ws-nav-links a:last-of-type { background-color: #f5f3ec; color: #121210; opacity: 1; }

/* hero — one whole viewport, copy dead centre under a small transmitter mark */
body.t-relay .ws-hero { min-height: 100vh; }
body.t-relay .ws-hero-inner::before { content: ''; display: block; width: 12px; height: 12px; margin: 0 auto 30px; border-radius: 50%; border: 1.5px solid rgba(245, 243, 236, .9); box-shadow: 0 0 0 7px rgba(245, 243, 236, .13), 0 0 0 15px rgba(245, 243, 236, .06); }
body.t-relay .ws-hero h1 { color: #f5f3ec; font-size: clamp(46px, 9.2vw, 118px); font-weight: 700; letter-spacing: -.045em; line-height: .94; text-shadow: none; max-width: 13ch; }
body.t-relay .ws-hero p { color: #e3dfd5; font-size: 15px; line-height: 1.72; max-width: 54ch; opacity: .92; margin: 22px auto 34px; }
body.t-relay.ws-body .btn.brand { background: var(--heading); color: var(--bg); border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 700; padding: 17px 34px; }
/* the hero ask is plain text with a rule under it, not a slab */
body.t-relay.ws-body .ws-hero-cta.btn.brand { background: transparent; color: #f5f3ec; padding: 0 0 7px; box-shadow: inset 0 -1px 0 rgba(245, 243, 236, .55); }

/* rhythm first (low specificity), then the zebra wash killed (high) */
body.t-relay .ws-section { padding: 106px 0; }
body.t-relay.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-relay .ws-h2, body.t-relay .ws-title-h, body.t-relay .ws-cta-inner h2 { color: var(--heading); font-size: clamp(30px, 4.6vw, 54px); font-weight: 700; letter-spacing: -.042em; line-height: 1.02; margin: 0 0 14px; }
body.t-relay .ws-sub, body.t-relay .ws-title-sub, body.t-relay .ws-feature p { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* the icon row — four across, no photographs, air above and below */
body.t-relay .ws-features, body.t-relay .ws-columns { padding: 126px 0; }
body.t-relay .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 30px; margin-top: 14px; }
body.t-relay .ws-feature h3 { color: var(--heading); font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }

/* THE COUNT BAND — orange 3 of 3, nothing behind it, labels almost too small */
body.t-relay .ws-columns .ws-cols-4 { gap: 30px; text-align: center; }
body.t-relay .ws-col-h { color: var(--rl-signal); font-size: clamp(54px, 9.4vw, 124px); font-weight: 700; letter-spacing: -.06em; line-height: .86; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
body.t-relay .ws-col p { color: var(--muted); text-transform: uppercase; letter-spacing: .2em; font-size: 9.5px; font-weight: 700; line-height: 1.7; margin: 0; }

/* the wall runs wider than every word above it, and every frame is warm grey */
body.t-relay .ws-titleblock { padding: 122px 0 34px; }
body.t-relay .ws-photogrid { padding: 0; }
body.t-relay .ws-photogrid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-relay .ws-photogrid-grid img, body.t-relay .ws-hero-slide { filter: grayscale(1) sepia(.12) contrast(1.04); }

/* quotes read across as one line, not as a grid of cards */
body.t-relay .ws-testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
body.t-relay .ws-quote { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
body.t-relay .ws-quote blockquote { color: var(--heading); font-size: 15px; line-height: 1.76; margin: 0 0 18px; }
body.t-relay .ws-quote blockquote::before { content: none; }
body.t-relay .ws-quote figcaption { display: flex; align-items: center; gap: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .15em; font-size: 10px; }
body.t-relay .ws-quote figcaption::before { content: ''; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--rl-line); }

/* the one ruled run on the page — small, even, a hairline between every line */
body.t-relay .ws-listblock { padding: 0 0 112px; }
body.t-relay .ws-list { list-style: none; padding-left: 0; border-top: 1px solid var(--rl-line); }
body.t-relay .ws-list li { border-bottom: 1px solid var(--rl-line); margin: 0; padding: 15px 2px; font-size: 13.5px; line-height: 1.55; color: var(--text); }

/* it ends quietly — no coloured band, one button, then the form */
body.t-relay .ws-cta { background: transparent; color: var(--text); padding: 0 0 116px; }
body.t-relay .ws-contact { border-top: 1px solid var(--rl-line); padding: 88px 0 104px; }
body.t-relay .ws-field input, body.t-relay .ws-field textarea, body.t-relay .ws-field select { background: transparent; border: 0; border-bottom: 1px solid var(--rl-line); border-radius: 0; color: var(--heading); padding: 11px 2px; }

/* mobile: the menu drops into a bone panel, so the bone type has to flip back */
@media (max-width: 760px) {
  body.t-relay .ws-nav-links a, body.t-relay .ws-nav-links a:nth-last-of-type(2), body.t-relay .ws-nav-links a:last-of-type, body.t-relay .ws-nav-links .theme-toggle { color: var(--heading); opacity: 1; background-image: none; background-color: transparent; }
  body.t-relay .ws-features-grid, body.t-relay .ws-photogrid-grid, body.t-relay .ws-columns .ws-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-relay .ws-testimonials-grid { grid-template-columns: 1fr; }
  body.t-relay .ws-hero h1 { font-size: clamp(38px, 12vw, 62px); }
}

/* night — same tokens, same three orange moments, one stop hotter */
html[data-theme="dark"] body.t-relay.ws-body {
  --bg: #131311; --fg: #a8a69e; --heading: #f1efe8; --text: #a8a69e; --muted: #7c7a70;
  --rl-signal: #f2632c; --rl-line: #2c2b26;
  --hero-a: rgba(9, 9, 8, .34); --hero-b: rgba(9, 9, 8, .70);
}
html[data-theme="dark"] body.t-relay { background: var(--bg); }