/* =====================================================================
   Papírový svět dětí – centrální styl celého webu
   ---------------------------------------------------------------------
   Všechny stránky načítají tento jeden soubor. Barvy, zaoblení, stíny
   a písmo se mění v sekci 1 (TOKENY) – změna se projeví všude.

   Obsah:
     1. Tokeny (barvy, rozměry, stíny)
     2. Základ (pozadí, písmo, odkazy)
     3. Hlavička + menu
     4. Rozvržení stránky (postranní panel + obsah)
     5. Komponenty: panel, štítky, volby (chips), tlačítka, formuláře
     6. Galerie a karty obrázků
     7. Textové bloky (SEO texty, články)
     8. Patička, cookie lišta, drobnosti
     9. Stránka: Náhled obrázku
    10. Stránka: Generátor příkladů
    11. Stránka: Vymalovat online
    12. Stránka: Puzzle
    13. Mobilní úpravy
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. TOKENY
   --------------------------------------------------------------------- */
:root{
  /* barvy značky */
  --pink:   #ff67b3;
  --violet: #8b5cf6;
  --blue:   #60a5fa;
  --mint:   #34d399;
  --sun:    #fbbf24;

  /* text a plochy */
  --ink:        #1f1b3d;   /* hlavní text */
  --ink-soft:   #47436a;   /* odstavce */
  --muted:      #77739a;   /* popisky */
  --accent-ink: #5b3fd1;   /* nadpisy v textech, odkazy */
  --paper:      #ffffff;
  --bg:         #f8f6ff;
  --tint:       #f2eeff;   /* jemně fialové podbarvení */
  --line:       rgba(91, 63, 209, .14);
  --line-strong:rgba(91, 63, 209, .28);

  /* přechody */
  --rainbow:     linear-gradient(90deg, #ff67b3, #8b5cf6, #60a5fa, #34d399, #fbbf24);
  --grad-primary:linear-gradient(135deg, #8b5cf6, #ff67b3);
  --grad-mint:   linear-gradient(135deg, #2fcf94, #4f9ef8);
  --rainbow-soft:linear-gradient(90deg, rgba(255,103,179,.55), rgba(139,92,246,.55), rgba(96,165,250,.55), rgba(52,211,153,.50), rgba(251,191,36,.50));

  /* původní výplně (z první verze webu)
     --fill-panel: průsvitná bílá přes duhu = jemně duhový podklad panelů
     --fill-pastel: pastelový přechod kolem obrázků */
  --fill-panel:  linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.72));
  --fill-chip:   linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86));
  --fill-pastel: linear-gradient(135deg, #ffb3ec, #c7d2fe, #a7f3d0, #fde68a);

  /* zaoblení */
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  /* stíny */
  --sh-sm: 0 1px 2px rgba(40, 24, 110, .05), 0 4px 14px rgba(40, 24, 110, .06);
  --sh-md: 0 10px 28px rgba(40, 24, 110, .10);
  --sh-lg: 0 22px 50px rgba(40, 24, 110, .16);

  /* „samolepkový“ obrys tlačítek */
  --btn-edge: #2a2350;

  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --page-max: 1200px;
}


/* ---------------------------------------------------------------------
   2. ZÁKLAD
   --------------------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: transparent;
  overflow-x: hidden;
}

/* Barevné skvrny + tečky jsou PŘIPNUTÉ k oknu (position: fixed),
   takže se při scrollování neopakují a nevzniká žádný „šev“. */
body::before,
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before{
  background:
    radial-gradient(900px 600px at 8% 0%,   rgba(139, 92, 246, .16), transparent 60%),
    radial-gradient(800px 560px at 96% 8%,  rgba(255, 103, 179, .14), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(96, 165, 250, .14), transparent 62%),
    var(--bg);
}
body::after{
  background-image:
    radial-gradient(circle at 20px 20px, rgba(99, 102, 241, .10) 1.1px, transparent 1.7px),
    radial-gradient(circle at 10px 10px, rgba(255, 103, 179, .09) 1.1px, transparent 1.7px);
  background-size: 44px 44px, 54px 54px;
}

img{ max-width: 100%; }

a{ color: var(--accent-ink); }

h1, h2, h3, h4{
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.2;
}

:focus-visible{
  outline: 3px solid rgba(139, 92, 246, .55);
  outline-offset: 2px;
  border-radius: 8px;
}

::selection{ background: rgba(139, 92, 246, .22); }


/* ---------------------------------------------------------------------
   3. HLAVIČKA + MENU
   --------------------------------------------------------------------- */
.site-header{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 18px 16px 4px;
  position: relative;
}

/* velký banner (obsahové stránky) */
.banner{
  display: block;
  width: 100%;          /* od levého okraje panelu po pravý okraj galerie */
  margin: 0 auto;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--paper);
  box-shadow: var(--sh-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.banner:hover{ transform: translateY(-2px); box-shadow: var(--sh-lg); }
.banner img{
  display: block;
  width: 100%;
  height: auto;
}

/* menu */
.topnav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 16px 0 6px;
}
.topnav .pill{
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) padding-box,
    var(--rainbow) border-box;
  border: 2px solid transparent;
  box-shadow: var(--sh-sm);
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.topnav .pill:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  filter: hue-rotate(14deg) saturate(1.08);
}
.topnav .pill.is-active{
  color: #fff;
  background: var(--grad-primary);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(139, 92, 246, .30);
}

/* kompaktní hlavička (malování, puzzle) – logo + menu v jednom řádku */
.site-header.is-compact{
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
}
.site-header.is-compact .topnav{
  flex: 1;
  justify-content: flex-end;
  padding: 0;
}
.site-header.is-compact .topnav .pill{
  padding: 7px 14px;
  font-size: 14px;
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand img{
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: var(--sh-sm);
}
.brand span{
  font-weight: 900;
  font-size: 17px;
  line-height: 1.1;
}


/* ---------------------------------------------------------------------
   4. ROZVRŽENÍ STRÁNKY
   --------------------------------------------------------------------- */
.page{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 18px 16px 32px;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.page.is-single{               /* stránky bez postranního panelu */
  grid-template-columns: minmax(0, 1fr);
}
.page.is-narrow{
  max-width: 980px;
  grid-template-columns: minmax(0, 1fr);
}
.page > section,
.page > article{ min-width: 0; }

.sidebar{
  position: sticky;
  top: 16px;
}


/* ---------------------------------------------------------------------
   5. KOMPONENTY
   --------------------------------------------------------------------- */

/* Panel s duhovým rámečkem – základní „krabička“ webu */
.panel,
.rainbow-frame{
  background:
    var(--fill-panel) padding-box,
    var(--rainbow) border-box;
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 18px;
}

/* Nadpis v panelu */
.side-title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}
.side-title + .side-title,
.chipgroup + .side-title{ margin-top: 20px; }
.dot{
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--grad-primary);
}

/* Štítek */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  color: var(--accent-ink);
  background: var(--tint);
}

.hint{
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}

/* Volby / odkazy v postranním panelu */
.chipgroup{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chip{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  background:
    var(--fill-chip) padding-box,
    var(--rainbow-soft) border-box;
  border: 2px solid transparent;
  box-shadow: 0 6px 14px rgba(40, 24, 110, .07);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.chip:hover{
  transform: translateX(3px);
  box-shadow: 0 10px 20px rgba(40, 24, 110, .11);
  filter: hue-rotate(10deg) saturate(1.06);
}
.chip input{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--violet);
}
.chip:has(input:checked),
.chip.is-active{
  background:
    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)) padding-box,
    var(--rainbow) border-box;
  color: var(--accent-ink);
  box-shadow: 0 10px 22px rgba(139, 92, 246, .18);
}

/* barevné tečky u odkazů na témata – střídají se barvy značky */
a.chip.theme-link::before{
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--chip-dot, var(--violet));
}
a.chip.theme-link:nth-child(5n+1){ --chip-dot: var(--pink); }
a.chip.theme-link:nth-child(5n+2){ --chip-dot: var(--violet); }
a.chip.theme-link:nth-child(5n+3){ --chip-dot: var(--blue); }
a.chip.theme-link:nth-child(5n+4){ --chip-dot: var(--mint); }
a.chip.theme-link:nth-child(5n+5){ --chip-dot: var(--sun); }

/* menší „mrak“ odkazů (další témata) */
.chipgroup.is-cloud{
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.chipgroup.is-cloud .chip{
  padding: 5px 11px;
  font-size: 13px;
  gap: 7px;
}
.chipgroup.is-cloud .chip:hover{ transform: translateY(-1px); }
.chipgroup.is-cloud a.chip.theme-link::before{ width: 8px; height: 8px; }

.filters-footer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.panel-note{
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* ---------- Tlačítka ----------
   .btn                 základ
   .btn-primary         fialovo-růžové  (Stáhnout, Uložit…)
   .btn-mint            zeleno-modré    (Vymalovat online)
   .btn-light           bílé            (Puzzle, Zpět, vedlejší akce)
   .btn-dark            tmavé           (Nové puzzle)
   Starší názvy (btn-download, btn-online, btn-puzzle, btn2…) fungují dál. */
.btn,
.btn2,
.cookie-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: 2px solid var(--btn-edge);
  box-shadow: 0 3px 0 var(--btn-edge);
  font-family: var(--font);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  background: var(--grad-primary);
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
.btn:hover,
.btn2:hover,
.cookie-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--btn-edge);
  filter: saturate(1.08) brightness(1.03);
}
.btn:active,
.btn2:active,
.cookie-btn:active{
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--btn-edge);
}
.btn:disabled{ opacity: .5; cursor: not-allowed; }

.btn-primary, .btn-download, .cookie-btn, .btnPrimary{ color: #fff; background: var(--grad-primary); }
.btn-mint, .btn-online                      { color: #fff; background: var(--grad-mint); }
.btn-light, .btn-puzzle, .btn2, .btn.ghost, .btnGhost{ color: var(--ink); background: var(--paper); }
.btn-dark, .btn.primary                     { color: #fff; background: var(--ink); }

.btn-sm{ min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 12px; }
.btn-block{ display: flex; width: 100%; }

/* ---------- Formuláře ---------- */
input[type="number"],
input[type="text"],
select,
.select{
  height: 42px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 2px solid var(--line);
  background: var(--paper);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="number"]:focus,
input[type="text"]:focus,
select:focus{
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .16);
}
input[type="range"]{ accent-color: var(--violet); }
input[type="checkbox"]{ accent-color: var(--violet); }

.field{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.field label{
  font-weight: 800;
  font-size: 14px;
}
.field small{
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}
.field-check{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.field-check input{ width: 20px; height: 20px; margin: 0; }


/* ---------------------------------------------------------------------
   6. GALERIE A KARTY OBRÁZKŮ
   --------------------------------------------------------------------- */
.intro-short{
  text-align: center;
  max-width: 760px;
  margin: 4px auto 26px;
}
.intro-short h1{
  margin: 0 0 10px;
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 900;
  letter-spacing: -.01em;
}
.intro-short p{
  margin: 0;
  font-size: 16.5px;
  color: var(--ink-soft);
}

.toolbar{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* Karta = „list papíru“ s duhovým okrajem */
.gallery .card{
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: var(--r-lg);
  background:
    var(--fill-pastel) padding-box,
    var(--rainbow) border-box;
  border: 2px solid transparent;
  box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery .card:hover{
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

/* Obrázek – vždy stejně velký „list“, svislé i vodorovné obrázky
   jsou vycentrované na bílém podkladu */
.gallery .card img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: contain;
  padding: 8px;
  background: var(--paper);
  border-radius: var(--r-md);
  border: 2px solid rgba(255, 255, 255, .7);
  box-shadow: 0 6px 16px rgba(40, 24, 110, .12);
}

/* Karta v tématu – celý obrázek je odkaz na náhled */
.gallery .card a.preview-link{
  position: relative;
  display: block;
  border-radius: var(--r-md);
  text-decoration: none;
}
.gallery .card a.preview-link::after{
  content: "Otevřít";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 6px);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: var(--grad-primary);
  box-shadow: 0 6px 16px rgba(139, 92, 246, .35);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
@media (hover: hover){
  .gallery .card:hover a.preview-link::after{
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Tlačítka pod obrázkem: 2 vedle sebe, třetí přes celou šířku */
.gallery .card .actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.gallery .card .actions .btn{
  min-height: 38px;
  padding: 0 8px;
  font-size: 13px;
  border-radius: 12px;
  white-space: normal;
}
.gallery .card .actions .btn-puzzle,
.gallery .card .actions > :nth-child(3){ grid-column: 1 / -1; }

/* Karty puzzle (výběr) – jen tlačítko Složit */
.gallery .card .actions .btn-solve{
  grid-column: 1 / -1;
  color: #fff;
  background: var(--grad-primary);
}


/* ---------------------------------------------------------------------
   7. TEXTOVÉ BLOKY
   --------------------------------------------------------------------- */
.prose,
.seo-text-bottom,
.about-web{
  margin: 40px 0 0;
  padding: clamp(20px, 3.5vw, 36px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.about-web{ margin: 0 0 24px; }
.prose > :first-child,
.seo-text-bottom > :first-child,
.about-web > :first-child{ margin-top: 0; }

.prose h1,
.about-web h1{
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  margin: 0 0 12px;
}
.prose h2,
.seo-text-bottom h2,
.about-web h2{
  margin: 30px 0 10px;
  font-size: 20px;
  font-weight: 900;
  color: var(--accent-ink);
}
.prose h3,
.seo-text-bottom h3,
.about-web h3{
  margin: 22px 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.prose p,
.seo-text-bottom p,
.about-web p{ margin: 0 0 14px; }
.prose ul,
.seo-text-bottom ul{ margin: 10px 0 14px; padding-left: 22px; }
.prose li,
.seo-text-bottom li{ margin-bottom: 6px; }
.prose a,
.seo-text-bottom a,
.about-web a{
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(91, 63, 209, .3);
  text-underline-offset: 3px;
}
.prose a:hover,
.seo-text-bottom a:hover{ text-decoration-color: var(--accent-ink); }
.prose strong,
.seo-text-bottom strong{ color: var(--ink); }
.prose code{
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--tint);
}

/* Článek (Studie vývoje dítěte) */
.article .meta{
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.article h1{ text-align: center; }
.article h2{
  font-size: 23px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--tint);
  margin-top: 40px;
}
.article p{ font-size: 17px; }
.article h4{ margin: 0 0 8px; font-weight: 900; }
.info-box,
.warning-box{
  margin: 24px 0;
  padding: 18px 22px;
  border-radius: var(--r-md);
}
.info-box{
  background: #effcf6;
  border: 1px solid #bdf0d8;
}
.info-box h4{ color: #157a52; }
.info-box.is-toc{
  background: var(--tint);
  border-color: var(--line);
}
.info-box.is-toc h4{ color: var(--accent-ink); }
.warning-box{
  background: #fff8e6;
  border-left: 5px solid var(--sun);
}
blockquote{
  margin: 28px 0;
  padding: 4px 0 4px 18px;
  border-left: 4px solid var(--violet);
  font-size: 18px;
  font-style: italic;
  color: var(--ink-soft);
}


/* ---------------------------------------------------------------------
   8. PATIČKA, COOKIE LIŠTA, DROBNOSTI
   --------------------------------------------------------------------- */
.site-footer{
  max-width: var(--page-max);
  margin: 8px auto 24px;
  padding: 0 16px;
}
.footer-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
  border-radius: var(--r-lg);
  background:
    var(--fill-panel) padding-box,
    var(--rainbow) border-box;
  border: 2px solid transparent;
  box-shadow: var(--sh-sm);
}
.footer-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.footer-links a{
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  background:
    var(--fill-chip) padding-box,
    var(--rainbow-soft) border-box;
  border: 2px solid transparent;
  transition: transform .15s ease, filter .2s ease;
}
.footer-links a:hover{
  transform: translateY(-1px);
  filter: hue-rotate(10deg) saturate(1.06);
}
.footer-meta{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.dotsep{ margin: 0 6px; opacity: .6; }

/* Cookie lišta – plovoucí kartička vlevo dole */
.cookie-bar{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)) padding-box,
    var(--rainbow) border-box;
  border: 2px solid transparent;
  box-shadow: var(--sh-lg);
}
.cookie-bar[hidden]{ display: none; }
.cookie-text{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.cookie-text a{ color: var(--accent-ink); }
.cookie-actions{ flex: 0 0 auto; }

.skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  box-shadow: var(--sh-md);
}
.skip-link:focus{ left: 14px; }

.noscript{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 90px;
  z-index: 999;
  padding: 10px 14px;
  border-radius: var(--r-md);
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: rgba(31, 27, 61, .92);
}

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 1500;
  transform: translate(-50%, 10px);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  color: #fff;
  background: var(--ink);
  box-shadow: var(--sh-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.on{ opacity: 1; transform: translate(-50%, 0); }


/* ---------------------------------------------------------------------
   9. STRÁNKA: NÁHLED OBRÁZKU
   --------------------------------------------------------------------- */
.preview-title{
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}
.preview-actions{
  display: grid;
  gap: 10px;
}
.preview-stage{
  padding: 14px;
  border-radius: var(--r-xl);
  background:
    var(--fill-pastel) padding-box,
    var(--rainbow) border-box;
  border: 2px solid transparent;
  box-shadow: var(--sh-md);
}
.preview-stage img{
  display: block;
  width: 100%;
  height: min(78vh, 900px);
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--paper);
}
.preview-empty{
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}


/* ---------------------------------------------------------------------
   10. STRÁNKA: GENERÁTOR PŘÍKLADŮ
   --------------------------------------------------------------------- */
.generator-actions{
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.sheet-wrapper{
  padding: clamp(18px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}
.print-header{
  text-align: center;
  font-weight: 800;
  margin-bottom: 18px;
  color: var(--muted);
}


/* ---------------------------------------------------------------------
   11. STRÁNKA: VYMALOVAT ONLINE
   --------------------------------------------------------------------- */
.tool-page{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px 16px 0;
}

/* horní ovládací panel */
.paint-bar{ padding: 12px 14px; }
.paint-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.paint-head h1{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}
.paint-head .lead{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.paint-head .acts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbar-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.seg,
.rangeWrap{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
}
.segLabel,
.small{
  margin: 0 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.toolBtn,
.shapeBtn{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 2px solid var(--line);
  background: var(--paper);
  font-size: 19px;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.toolBtn:hover,
.shapeBtn:hover{ border-color: var(--line-strong); }
.toolBtn:active,
.shapeBtn:active{ transform: scale(.95); }
.toolBtn.active,
.shapeBtn.active{
  background: var(--tint);
  border-color: var(--violet);
  box-shadow: 0 4px 12px rgba(139, 92, 246, .22);
}
.shapeIconCircle,
.shapeIconSquare{
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
}
.shapeIconCircle{ border-radius: 999px; }
.rangeWrap input[type="range"]{ width: 100px; }
.rangeWrap .btn{ min-height: 32px; padding: 0 10px; border-radius: 10px; }
.color-pick{
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}

/* paleta */
.colors{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.colorRow{
  display: flex;
  gap: 9px;
  padding: 4px 4px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.colorRow::-webkit-scrollbar{ display: none; }
.swatch{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(31, 27, 61, .12);
  box-shadow: 0 2px 6px rgba(31, 27, 61, .12);
  cursor: pointer;
  transition: transform .1s ease;
}
.swatch:hover{ transform: scale(1.08); }
.swatch.active{
  transform: scale(1.18);
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--violet), 0 4px 12px rgba(139, 92, 246, .35);
}

/* plocha s obrázkem */
.paint-stage{
  position: relative;
  height: calc(100vh - 290px);
  min-height: 460px;
  margin-top: 14px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}
.stage-hint{
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  pointer-events: none;
}
.viewport{
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;   /* při kreslení se nescrolluje stránka */
  cursor: crosshair;
  background:
    radial-gradient(circle at 12px 12px, rgba(91, 63, 209, .07) 1.2px, transparent 1.8px) 0 0 / 24px 24px,
    #fbfaff;
}
canvas#view{
  display: block;
  width: 100%;
  height: 100%;
}
#cursorPreview{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  pointer-events: none;
  transform: translate(-9999px, -9999px);
  border: 2px solid rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}


/* ---------------------------------------------------------------------
   12. STRÁNKA: PUZZLE
   --------------------------------------------------------------------- */
.puzzle-bar{ padding: 12px 14px; }
.puzzle-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.puzzle-head h1{
  margin: 0 auto 0 0;
  font-size: 20px;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.puzzle-head .controls{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.stat{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
}
.stat span{ color: var(--ink); font-weight: 900; }
.puzzle-head .btn{ min-height: 38px; }

.layout{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  margin-top: 14px;
}
.tool-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}
.tool-card .head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.tool-card .head .left{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tool-card .head strong{ font-size: 15px; font-weight: 900; }
.tool-card .head span{ font-size: 13px; color: var(--muted); }

.boardWrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: min(70vh, 640px);
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12px 12px, rgba(91, 63, 209, .10) 1.3px, transparent 1.9px) 0 0 / 24px 24px,
    linear-gradient(160deg, #f3efff, #eef6ff 60%, #fdf0f8);
}
.boardArea{
  position: relative;
  touch-action: none;
  user-select: none;
  background: rgba(255, 255, 255, .55);
  border-radius: 14px;
}
.boardFrame{
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px dashed rgba(139, 92, 246, .45);
  border-radius: 14px;
  pointer-events: none;
}
.previewOverlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity .2s ease;
}
.previewOverlay.on{ opacity: .28; }
.outlineCanvas{
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.outlineCanvas.on{ opacity: 1; }

.trayWrap{ height: 100%; }
.tray{
  position: relative;
  flex: 1;
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 103, 179, .08), transparent 42%),
    radial-gradient(circle at 90% 30%, rgba(96, 165, 250, .10), transparent 42%),
    radial-gradient(circle at 50% 90%, rgba(52, 211, 153, .08), transparent 42%),
    var(--paper);
}
.piece{
  position: absolute;
  touch-action: none;
  user-select: none;
  cursor: grab;
  will-change: transform;
  filter: drop-shadow(0 8px 14px rgba(40, 24, 110, .22));
}
.piece:active{ cursor: grabbing; }
.piece.locked{
  cursor: default;
  filter: none;
}
.stage{
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.stage .piece{ pointer-events: auto; }


/* ---------------------------------------------------------------------
   13. MOBILNÍ ÚPRAVY
   --------------------------------------------------------------------- */
@media (max-width: 980px){
  .page{
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .sidebar{ position: static; }

  /* postranní volby se na mobilu řadí vedle sebe, ne pod sebe */
  .sidebar .chipgroup{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sidebar .chip{
    padding: 6px 12px;
    font-size: 14px;
  }
  .sidebar .chip:hover{ transform: none; }
  .sidebar .side-title{ margin-bottom: 8px; }

  .layout{ grid-template-columns: minmax(0, 1fr); }
  /* kompaktní hlavička: logo nahoře, menu pod ním v jednom posuvném řádku */
  .site-header.is-compact{ flex-wrap: wrap; gap: 10px; }
  .site-header.is-compact .topnav{
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 2px 6px;
  }
  .site-header.is-compact .topnav::-webkit-scrollbar{ display: none; }
  .site-header.is-compact .topnav .pill{ flex: 0 0 auto; box-shadow: none; }
}

@media (max-width: 640px){
  .site-header{ padding: 10px 12px 0; }
  .banner{ border-radius: var(--r-lg); border-width: 2px; }
  .topnav{ gap: 6px; padding: 12px 0 2px; }
  .topnav .pill{ padding: 7px 12px; font-size: 14px; }

  .page{ padding: 12px 12px 24px; }

  /* postranní panel na telefonu co nejmenší, ať jsou obrázky hned vidět */
  .sidebar .chip{ padding: 5px 10px; font-size: 13px; gap: 6px; }
  .sidebar a.chip.theme-link::before{ width: 8px; height: 8px; }
  .sidebar .chip input{ width: 16px; height: 16px; }
  .sidebar .side-title{ font-size: 13px; margin: 0 0 8px; }
  .sidebar .filters-footer{ margin-top: 10px; }
  .panel,
  .rainbow-frame{ padding: 14px; }

  .intro-short{ margin-bottom: 18px; }
  .intro-short p{ font-size: 15px; }

  /* galerie: 2 sloupce i na telefonu */
  .gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .gallery .card{ padding: 7px; border-radius: var(--r-md); }
  .gallery .card img{ padding: 5px; border-radius: 12px; }
  .gallery .card .actions{
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 8px;
  }
  .gallery .card .actions .btn{
    min-height: 34px;
    font-size: 12.5px;
    border-radius: 10px;
  }

  .cookie-bar{
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    padding: 12px;
  }
  .cookie-text{ font-size: 13px; }

  .tool-page{ padding: 10px 10px 0; }
  .paint-head h1{ display: none; }
  .paint-head .acts .btn span{ display: none; }   /* jen ikony */
  .paint-head .acts .btn{ padding: 0 12px; }
  .segLabel{ display: none; }
  .paint-stage{
    height: calc(100vh - 250px);
    min-height: 380px;
    border-radius: var(--r-lg);
  }
  .stage-hint{ display: none; }
  .brand span{ font-size: 15px; }
  .brand img{ width: 40px; height: 40px; }
  .boardWrap{ min-height: 320px; height: 52vh; }
  .tray{ min-height: 320px; }
}


/* ---------------------------------------------------------------------
   14. TISK – na papír nejde pozadí ani lišty
   --------------------------------------------------------------------- */
@media print{
  body::before,
  body::after,
  .cookie-bar,
  .site-header,
  .site-footer{ display: none !important; }
  html, body{ background: #fff !important; }
}
.filters-footer + .side-title{ margin-top: 22px; }
.prose hr{ border: none; border-top: 1px solid var(--line); margin: 32px 0; }
.prose .row{ display: grid; gap: 8px; }


/* ---------------------------------------------------------------------
   15. TELEFONY A TABLETY – dotykové ovládání a „aplikační režim“
   ---------------------------------------------------------------------
   Třídy na <html> nastavuje site.js:
     .is-touch     ovládání prstem
     .is-phone     telefon          .is-tablet   tablet
     .is-landscape na šířku
     .app-mode     malování a puzzle vyplní přesně jednu obrazovku
   --------------------------------------------------------------------- */

/* větší cíle pro prst (doporučené minimum je cca 44 px) */
.is-touch .btn,
.is-touch .btn2{ min-height: 44px; }
.is-touch .btn-sm{ min-height: 40px; }
.is-touch .toolBtn,
.is-touch .shapeBtn{ width: 46px; height: 46px; font-size: 21px; }
.is-touch .swatch{ width: 34px; height: 34px; }
.is-touch .chip{ min-height: 40px; }
.is-touch .topnav .pill{ min-height: 40px; }
.is-touch input[type="range"]{ height: 28px; }
.is-touch .gallery .card:hover{ transform: none; }   /* žádné „poskakování“ po ťuknutí */

/* dílek puzzle při tažení – trochu se zvedne, ať je vidět pod prstem */
.piece.dragging{
  transform: scale(1.08);
  filter: drop-shadow(0 14px 22px rgba(40, 24, 110, .35));
  z-index: 9999 !important;
}

/* ---------- Aplikační režim: nástroj = jedna obrazovka ---------- */
.app-mode .tool-app{
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100vh;
  height: 100svh;          /* stabilní výška i při skrývání lišty prohlížeče */
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  max-width: none;
}
.app-mode .tool-app > .panel{
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: var(--r-md);
}

/* malování: plocha vyplní zbytek obrazovky */
.app-mode .tool-app .paint-stage{
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border-radius: var(--r-md);
}
.app-mode .paint-head h1{ display: none; }
.app-mode .toolbar-row{ margin-top: 8px; gap: 8px; }
.app-mode .colors{ margin-top: 6px; gap: 2px; }
.app-mode .stage-hint{ display: none; }

/* puzzle: plocha a zásobník dílků jsou vždy vidět najednou */
.app-mode .tool-app .layout{
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr);   /* na výšku: nad sebou */
}
.app-mode.is-landscape .tool-app .layout{
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);  /* na šířku: vedle sebe */
  grid-template-rows: minmax(0, 1fr);
}
.app-mode .tool-app .tool-card{ min-height: 0; border-radius: var(--r-md); }
.app-mode .tool-app .tool-card:first-child .head{ display: none; }
.app-mode .tool-app .tool-card .head{ padding: 6px 10px; }
.app-mode .tool-app .tool-card .head span{ display: none; }
.app-mode .tool-app .boardWrap{
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}
.app-mode .tool-app .tray{ min-height: 0; }
.app-mode .puzzle-head{ gap: 6px; }
.app-mode .puzzle-head .controls{ gap: 6px; }
.app-mode .puzzle-head .stat{ height: 32px; padding: 0 9px; font-size: 12.5px; }

/* telefon: ještě úspornější lišty */
@media (max-width: 640px){
  .app-mode .puzzle-head h1{ display: none; }
  .app-mode .puzzle-head .controls{ flex: 1; }
  .app-mode .puzzle-head .select{ height: 40px; font-size: 14px; padding: 0 8px; }
  .app-mode .paint-head .acts .btn{ padding: 0 11px; }
}

/* telefon na šířku (nízká obrazovka) */
@media (max-height: 500px) and (orientation: landscape){
  .app-mode .tool-app{ gap: 6px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .app-mode .tool-app > .panel{ padding: 6px 8px; }

  /* malování: ovládání v levém sloupci, plocha vpravo */
  .app-mode .paint-app{ flex-direction: row; }
  .app-mode .paint-app > .paint-bar{
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-mode .paint-app .toolbar-row{ order: 2; }
  .app-mode .paint-app .colors{ order: 3; margin-top: 8px; }
  .app-mode .paint-app .colorRow + .colorRow{ display: none; }  /* jedna paleta stačí */
  .app-mode .paint-app .zoom-group{ display: none; }            /* přibližuje se dvěma prsty */
  .app-mode .paint-app .paint-head .lead{ width: 100%; }
  .app-mode .paint-app .paint-head .acts{ gap: 6px; }
  .app-mode .paint-app .paint-head .acts .btn span{ display: none; }
  .app-mode .paint-app .toolbar-row{ flex-wrap: wrap; overflow: visible; margin-top: 8px; }
  .app-mode .paint-app .segLabel,
  .app-mode .paint-app .small{ display: none; }
  .app-mode .paint-app .rangeWrap input[type="range"]{ width: 120px; }
  .app-mode .paint-app .colorRow{ flex-wrap: wrap; overflow: visible; gap: 7px; }
  .app-mode .paint-app .swatch{ width: 30px; height: 30px; }

  /* puzzle: jedna řada ovládání, plocha a dílky vedle sebe */
  .app-mode .puzzle-head h1,
  .app-mode .puzzle-head .stat-best{ display: none; }
  .app-mode .puzzle-head{ flex-wrap: nowrap; overflow-x: auto; }
  .app-mode .puzzle-head .controls{ flex-wrap: nowrap; }
  .app-mode .tool-app .tool-card .head{ display: none; }
}

/* telefon na výšku: rekord se schová, ať se ovládání vejde do dvou řádků */
@media (max-width: 640px) and (orientation: portrait){
  .app-mode .puzzle-head .stat-best,
  .app-mode .puzzle-head .opt-text{ display: none; }
  .app-mode .puzzle-head .controls{ display: contents; }   /* všechna tlačítka v jedné řadě za sebou */
  .app-mode .puzzle-head .select{ flex: 1 1 120px; }
}


/* ---------------------------------------------------------------------
   16. POZVÁNKA K NAUČNÉMU TEXTU (nenápadný řádek pod úvodem)
   --------------------------------------------------------------------- */
.intro-short p.more-link{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.4;
}
.more-link a{
  color: var(--muted);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(91, 63, 209, .35);
  text-underline-offset: 4px;
  transition: color .15s ease;
}
.more-link a:hover{ color: var(--accent-ink); }

/* kotva textu – při skoku nezajede pod horní okraj */
#vice-info{ scroll-margin-top: 16px; }

.back-to-top{
  margin: 24px 0 0;
  text-align: center;
}
.back-to-top a{
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none !important;
  color: var(--accent-ink);
  background: var(--tint);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
.more-link a span{
  display: inline-block;
  margin-left: 4px;
  font-weight: 900;
  color: var(--accent-ink);
}


/* ---------------------------------------------------------------------
   17. STRÁNKA OBRÁZKU (z administrace)
   --------------------------------------------------------------------- */
.item-info{
  margin: 18px 0 0;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.item-desc{ margin: 0 0 10px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.item-tags{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-soft); font-size: 15px; }
.item-tags b{ color: var(--ink); }
.item-tags a{ color: var(--accent-ink); font-weight: 800; }
.similar-title{ margin: 32px 0 14px; font-size: 20px; font-weight: 900; color: var(--accent-ink); }
.gallery.similar{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.similar-more{ margin: 16px 0 0; text-align: right; }
.preview-stage img[width]{ width: 100%; }

/* stránka obrázku: nadpis nad obrázkem (na telefonu úplně nahoře) */
.page.item-page{
  grid-template-areas: "side head" "side main";
  row-gap: 0;
}
.item-page > .item-head{ grid-area: head; margin: 0 0 14px; }
.item-page > .sidebar{ grid-area: side; }
.item-page > section{ grid-area: main; }
.item-h1{ margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.15; color: var(--ink); }
.item-h1-sub{ display: block; margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--accent-ink); letter-spacing: .01em; }
.item-auto{ margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
@media (max-width: 980px){
  .page.item-page{ grid-template-areas: "head" "side" "main"; row-gap: 14px; }
  .item-page > .item-head{ margin: 0; }
}