/* Пространство развития в какао: главная /space/ и 7 страниц направлений /space/<slug>/.
   Общие классы; цвета и размеры — из макета v3c (design_handoff_space_cocoa). */
html, body { background: #f4e7e1; }
body { color: #1f120d; }
a { color: #4a2c22; }
a:hover { color: #765a4f; }
html.snap { scroll-snap-type: y proximity; }
@media (hover: none) { html, html.snap { scroll-snap-type: none; } }
@keyframes hintBob { 0%, 100% { transform: translateY(0); opacity: 0.75; } 50% { transform: translateY(7px); opacity: 1; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hint, [style*="marquee"] { animation: none !important; }
  .sbar { transition: none; }
}

/* верхняя полоса главной: исчезает после первого экрана */
.sbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; opacity: 1; transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease; pointer-events: auto; }
.sbar.gone { opacity: 0; transform: translateY(-10px); pointer-events: none; }

/* подсказка «листайте» */
.hint { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: hintBob 2s ease-in-out infinite; }
.hint-t { font-family: 'Courier New', Courier, monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #765a4f; }
.hint-l { width: 1px; height: 42px; background: rgba(74, 44, 34, 0.4); }

/* табло направлений: десктоп ≥680 — таблица, телефон — компактное табло */
.board-ph { display: none; }
@media (max-width: 679px) { .board-ph { display: block; } .board-wide { display: none; } }
.board-row { transition: background .2s ease; }
.board-row:hover { background: rgba(239, 195, 186, 0.08); color: #fcf0ee; }

/* направление: строка афиши */
.ev-row { cursor: pointer; transition: background .2s ease; }
.ev-row:hover { background: rgba(74, 44, 34, 0.05); }
.ev-row:focus-visible { outline: 2px solid #4a2c22; outline-offset: 2px; }
.ev-row a:hover { color: #765a4f; }
@media (max-width: 679px) {
  .ev-row { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: 'date cta' 'main main' !important; gap: 10px 16px !important; }
}
.btn-ghost:hover { color: #765a4f; border-color: #765a4f; }
.pill:hover { background: #2f1810; color: #fcf0ee; }

/* отзывы на странице направления */
.rev-row { margin: 0 calc(-1 * clamp(20px, 3vw, 40px)); padding: 30px clamp(20px, 3vw, 40px) 26px; display: flex; gap: 20px; align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 clamp(20px, 3vw, 40px); scrollbar-width: thin; scrollbar-color: rgba(239, 195, 186, 0.4) transparent; }
.rev-card { flex: 0 0 300px; scroll-snap-align: start; box-sizing: border-box; position: relative; background: #faf4ee; color: #4a2c22; padding: 32px 22px 20px;
  box-shadow: 0 22px 34px -22px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 12px; }
.rev-tape { position: absolute; top: -10px; left: 50%; width: 80px; height: 20px; margin-left: -40px; }
@media (max-width: 679px) {
  .rev-row { display: flex; flex-direction: column; align-items: stretch; overflow: visible; gap: 20px; padding-top: 26px; }
  .rev-card { flex: none; padding: 30px 20px 18px; }
}