/* NFSEE · vizuální jazyk
   Creative direction: Místo si to pamatuje samo.
   Barva = denní světlo. Čas je nosič, ne dekorace. */

:root{
  --paper:#EFEBE3; --paper-2:#F7F5F0; --paper-3:#E5E0D6;
  --ink:#191714; --ink-2:#5C574E; --ink-3:#8E887C;
  --rule:#D9D3C7; --rule-2:#C6BFB0;
  --tag:#0C0B0A;

  /* denní světlo */
  --t05:#2C3444; --t07:#6F7587; --t09:#A9B0B7;
  --t12:#E9E3D5; --t15:#E4CB92; --t18:#C98C50; --t21:#3C3648;

  --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--ink);color:var(--paper)}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.narrow{max-width:940px}

/* ---------- typografická škála ---------- */
.claim{
  font-size:clamp(2.1rem,4.5vw,3.8rem); font-weight:400;
  line-height:1.05; letter-spacing:-.032em; max-width:24ch;
}
h2{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:400;line-height:1.05;letter-spacing:-.028em;max-width:22ch}
h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.lede{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.45;color:var(--ink-2);max-width:46ch;letter-spacing:-.011em}
.small{font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.micro{font-size:.75rem;line-height:1.4;color:var(--ink-3)}

/* label · malý, sentence case. NE verzálkový mono na všem. */
.label{font-size:.75rem;font-weight:600;letter-spacing:.005em;color:var(--ink-3)}

/* mono JEN pro čas a kód místa */
.t{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:-.02em}

/* ---------- brand kód: pár ---------- */
.pair{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.pair .arw{position:relative;display:inline-block;width:1.9em;height:1px;background:currentColor;opacity:.5}
.pair .arw::after{content:"";position:absolute;right:0;top:-2.5px;width:5px;height:5px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.pair.open .arw{width:1.9em;background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px);opacity:.32}
.pair.open .arw::after{display:none}
.pair.open .end{display:none}

/* ---------- místo: světlo v prázdné místnosti ----------
   Hrdina obrazu. Nikdy v něm není člověk.
   --lt = barva světla (denní škála), --hz = horizont, --ang = sklon paprsku */
.place{position:relative;overflow:hidden;isolation:isolate;
  --lt:#FFF8EA; --wall:#DFD8C9; --flr:#B6AD9B; --hz:64%; --ao:.34}
.place>*{position:absolute;inset:0}
.p-wall{background:linear-gradient(178deg,
  color-mix(in srgb,var(--wall) 78%,#3A342A) 0%,
  var(--wall) 46%,
  color-mix(in srgb,var(--wall) 92%,#3A342A) 100%);
  bottom:calc(100% - var(--hz))}
.p-floor{top:var(--hz);background:linear-gradient(180deg,
  color-mix(in srgb,var(--flr) 96%,#2A251C) 0%,
  color-mix(in srgb,var(--flr) 70%,#2A251C) 62%,
  color-mix(in srgb,var(--flr) 52%,#2A251C) 100%)}
/* stín v koutě, kde stěna potkává podlahu */
.p-ao{top:calc(var(--hz) - 12%);height:24%;bottom:auto;
  background:linear-gradient(180deg,transparent 0%,rgba(28,23,16,var(--ao)) 48%,transparent 52%,rgba(28,23,16,calc(var(--ao)*.55)) 56%,transparent 100%)}
.p-skirt{top:var(--hz);height:1px;bottom:auto;background:rgba(30,25,18,.28)}
/* okenní světlo: dva paprsky s mezerou po sloupku */
.p-lw{bottom:calc(100% - var(--hz));mix-blend-mode:screen;filter:blur(var(--blur,5px));opacity:var(--op,.9)}
.p-lf{top:var(--hz);mix-blend-mode:screen;filter:blur(calc(var(--blur,5px)*2.4));opacity:calc(var(--op,.9)*.72)}
.p-lw i,.p-lf i{position:absolute;inset:0;display:block;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lt) 62%,#000 0%) 0%,var(--lt) 78%,color-mix(in srgb,var(--lt) 74%,#000) 100%)}
.p-lf i{background:linear-gradient(180deg,var(--lt) 0%,color-mix(in srgb,var(--lt) 40%,#000) 100%)}
/* svislá hrana stěny */
.p-edge{left:auto;right:var(--er,17%);width:1px;bottom:calc(100% - var(--hz));
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(30,25,18,.16))}
/* otevřené dveře: tmavý otvor, ne obdélník */
.p-door{left:var(--dx,70%);right:auto;bottom:calc(100% - var(--hz));top:var(--dt,16%);width:var(--dw,13%);
  background:linear-gradient(180deg,rgba(14,11,7,.80),rgba(14,11,7,.58));
  box-shadow:inset 1px 0 0 rgba(255,248,234,.20), inset -1px 0 0 rgba(0,0,0,.25)}
.p-grain{pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  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='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.p-vig{pointer-events:none;background:radial-gradient(120% 90% at 40% 34%,transparent 40%,rgba(26,22,16,.30) 100%)}
.stamp{position:absolute;inset:auto auto clamp(16px,7%,34px) clamp(16px,4%,34px);z-index:5;
  color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.stamp .l1{font-size:.8125rem;opacity:.74;margin-bottom:5px;letter-spacing:-.01em}
.stamp .l2{font-size:clamp(1.05rem,1.9vw,1.5rem)}

/* ---------- pás dne ---------- */
.dayband{position:relative;height:100%;width:100%;
  background:linear-gradient(90deg,var(--t05) 0%,var(--t07) 11%,var(--t09) 24%,var(--t12) 46%,
  var(--t15) 66%,var(--t18) 80%,var(--t21) 100%)}

/* ---------- rules & sekce ---------- */
.band{padding:clamp(64px,9vw,132px) 0}
.hair{height:1px;background:var(--rule);border:0}
.cols{display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
@media(max-width:820px){.cols{grid-template-columns:1fr;gap:20px}}
.sticky{position:sticky;top:88px}
@media(max-width:820px){.sticky{position:static}}

/* ---------- tlačítka ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font:inherit;font-size:.9375rem;font-weight:600;
  letter-spacing:-.01em;padding:.86em 1.35em;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  text-decoration:none;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--ink)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- ikonografie: stavební výkres, ne UI glyfy ---------- */
.ico{width:32px;height:32px;display:block;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:square;stroke-linejoin:miter;
  vector-effect:non-scaling-stroke}
.ico .arc{stroke-dasharray:none}
.ico .dash{stroke-dasharray:2.5 2.5;opacity:.62}
.ico .dot{fill:currentColor;stroke:none}
.ico.lg{width:44px;height:44px}

/* ---------- tvarosloví: štítek ---------- */
/* Každý povrch značky je deska. Ostré rohy, vlasová linka uvnitř,
   čtyři kotvicí body v rozích. Opakuje se od karty po fotku. */
.plate{position:relative;background:var(--paper-2);box-shadow:0 0 0 1px var(--rule)}
.plate::before{content:"";position:absolute;inset:6px;box-shadow:0 0 0 1px var(--rule);
  pointer-events:none;opacity:.55}
.fix{position:absolute;width:3px;height:3px;background:var(--rule-2);pointer-events:none;z-index:4}
.fix.tl{top:11px;left:11px}.fix.tr{top:11px;right:11px}
.fix.bl{bottom:11px;left:11px}.fix.br{bottom:11px;right:11px}

/* ---------- pattern: hodinová rýha ---------- */
/* Den rozdělený na hodiny jako rytá stupnice. Dělí sekce, lemuje desky,
   texturuje tmavé plochy. Je to brand kód proměněný v ornament. */
/* 17 hodin (05:00-22:00) přes celou šířku: velký zub na hodinu, malý na čtvrt */
.rail{display:block;width:100%;height:15px;position:relative;overflow:hidden;
  --maj:var(--rule-2); --min:var(--rule)}
.rail::before,.rail::after{content:"";position:absolute;left:0;right:0}
.rail::before{top:0;height:15px;
  background:repeating-linear-gradient(90deg,var(--maj) 0 1px,transparent 1px calc(100%/17))}
.rail::after{top:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--min) 0 1px,transparent 1px calc(100%/68))}
.rail.dk{--maj:#413D38; --min:#2A2723}
.rail.tall{height:24px}
.rail.tall::before{height:24px}
.rail.tall::after{height:10px}

/* ---------- pojící prvek: zárubeň ---------- */
/* Svislá vlasová linka ve stejné poloze na každé sekci.
   Je to hrana dveří, která prochází celým webem. */
.jamb{position:absolute;top:0;bottom:0;left:calc(50% - 620px + 168px);width:1px;
  background:var(--rule);pointer-events:none;z-index:0}
.dark .jamb{background:#2A2724}
@media(max-width:1300px){.jamb{left:clamp(20px,4vw,48px);margin-left:168px}}
@media(max-width:820px){.jamb{display:none}}