/* Grafická dílna — coming soon
   Paleta a sazba podle tištěné předlohy: inkoust na světlém papíře. */

:root {
  --paper:        #f4f2ee;
  --paper-lit:    #faf8f5;
  --ink:          #1e1e1c;
  --ink-soft:     #3d3d3a;
  --ink-muted:    #6f6f6a;
  --ink-faint:    #a3a29c;
  --hairline:     #cfccc4;

  --shell:        clamp(24px, 5vw, 68px);
  --tracking-cap: 0.26em;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 90% at 50% 0%,   var(--paper-lit) 0%, transparent 60%),
    radial-gradient(100% 80% at 50% 110%, #ebe8e2 0%, transparent 65%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Papírové zrno — jemný šum přes celou plochu */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: clamp(40px, 6vh, 56px) var(--shell) clamp(36px, 5vh, 52px);
}

/* ── Rohové údaje ─────────────────────────────────────────── */

.meta {
  position: absolute;
  top: clamp(40px, 6vh, 56px);
  left: var(--shell);
  right: var(--shell);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.meta-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 2.4;
  white-space: nowrap;
}

.meta-right { text-align: right; }
.meta-since { margin-top: 22px; }

.meta-rule {
  width: 26px;
  height: 1px;
  margin-top: 14px;
  background: var(--hairline);
}

/* ── Střední sloupec ──────────────────────────────────────── */

.content {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: clamp(4px, 1.4vh, 18px);
  text-align: center;
}

/* Logo */

.brand {
  display: block;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  display: block;
  width: clamp(58px, 6vw, 76px);
  height: auto;
  margin: 0 auto;
  fill: var(--ink);
}

.brand-name {
  display: block;
  margin-top: 20px;
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* letter-spacing přidává mezeru i za poslední znak — vyrovnáme */
  text-indent: 0.3em;
}

.brand-claim {
  display: block;
  margin-top: 11px;
  font-size: clamp(9px, 0.85vw, 11px);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-indent: 0.28em;
}

/* Nadpis */

.headline {
  margin: clamp(30px, 4.8vh, 48px) auto 0;
  font-size: clamp(32px, 4.7vw, 62px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.rule {
  width: 34px;
  height: 0;
  margin: clamp(22px, 3vh, 32px) auto 0;
  border: 0;
  border-top: 1px solid var(--ink);
}

.lead {
  margin: clamp(22px, 3.2vh, 34px) auto 0;
  max-width: 720px;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.78;
  color: var(--ink-soft);
}

/* Rukopisná výzva + šipka */

.invite {
  position: relative;
  display: inline-block;
  margin-top: clamp(26px, 4vh, 42px);
}

.invite-text {
  margin: 0;
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.invite-arrow {
  position: absolute;
  left: calc(100% + 18px);
  top: 2px;
  width: clamp(52px, 5.4vw, 74px);
  height: auto;
  color: var(--ink);
}

/* Kontaktní tlačítka */

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(22px, 3.2vh, 34px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 30px;
  border: 1px solid var(--ink);
  border-radius: 9px;
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.btn svg { width: 20px; height: 20px; flex: none; }

.btn-solid   { background: var(--ink); color: var(--paper-lit); }
.btn-outline { background: transparent; color: var(--ink); }

.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn-solid:hover, .btn-solid:focus-visible     { background: #000; }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--ink); color: var(--paper-lit); }

.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── Co děláme ────────────────────────────────────────────── */

.services { margin-top: clamp(34px, 5vh, 56px); }

.services-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--ink);
}

.services-title::before,
.services-title::after {
  content: "";
  width: clamp(28px, 5vw, 58px);
  height: 1px;
  background: var(--hairline);
}

.services-title span { text-indent: var(--tracking-cap); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(10px, 1.3vw, 18px);
  margin: clamp(24px, 3.4vh, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.service svg {
  width: 27px;
  height: 27px;
  color: var(--ink);
}

.service p {
  margin: 0;
  font-size: clamp(10.5px, 0.86vw, 12px);
  line-height: 1.5;
  text-wrap: balance;
  color: var(--ink-soft);
}

/* ── Patička ──────────────────────────────────────────────── */

.closing {
  margin-top: clamp(32px, 4.6vh, 50px);
  padding-top: clamp(22px, 3vh, 30px);
  border-top: 1px solid var(--hairline);
}

.closing p {
  margin: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-indent: var(--tracking-cap);
}

/* ── Responzivita ─────────────────────────────────────────── */

@media (max-width: 1100px) {
  .meta {
    position: static;
    justify-content: center;
    gap: clamp(24px, 6vw, 60px);
    margin-bottom: clamp(28px, 5vh, 44px);
  }
  .meta-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    line-height: 1.6;
  }
  .meta-right { display: flex; align-items: baseline; gap: 18px; }
  .meta-since { margin-top: 0; }
  .meta-rule { display: none; }

  .services-grid { grid-template-columns: repeat(4, 1fr); row-gap: 34px; }
}

@media (max-width: 720px) {
  .lead br { display: none; }

  .invite { display: block; }
  .invite-arrow {
    position: static;
    display: block;
    margin: 10px auto 0;
    width: 46px;
    transform: rotate(38deg);
  }

  .actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn { justify-content: center; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .btn { padding: 15px 18px; font-size: 13.5px; }
  .btn span { white-space: normal; }
}

/* ── Nástup ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .meta, .brand, .headline, .rule, .lead, .invite, .actions, .services, .closing {
    animation: rise .8s cubic-bezier(.22,.61,.36,1) both;
  }
  .brand    { animation-delay: .05s; }
  .headline { animation-delay: .12s; }
  .rule     { animation-delay: .18s; }
  .lead     { animation-delay: .22s; }
  .invite   { animation-delay: .28s; }
  .actions  { animation-delay: .34s; }
  .services { animation-delay: .42s; }
  .closing  { animation-delay: .5s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

@media print {
  .grain { display: none; }
  body { background: #fff; }
}