/* ==========================================================================
   MASTERKA — Brand Kit · sdílené tokeny a komponenty
   Používají všechny šablony v /brand. Měň barvy/fonty jen tady.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&family=Victor+Mono:ital,wght@0,400;0,500;0,700;1,400&display=block');

:root {
  /* Barvy (Brand Book v7) */
  --accent: #FF4400;      /* Accent Orange — hvězda, CTA */
  --accent-2: #FF9A76;    /* konec gradientu */
  --accent-soft: #FFE3D6;
  --void: #0A0A0A;        /* Void Black */
  --void-2: #141414;
  --paper: #F4F4F0;       /* Paper Off-White */
  --paper-2: #EAEAE4;
  --white: #FFFFFF;
  --green: #22C55E;       /* Availability */
  --grey: #8A8A85;
  --grad: linear-gradient(135deg, #FF4400 0%, #FF9A76 100%);
  --grad-sunrise: linear-gradient(160deg, #FF4400 0%, #FF6B2B 45%, #FFB48F 100%);

  /* Písma */
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-sans: 'Manrope', system-ui, sans-serif;
  --f-mono: 'Victor Mono', ui-monospace, monospace;

  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0L61.2257 38.7743L100 50L61.2257 61.2257L50 100L38.7743 61.2257L0 50L38.7743 38.7743L50 0Z'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ---------- Artboard ---------- */
.ab { position: relative; overflow: hidden; font-family: var(--f-sans); color: var(--void); background: var(--paper);
      -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; flex: none; }
.ab > * { position: absolute; }
.ab .flow, .ab .flow * { position: static; }

/* Témata */
.t-paper  { background: var(--paper); color: var(--void); }
.t-white  { background: var(--white); color: var(--void); }
.t-void   { background: var(--void);  color: var(--paper); }
.t-accent { background: var(--grad-sunrise); color: var(--white); }
.t-solid  { background: var(--accent); color: var(--white); }

/* ---------- Typografie ---------- */
.serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.02em; line-height: .92; }
.ital  { font-style: italic; }
.sans  { font-family: var(--f-sans); }
.mono  { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .16em; font-weight: 500; }
.acc   { color: var(--accent); }
.mute  { opacity: .55; }

/* Logo „Masterka ✦“ — kit.js doplní kerning a hvězdu (vždy hvězda, nikdy tečka) */
.wm { font-family: var(--f-serif); font-style: italic; font-weight: 400; white-space: nowrap; line-height: 1;
      letter-spacing: 0; display: inline-block; }
.wm .wm-dot { color: var(--dot, var(--accent)); }
.wm .wm-star { display: inline-block; width: .533em; height: .533em; margin-left: .2em; vertical-align: .075em;
               background: var(--dot, var(--accent)); -webkit-mask: var(--star) center/contain no-repeat; mask: var(--star) center/contain no-repeat; }

/* 4cípá hvězda — barva = currentColor */
.star { display: inline-block; aspect-ratio: 1; background: currentColor;
        -webkit-mask: var(--star) center/contain no-repeat; mask: var(--star) center/contain no-repeat; }
.star.grad { background: var(--grad); }

/* ---------- Textury ---------- */
.tx-grid  { inset: 0; pointer-events: none; background-size: var(--g, 40px) var(--g, 40px);
            background-image: linear-gradient(to right, var(--gl, rgba(10,10,10,.045)) 1px, transparent 1px),
                              linear-gradient(to bottom, var(--gl, rgba(10,10,10,.045)) 1px, transparent 1px); }
.t-void .tx-grid, .tx-grid.on-dark { --gl: rgba(255,255,255,.04); }
.t-accent .tx-grid, .t-solid .tx-grid, .tx-grid.on-accent { --gl: rgba(255,255,255,.09); }
.tx-dots  { inset: 0; pointer-events: none; background-size: var(--g, 20px) var(--g, 20px);
            background-image: radial-gradient(var(--dl, rgba(10,10,10,.18)) 1px, transparent 1.4px); }
.t-void .tx-dots { --dl: rgba(255,255,255,.14); }
.tx-grain { inset: 0; pointer-events: none; background-image: var(--grain); opacity: var(--gr, .05); mix-blend-mode: multiply; }
.t-void .tx-grain { mix-blend-mode: screen; opacity: .06; filter: invert(1); }
.glow { border-radius: 50%; pointer-events: none; filter: blur(var(--blur, 80px));
        background: radial-gradient(circle, var(--accent) 0%, rgba(255,68,0,.5) 35%, transparent 70%); }
.glow.soft { background: radial-gradient(circle, var(--accent-2) 0%, rgba(255,154,118,.4) 40%, transparent 70%); }

/* ---------- Komponenty ---------- */
.pill { display: inline-flex; align-items: center; gap: .6em; border-radius: 999px; padding: .55em 1.3em;
        font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; white-space: nowrap; }
.pill.line { border: 1.5px solid currentColor; }
.pill.fill { background: var(--void); color: var(--paper); }
.pill.acc  { background: var(--accent); color: var(--void); }
.pill.glass { background: rgba(255,255,255,.55); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.7); }
.dot-live { width: .6em; height: .6em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25em rgba(34,197,94,.2); }
.rule { height: 1.5px; background: currentColor; opacity: .18; }
.card { border-radius: 40px; }
.glass { background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.18));
         backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.75);
         box-shadow: 0 30px 80px rgba(10,10,10,.12); }
.ilu { pointer-events: none; object-fit: contain; }

/* Foto (profilovky) — nahraď za vlastní soubor v _kit/photo.jpg */
.photo { background-color: #ccc; background-image: var(--photo, url('photo.jpg')); background-position: center 30%; background-size: cover; background-repeat: no-repeat; }

/* ==========================================================================
   SYSTEM v2 — layoutová gramatika (Edition 08)
   Každý formát: horní lišta (logo · meta) → obsah → spodní lišta (jméno · web · folio).
   Velikosti řídí --u = 1 px při kratší straně 1080 px (nastavuje kit.js podle formátu).
   ========================================================================== */
.ab { --u: 1px; --m: calc(72 * var(--u)); }
.rail { position: absolute; left: var(--ml, var(--m)); right: var(--mr, var(--m)); display: flex; justify-content: space-between; align-items: center;
        font-family: var(--f-mono); font-size: calc(17 * var(--u)); letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.rail.top { top: var(--mt, var(--m)); }
.rail.bot { bottom: var(--mb, var(--m)); }
.rail .wm { font-size: calc(46 * var(--u)); letter-spacing: 0; text-transform: none; font-weight: 400; }
.rail .soft { opacity: .55; }
.rail .grow { flex: 1; height: 1px; background: currentColor; opacity: .18; margin: 0 calc(28 * var(--u)); transform-origin: left; }
.hd { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.035em; line-height: .9; font-size: var(--fs, calc(120 * var(--u))); }
.hd em { font-style: italic; color: var(--em, var(--accent)); letter-spacing: -.03em; }
.t-solid .hd em, .t-solid { --em: var(--void); }
.hd .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hd .ln > span { display: inline-block; }
.lead { font-family: var(--f-sans); font-size: calc(30 * var(--u)); line-height: 1.45; font-weight: 400; max-width: 30ch; }
.meta2 { font-family: var(--f-mono); font-size: calc(17 * var(--u)); letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.hair { height: 1px; background: currentColor; opacity: .16; }
.ember { pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255,68,0,.55) 0%, rgba(255,68,0,.14) 38%, transparent 68%); filter: blur(calc(40 * var(--u))); }
.t-solid { background: var(--accent); color: var(--void); }
.t-solid .wm .wm-star { background: var(--void); }
.ab.t-solid .rail .soft { opacity: .65; }
.frame-img { overflow: hidden; background: #ddd; }
.frame-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idx { display: grid; }
.idx .r { display: grid; grid-template-columns: calc(110 * var(--u)) 1fr auto; align-items: baseline; border-top: 1px solid currentColor; padding: calc(24 * var(--u)) 0 calc(28 * var(--u)); }
.idx .r:last-child { border-bottom: 1px solid currentColor; }
.idx .r .n { font-family: var(--f-mono); font-size: calc(17 * var(--u)); letter-spacing: .16em; color: var(--accent); font-weight: 700; }
.idx .r b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: calc(60 * var(--u)); line-height: 1; letter-spacing: -.02em; }
.idx .r .x { font-family: var(--f-mono); font-size: calc(15 * var(--u)); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }

/* ==========================================================================
   ART DIRECTION LAYER — signature efekty (aura, glass, sunrise, hvězdy, ring, marquee)
   Ambientní smyčky: data-loop="drift|spin|twinkle|marquee|float"
   Interakce v prohlížeči: data-depth="0.5" (paralaxa), data-tilt (náklon), .spot (světlo za kurzorem)
   ========================================================================== */
.aura { inset: 0; overflow: hidden; pointer-events: none; }
.aura .blob { position: absolute; border-radius: 50%; filter: blur(calc(70 * var(--u))); opacity: .9; }
.aura .o { background: var(--accent); }
.aura .p { background: #FF9A76; }
.aura .c { background: #FFD3BE; }
.aura .e { background: radial-gradient(circle, rgba(255,68,0,.95) 0%, rgba(160,40,0,.55) 35%, rgba(80,20,0,.2) 55%, transparent 70%); }
.t-aura { background: #F6EFE9; color: var(--void); }
.t-ember { background: #0A0A0A; color: var(--paper); }
.t-sunrise { background: linear-gradient(160deg, #FF4400 0%, #FF6B2B 42%, #FFB48F 100%); color: var(--void); }
.t-sunrise .wm .wm-star { background: var(--void); }
.t-sunrise .hd em { color: #fff; }
.t-ember .hd em, .t-aura .hd em { color: var(--accent); }
.glass2 { border-radius: calc(36 * var(--u)); background: linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.14));
          backdrop-filter: blur(calc(26 * var(--u))) saturate(140%); -webkit-backdrop-filter: blur(calc(26 * var(--u))) saturate(140%);
          border: 1px solid rgba(255,255,255,.7); box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(80,20,0,.16), inset 0 1px 0 rgba(255,255,255,.8); }
.glass2.dk { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.16); box-shadow: 0 40px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); color: var(--paper); }
.starfield { inset: 0; pointer-events: none; }
.starfield .star { position: absolute; color: var(--accent); }
.t-sunrise .starfield .star { color: #fff; }
.ringtext { pointer-events: none; }
.ringtext svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ringtext text { font-family: var(--f-mono); font-weight: 500; text-transform: uppercase; fill: currentColor; }
.ringtext .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mq { white-space: nowrap; display: flex; pointer-events: none; }
.mq > span { flex: none; font-family: var(--f-serif); font-style: italic; padding-right: .5em; }
.mq .star { width: .38em; vertical-align: .12em; margin-right: .5em; color: var(--accent); }
.bigstar2 { color: var(--accent); pointer-events: none; }
.spot { position: absolute; width: calc(520 * var(--u)); height: calc(520 * var(--u)); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .4s;
        background: radial-gradient(circle, rgba(255,154,118,.35), transparent 65%); transform: translate(-50%, -50%); mix-blend-mode: soft-light; }
.ab:hover .spot { opacity: 1; }
/* Na auře bývá pod logem oranžová → hvězda v Void (pravidlo: oranžová hvězda nikdy na oranžové) */
.t-aura .wm .wm-star { background: var(--void); }
.aura .blob, .ch-aura i { will-change: transform; }

/* ---------- Fluidní kruh „Gesto“ (komponenta: assets/js/fluid-ring.js — načíst před kit.js) ----------
   <span class="mk-ring" data-seed="17" data-stroke="3"></span> · stroke v px artboardu · data-vector pro tisk
   Pravidla: jeden kruh na kompozici · jen linka, nikdy výplň · uvnitř nanejvýš hvězda, nic dalšího · nikdy místo hvězdy v logu */
.mk-ring { color: var(--accent); }
.ring-mark { aspect-ratio: 1; pointer-events: none; }
.ring-mark .mk-ring { position: absolute; inset: 0; }
.ring-mark .star { position: absolute; left: 50%; top: 50%; width: var(--st, 9%); transform: translate(-50%, -50%); color: var(--accent); }
.t-void .ring-mark .star { color: var(--paper); }