/* Nezměřená — styl stránky za koncem knihy.
   Barvy jsou stejné čtyři jako na obálce: kost, sláma, pryskyřičná hnědá, stín. */

@font-face {
  font-family: "Newsreader Titul";
  src: url("font/titul.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader Titul";
  src: url("font/titul-kurziva.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Newsreader Kniha";
  src: url("font/kniha.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --kost:  #ede4d2;
  --slama: #dcc9a2;
  --hneda: #7a5230;
  --stin:  #2c241a;
  --tma:   #12100c;
  /* Měď: akcent na „změřená“. Stejná role jako --accent na nástěnce
     a stejný odstín jako ražba na obálce. Mění se tady, na jednom místě. */
  --med:   #d08a4e;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
  background: var(--tma);
  color: var(--kost);
  font-family: "Newsreader Kniha", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- obraz -------------------------------------------------------------- */

/* Přesah přes okraje, aby se při pomalém posunu nikdy neodhalila hrana.
   Pod fotografií leží tmavý přechod — dokud obrázek není, stránka drží. */
.pozadi {
  position: fixed;
  inset: -6vmax;
  z-index: 0;
  background-color: #0d0b08;
  /* Na výšku je hlavní verze — QR kód se skenuje telefonem. */
  background-image:
    url("obraz/pozadi-na-vysku.jpg"),
    radial-gradient(120% 90% at 30% 35%, #221c14 0%, #14110c 55%, #0b0906 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: 38% 45%;
  animation: dychani 78s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change: transform;
}

/* Druhý pohyb, jinak dlouhý než první, takže se nikdy nesejdou do rytmu:
   lesk, který pomalu odchází do dřeva. */
.svetlo {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(70% 55% at 42% 38%,
              rgba(220,201,162,.10) 0%, rgba(220,201,162,0) 70%);
  opacity: .25;
  animation: lesk 103s ease-in-out infinite alternate;
}

/* Záclona drží text čitelný, ať přijde jakkoli světlá fotka. */
.zaclona {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(12,10,7,.46) 0%,
      rgba(12,10,7,.08) 40%,
      rgba(12,10,7,.24) 70%,
      rgba(12,10,7,.60) 100%),
    radial-gradient(105% 80% at 50% 45%,
      rgba(12,10,7,0) 40%, rgba(12,10,7,.46) 100%);
}

@keyframes dychani {
  from { transform: scale(1)     translate3d(0, 0, 0); }
  to   { transform: scale(1.045) translate3d(-1.1%, -.7%, 0); }
}
@keyframes lesk {
  from { opacity: .12; }
  to   { opacity: .40; }
}

/* ---- strana ------------------------------------------------------------- */

.strana {
  position: relative;
  z-index: 3;
  width: min(100%, 33rem);
  text-align: center;
}

.titul {
  margin: 0;
  font-family: "Newsreader Titul", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.9rem, 11.5vw, 4.9rem);
  line-height: 1.04;
  /* Titul je jedno slovo, ne prostrkaná verzálka — tracking zůstává knižní. */
  letter-spacing: .005em;
  color: var(--kost);
  text-shadow: 0 2px 26px rgba(8,6,4,.75);
}

/* „Ne“ normálně, „změřená“ kurzívou a mědí. Stejná konvence jako v nastenka.html:
   jedno slovo, které se v půlce zlomí — to, co se dá rozebrat a proměřit, je
   vysázené jinak než ten tah před ním. Nikde se to nekomentuje. */
.titul em {
  font-style: italic;
  color: var(--med);
}

/* Pravítko s ryskami. Stejná grafika jako pod „změřená“ na obálce a na hřbetu.
   Je tu jednou, potichu, a nikde se nekomentuje. */
.pravitko {
  width: min(14rem, 62%);
  height: 9px;
  margin: 2.4rem auto 2.7rem;
  opacity: .32;
  background-image:
    linear-gradient(var(--slama), var(--slama)),
    repeating-linear-gradient(90deg,
      var(--slama) 0 1px, transparent 1px 13px);
  background-size: 100% 1px, 100% 5px;
  background-position: top left, top left;
  background-repeat: no-repeat;
}

/* ---- odkaz -------------------------------------------------------------- */

/* Jediná další věc na stránce. Musí být na první pohled poznat, že se na ni
   dá kliknout.

   Proto skutečné podtržení, ne linka pod odstavcem: text-decoration drží
   u písma a je přesně tak široké jako ono, kdežto border-bottom sedí až pod
   spodním odsazením a roztáhne se přes celý rámeček — pak to na stránce,
   kde už jedna vodorovná linka je, vypadá jako druhé pravítko.

   Barvu podtržení nese měď. Na téhle stránce není měď nikde jinde než
   v titulu, takže si jí člověk všimne dřív, než stihne přemýšlet proč. */
.odkaz {
  display: inline-block;
  font-family: "Newsreader Kniha", Georgia, serif;
  font-size: clamp(1.18rem, 5vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: .035em;
  color: var(--kost);
  text-decoration: underline;
  text-decoration-color: var(--med);
  text-decoration-thickness: .055em;
  text-underline-offset: .26em;
  text-decoration-skip-ink: auto;
  padding: .6rem .25rem .5rem;   /* pohodlný cíl na dotyk, přes 44 px */
  text-shadow: 0 2px 20px rgba(8,6,4,.8);
  transition: color .35s ease, text-decoration-thickness .25s ease,
              text-underline-offset .25s ease;
}
.odkaz:hover,
.odkaz:focus-visible {
  color: var(--med);
  text-decoration-thickness: .085em;
  text-underline-offset: .2em;
}
.odkaz:focus-visible {
  outline: 1px solid rgba(237,228,210,.5);
  outline-offset: 8px;
}

/* ---- ohledy ------------------------------------------------------------- */

/* Na širokou obrazovku jiný výřez. Když soubor chybí, nastoupí přechod pod ním. */
@media (min-aspect-ratio: 1/1) {
  .pozadi {
    background-image:
      url("obraz/pozadi-na-sirku.jpg"),
      radial-gradient(120% 90% at 30% 35%, #221c14 0%, #14110c 55%, #0b0906 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pozadi, .svetlo { animation: none; }
  .svetlo { opacity: .22; }
}

@media (max-width: 420px) {
  .pravitko { margin: 2rem auto 2.5rem; }
}