/* Renaissance Rodeo — the one stylesheet, shared by /, /es/ and /404.html.
   Two inks on cream, one 36rem column of copy, two media queries (a phone
   tweak at ≤519px; from 64rem up the poster gets a sticky column beside the
   copy), and the black opening sequence (the "intro" block; /intro.js drives
   it, only on / and /es/). Bevan for the date and headings, Cormorant Garamond
   for everything else. Font files live in /fonts/ and are referenced ONLY here
   (plus the two preloads in each page); when a font file is replaced, bump its
   ?v= query here and in the preloads. */

@font-face {
  font-family: 'Bevan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bevan-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --cream: #f7edd8;
  --paper: #fffdf8;
  --ink: #0e1d2d;
  --muted: #3f4a58;
  --red: #c01102;
  --red-deep: #a30e02;
  --font-display: 'Bevan', Rockwell, 'Roboto Slab', Georgia, serif;
  --font-body: 'Cormorant Garamond', Cormorant, 'EB Garamond', Garamond, Georgia, serif;
  --text-body: clamp(1.25rem, 1.15rem + .4vw, 1.4375rem);
  --text-small: 1.125rem;
  --text-date: clamp(1.125rem, .95rem + 1vw, 1.5rem);
  --text-h2: clamp(1.625rem, 1.25rem + 1.8vw, 2.25rem);
  --text-button: 1.1875rem;
  --lh-body: 1.45;
  --gap-section: clamp(2.5rem, 7vw, 4.5rem);
  --control: 3rem;
  --border: 1.5px;
  --radius: 0;
  --ring: 3px solid var(--red);
  --ring-offset: 2px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; }
html, body {
  background: var(--cream);
  color: var(--ink);
  font: var(--text-body) / var(--lh-body) var(--font-body);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p { margin: 0; }
strong { font-weight: 600; }
a {
  color: var(--ink);
  text-underline-offset: .15em;
  text-decoration-thickness: .08em;
}
:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
#signup-ok:focus, main:focus { outline: 0; }
/* The UA sheet's display:none for [hidden] loses to any display: set by a
   class; this keeps hidden meaning hidden whatever else matches. */
[hidden] { display: none !important; }

.sr-only, .skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap { max-width: 36rem; margin-inline: auto; padding-inline: 1rem; }

/* ---------- skip link (sr-only until focused, then an ink pill) ---------- */
.skip:focus {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1;
  padding: .75rem 1.125rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font: 600 var(--text-small) / 1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}

/* ---------- header ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: .75rem;
}
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.mark img { width: 36px; height: 36px; }
.lang {
  display: flex;
  align-items: center;
  font: 600 1.0625rem / 1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lang a, .lang [aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.lang [aria-current] { color: var(--muted); }
.lang .sep { color: var(--muted); }

/* ---------- hero ---------- */
main { padding-top: clamp(.5rem, 3vw, 1.5rem); }
.hero h1 img { width: 100%; }
/* Phone poster: a thumbnail floated right of the four hero lines, so it costs no height.
   The desktop column (.poster) is display:none here and takes over from 64rem up. */
.poster-thumb {
  float: right;
  width: 30%;
  max-width: 8.5rem;
  margin: .25rem 0 .75rem 1.25rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / .15), 0 8px 24px rgb(0 0 0 / .18);
}
.poster-thumb img { width: 100%; }
.hero::after { content: ""; display: block; clear: both; }
.poster { display: none; }
.when {
  margin-top: 1.25rem;
  font: 400 var(--text-date) / 1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.after { margin-top: .75rem; }
.note { margin-top: .25rem; color: var(--muted); }


/* ---------- sections ---------- */
.copy > section + section { margin-top: var(--gap-section); }
.about p { margin-block: 1.1em; overflow-wrap: break-word; }
.about p:first-of-type { margin-top: 0; }
.about p:last-of-type { margin-bottom: 0; }

/* ---------- signup ---------- */
#signup { scroll-margin-top: 1.5rem; }
#signup h2 { font: 400 var(--text-h2) / 1.15 var(--font-display); }
#signup h2 + p { margin-top: .75rem; }
.signup { margin-top: 1.25rem; }
.signup label { display: block; margin-bottom: .5rem; font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; }
.signup input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  height: var(--control);
  padding: 0 .875rem;
  background: var(--paper);
  color: var(--ink);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  font: 400 max(1.25rem, 16px) / 1 var(--font-body);
}
.signup input::placeholder { color: var(--muted); opacity: 1; }
.signup button {
  flex: 0 0 auto;
  height: var(--control);
  padding: 0 1.5rem;
  background: var(--red);
  color: var(--cream);
  border: var(--border) solid var(--red);
  border-radius: var(--radius);
  font: 600 var(--text-button) / 1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}
.signup button:hover { background: var(--red-deep); border-color: var(--red-deep); }
.signup button:disabled { opacity: .6; cursor: default; }
/* Honeypot: off-screen, never display:none (bots skip fields they can see are
   hidden; humans and screen readers never reach it — tabindex=-1, aria-hidden). */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.cf-turnstile { margin-top: .5rem; }
.msg {
  min-height: 1.5em;
  margin-top: .5rem;
  color: var(--red);
  font-size: var(--text-small);
}
.success { margin-top: 1.25rem; font-weight: 600; }
.fine { margin-top: .75rem; color: var(--muted); font-size: var(--text-small); }

/* ---------- partners ---------- */
/* Three marks in one row at every width. Each link is a two-row grid: a fixed-height logo
   slot (the mark fits inside it, centred, so three different aspect ratios sit on one line)
   and the caption. On phones the slot shrinks and the captions go screen-reader-only. */
.partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.partners a {
  display: grid;
  grid-template-rows: 8rem auto;
  justify-items: center;
  align-items: center;
  text-decoration: none;
}
.partners img { max-height: 8rem; max-width: 100%; width: auto; height: auto; }
.partners .cap {
  display: block;
  align-self: start;
  margin-top: .75rem;
  font-size: var(--text-small);
  line-height: 1.45;
}
.partners a:hover .cap { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- poster viewer (<dialog>) ---------- */
/* Scoped to [open]: a bare .lightbox{display:grid} would undo the UA's display:none on the
   closed dialog and put the poster into the page flow. */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(14 29 45 / .92); }
.lightbox picture { display: contents; }
.lightbox img { max-width: 100vw; max-height: 100dvh; width: auto; height: auto; }
.lightbox-close {
  position: fixed;
  top: .75rem;
  right: .75rem;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--ink);
  color: var(--cream);
  border: var(--border) solid var(--cream);
  border-radius: 999px;
  font: 600 1.125rem / 1 var(--font-body);
  cursor: pointer;
}
.lightbox-close:hover { background: var(--red); border-color: var(--red); }
body:has(dialog[open]) { overflow: hidden; }

/* ---------- intro: the black opening sequence ---------- */
/* /intro.js, loaded synchronously in <head>, puts .intro on <html> before first paint when the
   sequence should play (motion allowed, not yet seen this session, no #fragment), so the page
   never flashes cream first. Without that class — no JS, reduced motion, second page of the
   session — the overlay is display:none and nothing below applies. The frames are cloned from
   the About copy and the partner marks at runtime; only the closing card is static markup. */
html:not(.has-intro) .intro:not(.is-leaving) { display: none; }
html.has-intro { background: #000; overflow: hidden; }
html.has-intro body > :not(.intro) { opacity: 0; }
.intro {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #000;
  color: var(--cream);
  text-align: center;
  touch-action: none;   /* swipes reach intro.js as pointer events instead of being cancelled as pans */
  user-select: none;    /* and a drag across the text is a swipe, not a selection */
}
.intro img { -webkit-user-drag: none; }   /* a drag that starts on a mark is a swipe, not an image drag */
.intro.is-leaving { opacity: 0; }
/* Every frame sits in the same grid cell; only .is-on is visible (and reachable). */
.intro-stage { display: grid; place-items: center; grid-area: 1 / 1; width: 100%; }
.intro-slide {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.intro-slide.is-on { opacity: 1; visibility: visible; }
.intro-text {
  max-width: 34rem;
  font: 400 clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem) / 1.4 var(--font-body);
  text-wrap: balance;
}
.intro-marks {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 6vw, 4rem);
}
/* The marks and the bull are the ink-coloured site assets; inverting #0e1d2d gives #f1e2d2,
   the cream, so the intro ships no second copy of any image. */
.intro-marks img, .intro-cta img { filter: invert(1); }
.intro-marks img { max-height: 6rem; max-width: 26vw; width: auto; height: auto; }
.intro-cta { gap: 1.5rem; }
.intro-cta img { width: min(60vw, 16rem); }
.intro-join {
  display: inline-flex;
  align-items: center;
  height: var(--control);
  padding: 0 1.5rem;
  background: var(--red);
  color: var(--cream);
  border: var(--border) solid var(--red);
  border-radius: var(--radius);
  font: 600 var(--text-button) / 1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
.intro-join:hover { background: var(--red-deep); border-color: var(--red-deep); }
.intro-enter {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .5rem;
  color: var(--cream);
  font-size: var(--text-small);
}
.intro-skip {
  position: fixed;
  top: .75rem;
  right: .75rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 1rem;
  background: transparent;
  color: var(--cream);
  border: var(--border) solid rgb(247 237 216 / .6);
  border-radius: 999px;
  font: 600 var(--text-small) / 1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}
.intro-skip:hover { border-color: var(--cream); }
.intro :focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
/* Replay, pinned bottom right; hidden until intro.js unhides it. The footer's extra bottom
   padding keeps its last line clear of the pill on phones. */
.intro-replay {
  position: fixed;
  right: .75rem;
  bottom: .75rem;
  z-index: 1;
  min-height: 44px;
  padding: 0 1rem;
  background: var(--ink);
  color: var(--cream);
  border: var(--border) solid var(--ink);
  border-radius: 999px;
  font: 600 var(--text-small) / 1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / .15), 0 6px 18px rgb(0 0 0 / .18);
}
.intro-replay:hover { background: var(--red); border-color: var(--red); }

/* ---------- footer ---------- */
footer { padding-block: var(--gap-section) 4.5rem; color: var(--muted); font-size: var(--text-small); }
footer a { color: inherit; }

/* ---------- 404 ---------- */
.notfound { padding-block: var(--gap-section); }
.notfound .code { font: 400 clamp(4rem, 12vw, 6rem) / 1 var(--font-display); }
.notfound h1 { margin-top: .75rem; font-size: var(--text-h2); font-weight: 400; }
.notfound p + p { margin-top: 1.25rem; }

/* ---------- phones ---------- */
@media (max-width: 519px) {
  .signup button { flex-basis: 100%; }
  .intro-marks img { max-height: 4.5rem; }
  .partners { gap: 1.5rem 1rem; }
  .partners a { grid-template-rows: 5.5rem auto; }
  .partners img { max-height: 5.5rem; }
  /* Three captions in ~6rem columns would wrap into a wall of text: the marks stand alone,
     the names stay readable to assistive tech (Bitcoin Histórico's "day before" is in the hero). */
  .partners .cap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- desktop: the poster gets a sticky column beside the copy ---------- */
@media (min-width: 64rem) {
  .wrap { max-width: 64rem; }
  main {
    display: grid;
    grid-template-columns: minmax(0, 36rem) 22rem;
    column-gap: 4rem;
    justify-content: space-between;
  }
  /* Everything but the poster stays in the copy track — the 404 page shares this sheet and
     has no .copy wrapper, so auto-placement would otherwise spill its heading into track 2. */
  main > :not(.poster) { grid-column: 1; }
  .poster-thumb { display: none; }
  .poster {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 1.5rem;
    margin: 0;
  }
  .poster a { display: block; }
  /* Both max-constraints together keep the 9:16 ratio: on a short laptop viewport the height
     cap wins and the width follows, on a tall one the column width wins. */
  .poster img {
    max-width: 100%;
    max-height: calc(100vh - 3rem);
    width: auto;
    height: auto;
    box-shadow: 0 1px 2px rgb(0 0 0 / .15), 0 14px 36px rgb(0 0 0 / .2);
  }
}

/* ---------- motion, only where the visitor has not asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .signup button { transition: background-color .15s ease, border-color .15s ease, opacity .15s ease; }
  /* Intro fades. The durations are mirrored in intro.js (FADE_IN / FADE_OUT / LEAVE); the
     page's own fade-up runs as html.has-intro comes off. */
  .intro-slide { transition: opacity .6s ease, visibility 0s linear .6s; }
  .intro-slide.is-on { transition: opacity .9s ease, visibility 0s; }
  .intro-slide.is-cut.is-on { transition-duration: .25s; }
  .intro { transition: opacity .8s ease; }
  body > :not(.intro) { transition: opacity .6s ease; }
}