/* R.A.R.E. Training Club — page level layout.
   Loaded last, after tokens.css, typography.css, fonts.css and bundle.css.

   Everything here is composition: bands, splits, bleeds and the one slide
   layout the deck draws directly (the details cards over a photograph). No
   new colours, spacing steps, type sizes or radii are invented — every
   value below resolves to a token defined in tokens.css. */

/* ---------- Page shell ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* The sticky header is 4rem tall; anchored sections must clear it. */
[id] { scroll-margin-top: 5rem; }

/* ---------- Bands ---------- */

/* A band is a full width horizontal stripe. It owns its own ground colour and
   its own vertical space, so sections butt up against each other the way the
   deck's slides do rather than floating on a shared background. */
.band {
  position: relative;
  padding-block: var(--space-9);
}

@media (min-width: 48rem) {
  .band { padding-block: var(--space-10); }
}

.band--tight { padding-block: var(--space-8); }
.band--flush { padding-block: 0; }

.band--base { background: var(--surface-base); }
.band--raised { background: var(--surface-raised); }
.band--sunken { background: var(--surface-sunken); }
.band--brand { background: var(--surface-brand); }
.band--brand-deep { background: var(--surface-brand-deep); }

/* Clipping keeps a bleeding chevron motif inside its own band. */
.band--clip { overflow: hidden; }

/* ---------- Section heading block ---------- */

.section-head { max-width: var(--measure); }
.section-head .rare-heading__text { text-wrap: balance; }

.lede {
  max-width: var(--measure);
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--ink-muted);
}

.rare-on-brand .lede { color: var(--on-brand-muted); }

/* ---------- Split: text beside an image ---------- */

.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  /* Text leads and takes the wider column; the photograph sits to its right. */
  .split--text-wide { grid-template-columns: 1.15fr 0.85fr; }

  /* The same weighting mirrored: the photograph moves to the narrower left
     column and the text keeps the wider one. The copy stays first in the DOM
     either way, so a heading is always read before the image beside it. */
  .split--media-left { grid-template-columns: 0.85fr 1.15fr; }
  .split--media-left .split__media { order: -1; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 34rem;
  padding-block: var(--space-9);
  background: var(--neutral-1000);
  overflow: hidden;
}

@media (min-width: 48rem) {
  .hero {
    min-height: 44rem;
    padding-block: var(--space-10);
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Full colour: no duotone, no red multiply. The scrim below still does the
   work of keeping text legible over it. */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Text over a photograph always gets a scrim. Below the two column layout the
   copy sits over the whole frame, so the scrim runs vertically and heavy. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    #000000b3 0%,
    #0000008c 26%,
    #000000cc 76%,
    #000000f2 100%
  );
}

.hero__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 64rem) {
  /* Wide enough for the copy to hold a left rail: the scrim becomes
     directional, solid where the words are and clearing to the right so the
     room, and the people in it, are actually legible. */
  .hero__scrim {
    background:
      linear-gradient(to bottom, #0000008c 0%, #00000000 28%, #00000000 62%, #000000b3 100%),
      linear-gradient(to right, #000000f2 0%, #000000e6 28%, #00000066 62%, #00000026 100%);
  }

  .hero__inner { max-width: 40rem; }
}

.hero__mark {
  width: 7rem;
  height: auto;
}

@media (min-width: 48rem) {
  .hero__mark { width: 9.5rem; }
}

.hero__title {
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.hero__standfirst {
  max-width: 44ch;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--on-brand-muted);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--on-brand-muted);
}

.hero__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- Button pairs ---------- */

/* Below the small breakpoint a pair of buttons cannot sit side by side, and
   two stacked buttons of different widths read as an accident rather than a
   choice. Let them fill instead, which is what block is for. */
@media (max-width: 29.99rem) {
  .cta-cluster { gap: var(--space-3); }
  .cta-cluster .rare-btn { width: 100%; }
}

/* ---------- Chevron motif in a corner ---------- */

/* Stacked, pointing up and to the right, bleeding off an edge. Once per band. */
.chevrons {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.chevrons--top-right {
  top: calc(var(--space-6) * -1);
  right: calc(var(--space-6) * -1);
}

.chevrons--bottom-right {
  bottom: calc(var(--space-7) * -1);
  right: calc(var(--space-6) * -1);
}

.chevrons--bottom-left {
  bottom: calc(var(--space-7) * -1);
  left: calc(var(--space-6) * -1);
}

.chevrons > svg {
  display: block;
  width: 100%;
  height: auto;
}

.chevrons--hero { width: clamp(5rem, 13vw, 10rem); }
.chevrons--detail { width: clamp(4.5rem, 11vw, 8rem); }

/* The motif is a texture, not a message: on a narrow screen it competes with
   the headline for the same corner, so it steps out of the way. */
@media (max-width: 29.99rem) {
  .chevrons--hero { opacity: 0.55; }
}

/* ---------- The acronym, picked out ---------- */

.acronym {
  font-size: 1.125rem;
  line-height: 1.75rem;
  max-width: var(--measure);
}

.acronym b {
  color: var(--ink-accent);
  font-weight: 700;
}

/* A single letter picked out in a display heading. Colour only: Anton ships
   in one weight and the brand book asks that a browser never be made to
   embolden it, so this never touches font-weight.

   Neither existing red token fit: red-500 (the brand identity red) is too
   dark to read on a photo or near-black ground, and ink-accent's dark value
   lightens it by desaturating it toward salmon/pink as well as brightening
   it. This keeps red-500's hue and most of its saturation and lifts only the
   lightness, so it reads as the same red turned up, not a different colour.
   #E8291D clears 4.5:1 on black, same as ink-accent's dark value did. */
.accent-letter {
  color: #e8291d;
}

/* ---------- Why band overrides ---------- */

/* Requested explicitly, contrast trade-off and all: black rather than the
   on-brand white the system would otherwise switch this to on a solid red
   surface. Also bolder and a size up from the 0.75rem default, so it reads
   at a glance against the deep red rather than needing a second look.
   font-weight: 900 asks for a heavier face than the 700 Noto Sans KR ships
   — the browser synthesises it. That's the "never embolden" rule's exact
   objection on Anton (the display face this system draws by hand at one
   weight); it doesn't apply to body text like this eyebrow. */
#why .rare-heading__eyebrow {
  color: var(--neutral-1000);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.12em;
}
#why .rare-heading__rule { background: var(--neutral-1000); }

/* The row centres its two columns by default (.split's align-items: center),
   which is right when the copy is shorter than the photo — it isn't here.
   Top-aligning them, plus sizing the copy to roughly fill the photo's
   height, puts "Why" level with the photo's top edge and the closing line
   level with its bottom, rather than both floating in the middle. */
#why .split { align-items: start; }

.why-copy {
  gap: 1.875rem;
}

.why-copy p,
.why-copy li {
  line-height: 1.45rem;
}

.why-paragraphs {
  gap: 1.625rem;
}

.why-copy .body-lg {
  line-height: 1.625rem;
}

/* ---------- Bulleted list in the club's register ---------- */

.tick-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.tick-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.tick-list svg { margin-top: 0.2rem; }

/* A plain question list, for the three questions a dancer is still asking. */
.ask-list {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-1);
}

.ask-list li::marker { color: var(--on-brand); }

/* ---------- Training blocks ---------- */

/* Five full sections, each a text/photo split, stacked with a hairline rule
   marking where one ends and the next begins. No background change between
   them — this band stays one flat surface — so the divider and the gap
   above it are the only things separating five sections that would
   otherwise run together. */
.training-blocks {
  display: flex;
  flex-direction: column;
}

.training-block:not(:first-child) {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
}

@media (min-width: 48rem) {
  .training-block:not(:first-child) {
    margin-top: var(--space-10);
    padding-top: var(--space-10);
  }
}

/* Sub-item name and sentence: the same body-strong-on-ink-accent pairing the
   brand book asks for wherever a short name introduces a line of copy (see
   the values cards and the About section's Why/How/What). */
.training-item__name {
  margin: 0;
  color: var(--ink-accent);
}

/* ---------- Values ---------- */

.values { --rare-grid-min: 17rem; }

/* ---------- Details ---------- */

/* Deep red cards laid over a desaturated photograph, as the details slide does.
   The photograph is a background layer so the cards can overlap it freely. */
.details {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.details__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.details__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(1) contrast(1.05);
}

.details__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface-scrim);
  opacity: var(--opacity-scrim);
}

.details__grid {
  display: grid;
  gap: var(--space-5);
}

/* Two up, with Cost running the full width beneath When and Where, exactly as
   the details slide stacks them. Three columns only once all three cards can
   sit side by side — at 48rem a third column would simply be left empty. */
@media (min-width: 48rem) {
  .details__grid { grid-template-columns: repeat(2, 1fr); }
  .details__card--cost { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .details__grid { grid-template-columns: repeat(3, 1fr); }
  .details__card--cost { grid-column: auto; }
}

.details__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-brand-deep);
  color: var(--on-brand);
  box-shadow: var(--shadow-card);
}

.details__card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--on-brand);
}

.details__value {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--on-brand);
}

.details__value--price {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 3.25rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.details__note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--on-brand-muted);
}

.details__travel {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface-sunken);
  color: var(--ink);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--surface-sunken);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  padding-block: var(--space-8);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: auto 1fr auto; align-items: start; }
}

.site-footer__mark { width: 6rem; height: auto; }

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.site-footer__nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.site-footer__nav a:hover { color: var(--ink-accent); text-decoration: underline; }

.site-footer__nav a:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.site-footer__fine {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--ink-muted);
}

/* ---------- Header brand mark ---------- */

.header-brand img {
  display: block;
  height: 3.5rem;
  width: auto;
}

@media (min-width: 48rem) {
  .header-brand img { height: 4rem; }
}

/* At this size the logo alone meets the header bar's 4rem min-height, so it
   would touch the top and bottom edges with no breathing room. A little
   vertical padding lets the bar grow to fit it properly. */
.rare-header__bar {
  padding-block: var(--space-2);
}

@media (min-width: 48rem) {
  .rare-header__bar { padding-block: var(--space-3); }
}

.header-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
}

.header-brand:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Utilities ---------- */

.u-measure { max-width: var(--measure); }
.u-center { text-align: center; }
.u-center .rare-heading__rule { margin-inline: auto; }
.u-center .section-head { margin-inline: auto; }
.u-balance { text-wrap: balance; }