/* ==========================================================================
   main.css — tokens, reset, typography, globals
   Emilian Dobrev — Astrology

   Palette is fixed by the brief (six named hex values below). Everything
   else — type pairing, spacing scale, the wheel-glyph signature motif —
   is derived from that palette and from the subject matter (charts,
   live/communal teaching, direct/simple language). Light mode only, no
   dark backgrounds anywhere, per explicit instruction.
   ========================================================================== */

:root {
  /* ---- brand palette (given) ---- */
  --ivory: #FFFEE5;        /* primary background */
  --copper: #C87C41;       /* primary accent — CTAs, links, active state */
  --burgundy: #480C05;     /* headings, high-contrast text, footer bg #480C05*/
  --navy: #040E33;         /* body text, secondary dark accent */
  --cream: #E9E0C2;        /* alternating section bg, card fill */
  --soft-white: #F9F8F5;   /* panels/cards sitting on ivory or cream */

  /* ---- derived tones (tints/shades of the above, not new hues) ---- */
  --copper-light: #E0A56E;
  --copper-dark: #A5652F;
  --burgundy-tint: #6B2015;
  --navy-tint: #1A2652;
  --line-hairline: #D9CFAE;     /* derived from cream, for dividers */
  --overlay-scrim: rgba(4, 14, 51, 0.55); /* navy, for mobile-nav overlay */

  /* ---- semantic aliases ---- */
  --bg-page: var(--ivory);
  --bg-alt: var(--cream);
  --bg-panel: var(--soft-white);
  --text-heading: var(--burgundy);
  --text-body: var(--navy);
  --text-muted: #46508A;
  --accent: var(--copper);
  --accent-hover: var(--copper-dark);
  --focus-ring: var(--navy);

  /* ---- type ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.5vw, 3.6rem);
  --step-5: clamp(3rem, 2.2rem + 4vw, 4.8rem);

  /* ---- spacing scale (8px base) ---- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --space-9: 8rem;

  /* ---- layout ---- */
  --content-max: 1180px;
  --content-narrow: 760px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 4px 24px rgba(72, 12, 5, 0.08);
  --shadow-lift: 0 12px 40px rgba(72, 12, 5, 0.14);

  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

img, picture, svg { max-width: 100%; display: block; }

img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* No dark backgrounds anywhere in the site, ever — enforced structurally:
   every section background token above is a light tone from the given
   palette. This rule is a deliberate guard-rail, not decoration: if a
   future page adds a new section, it must pull its background from
   --bg-page / --bg-alt / --bg-panel, all of which are light by
   construction, rather than introducing an arbitrary color. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--step-5); font-weight: 500; }
h2 { font-size: var(--step-4); font-weight: 500; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { max-width: 68ch; }

p.lead {
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: 60ch;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}

/* ==========================================================================
   Focus states — visible everywhere, per accessibility quality floor
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow {
  max-width: var(--content-narrow);
}

.section {
  padding-block: var(--space-8);
}

.section--tight {
  padding-block: var(--space-6);
}

.section--alt {
  background: var(--bg-alt);
}

.section--panel {
  background: var(--bg-panel);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 999;
  background: var(--burgundy);
  color: var(--soft-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

/* ==========================================================================
   Signature motif: the chart wheel
   A restrained line-art device echoing a natal chart's rings/divisions —
   grounded in the actual subject rather than decorative. Used once as a
   hero accent and echoed small as a section-divider mark. Pure CSS/SVG,
   no image request, so it costs nothing on page weight.
   ========================================================================== */

.chart-wheel {
  --wheel-size: 420px;
  width: var(--wheel-size);
  height: var(--wheel-size);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.chart-wheel__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line-hairline);
}

.chart-wheel__ring--outer { inset: 0; border-color: var(--copper); opacity: 0.5; }
.chart-wheel__ring--mid { inset: 12%; }
.chart-wheel__ring--inner { inset: 30%; border-color: var(--burgundy); opacity: 0.35; }

.chart-wheel__divider {
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 100%;
  background: var(--line-hairline);
  transform-origin: center;
}

.chart-wheel__mark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--copper);
  top: 50%; left: 50%;
  margin: -3px;
}

.divider-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-hairline);
  position: relative;
  margin-inline: auto;
}

.divider-mark::before,
.divider-mark::after {
  content: "";
  position: absolute;
  background: var(--copper);
  opacity: 0.6;
}

.divider-mark::before {
  top: 50%; left: 15%; right: 15%; height: 1px;
}

.divider-mark::after {
  left: 50%; top: 15%; bottom: 15%; width: 1px;
}

/* ==========================================================================
   Utility
   ========================================================================== */

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0 !important; }

.u-max-narrow { max-width: var(--content-narrow); margin-inline: auto; }