/* ==========================================================================
   FORCES GROUP — BASE, LAYOUT, COMPONENTS
   Depends on tokens.css. No hardcoded colors, sizes or timings below.
   ========================================================================== */

/* --- RESET ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

/* --- PAGE ----------------------------------------------------------------- */
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 2px;
  z-index: calc(var(--z-header) + 1);
  background: linear-gradient(90deg, var(--c-crimson-700), var(--c-crimson-400) 45%, var(--c-gold));
}
a { color: inherit; text-decoration: none; }

/* --- TYPOGRAPHY ----------------------------------------------------------- */
.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  text-wrap: balance;
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight);   letter-spacing: var(--ls-display); }
.t-h1      { font-size: var(--fs-h1);      line-height: var(--lh-tight);   letter-spacing: var(--ls-display); }
.t-h2      { font-size: var(--fs-h2);      line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.t-h3      { font-size: var(--fs-h3);      line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: var(--fw-bold); }

.t-eyebrow {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; line-height: 1;
}
.t-eyebrow--gold    { color: var(--c-gold); }
.t-eyebrow--crimson { color: var(--c-crimson-400); }

.t-wrap  { overflow-wrap: anywhere; hyphens: auto; text-wrap: pretty; }
.t-lead  { font-size: var(--fs-lead); color: var(--c-text-muted); max-width: 62ch; }
.t-muted { color: var(--c-text-muted); }
.t-dim   { color: var(--c-text-dim); }
.t-micro { font-size: var(--fs-micro); line-height: var(--lh-snug); color: var(--c-text-muted); }
.u-crimson { color: var(--c-crimson-400); }
.u-gold    { color: var(--c-gold); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- LAYOUT --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--header-h) + var(--s-6)) var(--s-10);
  scroll-snap-align: start;
}
.section--flush { padding: 0; }
.section--media { overflow: hidden; }

@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
}
/* Sections already reserve the header height in their own top padding, so
   anchor scrolling must land on the exact section top — not header-height
   below it, which would push the last 76px of every screen off the fold. */
html { scroll-padding-top: 0; }

/* --- HEADER --------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--c-line);
}
.header__inner { display: flex; align-items: center; gap: var(--s-6); width: 100%; }

.brand { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.brand__mark {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--c-line-crimson); border-radius: var(--r-pill);
  font-family: var(--ff-display); font-size: .75rem; font-weight: var(--fw-black);
  color: var(--c-gold);
}
.brand__logo { height: 38px; width: auto; object-fit: contain; }
.brand__word {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: .8125rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em;
}
.brand__word span { display: block; color: var(--c-crimson-400); }

.nav { flex: 1 1 auto; display: flex; justify-content: center; }
.nav__list { display: flex; align-items: center; gap: var(--s-1); }
.nav__link {
  display: block; padding: var(--s-2) var(--s-4);
  font-size: var(--fs-micro); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--c-text-muted); border-radius: var(--r-sm);
  position: relative; white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--c-text); background: var(--c-surface-2); }
.nav__link[aria-current="true"] { color: var(--c-text); background: var(--c-surface-tint); }
.nav__link[aria-current="true"]::after {
  content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: -14px;
  height: 2px; background: var(--c-crimson);
}

.header__cta { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-2); }

/* --- BUTTONS -------------------------------------------------------------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--c-text); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-8); min-height: 48px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-button); text-transform: uppercase;
  cursor: pointer; text-align: center;
  transition: background var(--t-base), color var(--t-base),
    border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--c-crimson); --btn-bd: var(--c-crimson); box-shadow: var(--sh-brand); }
.btn--primary:hover { --btn-bg: var(--c-crimson-400); --btn-bd: var(--c-crimson-400); }

.btn--gold { --btn-bd: var(--c-line-gold); }
.btn--gold:hover { --btn-bd: var(--c-gold); --btn-bg: color-mix(in srgb, var(--c-gold) 12%, transparent); }

.btn--ghost { --btn-bd: var(--c-line-strong); }
.btn--ghost:hover { --btn-bd: var(--c-text); --btn-bg: color-mix(in srgb, var(--c-text) 8%, transparent); }

.btn--light { --btn-bg: var(--c-text); --btn-fg: var(--c-void); --btn-bd: var(--c-text); }
.btn--light:hover { --btn-bg: var(--c-text-muted); --btn-bd: var(--c-text-muted); }

.btn--pill  { border-radius: var(--r-pill); padding-inline: var(--s-6); min-height: 42px; }
.btn--block { display: flex; width: 100%; }
.btn__arrow { font-size: .9em; line-height: 1; }

.btn-round {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--c-crimson);
  background: var(--c-crimson); color: var(--c-text-on-brand);
  transition: background var(--t-base), transform var(--t-fast);
}
.btn-round:hover { background: var(--c-crimson-400); transform: rotate(45deg); }

/* --- SECTION HEAD --------------------------------------------------------- */
.sec-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
.sec-head__title { max-width: 22ch; }

/* --- RIGHT RAIL (section indicator) --------------------------------------- */
.rail {
  position: fixed; right: max(var(--s-3), calc(var(--gutter) / 3)); top: 50%;
  transform: translateY(-50%); z-index: var(--z-rail);
  display: grid; gap: var(--s-2);
}
.rail__dot {
  display: block; width: 14px; height: 3px; border: 0; padding: 0;
  background: var(--c-line-strong); cursor: pointer;
  transition: background var(--t-base), width var(--t-base);
}
.rail__dot:hover { background: var(--c-text-muted); width: 20px; }
.rail__dot[aria-current="true"] { background: var(--c-crimson-400); width: 24px; }

/* --- COUNTER -------------------------------------------------------------- */
.counter {
  position: fixed; right: var(--gutter); bottom: var(--s-5); z-index: var(--z-rail);
  font-family: var(--ff-display); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: .04em; color: var(--c-text-dim);
  display: flex; align-items: baseline; gap: .35em;
}
.counter__current { color: var(--c-crimson-400); font-size: 1.15em; }

@media (max-width: 1023px) { .rail, .counter { display: none; } }

/* --- MOBILE NAV ----------------------------------------------------------- */
.nav-toggle {
  display: none; width: 44px; height: 44px; flex: none;
  background: none; border: 1px solid var(--c-line-strong); cursor: pointer;
  color: var(--c-text); font-size: 1.25rem; line-height: 1;
}
@media (max-width: 1180px) {
  .nav__link { padding-inline: var(--s-3); letter-spacing: .1em; }
}
@media (max-width: 1023px) {
  .nav-toggle { display: grid; place-items: center; }
  .header__inner { justify-content: space-between; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: var(--z-menu);
    background: var(--c-surface); border-bottom: 1px solid var(--c-line);
    padding: var(--s-4) var(--gutter) var(--s-8);
    transform: translateY(-120%); transition: transform var(--t-base);
    visibility: hidden;
  }
  .nav[data-open="true"] { transform: translateY(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__link { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
  .nav__link[aria-current="true"]::after { display: none; }
}

/* --- CONTENT PAGES --------------------------------------------------------
   Standalone pages, single posts, archives, search and 404: everything that
   is not the one-page front screen. They read top-down, so they opt out of the
   full-height centring and the scroll snapping the sections use.
   ------------------------------------------------------------------------- */
.page {
  min-height: auto;
  justify-content: flex-start;
  scroll-snap-align: none;
  padding-block: calc(var(--header-h) + var(--s-16)) var(--s-20);
}
.page--center { min-height: 80svh; justify-content: center; text-align: center; }
.page--center .t-lead { margin-inline: auto; }

.page__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-10); }
.page__title { max-width: 22ch; }
.page--center .page__title { max-width: none; }
.page__media { margin-bottom: var(--s-10); }
.page__media img { width: 100%; height: auto; object-fit: cover; }

.page__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-8); justify-content: inherit;
}
.page--center .page__actions { justify-content: center; }
.page__search { margin-top: var(--s-10); }

.page__pages {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-10); padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm); letter-spacing: var(--ls-button); text-transform: uppercase;
}
.page__pages a:hover { color: var(--c-gold); }

.page__siblings {
  display: flex; flex-wrap: wrap; gap: var(--s-6); justify-content: space-between;
  margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
.page__sibling--next { margin-inline-start: auto; text-align: end; }
.page__siblings a:hover { color: var(--c-gold); }

/* --- PROSE ----------------------------------------------------------------
   Editor output: whatever blocks the client puts on a page. Styled once here
   rather than per block.
   ------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-6); }
.prose p, .prose li { color: var(--c-text-muted); }
.prose h2 {
  font-family: var(--ff-display); font-weight: var(--fw-black); text-transform: uppercase;
  font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  color: var(--c-text); margin-top: var(--s-12);
}
.prose h3, .prose h4 {
  font-family: var(--ff-display); font-weight: var(--fw-bold); text-transform: uppercase;
  font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--c-text);
  margin-top: var(--s-10);
}
.prose a { color: var(--c-gold); text-decoration: underline; text-underline-offset: .2em; }
.prose a:hover { color: var(--c-gold-400); }
.prose strong { color: var(--c-text); font-weight: var(--fw-semi); }
.prose ul, .prose ol { padding-inline-start: var(--s-6); display: grid; gap: var(--s-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--c-crimson-400); }
.prose blockquote {
  border-inline-start: 2px solid var(--c-crimson);
  padding-inline-start: var(--s-6); font-size: var(--fs-lead); color: var(--c-text);
}
.prose figure img, .prose img { width: 100%; height: auto; }
.prose figcaption { margin-top: var(--s-2); font-size: var(--fs-micro); color: var(--c-text-dim); }
.prose hr { border: 0; border-top: 1px solid var(--c-line); margin-block: var(--s-10); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { padding: var(--s-3); border-bottom: 1px solid var(--c-line); text-align: start; }
.prose code, .prose pre {
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  font-size: var(--fs-sm); border-radius: var(--r-sm);
}
.prose code { padding: .15em .4em; }
.prose pre { padding: var(--s-4); overflow-x: auto; }

/* --- POST LIST ------------------------------------------------------------ */
.post-list { display: grid; }
.post-item { padding-block: var(--s-8); border-top: 1px solid var(--c-line); }
.post-item__date { color: var(--c-gold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.post-item__title { margin-block: var(--s-2); }
.post-item__title a:hover { color: var(--c-crimson-400); }

/* --- SEARCH FORM ---------------------------------------------------------- */
.search-form { display: flex; flex-wrap: wrap; gap: var(--s-2); max-width: 34rem; }
.page--center .search-form { margin-inline: auto; }
.search-form__field {
  flex: 1 1 12rem; min-height: 48px; padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2); border: 1px solid var(--c-line-strong);
  color: var(--c-text); border-radius: var(--r-sm);
}
.search-form__field::placeholder { color: var(--c-text-dim); }
.search-form__field:focus-visible { border-color: var(--c-gold); }
.search-form__submit { flex: 0 0 auto; }

/* --- BITS THAT USED TO BE INLINE STYLES ----------------------------------- */
.contacts__name { font-size: var(--fs-h2); }
.contacts__text { max-width: 46ch; }
.join__lead { margin-top: var(--s-5); }
.brand__logo--card { height: auto; max-height: 72px; max-width: min(100%, 260px); }