/* Shared by index.html (EN) and cs/index.html (CS). Edit once, both pages follow. */

:root {
  --blood: #b01019;
  --blood-bright: #e8232d;
  --bone: #e7dcc6;
  --ash: #8d8577;
  /* matches the logo PNG's own backdrop (sampled: 0,0,0) so its square edge disappears */
  --void: #000000;

  /* Drives BOTH the logo width and the war-cry font size, so the war cry can never
     outgrow the artwork it sits under. Square art, so the vh term also keeps the hero
     on one screen. Redefined in the short-viewport query below — both follow. */
  --hero-size: min(86vw, 700px, 52vh);
}

* { box-sizing: border-box; }

/* The brand is artwork, so the page's real h1 is text only screen readers and crawlers
   see. Same subject as the visible copy — it is a label for the logo, not hidden padding. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  /* flat black behind the artwork — the logo's own black square then has no visible edge */
  background: var(--void);
  color: var(--bone);
  font-family: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  text-align: center;
  padding: 0 24px 7vh;
  overflow-x: hidden;
}

/* the hero owns the first screen; everything else is below the fold */
.hero {
  position: relative;
  min-height: 100vh;
  /* On mobile, 100vh is the LARGE viewport height (address bar collapsed), so the hero's
     bottom — and the scroll cue pinned to it — sits below what you can actually see while
     the browser chrome is showing. svh is the small viewport, i.e. chrome visible.
     Browsers without svh support simply ignore this line and keep the 100vh above. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5vh 0;
}

.hero, .manifesto, .join, footer { position: relative; z-index: 1; }

/* blood haze — kept low on the page so it never crosses the logo's edges */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 20% at 50% 84%, rgba(176,16,25,.22), rgba(176,16,25,0) 72%),
    radial-gradient(ellipse 130% 26% at 50% 112%, rgba(176,16,25,.16), rgba(176,16,25,0) 72%),
    radial-gradient(ellipse 130% 20% at 50% -10%, rgba(176,16,25,.14), rgba(176,16,25,0) 72%);
}

/* faint grit overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  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='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.hero > * {
  max-width: 880px;
  animation: rise 1s ease-out both;
}

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

/* <picture> is inline by default and would add a baseline gap under the art */
.sigil-wrap picture { display: block; }

.sigil-wrap {
  display: block;
  width: var(--hero-size);
  margin: 0 auto;
}

.sigil {
  width: 100%;
  height: auto;
  display: block;
  /* Tames the artwork's red to the site palette. This logo's source red averages #c90504
     with ~27% of its red pixels at r≈248 and 4% already clipped in the file, which reads
     as glare on screen. Measured, brightness(.9) brings the average to #ae0808 — on
     --blood — with 0% clipping and the wordmark still a legible cream (#d7c4b1).
     Re-measure this value if the artwork is ever regenerated; it is specific to the file. */
  filter: brightness(0.9);
  /* feather the PNG's own square border so it dissolves into the page */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 2%, #000 96%, transparent 100%);
  mask-composite: intersect;
}

.kicker {
  margin: 10px 0 0;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: clamp(.7rem, 2.4vw, .95rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #ff3b44;
  text-indent: .42em;
  text-shadow: 0 0 18px rgba(232,35,45,.5);
}

.rule {
  width: min(70%, 420px);
  height: 2px;
  margin: 18px auto 24px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--blood-bright) 50%, transparent);
  box-shadow: 0 0 14px rgba(232,35,45,.45);
}

.creed {
  font-size: clamp(1.15rem, 3.6vw, 1.65rem);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 44ch;
  color: #cfc4ad;
}

.creed em {
  font-style: normal;
  color: var(--bone);
}

.war-cry {
  margin: 22px auto 0;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 900;
  /* Derived from --hero-size rather than the viewport, so the war cry stays narrower than
     the logo at every size instead of needing a re-tuned magic number whenever the copy
     changes length. The ratio is set against the CZECH line ("Dlaždice po dlaždici,"),
     which is the longest of the two languages — it leaves ~40px clearance at 1366x768,
     enough to survive a Georgia fallback if Cinzel fails to load. Re-check both languages
     if either war cry gets materially longer. */
  font-size: clamp(1.35rem, calc(var(--hero-size) * 0.065), 2.4rem);
  line-height: 1.12;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 0 34px rgba(232,35,45,.55);
}

/* deterministic two-line stack, so the war cry never gets wider than the logo */
.war-cry span { display: block; color: var(--blood-bright); }

/* pinned to the fold rather than left floating under the war cry */
.scroll-cue {
  position: absolute;
  bottom: 3.5vh;
  left: 50%;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--blood);
  animation: nudge 2.2s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translate(-50%, 0); opacity: .5; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero > * { animation: none; }
  .scroll-cue { animation: none; transform: translate(-50%, 0); opacity: .7; }
}

.manifesto {
  max-width: 32em;
  margin: 0 auto;
  padding-top: 6vh;
}

.manifesto h2 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.3rem, 4.6vw, 1.9rem);
  font-weight: 900;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}

.manifesto p {
  font-size: clamp(1rem, 2.8vw, 1.18rem);
  line-height: 1.68;
  text-wrap: pretty;   /* progressive: evens the rag and avoids last-line orphans */
  color: #b3a897;
  margin: 20px 0 0;
}

.manifesto .punch {
  margin-top: 26px;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 3.2vw, 1.3rem);
  line-height: 1.45;
  color: var(--bone);
  text-shadow: 0 0 26px rgba(232,35,45,.4);
}

.join {
  margin-top: 9vh;
}

/* Scoped to #qr, not ".join svg" — the Discord mark also lives in this section and a
   broad descendant selector captured it (and out-specified .discord-mark). */
#qr svg {
  display: block;
  width: min(52vw, 184px);
  height: auto;
  margin: 0 auto;
}

/* SECONDARY — Discord. The mark carries the visibility (a plain text line was too easy
   to miss) while the caption stays small and ash, so the club label above keeps the
   typographic lead. Recoloured to the blood palette rather than Discord blurple, which
   would be the only off-brand colour on the page. */
.join-alt {
  margin: 30px auto 0;
}

a.discord {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: "Cinzel", Georgia, serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
  transition: color .2s ease;
}

.discord-mark {
  display: block;
  /* Explicit height, not auto: inline SVG does not reliably derive its height from the
     viewBox and collapses to 0. The viewBox is square, so width and height match. */
  width: 38px;
  height: 38px;
  fill: var(--blood);
  filter: drop-shadow(0 0 14px rgba(176, 16, 25, .45));
  transition: fill .2s ease, filter .2s ease, transform .2s ease;
}

a.discord:hover,
a.discord:focus-visible {
  color: var(--bone);
}

a.discord:hover .discord-mark,
a.discord:focus-visible .discord-mark {
  fill: #ff3b44;
  filter: drop-shadow(0 0 20px rgba(232, 35, 45, .6));
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .discord-mark { transition: none; }
  a.discord:hover .discord-mark { transform: none; }
}

/* PRIMARY call to action — joining the Floaty club is the point of the page, so this is
   the bright one. Letter-spacing is tighter than the rest of the small caps here because
   these labels now carry real information; at .34em the Czech one overflowed a phone. */
.join-label {
  margin: 14px auto 0;
  max-width: 22em;
  font-family: "Cinzel", Georgia, serif;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-indent: .17em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 0 22px rgba(232, 35, 45, .35);
}

footer {
  margin-top: 7vh;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
}

footer .dot { color: var(--blood); margin: 0 .6em; }

/* ==========================================================================
   i18n — language switcher. To revert to a single language, delete this block
   and the fenced <nav class="lang"> in the HTML. Nothing else depends on it.
   ========================================================================== */
.lang {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
  padding: 14px 20px;
  font-family: "Cinzel", Georgia, serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lang a, .lang span {
  padding: 4px 2px;
  text-decoration: none;
  color: var(--ash);
}

.lang a:hover, .lang a:focus-visible { color: var(--bone); }

.lang [aria-current="true"] { color: var(--blood-bright); }

.lang .sep { color: #3c3630; margin: 0 .3em; }
/* ======================= end i18n ======================= */

@media (max-width: 480px) {
  .kicker { letter-spacing: .28em; text-indent: .28em; }
  footer { letter-spacing: .14em; }
  /* break the creed at its sentence seam rather than mid-clause */
  .creed em { display: block; }
  .lang { padding: 10px 14px; font-size: .68rem; }
}

/* Keyed off height, not width: on short viewports it is vertical room the hero runs out
   of, and the text block is a fixed size while the logo is the part that can give. */
@media (max-height: 780px) {
  :root { --hero-size: min(86vw, 700px, 44vh); }
  .hero { padding: 3vh 0; }
  .rule { margin: 14px auto 18px; }
  .war-cry { margin-top: 18px; }
  .scroll-cue { margin-top: 3vh; }
}