/* ==========================================================================
   Base — reset, typography, links, forms, utilities
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ss-header-height) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--ss-font-body);
  font-size: var(--ss-text-base);
  line-height: var(--ss-leading-normal);
  color: var(--ss-color-text);
  background: var(--ss-color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
img { font-style: italic; } /* alt text styling when images fail */
figure { margin: 0; }
iframe { max-width: 100%; }

/* --- Headings --- */
h1, h2, h3, h4, h5, h6, .ss-h1, .ss-h2, .ss-h3, .ss-h4 {
  font-family: var(--ss-font-heading);
  font-weight: var(--ss-weight-bold);
  line-height: var(--ss-leading-snug);
  color: var(--ss-color-text);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1, .ss-h1, h2, .ss-h2, .ss-display { font-family: var(--ss-font-display); font-weight: var(--ss-weight-bold); text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.98; }
h1, .ss-h1 { font-size: var(--ss-text-4xl); }
h2, .ss-h2 { font-size: var(--ss-text-3xl); }
h3, .ss-h3 { font-size: var(--ss-text-2xl); }
h4, .ss-h4 { font-size: var(--ss-text-xl); }
h5 { font-size: var(--ss-text-lg); }
h6 { font-size: var(--ss-text-base); text-transform: uppercase; letter-spacing: var(--ss-tracking-wide); }
.ss-display { font-size: var(--ss-text-display); line-height: 0.94; }
p { margin: 0 0 1.25em; }
.ss-lead, .ss-prose .lead { font-size: var(--ss-text-lg); line-height: var(--ss-leading-relaxed); color: var(--ss-color-text-muted); }
.ss-eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--ss-font-display); font-size: 1.0625rem; font-weight: var(--ss-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--ss-color-primary); margin-bottom: var(--ss-space-3); }
/* Eyebrows are plain text — the hexagon motif lives in the footer, dividers and category badges only. */
.ss-eyebrow::before { content: none; }
.ss-card__meta .ss-hex { display: none; }
.ss-caption, figcaption { font-size: var(--ss-text-sm); color: var(--ss-color-text-muted); }
blockquote, .ss-pullquote { margin: var(--ss-space-6) 0; padding: var(--ss-space-4) var(--ss-space-5); border-left: 6px solid var(--ss-color-orange); font-family: var(--ss-font-display); font-size: var(--ss-text-2xl); font-weight: var(--ss-weight-semibold); line-height: 1.15; text-transform: uppercase; }
blockquote cite { display: block; margin-top: var(--ss-space-3); font-family: var(--ss-font-body); font-size: var(--ss-text-sm); font-weight: var(--ss-weight-regular); font-style: normal; color: var(--ss-color-text-muted); }
hr { border: 0; border-top: 1px solid var(--ss-color-border); margin: var(--ss-space-6) 0; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .35em; }
small { font-size: var(--ss-text-sm); }
strong, b { font-weight: var(--ss-weight-bold); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

/* --- Links --- */
a { color: var(--ss-color-primary); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; transition: color var(--ss-ease); }
a:hover { color: var(--ss-color-primary-dark); }
.ss-band--surface a:not(.ss-btn):not(.ssh-btn), .ss-band--warm a:not(.ss-btn):not(.ssh-btn) { color: var(--ss-color-primary-dark); } /* 4.5:1 on gray */
.ss-band--dark a:not(.ss-btn):not(.ssh-btn), .ss-band--primary a:not(.ss-btn):not(.ssh-btn) { color: #fff; }

/* --- Focus (WCAG 2.2 AA: visible, non-obscured) --- */
:focus { outline: none; }
:focus-visible { box-shadow: var(--ss-focus-ring); outline: 2px solid transparent; border-radius: 4px; }
.ss-band--dark :focus-visible, .ss-band--primary :focus-visible { box-shadow: 0 0 0 3px var(--ss-color-primary-deep), 0 0 0 6px #fff; }

/* --- Selection --- */
::selection { background: var(--ss-color-yellow); color: var(--ss-color-text); }

/* --- Screen reader / skip link --- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 10000; padding: .75rem 1rem; background: var(--ss-color-primary); color: #fff; font-weight: var(--ss-weight-bold); border-radius: 0 0 var(--ss-radius-sm) var(--ss-radius-sm); text-decoration: none; }
.skip-link:focus { top: 0; box-shadow: var(--ss-focus-ring); }

/* --- Forms --- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), textarea, select {
  font: inherit; width: 100%; padding: .65rem .85rem; min-height: 44px;
  color: var(--ss-color-text); background: #fff; border: 1px solid var(--ss-color-border-strong); border-radius: var(--ss-radius-sm);
  transition: border-color var(--ss-ease), box-shadow var(--ss-ease);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--ss-color-primary); box-shadow: 0 0 0 3px var(--ss-color-primary-tint); border-radius: var(--ss-radius-sm); }
label { font-weight: var(--ss-weight-semibold); }
button, input[type=submit], input[type=button] { font: inherit; cursor: pointer; }

/* --- Tables --- */
table { width: 100%; border-collapse: collapse; font-size: var(--ss-text-sm); }
th, td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--ss-color-border); vertical-align: top; }
th { font-family: var(--ss-font-heading); font-weight: var(--ss-weight-bold); background: var(--ss-color-surface); }

/* --- Prose (page content) --- */
.ss-prose { max-width: var(--ss-measure); }
.ss-prose > * + * { margin-top: 1em; }
.ss-prose h2 { margin-top: 2em; }
.ss-prose h3 { margin-top: 1.5em; }
.ss-prose img { border-radius: var(--ss-radius-md); }
.alignwide { max-width: var(--ss-container); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption, .wp-caption-text { max-width: 100%; }
.sticky, .bypostauthor { /* WP required classes */ }

/* --- Utilities --- */
.ss-container { width: 100%; max-width: var(--ss-container); margin-inline: auto; padding-inline: var(--ss-gutter); }
.ss-container--narrow { max-width: var(--ss-container-narrow); }
.ss-container--wide { max-width: var(--ss-container-wide); }
.ss-section { padding-block: var(--ss-section); }
.ss-section--tight { padding-block: calc(var(--ss-section) * .6); }
.ss-text-center { text-align: center; }
.ss-muted { color: var(--ss-color-text-muted); }
.ss-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ss-measure { max-width: var(--ss-measure); }
.ss-mx-auto { margin-inline: auto; }
.ss-stack > * + * { margin-top: var(--ss-space-4); }
.ss-cluster { display: flex; flex-wrap: wrap; gap: var(--ss-space-3); align-items: center; }

/* Hexagon brand motif (use sparingly: labels, dividers, accents) */
.ss-hex { display: inline-block; width: 1em; height: 1.15em; background: var(--ss-accent, var(--ss-color-primary)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ss-hex--red { --ss-accent: var(--ss-color-red); } .ss-hex--orange { --ss-accent: var(--ss-color-orange); } .ss-hex--yellow { --ss-accent: var(--ss-color-yellow); } .ss-hex--magenta { --ss-accent: var(--ss-color-magenta); } .ss-hex--green { --ss-accent: var(--ss-color-green); } .ss-hex--blue { --ss-accent: var(--ss-color-primary); }
.ss-divider { display: flex; gap: .4rem; align-items: center; margin: var(--ss-space-6) 0; }
.ss-divider::before, .ss-divider::after { content: ""; flex: 1; height: 1px; background: var(--ss-color-border); }
.ss-divider .ss-hex { width: .8rem; height: .9rem; }
.ss-brand-bar { height: 6px; background: linear-gradient(90deg, var(--ss-color-primary) 0 22%, var(--ss-color-red) 22% 38%, var(--ss-color-orange) 38% 54%, var(--ss-color-yellow) 54% 70%, var(--ss-color-magenta) 70% 86%, var(--ss-color-green) 86%); }