/* reuel.cz: webový styl odvozený z grafických pravidel JAY STUDIO (verze 2).
   Stejné proměnné jako jay-studio.css, tiskové rozměry (mm, pt) převedené na rem.
   Princip: vínová staví stranu (jedna plocha vlevo nahoře, silné linky nad oddíly,
   pruh dole, čísla kroků), modrá nese obsah (text, tenké linky; jako plocha jen
   závěrečný kontakt). Čtyři barvy a bílá na plochách; žádné přechody, stíny,
   zaoblení ani ikony. Logo je znak ze schématu (img/logo.svg) se slovem „jay studio“,
   jednobarevné: bílé na ploše a pruhu, vínové na papíře (lišta s kotvami).
   Nic se nenačítá zvenku.
   Watsonovy stránky mají vlastní styl.css a tenhle soubor nepoužívají. */

/* ---------- písma: Jost a Literata, SIL Open Font License 1.1 (fonts/OFL-*.txt) ----------
   WOFF2 zúžené na latinku (U+0000-017F, obecná interpunkce, €, šipky); znak mimo
   tenhle rozsah vykreslí záložní písmo. Zdrojové .ttf leží vedle a slouží k novému
   zúžení (pyftsubset … --layout-features='*' --name-IDs='*' --flavor=woff2). */
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/Jost-Regular.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/Jost-Medium.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/Jost-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/Literata-Regular.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* barvy: jen tyhle čtyři a bílá na plochách */
  --papir: #F9F6EF;   /* pozadí */
  --vinova: #7A1F3A;  /* plocha, silné linky, pruh, čísla kroků */
  --modra: #1D3461;   /* text, tenké linky, závěrečná plocha */
  --seda: #5F5B54;    /* popisky a vedlejší údaje */
  --bila: #FFFFFF;    /* písmo na vínové a modré ploše */

  /* písma */
  --titulkove: "Jost", Arial, sans-serif;     /* tituly, údaje, popisky */
  --textove: "Literata", Georgia, serif;      /* souvislý text */

  /* rozměry pro web */
  --sirka: 76rem;     /* nejširší obsah */
  --okraj: 1rem;      /* boční okraj na telefonu */
  --sloupec: 13rem;   /* levý sloupec s názvy oddílů */
  --mezera: 2.5rem;   /* mezi sloupci */
  --linka: 3px;       /* silná vínová linka nad oddílem */
  --vlas: 1px;        /* tenká modrá linka */
}

@media (min-width: 48rem) {
  :root { --okraj: 2rem; }
}

/* ---------- strana ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papir);
  color: var(--modra);
  font-family: var(--textove);
  font-size: 1.125rem;
  line-height: 1.65;
  font-kerning: normal;
  overflow-wrap: break-word;
}

p, li { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
b, strong { font-weight: 600; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
a:hover { color: var(--vinova); }

:focus-visible {
  outline: 3px solid var(--vinova);
  outline-offset: 3px;
}

::selection { background: var(--vinova); color: var(--bila); }

/* Obsah drží jednu šířku; na telefonu zbyde po stranách 1rem. */
.obal {
  width: min(var(--sirka), 100% - 2 * var(--okraj));
  margin-inline: auto;
}

/* Odkaz pro klávesnici: objeví se až po stisku Tabu. */
.preskocit {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .5rem 1rem;
  background: var(--modra);
  color: var(--bila);
  font-family: var(--titulkove);
  font-weight: 500;
}
.preskocit:focus { top: 1rem; color: var(--bila); }
.preskocit:focus-visible { outline-color: var(--bila); }

/* ---------- hlavička: vínová plocha vlevo nahoře, údaje vpravo ---------- */
.hlava { overflow-x: clip; }

.hlava-mrizka { display: grid; }

/* Plocha sahá k levému okraji okna. Výplň za okraj obsahu dělá „stín“ bez rozmazání,
   oříznutý shora a zdola; nevzniká tím vodorovné posouvání. */
.plocha {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.5rem;
  min-height: 21rem;
  padding: 1.25rem 0 2rem;
  background: var(--vinova);
  color: var(--bila);
  box-shadow: 0 0 0 100vmax var(--vinova);
  clip-path: inset(0 -100vmax);
}

.plocha :focus-visible { outline-color: var(--bila); }

/* Logo: znak (zjednodušené schéma, img/logo.svg) a slovo „jay studio“. Barvu drží
   i při najetí. Na úvodní stránce vede na projekty jako skryté tlačítko (.skryte),
   proto při najetí nic nenapovídá; logo, které vede domů, se podtrhne. */
.znacka, a.znacka:hover {
  color: var(--bila);
}
.znacka {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: .005em;
  text-decoration: none;
}
a.znacka:not(.skryte):hover { text-decoration: underline; }
.znak {
  flex: none;
  width: 3rem;
  height: 2.4rem;
}
.plocha .znacka { align-self: flex-start; }

/* Nízká plocha: stránky, které nejsou úvodní (projekty, 404). */
.plocha.nizka { min-height: 15rem; }

.plocha h1 {
  margin: 0;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: clamp(2.75rem, 1.2rem + 5.4vw, 5.5rem);
  line-height: .92;
  letter-spacing: -.02em;
}

.vedle {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 1.25rem;
}

.navigace ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  font-family: var(--titulkove);
  font-weight: 500;
  font-size: 1.0625rem;
}
.navigace a {
  text-decoration: none;
  border-bottom: var(--vlas) solid transparent;
}
.navigace a:hover { border-bottom-color: var(--vinova); }

@media (min-width: 60rem) {
  .hlava-mrizka {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: var(--mezera);
  }
  .plocha {
    min-height: min(36rem, 82vh);
    padding: 2rem 2.5rem 2.75rem 0;
    clip-path: inset(0 0 0 -100vmax);
  }
  .vedle {
    justify-content: space-between;
    padding-top: 2.1rem;
  }
}

/* ---------- schéma v hlavičce: kód, model, člověk ---------- */
.schema { margin: 0; }
.schema svg {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
}
.schema figcaption {
  margin-top: 1rem;
  font-family: var(--titulkove);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.schema figcaption span { display: block; }

.schema .hrana { fill: none; stroke: var(--modra); stroke-width: 1.3; }
.schema .vodic { fill: none; stroke: var(--modra); stroke-width: 1; stroke-dasharray: 2 5; }
.schema .prsten { fill: none; stroke: var(--vinova); stroke-width: 1; stroke-dasharray: 3 6; }
.schema .prsten.modry { stroke: var(--modra); }
.schema .zdroj { fill: var(--modra); }
.schema .vysledek { fill: var(--vinova); }
.schema .uzel { fill: var(--papir); stroke: var(--modra); stroke-width: 1.5; }
.schema .uzel.model { stroke: var(--vinova); stroke-width: 2.5; }
.schema text {
  font-family: var(--titulkove);
  font-weight: 500;
  font-size: 16px;
  fill: var(--modra);
  text-anchor: middle;
  dominant-baseline: central;
}
.schema text.popisek { font-size: 15px; font-weight: 400; fill: var(--seda); }
.schema text.popisek.vlevo { text-anchor: start; }
.schema text.popisek.vpravo { text-anchor: end; }
.schema .puls { display: none; }

/* Pohyb jen pro ty, kdo ho nevypnuli: čáry se nakreslí a po nich jednou proběhnou
   pulsy. Všechno doběhne do 4,5 s a schéma pak zůstane v klidu, takže není potřeba
   tlačítko Pozastavit (WCAG 2.2.2). Uzly a popisky jsou vidět hned, takže schéma
   nikdy není prázdné. Mimo animaci leží čárka pulsu před začátkem čáry (posun 8),
   takže není vidět ani před startem, ani po doběhnutí. */
@media (prefers-reduced-motion: no-preference) {
  .schema .hrana {
    stroke-dasharray: 1;
    animation: kresba 1.1s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) both;
  }
  .schema .puls {
    display: inline;
    fill: none;
    stroke: var(--vinova);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-dasharray: 4 200;
    stroke-dashoffset: 8;
    animation: puls .7s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) 1;
  }
  .schema .prsten.toci {
    transform-box: fill-box;
    transform-origin: center;
    animation: toc 4s cubic-bezier(.4, 0, .2, 1) 1 both;
  }
}

@keyframes kresba { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes puls { from { stroke-dashoffset: 8; } to { stroke-dashoffset: -104; } }
@keyframes toc { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- lišta s kotvami: objeví se, až hlavička odjede z okna ----------
   Řídí ji posun stránky (scroll-driven animations), žádný skript. Prohlížeč, který to
   neumí, lištu neukáže vůbec a stačí mu navigace v hlavičce. Skrytá lišta má
   visibility: hidden, takže na ni nedojde Tab ani čtečka; viditelnou (a klikatelnou)
   se stane až v půlce náběhu, ne jako průhledný pruh. Při nízkém okně (velké
   přiblížení) by zabrala moc místa, tam se nezobrazí. */
:root { --lista: 3.5rem; }
.lista { display: none; }

@supports (animation-timeline: view()) and (timeline-scope: --a) {
  body { timeline-scope: --hlava; }
  .hlava { view-timeline: --hlava block; }
  html:has(.lista) { scroll-padding-top: var(--lista); }

  .lista {
    display: block;
    position: fixed;
    inset: 0 0 auto;
    z-index: 5;
    background: var(--papir);
    border-bottom: var(--vlas) solid var(--modra);
    visibility: hidden;
    animation: lista linear both;
    animation-timeline: --hlava;
    animation-range: exit-crossing 85% exit-crossing 100%;
  }
}
@keyframes lista {
  from { visibility: hidden; opacity: 0; }
  50% { visibility: hidden; opacity: .5; }
  to { visibility: visible; opacity: 1; }
}
@media (max-height: 30rem) {
  .lista { display: none !important; }
  html:has(.lista) { scroll-padding-top: 0; }
}

.lista .obal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.25rem;
  min-height: var(--lista);
  padding: .45rem 0;
}
.lista .znacka, .lista a.znacka:hover { color: var(--vinova); }
.lista .znacka { font-size: 1.0625rem; gap: .5rem; }
.lista .znak { width: 2.25rem; height: 1.8rem; }
.lista ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  font-family: var(--titulkove);
  font-weight: 500;
  font-size: 1rem;
}
.lista ul a { text-decoration: none; border-bottom: var(--vlas) solid transparent; }
.lista ul a:hover { border-bottom-color: var(--vinova); }

/* Na telefonu se slovo vedle znaku nevejde; jméno odkazu drží aria-label.
   Na nejužších displejích se zúží mezery, aby lišta zůstala na jednom řádku. */
@media (max-width: 28rem) {
  .lista .slovo { display: none; }
}
@media (max-width: 21rem) {
  .lista .obal, .lista ul { gap: .25rem .75rem; }
}

/* ---------- úvod pod hlavičkou ---------- */
.uvod-blok { padding-top: 3rem; }

.uvod {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  line-height: 1.45;
}

.akce {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 2rem;
  margin: 2rem 0 0;
  font-family: var(--titulkove);
}

/* Hlavní výzva: silná vínová linka pod textem místo tlačítka. */
.vyzva {
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none;
  border-bottom: var(--linka) solid var(--vinova);
  padding-bottom: .15rem;
}
.odkaz { font-weight: 500; }

/* ---------- oddíl: silná vínová linka, název vlevo, obsah vpravo ---------- */
.oddil {
  display: grid;
  gap: 1.5rem;
  margin-top: 4.5rem;
  padding-top: 1.25rem;
  border-top: var(--linka) solid var(--vinova);
  scroll-margin-top: 1.5rem;
}
.oddil > * { min-width: 0; }
.oddil > h2 {
  margin: 0;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 1.15;
}

@media (min-width: 60rem) {
  .oddil {
    grid-template-columns: var(--sloupec) minmax(0, 1fr);
    column-gap: var(--mezera);
    margin-top: 6rem;
  }
  /* Vedle obsahu v levém sloupci stačí menší název; nad obsahem ho nese velikost. */
  .oddil > h2 { font-size: 1.5rem; }
}

.podnadpis {
  margin: 3.5rem 0 1.25rem;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: 1.2rem;
}

/* odrážky s pomlčkou */
ul.body { list-style: none; margin: 0; padding: 0; }
ul.body li { position: relative; padding-left: 1.25rem; margin-bottom: .55rem; }
ul.body li::before { content: "–"; position: absolute; left: 0; }

/* ---------- co děláme ---------- */
.sluzby {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 2.75rem var(--mezera);
}
.sluzby li { border-top: var(--vlas) solid var(--modra); padding-top: 1.1rem; }
.sluzby h3 {
  margin: 0 0 .5rem;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
}
.sluzby p { margin: 0; max-width: 34rem; }

/* ---------- jak pracujeme: kroky, na jejichž pořadí záleží ---------- */
ol.kroky {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: k;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr));
  gap: 2.25rem var(--mezera);
}
ol.kroky li { counter-increment: k; position: relative; padding-left: 3.25rem; }
ol.kroky li::before {
  content: counter(k);
  position: absolute;
  left: 0;
  top: -.3rem;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--vinova);
}
ol.kroky h3 {
  margin: 0 0 .4rem;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
}
ol.kroky p { margin: 0; max-width: 34rem; }

.zasady {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: .4rem var(--mezera);
}
.zasady strong { font-family: var(--titulkove); font-weight: 600; }

/* ---------- projekty ---------- */
.karty {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 3rem var(--mezera);
}
.karta {
  border-top: var(--vlas) solid var(--modra);
  padding-top: 1.1rem;
  scroll-margin-top: 1.5rem;
}
/* Karta, na kterou vede přímý odkaz (např. /projekty/#watson), dostane silnou vínovou linku. */
.karta:target, .dalsi li:target {
  border-top: var(--linka) solid var(--vinova);
  padding-top: calc(1.1rem - 2px);
}
.stitek {
  margin: 0 0 .35rem;
  font-family: var(--titulkove);
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--seda);
}
.karta h3 {
  margin: 0 0 .75rem;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.karta .vystizne { margin: 0 0 1rem; }
.karta ul.body { font-size: 1rem; line-height: 1.6; }
.karta .vystizne, .karta ul.body, .dalsi p { max-width: 34rem; }
.karta .dal {
  margin: 1rem 0 0;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: 1rem;
}

.dalsi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 2rem var(--mezera);
}
.dalsi li {
  border-top: var(--vlas) solid var(--modra);
  padding-top: 1.1rem;
  scroll-margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
}
.dalsi h3 {
  margin: 0 0 .4rem;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
}
.dalsi p { margin: 0; }

/* ---------- kontakt: modrá plocha jako závěrečný snímek ---------- */
.zaver {
  margin-top: 6rem;
  padding: 3.5rem 0 4rem;
  background: var(--modra);
  color: var(--bila);
  scroll-margin-top: 0;
}
.zaver .obal { display: grid; gap: 1.25rem; }
.zaver .obal > * { min-width: 0; }
.zaver h2 {
  margin: 0;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.15;
}
.zaver .velka {
  margin: 0 0 1.25rem;
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: clamp(2rem, 1rem + 3.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.zaver p { max-width: 40rem; margin: 0 0 1.75rem; }
.zaver a { color: var(--bila); }
.zaver :focus-visible { outline-color: var(--bila); }
.posta {
  font-family: var(--titulkove);
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  text-decoration: none;
  border-bottom: var(--linka) solid var(--bila);
  padding-bottom: .1rem;
}
@media (min-width: 60rem) {
  .zaver .obal {
    grid-template-columns: var(--sloupec) minmax(0, 1fr);
    column-gap: var(--mezera);
  }
}

/* ---------- patička: poznámky na papíře, vínový pruh dole ---------- */
.poznamky {
  padding: 1.5rem 0;
  font-family: var(--titulkove);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--seda);
}
.poznamky p { margin: 0; }

.pata {
  background: var(--vinova);
  color: var(--bila);
  font-family: var(--titulkove);
  font-size: .875rem;
}
.pata .obal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .25rem 1.5rem;
  min-height: 3.25rem;
  padding: .75rem 0;
}
.pata .znacka { font-size: 1.0625rem; gap: .5rem; }
.pata .znak { width: 2.25rem; height: 1.8rem; }
.pata a { color: var(--bila); }
.pata :focus-visible { outline-color: var(--bila); }

/* ---------- stránka 404: pruh přitlačený ke dnu okna ---------- */
body:has(.chyba) {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.chyba { flex: 1; padding: 3rem 0 5rem; }
.chyba .akce { margin-top: 1.5rem; }