/* DNA SIGNATURE — vlastní rukopis a péče o detail (PRAVIDLA_STRANKY_DNA §3).
   Jazyk z karty: kamenný stůl se stíny okna, fotka jako vytištěný snímek s bílým okrajem a drobným
   podpisem v rohu, natočená kartička v akcentu (Rezervovat stůl), tenký obrys CTA, antikva s kurzívou.
   Podpisový tah stránky: věci položené na stole — tisky, lístek, karta; světlo okna přes stránku.
   Zakázané: dark + gold, okázalé luxusní klišé, rám u každé fotky mechanicky. */

:root {
  --ram: 0;
  --ram-velky: 0;
  --ram-onas: 0;
  --r-tile: 0;
  --r-btn: 0;
  --tile: color-mix(in srgb, var(--paper-2) 60%, var(--paper));

  --ease: cubic-bezier(.19, 1, .22, 1);
  --anim-t: 1.3s;
  --anim-dist: 22px;
  --anim-stagger: .14s;
  --marquee-t: 110s;
}

/* ---- stůl: světlo okna — jemné diagonální stíny přes stránku, při scrollu se posouvají ---- */
body { background-color: var(--paper);
       background-image: repeating-linear-gradient(115deg, transparent 0 140px, color-mix(in srgb, var(--ink) 4%, transparent) 140px 210px, transparent 210px 330px);
       background-attachment: fixed; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    body { animation: svetlo-okna linear both; animation-timeline: scroll(root); }
  }
}
@keyframes svetlo-okna { from { background-position: 0 0; } to { background-position: 420px 0; } }

/* ---- základní text: grotesk Light, úvodní odstavec antikvou kurzívou, popisky prostrkaně ---- */
body { font-weight: 300; font-size: 17px; line-height: 1.7; }
p { max-width: 30em; }
.maly { font-size: 14px; }
.nadpis { font-weight: 500; letter-spacing: -.005em; line-height: 1.05; }
.nadpis em, .citat em { color: inherit; }
h3 { font-weight: 500; font-size: 26px; }
.popisek { letter-spacing: .3em; font-size: 12px; font-weight: 400; color: var(--ink); }
.popisek::before { content: ""; display: inline-block; width: 36px; height: 1px; background: currentColor; margin-right: 14px; vertical-align: middle; }
.cena { font-family: var(--f-head), serif; font-size: 22px; }

/* ---- tisk: fotka s bílým okrajem a podpisem v rohu, leží na stole se stínem ---- */
.tisk { margin: 0; background: #fff; padding: 14px 14px 0; box-shadow: 0 28px 50px -30px rgba(40, 25, 10, .5), 0 2px 6px rgba(40, 25, 10, .08); }
.tisk .ram { aspect-ratio: 4 / 3; }
.tisk figcaption { text-align: right; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; padding: 12px 2px 14px; color: var(--ink); }

/* ---- nabídka: tisk + jídelní lístek v rámu ---- */
.listek-strana { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: start; }
.tisk-hlavni { grid-column: 1 / 8; transform: rotate(-1.2deg); }
.tisk-hlavni .ram { aspect-ratio: 5 / 4; }
.listek { grid-column: 8 / -1; background: var(--paper); padding: 34px 32px; outline: 1px solid var(--ink); outline-offset: -8px;
          box-shadow: inset 0 0 0 1px var(--ink), 0 24px 40px -30px rgba(40, 25, 10, .4); margin-top: 48px; }
.listek-hlava { text-align: center; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; margin: 0 auto 18px; }
.listek ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
.listek .lr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.listek .ln { font-family: var(--f-head), serif; font-size: 22px; font-weight: 500; }
.listek .lp { font-family: var(--f-head), serif; font-style: italic; font-size: 16px; color: var(--muted); }
.listek-kava { grid-template-columns: 1fr 1fr; column-gap: 24px; margin-bottom: 0 !important; }

/* ---- o nás: tisk + kartička s rokem přes roh ---- */
.onas-stul { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; }
.onas-foto { grid-column: 1 / 7; position: relative; }
.onas-foto .tisk { transform: rotate(1.5deg); }
.onas-tisk .text { grid-column: 8 / -1; display: grid; gap: 22px; }
.onas-tisk .citat { font-size: clamp(32px, 3.4vw, 54px); line-height: 1.15; }
.podpis-citatu { letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.karticka { position: absolute; right: -28px; bottom: -64px; background: var(--accent); color: var(--on-accent); padding: 18px 26px 16px;
            transform: rotate(-7deg); box-shadow: 0 18px 30px -18px rgba(40, 25, 10, .55); display: grid; gap: 4px; z-index: 2; }
.karticka span { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; }
.karticka b { font-family: var(--f-head), serif; font-weight: 500; font-size: 52px; line-height: 1; }

/* ---- kontakt: karta na stole + formulář ---- */
.karta-strana { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: start; }
.karta { grid-column: 1 / 6; background: #fff; padding: 34px 34px 26px; transform: rotate(-.8deg);
         box-shadow: 0 28px 50px -30px rgba(40, 25, 10, .5), 0 2px 6px rgba(40, 25, 10, .08); display: grid; gap: 26px; }
.karta-blok { display: grid; gap: 6px; }
.kb-titul { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.kb-hlavni { font-family: var(--f-head), serif; font-size: 30px; line-height: 1.15; font-weight: 500; }
.kb-hlavni a, .karta .maly a { color: inherit; text-decoration: none; }
.karta-hodiny { display: grid; gap: 6px; margin: 0; }
.karta-hodiny div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.karta-hodiny dd { margin: 0; font-family: var(--f-head), serif; font-size: 18px; }
.karta-pata { font-size: 13px; font-style: italic; font-family: var(--f-head), serif; color: var(--muted); max-width: none;
              border-top: 1px solid var(--ink); padding-top: 14px; }
.kontakt-karta .kontakt-formular { grid-column: 7 / -1; display: grid; gap: 10px; }
.kontakt-karta .kontakt-formular h3 { font-size: 30px; }

/* ---- formulář: vlasové linky, antikva, obrysové tlačítko jako na kartě ---- */
.pole label { font-size: 11px; letter-spacing: .28em; }
.pole input, .pole textarea, .telefon-pole select { font-family: var(--f-head), serif; font-size: 20px; border-bottom: 1px solid var(--ink); }
.tlacitko { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px currentColor; letter-spacing: .26em; font-weight: 400; }
.tlacitko:hover { background: var(--ink); color: var(--paper); transform: none; }
.tmava .tlacitko, .telefon .tlacitko { color: var(--on-dark); }

/* ---- odkazy: prostrkané verzálky s vlasovou linkou ---- */
.odkaz { letter-spacing: .26em; font-size: 12px; background-size: 100% 1px; }

/* ---- lišta, menu, patička ---- */
.hlavicka { background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--line); }
.hlavicka nav a { letter-spacing: .26em; font-size: 12px; }
.hlavicka .tlacitko { height: 40px; }
.menu-odkazy a { font-family: var(--f-head), serif; font-size: 34px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.menu-odkazy li:nth-child(2) a { font-style: italic; }
.paticka h4 { letter-spacing: .3em; }
.paticka .sloupce { border-top: 1px solid var(--on-dark-line); padding-top: 28px; }

/* ---- pohyb: pomalý — tisky a karta dosednou na stůl (ze zdvihu se stínem), kartička se natočí ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .tisk[data-anim], .js .karta[data-anim], .js .listek[data-anim] { opacity: 0; transition: opacity 1.2s var(--ease), transform 1.6s var(--ease), box-shadow 1.6s var(--ease); }
  .js .tisk-hlavni[data-anim] { transform: rotate(-4deg) translateY(-26px) scale(1.03); }
  .js .onas-foto .tisk[data-anim] { transform: rotate(5deg) translateY(-26px) scale(1.03); }
  .js .karta[data-anim] { transform: rotate(-3deg) translateY(-26px) scale(1.03); }
  .js .listek[data-anim] { transform: translateY(-20px); }
  .js .tisk-hlavni.je-uvnitr { opacity: 1; transform: rotate(-1.2deg); }
  .js .onas-foto .tisk.je-uvnitr { opacity: 1; transform: rotate(1.5deg); }
  .js .karta.je-uvnitr { opacity: 1; transform: rotate(-.8deg); }
  .js .listek.je-uvnitr { opacity: 1; transform: none; }
  .js .tisk.je-uvnitr { opacity: 1; }   /* každý tisk se ukáže (dopis-tisk neměl vlastní pravidlo a zůstal neviditelný, 2026-10-11) */
  .js .karticka[data-anim] { opacity: 0; transform: rotate(-24deg) translate(30px, 20px); transition: opacity .8s var(--ease) .6s, transform 1.4s var(--ease) .6s; }
  .js .karticka.je-uvnitr { opacity: 1; transform: rotate(-7deg); }
}

@media (max-width: 1024px) {
  .listek-strana > *, .onas-stul > *, .karta-strana > *, .onas-tisk .text { grid-column: 1 / -1 !important; }
}
@media (max-width: 700px) {
  .listek-strana, .onas-stul, .karta-strana { grid-template-columns: 1fr; }
  .karticka { right: 8px; bottom: -28px; }
  .listek { padding: 28px 22px; }
  .listek-kava { grid-template-columns: 1fr; }
}

/* ---------- patička „Podpis": stránka končí jako podepsaný dopis ---------- */
.paticka-podpis { padding-top: clamp(56px, 6vw, 88px); text-align: center; }
.podpis-veta { font-family: var(--f-head), serif; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.3; max-width: 26ch; margin: 0 auto 28px; }
.podpis-jmeno { font-family: var(--f-head), serif; font-style: italic; font-size: clamp(44px, 5vw, 76px); line-height: 1.1; margin: 0 auto clamp(64px, 7vw, 104px); color: var(--accent-on-dark); }   /* auto = vystředěný blok (Karel 2026-10-11) */
.paticka-podpis .pat-radek { text-align: left; }

/* ---------- nabídka zrcadlově (AUDIT_SROVNANI_DNA A2): lístek vlevo, tisk vpravo ---------- */
.zrcadlo .listek { grid-column: 1 / 6; grid-row: 1; }
.zrcadlo .tisk-hlavni { grid-column: 6 / -1; grid-row: 1; }

/* ---------- lišta a odkazy (AUDIT_SROVNANI_DNA D1, D2): bez linky, odkazy kurzívou antikvy;
   textové odkazy kapitálkami antikvy s tečkovaným podtržením — rukopis, péče ---------- */
.hlavicka { border-bottom: 0; background: color-mix(in srgb, var(--paper) 97%, transparent); }
.hlavicka nav a { font-family: var(--f-head), serif; font-style: italic; text-transform: none; letter-spacing: .01em; font-size: 19px; }
.hlavicka nav a:hover { color: var(--accent-text); }
.odkaz { font-family: var(--f-head), serif; text-transform: lowercase; font-variant: small-caps; letter-spacing: .1em; font-size: 19px;
  background: none; text-decoration: underline dotted 1px; text-underline-offset: 6px; padding-bottom: 0; }
.odkaz:hover { text-decoration-style: solid; color: var(--accent-text); }

/* ---------- B1: tisk leží rovně na stole — pasparta s vlasovou linkou, nízký stín, bez natočení
   (natočené tisky měly i PLAYFUL a EDITORIAL; SIGNATURE = péče a přesnost) ---------- */
.tisk { padding: 22px 22px 0; box-shadow: 0 1px 2px rgba(40, 25, 10, .12), 0 14px 24px -18px rgba(40, 25, 10, .35); }
.tisk .ram { outline: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); outline-offset: 8px; }
.tisk figcaption { padding: 20px 0 18px; }
.tisk-hlavni, .onas-foto .tisk { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .tisk-hlavni[data-anim] { transform: translateY(-18px); }
  .js .tisk-hlavni.je-uvnitr { transform: none; }
}
/* ---------- C2: základní text antikvou — stránka se čte jako dopis (Jost měly i CLEAN a ORGANIC) ---------- */
body.dna-signature { font-family: var(--f-head), Georgia, serif; font-weight: 400; font-size: 19px; line-height: 1.6; }
.dna-signature .maly { font-size: 16px; }
.dna-signature .popisek, .dna-signature .kb-titul, .dna-signature .listek-hlava, .dna-signature .tisk figcaption,
.dna-signature .podpis-citatu, .dna-signature .karticka span, .dna-signature .pole label, .dna-signature .tlacitko { font-family: var(--f-text), sans-serif; }

/* ---------- 2026-10-11: dopis, detail řemesla, navštívenka (Karel: každá DNA vlastní kostra) ----------
   Papír (dopis, navštívenka) má vlastní barvy — krémový papír a tmavý inkoust v každé atmosféře,
   jinak by na tmavé atmosféře zdědil světlé písmo (dřívější karta kontaktu byla nečitelná). */
:root { --papir: #F3EDE3; --papir-ink: #2B2520; --papir-muted: #6B6158; --papir-linka: rgba(43, 37, 32, .22); }
.dopis, .navstivenka { background: var(--papir); color: var(--papir-ink);
  box-shadow: 0 1px 2px rgba(40, 25, 10, .14), 0 22px 36px -24px rgba(40, 25, 10, .5); }
.dopis .maly, .navstivenka .maly, .dopis .popisek, .navstivenka .kb-titul { color: var(--papir-muted); }
.navstivenka a { color: inherit; }
.navstivenka .odkaz { color: var(--papir-ink); }

/* dopis s tiskem přes pravý okraj */
.dopis-stul { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; }
.dopis { grid-column: 1 / 9; grid-row: 1; padding: clamp(36px, 4vw, 64px) clamp(32px, 5vw, 88px) clamp(36px, 4vw, 56px) clamp(32px, 4vw, 64px); display: grid; gap: 22px; }
.dopis-zahlavi { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; max-width: none; font-size: 14px;
  color: var(--papir-muted); border-bottom: 1px solid var(--papir-linka); padding-bottom: 14px; padding-right: clamp(0px, 14vw, 220px); }
.dopis .popisek::before { background: var(--papir-muted); }
.dopis-osloveni { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.15; font-weight: 500; max-width: 18ch; }
.dopis-osloveni em { font-style: italic; }
.dopis-text { max-width: 34em; }
.dopis-podpis { display: grid; gap: 6px; font-size: 24px; line-height: 1.1; letter-spacing: .04em; color: var(--papir-ink); margin-top: 6px; }
.dopis-podpis .kb-titul { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--papir-muted); }
.dopis-tisk { grid-column: 8 / -1; grid-row: 1; position: relative; z-index: 2; }
.dopis-tisk .ram { aspect-ratio: 4 / 5; }

/* detail řemesla přes celou šířku */
.detail-remesla { margin: 0; padding-block: clamp(24px, 3vw, 40px); }
.detail-remesla img { display: block; width: 100%; height: min(70vh, 46vw); object-fit: cover; }
.detail-remesla figcaption { font-style: italic; font-size: clamp(20px, 1.8vw, 26px); padding-top: 18px; }

/* navštívenka: líc a rub vedle sebe, rub mírně přes líc */
.nv-stul { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: start; }
.navstivenka { padding: clamp(28px, 3vw, 44px); display: grid; gap: 18px; align-content: start; }
.nv-lic { grid-column: 1 / 7; grid-row: 1; }
.nv-rub { grid-column: 6 / -1; grid-row: 1; margin-top: 72px; position: relative; z-index: 2; }
.nv-jmeno { font-family: var(--logo-f, var(--f-head)), serif; letter-spacing: var(--logo-ls, .2em); font-size: 22px; text-transform: uppercase;
  border-bottom: 1px solid var(--papir-ink); padding-bottom: 14px; max-width: none; }
.nv-blok { display: grid; gap: 4px; }
.nv-hlavni { font-size: 28px; line-height: 1.2; font-weight: 500; max-width: none; }
.nv-hlavni a { text-decoration: none; }
.nv-tabulka { display: grid; gap: 4px; margin: 0 0 8px; }
.nv-tabulka div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--papir-linka); padding-bottom: 5px; }
.nv-tabulka dd { margin: 0; }
.nv-formular { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; margin-top: clamp(48px, 5vw, 72px); }
.nv-formular > div { grid-column: 1 / 5; }
.nv-formular h3 { font-size: 30px; }
.nv-formular form { grid-column: 5 / -1; margin-top: 0; }
.tisk figcaption { color: var(--papir-muted); }

.podpis-jmeno.drobne { font-size: 22px; font-style: normal; letter-spacing: .2em; text-transform: uppercase; font-family: var(--f-text), sans-serif; }

@media (prefers-reduced-motion: no-preference) {
  .js .dopis[data-anim], .js .navstivenka[data-anim] { opacity: 0; transform: translateY(-18px); transition: opacity 1.2s var(--ease), transform 1.6s var(--ease); transition-delay: calc(var(--i, 0) * .18s); }
  .js .dopis.je-uvnitr, .js .navstivenka.je-uvnitr { opacity: 1; transform: none; }
}
@media (max-width: 1024px) {
  .dopis, .dopis-tisk, .nv-lic, .nv-rub, .nv-formular > div, .nv-formular form { grid-column: 1 / -1; grid-row: auto; }
  .dopis-zahlavi { padding-right: 0; }
  .nv-rub { margin-top: -12px; margin-left: 24px; }
  .dopis-tisk { margin: -24px 24px 0 auto; width: 70%; }
}

/* ---------- fotky 2026-10-11: bez bílého okraje, přes okraj stránky, papír leží přes ně ----------
   Tisk s bílým okrajem splýval s polaroidy PLAYFUL (Karel). SIGNATURE = věci položené přes sebe na stole:
   fotka vybíhá z okraje stránky, dopis / lístek leží přes její hranu se stínem. Popisek drobně pod fotkou. */
.dna-signature main { overflow-x: clip; }
.dna-signature .tisk { background: none; padding: 0; box-shadow: none; }
.dna-signature .tisk .ram { outline: 0; border-radius: 0; }
.dna-signature .tisk figcaption { color: var(--muted); padding: 12px 0 0; text-align: left; }
.dopis-stul { align-items: start; }
.dopis { grid-column: 1 / 8; z-index: 2; position: relative; margin-top: clamp(48px, 6vw, 96px); }
.dopis-tisk { grid-column: 6 / -1; z-index: 1; margin-right: calc(50% - 50vw); }
.dopis-tisk .ram { aspect-ratio: 16 / 10; }
.dopis-tisk figcaption { padding-left: 0; }
.nabidka-listek .listek-strana { align-items: start; }
.zrcadlo .listek { grid-column: 1 / 6; grid-row: 1; position: relative; z-index: 2; margin-top: clamp(48px, 6vw, 96px); }
.zrcadlo .tisk-hlavni { grid-column: 5 / -1; grid-row: 1; margin-right: calc(50% - 50vw); }
.listek { background: var(--papir); color: var(--papir-ink); outline-color: var(--papir-ink); box-shadow: inset 0 0 0 1px var(--papir-ink), 0 22px 36px -24px rgba(40, 25, 10, .55); }
.listek .lp, .listek .listek-hlava { color: var(--papir-muted); }
.listek .cena { color: var(--papir-ink); }
@media (max-width: 1024px) {
  .dopis, .zrcadlo .listek { margin-top: -48px; margin-inline: 16px; grid-row: 2; }
  .dopis-tisk, .zrcadlo .tisk-hlavni { grid-row: 1; grid-column: 1 / -1; margin-inline: calc(50% - 50vw); width: auto; }
}

/* ---------- hloubka i na stránce (MANUAL_DNA): papír se při scrollu posouvá pomaleji než fotka pod ním ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dopis-tisk .ram img, .tisk-hlavni .ram img { animation: sig-foto linear both; animation-timeline: view(); scale: 1.12; }
    .dopis, .zrcadlo .listek { animation: sig-papir linear both; animation-timeline: view(); }
  }
}
@keyframes sig-foto { from { translate: 0 -5%; } to { translate: 0 5%; } }
@keyframes sig-papir { from { translate: 0 48px; } to { translate: 0 -48px; } }

/* lístek: výměna fotky po najetí na jídlo (2026-10-11) */
.tisk-hlavni .ram { position: relative; }
.tisk-hlavni .ram img.prolnuti { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.tisk-hlavni .ram img.prolnuti.je-videt { opacity: 1; }
.listek li[data-foto] { cursor: default; outline: none; }
.listek li[data-foto]:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.listek li.je .ln { color: #8F4A22; }   /* jen barva (kurzíva měnila rozměry → blikání); tmavá terakota na krémovém papíře, WCAG AA 5,7 : 1 */
@media (prefers-reduced-motion: reduce) { .tisk-hlavni .ram img.prolnuti { transition: none; } }