/* ═══════════════════════════════════════════════════════════════════
   The Neighborhood — design tokens. The locked system, 2026-08-17.
   Fonts: Capri Serif (display) · Barnaby (body) · Capri Sans (labels)
          · Avanti Script (script) — all licensed, served from /fonts.
   Day: linen paper, Rachel's navy ink, the trio gradient
        (Mal's teal → Sin's blue → Fable's amber) as light.
   Night: the milky way palette; member colors glow.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'CapriSerif'; src: url('fonts/CapriSerif-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'CapriSans';  src: url('fonts/CapriSans-Regular.otf')  format('opentype'); font-display: swap; }
@font-face { font-family: 'Barnaby';    src: url('fonts/Barnaby-Regular.otf')    format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barnaby';    src: url('fonts/Barnaby-SemiBold.otf')   format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Avanti';     src: url('fonts/Avanti/WOFF2/AvantiScript-Bold.woff2') format('woff2'),
                                             url('fonts/Avanti/OTF/AvantiScript-Bold.otf') format('opentype'); font-display: swap; }

:root {
  --display: 'CapriSerif', serif;
  --body: 'Barnaby', serif;
  --script: 'Avanti', cursive;
  --labelfont: 'CapriSans', sans-serif;

  /* ── DAY ── */
  --paper: #f1e9d6;
  --head: #171F55;                /* Rachel's navy — the page's voice */
  --ink: #28302c;
  --dim: #7d7156;
  --line: #d6cbab;
  --accent: #c0863a;
  --tape: #e9dcc0cc;
  --photo1: #b7b1a1; --photo2: #928c7d;
  --card: #f7f1e2;
  --newpill: #c0863a; --newpilltext: #f1e9d6;
  --dot: #00000006;
  --nebula: transparent;
  /* the trio: Mal's teal → Sin's blue → Fable's amber */
  --trio-a: #123c36; --trio-b: #5f74a8; --trio-c: #b07c2e;
  --mastgrad: linear-gradient(105deg,
      color-mix(in srgb, var(--trio-a) 15%, #f0e7d2) 0%,
      color-mix(in srgb, var(--trio-b) 13%, #f1e9d6) 46%,
      color-mix(in srgb, var(--trio-c) 17%, #efe5cd) 100%);
  --h2grad: linear-gradient(100deg, #123c36 0%, #2e4560 22%, #5f74a8 45%, #9c805c 66%, #b07c2e 90%);
  /* member-color rendering: day tempers loud hexes toward ink so neon reads on linen */
  --member-mix: 62%;              /* % of the member's own hex kept in day */
  --member-base: #28302c;         /* what it's mixed toward */
  --glow-alpha: 0%;               /* no halo by day */
}

[data-mode="night"] {
  /* ── NIGHT — the milky way ── */
  --paper: #0f0e25;
  --head: #cfc2e0;
  --ink: #d8d2e2;
  --dim: #8d81a4;
  --line: #332c50;
  --accent: #d9a35c;
  --tape: #cfc2e026;
  --photo1: #3a3450; --photo2: #221d3a;
  --card: #16142e;
  --newpill: #d9a35c; --newpilltext: #0f0e25;
  --dot: #ffffff09;
  --nebula: radial-gradient(1100px 620px at 74% -6%, #2a234255 0%, transparent 62%);
  --mastgrad: linear-gradient(115deg, #44353d 0%, #584152 30%, #52456b 62%, #0f0e25 100%);
  --h2grad: linear-gradient(95deg, #cfc2e0 0%, #93a4d6 60%, #d9a35c 120%);
  /* night: full-voltage member color + halo (the porch-light law) */
  --member-mix: 100%;
  --member-base: #d8d2e2;
  --glow-alpha: 50%;
}

/* ── primitives every page shares ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background-color: var(--paper); color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  background-image: var(--nebula), radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: auto, 4px 4px;
  transition: background-color .7s ease, color .7s ease;
}
.label { font-family: var(--labelfont); font-weight: 400; font-size: 12px; letter-spacing: .12em; }
.script { font-family: var(--script); }
.display { font-family: var(--display); }

/* member color: set --mc on the element (their stored hex); the theme decides
   how it renders. Day deepens neon to legibility; night is full voltage + glow.
   The stored hex is always their true chosen color — the page adjusts its eyes. */
.member { color: color-mix(in srgb, var(--mc, var(--ink)) var(--member-mix), var(--member-base)); }
.member-glow { text-shadow: 0 0 18px color-mix(in srgb, var(--mc, transparent) var(--glow-alpha), transparent); }
.lamp {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  background: color-mix(in srgb, var(--mc) var(--member-mix), var(--member-base));
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--mc) var(--glow-alpha), transparent);
}

.mast {
  padding: 40px 40px 18px; display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1.5px solid var(--head); background: var(--mastgrad); transition: background .7s ease;
}
.mast h1 { font-family: var(--display); font-size: 42px; color: var(--head); letter-spacing: -.01em; line-height: .9; }

.day-h { display: flex; align-items: baseline; gap: 14px; margin: 44px 0 8px; }
.day-h h2 {
  font-family: var(--display); font-style: italic; font-size: 30px;
  padding-right: .25em; /* italic overhang breathing room — gradient-clip crops the final letter without it */
  background: var(--h2grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.new-pill {
  font-family: var(--labelfont); font-size: 12px; letter-spacing: .1em;
  color: var(--newpilltext); background: var(--newpill); border-radius: 20px; padding: 3px 10px;
}
.divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 40px 0; }
.divider .l { width: 38px; height: 1px; background: var(--line); }
.divider .o { font-family: var(--display); color: var(--head); font-size: 13px; opacity: .6; }
.tape-strip {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 74px; height: 20px; background: var(--tape);
}