/* ════════════════════════════════════════════════════════════
   VOKU
   Tištěný papír s přiznanou mřížkou, teplý inkoust a terakota.
   Obraz je impresionismus z ASCII znaků (assets/ascii.js).
   Tmavý režim není obrácený papír, ale noc nad stejnou krajinou.
   ════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --bg: #F0EEE6;
  --paper: #FAF9F5;
  --sand: #E8E4D6;
  --ink: #141413;
  --body: #3D3D3A;
  --muted: #5E5D59;
  --faint: #6E6C65;
  --hair: #CFCBBE;
  --line: #141413;
  --clay: #D97757;
  --accent: #A8482A;
  --olive: #55683F;
  --seal: #C8402B;
  --on-ink: #FAF9F5;
  --photo-edge: #FAF9F5;
  --img: none;
  --grain: .4;
  --grain-mode: multiply;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 3.6vw, 44px);
  --outer: clamp(0px, 3vw, 40px);
  --max: 1240px;
  --navh: 60px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191815;
  --paper: #211F1B;
  --sand: #2A2823;
  --ink: #EDEADF;
  --body: #D3CFC3;
  --muted: #AAA69A;
  --faint: #979388;
  --hair: #36332C;
  --line: #46433A;
  --clay: #D97757;
  --accent: #EC9A78;
  --olive: #A9BB8B;
  --seal: #D9533C;
  --on-ink: #191815;
  --photo-edge: #2A2823;
  --img: brightness(.82) saturate(.92);
  --grain: .3;
  --grain-mode: soft-light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
section[id] { scroll-margin-top: var(--navh); }
html, body { overflow-x: clip; }
body {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .5s ease, color .5s ease;
}
/* zrnitost papíru přes celou stránku */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: var(--grain-mode);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .08 0 0 0 0 .07 .35 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--clay); color: #FAF9F5; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }

/* přechod mezi stránkami a rozlití tmavého režimu */
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
.is-theming::view-transition-old(root), .is-theming::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.is-theming::view-transition-old(root) { z-index: 1; }
.is-theming::view-transition-new(root) { z-index: 2; }

.wrap { width: min(var(--max), 100% - 2 * var(--outer)); margin-inline: auto; }
@media (min-width: 900px) { .wrap--ruled { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

.kicker { display: flex; align-items: center; gap: .7rem; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kicker b { font-weight: 500; color: var(--accent); }
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.brush { background: var(--brush, url("../img/brush.svg")) left 96% / 100% .2em no-repeat; padding-bottom: .03em; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 3000; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 500; text-decoration: none; padding: .6rem 1rem; transition: top .2s var(--ease); }
.skip:focus { top: 1rem; }

.link { display: inline-flex; align-items: center; gap: .35rem; text-decoration: underline; text-decoration-color: var(--hair); text-decoration-thickness: 1px; text-underline-offset: .28em; transition: text-decoration-color .25s, color .25s; }
.link:hover { color: var(--accent); text-decoration-color: var(--clay); }
.link .i { font-size: .85em; }
.prose a, .lead a { color: inherit; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .2s; }
.prose a:hover, .lead a:hover { color: var(--accent); }

.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: 15px; font-weight: 500; text-decoration: none; background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); border-radius: 8px; padding: .8rem 1.4rem; box-shadow: 3px 3px 0 var(--clay); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .5s, color .5s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--clay); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--clay); }

/* ── Nav ── */
.nav { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav__inner { height: var(--navh); display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.6rem); padding: 0 var(--gutter); }
.nav__logo { display: flex; align-items: center; gap: .55rem; font-family: var(--serif); font-size: 23px; letter-spacing: -.01em; text-decoration: none; line-height: 1; margin-right: auto; }
.seal { width: 24px; height: 24px; flex: none; transition: transform .5s var(--ease); }
.seal rect:first-child { fill: var(--seal); }
.nav__logo:hover .seal { transform: rotate(-8deg) scale(1.08); }
.nav__links { display: flex; gap: clamp(.8rem, 2vw, 1.5rem); font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.nav__links a { position: relative; color: var(--muted); text-decoration: none; white-space: nowrap; padding: .4rem 0; transition: color .2s; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: none; }
.nav__links a[aria-current="page"] { color: var(--ink); }

/* přepínač: slunce a měsíc z ASCII znaků, posouvá se mezi nimi inkoust */
.theme { position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; width: 52px; height: 28px; background: none; border: 1px solid var(--line); cursor: pointer; font-family: var(--mono); font-size: 13px; line-height: 1; }
.theme::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--ink); transition: transform .45s var(--ease), background-color .5s; }
.theme span { position: relative; display: grid; place-items: center; color: var(--muted); transition: color .3s; }
.theme__sun { color: var(--on-ink) !important; }
[data-theme="dark"] .theme::before { transform: translateX(100%); }
[data-theme="dark"] .theme__sun { color: var(--muted) !important; }
[data-theme="dark"] .theme__moon { color: var(--on-ink); }

.lang-switch { display: flex; flex: none; border: 1px solid var(--line); }
.lang-switch button { background: none; border: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); padding: .3rem .5rem; height: 26px; cursor: pointer; transition: color .2s, background .2s; }
.lang-switch button + button { border-left: 1px solid var(--line); }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active { background: var(--ink); color: var(--on-ink); }

/* čtecí proužek pod navigací */
@supports (animation-timeline: scroll()) {
  .nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--clay); transform: scaleX(0); transform-origin: left; animation: read linear both; animation-timeline: scroll(root); }
  @keyframes read { to { transform: scaleX(1); } }
}
@media (max-width: 460px) {
  .nav__logo span { display: none; }
  .nav__links { font-size: 11.5px; letter-spacing: .02em; }
  .lang-switch button { padding: .3rem .38rem; }
}

/* ── Obraz na úvodní stránce ── */
.hero { position: relative; min-height: min(calc(100svh - var(--navh)), 980px); display: flex; flex-direction: column; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.9rem, 1.8vw, 1.4rem); align-self: flex-start; width: fit-content; max-width: min(600px, 56%); margin-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); padding-block: clamp(1.6rem, 5vh, 3.6rem) 2rem; }
.hi { display: grid; gap: .16em; font-size: clamp(3rem, 6.4vw, 5.6rem); line-height: 1; }
.hi__word { width: clamp(170px, 21vw, 290px); height: auto; overflow: visible; margin-left: -.1em; }
.hi__ink { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.01; stroke-dashoffset: 1; animation: hi-write 1.8s cubic-bezier(.45, .05, .4, 1) .2s forwards; transition: stroke .5s; }
.hi__dot { fill: var(--clay); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: hi-dot .45s cubic-bezier(.34, 1.56, .64, 1) 1.9s forwards; }
@keyframes hi-write { to { stroke-dashoffset: 0; } }
@keyframes hi-dot { to { transform: scale(1); } }
.lead { max-width: 56ch; font-family: var(--serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.48; color: var(--muted); }
.lead strong { color: var(--ink); font-weight: 500; }
.lead em { color: var(--ink); font-style: italic; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; margin-top: .3rem; }
.hero__cta .link { font-size: 15px; font-weight: 500; }
.hero__cap { position: absolute; z-index: 1; right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); bottom: 1rem; max-width: 34ch; padding: .3rem .6rem; background: var(--bg); border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--muted); }
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero__text { max-width: none; width: auto; align-self: stretch; margin-inline: var(--gutter); padding-block: 2rem 1.4rem; }
  .hero__text { order: 1; }
  .hero__canvas { order: 2; position: relative; inset: auto; height: clamp(320px, 96vw, 500px); }
  .hero__fallback { order: 2; position: relative; height: 300px; }
  .hero__cap { right: var(--gutter); left: var(--gutter); bottom: .7rem; max-width: none; width: fit-content; }
}

/* ── Stránka se sekcemi ── */
.block { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border-bottom: 1px solid var(--line); }
.block__head { align-self: start; position: sticky; top: var(--navh); padding: clamp(2.6rem, 6vw, 4.6rem) var(--gutter); }
.block__title { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.04; margin-top: 1.1rem; }
.block__body { min-width: 0; padding: clamp(2.6rem, 6vw, 4.6rem) var(--gutter); border-left: 1px solid var(--line); }
.block__full { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); }
.block--open .block__head { position: static; }
.spot { width: min(210px, 72%); margin-top: clamp(1.4rem, 3vw, 2.4rem); margin-left: -8px; filter: var(--img); }
@media (max-width: 820px) {
  .block { grid-template-columns: 1fr; }
  .block__head { position: static; padding-bottom: 0; }
  .block__body { border-left: none; }
  .spot { display: none; }
}

.prose { display: grid; gap: 1.05rem; max-width: 60ch; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.56; color: var(--body); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose em { font-style: italic; }
.prose--drop > p:first-child::first-letter { float: left; font-size: 4.2em; line-height: .82; padding: .06em .09em 0 0; color: var(--accent); }

.cells { display: grid; gap: 1px; background: var(--line); }
.cells > * { background: var(--bg); min-width: 0; transition: background-color .35s; }

/* ── Kdo jsem: fotka a fakta ── */
.who { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.photo { position: relative; display: block; width: clamp(150px, 17vw, 210px); aspect-ratio: 3 / 4; background: none; border: 6px solid var(--photo-edge); outline: 1px solid var(--line); box-shadow: 5px 5px 0 var(--ink); transform: rotate(2.5deg); cursor: pointer; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.photo:hover { transform: rotate(-1.5deg) translateY(-3px); box-shadow: 7px 8px 0 var(--clay); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: var(--img); transition: opacity .35s; }
.photo img + img { opacity: 0; }
.photo[aria-pressed="true"] img + img, .photo:hover img + img { opacity: 1; }
.photo[aria-pressed="true"] img:first-child, .photo:hover img:first-child { opacity: 0; }
.photo__cap { display: block; margin-top: 1rem; max-width: 210px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); }
.facts { margin-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); max-width: 60ch; }
.facts div { display: flex; align-items: baseline; gap: .5rem; padding: .62rem 0; border-bottom: 1px solid var(--hair); }
.facts dt { flex: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.facts dd { font-family: var(--serif); font-size: 18px; margin-left: auto; text-align: right; }
@media (max-width: 620px) {
  .who { grid-template-columns: 1fr; }
  .who__photo { order: -1; }
}

/* ── Čísla ── */
.figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figures > div { padding: 1.5rem var(--gutter) 1.3rem; }
.figures b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 4.8vw, 3.7rem); line-height: 1; letter-spacing: -.03em; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.figures span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Věci, na které jsem pyšný ── */
.features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .features { grid-template-columns: 1fr; } }
.feature { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.feature:hover { background: var(--paper); }
.feature__art { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); border-bottom: 1px solid var(--line); }
.feature__art img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: var(--img); transition: transform .9s var(--ease); }
a.feature:hover .feature__art img { transform: scale(1.03); }
.feature__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: 1.3rem var(--gutter) 1.5rem; }
.feature__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.feature__host { min-width: 0; font-family: var(--mono); font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature__name { font-family: var(--serif); font-size: clamp(26px, 2.7vw, 34px); line-height: 1.12; letter-spacing: -.02em; }
.feature__line { color: var(--muted); font-size: 15.5px; }
.feature__note { font-size: 14px; line-height: 1.45; color: var(--ink); border-left: 2px solid var(--clay); padding-left: .7rem; }
.feature__go { margin-top: auto; padding-top: .5rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; font-size: 15px; color: var(--accent); }
.feature__go .i { transition: transform .3s var(--ease); }
a.feature:hover .feature__go .i { transform: translate(2px, -2px); }

.status, .ping { flex: none; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.status::before, .ping::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.status--wip { color: var(--accent); }
.status--wip::before { background: var(--clay); border-color: var(--clay); }
.status--live, .ping.is-on { color: var(--olive); }
.status--live::before, .ping.is-on::before { background: var(--olive); border-color: var(--olive); }
.ping.is-on::before { animation: beat 2.2s ease-in-out infinite; }
.ping.is-off { color: var(--faint); }
.ping.is-off::before { border-style: dashed; }
@keyframes beat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--olive) 55%, transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }

.sec-head { padding: clamp(2.4rem, 5vw, 3.8rem) var(--gutter) clamp(1.4rem, 3vw, 2rem); }
.sec-head h3 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.06; }
.sec-head .lead { margin-top: .8rem; font-size: clamp(17px, 1.4vw, 19px); }
.also { padding: clamp(1.6rem, 3vw, 2.4rem) var(--gutter); }

/* ── Proč ── */
.why { padding: clamp(3.2rem, 8vw, 6.5rem) var(--gutter); border-bottom: 1px solid var(--line); }
.why__quote { max-width: 24ch; font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5vw, 4.3rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; margin-top: 1.4rem; }
.why__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 4vw, 3.6rem); margin-top: clamp(2rem, 4vw, 3.2rem); }
@media (max-width: 760px) { .why__cols { grid-template-columns: 1fr; } }

/* ── Jak pracuju: smyčka ── */
.flow { list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; border: 1px solid var(--line); counter-reset: f; }
.flow li { position: relative; counter-increment: f; padding: 1.05rem 1.1rem 1.2rem; }
.flow li::before { content: counter(f, decimal-leading-zero) ' -->'; display: block; font-family: var(--mono); font-size: 11.5px; color: var(--accent); white-space: pre; }
.flow li:nth-child(6)::before { content: counter(f, decimal-leading-zero) ' --> 01'; }
.flow h4 { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2; margin-top: .4rem; }
.flow p { color: var(--muted); font-size: 15px; margin-top: .25rem; }
@media (max-width: 760px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .flow { grid-template-columns: 1fr; } }

/* ── Čím to stavím: řádky s tečkami jako na GitHub profilu ── */
.stack { margin-top: 2.2rem; font-family: var(--mono); font-size: 13.5px; }
.stack div { display: flex; align-items: baseline; gap: .6rem; padding: .34rem 0; }
.stack dt { flex: none; color: var(--accent); }
.stack dt::before { content: '* '; }
.stack i { flex: 1; min-width: 1.5rem; height: 1em; overflow: hidden; font-style: normal; color: var(--hair); white-space: nowrap; }
.stack i::before { content: '........................................................................................................'; }
.stack dd { text-align: right; color: var(--ink); }
.stack small { color: var(--faint); font-size: 12px; }
@media (max-width: 620px) {
  .stack div { display: block; padding: .5rem 0; }
  .stack i { display: none; }
  .stack dd { text-align: left; padding-left: 1.2em; }
}

/* ── Co mám rád ── */
.likes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .likes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .likes { grid-template-columns: 1fr; } }
.like { padding: 1.3rem var(--gutter) 1.5rem; }
.like:hover { background: var(--paper); }
.like pre { font-family: var(--mono); font-size: 12.5px; line-height: 1.25; height: 5.2em; color: var(--accent); overflow: hidden; transition: transform .6s var(--ease); transform-origin: left bottom; }
.like:hover pre { transform: translateY(-3px) rotate(-1.5deg); }
.like h3 { font-size: 24px; line-height: 1.2; margin-top: .6rem; }
.like p { margin-top: .3rem; color: var(--muted); font-size: 15px; }
.like a { text-decoration-color: var(--clay); text-underline-offset: .2em; }

/* ── Kam dál ── */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.doors > * + * { border-left: 1px solid var(--line); }
.door { position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: clamp(220px, 26vw, 320px); padding: clamp(1.8rem, 3.6vw, 3rem) var(--gutter); text-decoration: none; overflow: hidden; transition: background-color .35s; }
.door:hover { background: var(--paper); }
.door__name { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.025em; margin-top: auto; }
.door__name .i { font-size: .62em; color: var(--accent); transition: transform .4s var(--ease); }
.door:hover .door__name .i { transform: translateX(8px); }
.door p { color: var(--muted); max-width: 40ch; }
@media (max-width: 760px) {
  .doors { grid-template-columns: 1fr; }
  .doors > * + * { border-left: none; border-top: 1px solid var(--line); }
  .door { min-height: 180px; }
}

/* ── Kontakt ── */
.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding: clamp(1.8rem, 3.6vw, 2.8rem) var(--gutter); border-bottom: 1px solid var(--line); }
.contact__mail { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 1px; text-underline-offset: .16em; overflow-wrap: anywhere; transition: color .2s; }
.contact__mail:hover { color: var(--accent); }
.contact__list { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; font-family: var(--mono); font-size: 13px; }

/* ── ASCII hladina ── */
.waves { position: relative; display: block; height: 42px; overflow: hidden; font-family: var(--mono); font-size: 13px; line-height: 15px; white-space: pre; color: var(--faint); pointer-events: none; user-select: none; }
.waves span { position: absolute; left: -24px; top: 6px; }
.waves__a { animation: wave-a 15s ease-in-out infinite alternate; color: #6A9BCC; }
.waves__b { animation: wave-b 21s ease-in-out infinite alternate; color: #8E7FBB; }
[data-theme="dark"] .waves__a { color: #45678F; }
[data-theme="dark"] .waves__b { color: #54506E; }
@keyframes wave-a { from { transform: translateX(-14px); opacity: .4; } to { transform: translateX(14px); opacity: .95; } }
@keyframes wave-b { from { transform: translateX(16px); opacity: .9; } to { transform: translateX(-16px); opacity: .35; } }

/* ── Patička ── */
.footer { border-top: 1px solid var(--line); }
.footer__quote { padding: clamp(2.4rem, 6vw, 4.4rem) var(--gutter) clamp(1.4rem, 3vw, 2.2rem); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.02em; }
.footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; padding: 1rem var(--gutter); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
.footer__row a { color: inherit; }
.footer__nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }

/* ── Boční ukazatel kapitol: jen tam, kde je místo na okraji ── */
.rail { position: fixed; z-index: 40; right: 14px; top: 50%; transform: translateY(-50%); display: none; list-style: none; font-family: var(--mono); font-size: 11.5px; }
.rail a { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; padding: .28rem .2rem; color: var(--faint); text-decoration: none; transition: color .2s; }
.rail a::after { content: '.'; width: 1ch; text-align: center; }
.rail a span { position: absolute; right: 100%; white-space: nowrap; padding: .1rem .45rem; background: var(--ink); color: var(--on-ink); opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.rail a:hover { color: var(--ink); }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: none; }
.rail a[aria-current]::after { content: '*'; color: var(--seal); font-size: 15px; }
@media (min-width: 1380px) { .rail { display: block; } }

/* ── /jak-funguju/ ── */
.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: end; padding: clamp(2.6rem, 6vw, 5rem) var(--gutter) clamp(2rem, 4vw, 3.2rem); border-bottom: 1px solid var(--line); }
.intro h1 { font-size: clamp(2.8rem, 6.6vw, 5.6rem); line-height: .98; margin-top: 1.2rem; }
.intro h1 em { font-style: italic; color: var(--accent); }
@media (max-width: 820px) { .intro { grid-template-columns: 1fr; } }

.proc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-bottom: 1px solid var(--line); }
.proc__art { position: sticky; top: var(--navh); align-self: start; height: calc(100svh - var(--navh)); display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); transition: background-color .5s; }
.proc__canvas { flex: 1; min-height: 0; width: 100%; display: block; }
.proc__state { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; padding: .7rem var(--gutter); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.proc__bar { color: var(--accent); white-space: pre; }
.proc__name { color: var(--ink); }
.steps { list-style: none; min-width: 0; }
.step { min-height: 74svh; display: flex; flex-direction: column; justify-content: center; gap: .85rem; padding: clamp(2rem, 5vw, 3.4rem) var(--gutter); border-bottom: 1px solid var(--hair); }
.step:last-child { border-bottom: none; }
.js .step > * { transition: opacity .5s ease; }
.js .step:not(.is-on) > * { opacity: .6; }
.step__n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.step h2 { font-size: clamp(2rem, 3.7vw, 3.1rem); line-height: 1.05; }
.step__text { max-width: 54ch; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--body); }
.step__eg { max-width: 54ch; padding-left: .85rem; border-left: 2px solid var(--clay); font-size: 15px; color: var(--muted); }
.step__eg b { display: block; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.step__eg a { color: var(--ink); text-decoration-color: var(--clay); text-underline-offset: .2em; }
.step__state { display: none; }
@media (max-width: 820px) {
  .proc { grid-template-columns: 1fr; }
  .proc__art { z-index: 20; height: 34svh; min-height: 210px; border-right: none; border-bottom: 1px solid var(--line); }
  .proc__state { padding-block: .4rem; font-size: 11.5px; }
  .step { min-height: 0; padding-block: 2.6rem; }
}

.build { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.build > div { padding: 1.4rem var(--gutter) 1.6rem; }
.build h3 { font-size: 25px; line-height: 1.15; }
.build p { margin-top: .4rem; color: var(--muted); font-size: 15.5px; }
.build a { color: var(--ink); text-decoration-color: var(--clay); text-underline-offset: .2em; }
@media (max-width: 900px) { .build { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .build { grid-template-columns: 1fr; } }

.ask { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: end; padding: clamp(2.8rem, 6vw, 4.8rem) var(--gutter); border-bottom: 1px solid var(--line); }
.ask h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; margin-top: 1rem; }
.ask .lead { margin-top: 1rem; }
.ask__list { list-style: none; margin-top: 1.1rem; font-family: var(--mono); font-size: 13.5px; }
.ask__list li { padding: .3rem 0; }
.ask__list li::before { content: '* '; color: var(--seal); }
.ask__go { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.ask__go small { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 820px) { .ask { grid-template-columns: 1fr; } }

/* ── Odkrývání ── */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease), background-color .35s; }
.js .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .hi__ink { stroke-dashoffset: 0; }
  .hi__dot { transform: none; }
  .nav::after { display: none; }
  .waves span { opacity: .7; }
  @view-transition { navigation: none; }
}

@media print {
  .nav, .rail, .waves, .hero__canvas, .proc__art { display: none !important; }
  .js .rv { opacity: 1 !important; transform: none !important; }
  body::after { display: none; }
}