Editorial / NYT-style redesign

- Cream paper bg (#f5efe1), warm black text, deep-red accent
- Playfair Display headlines + Lora italic body (serif throughout)
- Flat cards: no border-radius, no shadows, thin dividers
- Section labels: small-caps Inter with underline
- Magazine-style nav header, flat black CTAs
- Slide counter "— 1 / N —" pinned bottom-right
- Hover: border color only, no lift

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

index.html

@@ -6,7 +6,7 @@
   <title>Vibe Coding Воркшоп — Казахтелеком</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Lora:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
   <script>
     // Apply theme ASAP to avoid flash of wrong theme. Runs before <body> parses.
     (function() {
@@ -144,6 +144,241 @@ section.section,
 /* Прячем sticky-нав в slide-режиме — мешает фиксации экранов */
 nav { position: static !important; scroll-snap-align: none; }
 
+/* ──────────────────────────────────────────────────────────
+   EDITORIAL / NYT REDESIGN — кремовый фон, serif, флэт
+   ────────────────────────────────────────────────────────── */
+:root {
+  --page-bg: #f5efe1;        /* кремовая бумага */
+  --bg: #f5efe1;
+  --surface: #fbf7ec;
+  --card-neutral: #ece4d2;
+  --text: #1a1410;            /* почти чёрный с тёплым оттенком */
+  --text-65: rgba(26,20,16,0.72);
+  --text-55: rgba(26,20,16,0.58);
+  --text-45: rgba(26,20,16,0.42);
+  --border: rgba(26,20,16,0.15);
+  --border-strong: rgba(26,20,16,0.28);
+  --hover: rgba(26,20,16,0.05);
+  --blue: #a8201a;            /* журнальный красный вместо синего */
+  --blue-hover: #7e1813;
+  --blue-link: #a8201a;
+}
+[data-theme="dark"] {
+  --page-bg: #1a1714;
+  --bg: #1a1714;
+  --surface: #221d18;
+  --card-neutral: #2b251f;
+  --text: #f1e9d6;
+  --text-65: rgba(241,233,214,0.72);
+  --text-55: rgba(241,233,214,0.55);
+  --text-45: rgba(241,233,214,0.40);
+  --border: rgba(241,233,214,0.14);
+  --border-strong: rgba(241,233,214,0.28);
+  --hover: rgba(241,233,214,0.06);
+  --blue: #e07a72;
+  --blue-hover: #f1968e;
+  --blue-link: #e07a72;
+}
+
+body {
+  font-family: 'Lora', Georgia, serif !important;
+  background: var(--page-bg);
+  padding: 0;
+}
+
+.frame { gap: 0; min-height: 100dvh; }
+
+/* Шрифты заголовков */
+.hero-title, .section-title, .dark-title,
+.eq-box-title, .plan-step-title, .tool-name,
+.create-card-title, .project-title, .gloss-term,
+.prompt-title, .check-title, .modal-title,
+.tg-text-title, .card-title, .ba-label {
+  font-family: 'Playfair Display', Georgia, serif !important;
+  font-weight: 400 !important;
+  letter-spacing: -0.01em !important;
+}
+
+/* HERO — журнальная обложка */
+.hero {
+  background-image: none;
+  mask-image: none;
+  -webkit-mask-image: none;
+  text-align: center;
+  border-bottom: 1px solid var(--border);
+}
+.hero-title {
+  font-weight: 900 !important;
+  letter-spacing: -0.04em !important;
+  line-height: 0.95 !important;
+}
+.hero-title em, .section-title em {
+  font-style: italic !important;
+  text-decoration: none !important;
+  color: var(--blue);
+  font-weight: 400 !important;
+}
+.underline-blue {
+  text-decoration: none !important;
+  font-style: italic;
+  color: var(--blue);
+}
+
+/* Section label = SMALL CAPS */
+.section-label {
+  font-family: 'Inter', sans-serif !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.18em !important;
+  font-weight: 500 !important;
+  color: var(--text-45) !important;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 8px;
+  margin-bottom: 24px;
+  display: inline-block;
+}
+
+/* Section разделители = тонкие линии, не блоки */
+.section {
+  border-top: 1px solid var(--border) !important;
+  background: var(--page-bg);
+}
+
+/* Карточки — флэт, без скруглений и теней */
+.card, .tool-card, .create-card, .plan-step, .gloss-item,
+.project-card, .prompt-card, .eq-box, .check-card, .ba-card,
+main, nav {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  border: 1px solid var(--border) !important;
+}
+.create-card, .card { background: var(--card-neutral) !important; }
+.eq-box.you { background: rgba(168,32,26,0.08) !important; border-color: var(--blue) !important; }
+.eq-box.result { background: var(--surface) !important; }
+
+/* CTA — журнальная кнопка с подчёркиванием */
+.nav-cta, .btn-primary, .tg-cta, .dark-cta, .modal-submit {
+  border-radius: 0 !important;
+  background: var(--text) !important;
+  color: var(--page-bg) !important;
+  font-family: 'Inter', sans-serif !important;
+  font-weight: 500 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.1em !important;
+  font-size: 0.85rem !important;
+}
+.nav-cta:hover, .btn-primary:hover, .tg-cta:hover, .modal-submit:hover {
+  background: var(--blue) !important;
+}
+
+/* Body-текст — serif */
+.section-body, .hero-sub, .card-desc, .tool-role, .project-pain,
+.plan-step-desc, .create-card-desc, .gloss-text, .check-list li,
+.dark-sub, .modal-sub, .ba-row, .tg-text-body, .eq-box-desc, .prompt-context {
+  font-family: 'Lora', Georgia, serif !important;
+  font-style: italic;
+}
+
+/* Nav — журнальный header */
+nav {
+  border: none !important;
+  border-bottom: 2px solid var(--text) !important;
+  background: var(--page-bg) !important;
+  border-radius: 0 !important;
+  margin: 0 !important;
+  max-width: 100% !important;
+}
+.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
+.logo-text {
+  font-family: 'Playfair Display', serif;
+  font-style: italic;
+  font-size: 1.2rem;
+}
+.logo-mark {
+  background: var(--blue) !important;
+  border-radius: 0 !important;
+  font-family: 'Inter', sans-serif;
+}
+.nav-link {
+  font-family: 'Inter', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem !important;
+}
+
+/* Drop-cap первое слово в hero (как в журналах) */
+.hero-inner .badge {
+  font-family: 'Inter', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  border-top: 1px solid var(--text);
+  border-bottom: 1px solid var(--text);
+  padding: 6px 14px !important;
+  display: inline-block;
+}
+
+/* Slide-counter — номер страницы внизу */
+.slide-counter {
+  position: fixed;
+  bottom: 18px;
+  right: 24px;
+  font-family: 'Playfair Display', serif;
+  font-style: italic;
+  font-size: 1rem;
+  color: var(--text-55);
+  z-index: 80;
+  pointer-events: none;
+}
+
+/* Project cards — карточки журнала */
+.project-num {
+  font-family: 'Playfair Display', serif !important;
+  font-style: italic;
+  font-size: 1.5rem !important;
+  color: var(--blue) !important;
+  letter-spacing: 0 !important;
+}
+.project-title { font-size: 1.5rem !important; line-height: 1.2 !important; }
+
+/* Глоссарий, инструменты — приподнимаем шрифт */
+.gloss-term { font-size: 1.3rem !important; }
+.tool-name { font-size: 1.2rem !important; }
+.plan-step-title { font-size: 1.2rem !important; }
+
+/* Убираем скругления QR-фрейма */
+.tg-qr, .tg-block, .dark-section { border-radius: 0 !important; }
+.dark-section {
+  background: var(--text) !important;
+  margin: 0 !important;
+  border-top: 1px solid var(--border);
+}
+.dark-title { color: var(--page-bg) !important; }
+.dark-sub { color: rgba(255,255,255,0.7) !important; }
+.dark-cta { background: var(--page-bg) !important; color: var(--text) !important; }
+
+/* Hover убираем подъём — для флэт-журнала не подходит */
+.tool-card:hover, .create-card:hover, .plan-step:hover,
+.gloss-item:hover, .prompt-card:hover, .eq-box:hover,
+.project-card:hover, .check-card:hover {
+  transform: none !important;
+  box-shadow: none !important;
+  border-color: var(--blue) !important;
+}
+
+/* Footer */
+footer {
+  background: var(--text);
+  color: var(--page-bg);
+  border: none !important;
+}
+.footer-copy, .footer-link {
+  color: rgba(255,255,255,0.7) !important;
+  font-family: 'Inter', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 0.7rem !important;
+}
+
 /* ── POLISH: shared hover transition for all card variants ── */
 .tool-card, .create-card, .plan-step, .gloss-item, .project-card, .prompt-card, .eq-box {
   transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
@@ -1571,6 +1806,7 @@ footer {
 </style>
 </head>
 <body>
+  <div class="slide-counter" id="slide-counter" aria-hidden="true">— 1 —</div>
   <aside class="vibe-announce" aria-label="Объявление">
     <div class="vibe-announce-title">Wi-Fi и пароль</div>
     <div>VIBECODING</div>
@@ -2824,6 +3060,27 @@ const SCHEDULE = [
       }, { rootMargin: '0px 0px -60px 0px', threshold: 0.05 });
       targets.forEach(el => io.observe(el));
     })();
+
+    // Slide counter — показывает текущий слайд / всего
+    (function() {
+      const counter = document.getElementById('slide-counter');
+      if (!counter) return;
+      const slides = Array.from(document.querySelectorAll('.hero, section.section, .dark-section'));
+      const total = slides.length;
+      const update = (idx) => {
+        counter.textContent = `— ${idx + 1} / ${total} —`;
+      };
+      update(0);
+      const io = new IntersectionObserver((entries) => {
+        entries.forEach(e => {
+          if (e.isIntersecting && e.intersectionRatio > 0.5) {
+            const idx = slides.indexOf(e.target);
+            if (idx >= 0) update(idx);
+          }
+        });
+      }, { threshold: [0.5, 0.6, 0.75] });
+      slides.forEach(s => io.observe(s));
+    })();
   </script>
 </body>
 </html>