/* ============================================================
   HEXAFORCE · dizajnový systém webu
   Kánon: sumi #17130D · bone #E9E2D2 · amber #C0691C
   Zákony: 60/30/10 · jeden amber ťah na pohľad · pohyb 0.6–1.5s
   žiadny bounce · obsah nikdy skrytý za animáciou
   ============================================================ */

:root{
  /* farby — kánon (manuál ch11) */
  --sumi-0:#0F0C08;
  --sumi:#17130D;
  --sumi-1:#141009;
  --sumi-2:#211B12;
  --bone:#E9E2D2;
  --bone-dim:#A99E86;
  --amber:#C0691C;
  --gold:#D9922F;
  --umber:#7A3E14;
  --taupe:#8A7E64;
  --line:rgba(233,226,210,.10);
  --line-2:rgba(233,226,210,.16);

  /* registre — ink (tmavý, default) */
  --bg:var(--sumi);
  --bg-deep:var(--sumi-0);
  --fg:var(--bone);
  --fg-dim:var(--bone-dim);
  --accent-text:var(--gold); /* malý amber text = vždy gold (WCAG) */

  /* typografia — štyri hlasy (manuál ch12) */
  --display:'Fraunces','Fraunces-fallback',Georgia,serif;
  --vow:'Cormorant Garamond',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* pohyb — domáce easingy (manuál ch14) */
  --ease-cinematic:cubic-bezier(.25,.1,.25,1);
  --ease-flow:cubic-bezier(.33,0,.2,1);
  --ease-lux:cubic-bezier(.465,.183,.153,.946);
  --dur-1:.6s; --dur-2:.9s; --dur-3:1.2s; --dur-4:1.5s;

  --wrap:1120px;
  --wrap-text:720px;
}

/* register papiera (Hexagram po prekročení prahu) */
.register-paper{
  --bg:var(--bone);
  --bg-deep:#E0D8C5;
  --fg:var(--sumi);
  --fg-dim:#5E5340;
  --line:rgba(23,19,13,.14);
  --line-2:rgba(23,19,13,.26);
  --accent-text:var(--umber); /* malý akcent na papieri = umber */
}

/* ---------- fallback font (metric match — žiadny CLS pri swape) ---------- */
@font-face{
  font-family:'Fraunces-fallback';
  src:local('Georgia');
  size-adjust:104%;
  ascent-override:96%;
  descent-override:24%;
  line-gap-override:0%;
}

/* ---------- prechody medzi stránkami (View Transitions, čisté CSS) ----------
   Pomalý crossfade — vážny rytmus. Nepodporujúci prehliadač = obyčajná navigácia. */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.7s;
  animation-timing-function:cubic-bezier(.25,.1,.25,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(16px,1.05vw + 12px,18px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
::selection{background:var(--amber);color:var(--sumi)}

/* ---------- zrno (washi) — jedna vrstva na celý dokument ---------- */
.grain::after{
  content:"";
  position:fixed; inset:-40px; z-index:60;
  pointer-events:none;
  opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.register-paper.grain::after{opacity:.28;mix-blend-mode:multiply}

/* ---------- typografická škála ---------- */
.display{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:'opsz' 144;
  font-size:clamp(44px,9vw,120px);
  line-height:.96;
  letter-spacing:-.02em;
  margin:0;
}
h1,.h1{font-family:var(--display);font-weight:900;font-size:clamp(36px,6.5vw,84px);line-height:1.02;letter-spacing:-.02em;margin:0}
h2,.h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,4vw,56px);line-height:1.08;letter-spacing:-.01em;margin:0 0 .5em}
h3,.h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,26px);line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1.2em;max-width:62ch}
.small{font-size:clamp(13px,1vw,15px)}
.kicker{
  font-family:var(--mono);
  font-size:clamp(11px,.9vw,13px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.kicker.accent{color:var(--accent-text)}
.vow{
  font-family:var(--vow);
  font-style:italic;
  font-weight:500;
  font-size:clamp(20px,2.6vw,28px);
  line-height:1.5;
}
.dim{color:var(--fg-dim)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.wrap-text{max-width:var(--wrap-text);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.ma{height:clamp(80px,16vh,180px)} /* 間 — navrhnutá pauza, nie medzera */
.ma-half{height:clamp(40px,8vh,90px)}
.hair{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- akcia — jeden amber ťah ---------- */
.act{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sumi);
  background:var(--amber);
  border:1px solid var(--amber);
  padding:17px 34px;
  text-decoration:none;
  transition:background var(--dur-1) var(--ease-cinematic),border-color var(--dur-1) var(--ease-cinematic),transform var(--dur-1) var(--ease-cinematic);
}
.act:hover,.act:focus-visible{background:var(--gold);border-color:var(--gold)}
.act:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.act:active{transform:translateY(1px)}

/* tichá akcia — bone, nikdy druhý amber */
.quiet{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);
  background:transparent;
  border:1px solid var(--line-2);
  padding:15px 28px;
  text-decoration:none;
  transition:border-color var(--dur-1) var(--ease-cinematic),color var(--dur-1) var(--ease-cinematic);
}
.quiet:hover,.quiet:focus-visible{border-color:var(--fg);color:var(--fg)}
.quiet:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* textový odkaz */
.tlink{
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:var(--line-2);
  transition:text-decoration-color var(--dur-1) var(--ease-cinematic);
}
.tlink:hover,.tlink:focus-visible{text-decoration-color:var(--gold)}

/* ---------- hlavička ---------- */
.site-head{
  position:absolute;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,3vw,30px) clamp(20px,4vw,48px);
}
.site-head .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.site-head .brand svg,.site-head .brand img{width:34px;height:34px}
.site-head .brand .bn{
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.02em;color:var(--fg);
}
.site-nav{display:flex;gap:clamp(18px,3vw,34px)}
.site-nav a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-dim);text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color var(--dur-1) var(--ease-cinematic),border-color var(--dur-1) var(--ease-cinematic);
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--fg)}
.site-nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--gold)}

/* ---------- pätička ---------- */
.site-foot{
  border-top:1px solid var(--line);
  padding:clamp(40px,7vh,80px) 0 clamp(30px,5vh,50px);
}
.site-foot .cols{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.site-foot .seal-mark{width:44px;opacity:.9}
.site-foot .fnav{display:flex;flex-wrap:wrap;gap:20px}
.site-foot .fnav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-dim);text-decoration:none;
}
.site-foot .fnav a:hover{color:var(--fg)}
.site-foot .motto{
  font-family:var(--vow);font-style:italic;font-size:17px;color:var(--fg-dim);
  margin-top:34px;text-align:center;
}

/* ---------- odhaľovanie — obsah NIKDY skrytý bez JS ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--dur-3) var(--ease-flow),transform var(--dur-3) var(--ease-flow);
}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-late{transition-delay:.18s}

/* hero variant — LCP-safe: text je namaľovaný hneď (nikdy opacity:0 na LCP uzle) */
.reveal-hero{opacity:1;transform:none}
.js .reveal-hero{
  opacity:.35;
  transform:translateY(10px);
  transition:opacity var(--dur-4) var(--ease-lux),transform var(--dur-4) var(--ease-lux);
}
.js .reveal-hero.in{opacity:1;transform:none}

/* výkon: sekcie pod fold-om sa nerenderujú zbytočne */
.cv{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* ---------- zdieľaný prvok medzi stránkami: pečať cestuje ---------- */
.site-head .brand img{view-transition-name:hxf-seal}

/* ============================================================
   GEN systém — VYGENEROVANÝ obsah (kvalitný fake, čaká na originál).
   Fialová je ZÁMERNE mimo palety: nemôže sa pomýliť so značkou
   a nesmie prežiť do produkcie. Pred spustením: vyhľadaj "gen-" v kóde.
   ============================================================ */
:root{--gen:#8A63D2}
.gen-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gen);
  border:1px dashed var(--gen);
  padding:5px 10px;
  margin-bottom:14px;
}
.gen-block{
  border-left:2px solid var(--gen);
  padding-left:clamp(16px,3vw,26px);
}
.gen-frame{
  outline:1px dashed var(--gen);
  outline-offset:6px;
}

/* ---------- prístupnosť pohybu ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
}

/* ---------- mobil ---------- */
@media (max-width:640px){
  .site-nav{gap:16px}
  .site-nav a{font-size:10.5px;letter-spacing:.14em}
  .site-head .brand .bn{display:none}
}

/* ============================================================
   v2 · smer C „Pečať ako mechanizmus" (G1 · 22.7.) — podstránky
   Platňa namiesto plochej farby: tá istá hmota ako domov a prah.
   Len tmavý register — papierové stránky ostávajú čisté.
   ============================================================ */
body.plate-bg{background-color:var(--sumi)}
body.plate-bg::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(178deg,rgba(23,19,13,.52) 0%,rgba(23,19,13,.78) 46%,rgba(23,19,13,.96) 82%,#17130D 100%),
    url(../img/platna.webp);
  background-size:cover; background-position:50% 26%;
}