/* Re:Model - page-specific rules for the Ghost theme. Load order: fonts (inline in default.hbs)
   -> tokens.css -> components.css -> this file. Colours, type and spacing come from the tokens;
   this file only wires the design system to the live markup: dialogs, form plumbing, focus,
   and the members reading layout. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-size: 19px; line-height: 1.58; }
.rm-root img { max-width: 100%; }

/* Keyboard focus is the focus-ring token on every control, not only the rm- components. */
.rm-root :is(a, button, input, select, textarea, summary):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Skip link: hidden until focused. */
.rm-root .rm-skip { position: absolute; left: var(--space-3); top: calc(-1 * var(--space-7)); z-index: 90; padding: var(--space-2) var(--space-3); background: var(--ink); color: var(--paper); text-decoration: none; border-radius: var(--radius-sm); }
.rm-root .rm-skip:focus { top: var(--space-3); }

/* Anchored sections clear the top of the viewport by a little. */
.rm-root [id] { scroll-margin-top: var(--space-4); }

.rm-ink { color: var(--ink); }

/* The fact line's bottom rule already closes the first screen, so the section after it drops
   its own top rule rather than drawing a second one. */
.rm-facts + .rm-section { border-top: 0; }

/* The section note doubles as the h2 where a section has no display headline (the rule,
   questions). Reset the h2 sizing from .rm-section h2. */
h2.rm-section__note { max-width: none; font-weight: 400; }
.rm-band__link { margin-top: var(--space-4); }

/* Text links inside running text and the footer legal row. */
.clauses a, .rm-prose a { color: var(--oxblood); text-underline-offset: 3px; }
.clauses a:hover, .rm-prose a:hover, .rm-footer a:not(.rm-link):hover { color: var(--oxblood-deep); }
.rm-partners a:not(.rm-link) { line-height: 0; }
.rm-legal { display: inline-flex; gap: var(--space-4); }

/* ---------- dialogs ----------
   forms.js toggles [hidden] on .modal and closes on [data-close] and Escape. The overlay
   scrolls, not the card, so a long dialog reads like a page. */
.modal { position: fixed; inset: 0; z-index: 80; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-6) var(--space-4); }
.modal[hidden] { display: none; }
.modal-scrim { position: fixed; inset: 0; background: var(--scrim); }
.modal-card { position: relative; width: 100%; max-width: 640px; margin: auto 0; background: var(--paper); color: var(--ink); padding: var(--space-5); border-radius: var(--radius-0); }
.modal-long { max-width: 760px; }
.modal-x { position: absolute; top: 18px; right: 20px; padding: var(--space-1); background: none; border: 0; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.modal-x:hover { color: var(--oxblood); }
.modal-title { margin-top: var(--space-2); padding-right: var(--space-6); }
.modal-intro { margin: var(--space-3) 0 var(--space-5); }
.modal-actions { margin-top: var(--space-2); }
.modal-note { margin-top: var(--space-4); }

/* forms */
.rm-input { font-size: 16px; }
select.rm-input { padding-right: var(--space-5); }
textarea.rm-input { height: auto; min-height: 132px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.rm-check { cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { grid-column: 1 / -1; margin: 0; min-height: 1em; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); }
.form-msg:empty { display: none; }
.form-msg.err { color: var(--oxblood); }

/* long dialogs: rules and privacy. Clauses in body serif at 16px, titles in ink. */
ol.clauses { list-style: decimal; padding-left: 1.4em; font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--ink-soft); font-variation-settings: 'opsz' 16; }
ol.clauses li { margin-bottom: var(--space-3); padding-left: var(--space-1); }
ol.clauses li::marker { color: var(--oxblood); }
ol.clauses b { color: var(--ink); font-weight: 500; }

/* ---------- members posts and pages ---------- */
.rm-post { padding: var(--space-6) 0 var(--space-7); border-top: 0; }
.rm-post__head { max-width: var(--measure); }
.rm-post__head .lede { margin-top: var(--space-4); }
.rm-post__head .meta { color: var(--ink-soft); margin-top: var(--space-3); }
.rm-post__tag { color: var(--oxblood); margin-bottom: var(--space-3); }
.rm-post__cover { display: block; width: 100%; height: auto; margin-top: var(--space-5); }
.rm-prose { max-width: var(--measure); margin-top: var(--space-5); }
.rm-prose > * + * { margin-top: var(--space-3); }
.rm-prose h2 { font-family: var(--font-serif); font-size: 34px; line-height: 1.1; font-weight: 380; margin-top: var(--space-5); }
.rm-prose h3 { font-family: var(--font-serif); font-size: 26px; line-height: 1.2; font-weight: 450; margin-top: var(--space-4); }
.rm-prose ul, .rm-prose ol { padding-left: 1.2em; }
.rm-prose ul { list-style: disc; }
.rm-prose ol { list-style: decimal; }
.rm-prose img { height: auto; }
.rm-prose figcaption { font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); margin-top: var(--space-2); }
.rm-prose blockquote { font-style: italic; font-size: 23px; line-height: 1.45; color: var(--ink); }
.rm-prose hr { border: 0; border-top: var(--hairline) solid var(--rule); margin: var(--space-5) 0; }
.rm-prose .kg-width-wide, .rm-prose .kg-width-full { max-width: none; }
.rm-post__foot { margin-top: var(--space-6); }

@media (max-width: 720px) {
  body { font-size: 17px; }
  .modal { padding: var(--space-3) 0; }
  .modal-card { padding: var(--space-5) 20px; }
  .rm-post { padding-top: var(--space-5); }
}