/* psyconnect — warm organic skin over londo's bones.
   Loaded after styles.css, so plain re-declarations win. Cream and
   parchment ground, terracotta and ochre accents, sage for the small
   voices; soft round corners. This file is the visual-iteration
   sandbox — everything psyconnect-looking belongs here. */

:root {
  --dusk-0: #f6efe4; /* cream */
  --dusk-1: #f0e5d3; /* parchment */
  --dusk-2: #e8d9c2; /* warm sand */
  --mauve: #7d8a6a;  /* sage — labels, legends, small voices */
  --peach: #b85a33;  /* terracotta */
  --gold: #b07d24;   /* ochre */
  --ink: #3a2b20;    /* dark umber */
  --ink-dim: #8a7360;
  --card: rgba(122, 90, 60, 0.07);
  --card-edge: rgba(184, 90, 51, 0.22);
  --key-face: #efe2cb;
  --key-side: #d3bd9c;
  --key-lit: #f9f1e2;
  --radius: 24px;
}

body {
  background: linear-gradient(175deg, #faf4e8 0%, var(--dusk-0) 38%, var(--dusk-1) 72%, #e5d3b8 100%);
}

/* cross-stitch wordmark instead of the gradient-text h1 */
.topbar h1 img {
  display: block;
  height: clamp(2.2rem, 4.5vw, 3rem);
  width: auto;
  max-width: 100%;
}

/* repeating pattern in the fixed backdrop; the body's time-of-day
   gradient tints through the transparency */
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("bg.jpg") repeat;
  background-size: 512px 512px;
  opacity: 0.4;
}

/* softer daylight in the sky */
.blob { opacity: 0.4; }
.blob-a { background: radial-gradient(circle, rgba(184, 90, 51, 0.28), transparent 65%); }
.blob-b { background: radial-gradient(circle, rgba(176, 125, 36, 0.25), transparent 65%); }
.grain { opacity: 0.035; }

/* keys sit on a light bench: warm edges, no white glow */
.key {
  border: 1px solid rgba(90, 62, 40, 0.18);
  border-radius: 12px;
}

/* the instrument bench: no box at all — controls sit straight on the
   page pattern. Without a background the sticky bar would float
   transparently over scrolling cards, so it scrolls away instead. */
.controls {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: static;
}

#search {
  background: #fff;
  color: var(--ink);
}

/* flat bench: no keycap/well shadows anywhere in the controls box
   (!important outguns styles.css's .key:active/.lit variants) */
.controls,
.controls * {
  box-shadow: none !important;
}

.slider { background: rgba(122, 90, 60, 0.25); }
.slider::before {
  background: linear-gradient(180deg, #fdf6e9, var(--key-face));
  border: 1px solid rgba(90, 62, 40, 0.25);
}
.switch input:checked + .slider { background: rgba(176, 125, 36, 0.35); }

.ticker-shell {
  background:
    repeating-linear-gradient(90deg, rgba(90, 62, 40, 0.06) 0 1px, transparent 1px 9px),
    rgba(255, 252, 245, 0.6);
}
.tick { border-right: 1px solid rgba(90, 62, 40, 0.1); }

.dial-face {
  fill: rgba(255, 252, 245, 0.6);
  stroke: var(--card-edge);
}
.zone {
  fill: rgba(122, 90, 60, 0.08);
  stroke: rgba(90, 62, 40, 0.18);
}

.token {
  background: rgba(122, 90, 60, 0.08);
  border: 1px solid rgba(90, 62, 40, 0.2);
}
.token.lit {
  color: #8f6415;
  border-color: rgba(176, 125, 36, 0.6);
  background: rgba(176, 125, 36, 0.12);
}

/* mobile sticky day header: parchment, not londo's dark plum */
@media (max-width: 640px) {
  .day-heading { background: rgba(246, 239, 228, 0.92); }
}

/* ---------- featured: our own next event ---------- */

#featured {
  max-width: 1100px;
  margin: 0.4rem auto 0;
  padding: 0 1.5rem;
}

.featured-card {
  display: flex;
  gap: 1.2rem;
  align-items: stretch;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255, 252, 245, 0.75);
  border: 1.5px solid var(--peach);
  border-radius: var(--radius);
  overflow: hidden;
}

.featured-media {
  flex: 0 0 240px;
}

.featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-body {
  flex: 1;
  min-width: 0;
  padding: 1.1rem 1.4rem 1.2rem;
}

.featured-eyebrow {
  margin: 0 0 0.3rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach);
}

.featured-body h2 {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-weight: 560;
  font-size: 1.45rem;
  line-height: 1.2;
}

.featured-when {
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--gold);
}

.featured-blurb {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.45;
}

.featured-cta {
  display: inline-block;
  background: var(--peach);
  color: #fdf6e9;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.3rem;
}

/* mobile: compact hero so the list below stays in the first view */
@media (max-width: 640px) {
  .featured-card { flex-direction: column; gap: 0; }
  .featured-media { flex: none; height: 140px; }
  .featured-body { padding: 0.9rem 1.1rem 1.1rem; }
  .featured-body h2 { font-size: 1.2rem; }
  .featured-blurb { display: none; }
}

/* re-lit time-of-day: same mechanism, daytime-friendly warm light */
body.theme-dawn {
  background: linear-gradient(175deg, #fbeedd 0%, #f7e6cd 40%, #f2d9b8 75%, #eccfa8 100%);
}
body.theme-dawn .blob-a { background: radial-gradient(circle, rgba(200, 108, 62, 0.32), transparent 65%); }
body.theme-dawn .blob-b { background: radial-gradient(circle, rgba(196, 148, 60, 0.28), transparent 65%); }

body.theme-day {
  background: linear-gradient(175deg, #fcf7ec 0%, #f6efe4 45%, #efe3cd 78%, #e8d7ba 100%);
}

body.theme-dusk {
  background: linear-gradient(175deg, #f8ecd6 0%, #f2dfc0 45%, #e9cda2 78%, #ddba8c 100%);
}

body.theme-night {
  background: linear-gradient(175deg, #f0e2ca 0%, #e7d4b4 45%, #d9c09b 80%, #ccb089 100%);
}
body.theme-night .blob { opacity: 0.3; }

/* no category badges on cards — the whole site is one theme */
.badge-cat { display: none; }

/* lit category keys were pastel-on-dark; deepen for cream (kept for
   safety although the pills stay hidden here) */
.key-move.lit    { color: #9c4526; }
.key-connect.lit { color: #8f6415; }
.key-expand.lit  { color: #7a4c2c; }
.key-think.lit   { color: #5a684a; }
.key-make.lit    { color: #8c4258; }