/* Slow Yoga design system: tokens and the shared component layer. Loaded on every page (after styles.css).
   Rule of thumb: pages consume these tokens; do not add new hex colors, font sizes or radii in page CSS.
   Canon wording, citations and the D-024 tagline rule are content, not style, and are untouched here. */
:root {
  /* color */
  --ink:#111111; --muted:#505050; --accent:#272727; --line:#dddddd; --surface:#f7f7f5; --bg:#ffffff;
  /* type: families */
  --font-sans:Arial,Helvetica,sans-serif;
  /* type scale (px at 16px root): 12, 14, 16, 18, 24, 28-40, 40-64 */
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.5rem;
  --fs-h3:clamp(1.25rem,2vw,1.5rem);
  --fs-h2:clamp(1.75rem,3.2vw,2.5rem);
  --fs-h1:clamp(2.5rem,5vw,4rem);
  --lh-tight:1.1; --lh-body:1.6;
  --tracking-display:-.025em;
  /* spacing scale */
  --section-y:52px;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px; --space-6:104px;
  /* layout: the header, every page and the footer share one container */
  --container:min(1370px,86.5%);
  /* shape and interaction */
  --radius:0; --radius-pill:999px; --tap:44px; --btn-h:48px;
  --focus-ring:2px solid #111;
}
@media(max-width:900px) { :root { --container:calc(100% - 36px); } }
@media(max-width:760px) { :root { --section-y:32px; } }

/* One container for every page, aligned with the header and footer. */
.wrap { width:var(--container); max-width:none; margin-inline:auto; }
.page-wrap { width:var(--container); margin-inline:auto; }

/* Headings: one hierarchy (H1 > H2 > H3), set at zero specificity so component classes can still refine. */
:where(.content-page, .friend-page) h1 { font-family:var(--font-sans); font-size:var(--fs-h1); font-weight:400; line-height:1.07; letter-spacing:var(--tracking-display); }
:where(.content-page, .friend-page, .home-page) :is(h2) { font-family:var(--font-sans); font-size:var(--fs-h2); font-weight:400; line-height:1.15; letter-spacing:var(--tracking-display); }
:where(.content-page, .friend-page) :is(h3) { font-family:var(--font-sans); font-size:var(--fs-h3); line-height:1.25; }

/* One button system: radius 0, 48px tall, same states.
   Primary = solid ink. Secondary = outline. Text link = underlined, 44px tap height. */
.practice-cta, .button, .btn, .friend-page button[type="submit"] {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  min-height:var(--btn-h); padding:12px 22px; margin-top:var(--space-3);
  font-family:var(--font-sans); font-size:var(--fs-lg); line-height:1.2; font-weight:400; text-decoration:none;
  border:1px solid var(--accent); border-radius:var(--radius); cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.practice-cta, .btn-primary, .friend-page button[type="submit"] { background:var(--ink); color:#fff; border-color:var(--ink); }
.practice-cta:hover, .btn-primary:hover, .friend-page button[type="submit"]:hover { background:#333; border-color:#333; color:#fff; }
.button, .btn-secondary { background:transparent; color:var(--ink); }
.button:hover, .button:focus-visible, .btn-secondary:hover { background:var(--accent); color:#fff; }
:is(.practice-cta, .button, .btn, .friend-page button[type="submit"]):focus-visible { outline:var(--focus-ring); outline-offset:3px; }
:is(.practice-cta, .button, .btn, .friend-page button[type="submit"]):active { transform:translateY(1px); }
:is(.practice-cta, .button, .btn, .friend-page button[type="submit"]):disabled, :is(.button, .btn)[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.practice-cta { margin-top:0; }
@media(prefers-reduced-motion:reduce) { .practice-cta, .button, .btn { transition:none; } :is(.practice-cta, .button, .btn):active { transform:none; } }

/* Tap targets: 44px minimum for stand-alone links and buttons (inline links inside a sentence are exempt). */
.masthead { padding-block:4px; margin-block:-4px; min-height:var(--tap); display:inline-flex; align-items:center; }
header.site-header nav a, footer.site-footer .footer-nav a, .breadcrumbs a { min-width:var(--tap); }
header.site-header nav a { justify-content:center; }
.breadcrumbs a { display:inline-flex; align-items:center; min-height:var(--tap); }
/* Breadcrumb: the link (44px tap area) and the current-page text share one centered baseline. */
.breadcrumbs ol { gap:0 12px; align-items:center; }
.breadcrumbs li { display:flex; align-items:center; min-height:var(--tap); }
/* Links inside a sentence keep their natural inline box (uniform line spacing, no overlapping boxes);
   the 44px hit area is a pseudo-element that does not take part in layout. */
:is(.content-page, .home-page) main :is(p, li) a:not(.button, .btn, .practice-cta, .product-entry, .skip-link) { position:relative; }
:is(.content-page, .home-page) main :is(p, li) a:not(.button, .btn, .practice-cta, .product-entry, .skip-link)::after { content:""; position:absolute; inset:-12px -4px; }
.product-entry, .page-next > a { min-height:var(--tap); }
:where(.diy-page) .diy-jump a, :where(.diy-page) nav[aria-label] a { display:inline-flex; align-items:center; min-height:var(--tap); }

/* Forms (Friend of Carl contact): same typography, radius and focus as the rest of the site. */
.friend-page :is(input, textarea) { border-radius:var(--radius); }
.friend-page :is(input, textarea, button):focus-visible { outline:var(--focus-ring); outline-offset:3px; }

/* Section rhythm: one token (--section-y) above and below every section, so the space between two sections is
   2 x --section-y (104px desktop, 64px phone) including the divider rule. Copy keeps its own paragraph spacing. */
.section, .home-model, .ingestibles-teaser { padding-block:var(--section-y); }
.closing { padding-block:var(--section-y) var(--space-3); }
.page-next { padding-block:var(--space-3) var(--section-y); }
.section > :first-child { margin-top:0; }
.section > :last-child { margin-bottom:0; }
.science-divider { border-top:0; margin-top:0; padding-top:0; }