/* 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 --scale shrinks the whole page to .75). 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. The tree is on ?v=2 since 2026-10-14. */
@font-face {
font-family: 'Bevan';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/bevan-latin-400-normal.woff2?v=2) 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?v=2) 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?v=2) 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;
/* Multiplies the root size, and with it every rem in this sheet. See "base". */
--scale: 1;
}
/* Desktop reads at what 75% browser zoom used to show. Phones and tablets keep 1. */
@media (min-width: 64rem) {
:root { --scale: .75; }
}
/* ---------- 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);
}
/* A warm cream-to-sand wash behind the whole page, kept in the darker part of the range so
it never reads as stark white (html keeps the flat --cream as the fallback). */
body {
min-height: 100vh;
background: linear-gradient(180deg, var(--cream) 0%, #ecdec2 55%, #e2cfa9 100%);
background-attachment: fixed;
}
/* The root size is the body size (20–23px), not 16px, so 1rem here is 20–23px and every rem
in this sheet (type, column widths, gaps, the poster) comes out about 1.3× its 16px-based
value. At 100% zoom on a desktop that read too large. --scale shrinks the root, so all of
it shrinks together; on the root itself rem means the browser's 16px, so this cannot feed
back into itself. px sizes (icons, 44px tap targets, borders, the focus ring) stay put. */
html { font-size: calc(var(--text-body) * var(--scale)); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, 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 ---------- */
/* One bar on every page. Desktop: [mark] TEAM TICKETS SPONSORS [X][Instagram] ……… EN | ES.
Below 64rem the links and icons do not fit beside the switch (Spanish alone is ~335px), so the
bar is [mark][menu] ……… EN | ES and the menu button opens them in a panel under the bar
(see "header below 64rem"). The mark (small bull-and-rider, leads home) is on the subpages
only; / and /es/ open with the hero logo instead. */
.top {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: .25rem;
padding-block: .75rem;
}
.mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin-inline: -4px .5rem; /* the 36px glyph, not its 44px tap box, lines up with the text */
}
.mark img { width: 36px; height: 36px; }
.lang {
display: flex;
align-items: center;
margin-inline-start: auto;
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); }
/* nav.site holds the page links and the X / Instagram icons. It is a popover (the HTML
attribute; no script): the browser hides it until the menu button opens it, which is what
phones need. These rules undo the browser's popover box so that, wherever it is shown in the
bar (desktop, or a browser without popovers), it is a plain row; display is left alone here
so the browser can still hide it. */
.site[popover] {
position: static;
inset: auto;
width: auto;
height: auto;
margin: 0 .5rem 0 0;
padding: 0;
border: 0;
overflow: visible;
color: inherit;
background: none;
}
/* The page links, set like the language switch. Plain ink, underlined on hover; the page you
are on is underlined (aria-current). The same list, in the same order, is in every page of a
language and again in the footer (tested). */
.site-links {
display: flex;
flex-wrap: wrap;
column-gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
font: 600 1.0625rem / 1 var(--font-body);
text-transform: uppercase;
letter-spacing: .06em;
}
.site a {
display: inline-flex;
align-items: center;
min-height: 44px;
text-decoration: none;
}
.site a:hover { color: var(--red); }
.site a[aria-current="page"], .foot-nav a[aria-current="page"] {
text-decoration: underline;
text-decoration-thickness: .08em;
text-underline-offset: .3em;
}
/* X and Instagram: inline-SVG icons in currentColor after the page links, so they take no row
of their own and no image request (nothing new for img-src or the asset pipeline). */
.social { display: flex; margin: 0; padding: 0; list-style: none; }
.social a, .social button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
color: var(--ink);
}
.social button { padding: 0; background: none; border: 0; font: inherit; cursor: pointer; }
.social a:hover, .social button:hover { color: var(--red); }
.social svg { display: block; width: 20px; height: 20px; }
/* ---------- hero ---------- */
main { padding-top: clamp(.5rem, 3vw, 1.5rem); }
.hero h1 img { width: 100%; }
/* Phone and tablet poster: a thumbnail beside the activity list (see "activities"). The desktop
column (.poster) is display:none here and takes over from 64rem up. */
.poster-thumb { display: block; }
.poster-thumb img { width: 100%; box-shadow: 0 6px 18px rgb(14 29 45 / .18); }
.poster { display: none; }
/* Date and place: a lockup under the logo, two centred lines of Bevan sized to the column (cqi,
so it scales with the logo above it at every width; a browser without container units keeps
--text-date). At 5.8cqi the longest line, the Spanish date, fills about 95% of the column. */
.hero { container-type: inline-size; }
.when {
margin-top: .5rem;
font: 400 var(--text-date) / 1.25 var(--font-display);
font-size: 5.8cqi;
text-align: center;
text-transform: uppercase;
letter-spacing: .05em;
}
.when-date, .when-place { display: block; }
.after { margin-top: 1rem; text-align: center; }
/* Buy tickets, straight to the shop: centred under the date lockup, so it is on the first
screen of every phone. "The day after…" follows it, centred too. */
.hero-buy { margin-top: 1.25rem; text-align: center; }
.hero-buy .buy { padding-inline: 2.25rem; }
/* ---------- 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; }
/* ---------- activities ---------- */
/* The day's activities as a programme: uppercase like the nav, a small red diamond for each (a
CSS shape: the font subset has no ✦). Words are written in sentence case and uppercased here,
so screen readers read words, not letters. Home, phones and tablets: [poster | list], the list
one column so its twelve lines stand about as tall as the thumbnail. Desktop (no thumbnail)
and the about page: columns (see the desktop block). */
.activities {
margin: 0;
padding: 0;
list-style: none;
font: 600 1rem / 1.25 var(--font-body);
text-transform: uppercase;
letter-spacing: .06em;
}
.activities li { position: relative; padding: .2em 0 .2em 1.1em; break-inside: avoid; }
.activities li::before {
content: "";
position: absolute;
left: .1em;
top: .72em;
width: .38em;
height: .38em;
background: var(--red);
transform: rotate(45deg);
}
.lineup {
display: grid;
grid-template-columns: min(42%, 11rem) minmax(0, 1fr);
align-items: center;
gap: 1.5rem;
margin-top: 1.5rem;
}
.about-page .activities { margin-top: 1.5rem; columns: 2; column-gap: 1.5rem; }
/* "Learn more about Renaissance Rodeo": a plain link in the copy, its arrow drawn inline (the
font subset has no U+2192) and nudged right on hover. */
.about .more { margin-top: .5rem; }
.more a { font-weight: 600; text-underline-offset: .2em; }
.more svg { display: inline-block; width: .8em; height: .8em; margin-inline-start: .3em; vertical-align: -.05em; }
/* ---------- 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: 6px;
font: 400 max(1.25rem, 16px) / 1 var(--font-body);
}
.signup input::placeholder { color: var(--muted); opacity: 1; }
/* Full width under the input at every width. Side by side only fitted at some widths (rem
follows the fluid body size, and the poster column narrows the copy from 64rem up), so the
button kept wrapping onto a line of its own at its natural width; one layout everywhere. */
.signup button {
flex: 1 0 100%;
height: var(--control);
padding: 0 1.5rem;
background: var(--red);
color: var(--cream);
border: var(--border) solid var(--red);
border-radius: 6px;
font: 600 var(--text-button) / 1 var(--font-body);
text-transform: uppercase;
letter-spacing: .06em;
cursor: pointer;
box-shadow: 0 2px 6px rgb(163 14 2 / .28);
}
.signup button:hover { background: var(--red-deep); border-color: var(--red-deep); transform: translateY(-2px); box-shadow: 0 6px 16px rgb(163 14 2 / .32); }
.signup button:active { transform: translateY(0); box-shadow: 0 2px 6px rgb(163 14 2 / .28); }
.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);
}
/* Empty, the error line takes no room (the share bar sits close under the form); a message
opens it, which moves only what is below the form, never the input or the button. */
.msg:empty { min-height: 0; margin-top: 0; }
.success { margin-top: 1.25rem; font-weight: 600; }
/* Inside the form, straight under the input row: the reassurance sits by the field it is about. */
.fine { margin-top: .5rem; color: var(--muted); font-size: var(--text-small); }
/* ---------- share / follow ---------- */
/* The foot of the copy, like the end of an article: two thin rows of the header's icons
(.social), each led by a small label. A two-column grid so both icon rows start on the same
line whatever the label's length ("Compartir" vs "Seguir"); the rows are display:contents
so their label and list land in the grid's columns. On phones each label sits above its row. */
/* Closer to the form than the standard section gap: it belongs to the signup's ending. */
.copy > section.share { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.share { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .75rem; }
.share-row { display: contents; }
.share .social { flex-wrap: wrap; }
.share-label {
color: var(--muted);
font: 600 var(--text-small) / 1 var(--font-body);
text-transform: uppercase;
letter-spacing: .06em;
}
/* Empty until "Copy link" is used, so it takes no room; the text clears itself after 3 s. */
.share-status { grid-column: 2; 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;
}
/* The "day before" tagline under Bitcoin Histórico's name: its own line, set in small
caps with letter-spacing so it reads as a label rather than body copy. */
.partners .tagline {
display: block;
margin-top: .2em;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
}
/* Hide the
directly after the tagline: the tagline is already a block, so that break
would only add a blank line before the date. Scoped to that one
so every other
caption break still starts a new line — BitPoker SV's name above its description. */
.partners .cap .tagline + br { display: none; }
.partners a:hover .cap { text-decoration: underline; text-underline-offset: .15em; }
/* The second tier: under a hairline, two smaller marks side by side, no label (Cameron,
2026-10-24). Each mark is capped by height and by its cell, so the wide BitDriver wordmark and
the squarer Bitcoin Hardware Store lockup carry about the same weight. */
.partners.tier-2 {
grid-template-columns: repeat(2, minmax(0, 14rem));
justify-content: center;
gap: 1.5rem 2.5rem;
margin-top: 2.25rem;
padding-top: 2.25rem;
border-top: 1px solid rgb(14 29 45 / .18);
}
.partners.tier-2 a { grid-template-rows: 4.5rem auto; }
.partners.tier-2 img { max-height: 4.5rem; max-width: 92%; }
/* ---------- poster viewer (