/* ============================================================
   RESTART PILATES — COMPONENT SYSTEM
   Rules are written against semantic HTML5 elements and a small
   set of variant attributes (data-tone, data-variant) — no
   generic <div class="wrapper"> nesting. The "no-wrapper" centering
   trick: padding-inline: max(gutter, calc((100% - content-max)/2))
   applied directly to the full-bleed element itself.
   ============================================================ */

/* tokens.css is now linked directly in each page's <head>, before this
   file, so the browser can fetch both stylesheets in parallel instead of
   blocking on this @import's extra round trip. */

/* ---------- RESET / BASE ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bone);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-weight: 600;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 700; }

p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }

/* The centering primitive — used on header, section, footer directly */
header, main > section, footer {
  padding-inline: max(var(--space-sm), calc((100% - var(--content-max)) / 2));
}

/* ---------- SKIP LINK ---------- */
a.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-bone);
  padding: var(--space-2xs) var(--space-sm);
  z-index: 100;
}
a.skip-link:focus { left: var(--space-sm); top: var(--space-2xs); }

/* ---------- HEADER / NAV ---------- */

header[data-role="site-header"] {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  background: rgba(246, 241, 231, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--border-hairline);
}

header[data-role="site-header"] a[data-role="wordmark"] {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}
header[data-role="site-header"] a[data-role="wordmark"] em {
  font-style: normal;
  color: var(--color-ember);
}

nav[data-role="primary-nav"] ul {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
nav[data-role="primary-nav"] a {
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-slate);
  padding-block: var(--space-3xs);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
nav[data-role="primary-nav"] a:hover,
nav[data-role="primary-nav"] a[aria-current="page"] {
  color: var(--color-ink);
  border-color: var(--color-ember);
}

button[data-toggle="nav"] {
  display: none;
  background: none;
  border: var(--border-strong);
  padding: var(--space-3xs) var(--space-xs);
  font: inherit;
  font-weight: 700;
}

@media (max-width: 56rem) {
  button[data-toggle="nav"] { display: inline-flex; }
  nav[data-role="primary-nav"] {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--color-bone);
    border-bottom: var(--border-hairline);
    padding: var(--space-sm);
    display: none;
  }
  nav[data-role="primary-nav"][data-open="true"] { display: block; }
  nav[data-role="primary-nav"] ul { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}

/* ---------- SECTION TONES ---------- */

main > section { padding-block: var(--space-xl); }

main > section[data-tone="ink"] { background: var(--color-ink); color: var(--color-bone); }
main > section[data-tone="ink"] h1,
main > section[data-tone="ink"] h2,
main > section[data-tone="ink"] h3 { color: var(--color-bone); }
main > section[data-tone="ink"] p[data-role="lede"] { color: #DCD5C0; }

main > section[data-tone="paper"] { background: var(--color-paper); }
main > section[data-tone="bone"] { background: var(--color-bone); }

main > section[data-border="top"] { border-top: var(--border-hairline); }

hgroup { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-lg); max-width: var(--content-narrow); }
hgroup > p[data-role="eyebrow"] {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ember);
}
hgroup > p[data-role="dek"] {
  font-size: var(--text-md);
  color: var(--color-slate);
  line-height: var(--leading-relaxed);
}
main > section[data-tone="ink"] hgroup > p[data-role="dek"] { color: #DCD5C0; }

/* ---------- HERO ---------- */

section[data-role="hero"] {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-2xl) var(--space-xl);
}
section[data-role="hero"] p[data-role="eyebrow"] {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: var(--space-sm);
}
section[data-role="hero"] h1 { max-width: 20ch; }
section[data-role="hero"] p[data-role="lede"] {
  font-size: var(--text-md);
  max-width: var(--content-narrow);
  color: var(--color-slate);
  margin-top: var(--space-md);
  line-height: var(--leading-relaxed);
}
section[data-role="hero"] p[data-role="cta-row"] {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* ---------- BUTTONS / LINKS ---------- */

a[data-variant], button[data-variant] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font: inherit;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
a[data-variant="primary"], button[data-variant="primary"] {
  background: var(--color-ember);
  color: var(--color-bone);
  border-color: var(--color-ember);
}
a[data-variant="primary"]:hover, button[data-variant="primary"]:hover { background: var(--color-ember-dark); border-color: var(--color-ember-dark); }

a[data-variant="ghost"], button[data-variant="ghost"] {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
a[data-variant="ghost"]:hover, button[data-variant="ghost"]:hover { background: var(--color-ink); color: var(--color-bone); border-color: var(--color-ink); }

a[data-variant="quiet"] {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  padding: 0;
  border-bottom: 2px solid var(--color-ember);
}

button[data-variant]:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
a[data-variant]:active, button[data-variant]:active { transform: translateY(1px); }
a[data-variant]:focus-visible, button[data-variant]:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--color-ember);
  outline-offset: 2px;
}

/* ---------- PILLARS / STAT GRID (definition lists as data) ---------- */

dl[data-role="pillars"], dl[data-role="stats"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-md);
  border-top: var(--border-strong);
}
dl[data-role="pillars"] > div, dl[data-role="stats"] > div {
  padding-block: var(--space-sm);
  border-right: var(--border-hairline);
}
dl[data-role="pillars"] > div:last-child, dl[data-role="stats"] > div:last-child { border-right: none; }
dl[data-role="pillars"] dt, dl[data-role="stats"] dt {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ember);
  margin-bottom: var(--space-2xs);
}
dl[data-role="stats"] dd[data-role="figure"] {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
}
dl[data-role="stats"] dd[data-role="caption"] {
  font-size: var(--text-sm);
  color: var(--color-slate);
  margin-top: var(--space-2xs);
}
main > section[data-tone="ink"] dl[data-role="stats"] dd[data-role="caption"] { color: #DCD5C0; }

/* ---------- WORKOUT LIBRARY ---------- */

section[data-role="workout-library"] p[data-role="filter-label"] {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-slate);
}
form[data-role="workout-filters"] {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-hairline);
}
form[data-role="workout-filters"] label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
  border: 1px solid var(--color-slate-line);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: var(--color-paper);
}
form[data-role="workout-filters"] input:checked + span { font-weight: 700; color: var(--color-ember); }
form[data-role="workout-filters"] input[type="search"] {
  font: inherit;
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  min-width: 14rem;
  background: var(--color-paper);
}
@media (min-width: 75rem) {
  /* At wide viewports the fluid type scale reaches its max size, which can
     crowd "Search exercise name…" against this box's fixed min-width — so
     step the input's font down slightly to keep the full placeholder clear. */
  form[data-role="workout-filters"] input[type="search"] {
    font-size: var(--text-sm);
    min-width: 16rem;
  }
}

ul[data-role="workout-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--space-md);
}

article[data-role="workout-card"] {
  background: var(--color-paper);
  border: var(--border-hairline-paper);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}
article[data-role="workout-card"] p[data-role="family"] {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-slate);
}
article[data-role="workout-card"] h3 { margin-top: var(--space-3xs); }
p[data-role="stars"] { color: var(--color-ember); letter-spacing: 0.15em; font-size: var(--text-sm); }
p[data-role="stars"] span[aria-hidden="true"] { margin-right: 1px; }

article[data-role="workout-card"] dl[data-role="cue-meta"] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3xs) var(--space-xs);
  font-size: var(--text-sm);
}
article[data-role="workout-card"] dl[data-role="cue-meta"] dt {
  font-weight: 700;
  color: var(--color-slate);
}
article[data-role="workout-card"] details {
  border-top: var(--border-hairline-paper);
  padding-top: var(--space-sm);
}
article[data-role="workout-card"] summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ember);
}
article[data-role="workout-card"] ol[data-role="cue-steps"] {
  margin-top: var(--space-sm);
  display: grid;
  gap: var(--space-2xs);
  counter-reset: step;
}
article[data-role="workout-card"] ol[data-role="cue-steps"] li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
article[data-role="workout-card"] ol[data-role="cue-steps"] li::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-ember);
}
p[data-role="safety-cue"] {
  background: var(--color-signal-tint);
  border-left: 3px solid var(--color-signal);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
p[data-role="safety-cue"] strong { text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-2xs); display: block; color: var(--color-signal); margin-bottom: 2px; }

p[data-role="empty-state"] {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-slate);
  border: 1px dashed var(--color-slate-line);
  border-radius: var(--radius-md);
}

/* ---------- MICRO-AUDIT FORM ---------- */

fieldset[data-step] { border: none; padding: 0; margin: 0; display: none; }
fieldset[data-step][data-visible="true"] { display: grid; gap: var(--space-md); }
fieldset[data-step] legend { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2xs); padding: 0; }

form[data-role="audit-form"] p[data-role="field"] { display: grid; gap: var(--space-3xs); }
form[data-role="audit-form"] label { font-size: var(--text-sm); font-weight: 700; }
form[data-role="audit-form"] input,
form[data-role="audit-form"] select,
form[data-role="audit-form"] textarea {
  font: inherit;
  font-size: var(--text-base);
  padding: var(--space-xs);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}
form[data-role="audit-form"] fieldset[data-role="choice-group"] {
  display: grid;
  gap: var(--space-2xs);
  border: none;
  padding: 0;
}
form[data-role="audit-form"] fieldset[data-role="choice-group"] label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 400;
  border: var(--border-hairline);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
form[data-role="audit-form"] fieldset[data-role="choice-group"] label:has(input:checked) {
  border-color: var(--color-ember);
  background: var(--color-ember-tint);
  font-weight: 700;
}

/* ---------- PROOF / CASE STUDIES ---------- */

ul[data-role="case-study-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-md);
}
article[data-role="case-study"] {
  background: var(--color-paper);
  border: var(--border-hairline-paper);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}
article[data-role="case-study"] blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
article[data-role="case-study"] figcaption { font-size: var(--text-sm); color: var(--color-slate); }
article[data-role="case-study"] dl[data-role="outcome"] {
  display: flex; gap: var(--space-md); border-top: var(--border-hairline-paper); padding-top: var(--space-sm);
}
article[data-role="case-study"] dl[data-role="outcome"] dt { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-slate); }
article[data-role="case-study"] dl[data-role="outcome"] dd { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }

table[data-role="validation-matrix"] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
table[data-role="validation-matrix"] caption { text-align: left; font-weight: 700; margin-bottom: var(--space-sm); }
table[data-role="validation-matrix"] th, table[data-role="validation-matrix"] td {
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-hairline-paper);
}
table[data-role="validation-matrix"] thead th {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-2xs);
  color: var(--color-slate);
  border-bottom: var(--border-strong);
}
table[data-role="validation-matrix"] td[data-value="yes"]::before { content: "✓ "; color: var(--color-sage-dark); font-weight: 700; }
table[data-role="validation-matrix"] td[data-value="no"]::before { content: "— "; color: var(--color-slate-line); }

/* ---------- FOOTER ---------- */

footer[data-role="site-footer"] {
  background: var(--color-ink);
  color: var(--color-bone);
  padding-block: var(--space-xl) var(--space-lg);
}
footer[data-role="site-footer"] > * + * { margin-top: var(--space-lg); }
footer[data-role="site-footer"] address { font-style: normal; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: #DCD5C0; }
footer[data-role="site-footer"] nav ul { display: flex; gap: var(--space-md); flex-wrap: wrap; }
footer[data-role="site-footer"] nav a { text-decoration: none; font-size: var(--text-sm); color: var(--color-bone); }
footer[data-role="site-footer"] p[data-role="legal"] { font-size: var(--text-2xs); color: #9A9585; border-top: 1px solid #4A4C40; padding-top: var(--space-md); }

/* ---------- UTILITIES ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}