/* ondrejchatrnuch.sk + ondrejchatrnuch.com — spoločný štýl (návrh A „Editoriál“)
   Zdroj pravdy je spolocne/assets/styl.css. Kópie v sk/assets a en/assets robí nastroje/zlad.sh.
   Po každej zmene zvýš ?v= vo všetkých HTML (zlad.sh to kontroluje). */

/* PISMA-ZACIATOK — generuje nastroje/pisma.py, ručne neupravovať.
   Newsreader a Manrope (SIL Open Font License 1.1, licencie v /assets/pisma/), len latin + latin-ext. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/pisma/manrope-normal-latin-ext.woff2?v=2026.11.15") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/pisma/manrope-normal-latin.woff2?v=2026.11.15") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 600;font-display:swap;src:url("/assets/pisma/newsreader-normal-latin-ext.woff2?v=2026.11.15") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 600;font-display:swap;src:url("/assets/pisma/newsreader-normal-latin.woff2?v=2026.11.15") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* PISMA-KONIEC */

:root{
  --papier:#F6F4EF; --papier-2:#EFECE4; --atrament:#161A22;
  --linka:#DCD8CE; --slivka:#6E2C5A; --slivka-svetla:#EEE2EA;
  --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --okraj:clamp(20px,5vw,72px); --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--atrament);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
em{font-style:normal}
:focus-visible{outline:2px solid var(--slivka);outline-offset:3px;border-radius:2px}
.preskocit{position:absolute;left:-999px;top:0}
.preskocit:focus{left:16px;top:16px;background:#fff;padding:10px 14px;z-index:10}
.obal{max-width:var(--max);margin:0 auto;padding:0 var(--okraj)}

/* Hlavička */
header{border-bottom:1px solid var(--linka)}
/* Mriežka: meno (len na podstránkach) vľavo, ponuka presne v strede, EN vpravo. */
header .obal{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:72px}
header .znak{grid-column:1;justify-self:start}
header nav{grid-column:2}
header .jazyk{grid-column:3;justify-self:end}
.znak{display:inline-block;padding:12px 0;font:500 20px/1 var(--serif);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px}
nav a{text-decoration:none;color:var(--atrament)}
nav a:hover{text-decoration:underline;text-underline-offset:5px}
.jazyk{display:inline-flex;align-items:center;min-height:36px;font-size:13px;font-weight:600;letter-spacing:.08em;text-decoration:none;border:1px solid var(--linka);padding:0 12px;border-radius:99px}
.jazyk:hover{border-color:var(--atrament)}

/* Hrdina */
/* Vodoznak Nitrianskeho hradu (sídlo firmy) za menom a fotkou. Kresba od Ondreja, priehľadnú verziu
   robí nastroje/hrad.py. Špička krížika začína na linke pod hlavičkou, na počítači presne pod odkazom
   „Čo robím“: ten je pri každej šírke 66.7 px vľavo od stredu (ak sa zmení ponuka, číslo premerať).
   45.44 % = poloha krížika v obrázku. Jemnosť ladí opacity. Len ozdoba, čítačky ho preskočia. */
.hrdina{position:relative;isolation:isolate;overflow:hidden}
.hrdina::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;height:100%;aspect-ratio:1479/763;left:calc(50% - 66.7px);transform:translateX(-45.44%);background:url("/assets/img/hrad-nitra.webp?v=2026.11.15") no-repeat 0 0/100% 100%;opacity:.09}
/* Anglická ponuka má iné slová: „What I do“ je 51.2 px vľavo od stredu. Len na počítači, na telefóne je krížik na strede. */
@media (min-width:861px){html[lang="en"] .hrdina::before{left:calc(50% - 51.2px)}}
.hrdina .obal{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,96px);align-items:center;padding-top:clamp(48px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.stitok{font:600 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--atrament);margin:0 0 28px}
h1{font:300 clamp(58px,10vw,148px)/.92 var(--serif);letter-spacing:-.025em;margin:0}
h1 span{display:block}
.rola{font:500 15px/1.5 var(--sans);color:var(--atrament);margin:32px 0 0;padding-top:20px;border-top:1px solid var(--linka);max-width:40em}
.uvod{font:400 clamp(22px,2.4vw,30px)/1.35 var(--serif);margin:20px 0 36px;max-width:22em}
.tlacidla{display:flex;flex-wrap:wrap;gap:12px}
.tl{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:99px;font:600 15px/1 var(--sans);text-decoration:none}
.tl--plne{background:var(--atrament);color:var(--papier)}
.tl--plne:hover{background:var(--slivka)}
.tl--obrys{border:1px solid var(--atrament)}
.tl--obrys:hover{background:var(--papier-2)}
.portret{margin:0;position:relative}
.portret img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 8%;border-radius:6px;background:#fff}
.portret figcaption,.tim-foto figcaption{font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--atrament);margin-top:14px;display:flex;justify-content:space-between}

/* Sekcie */
section{padding:clamp(64px,9vw,128px) 0;border-top:1px solid var(--linka)}
.hlava{display:grid;grid-template-columns:1fr 2fr;gap:32px;margin-bottom:clamp(36px,5vw,64px)}
.hlava .cislo{font:400 22px/1 var(--serif)}
h2{font:300 clamp(36px,5vw,64px)/1.04 var(--serif);letter-spacing:-.015em;margin:0}
.hlava p{color:var(--atrament);margin:14px 0 0;max-width:36em}

/* 01 Cesta */
.cesta{list-style:none;margin:0;padding:0}
.cesta li{display:grid;grid-template-columns:1fr 2fr;gap:32px;padding:26px 0;border-top:1px solid var(--linka)}
.cesta li:last-child{border-bottom:1px solid var(--linka)}
.rok{font:300 clamp(34px,4vw,52px)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.rok small{display:block;font:600 12px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--atrament);margin-top:8px}
.cesta h3{font:500 22px/1.25 var(--serif);margin:4px 0 6px}
.cesta p{margin:0;color:var(--atrament)}

/* 02 Čo robím: fotka tímu a dve karty */
.tim-foto{margin:0 0 clamp(20px,3vw,40px)}
.tim-foto img{display:block;width:100%;height:auto;border-radius:6px;background:#fff}
.firmy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.firma{background:var(--papier-2);border-radius:6px;padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:14px}
.firma .druh{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--atrament)}
.firma h3{font:400 clamp(30px,3.4vw,44px)/1.05 var(--serif);letter-spacing:-.02em;margin:0}
.firma p{margin:0;color:var(--atrament);flex:1}
.firma a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start}
.firma a:hover{box-shadow:0 1px 0 currentColor}
.firma h3{display:flex;align-items:center;min-height:clamp(53px,4.94vw,66px)}

/* Karta Riaditeľstva 1063 v jazyku jeho značky (ako hlavička riaditelstvo1063.sk): zlatý znak na čiernom
   so zlatou linkou a nápis „Riaditeľstvo 1063“ písmom Cormorant Garamond, „1063“ zlatou. Texty karty majú písmo webu.
   Súbory pripravuje nastroje/znacka_1063.py z repozitára webu 1063 (písmo orezané na slovenčinu, SIL OFL).
   Na svetlej karte je „1063“ tmavým zlatom webu 1063 (#8C6D22, 4,1 : 1 – stačí na veľký text); jasné zlato
   (#E6B648) má na papieri len 1,6 : 1, preto ostáva len na linke okolo znaku. Nápis sa zmenšuje podľa šírky karty (jednotky cqi), takže sa zmestí aj na úzky telefón. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/riaditelstvo1063/cormorant-latin-ext.woff2?v=2026.11.15") format("woff2");unicode-range:U+0100-017F}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/riaditelstvo1063/cormorant-latin.woff2?v=2026.11.15") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
.firma--1063{container-type:inline-size}
.firma--1063 h3{gap:min(clamp(12px,1.25vw,16px),4cqi);font:500 min(clamp(29px,2.7vw,35px),10cqi)/1 "Cormorant Garamond",var(--serif);letter-spacing:.02em;white-space:nowrap}
.firma--1063 h3 img{display:block;flex:none;width:min(clamp(53px,4.94vw,65px),19.7cqi);height:auto;border:1px solid #E6B648}
.firma--1063 h3 .zlato{color:#8C6D22;font-weight:400}

/* 03 Čísla */
.cisla{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--atrament)}
.cisla div{padding:28px 24px 0 0}
.cisla strong{display:block;font:300 clamp(44px,5.4vw,76px)/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:-.03em;white-space:nowrap}
.cisla span{display:block;color:var(--atrament);font-size:15px;margin-top:12px;max-width:16em}
.poznamka{font-size:13px;color:var(--atrament);margin-top:32px}

/* 04 Ako pracujem */
.zasady{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;list-style:none;margin:0;padding:0}
.zasady li{border-top:1px solid var(--atrament);padding-top:20px}
.zasady h3{font:500 24px/1.2 var(--serif);margin:0 0 8px}
.zasady p{margin:0;color:var(--atrament)}

/* 05 Kontakt */
.cesty{list-style:none;margin:0;padding:0}
.cesty a{display:grid;grid-template-columns:1fr 1.4fr auto;gap:24px;align-items:center;padding:30px 0;border-top:1px solid var(--linka);text-decoration:none}
.cesty li:last-child a{border-bottom:1px solid var(--linka)}
.cesty strong{font:400 clamp(24px,2.8vw,36px)/1.1 var(--serif);letter-spacing:-.015em}
.cesty span{color:var(--atrament)}
.cesty i{font-style:normal;font-size:26px;transition:transform .2s}
.cesty a:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.cesty a:hover i{transform:translateX(6px)}
.priamo{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:40px;font-weight:500}
.priamo a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid var(--linka)}
.priamo a:hover{border-color:var(--atrament)}

/* Pätička */
footer{background:var(--papier-2);color:var(--atrament);border-top:1px solid var(--linka);padding:48px 0;font-size:14px}
footer .obal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
footer a{color:var(--atrament);text-underline-offset:3px}
footer a:hover{text-decoration-thickness:2px}
footer p{margin:0;max-width:44em}
.pata-text{display:grid;gap:10px;max-width:44em}

/* Podstránky: ochrana súkromia, 404 */
.pravne{max-width:44em;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(64px,9vw,128px)}
.pravne h1{font-size:clamp(40px,6vw,72px);line-height:1;margin-bottom:12px}
.pravne .aktualizacia{color:var(--atrament);font-size:14px;margin:0 0 40px}
.pravne h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin:44px 0 12px}
.pravne ul{padding-left:1.2em}
.pravne li{margin:6px 0}
.chyba{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding-top:64px;padding-bottom:96px}
.chyba h1{font-size:clamp(44px,8vw,104px);line-height:.95;margin-bottom:20px}
.chyba p{color:var(--atrament);max-width:30em;margin:0 0 32px}

/* Telefón a tablet */
@media (max-width:860px){
  nav ul{display:none}
  .hrdina .obal{grid-template-columns:1fr}
  /* Telefón a tablet: ponuka je skrytá, krížik na strede. Hrad je nižší, aby skončil nad fotkou
     (fotka je pod textom a je nepriehľadná, hrad by za ňou zmizol). */
  .hrdina::before{left:50%;height:min(115vw,460px)}
  .portret{max-width:420px}
  .hlava,.cesta li{grid-template-columns:1fr;gap:10px}
  .firmy,.zasady{grid-template-columns:1fr}
  .firma h3{min-height:0}
  .cisla{grid-template-columns:1fr 1fr;row-gap:28px}
  .cesty a{grid-template-columns:1fr auto;row-gap:6px}
  .cesty span{grid-column:1}
  .cesty i{grid-row:1/3;grid-column:2}
}
@media (max-width:400px){
  .cisla strong{font-size:36px}
  .cisla div{padding-right:12px}
}
@media (pointer:coarse),(max-width:720px){
  .jazyk{min-height:44px;padding:0 14px}
  footer a{display:inline-block;padding:12px 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}