/*
  Base: reset, document defaults, the type ramp and small utilities.
  Text classes mirror the Figma text styles one to one (letter-spacing: Figma % → em).
*/

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--aw-bg-primary);
  color: var(--aw-text-primary);
  font-family: var(--aw-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }  /* zero specificity: component padding wins */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--aw-accent-gold-light);
  outline-offset: 3px;
  border-radius: var(--aw-radius-xs);
}

.skip-link {
  position: absolute;
  left: var(--aw-space-4);
  top: -100px;
  z-index: 100;
  padding: var(--aw-space-3) var(--aw-space-5);
  background: var(--aw-accent-on-image);
  color: var(--aw-text-on-gold);
  font-weight: 600;
  border-radius: var(--aw-radius-sm);
}
.skip-link:focus { top: var(--aw-space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Icons: Lucide 1.48.0, inlined at build time, 1.5px stroke like the Figma icon components */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  stroke-width: 1.5;
}

/* Page container: content width 1424 inside a 1536 frame (gutter = space/14) */
.wrap {
  width: 100%;
  max-width: var(--aw-page-max);
  margin-inline: auto;
  padding-inline: var(--aw-gutter);
}

/* ---------- Type ramp (Figma text styles) ---------- */

/* Guild site — display */
.t-guild-hero    { font: 400 clamp(30px, 3.125vw, 48px)/1.12 var(--aw-font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.t-guild-section { font: 400 clamp(28px, 3vw, 46px)/1.12 var(--aw-font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.t-guild-section-m { font: 400 clamp(25px, 2.22vw, 34px)/1.14 var(--aw-font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.t-guild-name    { font: 400 18px/1.2 var(--aw-font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.t-guild-motto   { font: 400 17px/1.36 var(--aw-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.t-guild-tagline { font: 400 clamp(15px, 1.5vw, 23px)/1.2 var(--aw-font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.t-guild-sub     { font: 400 clamp(14px, 1.11vw, 17px)/1.3 var(--aw-font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.t-wordmark      { font: 400 16px/1.08 var(--aw-font-display); letter-spacing: 0.16em; text-transform: uppercase; }

/* Guild site — labels */
.t-overline { font: 500 13px/1.4 var(--aw-font-body); letter-spacing: 0.2em; text-transform: uppercase; }
.t-cta      { font: 600 13px/1.2 var(--aw-font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.t-role     { font: 600 11px/1.4 var(--aw-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.t-name     { font: 600 14px/1.3 var(--aw-font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.t-meta     { font: 400 11px/1.4 var(--aw-font-body); letter-spacing: 0.14em; text-transform: uppercase; }

/* Body */
.t-body-lg   { font: 400 17px/1.6 var(--aw-font-body); }
.t-body      { font: 400 16px/1.65 var(--aw-font-body); }
.t-body-sm   { font: 400 14px/1.6 var(--aw-font-body); }
.t-compact   { font: 400 13px/1.55 var(--aw-font-body); }
.t-micro     { font: 400 12px/1.5 var(--aw-font-body); }
.t-fine      { font: 400 11px/1.5 var(--aw-font-body); }
.t-strong    { font: 600 16px/1.6 var(--aw-font-body); }
.t-strong-sm { font: 600 13px/1.55 var(--aw-font-body); }
.t-statement { font: 400 clamp(22px, 1.7vw, 26px)/1.2 var(--aw-font-literary); }

/* Library (prototype-derived screens) — display */
.t-display-hero { font: 700 clamp(40px, 4.43vw, 68px)/1.03 var(--aw-font-display); letter-spacing: -0.035em; }
.t-h2   { font: 700 clamp(30px, 2.93vw, 45px)/1.08 var(--aw-font-display); }
.t-h3   { font: 700 clamp(22px, 1.95vw, 30px)/1.2 var(--aw-font-display); }
.t-h4   { font: 700 18px/1.3 var(--aw-font-display); }
.t-h5   { font: 700 13px/1.35 var(--aw-font-display); }
.t-lead { font: 400 clamp(19px, 1.5vw, 23px)/1.52 var(--aw-font-literary); font-style: italic; }
.t-lead-sm { font: 400 19px/1.55 var(--aw-font-literary); font-style: italic; }
.t-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 11px/1.4 var(--aw-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aw-accent-gold-light);
}
.t-eyebrow::before { content: "\2726"; font-size: 9px; }

/* Colour helpers bound to tokens */
.c-primary   { color: var(--aw-text-primary); }
.c-secondary { color: var(--aw-text-secondary); }
.c-muted     { color: var(--aw-text-muted); }
.c-gold      { color: var(--aw-accent-gold); }
.c-gold-light{ color: var(--aw-accent-gold-light); }
.c-energy    { color: var(--aw-text-energy); }
.c-on-image  { color: var(--aw-text-on-image); }
.c-accent-on-image { color: var(--aw-accent-on-image); }

/* Artwork that has a colourway per theme (e.g. blue icons on Dark, gold on Light) */
:root[data-theme="light"] .only-dark { display: none !important; }
:root:not([data-theme="light"]) .only-light { display: none !important; }

/* Even line lengths for headings, no single-word last lines in running text */
h1, h2, h3, h4, .t-lead, .t-lead-sm { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Pricing gate (D1, tools/build.mjs SHOW_PRICES=false): a gated price reads "Scoped after the assessment" in the
   price's place. The families size prices as display numerals; the sentence keeps the price's colour at a reading
   size. !important because each family styles its price element with its own selector. */
[data-price-gated]:not([data-price-gated="note"]) {
  font: 600 15px/1.4 var(--aw-font-body) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
.xc-sums--gated { font: 400 14px/1.55 var(--aw-font-body); color: var(--aw-text-secondary); margin: 0; }

/* A visible notice that a page is a draft (privacy v1). */
.draft-banner {
  margin-top: var(--aw-space-6);
  max-width: 760px;
  padding: var(--aw-space-4) var(--aw-space-5);
  border: 1px solid var(--aw-state-warning);
  border-left-width: 4px;
  border-radius: var(--aw-radius-md);
  background: var(--aw-bg-card);
  color: var(--aw-text-primary);
  font: 400 15px/1.55 var(--aw-font-body);
}
.draft-banner p { margin: 0; }
.draft-banner__title { display: flex; align-items: center; gap: var(--aw-space-2); font-weight: 700; margin-bottom: var(--aw-space-1) !important; }
.draft-banner__title .icon { width: 18px; height: 18px; color: var(--aw-state-warning); flex: none; }