:root{
  /* Палитра из картинки: тёплый бежевый фон, оранжевые акценты, оливково-зелёные оттенки */
  --bg: #f3e6d2;         /* тёплый бежевый */
  --card:#fff6ea;       /* светлый кремовый для карточек/подложек */
  --muted:#6b705c;      /* приглушённый оливковый текст */
  --text:#2f3329;       /* тёмный оливково-серый основной текст */
  --accent:#ea5a2a;     /* оранжевый заголовков/бейджа СЕЙЧАС */
  --accent-2:#a4c28f;   /* мягкий зелёный для ДАЛЕЕ/украшений */
  --ring: rgba(234, 90, 42, .28); /* подсветка в оранжевых тонах */
}
html,body{
  margin:0; background: var(--bg);
  color:var(--text); font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}
.wrap{max-width:960px; margin:40px auto; padding:0 20px 80px}
header{ position:sticky; top:0; backdrop-filter: blur(6px); background:linear-gradient( to bottom, rgba(243,230,210,.95), rgba(243,230,210,.6) ); border-bottom:1px solid rgba(47,51,41,.08); z-index:10; }
.hero{ display:flex; align-items:center; gap:14px; padding:16px 20px; }
.dot{width:10px; height:10px; border-radius:999px; background:radial-gradient(circle at 30% 30%, var(--accent) 0 40%, var(--accent-2) 60% 100%); box-shadow:0 0 0 6px var(--ring)}
h1{ margin:0; font-weight:800; letter-spacing:.2px; }
h1 span{ opacity:.85; font-weight:600; font-size:16px; color:var(--muted); display:block }

.list{ display:grid; gap:12px; margin-top:20px }
.talk{ list-style:none; padding:16px 16px; background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.4));
       border:1px solid rgba(47,51,41,.12); border-radius:16px; box-shadow: 0 8px 24px rgba(0,0,0,.06);
       display:grid; grid-template-columns: 112px 1fr; align-items:center; transition: transform .12s ease, border-color .12s ease }
.talk:hover{ transform: translateY(-1px); border-color: var(--accent) }
.time{ font-variant-numeric: tabular-nums; font-weight:700; letter-spacing:.3px; color:var(--text) }
.meta{ display:flex; gap:6px; align-items:center; color:var(--muted); font-size:13px }
.title{ margin:4px 0 0; font-weight:700; font-size:18px }
.badge{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); }

.legend{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.06)}
.legend .badge--now{ border-color: transparent; background: var(--accent); color:#fff; font-weight:800 }
.legend .badge--next{ border-color: rgba(164,194,143,.9); color:#2f3329; background: rgba(164,194,143,.32) }

/* states */
.talk.now{ outline: 2px solid rgba(234,90,42,.45); outline-offset: 2px; }
.talk.next{ border-color: rgba(164,194,143,.9) }
.talk.past{ opacity:.6; filter: grayscale(.05) }
.talk.past .time{ text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255,255,255,.35) }

/* print */
@media print{
  header{ position:static; backdrop-filter:none; background:transparent; border:none }
  .talk{ break-inside: avoid; box-shadow:none; background:white; border-color:#ddd; color:#111 }
  body{ background:white; color:#111 }
}