/* Nezávisle a Spolu — Dlouhá Loučka
   Varianta „Podhůří“: teplý přechod, siluety kopců, cihlová + mechová.
   Sazba je vázaná na výšku viewportu (vh), aby se stránka vešla bez rolování. */

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

:root{
  --sky-1:#fdf6ec;
  --sky-2:#fbe6cd;
  --ink:#2f2a24;
  --ink-soft:#6f6353;
  --brick:#b4571f;
  --brick-dark:#8d4316;
  --moss:#4a5a44;
  --line:rgba(47,42,36,.16);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { height:100%; }

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  font-family: var(--sans);
  color: var(--ink);
  background: linear-gradient(175deg, var(--sky-1) 0%, var(--sky-1) 42%, var(--sky-2) 100%);
  display:flex;
  overflow-x:hidden;
  position:relative;
  -webkit-text-size-adjust:100%;
}

.hills{
  position:fixed;
  left:0; right:0; bottom:0;
  width:100%;
  height:min(34vh, 20rem);
  display:block;
  pointer-events:none;
}

.wrap{
  position:relative;
  z-index:1;
  width:min(58rem, 100%);
  margin:auto;
  padding: clamp(1rem, 4vh, 2.75rem) clamp(1.25rem, 6vw, 4rem);
  padding-top: max(clamp(1rem, 4vh, 2.75rem), env(safe-area-inset-top));
  padding-bottom: max(clamp(1rem, 4vh, 2.75rem), env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap: clamp(.55rem, 1.7vh, 1.15rem);
}

.kicker{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-size: clamp(.62rem, 1.5vh, .76rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--brick-dark);
  font-weight:600;
}
.kicker::before{
  content:"";
  width: clamp(1.5rem, 4vw, 2.4rem);
  height:2px;
  background: var(--brick);
  flex:none;
}

h1{
  margin:0;
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(2.1rem, min(9vw, 9vh), 4.9rem);
  line-height:1.02;
  letter-spacing:-.01em;
  color: var(--ink);
}
h1 em{
  font-style:normal;
  color: var(--brick);
}

.place{
  margin:0;
  font-size: clamp(.78rem, 2vh, 1rem);
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  color: var(--ink-soft);
  font-weight:600;
}

.lead{
  margin:0;
  max-width:46ch;
  font-size: clamp(.95rem, 2.3vh, 1.15rem);
  line-height:1.6;
  color: var(--ink);
}

.band{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap: clamp(.35rem, 1.4vh, .9rem) clamp(.9rem, 3vw, 1.8rem);
  padding: clamp(.6rem, 1.8vh, 1rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0;
}
.band dt{
  font-size: clamp(.6rem, 1.45vh, .72rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--ink-soft);
  flex-basis:100%;
  margin-bottom:.15em;
}
.band dd{
  margin:0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.9vh, 1.6rem);
  line-height:1.25;
  color: var(--brick-dark);
}
.band dd small{
  display:block;
  font-family: var(--sans);
  font-size: clamp(.62rem, 1.5vh, .74rem);
  letter-spacing:.08em;
  color: var(--ink-soft);
  margin-top:.25em;
}
.band .countdown{
  margin-left:auto;
  font-family: var(--sans);
  font-size: clamp(.62rem, 1.5vh, .74rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--moss);
  white-space:nowrap;
}

.status{
  margin:0;
  font-size: clamp(.82rem, 2vh, .95rem);
  line-height:1.6;
  color: var(--ink-soft);
  max-width:48ch;
}

a{ color: var(--brick-dark); text-decoration:none; box-shadow:0 1px 0 currentColor; }
a:hover, a:focus-visible{ color: var(--brick); }

footer{
  padding-top: clamp(.4rem, 1.5vh, 1rem);
  font-size: clamp(.65rem, 1.55vh, .76rem);
  line-height:1.6;
  color: var(--ink-soft);
}
footer span{ white-space:nowrap; }

/* Na velmi nízkém viewportu (telefon na šířku) uvolníme sazbu; kopce by braly místo. */
@media (max-height: 430px){
  .hills{ display:none; }
  .wrap{ gap:.45rem; }
}

@media (prefers-reduced-motion: no-preference){
  .wrap > *{ animation: rise .75s ease-out both; }
  .wrap > *:nth-child(2){ animation-delay:.06s }
  .wrap > *:nth-child(3){ animation-delay:.12s }
  .wrap > *:nth-child(4){ animation-delay:.18s }
  .wrap > *:nth-child(n+5){ animation-delay:.24s }
  @keyframes rise{ from{ opacity:0; transform:translateY(.6rem) } to{ opacity:1; transform:none } }
}