/* Wuthering Wall website-family component primitives.
   Copy into the design bundle as a binding visual reference, then map classes
   to the chosen framework without changing their geometry or colour jobs. */

:root {
  --ww-foxglove: #B43A7E;
  --ww-lilac-haze: #E8D8F0;
  --ww-slate: #3A3F4A;
  --ww-apricot: #F0A852;
  --ww-cream: #FBF7EF;
  --ww-font-display: "Sohne", "Space Grotesk", "Aptos", ui-sans-serif, system-ui, sans-serif;
  --ww-font-body: "Sohne", "Inter", "Aptos", ui-sans-serif, system-ui, sans-serif;
  --ww-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ww-container-max: 1360px;
  --ww-gutter: clamp(20px, 4vw, 48px);
  --ww-radius-card: 8px;
  --ww-rule: 1px solid var(--ww-lilac-haze);
  --ww-focus-ring: 0 0 0 3px rgba(180, 58, 126, 0.32);
}

.ww-shell { max-width: var(--ww-container-max); margin-inline: auto; padding-inline: var(--ww-gutter); }
.ww-site-header { background: var(--ww-cream); border-bottom: var(--ww-rule); }
.ww-site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 36px; padding-block: 16px; }
.ww-brand { display: flex; align-items: center; gap: 12px; color: var(--ww-slate); text-decoration: none; }
.ww-brand__mark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--ww-foxglove); color: var(--ww-cream); font: 700 17px/1 var(--ww-font-display); }
.ww-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.ww-brand__name { font: 600 18px/1.15 var(--ww-font-display); }
.ww-brand__descriptor { font: 400 10.5px/1.3 var(--ww-font-mono); letter-spacing: .08em; opacity: .75; }

.ww-route-nav { position: relative; display: flex; align-items: flex-start; gap: 26px; max-width: 100%; overflow-x: auto; padding: 4px 8px 2px; }
.ww-route-nav::before { content: ""; position: absolute; left: 8px; right: 8px; top: 9.5px; height: 3px; border-radius: 2px; background: var(--ww-foxglove); }
.ww-route-nav__link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ww-slate); text-decoration: none; white-space: nowrap; font: 600 12.5px/1.25 var(--ww-font-body); }
.ww-route-nav__link:hover, .ww-route-nav__link[aria-current="page"] { color: var(--ww-foxglove); }
.ww-route-nav__node { box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; background: var(--ww-cream); border: 3.5px solid var(--ww-foxglove); }
.ww-route-nav__link[aria-current="page"] .ww-route-nav__node { background: var(--ww-foxglove); }
.ww-route-nav__node--signal { background: var(--ww-apricot); border: 3px solid var(--ww-cream); outline: 2px solid var(--ww-foxglove); }

.ww-hero { border-bottom: var(--ww-rule); }
.ww-hero__inner { padding-block: clamp(40px, 6vw, 68px) 46px; }
.ww-kicker, .ww-section__rail { margin: 0; color: var(--ww-foxglove); font: 400 12px/1.35 var(--ww-font-mono); letter-spacing: .08em; }
.ww-kicker { margin-bottom: 18px; font-size: 12.5px; }
.ww-h1 { max-width: 920px; margin: 0; font: 600 clamp(38px, 5.4vw, 72px)/1.04 var(--ww-font-display); letter-spacing: -.01em; }
.ww-h2 { margin: 0; font: 600 clamp(26px, 3.4vw, 42px)/1.12 var(--ww-font-display); }
.ww-lede { max-width: 66ch; margin: 22px 0 0; font: 400 clamp(16px, 1.5vw, 19px)/1.65 var(--ww-font-body); }

.ww-metrics { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.ww-metric { flex: 1 1 150px; min-width: 150px; max-width: 240px; padding: 16px 20px; border-radius: var(--ww-radius-card); background: var(--ww-lilac-haze); }
.ww-metric__label { font: 400 11.5px/1.35 var(--ww-font-mono); letter-spacing: .06em; opacity: .8; }
.ww-metric__value { font: 600 34px/1.15 var(--ww-font-display); font-variant-numeric: tabular-nums; }
.ww-metric__unit { margin-left: 4px; font-size: 15px; font-weight: 500; }
.ww-metric__caption { margin-top: 2px; font: 400 12px/1.4 var(--ww-font-body); opacity: .78; }

.ww-section { border-top: var(--ww-rule); }
.ww-section--lilac { border-top: 0; background: var(--ww-lilac-haze); }
.ww-section__inner { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px 48px; padding-block: clamp(44px, 6vw, 72px); }
.ww-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.ww-card { padding: 20px 22px; border: 1.5px solid var(--ww-lilac-haze); border-radius: var(--ww-radius-card); background: var(--ww-lilac-haze); color: var(--ww-slate); }
.ww-section--lilac .ww-card { padding: 16px 20px; border: 0; background: var(--ww-cream); }
.ww-card--compact { padding: 14px 16px !important; }
.ww-card__eyebrow { margin-bottom: 10px; color: var(--ww-foxglove); font: 400 11.5px/1.35 var(--ww-font-mono); }
.ww-card__title { margin: 0 0 6px; font: 600 21px/1.25 var(--ww-font-display); }
.ww-card__copy { margin: 0; font: 400 13.5px/1.55 var(--ww-font-body); }
a.ww-card { display: block; text-decoration: none; }
a.ww-card:hover { border-color: var(--ww-foxglove); }

.ww-site-footer { margin-top: clamp(40px, 6vw, 72px); border-top: var(--ww-rule); background: var(--ww-cream); }
.ww-site-footer__main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 32px; padding-block: 28px; }
.ww-site-footer__disclosure { margin: 0; padding-bottom: 26px; color: var(--ww-slate); font: 400 11px/1.6 var(--ww-font-mono); opacity: .65; }

:where(a, button, input, select, textarea):focus-visible { outline: 0; box-shadow: var(--ww-focus-ring); }

@media (max-width: 720px) {
  .ww-section__inner { grid-template-columns: 1fr; padding-block: 44px; }
  .ww-route-nav { width: 100%; }
  .ww-card-grid { grid-template-columns: 1fr; }
}