:root {
  --cream: #f4f0e7;
  --paper: #fbfaf6;
  --ink: #172c2b;
  --orange: #f36a3d;
  --yellow: #f5cf5d;
  --blue: #b9d8e5;
  --pink: #eebfc3;
  --mint: #b8d8c5;
  --purple: #bdb3dc;
  --muted: #52625f;
  --line: rgba(23, 44, 43, .22);
  --shadow: 8px 8px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.68;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; }

.site-header {
  background: rgba(244, 240, 231, .96);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1440px;
  min-height: 94px;
  padding: 17px clamp(24px, 5vw, 76px);
}

.logo {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  gap: 12px;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
}

.logo::before {
  background: var(--orange);
  border-radius: 28px 28px 3px 3px;
  box-shadow: 17px 0 0 var(--yellow);
  content: "";
  display: block;
  height: 34px;
  margin-right: 17px;
  transform: rotate(-10deg);
  width: 15px;
}

.logo span { color: var(--ink); display: block; }

.nav-links {
  align-items: center;
  display: flex;
  gap: clamp(18px, 3vw, 40px);
}

.nav-links a {
  border-bottom: 1px solid transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 0;
}

.nav-links a:hover,
.nav-links a.active { border-color: var(--ink); }

.wrap {
  margin: 0 auto;
  max-width: 1280px;
  padding: 36px clamp(20px, 5vw, 64px) 100px;
}

.wrap.narrow { max-width: 980px; }

.breadcrumb {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  margin: 3px 0 22px;
  text-transform: uppercase;
}

.breadcrumb a { border-bottom: 1px solid var(--line); }

h1, h2, h3, .quote {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

h1 {
  font-size: clamp(50px, 7vw, 96px);
  letter-spacing: -.065em;
  line-height: .92;
  margin: 0 0 26px;
}

h2 {
  font-size: clamp(34px, 4.5vw, 58px);
  letter-spacing: -.05em;
  line-height: 1;
  margin: 76px 0 24px;
}

h3 {
  font-size: 25px;
  letter-spacing: -.035em;
  line-height: 1.08;
  margin: 0 0 14px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  margin-bottom: 32px;
  text-transform: uppercase;
}

.lead {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.5;
  margin: 0 0 30px;
  max-width: 720px;
}

.muted { color: var(--muted); }

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  margin: 8px 0 70px;
  min-height: 470px;
}

.hero-card {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 6vw, 82px);
}

.hero-side {
  background: var(--yellow);
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);
}

.hero-side h3 { font-size: 32px; }
.hero-side p { max-width: 470px; }

.btns {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.btn {
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--cream) !important;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 32px;
  justify-content: center;
  padding: 14px 20px;
  transition: transform .18s ease, background .18s ease;
}

.btn::after { content: "↗"; }
.btn:hover { transform: translateY(-3px); }
.btn.secondary { background: transparent; color: var(--ink) !important; }
.btn.disabled {
  cursor: default;
  opacity: .58;
  pointer-events: none;
}
.btn.disabled::after { content: "…"; }

.home-page .wrap {
  max-width: none;
  padding: 0;
}

.home-page .home-hero {
  grid-template-columns: 1.06fr .94fr;
  margin: 0;
  min-height: 730px;
}

.home-page .home-hero .hero-card {
  background: var(--cream);
  border: 0;
  padding: 80px clamp(24px, 7vw, 110px);
}

.home-page .home-hero h1 {
  font-size: clamp(72px, 8vw, 122px);
  line-height: .78;
}

.home-page .home-hero h1 em {
  color: var(--orange);
  font-weight: 400;
}

.travel-art {
  background: var(--yellow);
  min-height: 730px;
  overflow: hidden;
  position: relative;
}

.art-sun {
  background: var(--orange);
  border-radius: 50%;
  height: 380px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -47%);
  width: 380px;
}

.art-arch {
  background: var(--ink);
  border-radius: 290px 290px 0 0;
  bottom: 0;
  height: 79%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: min(66%, 420px);
}

.art-door {
  background: var(--orange);
  bottom: 0;
  height: 76%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 49%;
}

.art-door::before {
  border: 1px solid rgba(23, 44, 43, .45);
  bottom: 20px;
  content: "";
  left: 18px;
  position: absolute;
  right: 18px;
  top: 18px;
}

.art-door::after {
  background: var(--yellow);
  border-radius: 50%;
  content: "";
  height: 12px;
  position: absolute;
  right: 28px;
  top: 52%;
  width: 12px;
}

.art-sign {
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  display: flex;
  flex-direction: column;
  font-family: Georgia, "Times New Roman", serif;
  left: 7%;
  padding: 18px 22px;
  position: absolute;
  top: 51%;
  transform: rotate(-4deg);
}

.art-sign span { font-size: 16px; }
.art-sign strong {
  color: var(--orange);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
}

.art-route {
  bottom: 17%;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: 86px;
  position: absolute;
  right: 7%;
  transform: rotate(22deg);
}

.home-page main > section:not(.hero) {
  padding-left: clamp(24px, 5vw, 76px);
  padding-right: clamp(24px, 5vw, 76px);
}

.home-page main > section:nth-of-type(2) {
  background: var(--ink);
  color: var(--cream);
  padding-bottom: 100px;
  padding-top: 94px;
}

.home-page main > section:nth-of-type(2) > h2 {
  font-size: clamp(46px, 6vw, 78px);
  margin-top: 0;
  max-width: 800px;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0;
}

.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 28px;
}

.card.big { padding: clamp(30px, 5vw, 55px); }
.card.big h2 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.lesson-card {
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 295px;
  transition: transform .18s ease;
}

.lesson-card:hover { transform: translateY(-4px); }
.lesson-card:nth-child(4n+1) { background: var(--orange); }
.lesson-card:nth-child(4n+2) { background: var(--blue); }
.lesson-card:nth-child(4n+3) { background: var(--yellow); }
.lesson-card:nth-child(4n+4) { background: var(--pink); }

.lesson-card .tag {
  border-bottom: 1px solid rgba(23, 44, 43, .35);
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  margin: -2px 0 64px;
  padding-bottom: 13px;
  text-transform: uppercase;
}

.lesson-card h3 { font-size: 29px; }
.lesson-card p { font-size: 13px; line-height: 1.55; }

.home-page .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-page .grid.two {
  background: var(--paper);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding-bottom: 100px;
  padding-top: 100px;
}

.home-page .quote {
  border-radius: 0;
  margin: 0;
  padding: 100px clamp(24px, 10vw, 150px);
  text-align: center;
}

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}

.meta span,
.pill {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
}

.table-wrap {
  background: var(--paper);
  border: 1px solid var(--ink);
  margin: 22px 0 36px;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 14px 17px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--ink);
  color: var(--cream);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

tbody tr:nth-child(even) { background: rgba(185, 216, 229, .22); }
tr:last-child td { border-bottom: 0; }
.fr { color: var(--ink); font-weight: 800; }
.pron { color: #a84a2d; font-style: italic; }
.cz { color: var(--muted); }

.dialog {
  background: var(--blue);
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  margin: 22px 6px 28px 0;
  max-width: 760px;
  padding: 22px 28px;
  transform: rotate(-.35deg);
}

.dialog:nth-of-type(even) {
  background: var(--yellow);
  margin-left: auto;
  transform: rotate(.35deg);
}

.dialog p { margin: 5px 0; }

.grammar-box,
.callout,
.okbox,
.warn,
.practice {
  background: var(--paper);
  border: 1px solid var(--ink);
  margin: 22px 0;
  padding: 28px;
}

.grammar-box.green, .okbox { background: var(--mint); border-left: 8px solid var(--ink); }
.grammar-box.yellow, .warn { background: var(--yellow); border-left: 8px solid var(--ink); }
.grammar-box.blue { background: var(--blue); border-left: 8px solid var(--ink); }
.grammar-box.purple { background: var(--purple); border-left: 8px solid var(--ink); }

.mission,
.quote {
  background: var(--ink);
  color: var(--cream);
  margin: 48px 0;
  padding: clamp(34px, 6vw, 66px);
}

.mission {
  border: 6px solid var(--yellow);
  box-shadow: 10px 10px 0 var(--orange);
}

.mission h2,
.quote h2 { margin-top: 0; }
.mission a, .quote a { color: var(--yellow); }

.quote {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.4;
}

.week,
.sound-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.day,
.sound {
  background: var(--paper);
  border: 1px solid var(--ink);
  font-size: 13px;
  padding: 16px;
}

.day:nth-child(3n+1) { background: var(--blue); }
.day:nth-child(3n+2) { background: var(--yellow); }
.day:nth-child(3n+3) { background: var(--pink); }
.day b { display: block; font-size: 11px; margin-bottom: 8px; text-transform: uppercase; }

.toc,
.rule-list {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 25px 30px;
}

.split {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mini { font-size: 13px; }
.yes { color: #1d7250; font-weight: 800; }
.no { color: #b64031; font-weight: 800; }
.score { color: var(--orange); font-size: 30px; font-weight: 900; }

.lesson-nav {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: 64px;
  padding-top: 30px;
}

.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 54px clamp(24px, 5vw, 76px);
}

.footer-inner {
  display: flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  gap: 30px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1280px;
}

.footer a { color: var(--cream); border-bottom: 1px solid rgba(244, 240, 231, .4); }

@media (max-width: 1000px) {
  .home-page .grid { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week, .sound-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .nav-links { gap: 15px; overflow-x: auto; padding-bottom: 2px; width: 100%; }
  .hero, .home-page .home-hero { grid-template-columns: 1fr; }
  .home-page .home-hero .hero-card { min-height: 620px; }
  .travel-art { min-height: 590px; }
  .split { grid-template-columns: 1fr; }
  .home-page .grid.two { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
}

@media (max-width: 560px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .nav { padding-left: 18px; padding-right: 18px; }
  .nav-links a { white-space: nowrap; }
  h1 { font-size: 48px; }
  .home-page .home-hero h1 { font-size: clamp(62px, 19vw, 88px); }
  .home-page .grid, .grid, .grid.two { grid-template-columns: 1fr; }
  .week, .sound-grid { grid-template-columns: 1fr; }
  .lesson-card { min-height: 260px; }
  .hero-card, .hero-side { padding: 30px 22px; }
  .lesson-nav { align-items: stretch; flex-direction: column; }
  .btn { width: 100%; }
  .art-arch { width: 78%; }
  .art-sign { left: 4%; }
}

/* =========================================================
   V4 — vlajková Lekce 0 a editorial O mně
   ========================================================= */
.lesson-00 .topic-hero { margin-bottom: 0; }
.sound-manifesto {
  border: 1px solid var(--ink);
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 95px;
}
.sound-manifesto > div {
  background: var(--cream);
  border-right: 1px solid var(--ink);
  display: grid;
  gap: 5px;
  padding: 28px 30px;
}
.sound-manifesto > div:nth-child(2) { background: var(--blue); }
.sound-manifesto > div:nth-child(3) { background: var(--orange); }
.sound-manifesto > div:last-child { border-right: 0; }
.sound-manifesto b { font-size: 11px; letter-spacing: .15em; }
.sound-manifesto span { font-family: Georgia, serif; font-size: 24px; }
.sound-manifesto small { font-size: 12px; text-transform: uppercase; }

.lesson-00 .toc {
  border-bottom: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, 1fr);
  margin: 80px 0;
}
.lesson-00 .toc a {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 17px;
  min-height: 100px;
  padding: 22px;
}
.lesson-00 .toc a:nth-child(4n) { border-right: 0; }
.lesson-00 .toc a:hover { background: var(--yellow); border-color: var(--ink); transform: none; }

.lesson-00 .sound-chapter {
  border: 1px solid var(--ink) !important;
  margin: 55px 0 !important;
  overflow: hidden;
  padding: clamp(38px, 6vw, 78px) !important;
  position: relative;
}
.lesson-00 .sound-chapter:nth-of-type(4n+1) { background: var(--yellow); }
.lesson-00 .sound-chapter:nth-of-type(4n+2) { background: var(--mint); }
.lesson-00 .sound-chapter:nth-of-type(4n+3) { background: var(--blue); }
.lesson-00 .sound-chapter:nth-of-type(4n+4) { background: var(--pink); }
.lesson-00 .sound-chapter > h2 {
  font-size: clamp(36px, 5vw, 66px);
  letter-spacing: -.045em;
  line-height: .98;
  margin: 0 0 34px;
  max-width: 780px;
}

.lesson-00 .callout,
.lesson-00 .split > div,
.lesson-00 .sound,
.lesson-00 .rule-list .card,
.lesson-00 .practice .card,
.lesson-00 .example-line,
.lesson-00 .warn,
.lesson-00 .okbox,
.lesson-00 .score div,
.lesson-00 .audio-placeholder {
  background: rgba(251,250,246,.88);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}
.lesson-00 .callout { border-left: 12px solid var(--orange); padding: 28px; }
.lesson-00 .split { gap: 0; }
.lesson-00 .split > div { padding: 28px; }
.lesson-00 .split .no { background: var(--pink); border-left: 1px solid var(--ink); }
.lesson-00 .split .yes { background: var(--mint); border-left: 0; }
.lesson-00 .sound-grid { gap: 0; }
.lesson-00 .sound { min-height: 145px; padding: 22px; }
.lesson-00 .sound b { color: var(--ink); font-family: Georgia, serif; font-size: 31px; }
.lesson-00 .rule-list { gap: 0; }
.lesson-00 .rule-list .card { padding: 28px; }
.lesson-00 .practice { counter-reset: step; }
.lesson-00 .practice .card:before {
  background: var(--orange);
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  font-family: Georgia, serif;
}
.lesson-00 .pill { background: var(--ink); border-color: var(--ink); border-radius: 0; color: var(--cream); }
.lesson-00 .warn { border-left: 12px solid var(--yellow); }
.lesson-00 .okbox { border-left: 12px solid var(--green); }
.lesson-00 .score { gap: 0; }
.lesson-00 .score div { padding: 20px 12px; }
.lesson-00 .score b { color: var(--orange); font-family: Georgia, serif; font-size: 32px; }
.lesson-00 .audio-placeholder { border-style: dashed; }

.about-page .topic-hero { margin-bottom: 0; }
.about-page .about-strip { margin: 0 0 100px; }
.about-opening {
  align-items: start;
  border-bottom: 1px solid var(--ink);
  display: grid;
  gap: clamp(35px, 7vw, 100px);
  grid-template-columns: 1.1fr .9fr;
  margin: 0 0 100px;
  padding: 0 0 80px;
}
.about-deck {
  font-family: Georgia, serif;
  font-size: clamp(34px, 4.7vw, 66px);
  letter-spacing: -.045em;
  line-height: 1.02;
  margin: 0;
}
.about-opening > p:last-child {
  border-left: 1px solid var(--ink);
  font-size: 17px;
  margin: 0;
  padding-left: clamp(25px, 4vw, 55px);
}
.about-chapter {
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 150px .75fr 1.25fr;
  margin: 55px 0;
  min-height: 500px;
}
.chapter-orange { background: var(--orange); }
.chapter-blue { background: var(--blue); }
.chapter-yellow { background: var(--yellow); }
.chapter-mint { background: var(--mint); }
.about-number {
  border-right: 1px solid var(--ink);
  color: rgba(23,44,43,.22);
  font-family: Georgia, serif;
  font-size: 95px;
  letter-spacing: -.09em;
  padding: 35px 20px;
}
.about-heading {
  border-right: 1px solid var(--ink);
  padding: 60px 42px;
}
.about-heading span,
.about-closing > span,
.about-pullquote > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.about-heading h2 {
  font-size: clamp(38px, 4vw, 62px);
  letter-spacing: -.05em;
  line-height: .95;
  margin: 22px 0 0;
}
.about-copy {
  background: rgba(251,250,246,.78);
  columns: 2;
  column-gap: 40px;
  padding: 55px clamp(35px, 5vw, 70px);
}
.about-copy p { break-inside: avoid; margin-top: 0; }
.about-pullquote {
  background: var(--ink);
  color: var(--cream);
  margin: 90px 0;
  padding: clamp(55px, 8vw, 110px);
  position: relative;
}
.about-pullquote:after {
  background: var(--orange);
  border-radius: 50%;
  content: "";
  height: 140px;
  position: absolute;
  right: 7%;
  top: -55px;
  width: 140px;
}
.about-pullquote blockquote {
  font-family: Georgia, serif;
  font-size: clamp(38px, 5.2vw, 74px);
  letter-spacing: -.045em;
  line-height: 1.02;
  margin: 32px 0 0;
  max-width: 980px;
  position: relative;
  z-index: 1;
}
.about-closing {
  background: var(--cream);
  border: 1px solid var(--ink);
  box-shadow: 16px 16px 0 var(--orange);
  margin: 100px 16px 110px 0;
  padding: clamp(55px, 8vw, 105px);
  text-align: center;
}
.about-closing h2 {
  font-size: clamp(48px, 7vw, 94px);
  letter-spacing: -.06em;
  line-height: .93;
  margin: 25px auto 0;
}

@media (max-width: 900px) {
  .lesson-00 .toc { grid-template-columns: repeat(2,1fr); }
  .lesson-00 .toc a:nth-child(2n) { border-right: 0; }
  .about-opening { grid-template-columns: 1fr; }
  .about-opening > p:last-child { border-left: 0; border-top: 1px solid var(--ink); padding: 30px 0 0; }
  .about-chapter { grid-template-columns: 110px 1fr; }
  .about-heading { border-right: 0; }
  .about-copy { border-top: 1px solid var(--ink); grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .sound-manifesto { grid-template-columns: 1fr; }
  .sound-manifesto > div { border-bottom: 1px solid var(--ink); border-right: 0; }
  .lesson-00 .toc { grid-template-columns: 1fr; }
  .lesson-00 .toc a { border-bottom: 1px solid var(--ink); border-right: 0; min-height: auto; }
  .lesson-00 .sound-grid, .lesson-00 .score { grid-template-columns: 1fr; }
  .lesson-00 .split { grid-template-columns: 1fr; }
  .lesson-00 .split .yes { border-left: 1px solid var(--ink); border-top: 0; }
  .about-chapter { grid-template-columns: 1fr; }
  .about-number { border-bottom: 1px solid var(--ink); border-right: 0; font-size: 70px; padding: 22px 28px; }
  .about-heading { padding: 38px 28px; }
  .about-copy { columns: 1; grid-column: auto; padding: 38px 28px; }
  .about-pullquote:after { height: 75px; right: 4%; width: 75px; }
}

/* =========================================================
   Tematické editorial stránky — kompletní vizuální systém
   ========================================================= */
.topic-hero {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-template-columns: 1.02fr .98fr;
  margin: 30px 0 90px;
  min-height: 610px;
}

.topic-hero .hero-card {
  background: var(--cream);
  border: 1px solid var(--ink);
  border-right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 7vw, 92px);
}

.topic-hero .hero-card h1 {
  font-size: clamp(54px, 7vw, 106px);
  letter-spacing: -.065em;
  line-height: .88;
  margin: 25px 0 32px;
  max-width: 760px;
}

.topic-hero .meta { margin-top: 30px; }
.topic-art {
  --accent: var(--orange);
  --paper: var(--yellow);
  background: var(--accent);
  border: 1px solid var(--ink);
  min-height: 610px;
  overflow: hidden;
  position: relative;
}

.art-grid {
  background-image: linear-gradient(rgba(23,44,43,.15) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(23,44,43,.15) 1px, transparent 1px);
  background-size: 58px 58px;
  inset: 0;
  position: absolute;
}

.art-orbit {
  border: 2px solid var(--ink);
  border-radius: 50%;
  position: absolute;
}
.orbit-a { height: 340px; right: -70px; top: -80px; width: 340px; }
.orbit-b { bottom: 90px; height: 170px; left: -55px; width: 170px; }

.art-symbol {
  align-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: flex;
  font-family: Georgia, serif;
  font-size: clamp(42px, 6vw, 85px);
  font-weight: 700;
  height: clamp(230px, 28vw, 350px);
  justify-content: center;
  left: 50%;
  letter-spacing: -.06em;
  line-height: .85;
  padding: 30px;
  position: absolute;
  text-align: center;
  top: 43%;
  transform: translate(-50%, -50%) rotate(-6deg);
  width: clamp(230px, 28vw, 350px);
  z-index: 2;
}

.art-caption {
  background: var(--ink);
  bottom: 0;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 6px;
  left: 0;
  padding: 20px 28px;
  position: absolute;
  right: 0;
  z-index: 4;
}
.art-caption b { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.art-caption span { font-family: Georgia, serif; font-size: 17px; }

.topic-note {
  background: rgba(251,250,246,.94);
  border: 1px solid var(--ink);
  max-width: 270px;
  padding: 18px 21px;
  position: absolute;
  right: 24px;
  top: 24px;
  transform: rotate(2deg);
  z-index: 5;
}
.topic-note h3 { font-size: 12px; letter-spacing: .13em; margin: 0 0 7px; text-transform: uppercase; }
.topic-note p { font-size: 13px; line-height: 1.45; margin: 0; }

.theme-sound { --accent: #a8c8ff; --paper: #ff7a55; }
.theme-questions { --accent: #f2ca32; --paper: #b5d7a8; }
.theme-blocks { --accent: #ff795d; --paper: #a9c9ff; }
.theme-dialogue { --accent: #b7d9aa; --paper: #f5cc39; }
.theme-people { --accent: #f3a1ab; --paper: #f7cf3e; }
.theme-walk { --accent: #f3ca37; --paper: #ff795d; }
.theme-memories { --accent: #a6c8ff; --paper: #f4a2ad; }
.theme-builder { --accent: #ff7b57; --paper: #b4d9ad; }
.theme-day { --accent: #f4ce3f; --paper: #a9c9ff; }
.theme-listen { --accent: #b7d9aa; --paper: #ff795d; }
.theme-hotel { --accent: #a7c8ff; --paper: #f5cf41; }
.theme-train { --accent: #f399a6; --paper: #b5d9ad; }
.theme-table { --accent: #ff7a56; --paper: #f4ce3f; }
.theme-shops { --accent: #b6d9ae; --paper: #f39ca8; }
.theme-city { --accent: #172c2b; --paper: #f4cb37; }
.theme-city .art-grid { background-image: linear-gradient(rgba(251,250,246,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(251,250,246,.13) 1px,transparent 1px); }
.theme-method { --accent: #f1c934; --paper: #ff795d; }
.theme-about { --accent: #172c2b; --paper: #b8dbae; }

.theme-sound .art-symbol { border-radius: 48% 52% 42% 58%; }
.theme-questions .art-symbol, .theme-dialogue .art-symbol { border-radius: 50% 50% 8% 50%; }
.theme-blocks .art-symbol, .theme-builder .art-symbol { border-radius: 0; transform: translate(-50%,-50%) rotate(5deg); }
.theme-people .art-symbol { border-radius: 48% 48% 42% 42%; box-shadow: 90px 70px 0 -28px var(--cream), 90px 70px 0 -26px var(--ink); }
.theme-walk .art-symbol { border-radius: 60% 40% 58% 42%; transform: translate(-50%,-50%) rotate(-13deg); }
.theme-memories .art-symbol { border-radius: 0; transform: translate(-50%,-50%) rotate(-8deg); }
.theme-day .art-symbol { box-shadow: 34px 34px 0 var(--ink); }
.theme-hotel .art-symbol { border-radius: 48% 48% 0 0; }
.theme-train .art-symbol { border-radius: 48% 48% 10% 10%; }
.theme-table .art-symbol { border: 16px double var(--ink); }
.theme-shops .art-symbol { border-radius: 0 0 25% 25%; }
.theme-city .art-symbol { border-radius: 0; box-shadow: inset 42px 42px 0 rgba(23,44,43,.14); }

.themed-lesson main > section:not(.hero):not(.grammar-box):not(.card) {
  border-top: 1px solid var(--ink);
  margin-top: 70px;
  padding-top: 48px;
}
.themed-lesson main > .card.big {
  background: var(--cream);
  border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 var(--accent, var(--yellow));
  margin: 65px 12px 65px 0;
  padding: clamp(34px, 5vw, 64px);
}
.themed-lesson main > section:nth-of-type(5n+2).card.big { background: var(--yellow); }
.themed-lesson main > section:nth-of-type(5n+4).card.big { background: var(--mint); }
.themed-lesson table thead { background: var(--ink); color: var(--cream); }
.themed-lesson .table-wrap { border: 1px solid var(--ink); }
.themed-lesson .lesson-nav { border-top: 1px solid var(--ink); padding-top: 38px; }

.editorial-strip {
  border-bottom: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  display: grid;
  margin: -35px 0 90px;
}
.method-strip { grid-template-columns: repeat(4, 1fr); }
.about-strip { grid-template-columns: repeat(3, 1fr); }
.editorial-strip > div { border-right: 1px solid var(--ink); padding: 24px; }
.editorial-strip > div:last-child { border-right: 0; }
.editorial-strip b { color: var(--orange); display: block; font-size: 11px; letter-spacing: .13em; margin-bottom: 8px; }
.editorial-strip span { font-family: Georgia, serif; font-size: 19px; }
.method-page main > .card.big, .about-page main > .card.big { border: 1px solid var(--ink); box-shadow: 12px 12px 0 var(--yellow); padding: clamp(35px,5vw,68px); }
.method-page .week { border: 1px solid var(--ink); }
.method-page .day { background: var(--cream); border-color: var(--ink); }
.about-page .quote, .method-page .quote { background: var(--ink); color: var(--cream); font-size: clamp(27px,4vw,52px); padding: clamp(45px,7vw,90px); }

@media (max-width: 860px) {
  .topic-hero { grid-template-columns: 1fr; }
  .topic-hero .hero-card { border-right: 1px solid var(--ink); }
  .topic-art { min-height: 560px; }
  .method-strip { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .topic-hero { margin-bottom: 55px; }
  .topic-hero .hero-card h1 { font-size: 52px; }
  .topic-art { min-height: 490px; }
  .art-symbol { font-size: 42px; height: 230px; width: 230px; }
  .topic-note { max-width: 220px; }
  .editorial-strip, .method-strip, .about-strip { grid-template-columns: 1fr; }
  .editorial-strip > div { border-bottom: 1px solid var(--ink); border-right: 0; }
  .editorial-strip > div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* French course — editorial hero */
.french-index .wrap {
  max-width: none;
  padding: 0;
}

.french-index .breadcrumb {
  margin: 30px clamp(24px, 5vw, 76px);
}

.french-index .french-hero {
  grid-template-columns: 1.02fr .98fr;
  margin: 0;
  min-height: 710px;
}

.french-index .french-hero .hero-card {
  background: var(--cream);
  border-left: 0;
  min-height: 710px;
  padding: 80px clamp(28px, 7vw, 110px);
}

.french-index .french-hero h1 {
  font-size: clamp(66px, 7.5vw, 112px);
  line-height: .8;
}

.french-index .french-hero h1 em,
.cafe-hero h1 em {
  color: var(--orange);
  font-weight: 400;
}

.paris-art {
  background: var(--blue);
  min-height: 710px;
  overflow: hidden;
  position: relative;
}

.paris-sun {
  background: var(--yellow);
  border-radius: 50%;
  height: 330px;
  position: absolute;
  right: -70px;
  top: -90px;
  width: 330px;
}

.cafe-building {
  background: var(--orange);
  bottom: 0;
  height: 78%;
  left: 17%;
  position: absolute;
  width: 66%;
}

.cafe-awning {
  display: flex;
  height: 92px;
  left: -7%;
  position: absolute;
  top: 0;
  width: 114%;
}

.cafe-awning i {
  background: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 0 0 35px 35px;
  flex: 1;
}

.cafe-awning i:nth-child(even) { background: var(--ink); }

.cafe-window {
  align-items: flex-start;
  background: var(--ink);
  border: 14px solid var(--cream);
  bottom: 0;
  color: var(--cream);
  display: flex;
  height: 64%;
  justify-content: center;
  left: 11%;
  padding-top: 25px;
  position: absolute;
  width: 44%;
}

.cafe-window span {
  font-family: Georgia, serif;
  font-size: 28px;
  letter-spacing: .16em;
}

.cafe-door {
  background: var(--yellow);
  border: 12px solid var(--cream);
  bottom: 0;
  height: 64%;
  position: absolute;
  right: 9%;
  width: 29%;
}

.cafe-table {
  background: var(--ink);
  border-radius: 50%;
  bottom: 78px;
  height: 24px;
  position: absolute;
  right: 3%;
  width: 180px;
  z-index: 3;
}

.cafe-table > i {
  background: var(--ink);
  height: 110px;
  left: 83px;
  position: absolute;
  top: 17px;
  width: 14px;
}

.coffee-cup {
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 3px 3px 22px 22px;
  bottom: 18px;
  height: 49px;
  left: 66px;
  position: absolute;
  width: 62px;
}

.speech-ticket {
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  display: flex;
  flex-direction: column;
  font-family: Georgia, serif;
  left: 5%;
  padding: 17px 21px;
  position: absolute;
  top: 47%;
  transform: rotate(-5deg);
  z-index: 5;
}

.speech-ticket strong {
  color: var(--orange);
  font-size: 23px;
  font-style: italic;
  font-weight: 400;
}

.course-path {
  background: var(--ink);
  color: var(--cream);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 clamp(24px, 5vw, 76px);
}

.course-path > div {
  border-right: 1px solid rgba(244, 240, 231, .25);
  display: flex;
  flex-direction: column;
  min-height: 155px;
  padding: 32px 28px;
}

.course-path > div:last-child { border: 0; }
.course-path b { color: var(--orange); font-size: 10px; margin-bottom: 16px; }
.course-path span { font-family: Georgia, serif; font-size: 24px; }
.course-path small { color: rgba(244, 240, 231, .68); font-size: 11px; margin-top: 4px; }

.course-catalog {
  background: var(--paper);
  padding: 110px clamp(24px, 5vw, 76px);
}

.course-catalog > h2 {
  font-size: clamp(52px, 6.5vw, 90px);
  margin: 0 0 20px;
}

.catalog-lead {
  font-family: Georgia, serif;
  font-size: 20px;
  margin-bottom: 50px;
  max-width: 620px;
}

.french-index .course-catalog .grid {
  grid-template-columns: repeat(4, 1fr);
}

.study-manifesto {
  align-items: center;
  background: var(--yellow);
  display: grid;
  gap: 7vw;
  grid-template-columns: .7fr 1.3fr;
  padding: 100px clamp(24px, 9vw, 140px);
}

.study-manifesto h2 { margin: 0 0 25px; }
.manifesto-number {
  color: var(--orange);
  font-family: Georgia, serif;
  font-size: clamp(170px, 25vw, 340px);
  letter-spacing: -.1em;
  line-height: .7;
}

/* Café lesson — bespoke visual story */
.cafe-lesson .wrap {
  max-width: 1320px;
}

.cafe-hero {
  grid-template-columns: 1.04fr .96fr;
  min-height: 680px;
}

.cafe-hero .hero-card {
  background: var(--cream);
  min-height: 680px;
}

.cafe-hero h1 {
  font-size: clamp(60px, 6.8vw, 96px);
  line-height: .83;
}

.cafe-hero-art {
  background: var(--pink);
  border: 1px solid var(--ink);
  min-height: 680px;
  overflow: hidden;
  position: relative;
}

.cafe-hero-sun {
  background: var(--orange);
  border-radius: 50%;
  height: 280px;
  left: 50%;
  position: absolute;
  top: -95px;
  transform: translateX(-50%);
  width: 280px;
}

.window-arch {
  background: var(--ink);
  border-radius: 230px 230px 0 0;
  bottom: 0;
  height: 70%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 62%;
}

.window-view {
  background: var(--blue);
  border-radius: 190px 190px 0 0;
  bottom: 0;
  height: 86%;
  left: 9%;
  position: absolute;
  width: 82%;
}

.bistro-table {
  background: var(--yellow);
  border: 4px solid var(--ink);
  border-radius: 50%;
  bottom: 120px;
  height: 34px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 260px;
  z-index: 3;
}

.bistro-table > i {
  background: var(--ink);
  height: 125px;
  left: 118px;
  position: absolute;
  top: 27px;
  width: 16px;
}

.hero-cup {
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 4px 4px 26px 26px;
  bottom: 28px;
  height: 65px;
  left: 95px;
  position: absolute;
  width: 75px;
}

.cafe-note {
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  display: flex;
  flex-direction: column;
  font-family: Georgia, serif;
  left: 3%;
  padding: 17px 20px;
  position: absolute;
  top: 43%;
  transform: rotate(-5deg);
  z-index: 4;
}

.cafe-note strong {
  color: var(--orange);
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
}

.day-counter {
  bottom: 35px;
  color: var(--cream);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  position: absolute;
  right: 7%;
  z-index: 5;
}

.cafe-story {
  align-items: center;
  background: var(--orange);
  border: 1px solid var(--ink);
  display: grid;
  gap: 7vw;
  grid-template-columns: .6fr 1.4fr;
  margin: 80px 0;
  padding: 70px clamp(30px, 6vw, 80px);
}

.cafe-story h2 { margin-top: 0; }
.story-stamp {
  border: 2px solid var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  padding: 35px 20px;
  text-align: center;
  transform: rotate(-7deg);
}

.cafe-week {
  border-bottom: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 80px 0 50px;
}

.cafe-week a {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 110px;
  padding: 19px 12px;
}

.cafe-week a:last-child { border-right: 0; }
.cafe-week b { color: var(--orange); font-size: 10px; margin-bottom: 12px; }
.cafe-week span { font-family: Georgia, serif; font-size: 15px; line-height: 1.15; }

.cafe-day {
  margin: 42px 0;
  overflow: hidden;
  padding: clamp(34px, 5vw, 68px);
  position: relative;
}

.cafe-day:nth-of-type(4n+1) { background: var(--yellow); }
.cafe-day:nth-of-type(4n+2) { background: var(--blue); }
.cafe-day:nth-of-type(4n+3) { background: var(--pink); }
.cafe-day:nth-of-type(4n+4) { background: var(--mint); }

.cafe-day .chapter-number {
  color: rgba(23, 44, 43, .08);
  font-family: Georgia, serif;
  font-size: 230px;
  letter-spacing: -.08em;
  line-height: .7;
  position: absolute;
  right: 15px;
  top: 30px;
}

.cafe-day > * { position: relative; z-index: 1; }
.cafe-day > h2 { margin-top: 0; max-width: 760px; }
.cafe-day > h3 { margin-top: 38px; }
.cafe-day .table-wrap { background: rgba(251, 250, 246, .88); }

.cafe-mission {
  align-items: center;
  background: var(--ink);
  color: var(--cream);
  display: grid;
  gap: 7vw;
  grid-template-columns: .65fr 1.35fr;
  margin: 70px 0;
  padding: 70px clamp(30px, 7vw, 95px);
}

.cafe-mission h2 { color: var(--cream); margin-top: 0; }
.mission-cup {
  align-items: center;
  background: var(--yellow);
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  font-size: 90px;
  height: 230px;
  justify-content: center;
  width: 230px;
}

@media (max-width: 1000px) {
  .french-index .course-catalog .grid { grid-template-columns: repeat(2, 1fr); }
  .cafe-week { grid-template-columns: repeat(4, 1fr); }
  .course-path { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .french-index .french-hero, .cafe-hero { grid-template-columns: 1fr; }
  .paris-art, .cafe-hero-art { min-height: 580px; }
  .study-manifesto, .cafe-story, .cafe-mission { grid-template-columns: 1fr; }
  .manifesto-number { font-size: 180px; }
}

@media (max-width: 560px) {
  .french-index .french-hero h1, .cafe-hero h1 { font-size: 58px; }
  .course-path, .french-index .course-catalog .grid { grid-template-columns: 1fr; }
  .cafe-week { grid-template-columns: repeat(2, 1fr); }
  .cafe-week a { border-bottom: 1px solid var(--line); }
  .cafe-day .chapter-number { font-size: 150px; }
  .mission-cup { font-size: 62px; height: 165px; width: 165px; }
}

/* =========================================================
   V5 — klidnější studijní režim
   Barva orientuje, hlavní obsah nechává oči odpočívat.
   ========================================================= */
.lesson-page {
  --study-paper: #fbfaf6;
  --study-white: #fffefa;
  --study-green: #edf5e9;
  --study-yellow: #fff7d9;
  --study-blue: #edf3fd;
  --study-purple: #f4eef6;
}

.themed-lesson main > .card.big,
.themed-lesson main > section:nth-of-type(5n+2).card.big,
.themed-lesson main > section:nth-of-type(5n+4).card.big {
  background: var(--study-white);
  box-shadow: 8px 8px 0 rgba(23, 44, 43, .16);
}

.lesson-page .grammar-box.green,
.lesson-page .okbox {
  background: var(--study-green);
  border-left-color: #719365;
}
.lesson-page .grammar-box.yellow,
.lesson-page .warn {
  background: var(--study-yellow);
  border-left-color: #c59b17;
}
.lesson-page .grammar-box.blue {
  background: var(--study-blue);
  border-left-color: #6f91c3;
}
.lesson-page .grammar-box.purple {
  background: var(--study-purple);
  border-left-color: #92749a;
}

.lesson-page .dialog {
  background: var(--study-blue);
  box-shadow: 4px 4px 0 rgba(23,44,43,.55);
}
.lesson-page .dialog:nth-of-type(even) { background: var(--study-yellow); }
.lesson-page tbody tr:nth-child(even) { background: rgba(23,44,43,.022); }
.lesson-page .table-wrap { background: var(--study-white); }

/* Lekce 0: každá kapitola má jen jednu barevnou navigační linku. */
.lesson-00 .sound-chapter,
.lesson-00 .sound-chapter:nth-of-type(4n+1),
.lesson-00 .sound-chapter:nth-of-type(4n+2),
.lesson-00 .sound-chapter:nth-of-type(4n+3),
.lesson-00 .sound-chapter:nth-of-type(4n+4) {
  background: var(--study-white);
}
.lesson-00 .sound-chapter:nth-of-type(4n+1) { border-left: 12px solid #d3aa1e !important; }
.lesson-00 .sound-chapter:nth-of-type(4n+2) { border-left: 12px solid #789b6d !important; }
.lesson-00 .sound-chapter:nth-of-type(4n+3) { border-left: 12px solid #7598ca !important; }
.lesson-00 .sound-chapter:nth-of-type(4n+4) { border-left: 12px solid #c47f89 !important; }
.lesson-00 .sound,
.lesson-00 .rule-list .card,
.lesson-00 .practice .card,
.lesson-00 .example-line,
.lesson-00 .score div { background: var(--study-paper); }

/* Kavárenská lekce: zachová si sedm barevně rozlišitelných dní,
   ale barva už neleží pod celou studijní plochou. */
.cafe-day,
.cafe-day:nth-of-type(4n+1),
.cafe-day:nth-of-type(4n+2),
.cafe-day:nth-of-type(4n+3),
.cafe-day:nth-of-type(4n+4) {
  background: var(--study-white);
  border: 1px solid var(--ink);
}
.cafe-day:nth-of-type(4n+1) { border-top: 12px solid #d7ad1c; }
.cafe-day:nth-of-type(4n+2) { border-top: 12px solid #789b6e; }
.cafe-day:nth-of-type(4n+3) { border-top: 12px solid #799aca; }
.cafe-day:nth-of-type(4n+4) { border-top: 12px solid #c9818c; }
.cafe-day .chapter-number { color: rgba(23,44,43,.045); }

@media (prefers-reduced-motion: reduce) {
  .lesson-page *, .lesson-page *:before, .lesson-page *:after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}