/* about page (ABOUT page builder). Scope every rule under .page--about: during a router
   navigation the next page's stylesheet loads a moment before the swap. Use only rj.css tokens.

   The page reads like the back of a record sleeve: a track listing (A1–B3) beside the title, then each
   "track" in turn. Motifs: the gold horizon, the Pitons, a "20" rising behind the mountains like the moon. */

/* ============================================================== A1 · intro + story =================== */
/* Shared hero rhythm (contract C2): the eyebrow and h1 land at the same height on every inner page, and the
   "On this page" sleeve aligns to the top instead of pushing the title down. */
.page--about .ab-story {
  padding-top: var(--page-hero-pad-top, clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: clamp(var(--space-7), 8vw, var(--space-9));
}

.page--about .ab-intro {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
.page--about .ab-intro__text .h-display { margin-top: var(--space-3); font-size: var(--page-hero-title, var(--step-6)); }
.page--about .ab-intro__text .lede { margin-top: var(--space-4); }
@media (min-width: 960px) {
  .page--about .ab-intro { grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr); gap: clamp(var(--space-7), 6vw, var(--space-9)); }
}

/* The sleeve: an "on this page" track listing, like the back of an LP */
.page--about .ab-sleeve {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  box-shadow: var(--shadow-1);
}
.page--about .ab-sleeve::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-5);
  right: var(--space-5);
  height: 1px;
  background: var(--horizon);
}
.page--about .ab-sleeve__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.page--about .ab-sleeve__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
}
@media (min-width: 960px) {
  .page--about .ab-sleeve__list { grid-template-columns: minmax(0, 1fr); }
}
.page--about .ab-sleeve__list > li { display: flex; }
.page--about .ab-sleeve__list a {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0.55em 0;
  border-bottom: 1px dotted var(--border-strong);
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
@media (min-width: 960px) {
  .page--about .ab-sleeve__list li:last-child a { border-bottom: 0; }
}
.page--about .ab-sleeve__list a:hover { color: var(--gold); }
.page--about .ab-sleeve__num {
  flex: none;
  width: 1.9rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.page--about .ab-sleeve__label {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.3;
}
.page--about .ab-sleeve__side {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-bottom: var(--space-1);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.page--about .ab-sleeve__side::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* The story itself, with the photo pinned beside it on wide screens */
.page--about .ab-intro { padding-bottom: var(--page-hero-pad-bottom, clamp(2rem, 1.5rem + 2vw, 3rem)); }
.page--about .ab-story__body {
  display: grid;
  gap: var(--space-7);
  margin-top: clamp(var(--space-5), 4vw, var(--space-7));
}
@media (min-width: 1000px) {
  .page--about .ab-story__body {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(var(--space-7), 6vw, var(--space-9));
    align-items: start;
  }
}
.page--about .ab-story__prose { max-width: 62ch; font-size: var(--step-0); }
.page--about .ab-story__first { font-size: var(--step-1); line-height: 1.7; color: var(--text); }
.page--about .ab-story__first::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--font-display);
  font-size: 3.4em;
  font-style: italic;
  line-height: 0.8;
  color: var(--gold);
}
.page--about .ab-story__quote {
  position: relative;
  margin-block: var(--space-6);
  padding: var(--space-5) 0 var(--space-5) var(--space-6);
  border-left: 0;
  font-size: var(--step-2);
  line-height: 1.4;
}
.page--about .ab-story__quote::before {
  content: "“";
  position: absolute;
  left: -0.05em;
  top: 0.05em;
  font-family: var(--font-display);
  font-size: 3.2em;
  line-height: 1;
  color: var(--gold);
  opacity: 0.75;
}
.page--about .ab-story__quote::after {
  content: "";
  position: absolute;
  left: var(--space-6);
  bottom: 0;
  width: min(12rem, 50%);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.page--about .ab-story__sign {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-3);
}
.page--about .ab-story__sign::before { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }

/* The photo: a print slipped into the sleeve, with a gold keyline offset behind it */
.page--about .ab-photo { position: relative; margin: 0; max-width: 34rem; }
@media (min-width: 1000px) {
  .page--about .ab-photo { position: sticky; top: calc(var(--header-h) + var(--space-6)); justify-self: end; width: 100%; }
}
.page--about .ab-photo__frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--bg-sunken);
  box-shadow: var(--shadow-3);
}
@media (min-width: 1000px) {
  .page--about .ab-photo__frame { aspect-ratio: 4 / 5; }
}
.page--about .ab-photo::before {
  content: "";
  position: absolute;
  inset: var(--space-4) calc(-1 * var(--space-4)) auto var(--space-4);
  aspect-ratio: 3 / 2;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--radius-l);
  z-index: -1;
}
@media (min-width: 1000px) {
  .page--about .ab-photo::before { aspect-ratio: 4 / 5; }
}
.page--about .ab-photo__frame picture { display: contents; }
.page--about .ab-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
}
.page--about .ab-photo__frame::after {
  /* a little of the evening settles on the print, so it sits in the night palette */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border);
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 42%, transparent), transparent 45%);
  pointer-events: none;
}
.page--about .ab-photo__caption {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 1px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-3);
}

/* ============================================================== A2 · twenty years ==================== */
.page--about .ab-twenty {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-7), 8vw, var(--space-9));
  background:
    radial-gradient(42% 60% at 18% 30%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
    var(--bg-sunken);
}
.page--about .ab-twenty::before,
.page--about .ab-twenty::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--horizon);
  opacity: 0.5;
}
.page--about .ab-twenty::before { top: 0; }
.page--about .ab-twenty::after { bottom: 0; }
.page--about .ab-twenty__inner { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .page--about .ab-twenty__inner { grid-template-columns: auto minmax(0, 1fr); gap: clamp(var(--space-7), 7vw, var(--space-10)); }
}

/* "20" rising behind the Pitons like the moon, reflected in the sea */
.page--about .ab-twenty__mark {
  --mark-w: clamp(15rem, 32vw, 23rem);
  position: relative;
  justify-self: center;
  width: var(--mark-w);
  padding-top: var(--space-2);
  display: grid;
  justify-items: center;
}
.page--about .ab-twenty__num {
  position: relative;
  z-index: 0;
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--mark-w) * 0.62);
  line-height: 0.78;
  letter-spacing: -0.04em;
  padding-right: 0.08em;
  color: var(--gold);
  background: linear-gradient(180deg, var(--gold-2) 10%, var(--gold) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: calc(var(--mark-w) * -0.11);
  transform: translateX(-4%);
}
.page--about .ab-twenty__pitons {
  position: relative;
  z-index: 1;
  width: 118%;
  color: var(--pitons-ink);
}
.page--about .ab-twenty__horizon {
  order: 3;
  position: relative;
  z-index: 1;
  display: block;
  width: 130%;
  height: 1px;
  background: var(--horizon);
}
.page--about .ab-twenty__pitons { order: 2; }
.page--about .ab-twenty__span {
  order: 4;
  margin-top: var(--space-7);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.page--about .ab-twenty__horizon::after {
  /* the moon's path on the water: a few soft gold strokes below the horizon */
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 26%;
  height: 2.6rem;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--gold) 40%, transparent) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, currentColor 0%, transparent 100%);
  mask-image: radial-gradient(50% 100% at 50% 0%, currentColor 0%, transparent 100%);
  opacity: 0.8;
  pointer-events: none;
}
.page--about .ab-twenty__copy h2 { margin-top: var(--space-3); font-size: var(--step-5); }
.page--about .ab-twenty__text {
  max-width: 56ch;
  margin-top: var(--space-4);
  color: var(--text-2);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.65;
}
.page--about .ab-twenty__actions { margin-top: var(--space-6); }

/* By the numbers */
.page--about .ab-numbers__title {
  margin-top: clamp(var(--space-7), 7vw, var(--space-9));
  font-size: var(--step-3);
}
.page--about .ab-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin: var(--space-6) 0 0;
}
@media (min-width: 640px) {
  .page--about .ab-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  .page--about .ab-numbers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.page--about .ab-num {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
.page--about .ab-num__fig {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
.page--about .ab-num__label {
  max-width: 16ch;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--text-2);
}
.page--about .ab-num--live { border-top-color: color-mix(in srgb, var(--live) 60%, transparent); }
.page--about .ab-num--live .ab-num__fig { color: var(--live); }
.page--about .ab-num--live .ab-num__value { display: inline-block; min-width: 2ch; }
.page--about .ab-num--live[data-state="live"] .ab-num__label::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--live);
  vertical-align: 0.08em;
}
@media (prefers-reduced-motion: no-preference) {
  .page--about .ab-num--live[data-state="live"] .ab-num__label::before { animation: ab-breathe 2.8s var(--ease-in-out) infinite; }
}
.page--about .ab-num--live[data-state="resting"] .ab-num__fig,
.page--about .ab-num--live[data-state="quiet"] .ab-num__fig { font-style: italic; }
.page--about .ab-num--live[data-state="resting"] .ab-num__label,
.page--about .ab-num--live[data-state="quiet"] .ab-num__label { max-width: 22ch; }
/* Loading (JS only): the figure is a soft placeholder bar until the first "now" arrives */
html.js .page--about .ab-num--live[data-state="loading"] .ab-num__value {
  width: 2.6ch;
  height: 0.8em;
  border-radius: var(--radius-s);
  color: transparent;
  background: color-mix(in srgb, var(--text-3) 18%, var(--bg-sunken));
}
@media (prefers-reduced-motion: no-preference) {
  html.js .page--about .ab-num--live[data-state="loading"] .ab-num__value { animation: ab-breathe 1.6s var(--ease-in-out) infinite; }
}
@keyframes ab-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.page--about .ab-numbers__note {
  max-width: 60ch;
  margin-top: var(--space-6);
  font-size: var(--step--1);
  color: var(--text-3);
}

/* ============================================================== A3 · what we play ==================== */
.page--about .ab-play__inner { display: grid; gap: var(--space-6); }
@media (min-width: 960px) {
  .page--about .ab-play__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-6) clamp(var(--space-7), 6vw, var(--space-9)); align-items: start; }
  .page--about .ab-play__foot { grid-column: 2; }
}
.page--about .ab-play__head h2 { margin-top: var(--space-3); }
.page--about .ab-play__lede {
  max-width: 44ch;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-2);
}
.page--about .ab-play__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-2);
  padding-top: var(--space-2);
}
.page--about .ab-play__chips .chip { min-height: 40px; padding-inline: 1.05em; font-size: var(--step-0); font-weight: 400; color: var(--text); }
.page--about .ab-play__chips .chip--more { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.page--about .ab-play__foot { max-width: 60ch; color: var(--text-2); }
.page--about .ab-play__foot a { color: var(--gold); }

/* ============================================================== A4 · ways to help ==================== */
.page--about .ab-help { padding-top: 0; }
.page--about .ab-help__head .h-display,
.page--about .ab-help__head h2 { margin-top: var(--space-2); }
.page--about .ab-help__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  counter-reset: ab-help;
}
@media (min-width: 640px) {
  .page--about .ab-help__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1140px) {
  .page--about .ab-help__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page--about .ab-help__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  counter-increment: ab-help;
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.6;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.page--about .ab-help__item:hover { border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.page--about .ab-help__item::after {
  content: counter(ab-help, lower-roman);
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--gold);
  opacity: 0.7;
}
.page--about .ab-help__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) var(--tint), transparent);
  color: var(--gold);
}
.page--about .ab-help__title { margin-top: var(--space-2); font-size: var(--step-1); line-height: 1.3; }
.page--about .ab-help__actions { margin-top: auto; padding-top: var(--space-3); }
.page--about .ab-help__actions .btn { white-space: normal; text-align: left; }
.page--about .ab-help__url { font-weight: 500; color: var(--gold); }

/* ============================================================== Side B ============================== */
.page--about .ab-side {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: clamp(var(--space-6), 6vw, var(--space-8)) auto 0;
  text-align: center;
}
.page--about .ab-side__line { margin: 0 auto; overflow: visible; } /* <hr> clips by default (UA overflow: hidden), hiding the Pitons */
.page--about .ab-side__label {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ============================================================== B1 · FAQ ============================ */
.page--about .ab-faq__inner { display: grid; gap: var(--space-6); }
@media (min-width: 960px) {
  .page--about .ab-faq__inner { grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); gap: clamp(var(--space-7), 6vw, var(--space-9)); align-items: start; }
  .page--about .ab-faq__head { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.page--about .ab-faq__head h2 { margin-top: var(--space-3); }
.page--about .ab-faq__lede { margin-top: var(--space-4); color: var(--text-2); }
.page--about .ab-faq__lede a { color: var(--gold); }
.page--about .ab-faq__all { margin-top: var(--space-5); }
.page--about .ab-faq__all .icon { transition: transform var(--dur-2) var(--ease); }
.page--about .ab-faq__all[data-open="true"] .icon { transform: rotate(180deg); }

.page--about .ab-faq__list { border-bottom: 1px solid var(--border); }
.page--about .ab-faq__item { border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.page--about .ab-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 44px;
  padding: var(--space-5) var(--space-1);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--text);
  border-radius: var(--radius-s);
  transition: color var(--dur-1) var(--ease);
}
.page--about .ab-faq__q::-webkit-details-marker { display: none; }
.page--about .ab-faq__q:hover { color: var(--gold); }
.page--about .ab-faq__q:focus-visible { outline-offset: 2px; }
.page--about .ab-faq__item[open] > .ab-faq__q { color: var(--gold); }
.page--about .ab-faq__sign {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.page--about .ab-faq__sign::before,
.page--about .ab-faq__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.35rem;
  border-radius: 1px;
  background: var(--gold);
  transition: transform var(--dur-2) var(--ease);
}
.page--about .ab-faq__sign::after { transform: rotate(90deg); }
.page--about .ab-faq__q:hover .ab-faq__sign { border-color: var(--gold); }
.page--about .ab-faq__item[open] .ab-faq__sign { border-color: var(--gold); transform: rotate(180deg); }
.page--about .ab-faq__item[open] .ab-faq__sign::after { transform: rotate(0deg); }
.page--about .ab-faq__a {
  max-width: 62ch;
  padding: 0 var(--space-1) var(--space-6);
  color: var(--text-2);
  line-height: 1.75;
}
.page--about .ab-faq__a p + p { margin-top: 0.9em; }
.page--about .ab-faq__a a { color: var(--gold); }
.page--about .ab-faq__a a:hover { color: var(--gold-2); }
@media (prefers-reduced-motion: no-preference) {
  .page--about .ab-faq__item[open] > .ab-faq__a { animation: rj-rise var(--dur-2) var(--ease); }
}
.page--about .ab-faq__item:target > .ab-faq__q .ab-faq__qtext {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* ============================================================== B2 · contact ======================== */
.page--about .ab-contact { padding-bottom: 0; }
.page--about .ab-contact__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-6), 5vw, var(--space-8)) clamp(var(--space-5), 5vw, var(--space-8));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background:
    radial-gradient(70% 80% at 100% 0%, color-mix(in srgb, var(--glow) 9%, transparent), transparent 70%),
    var(--surface-solid);
  box-shadow: var(--shadow-2);
}
.page--about .ab-contact__panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--horizon);
}
.page--about .ab-contact__panel::after {
  /* the Pitons along the bottom edge, very faint */
  content: "";
  position: absolute;
  right: -2%;
  bottom: -1px;
  width: min(36rem, 70%);
  aspect-ratio: 1200 / 160;
  background: var(--text-3);
  opacity: 0.12;
  -webkit-mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
  mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.page--about .ab-contact__head { max-width: 44rem; }
.page--about .ab-contact__head h2 { margin-top: var(--space-3); }
.page--about .ab-contact__lede { margin-top: var(--space-4); color: var(--text-2); font-size: var(--step-1); font-weight: 400; }
.page--about .ab-contact__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 900px) {
  .page--about .ab-contact__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page--about .ab-contact__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon title go" "icon text go";
  align-items: center;
  gap: var(--space-1) var(--space-4);
  height: 100%;
  min-height: 44px;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-raised);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.page--about .ab-contact__link:hover {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: var(--surface-hover);
  color: var(--text);
}
@media (prefers-reduced-motion: no-preference) {
  .page--about .ab-contact__link:hover { transform: translateY(-2px); }
  .page--about .ab-contact__link:hover .ab-contact__go { transform: translateX(3px); }
}
.page--about .ab-contact__icon {
  grid-area: icon;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) var(--tint), transparent);
  color: var(--gold);
}
.page--about .ab-contact__title { grid-area: title; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
.page--about .ab-contact__text { grid-area: text; color: var(--text-2); font-size: var(--step--1); line-height: 1.5; }
.page--about .ab-contact__go { grid-area: go; color: var(--gold); transition: transform var(--dur-1) var(--ease); }
.page--about .ab-contact__address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-7);
}
.page--about .ab-contact__or { color: var(--text-3); font-size: var(--step--1); }
.page--about .ab-contact__mail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.page--about .ab-contact__mail a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--gold);
  overflow-wrap: anywhere;
}
.page--about .ab-contact__mail a:hover { color: var(--gold-2); }
.page--about .ab-contact__note {
  position: relative;
  max-width: 56ch;
  margin-top: var(--space-4);
  color: var(--text-3);
  font-size: var(--step--1);
}

/* ============================================================== B3 · for artists ==================== */
.page--about .ab-artists__inner { display: grid; gap: var(--space-6); }
.page--about .ab-artists__head { max-width: 46rem; }
.page--about .ab-artists__head h2 { margin-top: var(--space-3); }
.page--about .ab-artists__lede { margin-top: var(--space-4); color: var(--text-2); font-size: var(--step-1); font-weight: 400; line-height: 1.6; }
.page--about .ab-artists__body { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 960px) {
  .page--about .ab-artists__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(var(--space-7), 6vw, var(--space-9)); }
}
.page--about .ab-artists__steps { display: grid; gap: var(--space-5); counter-reset: ab-step; }
.page--about .ab-artists__steps li {
  position: relative;
  padding: 0 0 var(--space-5) 3.6rem;
  border-bottom: 1px solid var(--border);
  counter-increment: ab-step;
}
.page--about .ab-artists__steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.page--about .ab-artists__steps li::before {
  content: counter(ab-step);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--gold);
  text-align: center;
}
.page--about .ab-artists__steps h3 { font-size: var(--step-1); line-height: 1.3; }
.page--about .ab-artists__steps p { margin-top: var(--space-2); color: var(--text-2); max-width: 54ch; }
.page--about .ab-artists__promise {
  position: relative;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: clamp(var(--space-6), 4vw, var(--space-7));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: var(--radius-l);
  background:
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
    var(--bg-raised);
}
.page--about .ab-artists__promise-kicker {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.page--about .ab-artists__promise-text {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}
.page--about .ab-artists__promise-text em { font-style: italic; color: var(--gold); }
.page--about .ab-artists__promise-sub { color: var(--text-2); font-size: var(--step--1); line-height: 1.6; max-width: 40ch; }
.page--about .ab-artists__promise .btn { margin-top: var(--space-2); white-space: normal; }

/* ============================================================== small screens ======================= */
@media (max-width: 479px) {
  .page--about .ab-sleeve { padding-inline: var(--space-4); }
  .page--about .ab-sleeve__list { column-gap: var(--space-3); }
  .page--about .ab-sleeve__num { width: 1.6rem; }
  .page--about .ab-story__quote { padding-left: var(--space-5); font-size: var(--step-1); }
  .page--about .ab-contact__link { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon text"; }
  .page--about .ab-contact__go { display: none; }
  .page--about .ab-num__fig { font-size: var(--step-4); }
}
@media (max-width: 639px) {
  /* help cards: icon beside the title, so four cards don't fill four screens */
  .page--about .ab-help__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-4); }
  .page--about .ab-help__item > :not(.ab-help__icon):not(.ab-help__title) { grid-column: 1 / -1; }
  .page--about .ab-help__title { margin-top: 0; padding-right: var(--space-6); }
  .page--about .ab-photo::before { inset: var(--space-3) calc(-1 * var(--space-2)) auto var(--space-3); }
}
@media (pointer: coarse) {
  .page--about .ab-play__chips .chip { min-height: 44px; }
}