/* Dílna Javor · DESIGN
   Koncept: trpělivé řemeslo z masivu, čerstvě naolejované dřevo v ranním světle tiché dílny.
   Barvy (tokens.css, brand-h 65 = teplý javor): podklad broušený javor, text ořech, jediný akcent
   = červená tesařská tužka (accent-h 32) jen na kóty, značky, tlačítko, focus a ::selection.
   Písmo: jedna rodina, General Sans (Fontshare, self-host); hierarchii nese velikost a řez, ne druh písma.
   Žádné dekorativní linky: sekce a řádky odděluje prostor (zpětná vazba 29. 9. 2026: linky a serif působily levně). Pohyb: jeden ease "hobl" (0.6, 0, 0.2, 1), délky 0.6 / 0.9 / 1.6 s. */

@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --font: "General Sans", ui-sans-serif, sans-serif;
  --serif: var(--font);
  --mono: var(--font);
  --dark: var(--n-950);
  --on-dark: oklch(.95 .006 var(--brand-h));
  --on-dark-muted: oklch(.80 .012 var(--brand-h));
  --pencil: var(--a-600);
  --grid-margin: var(--gutter);
  --mwg2-grey: var(--ink-muted);
  --img-radius: 4px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
a { color: inherit; }
::selection { background: var(--pencil); color: var(--accent-ink); }
.mono { font-size: var(--t-xs); font-weight: 500; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.035em; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); padding-inline: var(--gutter); }

/* ---------- hlavička */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--s3) var(--gutter); color: var(--ink); transition: color .5s cubic-bezier(.6,0,.2,1); will-change: transform; }
/* barva lišty podle toho, co je pod ní: fotka hera (vždy světlá) → tmavá, ořechový pás a menu → světlá */
.top.over-photo { color: oklch(.2 .012 var(--brand-h)); }
html.is-dark .top, html.menu-open .top { color: var(--on-dark); }
.top a { text-decoration: none; }
.logo { font-size: var(--t-md); font-weight: 600; letter-spacing: -.035em; justify-self: start; }
.status { display: flex; align-items: center; gap: .5em; font-size: var(--t-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.status .clock { opacity: .6; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.is-open .dot { animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .25; } }
.menu-btn { justify-self: end; font: inherit; font-size: var(--t-xs); font-weight: 500; color: inherit; background: none; border: 0; padding: var(--s1) 0; cursor: pointer; min-height: 32px; }
.top-cta { position: fixed; z-index: 31; top: calc(var(--s3) - 6px); right: calc(var(--gutter) + 4.2rem); display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--s3); border-radius: 999px; background: var(--pencil); color: var(--accent-ink); font-size: var(--t-xs); font-weight: 500; text-decoration: none; will-change: transform; }
.roll { display: grid; height: 1.3em; overflow: hidden; line-height: 1.3; }
.roll > span { grid-area: 1 / 1; transition: transform .6s cubic-bezier(.6,0,.2,1); }
.roll > span + span { transform: translateY(110%); }
:is(a, button):hover > .roll > span:first-child, :is(a, button):focus-visible > .roll > span:first-child { transform: translateY(-110%); }
:is(a, button):hover > .roll > span + span, :is(a, button):focus-visible > .roll > span + span { transform: translateY(0); }

/* menu přes celou obrazovku: ořechový panel, velké odkazy, fotka sekce při najetí */
.menu { position: fixed; inset: 0; z-index: 25; background: var(--dark); color: var(--on-dark); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); grid-template-rows: 1fr auto; padding: calc(var(--s6) + var(--s4)) var(--gutter) var(--s4); clip-path: inset(0 0 100% 0); visibility: hidden; }
.menu.is-open { visibility: visible; }
.menu-links { grid-column: 1 / span 7; align-self: center; display: flex; flex-direction: column; }
.menu-links a { display: flex; align-items: baseline; gap: var(--s3); color: inherit; text-decoration: none; padding-block: .06em; }
.menu-links .i { font-size: var(--t-xs); font-weight: 500; opacity: .5; font-variant-numeric: tabular-nums; width: 2.2em; }
.menu-links .l { display: block; overflow: clip; font-size: clamp(2.75rem, 1.5rem + 5.2vw, 7rem); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.menu-links .l > span { display: block; transition: opacity .4s; }
.menu-links:hover a .l > span { opacity: .35; }
.menu-links:hover a:hover .l > span, .menu-links a:focus-visible .l > span { opacity: 1; }
.menu-img { grid-column: 9 / span 4; align-self: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--img-radius); }
.menu-img img { width: 100%; height: 100%; object-fit: cover; }
.menu-foot { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); font-size: var(--t-xs); line-height: 1.5; opacity: .72; }
.menu-foot a { color: inherit; }
html.menu-open { overflow: hidden; }

/* ---------- 1 hero */
.hero { padding-bottom: var(--s7); }
.hero-img { position: relative; height: 88svh; min-height: 460px; overflow: hidden; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rings circle { fill: none; stroke: var(--on-dark); stroke-width: .12; opacity: 0; vector-effect: non-scaling-stroke; }
.hero-copy { margin-top: var(--s6); align-items: end; row-gap: var(--s5); }
.measure { grid-column: 1 / span 8; justify-self: start; }
.hero h1 { font-size: var(--t-3xl); line-height: .92; letter-spacing: -.045em; font-weight: 500; white-space: nowrap; }
.hero-lead { grid-column: 9 / span 4; font-size: var(--t-base); line-height: 1.5; color: var(--ink-muted); max-width: 36ch; }

/* ---------- 2 manifest (MWG 066) */
.mwg_effect066 .pin-height { height: 300vh; }
.mwg_effect066 .container { height: 100vh; display: grid; place-items: center; position: relative; padding: 0 var(--grid-margin); }
.mwg_effect066 .fig { position: absolute; bottom: var(--s4); left: var(--gutter); color: var(--mwg2-grey); }
.mwg_effect066 .label { display: block; line-height: 1; margin: 0 0 var(--s2); }
.mwg_effect066 .fig img { width: 12vw; min-width: 120px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--img-radius); }
.mwg_effect066 .container p { font-family: var(--serif); font-weight: 500; font-size: 3.2vw; line-height: 1.12; letter-spacing: -.015em; width: 58vw; }
/* naladění: měkčí náběh masky (40 % místo 25 %) */
.mwg_effect066 .line { mask-image: linear-gradient(90deg, #000 -40%, transparent 0%); -webkit-mask-image: linear-gradient(90deg, #000 -40%, transparent 0%); }

/* ---------- 3 co vyrábíme (MWG 117) */
.band { color: var(--ink); transition: color .8s cubic-bezier(.6,0,.2,1); }
html.is-dark .band { color: var(--on-dark); }
.mwg_effect117 { height: 100vh; min-height: 560px; display: grid; place-items: center; cursor: pointer; overflow: hidden; user-select: none; perspective: 1200px; position: relative; -webkit-tap-highlight-color: transparent; }
.mwg_effect117 .title { position: absolute; top: var(--s4); left: var(--gutter); opacity: .72; }
.mwg_effect117 .stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; transform-style: preserve-3d; }
.mwg_effect117 .words { position: relative; z-index: 2; display: grid; place-items: center; width: 90vw; pointer-events: none; transform: translateZ(40px); transform-style: preserve-3d; }
.mwg_effect117 .word { grid-area: 1 / 1; margin: 0; font-family: var(--serif); font-weight: 500; font-size: min(15vw, 176px); line-height: .9; letter-spacing: -.03em; text-align: center; will-change: transform, opacity; visibility: hidden; }
.mwg_effect117 .word.is-active { visibility: visible; }
.mwg_effect117 .medias { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform-style: preserve-3d; }
.mwg_effect117 .layer { position: absolute; inset: 0; transform-style: preserve-3d; }
.mwg_effect117 .layer--0 { transform: translateZ(-160px); }
.mwg_effect117 .layer--1 { transform: translateZ(0); }
.mwg_effect117 .layer--2 { transform: translateZ(140px); }
.mwg_effect117 .media { position: absolute; top: 50%; left: 50%; width: min(19vw, 230px); height: auto; aspect-ratio: 1; object-fit: cover; margin: 0; display: block; border-radius: var(--img-radius); will-change: transform, opacity; }
.mwg_effect117 .media-pool { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.mwg_effect117 .pager { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.mwg_effect117 .pager button { font: inherit; font-family: var(--mono); font-size: var(--t-xs); color: inherit; background: none; border: 0; padding: var(--s1) 0; min-height: 32px; cursor: pointer; opacity: .35; transition: opacity .3s; }
.mwg_effect117 .pager button:hover, .mwg_effect117 .pager .is-active button { opacity: 1; }
.mwg_effect117 .word-note { position: absolute; bottom: var(--s4); left: 50%; transform: translateX(-50%); opacity: .72; white-space: nowrap; }

/* ---------- 4 čas */
.time { padding-block: var(--section-y); row-gap: var(--s5); align-items: start; }
.time h2 { grid-column: 1 / span 6; font-size: var(--t-2xl); line-height: 1; letter-spacing: -.025em; }
.time-img { grid-column: 8 / span 5; grid-row: 1 / span 2; overflow: hidden; border-radius: var(--img-radius); }
.time-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--img-radius); }
.steps { grid-column: 1 / span 6; list-style: none; padding: 0; margin-top: var(--s4); }
.steps li { display: grid; grid-template-columns: 10ch 1fr; column-gap: var(--s4); padding-block: var(--s2); align-items: baseline; }
.steps .n { position: relative; color: var(--ink); }
.steps .t { color: var(--ink-muted); line-height: 1.5; }

/* ---------- 5 hotové kusy (MWG 037) */
.mwg_effect037 .pin-height { height: 500vh; }
.mwg_effect037 .container { width: 100%; height: 100vh; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); }
.mwg_effect037 .container > *:nth-child(1) { justify-self: start; }
.mwg_effect037 .container > *:nth-child(2) { justify-self: center; }
.mwg_effect037 .container > *:nth-child(3) { justify-self: end; }
.mwg_effect037 .text { font-family: var(--serif); font-weight: 500; font-size: var(--t-xl); letter-spacing: -.015em; }
.mwg_effect037 .mono-year { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-muted); }
.mwg_effect037 .images { width: 30vw; aspect-ratio: .75; position: relative; }
/* naladění: měkčí přechod masky (40 % místo 25 %) */
.mwg_effect037 .hidden { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; border-radius: var(--img-radius);
  -webkit-mask-image: linear-gradient(transparent 100%, #000 140%, #000 240%); mask-image: linear-gradient(transparent 100%, #000 140%, #000 240%); }
.mwg_effect037 .media { width: 100%; height: calc(100% + 60px); object-fit: cover; }

/* ---------- 6 ceník */
.price { padding-bottom: var(--section-y); row-gap: 0; }
.price h2 { grid-column: 1 / -1; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.015em; margin-bottom: var(--s5); }
.row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-block: var(--s2); align-items: baseline; }
.row h3 { grid-column: 1 / span 4; font-size: var(--t-lg); }
.row p { grid-column: 5 / span 5; color: var(--ink-muted); line-height: 1.5; }
.row .kc { grid-column: 10 / span 3; text-align: right; white-space: nowrap; font-family: var(--serif); font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.price-note { grid-column: 1 / -1; padding-top: var(--s4); color: var(--ink-muted); }

/* ---------- 7 výzva a patička */
.cta { padding: 0 var(--gutter) var(--s7); }
.cta h2 { font-size: var(--t-2xl); line-height: 1; letter-spacing: -.025em; margin-bottom: var(--s5); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s4); border-radius: 999px; background: var(--pencil); color: var(--accent-ink); text-decoration: none; font-weight: 500; }
.btn:hover { background: var(--a-700); }
.foot { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--s3); padding: 0 var(--gutter) var(--s4); font-size: var(--t-xs); color: var(--ink-muted); overflow: hidden; }
.wordmark .k { margin-right: .07em; } /* čárka nad í nesmí narazit do l */
.wordmark { grid-column: 1 / -1; justify-self: start; width: max-content; font-weight: 600; font-size: 16.4vw; line-height: .78; letter-spacing: -.065em; color: var(--ink); white-space: nowrap; margin: 0 0 var(--s4) -.04em; padding-top: .1em; }

/* ---------- mobil */
@media (max-width: 800px) {
  .status .status-t { display: none; }
  .top-cta { display: none; }
  .menu-links { grid-column: 1 / -1; }
  .menu-img { display: none; }
  .menu-foot { grid-template-columns: 1fr; gap: var(--s2); }
  .measure, .hero-lead { grid-column: 1 / -1; }
  .hero h1 { white-space: normal; }
  .hero-img { height: 70svh; }
  .mwg_effect066 .container p { width: 100%; font-size: 26px; }
  .mwg_effect066 .fig { bottom: auto; top: var(--s6); }
  .mwg_effect066 .fig img { width: 96px; min-width: 0; }
  .mwg_effect117 .media { width: min(30vw, 130px); }
  .mwg_effect117 .layer--0 { transform: translateZ(-80px); }
  .mwg_effect117 .layer--1 { transform: translateZ(-40px); }
  .mwg_effect117 .layer--2 { transform: translateZ(0); }
  .mwg_effect117 .word { font-size: 56px; }
  .mwg_effect117 .pager { top: auto; bottom: calc(var(--s5) + var(--s4)); left: 50%; transform: translateX(-50%); flex-direction: row; gap: var(--s4); }
  .time h2, .time-img, .steps { grid-column: 1 / -1; grid-row: auto; }
  .steps li { grid-template-columns: 1fr; row-gap: var(--s1); }
  .mwg_effect037 .container { grid-template-columns: 1fr; align-content: center; row-gap: var(--s3); }
  .mwg_effect037 .container > * { justify-self: center !important; }
  .mwg_effect037 .text { font-size: var(--t-lg); }
  .mwg_effect037 .images { width: 72vw; }
  .row h3 { grid-column: 1 / span 6; }
  .row .kc { grid-column: 7 / span 6; }
  .row p { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s1); }
  .foot { grid-template-columns: 1fr; }
}

/* ---------- klid (prefers-reduced-motion): vše stojí, obsah je celý vidět */
.klid .mwg_effect066 .pin-height, .klid .mwg_effect037 .pin-height { height: auto; }
.klid .mwg_effect066 .container { height: auto; padding-block: var(--section-y); gap: var(--s5); }
.klid .mwg_effect066 .fig { position: static; }
.klid .mwg_effect037 .container { height: auto; padding-block: var(--section-y); grid-template-columns: 1fr; row-gap: var(--s4); }
.klid .mwg_effect037 .container > * { justify-self: start !important; }
.klid .mwg_effect037 .images { width: 100%; aspect-ratio: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); }
.klid .mwg_effect037 .hidden { position: static; mask-image: none; -webkit-mask-image: none; aspect-ratio: .75; }
.klid .mwg_effect037 .media { height: 100%; }

/* ---------- řemeslo mezi sekcemi (awwwards: loader, kurzor, zrno, plynulé ztmavnutí) */
body { transition: background-color .8s cubic-bezier(.6,0,.2,1); }
html.is-dark body { background: var(--dark); }
.band { background: transparent; }
.klid .band { color: var(--on-dark); }
.loader { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; color: var(--ink); }
.loader-n { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.loader-t { position: absolute; bottom: var(--s4); left: var(--gutter); font-size: var(--t-xs); font-weight: 500; }
.cursor { position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; mix-blend-mode: difference; display: grid; place-items: center; opacity: 0; }
.cursor-label { font-size: 12px; font-weight: 500; color: #000; white-space: nowrap; opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
.btn { overflow: hidden; }
.btn-roll { display: grid; height: 1.3em; overflow: hidden; line-height: 1.3; }
.btn-roll > span { grid-area: 1 / 1; transition: transform .6s cubic-bezier(.6,0,.2,1); }
.btn-roll > span + span { transform: translateY(110%); }
.btn:hover .btn-roll > span:first-child { transform: translateY(-110%); }
.btn:hover .btn-roll > span + span { transform: translateY(0); }
body::after { content: ""; position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.split-line { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.klid .loader, .klid .cursor { display: none; }
.klid .menu { transition: none; }

.klid .band { background: var(--dark); }
html:not(.js) .band { background: var(--dark); }
html:not(.js) .loader { display: none; }