/* ===== REFO — sdílený styl všech stránek ===== */
@font-face{
  font-family:"Jj";
  src:url(jj.woff2) format("woff2");   /* ruční písmo, doplněné o ě/ú */
  font-display:swap;
}
:root{
  --paper:#FFFFFF;
  --ink:#0D0D0C;
  --blue:#2630A6;
  --apricot:#FF9E7A;
  --cream:#F2ECDF;
  --pad:clamp(18px,3.2vw,56px);
  --top:72px;                          /* výška hlavičky */
  --sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --hand:"Jj","Inter Tight",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* barevné varianty stránek */
.t-blue   {--bg:var(--blue);   --fg:var(--paper); --soft:rgba(255,255,255,.62); --accent:var(--apricot); --logo:var(--paper)}
.t-white  {--bg:var(--paper);  --fg:var(--blue);  --soft:rgba(38,48,166,.62);   --accent:var(--apricot)}
.t-cream  {--bg:var(--cream);  --fg:var(--blue);  --soft:rgba(38,48,166,.62);   --accent:var(--apricot)}
.t-apricot{--bg:var(--apricot);--fg:var(--blue);  --soft:rgba(13,13,12,.62);    --accent:var(--paper); --logo:var(--paper);
  --cur:var(--blue);                                                                     /* kurzor by na meruňkové splynul */
  --bar:color-mix(in srgb, color-mix(in srgb, var(--apricot) 89%, var(--ink)) 94%, transparent)}   /* tmavší lišta, ať je vidět kolečko */

.hand{font-family:var(--hand);font-weight:400;line-height:1.05;letter-spacing:.01em}
.big{font-weight:800;letter-spacing:-.04em;line-height:.94}

/* ---------- HLAVIČKA: v barvě stránky, lehce průsvitná a rozmazaná, pořád nahoře ---------- */
/* z-index nad okny — přetažené okno zajede pod lištu */
.top{
  position:sticky;z-index:100000;top:0;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:12px var(--pad);
  background:var(--bar, color-mix(in srgb, var(--bg) 72%, transparent));color:var(--fg);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 1px 0 color-mix(in srgb, var(--fg) 10%, transparent);
}
.top.bare{position:fixed;left:0;right:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}   /* landing: jen logo */
.logo{display:block;width:clamp(60px,4.8vw,78px);color:var(--logo, var(--ink))}   /* bílé na modré a meruňkové, jinak černé; kolečko vždy meruňkové */
.logo svg{display:block;width:100%;height:auto}
.nav{
  display:flex;justify-content:flex-end;gap:clamp(14px,1.8vw,28px);
  font-family:var(--hand);font-size:clamp(18px,1.5vw,22px);line-height:1;
}
.nav{margin-left:auto}
.nav a{opacity:.6;transition:opacity .2s;padding:4px 0;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}

/* přepínač jazyka: malý a schovaný na konci hlavičky */
.lang{order:3;font:500 11px/1 var(--sans);letter-spacing:.08em;opacity:.45;padding:6px 0;transition:opacity .2s}
.lang:hover{opacity:1}

/* ---------- RUČNĚ PSANÁ SLOVA (maska → libovolná barva) ---------- */
.word{
  display:block;background:currentColor;aspect-ratio:var(--r);
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;
}
.word-proc     {--src:url(word-proc.png?v=20261107);     --r:4226/2525}
.word-pribeh   {--src:url(word-pribeh.png?v=20261107);   --r:4226/2172}
.word-upcycled {--src:url(word-upcycled.png?v=20261107); --r:4226/1399}
.word-why {--src:url(word-why.svg?v=20261107); --r:10200/6272}
.word-story {--src:url(word-story.svg?v=20261107); --r:10568/5220}
.word-shop {--src:url(word-shop.svg?v=20261107); --r:9574/4283}
.word-contact {--src:url(word-contact.svg?v=20261107); --r:12387/2516}
.word-obchod   {--src:url(word-obchod.png?v=20261107);   --r:4226/1505}
.word-kontakt  {--src:url(word-kontakt.png?v=20261107);  --r:4226/1299}

/* ---------- KURZOR = kolečko z loga ---------- */
.own-cursor, .own-cursor *{cursor:none!important}
.cursor{
  position:fixed;left:0;top:0;z-index:1000000;pointer-events:none;
  width:24px;height:24px;margin:-12px 0 0 -12px;
  background:var(--cur,var(--apricot));
  -webkit-mask:url(../favicon.svg) center/contain no-repeat;mask:url(../favicon.svg) center/contain no-repeat;
  transition:width .22s, height .22s, margin .22s, opacity .2s;
}
.cursor.big{width:42px;height:42px;margin:-21px 0 0 -21px}
.cursor.dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;-webkit-mask:none;mask:none}   /* přesné míření na tlačítka okna */
.cursor.gone{opacity:0}

/* ---------- NÁBĚH PŘI SCROLLU ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
  [data-reveal].in{opacity:1;transform:none}
}

/* ---------- OKNO (jako „Informace“ na Macu) ---------- */
.win{
  position:absolute;z-index:100;
  width:min(680px,calc(100vw - 24px));max-height:min(74vh,660px);
  display:flex;flex-direction:column;
  background:#EEEAE8;color:var(--ink);border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 .5px rgba(0,0,0,.28), 0 22px 60px rgba(0,0,0,.28);
  font-size:15px;line-height:1.4;
}
.win.docked{position:relative;z-index:1;width:100%;max-height:none}
@media (prefers-reduced-motion:no-preference){
  .win{animation:win-in .24s cubic-bezier(.2,.8,.2,1)}
  .win.closing{animation:win-out .16s ease-in forwards}
}
@keyframes win-in{from{opacity:0;transform:scale(.94)}}
@keyframes win-out{to{opacity:0;transform:scale(.96)}}
.win.zoomed{
  position:fixed;left:2vw!important;top:2vh!important;
  width:96vw!important;height:96vh;max-height:none;z-index:200000!important;   /* zvětšené přes lištu */
}
.win-bar{
  flex:none;display:flex;align-items:center;gap:16px;
  margin:0 12px;padding:12px 2px 11px;border-bottom:1px solid rgba(0,0,0,.2);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
.win.zoomed .win-bar{cursor:default}
.lights{display:flex;gap:8px;flex:none}
.lights button{
  width:13px;height:13px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;color:transparent;
}
.l-close{background:#FF5F57}.l-zoom{background:#28C840}
.lights:hover button,.lights button:focus-visible{color:rgba(0,0,0,.6)}
@media (pointer:coarse){.lights button{width:20px;height:20px;font-size:14px;color:rgba(0,0,0,.6)}}
.win-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-body{overflow:auto;padding:14px 12px 18px;display:grid;gap:14px;align-content:start}
.win.zoomed .win-body{flex:1}

.info-head{display:flex;gap:14px;align-items:center}
.info-head img{width:72px;height:72px;object-fit:cover;flex:none;background:#fff;padding:3px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.info-head b{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.info-desc{background:#fff;padding:10px 12px;color:rgba(13,13,12,.62)}
.info details summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;
}
.info details summary::-webkit-details-marker{display:none}
.info details summary::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .2s;margin:0 2px}
.info details[open] summary::before{transform:rotate(45deg) translate(-2px,-1px)}
.info-rows{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:8px 0 2px 24px}
.info-rows dt{color:rgba(13,13,12,.55)}
.info-rows a{text-decoration:underline;text-underline-offset:3px}
.info-preview{margin-top:10px}
.info-preview img{width:100%;max-height:36vh;object-fit:cover;border-radius:8px}
.win.zoomed .info-preview img{max-height:74vh;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.info-preview figcaption{margin-top:6px;font-size:12px;color:rgba(13,13,12,.45)}
.info-actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  border:1px solid currentColor;border-radius:999px;padding:10px 18px;font-weight:500;font-size:14px;
  background:none;cursor:pointer;
}
.btn.solid{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- IKONY NA PLOŠE ---------- */
.icon{
  position:absolute;transform:translate(-50%,-50%);
  width:clamp(96px,11vw,176px);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:0;padding:0;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;
}
.icon img{width:100%;height:auto;background:#fff;padding:4px;box-shadow:0 3px 14px rgba(0,0,0,.18);pointer-events:none;-webkit-user-drag:none}
.icon span{
  white-space:nowrap;
  font-family:var(--hand);font-size:clamp(17px,1.5vw,22px);line-height:1.05;text-align:center;
  color:var(--fg);padding:2px 6px;border-radius:5px;
}
.icon.sel span{background:var(--blue);color:#fff}
.icon:focus-visible{outline:2px solid var(--blue);outline-offset:6px}

/* ---------- PATIČKA ---------- */
.foot{
  padding:var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--soft);
}
.next{font-family:var(--hand);font-size:clamp(28px,3vw,46px);color:var(--fg)}
.next:hover{color:var(--accent)}

@media (max-width:640px){
  :root{--top:92px}
  .top{flex-wrap:wrap;gap:10px;padding-bottom:10px}
  .lang{order:1;margin-left:auto}
  .nav{order:2}
  .nav{width:100%;justify-content:space-between;gap:10px;overflow-x:auto;scrollbar-width:none;font-size:min(17px,4.2vw)}
  .nav a{padding:6px 0}
}