/*
 * The intro (hero) and the footer. Shared by the stand-alone landing page
 * (index.html) and the artwalk.art app build (#5623), where they sit above and
 * below the ArtWalk app in the same document. Every rule is therefore scoped
 * to .hero / .site-footer / .aw-* classes: a bare element or utility-like
 * selector here would restyle the app (Tailwind has its own `block` class).
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.hero,
.site-footer {
  --primary: #ea1e63;
  --secondary: #ea7e1e;
  --light: #fffffe;
  --black: #130107;
  --background-alt: #f9f9f9;
  --foreground: #565555;
  --meta: #c2c2c2;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}

.hero *,
.site-footer * {
  box-sizing: border-box;
}

.site-footer a,
.aw-back {
  text-decoration: none;
}

.site-footer img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.site-footer ul,
.site-footer p,
.site-footer h3 {
  margin: 0;
}

.aw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Zurück zu PixDeluxe": only for visitors who came from pixdeluxe.com. The
   boot script sets the class on <html>; without it (or without JavaScript)
   the link is not there at all. */
.aw-back {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  z-index: 2;
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(19, 1, 7, 0.55);
  color: var(--light);
  font-size: 15px;
  font-weight: 600;
}

.aw-from-pixdeluxe .aw-back {
  display: inline-flex;
}

.aw-back:hover,
.aw-back:focus-visible {
  background: var(--primary);
  color: var(--light);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: var(--black);
  color: var(--light);
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(19, 1, 7, 0.55) 0%, rgba(19, 1, 7, 0.35) 60%, rgba(19, 1, 7, 0.6) 100%);
}

.hero-title {
  position: relative;
  margin: 0;
  padding: 0 5vw;
  text-align: center;
  font-weight: 800;
  line-height: 1;
}

.lettering {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  column-gap: 0.28em;
  row-gap: 0.08em;
  justify-items: start;
  text-align: left;
  white-space: nowrap;
  font-size: min(9vw, 96px);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(19, 1, 7, 0.55);
}

.line-art {
  display: inline-flex;
  align-items: baseline;
}

.slot {
  display: inline-grid;
}

/* The slot is as wide as the longest completion, so the block of logo,
   lettering and completion keeps its place when the word changes. Each word
   starts at the slot's left edge, straight after ".art". */
.word {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: pre;
  opacity: 0;
}

.word.is-skipped {
  display: none;
}

.hero-logo {
  align-self: center;
  width: 1.3em;
  height: 1.3em;
  max-width: none;
  filter: drop-shadow(0 2px 24px rgba(19, 1, 7, 0.55));
}

/* Phones: "ARTWALK" above ".art…" so the lettering can stay large; the logo
   stands in front of both lines. */
@media (max-width: 700px) {
  .lettering {
    grid-auto-flow: row;
    grid-template-columns: auto auto;
    font-size: 8vw;
  }
  .hero-logo {
    grid-area: 1 / 1 / span 2 / auto;
    width: 2em;
    height: 2em;
  }
  .line {
    grid-column: 2;
  }
}

/* ---------- footer (as on pixdeluxe.com) ---------- */

.site-footer {
  background: var(--black);
  color: var(--foreground);
  font-size: 14px;
}

.footer-main {
  display: grid;
  grid-template-columns: 35% 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 5vw;
}

.footer-brand-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-brand-title img {
  width: 61px;
  height: auto;
}

.footer-site-title {
  color: var(--light);
  font-size: clamp(17.9px, 1.119rem + 0.616vw, 28px);
  font-weight: 600;
}

.footer-site-title:hover {
  color: var(--primary);
}

.footer-claim {
  margin: 16px 0;
  color: var(--background-alt);
}

.footer-social {
  display: inline-flex;
  color: var(--light);
}

.footer-social:hover {
  color: var(--primary);
}

.footer-col h3 {
  margin: 0 0 12px;
  color: var(--light);
  font-size: clamp(14px, 0.875rem + 0.366vw, 20px);
  font-weight: 500;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 2.5;
}

.footer-col a {
  color: var(--foreground);
}

.footer-col a:hover {
  color: var(--primary);
}

.footer-col .footer-meta,
.footer-col .footer-meta a {
  color: var(--meta);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 5vw;
  border-top: 1px solid #ffffff17;
}

.footer-bottom p {
  margin: 0;
  color: var(--background-alt);
  font-size: clamp(14px, 0.875rem + 0.122vw, 16px);
}

.footer-top {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--light);
  font-size: 0;
}

.footer-top::before {
  content: "↑";
  font-size: 22px;
}

.footer-top:hover {
  background: var(--secondary);
  color: var(--light);
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}