:root {
    --bg: #120e16;
    --ink: #f4ecdf;
    --muted: #c3b5a6;
    --gold: #e4c27a;
    --line: rgba(228, 194, 122, 0.35);
}
* {box-sizing: border-box;text-align: center;}
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Outfit, sans-serif;
    font-weight: 340;
    /* line-height: 1.55; */
}
img { max-width: 100%; display: block; }
a { color: var(--gold); }
.preskoc { position: absolute; left: -999px; }
.preskoc:focus { left: 12px; top: 12px; background: #fff; color: #000; padding: 8px; }
.hlava {
    position: sticky; top: 0; z-index: 3;
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 5vw;
    background: rgba(18, 14, 22, 0.78);
    backdrop-filter: blur(12px);
}
.logo { color: var(--ink); text-decoration: none; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; }
.logo em { font-family: "Instrument Serif", serif; font-style: italic; letter-spacing: 0; text-transform: none; font-size: 1.3rem; margin-left: 6px; }
nav { display: flex; gap: 20px; }
nav a { color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.menu { display: none; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font: inherit; }
.hero { position: relative; min-height: 100vh; display: grid; align-items: end; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(18,14,22,0.25), rgba(18,14,22,0.82) 70%);
}
.hero-text {position: relative;z-index: 10;padding: 0 5vw 72px;/* max-width: 46rem; */}
.eyebrow { color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.75rem; }
h1, h2, h3 {/* font-family: "Instrument Serif", serif; */font-weight: 200;}
h1 {font-size: clamp(3.2rem, 7vw, 6.4rem);/* line-height: 0.92; *//* margin: 10px 0 16px; */align-items: center;text-align: center;}
.tlacitko, button {
    display: inline-block; margin-top: 12px; background: var(--gold); color: #1a140c;
    text-decoration: none; border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; cursor: pointer;
}
.pas {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pas p { margin: 0; padding: 22px 18px; border-right: 1px solid var(--line); color: var(--muted); }
.pas strong { display: block; color: var(--ink); margin-bottom: 6px; }
.tvorba, .znacka, .prani, .kontakt, footer { padding: 72px 5vw; }
.tvorba h2, .znacka h2, .prani h2, .kontakt h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0 0 24px; }
.karty { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; gap: 14px; }
.karty article { background: #1c1622; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.karty img, .pismo { height: 280px; width: 100%; object-fit: cover; }
.karty article:first-child img { height: 460px; }
.pismo { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3a2a22, #1c1622); }
.pismo span { font-family: "Instrument Serif", serif; font-style: italic; font-size: 3rem; color: var(--gold); }
.popis { padding: 18px 18px 22px; }
.popis p { color: var(--muted); }
.cena { color: var(--gold) !important; }
.znacka { max-width: 46rem; }
.veta { font-family: "Instrument Serif", serif; font-style: italic; font-size: 1.7rem; color: var(--ink); line-height: 1.3; }
.prani { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.prani img { border-radius: 50%; width: min(420px, 100%); height: min(420px, 70vw); object-fit: cover; justify-self: center; }
.kontakt form { display: grid; gap: 12px; max-width: 36rem; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 0.9rem; }
input, textarea {
    font: inherit; color: var(--ink); background: #1c1622; border: 1px solid var(--line);
    border-radius: 12px; padding: 12px 14px;
}
textarea { min-height: 130px; }
.past { position: absolute; left: -9999px; }
.chyba { color: #f0b4a8; }
.ok { color: var(--gold); }
footer { display: flex; gap: 22px; border-top: 1px solid var(--line); color: var(--muted); }
footer a { text-decoration: none; }
@media (max-width: 860px) {
    .menu { display: inline-block; }
    nav {
        display: none; position: absolute; top: 62px; right: 5vw; flex-direction: column;
        background: #1c1622; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line);
    }
    nav.otevrene { display: flex; }
    .pas, .karty, .prani { grid-template-columns: 1fr; }
    .pas p { border-right: 0; border-bottom: 1px solid var(--line); }
    .karty article:first-child img { height: 240px; }
    .seznam, .detail, .radky li, .dva { grid-template-columns: 1fr; }
    .detail img, .pismo.velke { height: 240px; }
}
.stranka { padding: 36px 5vw 72px; }
.stranka h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.lead { color: var(--muted); max-width: 38rem; }
.kroky { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.kroky .ted { color: var(--gold); }
.seznam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; padding: 0; }
.seznam a { display: flex; flex-direction: column; color: inherit; text-decoration: none; background: #1c1622; border-radius: 18px; overflow: hidden; min-height: 100%; }
.seznam img, .seznam .pismo { height: 240px; }
.seznam .popis { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 20px; }
.seznam strong { font-family: "Instrument Serif", serif; font-size: 1.45rem; font-weight: 400; }
.kat { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.75rem; color: var(--gold); }
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.detail img, .pismo.velke { width: 100%; height: 460px; object-fit: cover; border-radius: 18px; }
.pismo.velke { display: grid; place-items: center; }
.cena.velka, .soucet { color: var(--gold); font-size: 1.35rem; }
.detail form, .udaje { display: grid; gap: 12px; max-width: 36rem; }
fieldset { border: 1px solid var(--line); border-radius: 14px; margin: 0; }
.volba { display: flex; flex-direction: row; gap: 8px; align-items: center; }
.dva { display: grid; grid-template-columns: 1fr 140px; gap: 12px; }
.radky { list-style: none; padding: 0; display: grid; gap: 12px; }
.radky li { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 12px; align-items: center; background: #1c1622; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.radky form { display: flex; gap: 8px; align-items: end; max-width: none; }
.radky input { width: 72px; }
.radky button { margin-top: 0; }