/* ============================================================
   Bunko · общая система токенов
   тёмная навигация / кремовый Reader / шалфейный акцент
   ============================================================ */

:root {
  /* ---------- палитра тёмной навигации ---------- */
  --ink-base:        #161B20;   /* самый тёмный — фоны слайдов под грид */
  --ink-1:           #1A2128;   /* основной фон */
  --ink-2:           #1F272D;   /* поверхности (карточки, панели) */
  --ink-3:           #25303A;   /* hover, активные */
  --ink-line:        #2B3640;   /* границы тёмные */
  --ink-line-soft:   #232C34;
  --ink-fg:          #E8E2D5;   /* основной текст по тёмному — тёплый белый */
  --ink-fg-2:        #B8B0A0;   /* второстепенный */
  --ink-fg-3:        #8A8474;   /* подписи / метаданные */
  --ink-fg-4:        #5E5849;

  /* ---------- кремовый пергамент (Reader, hero) ---------- */
  --paper-base:      #ECE4D0;   /* самая «толстая» бумага */
  --paper-1:         #F0E8D4;   /* основной фон Reader */
  --paper-2:         #F4ECD8;   /* поверхности — карточки на бумаге */
  --paper-3:         #E4DAC2;   /* hover / разделители-фоны */
  --paper-line:      #C9BC9E;   /* линии на бумаге */
  --paper-line-soft: #D9CEB3;
  --paper-fg:        #2A2520;   /* основной текст на бумаге */
  --paper-fg-2:      #4A4438;
  --paper-fg-3:      #76705F;
  --paper-fg-4:      #968F7C;

  /* ---------- акценты ---------- */
  --sage:            #8FAE7C;   /* основной акцент */
  --sage-2:          #7A9B6B;   /* активные/нажатые */
  --sage-3:          #A6C394;   /* подсветка по тёмному */
  --sage-dark:       #4E6A45;   /* тёмные индикаторы на бумаге */
  --sage-paper-fg:   #3D5535;   /* акцент-текст на бумаге */

  /* цвета типов материалов (приглушённо, для авто-обложек и бейджей) */
  --t-book:          #6B7A8E;   /* книга — холодный графит-синий */
  --t-article:       #8FAE7C;   /* статья — шалфейный */
  --t-lecture:       #B58A4A;   /* лекция — охра */
  --t-interview:     #A86B6B;   /* интервью — терракот приглушённый */
  --t-video:         #7C7AA0;   /* видео — пыльная лаванда */
  --t-note:          #C0A878;   /* заметка — кремовый/жёлтый */

  /* статусы */
  --s-want:          #7C7AA0;
  --s-reading:       #B58A4A;
  --s-done:          #8FAE7C;
  --s-working:       #A86B6B;

  /* ---------- типографика ----------
     Source Serif 4 стоит ПЕРВЫМ, а не Newsreader: Newsreader на Google Fonts
     не поддерживает кириллицу, и русские заголовки падали бы на системный Georgia.
     Source Serif 4 даёт ту же редакторскую NYT-эстетику + полная кириллица. */
  --serif:    'Source Serif 4', 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:     'Geist', 'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --jp:       'Noto Serif JP', 'Source Serif 4', serif;
  --jp-sans:  'Noto Sans JP', 'Geist', sans-serif;

  /* шкала размеров (мелкая, для интерфейса) */
  --t-10:  10px;
  --t-11:  11px;
  --t-12:  12px;
  --t-13:  13px;
  --t-14:  14px;
  --t-15:  15px;
  --t-16:  16px;
  --t-18:  18px;
  --t-20:  20px;
  --t-22:  22px;
  --t-26:  26px;
  --t-30:  30px;
  --t-36:  36px;
  --t-44:  44px;
  --t-56:  56px;
  --t-72:  72px;

  /* радиусы */
  --r-2:  2px;
  --r-4:  4px;
  --r-6:  6px;
  --r-8:  8px;
  --r-12: 12px;
  --r-16: 16px;

  /* тени (тонкие) */
  --sh-1: 0 1px 0 rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.04);
  --sh-2: 0 1px 0 rgba(0,0,0,.06), 0 6px 18px -8px rgba(0,0,0,.18);
  --sh-paper: 0 1px 0 rgba(80,60,30,.04), 0 6px 18px -10px rgba(80,60,30,.18);
  --sh-dark:  0 1px 0 rgba(0,0,0,.4), 0 14px 30px -16px rgba(0,0,0,.6);
}

/* ============================================================
   Базовые ресеты
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-fg);
  background: var(--ink-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--ink-line); margin: 0; }
::selection { background: var(--sage); color: var(--ink-1); }

/* ============================================================
   Meta-шапка (переключатель концептов)
   ============================================================ */
.meta-bar {
  position: sticky; top: 0; z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: rgba(20, 25, 30, .82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--ink-line-soft);
  color: var(--ink-fg);
  font-family: var(--sans);
}
.meta-bar .brand-block { display: flex; align-items: baseline; gap: 12px; }
.meta-bar .brand-kanji {
  font-family: var(--jp);
  font-size: 22px;
  font-weight: 500;
  color: var(--sage);
  letter-spacing: -.02em;
  line-height: 1;
}
.meta-bar .brand-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: .01em;
}
.meta-bar .brand-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-fg-3);
  padding-left: 10px;
  border-left: 1px solid var(--ink-line);
  margin-left: 4px;
  align-self: center;
  line-height: 1.4;
}
.meta-bar .concept-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--ink-2);
  padding: 4px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
}
.concept-tabs button {
  padding: 7px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--ink-fg-2);
  border-radius: 999px;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.concept-tabs button:hover { color: var(--ink-fg); }
.concept-tabs button[aria-selected="true"] {
  background: var(--sage);
  color: #14191D;
}
.concept-tabs .tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  opacity: .8;
}
.meta-bar .screen-tabs {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}
.screen-tabs button {
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-fg-3);
  border-radius: var(--r-4);
  border: 1px solid transparent;
}
.screen-tabs button:hover { color: var(--ink-fg); }
.screen-tabs button[aria-selected="true"] {
  color: var(--sage);
  border-color: var(--ink-line);
  background: var(--ink-2);
}

/* ============================================================
   Системные подписи / общие утилиты
   ============================================================ */
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.cap   { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }

/* «листы концептов» */
[data-canvas] { display: none; }
[data-canvas].is-active { display: block; }

/* Концепт-бриф (текстовый слайд) */
.brief-canvas {
  max-width: 980px;
  margin: 0 auto;
  padding: 80px 48px 120px;
  color: var(--ink-fg);
}
.brief-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 14px;
}
.brief-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0 0 8px;
}
.brief-title em { font-style: italic; color: var(--sage); }
.brief-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-fg-2);
  font-weight: 300;
  margin-bottom: 48px;
  max-width: 700px;
  line-height: 1.35;
}
.brief-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px 36px;
  align-items: baseline;
  border-top: 1px solid var(--ink-line);
  padding-top: 28px;
}
.brief-row { display: contents; }
.brief-row + .brief-row::before { display: none; }
.brief-grid .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage);
  padding-top: 4px;
}
.brief-grid .v {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-fg);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink-line-soft);
}
.brief-grid .v b { font-weight: 500; color: var(--sage-3); }
.brief-grid .v em { color: var(--ink-fg-2); }

.brief-jump {
  margin-top: 48px;
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brief-jump button {
  padding: 10px 18px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  color: var(--ink-fg-2);
  transition: border-color .15s, color .15s, background .15s;
}
.brief-jump button:hover {
  color: var(--sage);
  border-color: var(--sage);
  background: rgba(143,174,124,.06);
}