/* =====================================================================
   Lighthouse — design system of the portfolio
   Night-blue canvas, cobalt light, one contrasting red signal.
   Palette taken from Anton's own poster series (night sky, cobalt water,
   teal-green waves, a red lighthouse / figure, warm sun glow).
   Living reference: design-system.html
   ===================================================================== */

:root {
  /* ---- color: night neutrals (blue-tinted black → white) ---- */
  --ink-0: #050a18;   /* page */
  --ink-1: #0a1226;   /* raised surface */
  --ink-2: #0e1830;   /* card */
  --ink-3: #142140;   /* input / inset */
  --ink-4: #1e2d52;   /* hairline */
  --ink-5: #2c3f6c;   /* hairline hover */
  --gray-400: #8592ae;
  --gray-300: #a9b4cc; /* secondary text */
  --gray-100: #e4e9f4;
  --white: #ffffff;
  --sun: #fff1d0;      /* warm glow, highlights only */

  /* ---- color: Signal Red — the contrasting accent ---- */
  --red-50: #fff0ee;
  --red-100: #ffd9d4;
  --red-200: #ffb0a6;
  --red-300: #ff8476;
  --red-400: #ff5745;
  --red-500: #ec2f1f;  /* brand accent */
  --red-600: #c4210f;
  --red-700: #961a0c;
  --red-800: #63120a;
  --red-900: #3a0b06;
  --red-950: #1f0603;

  /* ---- color: Cobalt Blue — light and atmosphere ---- */
  --blue-50: #eef4ff;
  --blue-100: #d6e4ff;
  --blue-200: #adc8ff;
  --blue-300: #7aa5ff;
  --blue-400: #4a82f5;
  --blue-500: #2563e0;
  --blue-600: #1a4bb8;
  --blue-700: #163a8c;
  --blue-800: #12296a;
  --blue-900: #0c1a45;
  --blue-950: #070f2a;

  /* ---- color: Wave Teal — rare third voice ---- */
  --teal-300: #5fe0c0;
  --teal-400: #2fc4a0;
  --teal-500: #16a085;
  --teal-600: #0f7d68;

  /* ---- semantic ---- */
  --bg: var(--ink-0);
  --surface: var(--ink-1);
  --card: var(--ink-2);
  --card-2: var(--ink-3);
  --line: var(--ink-4);
  --line-strong: var(--ink-5);
  --text: var(--white);
  --muted: var(--gray-300);
  --accent: var(--red-500);
  --accent-soft: rgba(236, 47, 31, .12);
  --accent-glow: rgba(236, 47, 31, .3);
  --hl: var(--blue-300);           /* highlighted text: org names, hovers */
  --on-accent: var(--white);
  --success: var(--teal-400);
  --danger: #ff8a7a;
  /* channels for rgba(): cobalt light for card glows, red for the signal */
  --glow-rgb: 37, 99, 224;
  --glow-2-rgb: 122, 165, 255;
  --accent-rgb: 236, 47, 31;

  /* ---- gradients ---- */
  --grad-fill: linear-gradient(90deg, var(--red-600) 0%, var(--red-500) 50%, var(--red-400) 100%);
  --grad-stroke: linear-gradient(100deg, var(--blue-700) 0%, var(--blue-400) 35%, var(--teal-300) 65%, var(--blue-500) 100%);
  --grad-text: linear-gradient(180deg, var(--white) 0%, var(--blue-200) 55%, var(--blue-400) 100%);
  --grad-wordmark: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-800) 55%, rgba(12, 26, 69, 0) 100%);
  --grad-sky: linear-gradient(180deg, var(--ink-0) 0%, var(--blue-950) 45%, var(--blue-800) 100%);

  /* ---- shadows / glow ---- */
  --glow-sm: 0 5px 10.4px var(--accent-glow);
  --glow-lg: 0 0 30.8px var(--accent-glow);
  --glow-blue: 0 5px 12px rgba(var(--glow-rgb), .3), 0 0 30px rgba(var(--glow-rgb), .25);
  --inset-shade: inset 4px 5px 12.5px rgba(0, 0, 0, .25);
  --shadow-btn: var(--glow-sm), var(--glow-lg), var(--inset-shade);

  /* ---- type ---- */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: var(--font);
  --serif: var(--font);   /* legacy alias */
  --track-tight: -.04em;
  --track-snug: -.02em;
  --track-caps: .16em;

  --fs-display: clamp(40px, 7.2vw, 92px);
  --fs-h2: clamp(32px, 4.6vw, 56px);
  --fs-h3: 24px;
  --fs-lead: clamp(16px, 1.5vw, 18px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---- shape & space ---- */
  --radius-sm: 10px;
  --radius: 20px;
  --radius-lg: 28px;
  --pill: 999px;
  --pad-btn: 16px 24px;
  --stroke: 1.5px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1200px;

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* legacy aliases (admin.html still reads these) */
  --gold: var(--accent);
  --gold-soft: var(--accent-soft);

  color-scheme: dark;
}

/* =========================== base =========================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-body)/1.6 var(--font);
  letter-spacing: -.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; } /* sections with their own display (e.g. the hero's flex) must still hide */
::selection { background: var(--blue-500); color: var(--white); }
:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }

/* ======================== typography ======================== */
.t-display {
  margin: 0;
  font: var(--fw-medium) var(--fs-display)/1.02 var(--font);
  letter-spacing: var(--track-tight);
}
.t-h2 {
  margin: 0;
  font: var(--fw-medium) var(--fs-h2)/1.08 var(--font);
  letter-spacing: var(--track-tight);
}
.t-lead { color: var(--muted); font-size: var(--fs-lead); font-weight: var(--fw-light); }
.eyebrow {
  margin: 0;
  font: var(--fw-medium) var(--fs-xs)/1 var(--font);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--red-400);
}
.t-grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.t-accent { color: var(--accent); }

/* ========================= buttons ========================== */
/* Primary: red signal pill. Secondary: night pill with a cobalt→teal stroke. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--fw-medium) var(--fs-sm)/1 var(--font); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  color: var(--on-accent);
  background: var(--grad-fill);
  border: 0; border-radius: var(--pill);
  padding: var(--pad-btn);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 16px rgba(var(--accent-rgb), .42), 0 0 40px rgba(var(--accent-rgb), .32), var(--inset-shade); }
.btn:active { transform: translateY(0); }

.btn.ghost, .btn.secondary {
  color: var(--text);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--grad-stroke) border-box;
  border: var(--stroke) solid transparent;
  padding: calc(16px - var(--stroke)) calc(24px - var(--stroke));
  box-shadow: var(--glow-blue);
}
.btn.ghost:hover, .btn.secondary:hover { filter: none; box-shadow: 0 6px 16px rgba(var(--glow-rgb), .4), 0 0 40px rgba(var(--glow-rgb), .35); }

.btn.quiet {
  color: var(--muted); background: transparent; box-shadow: none;
  border: 1px solid var(--line); padding: 15px 23px;
}
.btn.quiet:hover { color: var(--text); border-color: var(--line-strong); filter: none; transform: none; }

.btn.small { padding: 10px 16px; font-size: 13px; }
.btn.ghost.small, .btn.secondary.small { padding: calc(10px - var(--stroke)) calc(16px - var(--stroke)); }

/* ========================== chips =========================== */
.chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--fw-regular) var(--fs-sm)/1 var(--font);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line); border-radius: var(--pill);
  padding: 11px 18px; cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip[aria-selected="true"], .chip.on {
  color: var(--text);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--grad-stroke) border-box;
  border: var(--stroke) solid transparent;
  padding: calc(11px - .5px) calc(18px - .5px);
  box-shadow: var(--glow-blue);
}
.chip small { color: var(--red-400); font-size: 12px; }

/* ===================== badges & tags ====================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--fw-regular) 11px/1 var(--font); letter-spacing: .02em;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--pill); padding: 5px 10px;
}
.badge.live { color: var(--teal-300); border-color: rgba(47, 196, 160, .35); }
.badge.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal-400); box-shadow: 0 0 8px var(--teal-400);
}
.tag {
  font: var(--fw-regular) var(--fs-xs)/1 var(--font);
  color: var(--gray-100);
  background: rgba(122, 165, 255, .06);
  border: 1px solid rgba(122, 165, 255, .1);
  border-radius: var(--pill); padding: 6px 10px;
}

/* ========================== surfaces ========================== */
.surface {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* glow card: night body, cobalt light rising from the bottom, a red ember in the corner */
.surface-glow {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(90% 70% at 100% 100%, rgba(var(--accent-rgb), .45) 0%, rgba(var(--accent-rgb), .12) 30%, transparent 60%),
    radial-gradient(120% 90% at 30% 120%, rgba(var(--glow-rgb), .7) 0%, rgba(var(--glow-rgb), .2) 40%, transparent 70%),
    var(--card);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(var(--glow-2-rgb), .3), 0 0 40px -10px rgba(var(--glow-rgb), .4);
}

/* =========================== effects =========================== */
/* horizon: a clean glow rising from the bottom edge, like the light in the posters */
.aurora {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  /* fade out before the section edge so the glow never ends in a hard line */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.aurora::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(20% 16% at 50% 84%, rgba(255, 241, 208, .3), transparent 70%),
    radial-gradient(60% 60% at 50% 84%, rgba(var(--glow-rgb), .9) 0%, rgba(18, 41, 106, .6) 42%, transparent 76%),
    radial-gradient(35% 40% at 12% 90%, rgba(22, 160, 133, .2), transparent 70%),
    radial-gradient(35% 40% at 88% 90%, rgba(22, 160, 133, .14), transparent 70%);
  animation: horizon-breathe 12s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
@keyframes horizon-breathe {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(1.06); opacity: 1; }
}

/* beams: two light cones aimed at the centre, like a lighthouse sweep (CTA backdrop) */
/* blur sits on the parent: clip-path on the cones would otherwise cut the blur off */
.beams { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; filter: blur(24px); }
.beams::before, .beams::after {
  content: ""; position: absolute; top: 50%; width: 36%; height: 70%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--blue-200) 0%, var(--blue-500) 30%, rgba(37, 99, 224, 0) 100%);
  clip-path: polygon(0 0, 100% 47%, 100% 53%, 0 100%);
  opacity: .8;
}
.beams::before { left: 0; }
.beams::after { right: 0; transform: translateY(-50%) scaleX(-1); }

/* giant cut-off wordmark (footer) */
.wordmark {
  display: block; margin: 0; text-align: center; user-select: none;
  font: var(--fw-regular) clamp(96px, 24vw, 340px)/.8 var(--font);
  letter-spacing: var(--track-tight);
  background: var(--grad-wordmark);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

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