/* Base: reset, typography, links, focus, icons, shared accents, utilities */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--c-surface-alt); color: transparent; /* hides alt text while loading */ }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--c-heading);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--c-red-ink); }
p { margin: 0 0 var(--s-4); }
p, li { text-wrap: pretty; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
small { font-size: var(--fs-xs); }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-6) 0; }
blockquote {
  position: relative;
  margin: var(--s-5) 0; padding: var(--s-1) 0 var(--s-1) var(--s-6);
  border-left: 2px solid var(--c-gold);
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.35;
  color: var(--c-heading);
}

a { color: var(--c-link); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color var(--t-fast) ease; }
a:hover { color: var(--c-red-ink); }

:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 4px; }

/* Icons (Lucide). Inline SVGs carry .icon; brand marks are filled. */
.icon {
  width: 1em; height: 1em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--brand { fill: currentColor; stroke: none; }

/* Skip link */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 1000;
  background: var(--c-blue); color: var(--c-on-dark);
  padding: .75rem 1.25rem; border-radius: var(--radius-pill); text-decoration: none;
}
.skip-link:focus { top: var(--s-4); color: var(--c-on-dark); }

/* ---------- Shared accents ---------- */
/* Eyebrow: small red tracked label with a four-point star */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.4;
  color: var(--c-red-ink); margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: ''; width: 12px; height: 12px; flex-shrink: 0; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pill tag with a glowing diamond */
.tag {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4;
  color: var(--c-red-ink); padding: .45rem 1rem; margin-bottom: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--c-red) 35%, transparent); border-radius: var(--radius-pill);
}
.tag::before {
  content: ''; width: 7px; height: 7px; flex-shrink: 0; transform: rotate(45deg);
  background: var(--c-red); box-shadow: 0 0 10px rgba(227, 27, 35, 0.55);
}
.tag .icon { width: .95rem; height: .95rem; }
.tag--gold { color: var(--c-gold); border-color: rgba(197, 160, 89, 0.45); background: rgba(13, 16, 43, 0.3); }

/* Chapter label: italic serif numeral + tracked caption + gradient rule */
.chapter {
  display: inline-flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; line-height: 1.4;
  color: var(--c-text-muted);
}
.chapter i { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-red-ink); }
.chapter::after { content: ''; width: 2.5rem; height: 1px; background: linear-gradient(90deg, var(--c-red), var(--c-gold)); }
.chapter--light { color: rgba(255, 255, 255, 0.7); }
.chapter--light i { color: var(--c-gold); }

/* Display headline with italic accent word */
.display { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.02em; }
.display em { font-style: italic; color: var(--c-red-ink); }

/* Hairline rainbow + navy grain */
.rainbow-accent { height: 3px; background: var(--rainbow); }
.grain { position: absolute; inset: 0; background-image: var(--grain); pointer-events: none; z-index: 1; }

/* Line link: tracked caps with a growing rule */
.link-line {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--c-primary); text-decoration: none; background: none; border: 0; padding: 0;
}
.link-line__bar { display: inline-block; width: 2.5rem; height: 1px; background: var(--c-red); transition: width .45s var(--ease); }
.link-line:hover { color: var(--c-red-ink); }
.link-line:hover .link-line__bar { width: 4rem; }
.link-line--light { color: var(--c-on-dark); }
.link-line--light:hover { color: var(--c-gold); }

/* Inline arrow link (used in panels, prose and cards) */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; color: var(--c-primary); text-decoration: none;
  transition: color var(--t-fast) ease, gap var(--t) var(--ease-out);
}
.link-arrow::after { content: '→'; font-weight: 400; }
.link-arrow:hover { color: var(--c-red-ink); gap: .85rem; }

/* Staggered scroll reveal */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px); filter: blur(4px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* Utilities */
.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;
}
.lead { font-size: 1.05rem; line-height: 1.8; color: var(--c-text-muted); max-width: 62ch; }
.muted { color: var(--c-text-muted); }
.tabular { font-variant-numeric: tabular-nums; }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-7); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-6); }
.prose img { border-radius: var(--radius-lg); margin: var(--s-5) 0; }
.prose :is(p, li, dd) > a:not(.btn):not(.chip):not(.link-arrow) { text-decoration: underline; }
.sample-flag {
  display: inline-flex; align-items: center; gap: .35em; vertical-align: middle;
  font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6;
  color: var(--c-warning); background: var(--c-warning-soft);
  border-radius: var(--radius-pill); padding: .1rem .55rem;
}
.sample-flag--dark { background: rgba(197, 160, 89, 0.25); color: var(--c-gold); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}

@media print {
  .site-header, .site-footer, .utility-bar, .share-bar, .notice-bar, .rainbow-accent, .hero-slider__bar, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
}