/* LIV/FE launch page.
   Palette from the identity manual (Simon Puebla, Oct 2026): three main colours, two accents.
   Typefaces: Optima and Avenir where the device has them (every Mac, iPhone and iPad).
   Elsewhere the self-hosted stand-ins load: Marcellus for Optima, Nunito Sans for Avenir. */

@font-face {
  font-family: "Marcellus";
  src: url("assets/fonts/marcellus-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/nunitosans-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --negro: #1D1D1D;
  --burdeos: #571D30;
  --marfil: #F1E9DA;
  --naranja: #EF793D;
  --manteca: #F2D47B;
  --wine: #3B1220;      /* the arches flyer ground, deeper than burdeos */

  --marfil-80: rgba(241, 233, 218, 0.8);
  --marfil-70: rgba(241, 233, 218, 0.7);
  --marfil-24: rgba(241, 233, 218, 0.24);
  --marfil-12: rgba(241, 233, 218, 0.12);

  --serif: Optima, "Marcellus", Georgia, serif;
  --sans: Avenir, "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

  /* The background scene. Swap the two file names to change it (see README, "Background scene"). */
  --bg-small: url("assets/bg/arches-ivory-figure-1080.jpg");
  --bg-large: url("assets/bg/arches-ivory-figure-1440.jpg");

  /* Width of the form card, and of the arch drawing that frames it below 900px:
     the central arch (660 of the 1080 drawing) is as wide as the card. */
  --card-w: calc(min(100vw, 34rem) - 2rem);
  --arch-w: calc(var(--card-w) / 0.6111);

  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--negro);
  color: var(--marfil);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Background: the treated scene, a dark veil for legibility and a burgundy tint at the foot. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--wine);
  /* The wine wash from the arches flyer: heavy at the top and the foot, lighter where the figure is. */
  background-image:
    linear-gradient(to bottom, rgba(59, 18, 32, 0.86) 0%, rgba(59, 18, 32, 0.68) 30%, rgba(59, 18, 32, 0.5) 60%, rgba(59, 18, 32, 0.92) 100%),
    var(--bg-small);
  background-position: center, center 20%;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .bg { background-image:
    linear-gradient(to bottom, rgba(59, 18, 32, 0.84) 0%, rgba(59, 18, 32, 0.66) 30%, rgba(59, 18, 32, 0.5) 60%, rgba(59, 18, 32, 0.92) 100%),
    var(--bg-large);
  }
}

/* The arches: three thin door outlines, open at the bottom, fading towards the base (as on the flyers).
   Below 900px the drawing is scaled so the central arch sits exactly over the form card, which
   carries the same arched top; it scrolls with the page so the two stay together.
   From 900px it is a fixed centred column the height of the window (the desktop composition). */
.arches {
  position: absolute;
  left: 50%;
  top: calc(var(--arch-w) * -0.30);
  width: var(--arch-w);
  height: calc(var(--arch-w) * 1.7778);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}
@media (min-width: 900px) {
  .arches {
    position: fixed;
    top: 0;
    width: calc(100vh * 0.5625);
    height: 100vh;
  }
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 0.75rem;
  background: var(--marfil);
  color: var(--negro);
  z-index: 10;
}
.skip:focus { top: 1rem; }

.page {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5rem) 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  text-align: center;
}
@media (max-width: 899px) {
  .page { padding-top: max(5.5rem, 12vh); }   /* the wordmark sits inside the central arch */
}
@media (min-width: 900px) {
  .page { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }

.wordmark { margin: 0; width: min(74vw, 380px); }
.wordmark img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .wordmark { width: 440px; } }

/* A soft wine halo keeps the ivory lines readable where an arch line or a light streak passes behind them. */
.hero .line,
.intro,
.line--close,
.footer__links,
.footer__legal {
  text-shadow: 0 0 14px rgba(59, 18, 32, 0.9), 0 1px 3px rgba(59, 18, 32, 0.8);
}

.line {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.3;
}
.line--idea { font-size: clamp(0.95rem, 3.6vw, 1.25rem); }
.line--close { font-size: clamp(1.25rem, 5vw, 1.75rem); letter-spacing: 0.2em; }

.intro {
  margin: 0;
  max-width: 26rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--marfil);
}

/* Form card */
.card {
  width: 100%;
  padding: 20% 1.25rem 1.75rem;           /* room for the title inside the arch */
  border-radius: 999px 999px 0 0;         /* a semicircular top, the same radius as the arch behind it */
  background: rgba(29, 29, 29, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--marfil-24);
  text-align: left;
}
@media (min-width: 600px) { .card { padding: 20% 2rem 2.25rem; } }
@media (min-width: 900px) { .card { padding-top: 2rem; border-radius: 0; } }
.doc .card { padding-top: 1.5rem; border-radius: 0; }
@media (min-width: 600px) { .doc .card { padding-top: 2rem; } }

.card__title {
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.card__lead { margin: 0 0 1.5rem; text-align: center; color: var(--marfil-80); white-space: nowrap; font-size: clamp(0.8rem, 3.55vw, 1rem); }

.form { display: flex; flex-direction: column; gap: 1.1rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.field .muted { color: var(--marfil-80); font-weight: 400; letter-spacing: 0.1em; }

.field input[type="email"],
.field input[type="text"] {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--marfil);
  background: rgba(241, 233, 218, 0.06);
  border: 1px solid var(--marfil-24);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder { color: var(--marfil-80); }
.field input[type="email"]:focus,
.field input[type="text"]:focus {
  outline: none;
  border-color: var(--marfil);
}
.field input[type="checkbox"]:focus-visible,
.button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--marfil);
  outline-offset: 3px;
}
.field input[aria-invalid="true"] { border-color: var(--naranja); }

.field--check {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  column-gap: 0.75rem;
  align-items: start;
  margin-top: 0.25rem;
}
.field--check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--burdeos);
}
.field--check label {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--marfil);
}
.field--check .field__error { grid-column: 2; }

.field__error {
  margin: 0;
  font-size: 0.85rem;
  color: var(--naranja);
}

.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.button {
  margin-top: 0.5rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marfil);
  background: var(--burdeos);
  border: 1px solid var(--burdeos);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.button:hover { background: var(--marfil); color: var(--burdeos); border-color: var(--marfil); }
.button:disabled { opacity: 0.55; cursor: default; background: var(--burdeos); color: var(--marfil); }

.status { margin: 0; min-height: 1.5rem; font-size: 0.95rem; color: var(--marfil); }
.status:empty { display: none; }
.status--error { color: var(--naranja); }
.status a { color: inherit; }

.form--done .field,
.form--done .button { display: none; }
.form--done .status {
  font-size: 1.05rem;
  text-align: center;
}
.form--done .status strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}

/* Facts */
.facts {
  width: 100%;
  padding: 1.75rem 1rem;
  background: rgba(29, 29, 29, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--marfil-24);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.facts p { margin: 0; }
.facts__chapter {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 0.6rem !important;
}
.facts__date,
.facts__venue {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.facts__time {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--manteca);
  margin-bottom: 0.75rem !important;
}
.facts__address { color: var(--marfil); }
.facts__label {
  margin-top: 0.9rem !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marfil-80);
}
.facts__lineup {
  margin-top: 0.2rem !important;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 4vw, 1.2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.facts__soon {
  margin-top: 0.9rem !important;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marfil-80);
}

/* Footer */
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding-top: 0.5rem;
}
.footer__venue { display: block; width: 150px; opacity: 0.9; }
.footer__venue img { display: block; width: 100%; height: auto; }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.5rem;
  font-size: 0.9rem;
}
.footer__links a,
.card a { color: var(--marfil); text-decoration-color: var(--marfil-70); text-underline-offset: 0.2em; }
.footer__links a:hover,
.card a:hover { text-decoration-color: var(--naranja); }
.footer__legal {
  margin: 0;
  max-width: 24rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--marfil-80);
}

/* Soft entrance; off when the visitor asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .page { animation: rise 900ms ease-out both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* Inner pages (privacy, thanks) */
.doc { text-align: left; align-items: stretch; }
.doc .wordmark { width: min(48vw, 220px); align-self: center; }
.doc h1, .doc h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.doc h1 { font-size: 1.6rem; margin: 0 0 0.5rem; }
.doc h2 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
.doc p, .doc li { font-size: 0.98rem; line-height: 1.6; }
.doc a { color: var(--marfil); }
.doc .placeholder { color: var(--manteca); }
.doc .lang { border-top: 1px solid var(--marfil-24); padding-top: 1rem; margin-top: 2rem; }
.doc .back { align-self: center; }
.thanks { text-align: center; align-items: center; }
.thanks .card__lead { white-space: normal; font-size: 1rem; }