/* Re:Model - component styles. Colours, spacing and type come from tokens.css; this file only arranges them. */

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-serif); -webkit-font-smoothing: antialiased; }
.rm-root, .rm-root *, .rm-root *::before, .rm-root *::after { box-sizing: border-box; }
.rm-root { background: var(--paper); color: var(--ink); }
/* reset at zero specificity, so every component class below wins over it */
:where(.rm-root) :where(p, h1, h2, h3, figure, ol, ul, dl, dt, dd) { margin: 0; padding: 0; }
:where(.rm-root) :where(ol, ul) { list-style: none; }
.rm-root em { font-style: italic; }

/* page frame */
.rm-page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-5); }

/* the asymmetric grid: margin note left, content right */
.rm-grid { display: grid; grid-template-columns: var(--margin-col) minmax(0, 1fr); column-gap: var(--space-5); }
.rm-section { padding: var(--space-7) 0; border-top: var(--hairline) solid var(--ink); }
.rm-section__note { color: var(--ink-soft); padding-top: 10px; }
.rm-section__note b { display: block; font-style: normal; font-weight: 500; color: var(--ink); }
.rm-section h2 { max-width: 18em; }
.rm-section h2 + .lede, .rm-section h2 + .body { margin-top: var(--space-4); }
.rm-measure { max-width: var(--measure); }
.rm-soft { color: var(--ink-soft); }

/* masthead */
.rm-masthead { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; border-bottom: var(--hairline) solid var(--ink); }
.rm-wordmark { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
/* the logo: static ring of seats + outlined wordmark, coloured by tokens */
.rm-logo { display: block; height: 30px; width: auto; }
.rm-logo__ink { fill: var(--ink); }
.rm-logo__ring { stroke: var(--ink); }
.rm-logo__accent { fill: var(--oxblood); }
.rm-band .rm-logo__ink { fill: var(--on-night); }
.rm-band .rm-logo__ring { stroke: var(--on-night); }
.rm-band .rm-logo__accent { fill: var(--oxblood-on-night); }
.rm-colon { color: var(--oxblood); }
.rm-nav { display: flex; align-items: center; gap: 28px; }
.rm-nav a { color: var(--ink); text-decoration: none; }
.rm-nav a:hover { color: var(--oxblood); }

/* actions */
.rm-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border: 1px solid var(--oxblood); border-radius: var(--radius-sm); background: var(--oxblood); color: var(--on-oxblood); text-decoration: none; cursor: pointer; font-family: var(--font-sans); }
.rm-btn:hover { background: var(--oxblood-deep); border-color: var(--oxblood-deep); }
.rm-btn:focus-visible, .rm-link:focus-visible, .rm-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rm-btn--quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.rm-btn--quiet:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rm-btn--small { height: 38px; padding: 0 16px; }
.rm-link { color: var(--oxblood); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; font-family: var(--font-sans); }
.rm-link:hover { color: var(--oxblood-deep); }
.rm-link::after { content: "\2192"; display: inline-block; margin-left: 6px; text-decoration: none; }
.rm-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* hero */
.rm-hero { padding: var(--space-6) 0 var(--space-6); }
.rm-colophon { padding-top: 14px; color: var(--ink-soft); }
.rm-colophon li { padding: 6px 0; border-top: var(--hairline) solid var(--rule); }
.rm-colophon li:first-child { border-top: 0; padding-top: 0; color: var(--ink); }
.rm-hero h1 { max-width: 11.5em; }
.rm-hero__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; margin-top: var(--space-5); }
.rm-hero__body .rm-actions { margin-top: var(--space-5); }
.rm-hero__body .lede { max-width: 26em; }
.rm-hero__small { margin-top: var(--space-3); color: var(--ink-soft); }

/* the hero ring: the live site's ring of seats, recoloured. Geometry unchanged. */
.rm-ring svg { display: block; width: 100%; height: auto; }
.rm-ring__line { fill: none; stroke: var(--ink); stroke-width: 6; }
.rm-ring__seats circle { fill: var(--ink); }
.rm-ring__seats .rm-ring__key { fill: var(--oxblood); }
.rm-ring__text { fill: var(--ink); font-family: var(--font-serif); font-size: 64px; font-weight: 400; letter-spacing: -0.01em; font-variation-settings: 'opsz' 72; }
.rm-ring__colon { fill: var(--oxblood); }
@media (prefers-reduced-motion: no-preference) {
  .rm-ring__seats { transform-origin: 200px 200px; animation: rm-turn 90s linear infinite; }
  @keyframes rm-turn { to { transform: rotate(360deg); } }
}

/* fact line: one quiet line of facts instead of a stats strip */
.rm-facts { display: flex; flex-wrap: wrap; gap: 0 28px; padding: 14px 0; border-top: var(--hairline) solid var(--ink); border-bottom: var(--hairline) solid var(--ink); color: var(--ink); }
.rm-facts li { display: inline-flex; gap: 8px; }
.rm-facts li + li::before { content: "\00b7"; color: var(--oxblood); margin-right: 20px; }

/* running order (the format) */
.rm-runorder { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-6); border-top: var(--hairline) solid var(--ink); }
.rm-runorder > div { padding: var(--space-4) var(--space-5) 0 0; }
.rm-runorder > div + div { padding-left: var(--space-5); border-left: var(--hairline) solid var(--rule); }
.rm-runorder .meta { color: var(--oxblood); }
.rm-runorder .title { margin: var(--space-2) 0 var(--space-2); }

/* programme */
.rm-programme { margin-top: var(--space-6); border-top: var(--hairline) solid var(--ink); }
.rm-programme__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: var(--hairline) solid var(--rule); }
.rm-programme__num { color: var(--oxblood); }
.rm-programme__item .body { color: var(--ink-soft); margin-top: 6px; max-width: var(--measure); }
.rm-aside { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); margin-top: var(--space-5); }
.rm-aside .body { max-width: 30em; }

/* between sessions: ruled columns, no boxes */
.rm-between { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.rm-between li { border-top: var(--hairline) solid var(--ink); padding-top: var(--space-3); }
.rm-between .body { color: var(--ink-soft); margin-top: var(--space-2); font-size: 17px; }

/* seating plan figure */
.rm-plan { margin-top: var(--space-6); }
.rm-plan svg { display: block; width: 100%; height: auto; }
.rm-plan__v { display: none; }
.rm-plan .table { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 1.5; }
.rm-plan .seat { fill: var(--ink); }
.rm-plan .seat--key { fill: var(--oxblood); }
.rm-plan .seat--mod { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.rm-plan .lbl { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; }
.rm-plan .lbl--key { fill: var(--oxblood); font-weight: 500; }
.rm-plan .lbl--mod { fill: var(--ink); font-weight: 500; }

/* the rule band: the only inverted surface */
.rm-band { background: var(--night); color: var(--on-night); padding: var(--space-7) 0; }
.rm-band .rm-section__note { color: var(--on-night-soft); }
.rm-band .quote { max-width: 15em; }
.rm-band .body { color: var(--on-night-soft); margin-top: var(--space-5); max-width: var(--measure); }
.rm-band .rm-link { color: var(--oxblood-on-night); }

/* questions */
.rm-faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); margin-top: var(--space-5); }
.rm-faq > div { padding: var(--space-4) 0; border-top: var(--hairline) solid var(--rule); }
.rm-faq dt { margin-bottom: var(--space-2); }
.rm-faq dd { color: var(--ink-soft); }

/* chairs: byline portraits, left aligned */
.rm-chairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.rm-chair { border-top: var(--hairline) solid var(--ink); padding-top: var(--space-4); }
.rm-chair__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.rm-chair__head > div { padding-top: 10px; }
.rm-chair__head img { width: 72px; height: 72px; border-radius: var(--radius-full); filter: grayscale(1) contrast(1.05); flex: none; }
.rm-chair .meta { color: var(--oxblood); margin-top: 2px; }
.rm-chair .body { font-size: 17px; color: var(--ink-soft); margin-top: var(--space-3); }
.rm-chair .rm-link { display: inline-block; margin-top: var(--space-3); }
.rm-scroll-hint { display: none; }

/* footer */
.rm-footer { border-top: var(--hairline) solid var(--ink); padding: var(--space-5) 0 var(--space-6); }
.rm-footer__row { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; }
.rm-footer__row + .rm-footer__row { margin-top: var(--space-4); }
.rm-footer__row:first-child { align-items: center; }
.rm-footer a:not(.rm-link) { color: var(--ink); }
.rm-partners { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.rm-partners img { display: block; width: auto; }
.rm-partners a { display: block; }

/* forms */
.rm-card { background: var(--paper-deep); padding: var(--space-5); border-top: 3px solid var(--ink); }
.rm-field { display: grid; gap: var(--space-1); }
.rm-field label { color: var(--ink-soft); }
.rm-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--ink-soft); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; }
.rm-input::placeholder { color: var(--ink-soft); }
.rm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.rm-fields .rm-field--wide { grid-column: 1 / -1; }
.rm-check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); }
.rm-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--oxblood); flex: none; }
.rm-check a { color: var(--oxblood); }

/* modal */
.rm-modal { position: relative; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-6) var(--space-4); }
.rm-modal::before { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.rm-modal__card { position: relative; width: 100%; max-width: 640px; background: var(--paper); padding: var(--space-5); }
.rm-modal__close { position: absolute; top: 18px; right: 20px; color: var(--ink); }

@media (max-width: 720px) {
  .rm-page { padding: 0 20px; }
  .rm-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .rm-section { padding: var(--space-6) 0; }
  .rm-nav .rm-nav__wide { display: none; }
  .display-xl { font-size: 48px; line-height: 1.02; }
  .display { font-size: 34px; line-height: 1.08; }
  .quote { font-size: 30px; }
  .body { font-size: 17px; }
  .lede { font-size: 20px; }
  .rm-hero { padding-top: var(--space-5); }
  .rm-hero__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .rm-hero__body .rm-actions { margin-top: var(--space-4); }
  .rm-ring { width: 200px; }
  .rm-colophon { display: flex; flex-wrap: wrap; gap: 0 8px; padding-top: 0; font-size: 13px; }
  .rm-colophon li { border-top: 0; padding: 0; }
  .rm-colophon li + li::before { content: "\00b7"; margin-right: 8px; color: var(--oxblood); }
  .rm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .rm-facts li + li::before { display: none; }
  .rm-runorder, .rm-faq, .rm-fields { grid-template-columns: minmax(0, 1fr); }
  /* sideways scrollers: the team (two per screen) and between sessions (one and a bit) */
  .rm-chairs, .rm-between { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
  .rm-chairs::-webkit-scrollbar, .rm-between::-webkit-scrollbar { height: 4px; }
  .rm-chairs::-webkit-scrollbar-thumb, .rm-between::-webkit-scrollbar-thumb { background: var(--rule); }
  .rm-chairs > *, .rm-between > * { scroll-snap-align: start; }
  .rm-chairs > .rm-chair { flex: 0 0 calc((100% - var(--space-3)) / 2); }
  .rm-between > li { flex: 0 0 78%; }
  .rm-chair__head { flex-direction: column; gap: var(--space-2); }
  .rm-chair__head > div { padding-top: 0; }
  .rm-chair__head img { width: 56px; height: 56px; }
  .rm-chair .title { font-size: 20px; }
  .rm-chair .body { font-size: 15px; }
  .rm-scroll-hint { display: block; margin-top: var(--space-2); color: var(--ink-soft); }
  .rm-scroll-hint::after { content: "\2192"; margin-left: 6px; }
  .rm-plan__h { display: none; }
  .rm-plan__v { display: block; max-width: 360px; margin: 0 auto; }
  .rm-footer__row:first-child { flex-direction: column; align-items: flex-start; }
  .rm-runorder > div + div { padding-left: 0; border-left: 0; border-top: var(--hairline) solid var(--rule); margin-top: var(--space-4); }
  .rm-programme__item { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); }
  .numeral { font-size: 36px; }
  .rm-aside { flex-direction: column; }
  .rm-logo { height: 26px; }
  .rm-partners { gap: 20px; }
}