/*
 * Hills Run Club - the component set.
 * Brand Guidelines 2026, v4.0.
 *
 * The layouts here are the live site's layouts. Nothing moved: the hero still
 * centres its line over a photograph, the upcoming runs are still a filled row
 * with the run number at the left and the register note at the right, the
 * partner cards still carry a logo beside the name and a full-width action at
 * the foot. What changed is the surface, the type and the colour.
 *
 * Every value comes from tokens.css. If this file and the deck disagree, this
 * file is the bug.
 */

/* ---------- base ---------- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body.hrc-coded {
  margin: 0;
  font: var(--w-body) var(--body)/var(--body-lh) var(--font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  --on-surface: var(--ink);
  --meta-surface: var(--slate);
  --orange-text: var(--action);
}
.hrc-coded :where(img) { max-width: 100%; height: auto; display: block; }
.hrc-coded :where(a) { color: inherit; }
.hrc-coded :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: var(--w-title); }
.hrc-coded :where(p) { margin: 0 0 var(--s2); }
.hrc-coded :where(p:last-child) { margin-bottom: 0; }

/* Focus is visible on every control, and never removed. */
.hrc-coded :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: 4px;
}
.sec-dark :where(a, button, summary):focus-visible,
.sec-hero :where(a, button, summary):focus-visible,
.foot :where(a, button):focus-visible { outline-color: var(--signal); }

/* ---------- bands ----------
   White or ink. There is no mid grey, and a section never draws a line to
   separate itself from the next one. */
.sec { padding: calc(var(--section) / 2) 0; background: var(--white); color: var(--ink); }
.sec-dark, .sec-band {
  background: var(--ink); color: var(--white);
  --on-surface: var(--white); --meta-surface: var(--meta-dark); --orange-text: var(--glow);
}
.sec-chalk { background: var(--white); }   /* v4.0 retired the chalk band */

.wrap {
  width: 100%;
  max-width: calc(var(--container) + var(--margin) * 2);
  margin: 0 auto;
  padding: 0 var(--margin);
}
.sec > .wrap > * + * { margin-top: var(--s3); }
.sec > .wrap > :where(.h, .prose.is-display, .prose.is-title) + * { margin-top: var(--s2); }
.sec > .wrap > * + :where(.cards, .events, .gallery, .accordion, .rail, .group) { margin-top: var(--s4); }

/* A section that opens with two headings sets them out as the live site does:
   the title on the left, the line that explains it on the right. */
.sec > .wrap:has(> .h:first-child + .h) {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--gutter); row-gap: var(--s4);
}
.sec > .wrap:has(> .h:first-child + .h) > * { grid-column: 1 / -1; margin-top: 0; }
.sec > .wrap:has(> .h:first-child + .h) > .h:first-child { grid-column: 1; }
.sec > .wrap:has(> .h:first-child + .h) > .h:first-child + .h {
  grid-column: 2; align-self: end; justify-self: start;
  font-size: var(--lead); line-height: var(--lead-lh); letter-spacing: 0;
  font-weight: var(--w-lead); color: var(--meta-surface); max-width: 46ch;
}

/* An ink band of three blocks splits the way the live page splits it:
   the statement on the left, the story on the right. */
.sec-dark > .wrap:has(> .prose:first-child + .prose + .prose:last-child) {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--gutter); row-gap: var(--s2); align-content: center;
}
.sec-dark > .wrap:has(> .prose:first-child + .prose + .prose:last-child) > * { margin-top: 0; }
.sec-dark > .wrap:has(> .prose:first-child + .prose + .prose:last-child) > .prose:last-child {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
}

/* ---------- the type ladder ---------- */
.h {
  font-size: var(--title); line-height: var(--title-lh);
  letter-spacing: var(--title-ls); font-weight: var(--w-title);
  color: var(--on-surface); text-wrap: balance;
}
h1.h { font-size: var(--display-02); line-height: var(--display-02-lh); letter-spacing: var(--display-02-ls); }
h3.h { font-size: var(--subtitle); line-height: var(--subtitle-lh); letter-spacing: var(--subtitle-ls); font-weight: var(--w-sub); }
h4.h, h5.h, h6.h {
  font-size: var(--label); line-height: var(--label-lh); letter-spacing: var(--label-ls);
  font-weight: var(--w-label); text-transform: uppercase; color: var(--orange-text);
}

.prose { max-width: var(--measure); font-size: var(--body); line-height: var(--body-lh); }
.prose > p { margin: 0 0 var(--s2); }
.prose > p:last-child { margin-bottom: 0; }
.prose > :where(ul, ol) { margin: 0 0 var(--s2); padding-left: 1.2em; }
.prose > :where(ul, ol) li + li { margin-top: var(--s1); }
.prose a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--on-surface); }
.sec-dark .prose { color: var(--meta-dark); }
.sec-dark .prose strong, .sec-dark .prose b { color: var(--white); }

/* Elementor set most headings as plain text widgets; _levels.json records what
   each phrase actually reads as on the live page. */
.prose.is-display {
  max-width: none; font-size: var(--display-03); line-height: var(--display-03-lh);
  letter-spacing: var(--display-03-ls); font-weight: var(--w-display);
  color: var(--on-surface); text-wrap: balance;
}
.prose.is-title {
  max-width: none; font-size: var(--title); line-height: var(--title-lh);
  letter-spacing: var(--title-ls); font-weight: var(--w-title);
  color: var(--on-surface); text-wrap: balance;
}
.prose.is-subtitle {
  max-width: none; font-size: var(--subtitle); line-height: var(--subtitle-lh);
  letter-spacing: var(--subtitle-ls); font-weight: var(--w-sub); color: var(--on-surface);
}
.prose.is-lead { font-size: var(--lead); line-height: var(--lead-lh); color: var(--meta-surface); }
.prose.is-display > p, .prose.is-title > p, .prose.is-subtitle > p { margin: 0; }

/* A block of more than one paragraph is reading copy whatever size the old
   page set it at: body, 34em, with air between the paragraphs. */
.prose.is-display:has(p + p),
.prose.is-title:has(p + p),
.prose.is-subtitle:has(p + p) {
  font-size: var(--body); line-height: var(--body-lh); letter-spacing: 0;
  font-weight: var(--w-body); max-width: var(--measure); color: var(--meta-surface);
}
.prose.is-display:has(p + p) > p,
.prose.is-title:has(p + p) > p,
.prose.is-subtitle:has(p + p) > p { margin: 0 0 var(--s2); }
.prose.is-display:has(p + p) > p:last-child,
.prose.is-title:has(p + p) > p:last-child,
.prose.is-subtitle:has(p + p) > p:last-child { margin-bottom: 0; }

.empty { color: var(--meta-surface); font-size: var(--small); }

/* ---------- controls ----------
   One primary per view, 48px tall, Action gradient with a white label. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 48px; padding: 0 var(--s3);
  background: var(--action); background-image: var(--grad-action);
  color: var(--white);
  font: var(--w-label) 16px/1 var(--font); letter-spacing: 0;
  border: 0; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-lift) var(--ease-travel),
              color var(--t-lift) var(--ease-travel),
              filter var(--t-lift) var(--ease-travel);
}
.btn:hover { background-color: var(--ink); background-image: none; color: var(--white); }
.btn:active { background-color: var(--deep); background-image: none; }
.btn::after { content: "\2192"; font-weight: 400; }

.btn-secondary, .sec > .wrap .btn ~ .btn {
  background: transparent; background-image: none; color: var(--on-surface);
  box-shadow: inset 0 0 0 1.5px var(--on-surface);
}
.btn-secondary::after, .sec > .wrap .btn ~ .btn::after { content: none; }
.btn-secondary:hover, .sec > .wrap .btn ~ .btn:hover {
  background: var(--on-surface); color: var(--ink);
}
.sec-dark .btn-secondary:hover, .sec-hero .btn-secondary:hover { color: var(--ink); }

/* The tertiary action: the live site's "Learn more >", in the brand. */
.link, .event-more {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--orange-text); font-weight: var(--w-label); font-size: var(--small);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--t-tap) var(--ease-travel);
}
.link::after, .event-more::after { content: "\2192"; text-decoration: none; }
.link:hover, .event-more:hover { color: var(--on-surface); }

/* The quiet utility tier: 44px pill, white with a hairline. */
.pill {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 44px; padding: 0 var(--s2);
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font: var(--w-sub) var(--small)/1 var(--font); text-decoration: none;
}
.pill svg { width: 18px; height: 18px; }

/* ---------- lists, social, figures ---------- */
.list { list-style: none; margin: 0; padding: 0; font-size: var(--body); }
.list li + li { margin-top: var(--s2); }
.list a { text-decoration: none; transition: color var(--t-tap) var(--ease-travel); }
.list a:hover { color: var(--orange-text); }

.social { list-style: none; display: flex; gap: var(--s2); margin: 0; padding: 0; }
.social a { display: inline-flex; color: var(--orange-text); transition: color var(--t-tap) var(--ease-travel); }
.social a:hover { color: var(--on-surface); }
.social svg { width: 22px; height: 22px; }

.figure { margin: 0; overflow: hidden; border-radius: var(--r-card); }

/* ---------- labels and tags ---------- */
.label, .event-series, .foot-heading {
  font-size: var(--label); line-height: var(--label-lh);
  letter-spacing: var(--label-ls); font-weight: var(--w-label);
  text-transform: uppercase;
}
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s2);
  border-radius: var(--r-pill);
  font-size: var(--label); letter-spacing: var(--label-ls); font-weight: var(--w-label);
  text-transform: uppercase; white-space: nowrap;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
}
.tag-now  { background: var(--signal); border-color: transparent; color: var(--white); }
.tag-done { background: var(--ink); border-color: transparent; color: var(--white); }
.tag-member { background: var(--teal); border-color: transparent; color: var(--white); }
.tag-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---------- hero ----------
   As the live page builds it: a photograph inset to the container, the brand
   line centred over the top of it. */
.sec-hero {
  padding: 0; background: var(--ink); color: var(--white);
  --on-surface: var(--white); --meta-surface: var(--meta-dark); --orange-text: var(--glow);
}
.sec-hero > .wrap {
  position: relative; isolation: isolate;
  min-height: 760px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-top: 60px; padding-bottom: var(--s5);
}
.sec-hero.has-media > .wrap::before {
  content: ""; position: absolute; inset: 0 var(--margin); z-index: -2;
  background: var(--sec-image) center / cover no-repeat;
  transition: background-image var(--t-settle) var(--ease-settle);
}
.sec-hero.has-media > .wrap::after {
  content: ""; position: absolute; inset: 0 var(--margin); z-index: -1;
  background: linear-gradient(to bottom,
    rgba(28,28,28,.74) 0%, rgba(28,28,28,.42) 26%, rgba(28,28,28,0) 58%);
}
.sec-hero > .wrap > * + * { margin-top: var(--s2); }
.sec-hero .h,
.sec-hero .prose.is-display,
.sec-hero .prose.is-title {
  color: var(--white); max-width: 20ch;
  font-size: var(--display-02); line-height: var(--display-02-lh);
  letter-spacing: var(--display-02-ls); font-weight: var(--w-display);
}
.sec-hero .h ~ .h,
.sec-hero .h ~ .prose,
.sec-hero .prose.is-display ~ .prose,
.sec-hero .h a {
  font-size: var(--small); line-height: var(--small-lh); letter-spacing: 0;
  font-weight: var(--w-body); max-width: 46ch; color: var(--glow);
}
.sec-hero .h a { display: block; margin-top: var(--s2); text-decoration: none; }
.sec-hero .h a:hover { color: var(--white); }
.sec-hero .prose { color: var(--white); }
.sec-hero .figure, .sec-hero .rail .figure { display: none; }
.sec-hero .rail, .sec-hero .rail-item { display: contents; }

/* ---------- band: a whole block of copy that happens to sit on a photo ---------- */
.sec-band { position: relative; }
.sec-band.has-media::before {
  content: ""; position: absolute; inset: 0;
  background: var(--sec-image) center / cover no-repeat;
}
.sec-band.has-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(28,28,28,.92), rgba(28,28,28,.62));
}
.sec-band > .wrap { position: relative; z-index: 1; }
.sec-band .figure { max-width: 520px; }

/* ---------- cards ----------
   White body, a hairline, radius 16. Never a grey fill, never a shadow.
   The photograph supplies the colour and the surface stays out of its way. */
.cards { display: grid; gap: var(--s3); align-items: stretch; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--pad);
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden;
}
.sec-dark .card, .sec-band .card {
  background: var(--glass); border-color: var(--glass-line); color: var(--white);
  border-radius: var(--r-glass);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  --on-surface: var(--white); --meta-surface: var(--meta-dark); --orange-text: var(--glow);
}

/* The photograph sits on a stage inside the card, as it does on the live page. */
.card > .figure:first-of-type { border-radius: var(--r-card); background: var(--ink); }
.card > .figure:first-of-type img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 28%; height: auto;
  transition: transform var(--t-settle) var(--ease-travel);
}
.card:hover > .figure:first-of-type img { transform: scale(1.03); }

.card .h { font-size: var(--subtitle); line-height: var(--subtitle-lh);
  letter-spacing: var(--subtitle-ls); font-weight: var(--w-sub); }
.card .prose { font-size: var(--small); line-height: var(--small-lh); max-width: none; }

/* The live partner card, in order: a label, the name with the partner mark
   beside it, the run it refers to, the description, a social mark, and one
   full-width action at the foot. */
.card > .prose:first-child {                 /* the exclusive-partner ribbon */
  order: -1; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
  padding: var(--s2) var(--pad); text-align: center;
  background: var(--teal); color: var(--white);
  font-size: var(--label); letter-spacing: var(--label-ls);
  font-weight: var(--w-label); text-transform: uppercase;
}
.card:has(> .prose:first-child) { border-color: var(--teal); }

.card > .figure:first-of-type ~ .prose:first-of-type,
.card > .prose.is-label { color: var(--orange-text); }
/* The partner mark sits beside the name, on its line, as it does on the live
   page - so a card carrying one becomes a two-column grid for that row only. */
.card:has(> .figure ~ .figure) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; row-gap: var(--s2); column-gap: var(--s2);
}
.card:has(> .figure ~ .figure) > * { grid-column: 1 / -1; }
.card > .prose:has(+ .figure:not(:first-of-type)) { grid-column: 1; justify-self: start; }
.card > .figure ~ .figure {
  grid-column: 2; justify-self: end; align-self: center;
  border-radius: 0; background: none;
}
.card > .figure ~ .figure img {
  height: 30px; width: auto; max-width: 140px;
  aspect-ratio: auto; object-fit: contain; object-position: right center;
  transform: none !important;
}
/* The action closes the card: everything else settles above it. */
.card > .btn { width: 100%; margin-top: auto; }
.card > .social { justify-self: start; }
.card > .social + .btn { margin-top: var(--s2); }

/* ---------- upcoming runs ----------
   The live row: the run number at the left, the run in the middle with its
   date, place and distance across three columns, and the register note at the
   right. Same shape, brand surface. */
.events-rows { display: grid; gap: var(--s3); }
.event-row {
  display: grid; grid-template-columns: auto 1fr minmax(0, 260px);
  gap: var(--s2) var(--s3); align-items: center;
  padding: var(--pad);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
}
.sec-dark .event-row {
  background: var(--glass); border-color: var(--glass-line); border-radius: var(--r-glass);
}
.event-number {
  margin: 0; font-size: var(--title); line-height: 1;
  letter-spacing: var(--title-ls); font-weight: var(--w-title); color: var(--signal);
}
.event-row-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.event-series { color: var(--orange-text); }
.event-row-title {
  margin: 0; font-size: var(--subtitle); line-height: var(--subtitle-lh);
  letter-spacing: var(--subtitle-ls); font-weight: var(--w-sub);
}
.event-meta {
  display: grid; grid-template-columns: 1fr 1.2fr .7fr; gap: var(--s1) var(--s3);
  margin: var(--s1) 0 0; font-size: var(--small); line-height: var(--small-lh);
  color: var(--meta-surface);
}
.event-meta > div { display: flex; gap: 6px; min-width: 0; }
.event-meta dt, .event-meta dd { margin: 0; }
.event-meta dt::after { content: ":"; }
.event-more { align-self: flex-start; margin-top: var(--s1); }
.event-row-action { justify-self: end; text-align: right; font-size: var(--small); color: var(--meta-surface); }
.event-row-action a { color: var(--orange-text); }

/* ---------- run cards ----------
   The live photo card: the picture fills it, the detail sits in a band across
   the foot with the run number at the left and one round action at the right. */
.events-cards { display: grid; gap: var(--s3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.events-cards.events-cols-1 { grid-template-columns: 1fr; }
.events-cards.events-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.event-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 400px; border-radius: var(--r-panel); overflow: hidden;
  background: var(--ink) var(--card-image, none) center / cover no-repeat;
  color: var(--white); isolation: isolate;
  --on-surface: var(--white); --meta-surface: var(--meta-dark); --orange-text: var(--glow);
}
.event-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--card-image, none) center / cover no-repeat;
  transition: transform var(--t-settle) var(--ease-travel);
}
.event-card:hover::before { transform: scale(1.03); }
.event-card-link { position: absolute; inset: 0; z-index: 3; }
.event-card-body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s2); padding: var(--stage);
  background: linear-gradient(to top, rgba(28,28,28,.92), rgba(28,28,28,.74) 52%, rgba(28,28,28,0));
}
.event-card-number {
  margin: 0; font-size: var(--display-03); line-height: 1;
  letter-spacing: var(--display-03-ls); font-weight: var(--w-display); color: var(--signal);
}
.event-card-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.event-card-title { margin: 0; font-size: var(--subtitle); line-height: var(--subtitle-lh);
  letter-spacing: var(--subtitle-ls); font-weight: var(--w-sub); color: var(--white); }
.event-card-date { margin: 0; font-size: var(--small); line-height: var(--small-lh); color: var(--meta-dark); }
.event-card-go {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-pill); background: var(--action); background-image: var(--grad-action);
  color: var(--white);
}
.event-card-go svg { width: 18px; height: 18px; }
.event-card-tag { position: absolute; top: var(--s2); left: var(--s2); z-index: 2; }

/* ---------- accordion ---------- */
.sec-accordion > .wrap > .prose:first-child,
.sec-accordion > .wrap > .prose:first-child + .prose { text-align: center; max-width: none; }
.sec-accordion > .wrap > .prose:first-child { color: var(--orange-text); }
.accordion { margin-inline: auto; max-width: 900px; }
.accordion-item { border-bottom: 1px solid var(--line); }
.sec-dark .accordion-item { border-color: var(--line-dark); }
.accordion-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  padding: var(--s3) 0; cursor: pointer; list-style: none;
  font-size: var(--lead); line-height: var(--lead-lh); font-weight: var(--w-sub);
  transition: color var(--t-tap) var(--ease-travel);
}
.accordion-item summary:hover { color: var(--orange-text); }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-mark { position: relative; flex: none; width: 18px; height: 18px;
  transition: transform var(--t-reveal) var(--ease-travel); }
.accordion-mark::before, .accordion-mark::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--orange-text);
}
.accordion-mark::before { width: 18px; height: 2px; }
.accordion-mark::after  { width: 2px; height: 18px; }
.accordion-item[open] .accordion-mark { transform: rotate(45deg); }
.accordion-body { padding: 0 0 var(--s3); max-width: var(--measure); color: var(--meta-surface); }
.accordion-item[open] .accordion-body { animation: hrc-reveal var(--t-reveal) var(--ease-settle); }
@keyframes hrc-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- galleries, rails and the rest ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gutter); }
.gallery .figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.rail { display: grid; gap: var(--s3); }
.rail .gallery {
  display: flex; gap: var(--s2); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: var(--s1); scrollbar-width: thin;
}
.rail .gallery .figure { flex: 0 0 260px; scroll-snap-align: start; }
.rail .gallery .figure img { width: 260px; height: 195px; aspect-ratio: auto; object-fit: cover; }
.rail > .rail-item > * + * { margin-top: var(--s2); }

.tabs { display: grid; gap: var(--s4); }
.group { display: grid; gap: var(--s3); }
.embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-card); }
.legacy-html iframe { display: block; width: 100%; border: 0; }
.map a { color: var(--orange-text); }

.sec .wrap,
.sec .wrap :where(.rail, .rail-item, .group, .tabs, .tab, .cards, .card, .gallery, .events, .accordion) {
  min-width: 0;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- footer ----------
   The live footer: the wordmark band across the top of the ink, then the
   columns beneath it. */
.foot {
  background: var(--ink); color: var(--white);
  font-size: var(--small); line-height: var(--small-lh);
  --on-surface: var(--white); --meta-surface: var(--meta-dark); --orange-text: var(--glow);
}
.foot a { text-decoration: none; transition: color var(--t-tap) var(--ease-travel); }
.foot-wordmark { padding: var(--s5) 0 var(--s4); overflow: hidden; }
.foot-wordmark img { width: 100%; height: auto; display: block; }
.foot-grid {
  display: grid; gap: var(--s4) var(--gutter);
  grid-template-columns: 1.6fr repeat(3, 1fr);
  padding-bottom: var(--s5);
}
.foot-brand { display: flex; flex-direction: column; gap: var(--s3); max-width: 320px; }
.foot-logo img { width: 210px; height: auto; }
.foot-tagline { margin: 0; color: var(--meta-dark); line-height: 24px; }
.foot-social { gap: var(--s3); }
.foot-social a { color: var(--white); }
.foot-social a:hover { color: var(--signal); }
.foot-heading { margin: 0 0 var(--s2); color: var(--signal); }
.foot-col .list { font-size: var(--small); }
.foot-col .list li + li { margin-top: var(--s2); }
.foot-col .list a { color: var(--meta-dark); }
.foot-col .list a:hover { color: var(--white); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: center; justify-content: space-between;
  padding: var(--s3) 0; border-top: 1px solid var(--line-dark); color: var(--meta-dark);
}
.foot-copy { margin: 0; }
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.foot-legal a { color: var(--meta-dark); }
.foot-legal a:hover { color: var(--white); }

/* ---------- forms ---------- */
.hrc-coded .um, .hrc-coded .um-form { font-family: var(--font); }
.hrc-coded .um-field-label, .hrc-coded .um-field-label label {
  font-size: var(--label); line-height: var(--label-lh); letter-spacing: var(--label-ls);
  font-weight: var(--w-label); text-transform: uppercase; color: var(--on-surface);
  margin-bottom: var(--s1);
}
.hrc-coded .um input[type="text"], .hrc-coded .um input[type="email"],
.hrc-coded .um input[type="password"], .hrc-coded .um input[type="tel"],
.hrc-coded .um input[type="number"], .hrc-coded .um input[type="search"],
.hrc-coded .um textarea, .hrc-coded .um select {
  min-height: 48px; padding: 0 var(--s2);
  font: var(--w-body) 16px/48px var(--font); color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-input); box-shadow: none;
  transition: border-color var(--t-tap) var(--ease-travel);
}
.hrc-coded .um textarea { line-height: var(--body-lh); padding: var(--s2); }
.hrc-coded .um :where(input, textarea, select):focus {
  border-color: var(--action); outline: 2px solid var(--action); outline-offset: 2px;
}
.hrc-coded .um-field-error, .hrc-coded .um-notice.err {
  color: var(--orange-text); background: none; border: 0; padding: var(--s1) 0; font-size: var(--small);
}
body.hrc-coded { --hrc-orange: var(--signal); --hrc-cart-accent: var(--action); }
body.hrc-coded .um .um-button,
body.hrc-coded .um input[type="submit"].um-button {
  background: var(--action) !important; background-image: var(--grad-action) !important;
  border-color: transparent !important; color: var(--white) !important;
  border-radius: var(--r-pill) !important; min-height: 48px;
  font: var(--w-label) 16px/1 var(--font);
}
body.hrc-coded .um .um-button:hover, body.hrc-coded .um input[type="submit"].um-button:hover {
  background: var(--ink) !important; background-image: none !important;
}
body.hrc-coded .um .um-button.um-alt {
  background: transparent !important; background-image: none !important;
  color: var(--on-surface) !important; border: 1.5px solid var(--on-surface) !important;
}
body.hrc-coded .um .um-button.um-alt:hover {
  background: var(--on-surface) !important; color: var(--ink) !important;
}
body.hrc-coded .um .um-field-block, body.hrc-coded .um .um-field-block div { color: var(--meta-surface); }
body.hrc-coded .um a { color: var(--orange-text); }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .cards-3, .cards-4, .events-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
  .sec-hero > .wrap { min-height: 560px; }
  .event-row { grid-template-columns: auto 1fr; }
  .event-row-action { grid-column: 2; justify-self: start; text-align: left; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .cards, .cards-2, .cards-3, .cards-4, .events-cards { grid-template-columns: 1fr; }
  .sec > .wrap:has(> .h:first-child + .h),
  .sec-dark > .wrap:has(> .prose:first-child + .prose + .prose:last-child) {
    grid-template-columns: 1fr; row-gap: var(--s2);
  }
  .sec > .wrap:has(> .h:first-child + .h) > .h:first-child,
  .sec > .wrap:has(> .h:first-child + .h) > .h:first-child + .h { grid-column: 1; }
  .sec-dark > .wrap:has(> .prose:first-child + .prose + .prose:last-child) > .prose:last-child {
    grid-column: 1; grid-row: auto;
  }
  .sec-hero > .wrap { min-height: 480px; padding-top: var(--s4); }
  .sec-hero.has-media > .wrap::before, .sec-hero.has-media > .wrap::after { inset: 0; }
  .sec-hero .h, .sec-hero .prose.is-display, .sec-hero .prose.is-title { max-width: none; }
  .event-row { grid-template-columns: 1fr; padding: var(--s3); gap: var(--s2); }
  .event-meta { grid-template-columns: 1fr; }
  .event-row-action { grid-column: 1; justify-self: start; text-align: left; }
  .event-card { min-height: 320px; }
  .event-card-body { grid-template-columns: auto 1fr; row-gap: var(--s2); }
  .event-card-go { grid-column: 2; justify-self: end; }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .foot-bottom { justify-content: flex-start; }
  .btn { width: 100%; }
  .card > .btn { width: 100%; }
  .rail .gallery .figure { flex: 0 0 200px; }
  .rail .gallery .figure img { width: 200px; height: 150px; }
}

/* ---------- section entrance ---------- */
.hrc-motion .sec:not(.is-in) { opacity: 0; transform: translateY(8px); }
.hrc-motion .sec { transition: opacity var(--t-settle) var(--ease-settle),
                               transform var(--t-settle) var(--ease-settle); }
.hrc-motion .sec.is-in { opacity: 1; transform: none; }
.hrc-motion :where(.cards, .events-rows, .events-cards, .gallery) > *:not(.is-in) {
  opacity: 0; transform: translateY(8px);
}
.hrc-motion :where(.cards, .events-rows, .events-cards, .gallery) > * {
  transition: opacity var(--t-settle) var(--ease-settle),
              transform var(--t-settle) var(--ease-settle);
}
.hrc-motion :where(.cards, .events-rows, .events-cards, .gallery) > *.is-in {
  opacity: 1; transform: none;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hrc-coded *, .hrc-coded *::before, .hrc-coded *::after {
    animation-duration: var(--t-tap) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--t-tap) !important;
    transition-property: opacity, background-color, color, border-color !important;
    scroll-behavior: auto !important;
  }
  .card:hover > .figure img, .event-card:hover::before,
  .accordion-item[open] .accordion-mark { transform: none !important; }
}

/* The live card closes with the social mark and then the action, whatever
   order the old page happened to emit them in. */
.card > .social { order: 1; }
.card > .btn { order: 2; }

/* The footer's column headings are white on the live site; three orange
   headings in one band is more orange than the balance allows. */
.foot-heading { color: var(--white); }

/* On a photo card the run name shares one line with the number and the
   action, so it takes the Lead step rather than the Subtitle one and stays
   on a single line the way the live card does. */
.event-card-title {
  font-size: var(--lead); line-height: var(--lead-lh);
  letter-spacing: 0; font-weight: var(--w-sub);
}

/* ---------- v6 site-wide bridge ---------- */
.hrc-site-header,
.hrc-site-header-inner,
#hrc-code-header {
  position: relative;
  z-index: 1000;
  overflow: visible;
  isolation: isolate;
}
.hrc-site-header .hn-topbar { overflow: visible; }
#hrc-code-header .hn-acct-menu {
  z-index: 1003;
  max-height: calc(100dvh - var(--barh) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.hrc-coded:not(.hrc-coded-home) {
  --signal: var(--orange);
  --action: var(--orange);
  --deep: var(--orange-press);
  --glow: var(--orange-on-ink);
  --ink: #0B0B0C;
  --slate: var(--grey);
  --white: var(--paper);
  --line: #E7E7E7;
  --line-dark: var(--line-ink);
  --meta-dark: var(--grey-on-ink);
  --font: var(--font-sans);
  --container: 1296px;
  --margin: 72px;
  --section: 100px;
  --pad: var(--space-6);
  --stage: var(--space-6);
  --r-pill: var(--radius-action);
  --r-glass: var(--radius-card);
  --r-card: var(--radius-card);
  --r-input: var(--radius-action);
  --r-panel: var(--radius-card);
  --t-tap: var(--dur-action);
  --t-lift: var(--dur-action);
  --t-reveal: var(--dur-glyph);
  --t-settle: var(--dur-card);
  --ease-travel: var(--ease-action);
  --ease-settle: var(--ease-card);
  font: 400 16px/1.56 var(--font-sans);
  color: var(--ink);
  background: var(--paper);
}
body.hrc-coded:not(.hrc-coded-home) .btn {
  background: var(--orange);
  background-image: none;
  border-radius: var(--radius-action);
  font-weight: 500;
}
body.hrc-coded:not(.hrc-coded-home) .btn:hover {
  background: var(--orange-press);
}
body.hrc-coded:not(.hrc-coded-home) .card,
body.hrc-coded:not(.hrc-coded-home) .event-row {
  border-color: var(--rule);
  border-radius: var(--radius-card);
  box-shadow: none;
}
body.hrc-coded:not(.hrc-coded-home) .tag,
body.hrc-coded:not(.hrc-coded-home) .event-card-go {
  border-radius: var(--radius-chip);
}
body.hrc-coded:not(.hrc-coded-home) .sec {
  padding-block: var(--space-11);
}
body.hrc-coded:not(.hrc-coded-home) .events-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hrc-native-page,
.hrc-commerce-page,
.hrc-news-article,
.hrc-archive,
.hrc-not-found {
  min-height: 56vh;
  padding-block: var(--space-11);
}
.hrc-native-head,
.hrc-news-head {
  display: grid;
  gap: var(--space-3);
  max-width: 980px;
  padding-bottom: var(--space-9);
  border-bottom: 1px solid var(--rule);
}
.hrc-native-content,
.hrc-article-copy {
  max-width: 780px;
  margin-top: var(--space-9);
}
.hrc-native-content > :where(h2, h3),
.hrc-article-copy > :where(h2, h3) {
  margin: var(--space-9) 0 var(--space-4);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.hrc-native-content > h2,
.hrc-article-copy > h2 { font-size: 34px; }
.hrc-native-content > h3,
.hrc-article-copy > h3 { font-size: 24px; }
.hrc-native-content > :where(p, ul, ol),
.hrc-article-copy > :where(p, ul, ol) { margin: 0 0 var(--space-4); }
.hrc-native-content img,
.hrc-article-copy img,
.hrc-news-hero img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
.hrc-news-hero { margin: var(--space-9) 0 0; }

.hrc-event-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: end;
  color: var(--paper);
  background: var(--ink) var(--event-hero) center 38% / cover no-repeat;
}
.hrc-event-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.16), rgba(11,11,12,.86));
}
.hrc-event-hero-copy {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-10);
}
.hrc-event-hero-copy .v6-display { max-width: 900px; margin-top: var(--space-3); }
.hrc-event-number { margin: var(--space-5) 0 0; color: var(--orange-on-ink); }
.hrc-event-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-10); }
.hrc-event-facts { margin: var(--space-9) 0 0; border-top: 1px solid var(--rule); }
.hrc-event-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.hrc-event-facts dt { color: var(--on-surface-2); }
.hrc-event-facts dd { margin: 0; }
.hrc-event-aside { align-self: start; padding: var(--space-6); border: 1px solid var(--rule); border-radius: var(--radius-card); }
.hrc-event-aside > * + * { margin-top: var(--space-4); }
.hrc-event-route { width: 100%; border-radius: var(--radius-card); }

.hrc-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--space-9); }
.hrc-archive-card { border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden; }
.hrc-archive-card a { display: block; text-decoration: none; }
.hrc-archive-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.hrc-archive-card img { width: 100%; height: 100%; object-fit: cover; }
.hrc-archive-card a > div { display: grid; gap: var(--space-2); padding: var(--space-6); }
.hrc-not-found .v6-lead { max-width: 620px; margin-top: var(--space-5); }
.hrc-not-found-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }

@media (max-width: 1180px) {
  body.hrc-coded:not(.hrc-coded-home) { --margin: 40px; }
}
@media (max-width: 860px) {
  body.hrc-coded:not(.hrc-coded-home) .events-cards,
  .hrc-archive-grid { grid-template-columns: 1fr; }
  .hrc-event-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.hrc-coded:not(.hrc-coded-home) { --margin: 20px; }
  .hrc-native-page,
  .hrc-commerce-page,
  .hrc-news-article,
  .hrc-archive,
  .hrc-not-found { padding-block: var(--space-10); }
  .hrc-event-hero { min-height: 520px; }
  .hrc-event-hero-copy { padding-bottom: var(--space-8); }
  .hrc-event-facts > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .hrc-not-found-actions .v6-btn { width: 100%; }
}