/* ESRA site styles: shared design system. Home-only styles live in home.css. */
:root {
  --ink: #07090C;
  --ink-2: #0D1117;
  --line: #212934;
  --paper: #F2F5F7;
  --mute: #8A95A3;
  --accent: #C60203;
  --accent-deep: #8E0102;
  --accent-text: #F0484A;
  --display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --pad: clamp(1.25rem, 5vw, 4rem);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--paper); font: 400 1rem/1.6 var(--body); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
.wrap { max-width: 78rem; margin-inline: auto; padding-inline: var(--pad); }

/* ── type ── */
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.015em; }
.outline { color: transparent; -webkit-text-stroke: 2px var(--accent); }
.kicker { display: flex; align-items: center; gap: .7rem; font: 700 .8rem/1 var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--accent-text); }
.chk { width: 16px; height: 16px; flex: none; background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0); outline: 1px solid var(--line); }
.sec-title { font-size: clamp(2.8rem, 7vw, 5.5rem); margin-top: 1rem; }
.lede { color: #B9C2CE; max-width: 34rem; }
.prose p { color: #B9C2CE; margin-top: 1.2rem; max-width: 40rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── buttons (parallelogram) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 2.1rem; font: 700 1rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: background .2s, color .2s, transform .2s; cursor: pointer; border: 0; }
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--paper); color: var(--ink); transform: translateX(3px); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-ghost:hover { background: var(--accent); color: #fff; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--paper); color: var(--ink); }
.btn-off { background: #1b222c; color: var(--mute); cursor: not-allowed; }
.btn-sm { padding: .8rem 1.6rem; font-size: .9rem; }
.btn-block { width: 100%; }
.btn:focus-visible, .links a:focus-visible, .drawer a:focus-visible, .burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn:disabled { opacity: .6; cursor: wait; }

/* ── header ── */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s; }
.site-head.stuck { background: rgba(7, 9, 12, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem var(--pad); font: 700 .78rem/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; background: var(--accent); color: #fff; }
.topbar a { text-decoration: underline; text-underline-offset: 3px; }
.topbar .hide-sm { display: none; }
.navrow { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 4.5rem; padding-inline: var(--pad); }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand img { height: 2.4rem; width: auto; }
.brand span { font-size: 1.9rem; padding-top: .15rem; }
.links { display: none; align-items: center; gap: 2rem; }
.links a:not(.btn) { font: 700 .95rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #C9D1DB; position: relative; padding-block: .4rem; }
.links a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width .25s; }
.links a:not(.btn):hover { color: var(--paper); }
.links a:not(.btn):hover::after, .links a.active::after { width: 100%; }
.links a.active { color: var(--paper); }
.burger { width: 2.8rem; height: 2.8rem; background: none; border: 1px solid var(--line); color: var(--paper); cursor: pointer; display: grid; place-items: center; }
.burger i { display: block; width: 1.2rem; height: 2px; background: currentColor; box-shadow: 0 6px currentColor; margin-top: -6px; }
.drawer { position: fixed; inset: 0; z-index: 45; background: var(--ink); padding: 9rem var(--pad) 3rem; display: flex; flex-direction: column; gap: .4rem; overflow-y: auto; transform: translateY(-100%); visibility: hidden; transition: transform .45s cubic-bezier(.7, 0, .2, 1), visibility 0s .45s; }
.drawer.open { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.drawer a:not(.btn) { font-size: clamp(2.6rem, 11vw, 4.5rem); }
.drawer a:not(.btn):hover, .drawer a.active { color: var(--accent); }
.drawer .btn { margin-top: 1.5rem; align-self: flex-start; }
@media (min-width: 640px) { .topbar .hide-sm { display: inline; } }
@media (min-width: 1000px) { .links { display: flex; } .burger { display: none; } }

/* ── sections ── */
section { position: relative; }
.pad { padding-block: clamp(5rem, 11vw, 9rem); }
.alt { background: var(--ink-2); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 3.5rem; }
.cols-2 { display: grid; gap: 1.5rem 3rem; }
.cols-2 p { color: #B9C2CE; }
@media (min-width: 800px) { .cols-2 { grid-template-columns: 1fr 1fr; } }

/* ── inner page hero ── */
.page-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(26rem, 60vh, 38rem); padding: 11rem 0 4.5rem; overflow: hidden; isolation: isolate; }
.page-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,9,12,.92) 8%, rgba(7,9,12,.7) 55%, rgba(7,9,12,.3)), linear-gradient(0deg, var(--ink) 0, transparent 35%), linear-gradient(180deg, rgba(7,9,12,.8), transparent 30%); }
.page-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 14px; background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0) 0 0 / 28px 28px; }
.page-hero h1 { font-size: clamp(3.4rem, 9vw, 8rem); margin-block: 1.1rem 1.3rem; }
.page-hero > .wrap { width: 100%; }
.page-hero .outline { -webkit-text-stroke: 2.5px var(--accent-text); }
.page-hero .lede { font-size: 1.1rem; max-width: 38rem; color: #C3CBD6; }

/* ── tickets ── */
.ticket { display: grid; grid-template-columns: 1fr; background: var(--paper); color: var(--ink); position: relative; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.ticket-main { padding: clamp(1.5rem, 4vw, 3rem); position: relative; }
.ticket-main::before { content: ''; position: absolute; inset: 0 0 auto; height: 14px; background: conic-gradient(var(--ink) 25%, var(--paper) 0 50%, var(--ink) 0 75%, var(--paper) 0) 0 0 / 28px 28px; }
.ticket-main > .tag { margin-top: 1.2rem; font: 700 .8rem/1 var(--display); letter-spacing: .28em; text-transform: uppercase; color: #4d5967; }
.ticket h3 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); margin-block: .8rem 1.6rem; }
.ticket dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.2rem 2rem; }
.ticket dt { font: 700 .72rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: #5b6673; margin-bottom: .3rem; }
.ticket dd { font-weight: 600; line-height: 1.35; }
.ticket .desc { margin-top: 1.8rem; color: #2a323d; max-width: 44rem; }
.ticket-stub { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--accent); display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; border-top: 3px dashed var(--ink); }
.ticket-stub::before, .ticket-stub::after { content: ''; position: absolute; top: -17px; width: 30px; height: 30px; border-radius: 50%; background: var(--ink-2); }
.ticket-stub::before { left: -15px; }
.ticket-stub::after { right: -15px; }
.stub-label { font: 800 1.1rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.stub-actions { display: flex; flex-direction: column; gap: .8rem; }
.barcode { height: 3.2rem; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 10px, var(--ink) 10px 14px, transparent 14px 16px, var(--ink) 16px 17px, transparent 17px 21px); }
@media (min-width: 900px) {
  .ticket { grid-template-columns: 1fr 19rem; }
  .ticket-stub { border-top: 0; border-left: 3px dashed var(--ink); }
  .ticket-stub::before, .ticket-stub::after { left: -17px; right: auto; }
  .ticket-stub::before { top: -15px; }
  .ticket-stub::after { top: auto; bottom: -15px; }
}

/* ── programme rows ── */
.programs { margin-top: 4rem; border-top: 1px solid var(--line); }
.program { display: grid; grid-template-columns: 1fr; gap: .8rem 2rem; align-items: center; padding: 1.8rem 0 1.8rem 1.4rem; border-bottom: 1px solid var(--line); position: relative; transition: background .25s, padding .25s; }
.program::before, .row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .25s; }
.program:hover, .row:hover { background: rgba(198, 2, 3, .14); padding-left: 2rem; }
.program:hover::before, .row:hover::before { transform: scaleY(1); }
.program .when b { display: block; font: 800 clamp(2rem, 4vw, 3rem)/1 var(--display); text-transform: uppercase; color: var(--accent); }
.program .when span { font: 700 .8rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.program h3 { font: 800 clamp(1.6rem, 3vw, 2.2rem)/1 var(--display); text-transform: uppercase; margin-bottom: .6rem; }
.program p { color: var(--mute); max-width: 40rem; }
.program .meta { margin-top: .8rem; font-size: .95rem; color: #6d7887; }
.program .arrow { font: 800 .95rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--paper); display: inline-flex; gap: .5rem; align-items: center; }
.program:hover .arrow { color: var(--accent); }
@media (min-width: 900px) { .program { grid-template-columns: 13rem 1fr auto; padding-right: 1.4rem; } }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.chip { font: 700 .78rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; padding: .5rem .8rem; border: 1px solid #3a4452; color: #C9D1DB; }

/* ── link rows (results, past events) ── */
.rows { border-top: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; padding: 1.5rem 0 1.5rem 1.4rem; border-bottom: 1px solid var(--line); position: relative; transition: background .25s, padding .25s; }
.row small { display: block; margin-bottom: .45rem; font: 700 .8rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text); }
.row h3 { font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.05 var(--display); text-transform: uppercase; }
.row p { margin-top: .5rem; color: var(--mute); max-width: 38rem; }
.row .arrow { font: 800 .95rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--paper); white-space: nowrap; }
.row:hover .arrow { color: var(--accent); }
.group-head { margin-top: 5rem; }
.group-head + .rows, .group-head + .rounds { margin-top: 0; }

/* ── rounds ── */
.rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.round { background: var(--ink-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.8rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 1.6rem; min-height: 15rem; justify-content: space-between; transition: background .25s; }
.alt .round { background: var(--ink-2); }
.round:hover { background: var(--accent); color: #fff; }
.round b { font: 800 clamp(4.5rem, 9vw, 7rem)/.8 var(--display); color: transparent; -webkit-text-stroke: 2px var(--accent); transition: -webkit-text-stroke-color .25s; }
.round:hover b { -webkit-text-stroke-color: #fff; }
.round h3 { font: 800 1.7rem/1 var(--display); text-transform: uppercase; }
.round span { font: 700 .8rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.round:hover span { color: #fff; }

/* ── about ── */
.about-grid { display: grid; gap: 3rem; align-items: center; }
.about-art { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 30rem; --cut: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
.about-art::before { content: ''; position: absolute; inset: 0; background: var(--accent); clip-path: var(--cut); transform: translate(-16px, 16px); }
.about-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; clip-path: var(--cut); }
.facts { display: flex; flex-wrap: wrap; margin-top: 2.2rem; border: 1px solid var(--line); }
.facts div { flex: 1 1 8rem; padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.facts div:last-child { border-right: 0; }
.facts small { display: block; font: 700 .7rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .35rem; }
.facts strong { font: 800 1.2rem/1.1 var(--display); text-transform: uppercase; }
.facts a:hover { color: var(--accent-text); }
@media (min-width: 900px) { .about-grid { grid-template-columns: 5fr 6fr; gap: 5rem; } }

.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.goal { background: var(--ink); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.8rem 1.6rem 2rem; }
.goal::before { content: ''; display: block; width: 2rem; height: 4px; margin-bottom: 1.4rem; background: var(--accent); }
.goal h3 { font: 800 1.6rem/1 var(--display); text-transform: uppercase; margin-bottom: .7rem; }
.goal p { color: var(--mute); font-size: .95rem; }

.crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.person { background: var(--ink-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.8rem 1.5rem 1.6rem; border-top: 4px solid var(--accent); min-height: 10rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.person small { font: 700 .78rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text); }
.person h3 { font: 800 1.9rem/1 var(--display); text-transform: uppercase; }

/* ── passes + forms ── */
.passes { display: grid; gap: 1.5rem; position: relative; }
.pass { background: var(--ink); color: var(--paper); padding: 2.2rem; position: relative; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); display: flex; flex-direction: column; gap: 1.2rem; min-height: 21rem; }
.pass::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--accent); }
.pass small { font: 700 .78rem/1 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--accent-text); }
.pass h3 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.pass p { color: #aab4c0; flex: 1; }
.pass.dim { background: #11161d; }
@media (min-width: 800px) { .passes { grid-template-columns: 1fr 1fr; } }

.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.field { display: block; font: 700 .78rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.input { display: block; width: 100%; margin-top: .6rem; padding: .95rem 1rem; background: #0a0e13; border: 1px solid var(--line); border-bottom: 2px solid #3a4452; border-radius: 0; color: var(--paper); font: 400 1rem/1.4 var(--body); letter-spacing: 0; text-transform: none; outline: 0; transition: border-color .2s; }
.input:focus { border-bottom-color: var(--accent); }
.input:disabled { opacity: .55; cursor: not-allowed; }
textarea.input { resize: vertical; }
.status { min-height: 1.4rem; font-size: .95rem; color: var(--mute); }
.panel { background: var(--ink-2); border: 1px solid var(--line); border-top: 4px solid var(--accent); padding: clamp(1.5rem, 4vw, 2.2rem); }
.panel > small { display: block; margin-bottom: 1.4rem; font: 700 .78rem/1 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--accent-text); }
.note { padding: .9rem 1rem; border: 1px dashed #3a4452; text-align: center; font: 700 .78rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #6d7887; }
.split { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 5rem; } }

/* ── sponsors ── */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 3.5rem; }
.sponsor { background: var(--ink-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 7.5rem; display: grid; place-items: center; padding: 1.2rem; text-align: center; font: 800 1.35rem/1.1 var(--display); text-transform: uppercase; transition: background .2s, color .2s; }
.sponsor:hover { background: var(--accent); color: #fff; }
.marquee { display: flex; width: max-content; margin-top: 3rem; animation: run 55s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee a { font: 800 clamp(2.4rem, 6vw, 4.8rem)/1 var(--display); text-transform: uppercase; padding-inline: 1.6rem; color: transparent; -webkit-text-stroke: 1.5px #5c6877; transition: color .2s, -webkit-text-stroke-color .2s; white-space: nowrap; display: flex; align-items: center; gap: 3.2rem; }
.marquee a::after { content: ''; width: 18px; height: 18px; background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0); opacity: .5; }
.marquee a:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
@keyframes run { to { transform: translateX(-50%); } }

/* ── closing call to action ── */
.connect-sec { background: var(--ink-2); border-top: 1px solid var(--line); }
.connect { display: grid; gap: 2.5rem; align-items: end; }
.connect h2 { font-size: clamp(3rem, 9vw, 7.5rem); }
.connect .side { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.connect .side a.mail { font: 800 1.6rem/1 var(--display); text-transform: uppercase; border-bottom: 2px solid var(--accent); padding-bottom: .3rem; }
@media (min-width: 900px) { .connect { grid-template-columns: 1.4fr 1fr; } }

/* ── footer ── */
footer { position: relative; background: var(--ink); overflow: hidden; }
.flagstrip { height: 28px; background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0) 0 0 / 28px 28px; }
.foot-grid { display: grid; gap: 2.5rem; padding-block: 4.5rem 3rem; position: relative; z-index: 1; }
.foot-grid h4 { font: 700 .8rem/1 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 1.1rem; }
.foot-grid a { display: block; color: var(--mute); padding-block: .25rem; transition: color .2s; }
.foot-grid a.brand { display: flex; color: var(--paper); }
.foot-grid a:hover { color: var(--paper); }
.foot-grid p { color: var(--mute); }
.ghost { position: absolute; right: -1rem; bottom: -2.5rem; font-size: clamp(8rem, 24vw, 20rem); color: transparent; -webkit-text-stroke: 1px #1c2430; pointer-events: none; user-select: none; }
.legal { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--line); font: 700 .78rem/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #5f6b7a; }
.legal a:hover { color: var(--accent-text); }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* ── reveal ── */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}