/* Royal Services, prototype v0.2. The ledger book: warm paper ruled in warm grey, ink-blue type, a brass double margin
   rule, one brass, and the accountant's double underline under every total (brief_v0.1.md; the system: DESIGN.md).
   Newsreader speaks and carries the figures; Inter carries data. Motion: reveals in transform and opacity, one pinned
   story (main.js). */

/* The faces, cut to Slovak and Czech (tools: fontTools subset and instancer; OFL-1.1, fonts/OFL-*.txt): Newsreader at
   one optical size (40) with weights 400-500, its italic at 400, Inter variable. Each in two files: Latin, and the
   háčky and dĺžne. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2009, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F, U+20AC, U+2212; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("fonts/newsreader-ext.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0139-013A, U+013D-013E, U+0147-0148, U+0154-0155, U+0158-0159, U+0160-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/newsreader-italic-latin.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2009, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F, U+20AC, U+2212; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/newsreader-italic-ext.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0139-013A, U+013D-013E, U+0147-0148, U+0154-0155, U+0158-0159, U+0160-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2009, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F, U+20AC, U+2212; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-ext.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0139-013A, U+013D-013E, U+0147-0148, U+0154-0155, U+0158-0159, U+0160-0161, U+0164-0165, U+016E-016F, U+017D-017E; }

:root {
  --papier: #F6F2EA;        /* the page */
  --papier-2: #EDE6D8;      /* the deadline band */
  --harok: #FBF8F2;         /* a ledger sheet */
  --atrament: #1B2A4A;      /* text, the line, the dark band (12.7:1 on papier) */
  --grafit: #4B5466;        /* secondary text (6.8:1) */
  --modra: #2F4A86;         /* links, buttons' hover, the path above the reserve (7.7:1) */
  --znak: #243F7A;          /* the mark's blue: the logo and the footer's name (9.0:1; the client, 2026-10-08) */
  --cervena: #A23B2E;       /* only the path under the reserve (5.9:1) */
  --mosadz: #B08D4A;        /* brass: rules and dots; text only on atrament (4.6:1) */
  --mosadz-2: #7E6229;      /* brass text on paper (5.1:1) */
  --mosadz-svetla: #C9A867; /* brass text on the dark band (6.3:1) */
  --linka: #DDD5C6;         /* ruling, decoration only */
  --na-tmavom: #B9C0CF;     /* secondary text on the dark band (7.8:1) */
  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pad: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --nav-h: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dvoj: 6px double var(--atrament);   /* the accountant's double underline: a total that is closed */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papier); color: var(--atrament); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scrollbar-color: var(--grafit) var(--papier-2); }
body { margin: 0; min-height: 100vh; min-height: 100svh; font: 400 17px/1.6 var(--f-text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  background-color: var(--svetlo, var(--papier));   /* v0.3: the light through the day (motion.js tweens --svetlo) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .16 0 0 0 0 .29 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection { background: var(--atrament); color: var(--papier); }
input, textarea { caret-color: var(--mosadz-svetla); }
img, svg { display: block; max-width: 100%; }
a { color: var(--modra); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--atrament); }
:focus-visible { outline: 2px solid var(--modra); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 450; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 12px 16px; background: var(--atrament); color: var(--papier); border-radius: 2px; transition: top .2s; }
.skip:focus { top: 12px; }

/* --- buttons ------------------------------------------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 1.5px solid transparent;
  border-radius: 2px; font: 600 15px/1.2 var(--f-text); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--plny { background: var(--atrament); color: var(--papier); box-shadow: 0 10px 22px -14px rgba(27, 42, 74, .8); }
.btn--plny:hover { background: var(--modra); color: var(--papier); box-shadow: 0 14px 26px -14px rgba(27, 42, 74, .85); }
.btn--ciara { border-color: var(--atrament); color: var(--atrament); background: transparent; }
.btn--ciara:hover { background: var(--atrament); color: var(--papier); }

/* --- navigation --------------------------------------------------------------------------------------------------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 28px; padding: 0 var(--pad);
  background: var(--svetlo, var(--papier)); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.nav.is-scrolled { border-bottom-color: var(--linka); box-shadow: 0 10px 24px -22px rgba(27, 42, 74, .5); }
.znak { display: grid; gap: 4px; width: 190px; flex: none; text-decoration: none; }   /* the logo (identita/): the mark as an image, the trade
   as real text set to the mark's width, so the browser can translate it; the negative while the phone's menu is open */
.znak-logo { display: block; width: 100%; height: auto; }
.znak-logo--neg { display: none; }
.znak-cinnost { color: var(--grafit); font: 400 12.6px/1.2 var(--f-text); letter-spacing: 0; white-space: nowrap; text-align: justify; text-align-last: justify; }   /* one line, set to the name's width: at .01em it was 1px wider than the name and wrapped, pushing the name off the bar (2026-10-07) */
.nav-odkazy { display: flex; gap: 26px; margin-left: auto; }
.nav-odkazy a { position: relative; padding: 6px 0; white-space: nowrap; color: var(--atrament); font: 500 15px/1 var(--f-text); text-decoration: none; }
.nav-odkazy a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; border-top: 1px solid var(--mosadz-2); border-bottom: 1px solid var(--mosadz-2);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav-odkazy a:hover::after, .nav-odkazy a.is-current::after { transform: scaleX(1); }
.nav-cta { flex: none; padding: 12px 20px; white-space: nowrap; }
.widok { display: inline-flex; border: 1px solid rgba(27, 42, 74, .35); border-radius: 999px; overflow: hidden; }
.widok button { padding: 7px 12px; border: 0; background: transparent; color: var(--grafit); cursor: pointer; font: 500 12px/1 var(--f-text); }
.widok button[aria-pressed="true"] { background: var(--atrament); color: var(--papier); }
.w-ramce .widok { display: none; }
.menu-btn { display: none; flex: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 46px; height: 46px; margin-left: auto; padding: 0;
  background: transparent; border: 1.5px solid var(--atrament); border-radius: 50%; cursor: pointer; color: var(--atrament); }
.menu-btn span { width: 18px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: safe center; gap: 36px; padding: 100px var(--pad) 40px; overflow-y: auto;
  background: var(--atrament); color: var(--papier); opacity: 0; transform: translateY(-12px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; transform: none; }
.menu nav { display: grid; gap: 8px; }
.menu nav a { color: var(--papier); font: 400 40px/1.15 var(--f-display); text-decoration: none; }
.menu-tel { color: var(--mosadz-svetla); font: 500 20px/1 var(--f-text); text-decoration: none; }
.nav.menu-open { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.nav.menu-open .menu-btn { color: var(--papier); border-color: var(--papier); }
.nav.menu-open .znak-logo { display: none; }
.nav.menu-open .znak-logo--neg { display: block; }
.nav.menu-open .znak-cinnost { color: var(--na-tmavom); }
.nav.menu-open .nav-cta { visibility: hidden; }   /* the drawer carries its own ways to call */

/* --- the deadline line (idea 38): in the bar, between the mark and the links (the owner, 2026-10-08); the date of the
   next deadline, computed live (main.js), what is due in the link's title; the link opens Rok s Royal -------------------- */
.termin { display: grid; grid-template-columns: auto auto; column-gap: 9px; align-items: center; flex: none; color: var(--atrament);
  text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.termin-bod { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--mosadz); }
.termin-stitok { color: var(--grafit); font: 500 11.5px/1.25 var(--f-text); }
.termin-datum { font: 600 13.5px/1.3 var(--f-text); }
.termin:hover .termin-datum { color: var(--modra); text-decoration: underline; text-underline-offset: .2em; }
.termin-kratky { display: none; }
.nav.menu-open .termin { visibility: hidden; }   /* the drawer is ink; it carries its own ways */

/* --- the story ------------------------------------------------------------------------------------------------------ */
.pribeh { overflow-x: clip; }
.pribeh-pin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center;
  max-width: 1440px; margin: 0 auto; padding: calc(var(--nav-h) + clamp(36px, 5vw, 64px)) var(--pad) clamp(48px, 6vw, 88px); }
.uvod h1 { font: 430 clamp(46px, 6vw, 88px)/1.0 var(--f-display); letter-spacing: -.03em; }
.h1-druha { display: block; color: var(--modra); }
.uvod-sub { margin-top: 26px; max-width: 38ch; font-size: 19px; line-height: 1.55; color: var(--grafit); }
.uvod { container-type: inline-size; }   /* the guarantee line below sizes itself to this column */
.uvod-podpis { margin-top: 14px; font-size: clamp(11px, 3.55cqi, 15px); line-height: 1.5; color: var(--grafit); white-space: nowrap; }
/* the text's face, smaller, on one line (the owner, 2026-10-08): 15px where the column allows, smaller in a narrow one */
.uvod-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.kapitoly-blok { margin-top: 56px; }
.kapitoly { display: grid; gap: 22px; counter-reset: k; }
.kap { --kap-c: var(--atrament); --kap-p: var(--grafit); --kap-n: var(--mosadz-2); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.kap-c { font: 400 22px/1.15 var(--f-display); color: var(--kap-n); font-variant-numeric: tabular-nums; }
.kap-h { font: 450 28px/1.12 var(--f-display); letter-spacing: -.015em; color: var(--kap-c); }
.kap p { margin-top: 6px; max-width: 42ch; color: var(--kap-p); }
.kap-e { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px !important; }   /* the principles: Odbornosť · Efektivita · Ekonomický pohľad */
.kap-e span { padding-bottom: 4px; border-bottom: 5px double var(--mosadz); font: 600 14px/1 var(--f-text); }
.koniec { margin-top: 30px; padding-top: 18px; border-top: var(--dvoj); font: 450 24px/1.25 var(--f-display); max-width: 26ch; }

.scena { position: relative; min-height: 560px; }
.harok { position: absolute; inset: 0; border-radius: 3px; background-color: var(--harok);
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--linka) 33px 34px);
  background-position: 0 40px; background-repeat: no-repeat; background-size: 100% calc(100% - 40px);
  box-shadow: 0 40px 70px -40px rgba(27, 42, 74, .45), 0 2px 8px -2px rgba(27, 42, 74, .12); }
.harok-okraj { position: absolute; top: 0; bottom: 0; left: 52px; width: 4px; border-left: 1px solid rgba(176, 141, 74, .55); border-right: 1px solid rgba(176, 141, 74, .55); }
.scena-stitok { position: absolute; z-index: 5; top: 14px; right: 16px; margin: 0; }
.panel-stitok { display: none; }
.nit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nit-cesta { fill: none; stroke: var(--atrament); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
html:not(.anim) .nit, html:not(.anim) .scena-stitok { display: none; }

/* the documents: a month's nine, each whole and readable (the client, 2026-10-08: more invoices, receipts, the smaller
   invoices whole). They are sized in em from the sheet (a size container), so they lie on a laptop's shorter sheet as on
   a large screen; a phone keeps six (max-width: 600px) */
.doklady { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: clip; container-type: size; }
.doklad { position: absolute; width: 17em; padding: 1.15em 1.3em 1em; background: #FFFDF8; color: var(--atrament); border-radius: 2px;
  font: 400 clamp(9.5px, min(2.15cqh, 1.8cqw), 13px)/1.42 var(--f-text); font-variant-numeric: tabular-nums;
  box-shadow: 0 22px 34px -20px rgba(27, 42, 74, .55), 0 1px 2px rgba(27, 42, 74, .14); }
.d-typ { font: 450 1.55em/1.1 var(--f-display); }
.d-cislo { margin: .15em 0 .8em; color: var(--grafit); font-size: .9em; }
.d-riadok, .d-polozky p, .d-spolu { display: flex; justify-content: space-between; gap: .9em; }
.d-riadok span:first-child { color: var(--grafit); }
.d-polozky { margin: .55em 0; padding: .55em 0; border-top: 1px solid var(--linka); }
.d-spolu { padding-top: .55em; border-top: 1px solid var(--atrament); font-weight: 600; }
.d-suma { padding-bottom: 2px; border-bottom: 4px double var(--atrament); }
.doklad--prijata { background: #FDFBF5; }
.doklad--blocek { width: 12.5em; background: #FCFCF9; padding-bottom: 1.6em;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; }
.doklad--blocek .d-typ { font-size: 1.25em; }
.doklad--vypis { width: 19em; background: #F3F6FA; }
.doklad--vypis .d-riadok { font-size: .92em; }
.doklad--maly { width: 13.6em; }
.doklad--blocek.doklad--maly { width: 12.5em; }
/* three rows, each document clear of the next (laid out on the 722 x 600 sheet of 1440 x 900; the label stays free) */
.doklad[data-d="2"] { left: 3%; top: 4%; transform: rotate(3deg); }
.doklad[data-d="1"] { left: 36.3%; top: 6%; transform: rotate(-2deg); }
.doklad[data-d="3"] { left: 69.3%; top: 8.3%; transform: rotate(-5deg); }
.doklad[data-d="5"] { left: 4.2%; top: 35.7%; transform: rotate(-3deg); }
.doklad[data-d="7"] { left: 36.3%; top: 43.7%; transform: rotate(2deg); }
.doklad[data-d="8"] { left: 72%; top: 32.7%; transform: rotate(4deg); }
.doklad[data-d="6"] { left: 5.5%; top: 68.3%; transform: rotate(5deg); }
.doklad[data-d="4"] { left: 29.5%; top: 75.3%; transform: rotate(2deg); }
.doklad[data-d="9"] { left: 66.5%; top: 64.3%; transform: rotate(-5deg); }

/* the journal */
.dennik { position: absolute; left: 72px; right: 28px; top: 0; padding-top: 6px; font: 400 13px/34px var(--f-text); font-variant-numeric: tabular-nums; }
.dennik-nadpis { font: 450 20px/34px var(--f-display); }
.r { position: relative; display: grid; grid-template-columns: 56px 62px minmax(0, 1fr) 40px 40px 88px 22px; gap: 8px; align-items: center; height: 34px; }
.r span:nth-child(6) { text-align: right; }
.r span:nth-child(3) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r span:nth-child(4), .r span:nth-child(5) { color: var(--modra); font-weight: 600; }
.r--hlava { color: var(--grafit); font-size: 12px; }
.r--hlava span:nth-child(4), .r--hlava span:nth-child(5) { color: var(--grafit); font-weight: 400; }
.ok { width: 16px; height: 16px; justify-self: end; background: var(--modra);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.6 3.4L13.6 3.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.6 3.4L13.6 3.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.dennik-dalsie { color: var(--grafit); }

/* the overview (idea 35) */
.prehlad { position: relative; padding: 26px 30px 22px 72px; }
.prehlad-hlava { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; font: 450 21px/1.2 var(--f-display); }
.priklad { padding: 3px 8px; border: 1px solid var(--mosadz-2); border-radius: 2px; color: var(--mosadz-2); font: 500 12px/1.3 var(--f-text); }
.cisla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 8px; }
.cislo dt { display: flex; align-items: center; gap: 8px; min-height: 26px; color: var(--grafit); font: 500 13px/1.3 var(--f-text); }
.cislo dd { margin-top: 4px; }
.cislo-hodnota { font: 430 clamp(30px, 3.1vw, 46px)/1.05 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cislo--suma .cislo-hodnota { padding-bottom: 4px; border-bottom: var(--dvoj); }
.graf { position: relative; margin-top: 10px; }
.graf-svg { width: 100%; height: auto; overflow: visible; }
.g-mriezka line { stroke: var(--linka); stroke-width: 1; }
.g-mriezka text { font: 400 12px var(--f-text); fill: var(--grafit); font-variant-numeric: tabular-nums; }
.is-uzky .g-mriezka text, .is-uzky .g-rezerva text, .is-uzky .g-dnes text { font-size: 10.5px; }
.is-uzky .g-stitky { display: none; }
.g-mes.is-sep { fill: var(--atrament); font-weight: 600; }
.g-skutocnost { fill: none; stroke: var(--atrament); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.g-novembra, .g-januara { fill: none; stroke-width: 2.6; stroke-dasharray: 7 6; stroke-linejoin: round; stroke-linecap: round; }
.g-novembra { stroke: var(--cervena); }
.g-januara { stroke: var(--modra); }
.g-pod { fill: var(--cervena); fill-opacity: .14; }
.g-rezerva line { stroke: var(--mosadz-2); stroke-width: 1.5; stroke-dasharray: 2 4; }
.g-rezerva text, .g-dnes text { font: 600 12.5px var(--f-text); fill: var(--mosadz-2); }
.g-dnes line { stroke: var(--mosadz-2); stroke-width: 1.5; }
.g-bod { fill: var(--atrament); stroke: var(--harok); stroke-width: 3; }
.g-stitok { font: 600 13px var(--f-text); }
.g-stitok-nov { fill: var(--cervena); }
.g-stitok-jan { fill: var(--modra); }
.prehlad-pata { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 8px; font-size: 13.5px; color: var(--grafit); }
.leg { display: inline-flex; align-items: center; gap: 8px; }
.leg::before { content: ""; width: 26px; height: 0; border-top: 2.6px dashed; }
.leg--nov::before { border-color: var(--cervena); }
.leg--jan::before { border-color: var(--modra); }
.prehlad-pdf { margin-left: auto; font-weight: 500; }

/* the markers that explain */
.vys { position: relative; display: inline-flex; }
.vys--na-grafe { position: absolute; z-index: 3; transform: translate(-50%, -50%); }
.znacka { position: relative; width: 26px; height: 26px; padding: 0; border: 1.5px solid var(--mosadz-2); border-radius: 50%; background: var(--harok); cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease); }
.znacka::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--mosadz-2); transition: background-color .25s; }
.znacka:hover, .znacka[aria-expanded="true"] { background: var(--mosadz-2); transform: scale(1.08); }
.znacka:hover::after, .znacka[aria-expanded="true"]::after { background: var(--harok); }
.bublina { position: absolute; z-index: 10; top: calc(100% + 12px); left: 50%; width: max-content; max-width: 270px; padding: 12px 14px; transform: translateX(-50%);
  background: var(--atrament); color: var(--papier); border-radius: 3px; font: 400 14px/1.45 var(--f-text); text-align: left;
  box-shadow: 0 16px 30px -14px rgba(27, 42, 74, .65); }
.bublina::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.bublina[hidden] { display: none; }
.vys--vlavo .bublina { left: auto; right: -12px; transform: none; }
.vys--vlavo .bublina::before { left: auto; right: 19px; transform: rotate(45deg); }
.vys--hore .bublina { top: auto; bottom: calc(100% + 12px); }
.vys--hore .bublina::before { top: auto; bottom: -6px; }

/* the story in motion (main.js adds .anim when motion is allowed): layers overlap on one sheet */
.anim .pribeh-pin { height: 100vh; height: 100svh; padding-top: calc(var(--nav-h) + 20px); padding-bottom: 28px; }
.anim .pribeh-text { display: grid; }
.anim .uvod, .anim .kapitoly-blok { grid-area: 1 / 1; }
.anim .kapitoly-blok { margin-top: 0; align-self: center; }
.anim .scena { height: min(68svh, 600px); min-height: 0; }
@media (min-width: 961px) {   /* a short laptop screen (main.js fitColumn): the chapters get compact */
  .anim .pribeh-pin.is-nizky .kapitoly { gap: 14px; }
  .anim .pribeh-pin.is-nizky .kap-h { font-size: 24px; }
  .anim .pribeh-pin.is-nizky .kap p { margin-top: 4px; font-size: 15px; line-height: 1.45; }
  .anim .pribeh-pin.is-nizky .kap-e { margin-top: 6px !important; }
  .anim .pribeh-pin.is-nizky .koniec { margin-top: 18px; padding-top: 12px; font-size: 20px; }
}
.anim .prehlad { position: absolute; inset: 0; }
html:not(.anim) .scena { display: grid; gap: 24px; min-height: 0; }
html:not(.anim) .harok { display: none; }
html:not(.anim) .doklady, html:not(.anim) .dennik, html:not(.anim) .prehlad { position: relative; inset: auto; border-radius: 3px; background-color: var(--harok);
  box-shadow: 0 40px 70px -40px rgba(27, 42, 74, .45), 0 2px 8px -2px rgba(27, 42, 74, .12); }
html:not(.anim) .doklady::before, html:not(.anim) .dennik::before, html:not(.anim) .prehlad::before { content: ""; position: absolute; top: 0; bottom: 0; left: 52px; width: 4px;
  border-left: 1px solid rgba(176, 141, 74, .55); border-right: 1px solid rgba(176, 141, 74, .55); }
html:not(.anim) .doklady { height: 460px; }
html:not(.anim) .dennik { left: auto; right: auto; padding: 6px 28px 12px 72px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--linka) 33px 34px); background-position: 0 6px; }
html:not(.anim) .panel-stitok { display: block; position: absolute; z-index: 5; top: 12px; right: 14px; margin: 0; }

/* --- sections ------------------------------------------------------------------------------------------------------- */
.sekcia { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--pad) 0; }
.sekcia-hlava { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 60px); }
.h2 { font: 430 clamp(38px, 4.8vw, 66px)/1.04 var(--f-display); letter-spacing: -.025em; }
.h3 { font: 450 clamp(26px, 2.6vw, 34px)/1.15 var(--f-display); letter-spacing: -.015em; }
.lead { margin-top: 18px; max-width: 58ch; font-size: 19px; line-height: 1.55; color: var(--grafit); }
.poznamka { margin-top: 18px; font-size: 14px; color: var(--grafit); }

/* when to call: the client's situations as a ledger's index, question and answer on one ruled row */
.situacie { border-top: 1px solid var(--atrament); }
.situacie li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 10px clamp(24px, 4vw, 72px); align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--linka); }
.sit-otazka { max-width: 32ch; font: 400 clamp(22px, 2.2vw, 28px)/1.25 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.sit-odpoved { max-width: 44ch; color: var(--grafit); font-size: 16.5px; line-height: 1.55; }
.sit-odpoved a { display: table; margin-top: 8px; font-weight: 500; }
.pre-koho { margin-top: 26px; max-width: 72ch; color: var(--grafit); font-size: 15.5px; }

/* services: the financial management account on its own sheet, the two others open on the page */
.ucet h3 { font: 450 26px/1.15 var(--f-display); padding-bottom: 12px; border-bottom: var(--dvoj); }
.ucet li { padding: 12px 0; border-bottom: 1px solid var(--linka); }
.ucet--hlavny { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(28px, 4vw, 72px);
  margin-bottom: clamp(48px, 6vw, 84px); padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3.4vw, 48px) clamp(30px, 3.4vw, 46px) clamp(64px, 6.4vw, 96px);
  border-radius: 3px; background-color: var(--harok); box-shadow: 0 40px 70px -40px rgba(27, 42, 74, .45), 0 2px 8px -2px rgba(27, 42, 74, .12); }
.ucet--hlavny::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(30px, 3.2vw, 52px); width: 4px;
  border-left: 1px solid rgba(176, 141, 74, .55); border-right: 1px solid rgba(176, 141, 74, .55); }   /* the sheet's brass margin rule */
.ucet--hlavny h3 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.015em; }
.ucet-hlava p { margin-top: 16px; max-width: 34ch; color: var(--grafit); font-size: 17px; }
.ucet--hlavny ul { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--atrament); }
.ucty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 4vw, 72px); }

/* working together: four steps, then the two sides as one T-account beside what is good to know */
.kroky { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.kroky::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 1px; background: var(--atrament); }
.kroky li { position: relative; }
.krok-c { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border: 1.5px solid var(--atrament); border-radius: 50%;
  background: var(--papier); font: 450 24px/1 var(--f-display); }
.krok-h { margin-bottom: 8px; font: 450 22px/1.2 var(--f-display); letter-spacing: -.01em; }
.kroky p { max-width: 30ch; color: var(--grafit); font-size: 16.5px; }
.spolu-dole { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 88px); align-items: start; margin-top: clamp(64px, 8vw, 110px); }
.t-ucet h3 { padding-bottom: 12px; text-align: center; font: 450 24px/1.2 var(--f-display); border-bottom: 2px solid var(--atrament); }
.t { display: grid; grid-template-columns: 1fr 1fr; min-height: 190px; }
.t-strana { padding: 14px 14px 18px; }
.t-strana + .t-strana { border-left: 2px solid var(--atrament); }
.t-hlava { margin-bottom: 8px; color: var(--grafit); font: 600 13px/1.3 var(--f-text); }
.t-strana li { padding: 7px 0; font-size: 15.5px; line-height: 1.4; border-bottom: 1px solid var(--linka); }
.t-sedi { padding-top: 8px; border-top: var(--dvoj); text-align: right; font: 500 22px/1.2 var(--f-display); }
.t-popis { margin-top: 10px; color: var(--grafit); font-size: 14px; }
.dobre h3 { padding-bottom: 12px; font: 450 24px/1.2 var(--f-display); }   /* level with the T-account's head */
.dobre .fakty { margin-top: 0; }
.dobre .fakty div { grid-template-columns: 170px minmax(0, 1fr); }

/* the firm, and the person who leads it */
.o-firme { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.o-firme--bez-portretu { grid-template-columns: minmax(0, 1fr); }   /* the launch build until her photo comes (vydanie.py) */
.o-firme--bez-portretu .o-firme-text { max-width: 860px; }
.portret { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 3px; background-color: var(--harok);
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--linka) 33px 34px);
  box-shadow: 0 40px 70px -40px rgba(27, 42, 74, .45), 0 2px 8px -2px rgba(27, 42, 74, .12); }
.portret::before { content: ""; position: absolute; inset: 14px; border: 6px double var(--mosadz); border-radius: 2px; }
.portret-iniciala { font: 400 clamp(96px, 12vw, 168px)/1 var(--f-display); letter-spacing: -.04em; color: var(--atrament); opacity: .18; }
.portret-popis { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; color: var(--grafit); font-size: 14px; }
.o-firme-rola { margin-top: 12px; color: var(--grafit); }
.list-od { margin-top: 30px; }
.list-od p { max-width: 36ch; font: 400 23px/1.5 var(--f-display); }
.list-od p + p { margin-top: 14px; }
.list-od .podpis { display: inline-block; margin-top: 22px; padding-bottom: 6px; border-bottom: 5px double var(--mosadz); font-style: italic; font-size: 28px; }
.fakty { margin-top: 38px; border-top: 1px solid var(--atrament); }
.fakty div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linka); }
.fakty dt { color: var(--grafit); font-size: 14px; padding-top: 2px; }
.klienti-miesto { margin: 30px 0 0; padding: 20px 22px; border: 1.5px dashed var(--linka); border-radius: 3px; }
.klienti-miesto blockquote { margin: 0; font: 400 20px/1.4 var(--f-display); color: var(--grafit); }
.klienti-miesto figcaption { margin-top: 8px; color: var(--mosadz-2); font-size: 13px; font-weight: 500; }

/* contact: the dark band */
.kontakt { margin-top: clamp(90px, 12vw, 160px); background: var(--atrament); color: var(--papier); }
.kontakt-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 9vw, 128px) var(--pad); }
.h2--svetly { color: var(--papier); }
.kontakt-lead { margin-top: 18px; max-width: 40ch; color: var(--na-tmavom); font-size: 18px; }
.kontakt a { color: var(--papier); text-decoration-color: var(--mosadz); }
.kontakt a:hover { color: var(--mosadz-svetla); }
.kontakt :focus-visible { outline-color: var(--mosadz-svetla); }
.kontakt-cesty { margin-top: 36px; border-top: 1px solid rgba(246, 242, 234, .25); }
.kontakt-cesty li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(246, 242, 234, .25); }
.kc-co { color: var(--na-tmavom); font-size: 14px; }
.kontakt-cesty a { font: 400 clamp(20px, 2vw, 26px)/1.25 var(--f-display); text-decoration: none; overflow-wrap: anywhere; }
.kontakt-subory { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; font-size: 15px; }
.druhe-dvere { display: block; margin-top: 40px; padding: 18px 20px; border: 1px solid rgba(246, 242, 234, .3); border-radius: 3px; text-decoration: none !important;
  font-size: 15px; color: var(--na-tmavom) !important; transition: border-color .3s, background-color .3s; }
.druhe-dvere span { display: block; margin-bottom: 4px; color: var(--papier); font: 450 20px/1.2 var(--f-display); }
.druhe-dvere:hover { border-color: var(--mosadz); background: rgba(246, 242, 234, .04); }
.kontakt-cesty-blok .kontakt-cesty { margin-top: 6px; }
.kontakt-cesty a[href^="mailto:"] { font-size: clamp(19px, 1.65vw, 22px); overflow-wrap: normal; }   /* the address breaks only after @ */

.pata { max-width: var(--max); margin: 0 auto; padding: 48px var(--pad) 120px; display: grid; gap: 14px; color: var(--grafit); font-size: 13.5px; }
.pata-znak { font: 500 24px/1 var(--f-display); color: var(--znak); }
.pata-znak > span { display: inline-block; padding-bottom: 5px; border-bottom: 5px double var(--mosadz); }
.pata-udaje { max-width: 90ch; font-variant-numeric: tabular-nums; }
.pata-odkazy { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pata-web { color: var(--grafit); }

.akcje { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none; grid-template-columns: 1fr 1.3fr; gap: 10px;
  transition: transform .45s var(--ease), opacity .45s; }
.akcje[hidden] { display: none !important; }
.akcje.is-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; }
.akcje .btn { padding: 15px 12px; box-shadow: 0 12px 26px -12px rgba(27, 42, 74, .55); }
.akcje .btn--ciara { background: var(--papier); }

/* the view switch's phone frame */
.telefon-podglad { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: radial-gradient(ellipse at 50% 40%, #273A62 0%, var(--atrament) 72%); color: var(--papier); opacity: 0; transition: opacity .35s; }
.telefon-podglad.is-open { opacity: 1; }
.telefon-rama { grid-column: 2; width: 414px; height: 868px; padding: 12px; border-radius: 48px; background: #0F1830;
  box-shadow: 0 0 0 1.5px rgba(176, 141, 74, .45), 0 50px 100px -30px rgba(0, 0, 0, .9); transform-origin: center; }
.telefon-rama iframe { display: block; width: 390px; height: 844px; border: 0; border-radius: 38px; background: var(--papier); }
.telefon-opis { grid-column: 3; max-width: 320px; padding: 0 40px; }
.telefon-opis p { margin: 0 0 12px; font-size: 15px; color: var(--na-tmavom); }
.telefon-opis .label { color: var(--mosadz-svetla); font-weight: 600; }
.telefon-spat { position: absolute; top: 22px; right: var(--pad); border-color: var(--papier) !important; color: var(--papier) !important; }

/* --- smaller screens ------------------------------------------------------------------------------------------------ */
/* the studio's view switch is not the client's: on a computer it waits bottom right, out of the bar (the owner shows the
   phone view from a laptop), and on a phone it leaves */
@media (min-width: 961px) {
  .widok { position: fixed; right: 16px; bottom: 16px; z-index: 60; background: var(--papier); box-shadow: 0 12px 26px -16px rgba(27, 42, 74, .55); }
}
@media (max-width: 960px) {
  .widok { display: none; }
}
@media (max-width: 1600px) {   /* the mark, the deadline, eight links and the button on one line down to the drawer */
  .nav { gap: 22px; }
  .nav-odkazy { gap: 16px; }
  .nav-odkazy a { font-size: 14px; }
}
@media (max-width: 1100px) {
  .nav { gap: 18px; }
}
@media (max-width: 1365px) {   /* the links go to the menu, the button beside it: the full bar (the mark, the deadline, eight
   links, the button) needs 1347px with the widest date, measured 2026-10-08 */
  .nav-odkazy { display: none; }
  .menu-btn { display: inline-flex; margin-left: 0; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 960px) {
  .pribeh-pin { grid-template-columns: minmax(0, 1fr); }
  .scena { min-height: 520px; }
  .ucty, .spolu-dole, .ucet--hlavny { grid-template-columns: minmax(0, 1fr); }
  .o-firme, .kontakt-in { grid-template-columns: minmax(0, 1fr); }
  .kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .kroky::before { display: none; }
  .portret { max-width: 420px; }
}
@media (max-width: 860px) {
  :root { --nav-h: 66px; }
  .nav-cta { display: none; }
  .menu-btn { margin-left: auto; }
  .znak { width: 160px; }
  .znak-cinnost { font-size: 10.6px; }
  .akcje { display: grid; }
  .nav { gap: 12px; }
  .termin { column-gap: 7px; }
  .termin-stitok { font-size: 10.5px; }
  .termin-datum { font-size: 12.5px; }
  .termin-dlhy { display: none; }
  .termin-kratky { display: inline; }
  .kroky { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .kroky::before { display: block; left: 26px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .kroky li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
  .krok-c { margin: 0; }
  .krok-h { margin: 12px 0 4px; }
  .situacie li { grid-template-columns: minmax(0, 1fr); }
  .ucet--hlavny ul { grid-template-rows: none; grid-auto-flow: row; }
  .t { min-height: 0; }
  .pata { padding-bottom: 110px; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .uvod h1 { font-size: clamp(40px, 11.4vw, 52px); }
  .uvod-sub { font-size: 17.5px; margin-top: 18px; }
  .uvod-cta { margin-top: 22px; }
  .uvod-cta .btn { flex: 1 1 auto; }
  .scena { min-height: 470px; }
  .harok-okraj { left: 30px; }
  .prehlad { padding: 18px 16px 16px 44px; }
  .prehlad-hlava { font-size: 17px; }
  .cisla { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 10px 0 4px; border-top: 1px solid var(--linka); }
  .cislo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--linka); }
  .cislo dd { margin: 0; }
  .cislo-hodnota { font-size: 23px; }
  .cislo--suma .cislo-hodnota { border-bottom-width: 5px; padding-bottom: 2px; }
  .doklad { width: 16em; padding: 1.15em 1.2em 1em; font-size: clamp(9px, min(3.15cqw, 2.08cqh), 12px); }
  .doklad--blocek, .doklad--blocek.doklad--maly { width: 12.4em; }
  .doklad--vypis { width: 17.8em; }
  .doklad--maly { width: 13.6em; }
  .scena-stitok, html:not(.anim) .panel-stitok { top: auto; bottom: 12px; }
  .doklad[data-d="2"] { left: 1.7%; top: 1.5%; } .doklad[data-d="1"] { left: 48.6%; top: 4.2%; } .doklad[data-d="3"] { left: 5.1%; top: 31.4%; }
  .doklad[data-d="6"] { left: 57.1%; top: 40.2%; } .doklad[data-d="5"] { left: 3.4%; top: 55.3%; } .doklad[data-d="4"] { left: 42.9%; top: 71%; }
  .doklad--navyse { display: none; }   /* a phone keeps six documents */
  html:not(.anim) .dennik { padding: 6px 14px 46px 40px; }   /* the label sits under the last line */
  html:not(.anim) .doklady::before, html:not(.anim) .dennik::before, html:not(.anim) .prehlad::before { left: 30px; }
  .d-typ { font-size: 1.45em; }
  .dennik { left: 40px; right: 12px; font-size: 11.5px; }
  .r { grid-template-columns: 42px minmax(0, 1fr) 26px 26px 58px 12px; gap: 4px; }
  .r span:nth-child(2) { display: none; }
  .ok { width: 13px; height: 13px; }
  .kap-h { font-size: 24px; }
  .koniec { font-size: 20px; }
  .h2 { font-size: clamp(34px, 9.4vw, 44px); }
  .list-od p { font-size: 20px; }
  .fakty div, .dobre .fakty div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kontakt-cesty li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vys--na-grafe .znacka { width: 24px; height: 24px; }
  .bublina { max-width: min(260px, 72vw); }
}
@media (max-width: 600px) and (max-height: 700px) {   /* a short phone's sheet holds five: the fuel receipt steps out */
  .doklad[data-d="6"] { display: none; }
  .doklad[data-d="4"] { top: 52%; }
}
/* the phone's story: one chapter at a time, the sheet below */
@media (max-width: 960px) {
  .anim .pribeh > .uvod { padding: calc(var(--nav-h) + 26px) var(--pad) 30px; }
  .anim .pribeh-pin { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 14px; padding-top: calc(var(--nav-h) + 12px); padding-bottom: 86px; }
  .anim .scena { height: auto; min-height: 0; }
  .anim .kapitoly { display: grid; }
  .anim .kap { grid-area: 1 / 1; }
  .anim .kapitoly-blok { align-self: start; }
  .anim .kapitoly-blok { display: grid; }
  .anim .kapitoly-blok > * { grid-area: 1 / 1; }
  .anim .koniec { margin-top: 0; align-self: start; }
  .anim .uvod h1 { font-size: clamp(36px, 9.6vw, 56px); }
  .anim .uvod-sub { margin-top: 12px; }
  .anim .uvod-podpis { margin-top: 10px; }
  .anim .uvod-cta { margin-top: 16px; }
  /* a short phone (main.js fitScene): compact words and overview; a scene that still needs more height is drawn smaller */
  .anim .pribeh-pin.is-nizky .kap-h { font-size: 22px; }
  .anim .pribeh-pin.is-nizky .kap p { font-size: 15px; line-height: 1.45; }
  .anim .pribeh-pin.is-nizky .kap-e { display: none; }
  .anim .pribeh-pin.is-nizky .koniec { font-size: 18px; padding-top: 12px; }
  .anim .pribeh-pin.is-nizky .prehlad { padding-top: 14px; }
  .anim .pribeh-pin.is-nizky .cislo { padding: 2px 0; }
  .anim .pribeh-pin.is-nizky .cislo-hodnota { font-size: 20px; }
  .anim .pribeh-pin.is-nizky .prehlad-pdf { display: none; }
  .anim .scena.is-zmensena { transform: scale(var(--s, 1)); transform-origin: 50% 0; }
}
/* v0.3 · motion.js and the story's chapters ------------------------------------------------------------------------ */
/* the page assembles on load: hidden from the first paint, motion.js takes over (index.html's head script sets .intro);
   the bar stays, empty, and its mark assembles first */
.intro .nav > *, .intro .uvod > *, .intro .scena { opacity: 0; }
/* a chapter steps forward: a brass bookmark drawn down beside it (main.js tweens --kap-bar, x and scale) */
.kap { position: relative; transform-origin: 0 50%; }
.kap::before { content: ""; position: absolute; left: -18px; top: 6px; bottom: 6px; width: 3px; background: var(--mosadz); transform: scaleY(var(--kap-bar, 0)); transform-origin: 50% 0; }
/* the chart's markers breathe a mild brass glow, so a mouse knows it can hover; it stops on hover */
@keyframes dych { 0%, 100% { box-shadow: 0 0 0 0 rgba(176, 141, 74, 0), 0 0 6px 0 rgba(176, 141, 74, .25); } 50% { box-shadow: 0 0 0 6px rgba(176, 141, 74, .16), 0 0 16px 2px rgba(176, 141, 74, .38); } }
.anim .prehlad .znacka { animation: dych 2.8s ease-in-out infinite; }
.anim .prehlad .znacka:hover, .anim .prehlad .znacka[aria-expanded="true"] { animation: none; }
/* Uzávierka: the paper sinks into ink above the contact (motion.js scrubs --sumrak; without it the dusk stays still) */
.kontakt { position: relative; }
.kontakt::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(90px, 12vw, 160px); background: linear-gradient(to bottom, rgba(27, 42, 74, 0), var(--atrament)); opacity: var(--sumrak, 1); pointer-events: none; }
/* the books close (pis.js): the footer is written, then the brass double rule under its name is drawn in two strokes, the
   upper and then the lower. The two lines replace the 5px double border in place (2px, 1px apart, 2px), so the drawn
   rule and the still one are the same rule */
.anim .pata-znak > span { position: relative; border-bottom-color: transparent; }
.anim .pata-znak > span::before, .anim .pata-znak > span::after { content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--mosadz); transform-origin: 0 50%; }
.anim .pata-znak > span::before { bottom: -2px; transform: scaleX(var(--r1, 1)); }
.anim .pata-znak > span::after { bottom: -5px; transform: scaleX(var(--r2, 1)); }

/* the contact form on the ink band (shown by main.js once it has its key; LAUNCH_PLAN Q28) */
.formular { display: grid; gap: 16px; max-width: 40ch; margin-top: 34px; }
.formular[hidden] { display: none; }
.f-pole { display: grid; gap: 6px; }
.f-pole label { color: var(--na-tmavom); font: 500 14px/1.3 var(--f-text); }
.f-pole input, .f-pole textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(246, 242, 234, .4); border-radius: 0;
  background: transparent; color: var(--papier); font: 400 18px/1.4 var(--f-text); }
.f-pole textarea { resize: vertical; min-height: 6.5em; }
.f-pole input:focus, .f-pole textarea:focus { outline: none; border-bottom-color: var(--mosadz-svetla); box-shadow: 0 1px 0 var(--mosadz-svetla); }
.f-info { color: var(--na-tmavom); font-size: 14px; }
.f-odoslat { justify-self: start; background: var(--papier); color: var(--atrament); }
.f-odoslat:hover { background: var(--mosadz-svetla); color: var(--atrament); }
.f-stav { min-height: 1.5em; color: var(--papier); font-size: 15px; }

@media (max-width: 374px) {   /* the smallest phones: the mark and the menu button only */
  .termin { display: none; }
}
@media (max-width: 359px) {
  .uvod-podpis { white-space: normal; }
}

/* Čo sa stalo, in hand (main.js, a computer with a mouse; the owner, 2026-10-08): the documents sway a little until
   touched, lift under the hand, and lie where they are put; the next chapter files them */
.doklad-ruka { position: absolute; inset: 0; pointer-events: none; }
@keyframes kyv { 0%, 100% { rotate: -.7deg; translate: 0 0; } 50% { rotate: .7deg; translate: 0 -3px; } }
.doklady-volne .doklad { pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
  animation: kyv 3.8s ease-in-out infinite; transition: box-shadow .25s var(--ease); }
.doklady-volne .doklad[data-d="2"] { animation-delay: -0.7s; }
.doklady-volne .doklad[data-d="3"] { animation-delay: -1.6s; animation-duration: 4.3s; }
.doklady-volne .doklad[data-d="4"] { animation-delay: -2.4s; }
.doklady-volne .doklad[data-d="5"] { animation-delay: -3.1s; animation-duration: 4.1s; }
.doklady-volne .doklad[data-d="6"] { animation-delay: -1.2s; animation-duration: 3.5s; }
.doklady-volne .doklad[data-d="7"] { animation-delay: -2.9s; animation-duration: 4s; }
.doklady-volne .doklad[data-d="8"] { animation-delay: -0.4s; animation-duration: 3.7s; }
.doklady-volne .doklad[data-d="9"] { animation-delay: -1.9s; animation-duration: 4.4s; }
.doklady-volne .doklad:hover { animation-play-state: paused; box-shadow: 0 30px 40px -20px rgba(27, 42, 74, .6), 0 1px 3px rgba(27, 42, 74, .16); }
.doklady-volne .doklad.je-v-ruke { cursor: grabbing; animation: none; box-shadow: 0 40px 50px -22px rgba(27, 42, 74, .62), 0 2px 4px rgba(27, 42, 74, .16); }

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

/* Lenis's own rules (lenis 1.3.26, MIT; CREDITS.md), inline so they block nothing */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }