/* Pierce the Shadow — Dawn design system (Session 96)
   Shared by index.html, diary.html and collective.html.
   Spectral + the site's purple/gold accents on a warm cream "dawn" ground
   (Artifacts/redesign_dawn_v1/NOTES.md). A deliberate single light look. */

:root {
  --ground: #FCF6EC;
  --ground-hero: linear-gradient(180deg, #F6E9F2 0%, #FBF1E6 15%, #FCF6EC 30%, #FCF6EC 100%);
  --panel: #F8ECE0;
  --panel-deep: #F3E6D8;
  --card: #FFFDF8;
  --line: #EFDCC8;
  --line-soft: #F4E7D8;
  --line-purple: #EEDCEA;

  --ink: #3A2148;
  --ink-soft: #5A4A68;
  --muted: #6A5878;
  --faint: #9A8AA8;
  --whisper: #B0A0C0;

  --purple: #7A4AAA;
  --purple-deep: #5A2A8A;
  --purple-bright: #8A5AB8;
  --purple-soft: #F3E6F5;
  --purple-tint: #F0DFF0;
  --gold: #A87A20;
  --gold-bright: #D8A840;
  --gold-soft: #FBF0DD;
  --gold-label: #B08830;

  --danger: #A8454A;
  --danger-soft: #F8E4E2;
  --ok: #5A8A48;

  /* element kinds */
  --k-symbol: #A87A20;    --k-symbol-soft: #FBF0DD;
  --k-situation: #7A4AAA; --k-situation-soft: #F3E6F5;
  --k-emotion: #5A8A48;   --k-emotion-soft: #E9F5E2;
  --k-person: #B85A8A;    --k-person-soft: #FBE8F2;
  --k-animal: #7C7A2C;    --k-animal-soft: #F2F1DC;
  --k-location: #4F7DA6;  --k-location-soft: #E6EEF6;
  --k-event: #2F7F86;     --k-event-soft: #E1F1F1;
  --k-tag: #7A6888;       --k-tag-soft: #EFEAF2;
  --k-archetype: #6A4A9A; --k-archetype-soft: #ECE3F5;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --shadow: 0 1px 2px rgba(90, 42, 138, 0.04), 0 14px 34px -22px rgba(90, 42, 138, 0.28);
  --shadow-lift: 0 30px 60px -30px rgba(90, 42, 138, 0.22);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--muted); font-family: var(--serif); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-deep); }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── Nav ── */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { max-width: 1320px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; gap: 28px; }
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-right: auto; }
.nav-brand span { font-size: 18px; font-weight: 500; letter-spacing: .2px; }
.nav-brand:hover { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.nav-links a { color: var(--muted); }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active { text-decoration: underline; text-decoration-color: var(--gold-bright); text-underline-offset: 6px; }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 100px; border: 0; background: linear-gradient(135deg, var(--purple-bright), var(--purple)); color: #FCF6EC !important; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: box-shadow .2s, transform .2s; text-decoration: none; }
.pill-btn:hover { box-shadow: 0 10px 22px -10px rgba(122, 74, 170, .6); transform: translateY(-1px); }
.pill-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.pill-btn.big { padding: 15px 34px; font-size: 16px; box-shadow: 0 12px 28px -10px rgba(122, 74, 170, .45); }
.ghost-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 100px; border: 1px solid #D8C4E0; background: transparent; color: var(--muted); font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s, background .2s; }
.ghost-btn:hover { border-color: #AA78D8; color: var(--ink); }
.ghost-btn:disabled { opacity: .5; cursor: default; }
/* The collective is hidden for now (owner decision, Session 97). To bring it back: delete this rule,
   set COLLECTIVE_VISIBLE = true in functions/_middleware.js and drop DISABLE_COLLECTIVE from wrangler.jsonc.
   The about and transparency pages no longer carry collective links at all (removed Session 98, owner request). */
[data-collective] { display: none !important; }
.ghost-btn.sm, .pill-btn.sm { padding: 6px 14px; font-size: 13.5px; }

/* ── Footer ── */
.site-footer { max-width: 720px; margin: 0 auto; padding: 28px 32px 64px; text-align: center; border-top: 1px solid var(--line-purple); }
.site-footer a { font-size: 13px; letter-spacing: .12em; color: #8A7898; text-transform: lowercase; margin: 0 12px; }
.site-footer a:hover { color: var(--purple-deep); }
.site-footer .sep { color: #D8C4E0; margin: 0 2px; }

.eyebrow { font-size: 12.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold-label); }

@media (max-width: 420px) { .nav-brand span { display: none; } }
@media (max-width: 760px) {
  .nav-in { padding: 14px 18px; gap: 14px; }
  .nav-brand span { font-size: 16px; white-space: nowrap; }
  .nav-brand { margin-right: auto; min-width: 0; }
  .nav-links { gap: 14px; font-size: 14px; }
  .nav-links .hide-sm { display: none; }
  .pill-btn { padding: 9px 16px; font-size: 13.5px; }
}