/* Equestrianism micro-site — screen-level layout.
 * Uses design-system tokens (tokens.css) for every value. Component-level
 * styling lives in the DS components; this is page chrome only. */

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg-page); color:var(--text-primary);
  font-family:var(--font-mono); font-size:var(--text-body); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--label-engraved); }
::selection{ background:var(--brass-300); color:var(--ink-900); }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
/* Caption label — sentence case. Labels a block of data; never sits above a
 * section heading (readme · Guardrails). */
.eyebrow{ font-size:var(--text-caption); font-weight:var(--fw-medium); color:var(--label-engraved); }

/* ---------- Nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:var(--nav-bg);
  border-bottom:1px solid var(--border-hairline); }
.nav__in{ display:flex; align-items:center; justify-content:space-between;
  height:64px; max-width:var(--container-wide); margin:0 auto; padding:0 var(--gutter); }
.nav__brand{ background:none; border:none; cursor:pointer; padding:0; }
.nav__links{ display:flex; align-items:center; gap:var(--space-6); }
.nav__link{ background:none; border:none; cursor:pointer; font-family:var(--font-mono);
  font-size:var(--text-body-sm);
  color:var(--text-secondary); padding:6px 2px; position:relative;
  transition:color var(--dur-fast) var(--ease-standard); }
.nav__link:hover{ color:var(--text-primary); }
.nav__link--active{ color:var(--brand); }
.nav__link--active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--brass-500); }

/* ---------- Hero ---------- */
.hero{ padding:var(--space-24) 0 var(--space-16); position:relative; overflow:hidden; }
.hero h1{ font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--text-display-1); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight);
  margin:0 0 var(--space-6); max-width:18ch; text-wrap:balance; }
.hero__lede{ font-size:var(--text-body-lg); line-height:var(--lh-relaxed);
  color:var(--text-secondary); max-width:56ch; margin:0 0 var(--space-8); }
.hero__cta{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; }
.hero__cmd{ margin-top:var(--space-12); max-width:720px; }

/* ---------- Section ---------- */
.section{ padding:var(--space-20) 0; }
.section--ink{ background:var(--ink-900); color:var(--text-on-dark);
  border-top:1px solid var(--edge-gilt); border-bottom:1px solid var(--edge-gilt); }
.section__head{ margin-bottom:var(--space-12); }
.section__head h2{ font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--text-h1); line-height:var(--lh-snug); letter-spacing:var(--tracking-tight);
  margin:0; max-width:22ch; }
.section--ink .section__head h2{ color:var(--text-on-dark); }

/* ---------- Product grid ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
.pcard{ position:relative; display:flex; flex-direction:column; gap:var(--space-3);
  background:var(--bg-surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:var(--space-6);
  cursor:pointer; text-align:left; font-family:inherit;
  transition:background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
/* Hover is a wash, never a lift. The tool list may grow more elaborate, but
 * nothing moves on hover (readme · Guardrails). */
.pcard:hover{ background:var(--bg-sunken); border-color:var(--border-strong); }
.pcard--soon{ cursor:default; opacity:.72; }
.pcard--soon:hover{ background:var(--bg-surface); border-color:var(--border-hairline); }
.pcard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pcard__name{ font-family:var(--font-mono); font-size:var(--text-h4); font-weight:var(--fw-semibold);
  color:var(--brand-strong); }
.pcard__disc{ font-size:var(--text-caption); color:var(--text-muted); font-style:italic;
  font-family:var(--font-display); }
.pcard__desc{ font-size:var(--text-body-sm); line-height:var(--lh-normal); color:var(--text-secondary); margin:0; }
.pcard__more{ margin-top:auto; font-size:var(--text-caption); color:var(--label-engraved); display:flex; align-items:center; gap:6px; }

/* ---------- Philosophy strip (ink) ---------- */
.tenets{ border-top:1px solid var(--border-on-dark); }
.tenet{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--space-6);
  padding:var(--space-5) 0; border-bottom:1px solid var(--border-on-dark); }
.tenet__k{ font-family:var(--font-display); font-size:var(--text-h3); font-weight:var(--fw-medium);
  line-height:var(--lh-snug); color:var(--brass-300); }
.tenet__v{ font-size:var(--text-body); line-height:var(--lh-normal); color:var(--text-on-dark-muted); max-width:60ch; }

/* ---------- Product detail ---------- */
.detail{ padding:var(--space-16) 0 var(--space-12); }
.detail__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:start; }
.detail h1{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-display-2);
  letter-spacing:var(--tracking-tight); margin:var(--space-4) 0 var(--space-5); }
.detail__lede{ font-size:var(--text-body-lg); line-height:var(--lh-relaxed); color:var(--text-secondary); margin:0 0 var(--space-6); }
.feature-list{ display:flex; flex-direction:column; gap:var(--space-5); margin-top:var(--space-8); }
/* Features are bold lead-ins in running text — no icon tiles. */
.feature{ font-size:var(--text-body-sm); color:var(--text-secondary); margin:0; line-height:var(--lh-normal); }
.feature strong{ color:var(--text-primary); font-weight:var(--fw-semibold); }
.detail__h2{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-h2);
  margin:var(--space-16) 0 var(--space-2); }

/* ---------- Docs layout ---------- */
.docs{ display:grid; grid-template-columns:220px minmax(0,1fr) 196px; gap:var(--space-10); padding:var(--space-12) 0 var(--space-20); align-items:start; }
.docnav{ position:sticky; top:88px; border-right:1px solid var(--border-hairline); padding-right:var(--space-5); }
.docnav__grp{ font-size:var(--text-caption); font-weight:var(--fw-medium);
  color:var(--label-engraved); margin:var(--space-5) 0 var(--space-3); }
.docnav__grp:first-child{ margin-top:0; }
.docnav__item{ display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:var(--text-body-sm); color:var(--text-secondary);
  padding:6px 10px; border-radius:var(--radius-sm); border-left:2px solid transparent;
  transition:color var(--dur-fast), background var(--dur-fast); }
.docnav__item:hover{ color:var(--text-primary); background:var(--parchment-100); }
.docnav__item--active{ color:var(--racing-700); border-left-color:var(--brass-500); background:var(--parchment-100); }
.doc__body{ max-width:var(--measure); }
.doc__body h1{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-h1);
  letter-spacing:var(--tracking-tight); margin:0 0 var(--space-3); }
.doc__body h2{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-h2);
  margin:var(--space-10) 0 var(--space-4); }
.doc__body p{ font-size:var(--text-body); line-height:var(--lh-relaxed); color:var(--text-secondary); }
.doc__body code{ font-family:var(--font-mono); font-size:.92em; background:var(--code-inline-bg);
  color:var(--code-inline-fg); padding:1px 6px; border-radius:var(--radius-xs); }
.doc__kicker{ font-size:var(--text-body-sm); color:var(--text-muted); }
.doc__toc{ display:flex; gap:12px; align-items:center; margin:var(--space-6) 0; }

/* tables */
.tbl{ width:100%; border-collapse:collapse; margin:var(--space-6) 0; font-size:var(--text-body-sm); }
.tbl th{ text-align:left; font-size:var(--text-micro); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--text-muted); padding:8px 12px; border-bottom:1.5px solid var(--border-strong); }
.tbl td{ padding:10px 12px; border-bottom:1px solid var(--border-hairline); color:var(--text-secondary); vertical-align:top; }
.tbl td code{ background:var(--code-inline-bg); }

/* Drop cap — product-page ledes only (marketing, heritage register). Once per page. */
.dropcap::first-letter{ font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:3.3em; float:left; line-height:.78; padding:6px 12px 0 0; color:var(--racing-700); }

/* ---------- Footer ---------- */
.footer{ background:var(--ink-900); color:var(--text-on-dark-muted); padding:var(--space-16) 0 var(--space-10);
  border-top:1px solid var(--edge-gilt); }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-8); }
.footer h5{ font-size:var(--text-body-sm); font-weight:var(--fw-regular);
  color:var(--text-on-dark); margin:0 0 var(--space-4); }
.footer__link{ display:block; color:var(--text-on-dark-muted); font-size:var(--text-body-sm); padding:4px 0; }
.footer__link:hover{ color:var(--text-on-dark); }
.footer__blurb{ font-size:var(--text-body-sm); line-height:var(--lh-normal); max-width:38ch; margin:var(--space-4) 0 0; }
.footer__colophon{ margin-top:var(--space-12); }
.footer__base{ margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--border-on-dark);
  display:flex; justify-content:space-between; font-size:var(--text-caption); color:var(--text-on-dark-muted); }

/* ---------- Docs chrome: breadcrumb, on-this-page, prev/next ---------- */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:var(--text-caption);
  color:var(--text-muted); margin-bottom:var(--space-4); }
.breadcrumb b{ color:var(--label-engraved); font-weight:var(--fw-semibold); }
.breadcrumb .sep{ color:var(--border-strong); }

.docnav__toggle{ margin-top:var(--space-3); }

.doc-toc{ position:sticky; top:88px; font-size:var(--text-body-sm); }
.doc-toc__h{ font-size:var(--text-caption); font-weight:var(--fw-medium);
  color:var(--label-engraved); margin-bottom:var(--space-3); }
.doc-toc__item{ display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:var(--text-body-sm); color:var(--text-muted);
  padding:5px 0 5px 12px; border-left:2px solid var(--border-hairline);
  transition:color var(--dur-fast), border-color var(--dur-fast); line-height:1.35; }
.doc-toc__item:hover{ color:var(--text-primary); }
.doc-toc__item--active{ color:var(--brand); border-left-color:var(--brass-500); }

.doc__lead{ font-size:var(--text-body-lg); line-height:var(--lh-relaxed); color:var(--text-secondary);
  margin:0 0 var(--space-6); }
.doc__body h2{ scroll-margin-top:84px; }
.doc__body ul{ padding-left:1.3em; margin:var(--space-4) 0; }
.doc__body li{ font-size:var(--text-body); line-height:var(--lh-relaxed); color:var(--text-secondary); margin:6px 0; }
.doc__body li::marker{ color:var(--brass-500); }
.doc__body strong{ color:var(--text-primary); font-weight:var(--fw-semibold); }

.prevnext{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-16);
  padding-top:var(--space-6); border-top:1px solid var(--border-hairline); }
.prevnext__btn{ display:flex; flex-direction:column; gap:4px; padding:var(--space-4) var(--space-5);
  background:var(--bg-surface); border:1px solid var(--border-hairline); border-radius:var(--radius-md);
  cursor:pointer; text-align:left; font-family:var(--font-mono);
  transition:background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.prevnext__btn:hover{ background:var(--bg-sunken); border-color:var(--border-strong); }
.prevnext__btn--next{ text-align:right; }
.prevnext__k{ font-size:var(--text-caption); color:var(--text-muted); }
.prevnext__t{ font-size:var(--text-body); color:var(--brand); }
.prevnext__btn[disabled]{ opacity:.4; cursor:default; pointer-events:none; }

/* ---------- Theme toggle ---------- */
.themebtn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  color:var(--text-secondary); cursor:pointer;
  transition:color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); }
.themebtn:hover{ color:var(--text-primary); border-color:var(--brass-500); }

/* ---------- Search trigger + palette ---------- */
.searchtrigger{ display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 12px;
  background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  color:var(--text-muted); cursor:text; font-family:var(--font-mono); font-size:var(--text-body-sm);
  min-width:190px; transition:border-color var(--dur-fast); }
.searchtrigger:hover{ border-color:var(--brass-500); }
.searchtrigger__kbd{ margin-left:auto; font-size:var(--text-micro); letter-spacing:.08em;
  color:var(--text-muted); border:1px solid var(--border-hairline); border-radius:var(--radius-xs); padding:2px 6px; }

.palette__scrim{ position:fixed; inset:0; z-index:100; background:var(--scrim);
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh;
  animation:eq-fade var(--dur-base) var(--ease-standard); }
@keyframes eq-fade{ from{ opacity:0; } to{ opacity:1; } }
.palette{ width:min(640px,92vw); background:var(--bg-surface);
  border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  overflow:hidden; }
.palette__inputrow{ display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--border-hairline); color:var(--text-muted); }
.palette__input{ flex:1; border:none; background:transparent; outline:none;
  font-family:var(--font-mono); font-size:var(--text-body-lg); color:var(--text-primary); }
.palette__input::placeholder{ color:var(--text-muted); }
.palette__esc{ font-size:var(--text-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); border:1px solid var(--border-hairline); border-radius:var(--radius-xs); padding:2px 6px; }
.palette__results{ max-height:min(420px,54vh); overflow-y:auto; padding:8px; }
.palette__grouphd{ font-size:var(--text-caption); font-weight:var(--fw-medium);
  color:var(--label-engraved); padding:10px 12px 6px; }
.palette__item{ display:flex; flex-direction:column; gap:3px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; padding:10px 12px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); }
.palette__item--active{ background:var(--bg-sunken); }
.palette__item--active .palette__title{ color:var(--brand); }
.palette__title{ font-size:var(--text-body); color:var(--text-primary); }
.palette__title mark{ background:var(--brass-300); color:var(--ink-900); border-radius:2px; padding:0 1px; }
.palette__snippet{ font-size:var(--text-caption); color:var(--text-muted); line-height:1.4;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.palette__crumb{ font-size:var(--text-caption); color:var(--text-muted); }
.palette__empty{ padding:28px 18px; text-align:center; color:var(--text-muted); font-size:var(--text-body-sm); }
.palette__foot{ display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--border-hairline);
  font-size:var(--text-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.palette__foot kbd{ font-family:var(--font-mono); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs); padding:1px 5px; margin-right:5px; }

@media (max-width:860px){
  .pgrid,.detail__grid,.tenet,.docs,.footer__grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:var(--text-display-2); }
  .docnav{ position:static; border-right:none; }
  .doc-toc{ display:none; }
  .searchtrigger{ min-width:0; }
}