/* ===== DESIGN SYSTEM: the one set of building blocks for ankor.app and todaymatters.app =====
   Every page on both sites is built from these. Sizes come from what the sites already used most
   (Nov 2026 inventory), so converging changes as little as possible. Desktop sizes; they scale down on phones. */

:root{
  /* type scale */
  --t-display-xl: clamp(52px, 6.4vw, 92px);  /* page heroes (EB Garamond) */
  --t-display:    clamp(40px, 4.4vw, 64px);  /* section titles (EB Garamond) */
  --t-h3:         clamp(26px, 2.2vw, 30px);  /* card / sub-section titles (EB Garamond) */
  --t-lead-serif: clamp(22px, 1.9vw, 26px);  /* serif lead lines (EB Garamond) */
  --t-statement:  clamp(34px, 4vw, 58px);    /* big statements (Playfair Display) */
  --t-statement-s:clamp(24px, 2.2vw, 30px);  /* smaller statements, quotes (Playfair Display) */
  --t-body: 17px;  --t-small: 15px;  --t-caption: 13px;  --t-label: 12px;   /* Inter */
  /* spacing */
  --space-section-l: clamp(80px, 9vw, 128px);
  --space-section:   clamp(64px, 7vw, 96px);
  --space-section-s: clamp(48px, 5vw, 64px);
  --gap-xs: 8px; --gap-s: 16px; --gap-m: 24px; --gap-l: 40px; --gap-xl: 64px;
  /* widths */
  --w-text: 760px; --w-page: 1180px; --w-wide: 1280px; --gutter: 28px;
  /* shape */
  --r-card: 22px; --r-pill: 999px;
}

/* ---- layout ---- */
.sx-section{padding:var(--space-section) 0}
.sx-section.l{padding:var(--space-section-l) 0}
.sx-section.s{padding:var(--space-section-s) 0}
.sx-section.band{background:var(--deep);border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.sx-wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)}
.sx-wrap.text{max-width:calc(var(--w-text) + 2 * var(--gutter))}
.sx-wrap.wide{max-width:calc(var(--w-wide) + 2 * var(--gutter))}
.sx-center{text-align:center}
.sx-stack>:not(:first-child){margin-top:var(--gap-m)}   /* wins over the type styles' margin:0 */

/* ---- type ---- */
.sx-display-xl,.sx-display,.sx-h3,.sx-lead-serif{font-family:var(--serif);font-weight:400;color:var(--white);margin:0;letter-spacing:-.01em}
.sx-display-xl{font-size:var(--t-display-xl);line-height:1.02}
.sx-display{font-size:var(--t-display);line-height:1.06}
.sx-h3{font-size:var(--t-h3);line-height:1.18}
.sx-lead-serif{font-size:var(--t-lead-serif);line-height:1.35;color:var(--text)}
.sx-display-xl em,.sx-display em,.sx-h3 em{font-style:italic;color:var(--cyan)}
.sx-statement,.sx-statement-s{font-family:var(--display);font-weight:400;margin:0;color:var(--white)}
.sx-statement{font-size:var(--t-statement);line-height:1.12}
.sx-statement-s{font-size:var(--t-statement-s);line-height:1.3}
.sx-statement em,.sx-statement-s em{color:var(--gold)}
.sx-body{font-size:var(--t-body);line-height:1.6;color:var(--text);margin:0}
.sx-small{font-size:var(--t-small);line-height:1.55;color:var(--muted);margin:0}
.sx-caption{font-size:var(--t-caption);line-height:1.5;color:var(--quiet);margin:0}
.sx-label{font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0}
.sx-label.cyan{color:var(--cyan)} .sx-label.quiet{color:var(--quiet)}

/* ---- buttons (two sizes, two styles) ---- */
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:var(--r-pill);font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s}
.sx-btn.small{min-height:40px;padding:0 18px;font-size:14px}
.sx-btn.primary{background:var(--gold);color:var(--navy)}
.sx-btn.primary:hover{background:var(--gold-hover)}
.sx-btn.ghost{border-color:var(--edge);color:var(--white);font-weight:500}
.sx-btn.ghost:hover{background:rgba(100,215,249,.08)}
/* EQUAL-SIZE GROUPS (brand standard): buttons side by side share one width and one height */
.sx-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:max-content;max-width:100%;gap:var(--gap-s);align-items:stretch}
.sx-actions>*{width:100%}
.sx-center .sx-actions,.sx-actions.center{margin-left:auto;margin-right:auto}
@media (max-width:560px){.sx-actions{grid-auto-flow:row;width:100%}}

/* ---- cards ---- */
.sx-card{background:var(--card);border:1px solid var(--soft);border-radius:var(--r-card);padding:clamp(24px,2.6vw,36px)}
.sx-card.feature{border-color:var(--line);background:rgba(7,36,71,.55)}
.sx-grid{display:grid;gap:var(--gap-m);grid-auto-rows:1fr}   /* equal-size groups: every card in a grid shares one height */
.sx-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.sx-grid.c3,.sx-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sx-grid.c2,.sx-grid.c3,.sx-grid.c4{grid-template-columns:1fr}}

/* ---- section heading block (label + title + lead), the most repeated pattern on both sites ---- */
.sx-head{max-width:var(--w-text)}
.sx-center .sx-head,.sx-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sx-head .sx-label{margin-bottom:var(--gap-s)}
.sx-head .sx-body,.sx-head .sx-lead-serif{margin-top:var(--gap-s)}

/* ---- quote ---- */
.sx-quote{margin:0;border-left:2px solid var(--gold);padding-left:var(--gap-m)}
.sx-quote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:var(--t-statement-s);line-height:1.4;color:var(--white)}
.sx-quote figcaption{margin-top:var(--gap-xs);font-size:var(--t-caption);color:var(--quiet)}

/* ---- long-form text (legal pages, articles): one prose style everywhere ---- */
.sx-prose{max-width:var(--w-text);font-size:var(--t-body);line-height:1.75;color:var(--text)}
.sx-prose>:first-child{margin-top:0}
.sx-prose p{margin:0 0 var(--gap-s)}
.sx-prose h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:1.18;color:var(--white);margin:var(--gap-xl) 0 var(--gap-s);scroll-margin-top:calc(var(--header-h) + 24px)}
.sx-prose h3{font-family:var(--serif);font-weight:400;font-size:var(--t-lead-serif);line-height:1.3;color:var(--white);margin:var(--gap-l) 0 var(--gap-xs)}
.sx-prose ul,.sx-prose ol{margin:0 0 var(--gap-s);padding-left:1.4em}
.sx-prose li{margin-bottom:var(--gap-xs)}
.sx-prose strong,.sx-prose b{color:var(--white);font-weight:600}
.sx-prose a{color:var(--cyan)}
.sx-prose a:hover{color:var(--white)}
.sx-prose blockquote{margin:var(--gap-l) 0;border-left:2px solid var(--gold);padding-left:var(--gap-m);font-family:var(--serif);font-style:italic;font-size:var(--t-statement-s);line-height:1.4;color:var(--white)}

/* ---- pills: small labelled facts (dates, versions, tags) ---- */
.sx-pills{display:flex;flex-wrap:wrap;gap:var(--gap-xs)}
.sx-center .sx-pills{justify-content:center}
.sx-pill{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px solid var(--soft);border-radius:var(--r-pill);font-size:var(--t-caption);color:var(--muted)}