/* Barevný papír — veřejný web, září 2026.
   Prezentační vrstva nad site.css; nezasahuje do geometrie tisku ani administrace.
   Barva sady dál vychází z Deck.Accent. Text vždy používá kontrastní tokeny. */
:root {
  --wrap: 1160px;
  --paper-coral: #f0a38d;
  --paper-blue: #9dbdff;
  --paper-green: #9fceac;
  --paper-yellow: #ebc66f;
  --paper-lilac: #b6a4d5;
  --paper-peach: #302321;
  --paper-sky: #202a38;
  --paper-sage: #202e28;
  --paper-butter: #302b20;
  --paper-lavender: #2b2636;
}
[data-theme="light"] {
  --bg: #fffaf1;
  --bg-rgb: 255 250 241;
  --bg-soft: #f5eee2;
  --bg-card: #fffdf8;
  --line: #d7cebd;
  --line-soft: #e6ddce;
  --tx: #282923;
  --tx-body: #41443b;
  --tx-2: #53574c;
  --tx-3: #66675b;
  --acc: #a83b2b;
  --acc-soft: #8c3023;
  --acc-rgb: 168 59 43;
  --acc-2: #754c2e;
  --on-acc: #fffdf8;
  --paper-coral: #d56b51;
  --paper-blue: #3c63ae;
  --paper-green: #407653;
  --paper-yellow: #bb8821;
  --paper-lilac: #80609f;
  --paper-peach: #f9d9c9;
  --paper-sky: #dce8f7;
  --paper-sage: #e0eddb;
  --paper-butter: #f7e8b8;
  --paper-lavender: #eae1f2;
}
html { scroll-padding-top: 90px; }
body::before { display: none; }
section { padding: 88px 0; }
h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.035em; }
.lede { font-size: 18px; line-height: 1.75; max-width: 680px; }
.caption { font-size: 14px; }
.kicker { font-size: 12px; letter-spacing: .12em; }
.kicker::before { width: 9px; height: 9px; border-radius: 50%; }
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.btn.sm { min-height: 44px; font-size: 14px; }
.btn:hover,.btn.ghost:hover { transform: translateY(-2px); box-shadow: none; }
:where(a,button,input,select,textarea):focus-visible { outline: 3px solid var(--paper-blue); outline-offset: 4px; }
.bar .wrap { padding-top: 16px; padding-bottom: 16px; }
.bar .nm { font-size: 28px; letter-spacing: -.04em; }
.bar .nm::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; border-radius: 50%; background: var(--paper-coral); box-shadow: 5px -5px 0 var(--paper-blue); }
.bar .nm span { font-size: 11px; letter-spacing: .1em; margin-left: 14px; }
.bar nav { font-size: 14px; gap: 28px; }
.chapter-intro { background: var(--bg); }
.hero { padding: 76px 0 80px; }
.hero-grid { grid-template-columns: 1.12fr 1fr; gap: 64px; }
.hero-text { padding-top: 0; }
.hero-sparkles { display: none; }
.hero.xl h1 { font-size: clamp(46px, 5.6vw, 76px); line-height: 1.03; margin-bottom: 28px; }
.hero h1 em::after { background: var(--paper-peach); height: 12px; bottom: 0; }
.hero-text:hover h1 em { color: var(--acc); }
.hero.xl .lede { font-size: 18px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-film { background: transparent; padding: 0; transform: none; }
.hero-film:hover { transform: none; filter: none; }
.hero-film::after { display: none; }
.hero-film video { aspect-ratio: 1.25; object-fit: cover; border: 0; border-radius: var(--r); }
.hero-film figcaption { color: var(--tx-body); font-size: 13px; line-height: 1.6; letter-spacing: 0; text-transform: none; transform: none; margin-top: 18px; }
.hero-film figcaption span { font-size: 23px; margin-right: 6px; vertical-align: middle; }
.film-toggle { top: 12px; right: 12px; width: 44px; height: 44px; opacity: 1; background: var(--bg-card); color: var(--tx); }
.film-toggle[hidden] { display: none; }
.chapter-how { background: var(--paper-sage); }
.chapter-how::before,.chapter-insight::after,.chapter-sets::before,.chapter-rules::after,
.chapter-caution::after,.chapter-gift::after,.chapter-order::after,.chapter-about::after { content: none; }
.chapter-how .note { max-width: 680px; background: transparent; border: 0; padding: 0; margin-top: 18px; }
.steps { gap: 18px; margin-top: 36px; }
.steps .step { background: var(--bg-card); border: 0; padding: 26px 24px; border-radius: var(--r); }
.steps .n { display: grid; place-items: center; width: 44px; height: 44px; font: 600 20px var(--serif); border-radius: 50%; background: var(--paper-peach); color: var(--tx); margin-bottom: 26px; }
.steps .step:nth-child(2) .n { background: var(--paper-sky); }
.steps .step:nth-child(3) .n { background: var(--paper-butter); }
.steps .step:nth-child(4) .n { background: var(--paper-lavender); }
.steps .n::after { content: none; }
.steps h3 { font-size: 24px; margin-bottom: 12px; }
.steps p { font-size: 16px; line-height: 1.65; }

/* Sekce „Jak to funguje“ — místo čtyř číslovaných dlaždic dva celky prózou
   (12. 9. 2026, viz komentář v Index.cshtml). Třída .steps zůstává v CSS kvůli
   ostatním stránkám; na hlavní se už nepoužívá. */
.how-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: start; margin-top: 26px; }
.how-flow { display: grid; gap: 28px; align-content: start; }
.how-flow .flow-part { position: relative; padding-top: 22px; }
.how-flow .flow-part::before { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 3px; background: var(--paper-peach); border-radius: 2px; }
.how-flow .flow-part:nth-child(2)::before { background: var(--paper-sky); }
.how-flow h3 { font-size: 24px; margin-bottom: 12px; }
.how-flow p { font-size: 16px; line-height: 1.7; color: var(--tx-2); margin: 0; }
.how-grid .perspective { margin: 0; max-width: none; }
.perspective-q { font-size: 15px; line-height: 1.6; color: var(--tx-2); margin: -14px 0 26px; }
.how-after { margin: 4px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.7; color: var(--tx-2); }
.how-note { max-width: 780px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.75; color: var(--tx-3, var(--tx-2)); }
.chapter-insight { background: var(--paper-sky); }
.insight-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.perspective { margin: 30px 0; max-width: 760px; background: var(--bg-card); border-radius: var(--r-card); padding: 32px 36px; }
.perspective figcaption { font: 600 25px/1.3 var(--serif); margin-bottom: 26px; color: var(--tx); }
.perspective-row + .perspective-row { margin-top: 28px; }
.perspective-who { display: flex; justify-content: space-between; font-size: 14px; color: var(--tx-body); margin-bottom: 20px; }
.perspective-who b { font-variant-numeric: tabular-nums; }
.perspective-track { position: relative; height: 12px; margin: 0 18px; border-radius: var(--r-pill); background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 10%),var(--bg-soft); border: 1px solid var(--line); }
.perspective-dot { position: absolute; left: var(--position); top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 600 16px var(--sans); background: var(--paper-blue); color: var(--bg-card); }
.perspective-dot.other { background: var(--acc); color: var(--on-acc); }
.perspective-poles { display: flex; justify-content: space-between; gap: 24px; margin-top: 22px; font-size: 13px; color: var(--tx-2); }
.perspective-poles span:last-child { text-align: right; }
.perspective-prompt { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; }
.perspective-prompt strong { color: var(--acc); }
.chapter-sets { background: var(--bg); }
.catalog-head { padding-bottom: 24px; }
.catalog-facts { background: var(--paper-butter); border-radius: var(--r); padding: 14px 20px; font-size: 14px; text-align: left; }
.catalog-facts .cf-price b { font-size: 26px; font-weight: 600; }
.decks { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-top: 28px; }
.decks-soon { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 36px; margin-top: 10px; }
.deck { --deck-tint: color-mix(in srgb,var(--acc-line) 28%,var(--bg-card)); background: var(--deck-tint); padding: 26px; border: 1px solid color-mix(in srgb,var(--acc-line) 45%,var(--line)); border-radius: var(--r-card); }
.deck:nth-child(even) { border-radius: var(--r-card); }
.deck::before,.deck::after { content: none; }
.deck:hover,.deck:nth-child(even):hover { transform: translateY(-4px); box-shadow: var(--lift); }
.deck-magnets { position: relative; display: flex; align-items: center; height: 50px; margin-bottom: 25px; }
.deck-magnets i { display: block; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--tx-3); background: var(--bg-card); }
.deck-magnets i + i { margin-left: -12px; background: var(--acc-line); }
.deck-magnets i:nth-child(3) { background: transparent; }
.deck-magnets span { margin-left: auto; font-size: 32px; color: var(--tx-2); }
.deck h3 { font-size: 29px; line-height: 1.12; margin-bottom: 12px; min-height: 2.24em; }
.deck .deck-meta { font-size: 14px; color: var(--tx-2); min-height: 3.1em; }
.deck .deck-topics { font-size: 14px; }
.deck-question { font: 600 20px/1.4 var(--serif); color: var(--tx); margin: 20px 0 6px; padding: 20px 0; border-top: 1px solid color-mix(in srgb,var(--tx) 20%,transparent); min-height: 145px; }
.deck-question span { display: block; font: 400 12px/1.5 var(--sans); color: var(--tx-2); margin-bottom: 10px; }
.deck .foot { flex-direction: column; align-items: stretch; gap: 14px; border-color: color-mix(in srgb,var(--tx) 20%,transparent); }
.deck .foot .btn { margin-left: 0; width: 100%; }
.deck-toggle { font-size: 14px; min-height: 44px; align-self: flex-start; color: var(--tx-body); }
.preview-questions { display: block; }
.deck .perex,.deck .ex-item,.preview-questions li { font-size: 16px; }
.deck .interest { margin-left: 0; }
.deck .interest input[type=email] { min-height: 44px; font-size: 16px; }
/* „Chystá se“ je seznam k přehlédnutí, ne katalog — a od 12. 9. 2026 už to tak
   i vypadá. Dlaždice (podbarvení, rámeček, zaoblení, magnety, štítek) dělaly ze
   čtyř sad bez obsahu čtyři prodejní objekty vedle sebe a soupeřily s mřížkou
   sad, které se koupit dají. Zbyl řádkový výpis oddělený linkou: název, komu,
   věta, e-mail. Nic z toho, co drží katalog výš, se sem nedědí. */
.deck.soon { background: none; border: 0; border-radius: 0; padding: 13px 0; }
/* Dva sloupce: linka patří všemu od druhého řádku dál, ne sousedu vpravo. */
.decks-soon .deck.soon:nth-child(n+3) { border-top: 1px solid var(--line); }
.deck.soon:hover { transform: none; box-shadow: none; }
.deck.soon .deck-magnets { display: none; }
/* Tři úrovně na řádek, každá jinou vlastností: nadpis patkovým písmem a tmavě,
   cílovka drobná verzálkami s rozpalem (nesoupeří s nadpisem ani s popisem),
   popis normálním textem. Kdyby se lišily jen velikostí, splynou. */
.deck.soon h3 { font: 600 18px/1.25 var(--serif); color: var(--tx); margin-bottom: 3px; min-height: 0; }
.deck.soon .deck-meta { min-height: 0; margin-bottom: 0;
  font: 600 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3); }
/* Štítek „připravujeme“ je v seznamu pod nadpisem „Chystá se“ zbytečný — a s ním
   padá i oddělovací tečka, která by za cílovkou zůstala viset sama. */
.deck.soon .tag-soon,
.deck.soon .deck-meta .sep { display: none; }
.deck.soon .soon-summary { font-size: 14px; line-height: 1.55; margin-top: 7px; color: var(--tx-body); }
/* E-mail nemá být tak široký jako odstavec — je to poslední, ne hlavní věc řádku.
   Proto `flex:0 1` se stropem, ne `1 1 auto` roztažené přes celý sloupec. */
.deck.soon .foot { flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 6px; margin-top: 8px; padding-top: 0; border: 0; }
.deck.soon .interest { flex: 0 1 auto; flex-wrap: nowrap; gap: 6px; }
.deck.soon .interest input[type=email] { flex: 0 1 180px; min-height: 34px;
  padding: 5px 10px; font-size: 14px; background: none; }
.deck.soon .foot .btn { width: auto; flex: 0 0 auto; min-height: 34px;
  padding-top: 5px; padding-bottom: 5px; font-size: 13.5px; }
.soon-head { margin-top: 44px; }
.soon-head h3 { font-size: 24px; }
.soon-head .caption { font-size: 14px; }
.tag-soon { font-size: 12px; color: var(--tx-body); background: var(--bg-card); }
.chapter-rules { background: var(--paper-butter); }
.chapter-rules .note { background: var(--bg-card); box-shadow: none; padding: 30px; border-radius: var(--r-card); max-width: 800px; }
.chapter-rules .note p { font-size: 17px; }
.chapter-caution { background: var(--bg); }
.chapter-caution .note.warn { background: var(--paper-peach); border: 0; border-radius: var(--r-card); max-width: 800px; padding: 30px; }
.chapter-caution .note p { font-size: 16px; }
.chapter-gift { background: var(--paper-lavender); }
.chapter-gift .gift-points { gap: 20px; margin-top: 30px; }
.chapter-gift .gift-points li { border: 0; border-radius: var(--r-card); padding: 26px; }
.chapter-gift .gift-points b { font: 600 24px/1.25 var(--serif); margin-bottom: 12px; }
.chapter-gift .gift-points span { font-size: 16px; line-height: 1.65; }
.chapter-gift .note { border: 0; border-radius: var(--r); padding: 24px; }
.chapter-order { background: var(--paper-sage); }
.chapter-order .order { border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: none; }
.chapter-order .order:hover { transform: none; box-shadow: none; }
.picked .line:hover { transform: none; }
.picked .line .nm small { font-size: 14px; }
.qty button { width: 44px; height: 44px; }
.qty input { width: 38px; height: 44px; font-size: 16px; }
.f label { font-size: 12px; }
.f input,.f textarea,.f select { font-size: 16px; }
.chapter-about { background: var(--paper-peach); }
.chapter-about a[href^="mailto:"] { text-decoration: underline; text-underline-offset: 5px; }
.chapter-insight .arch { box-shadow: none; border-radius: var(--r-card); }
.chapter-insight .caption { max-width: 760px; line-height: 1.9; }
/* Navigace na kotvu nesmí čekat, až doběhne animace celé kapitoly. */
html.motion-ready main > section { opacity: 1; transform: none; transition: none; }
@media (max-width: 960px) {
  .hero-grid { gap: 36px; }
  .hero.xl h1 { font-size: 56px; }
  .decks,.decks-soon { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .how-grid { grid-template-columns: 1fr; gap: 38px; }
}
@media (max-width: 760px) {
  section { padding: 58px 0; }
  .hero { padding: 42px 0 52px; }
  .hero-grid,.insight-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-text { padding-top: 0; }
  .hero.xl h1 { font-size: clamp(44px,9vw,64px); max-width: 620px; }
  .hero-film { order: 0; transform: none; }
  .hero-film video { aspect-ratio: 16/9; height: auto; }
  .hero-film figcaption { font-size: 14px; }
  .bar .nm span { display: none; }
  .bar .wrap { padding-top: 10px; padding-bottom: 10px; }
  .bar nav { gap: 14px; }
  .bar nav a[href="/#sets"] { display: inline; }
  .chapter-how,.chapter-insight,.chapter-sets,.chapter-rules,.chapter-caution,
  .chapter-gift,.chapter-order,.chapter-about { border-top: 0; }
  .chapter-how .kicker,.chapter-insight .kicker,.chapter-sets .kicker,.chapter-rules .kicker,
  .chapter-caution .kicker,.chapter-gift .kicker,.chapter-order .kicker,.chapter-about .kicker {
    background: transparent; padding: 0; border: 0; color: var(--acc-2);
  }
  .chapter-intro { background: var(--bg); }
  .chapter-how,.chapter-order { background: var(--paper-sage); }
  .chapter-insight { background: var(--paper-sky); }
  .chapter-sets,.chapter-caution { background: var(--bg); }
  .chapter-rules { background: var(--paper-butter); }
  .chapter-gift { background: var(--paper-lavender); }
  .chapter-about { background: var(--paper-peach); }
  .perspective { padding: 24px; }
  .catalog-head { gap: 20px; }
}
@media (max-width: 600px) {
  .bar .wrap { gap: 10px; }
  .bar .nm { white-space: nowrap; flex-shrink: 0; font-size: 25px; }
  .bar nav { gap: 10px; }
  .bar .btn.sm { padding-left: 12px; padding-right: 12px; }
  .order { padding: 24px 18px; }
  .picked .line { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 16px; }
  .picked .line[hidden] { display: none; }
  .picked .line .nm { grid-column: 1 / -1; font-size: 16px; }
  .picked .line .nm small { margin-top: 6px; }
  .picked .line .qty { justify-self: start; }
  .picked .line .linkbtn { grid-column: 1 / -1; justify-self: end; min-height: 36px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .decks,.decks-soon,.steps { grid-template-columns: 1fr; }
  .decks-soon .deck.soon:nth-child(n+2) { border-top: 1px solid var(--line); }
  .deck h3,.deck .deck-meta,.deck-question { min-height: 0; }
  .deck h3 { max-width: 280px; }
  .deck .foot { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .deck .foot .btn { width: auto; margin-left: auto; }
  .deck .interest { width: 100%; }
  .deck.soon .interest .btn { width: auto; }
  .steps .step { position: relative; padding-left: 84px; }
  .steps .n { position: absolute; top: 26px; left: 22px; }
  .steps h3 { font-size: 23px; }
  .how-grid { gap: 30px; margin-top: 24px; }
  .how-flow { gap: 26px; }
  .how-flow h3 { font-size: 23px; }
  .hero .kicker { font-size: 11px; letter-spacing: .06em; }
  .chapter-gift .gift-points { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-film video { display: block; }
  .hero-film,.hero-film:hover,.deck:hover,.deck:nth-child(even):hover { transform: none; }
  .btn:hover,.btn.ghost:hover { transform: none; }
}