/* Layout: ReLoop yellow & green template. Dark green hero and bands, light page between, track explorer with a detail panel. */
:root {
--lime: #f3da5f;


--green: #2fa84f;
--olive: #14633d;
--bg: #f6f5dd;
--surface: #ffffff;
--ink: #0e3b28;
--muted: #4b5a45;
--line: #dcdfb6;
--hero-bg: #0e3b28;
--hero-ink: #f4f7ea;
--hero-muted: #b9c0a6;
--hero-line: #25563a;
--btn-ink: #0e3b28;
--display: "Archivo Black", Impact, sans-serif;
--body: "DM Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --bg: #0b1f16;
  --surface: #12301f;
  --ink: #eef2e0;
  --muted: #a9b095;
  --line: #235237;
  --hero-bg: #071810;
  color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #0b1f16;
--surface: #12301f;
--ink: #eef2e0;
--muted: #a9b095;
--line: #235237;
--hero-bg: #071810;
color-scheme: dark;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 17px/1.6 var(--body);
overflow-x: clip;
}
body::before {
content: "";
position: fixed;
inset: 0 0 auto;
height: env(safe-area-inset-top, 0px);
z-index: 10;
background: var(--hero-bg);
}
h1,
h2,
h3 {
font-family: var(--display);
font-weight: 400;
line-height: 1.05;
margin: 0;
text-wrap: balance;
}
p {
margin: 0;
}
a {
color: inherit;
}
:focus-visible {
outline: 3px solid var(--green);
outline-offset: 3px;
}
.wrap {
max-width: 1200px;
margin: 0 auto;
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
header.nav {
position: sticky;
top: env(safe-area-inset-top, 0px);
z-index: 9;
background: var(--hero-bg);
color: var(--hero-ink);
}
header.nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 60px;
}
.logo {
font-family: var(--display);
font-size: 20px;
text-decoration: none;
white-space: nowrap;
}
.logo b {
color: var(--lime);
font-weight: 400;
}
nav {
display: flex;
align-items: center;
gap: 20px;
font-size: 15px;
}
nav a {
text-decoration: none;
opacity: 0.85;
}
nav a:hover {
opacity: 1;
color: var(--lime);
}
nav a.keep {
color: var(--lime);
opacity: 1;
font-weight: 700;
}
@media (max-width: 820px) {
nav a:not(.keep) {
  display: none;
}
}

nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 15px;
}

nav a {
    text-decoration: none;
    opacity: 0.85;
    color: inherit;
}

nav a:hover {
    opacity: 1;
}

/* Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.nav-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    display: none;
    z-index: 999;
}

.nav-dropdown .dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: #222;
    white-space: nowrap;
    opacity: 1;
}

.nav-dropdown .dropdown-menu a:hover {
    background: #f3f5f8;
    color: #015FC9;
}

/* Show dropdown on hover */
.nav-dropdown:hover .dropdown-menu {
    display: block;
}

/* Keyboard accessibility */
.nav-dropdown:focus-within .dropdown-menu {
    display: block;
}

.btn {
display: inline-block;
background: var(--lime);
color: var(--btn-ink);
font-weight: 700;
text-decoration: none;
padding: 14px 26px;
border-radius: 10px;
border: 2px solid #0e3b28;
box-shadow: 4px 4px 0 #0e3b28;
transition:
  transform 0.12s,
  box-shadow 0.12s;
text-align: center;
}
.btn:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 #0e3b28;
}
.btn.ghost {
background: transparent;
color: var(--hero-ink);
border-color: var(--lime);
box-shadow: none;
}
.btn.ghost:hover {
background: var(--lime);
color: #0e3b28;
transform: none;
}
.acts {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}

/* hero */
.hero {
position: relative;
isolation: isolate;
background: var(--hero-bg);
color: var(--hero-ink);
padding: 60px 0 64px;
text-align: center;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
  radial-gradient(
    620px circle at 12% 8%,
    rgba(47, 168, 79, 0.5),
    transparent 60%
  ),
  radial-gradient(
    540px circle at 92% 88%,
    rgba(255, 212, 0, 0.2),
    transparent 60%
  ),
  radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px) 0
    0/26px 26px;
}
.pill {
display: inline-block;
border: 1.5px solid #3f7a58;
color: #d7dcc6;
border-radius: 999px;
padding: 6px 16px;
font-size: 16px;
font-weight: 800;
}
.hero h1 {
font-size: clamp(22px, 3.4vw, 38px);
margin: 24px auto 6px;
max-width: 26em;
}
.ttl {
display: flex;
flex-direction: column;
align-items: center;
margin: 14px 0 24px;
font-family: var(--display);
line-height: 0.92;
text-transform: uppercase;
}
.t-out {
font-size: clamp(30px, 6.6vw, 84px);
color: transparent;
-webkit-text-stroke: 2px var(--lime);
letter-spacing: 0.06em;
}
.t-fill {
font-size: clamp(40px, 10vw, 120px);
color: var(--lime);
margin: -0.02em 0;
text-shadow:
  0 0 70px rgba(255, 212, 0, 0.35),
  0 6px 0 var(--olive);
animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.t-sub {
display: flex;
align-items: center;
gap: 14px;
margin-top: 0.7em;
font-size: clamp(14px, 2.4vw, 28px);
letter-spacing: 0.3em;
padding-left: 0.3em;
color: var(--hero-ink);
}
.t-sub::before,
.t-sub::after {
content: "";
height: 2px;
width: clamp(20px, 7vw, 100px);
background: linear-gradient(90deg, transparent, var(--lime));
}
.t-sub::after {
transform: scaleX(-1);
}
@keyframes rise {
from {
  transform: translateY(24px);
  opacity: 0;
}
to {
  transform: none;
  opacity: 1;
}
}

.hg {
display: grid;
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
gap: clamp(24px, 4vw, 56px);
align-items: center;
text-align: left;
}
.hg .acts {
justify-content: flex-start;
}
.hg .lead {
margin: 0 0 28px;
max-width: 34em;
}
.hero h1.big {
font-size: clamp(34px, 5.6vw, 60px);
line-height: 1.04;
color: var(--lime);
margin: 22px 0 20px;
max-width: none;
text-shadow: 0 5px 0 var(--olive);
animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.it {
animation: feed 9s linear infinite both;
}
@keyframes feed {
0% {
  opacity: 0;
  transform: translate(0, 0);
}
5% {
  opacity: 1;
  transform: translate(0, 0);
}
55% {
  opacity: 1;
  transform: translate(var(--dx), 0);
}
72% {
  opacity: 1;
  transform: translate(var(--dx), 78px);
}
75% {
  opacity: 0;
  transform: translate(var(--dx), 84px);
}
100% {
  opacity: 0;
  transform: translate(var(--dx), 84px);
}
}
.belt {
animation: belt 1.4s linear infinite;
}
@keyframes belt {
to {
  stroke-dashoffset: -26;
}
}
@media (prefers-reduced-motion: reduce) {
.it {
  animation: none !important;
  opacity: 1;
  transform: translate(var(--sx), 0);
}
.belt {
  animation: none !important;
}
}
.art {
margin: 0;
justify-self: center;
width: 100%;
max-width: 500px;
}
.art svg {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 860px) {
.hg {
  grid-template-columns: 1fr;
}
.art {
  max-width: 340px;
}
}
.hero .lead {
max-width: 44em;
font-size: 19px;
opacity: 0.9;
margin: 0 auto 28px;
}
.facts {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
border: 1.5px solid var(--hero-line);
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
text-align: left;
}
.facts div {
flex: 1 1 200px;
padding: 16px 20px;
border-right: 1.5px solid var(--hero-line);
min-width: 0;
}
.facts div:last-child {
border-right: 0;
}
.facts small {
display: block;
color: var(--hero-muted);
font-size: 13px;
}
.facts strong {
font-size: 18px;
}
@media (max-width: 640px) {
.facts div {
  border-right: 0;
  border-bottom: 1.5px solid var(--hero-line);
}
.facts div:last-child {
  border-bottom: 0;
}
}
.wave {
display: block;
width: 100%;
height: 54px;
fill: var(--hero-bg);
margin-bottom: -1px;
}

/* sections */
section {
padding: 76px 0;
}
h2 {
font-size: clamp(28px, 5vw, 46px);
margin-bottom: 12px;
}
h2::after {
content: "";
display: block;
width: 64px;
height: 6px;
border-radius: 6px;
background: linear-gradient(90deg, var(--lime), var(--green));
margin-top: 14px;
}
.sub {
color: var(--muted);
max-width: 40em;
margin: 0 0 16px;
}
.dark {
background: var(--hero-bg);
color: var(--hero-ink);
}
.dark .sub {
color: var(--hero-muted);
}
.two {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 44px;
align-items: start;
}
.two > * {
min-width: 0;
}
@media (max-width: 820px) {
.two {
  grid-template-columns: 1fr;
  gap: 30px;
}
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.stats div {
background: var(--hero-bg);
color: var(--hero-ink);
border-radius: 18px;
padding: 22px;
}
.stats strong {
display: block;
font-family: var(--display);
font-size: 38px;
font-weight: 400;
color: var(--lime);
}
.stats span {
font-size: 15px;
opacity: 0.85;
}
.pull {
font-family: var(--display);
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.25;
margin: 26px 0 0;
padding-left: 18px;
border-left: 6px solid var(--lime);
}

/* take home / audience */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.card {
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: 16px;
padding: 24px;
transition:
  transform 0.22s,
  box-shadow 0.22s;
min-width: 0;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px -22px rgba(14, 59, 40, 0.5);
}
.card h3 {
font-size: 19px;
margin-bottom: 10px;
}
.card p {
color: var(--muted);
font-size: 15.5px;
}
.chain {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.chain span {
padding: 8px 16px;
border-radius: 999px;
border: 1.5px solid var(--hero-line);
background: rgba(255, 255, 255, 0.06);
font-size: 15px;
font-weight: 500;
}
.chain span:nth-child(3n + 1) {
border-color: var(--lime);
}

/* tracks */
.tk {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 24px;
align-items: start;
margin-top: 30px;
}
.tl {
display: flex;
flex-direction: column;
gap: 8px;
}
.tl button {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: center;
text-align: left;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.05);
cursor: pointer;
font: 500 16px/1.3 var(--body);
color: var(--hero-ink);
transition:
  background 0.2s,
  border-color 0.2s,
  transform 0.2s;
}
.tl button:hover {
transform: translateX(4px);
border-color: rgba(255, 212, 0, 0.6);
}
.tl button b {
font: 400 22px var(--display);
color: var(--lime);
}
.tl button[aria-selected="true"] {
background: var(--lime);
border-color: var(--lime);
color: #0e3b28;
}
.tl button[aria-selected="true"] b {
color: var(--olive);
}
.tp {
background: linear-gradient(
  160deg,
  rgba(255, 255, 255, 0.1),
  rgba(255, 255, 255, 0.03)
);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 26px;
padding: clamp(24px, 3.4vw, 40px);
position: sticky;
top: 84px;
min-height: 360px;
}
.tp .n {
font: 400 80px/0.8 var(--display);
color: var(--lime);
opacity: 0.45;
}
.tp h3 {
font-size: clamp(24px, 3vw, 34px);
margin: 12px 0 20px;
color: var(--hero-ink);
}
.tp ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.tp li {
padding: 8px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.14);
font-size: 15px;
font-weight: 500;
}
.tp li:nth-child(3n + 1) {
background: var(--lime);
color: #0e3b28;
border-color: var(--lime);
font-weight: 700;
}
@media (max-width: 820px) {
.tk {
  grid-template-columns: 1fr;
}
.tp {
  position: static;
  min-height: 0;
}
}

/* speakers */
.speakers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
margin-top: 30px;
}
.spk {
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: 14px;
padding: 18px;
transition:
  transform 0.22s,
  box-shadow 0.22s;
min-width: 0;
}
.spk:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -20px rgba(14, 59, 40, 0.5);
}
.ph {
aspect-ratio: 1/1;
max-width: 100%;
border-radius: 12px;
margin-bottom: 14px;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
background: linear-gradient(160deg, #c9d1b4, #8e9a73);
}
.spk:nth-child(3n + 2) .ph {
background: linear-gradient(160deg, #d3d6c6, #7e8a74);
}
.spk:nth-child(3n) .ph {
background: linear-gradient(160deg, #bfc8ae, #6f7c5c);
}
.ph svg {
width: 70%;
fill: #f6f5dd;
}
.spk h3 {
font-size: 17px;
line-height: 1.2;
}
.spk p {
margin-top: 4px;
color: var(--muted);
font-size: 14.5px;
}

/* program */
.days {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 26px;
margin-top: 30px;
}
.day h3 {
color: var(--hero-ink);
font-size: 24px;
margin-bottom: 4px;
}
.day small {
display: block;
color: var(--lime);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 14px;
}
.slot {
display: grid;
grid-template-columns: 70px 1fr;
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--hero-line);
font-size: 15.5px;
}
.slot time {
color: #c9cfb8;
font-weight: 700;
font-variant-numeric: tabular-nums;
}

/* city + join */
.city .sub {
margin-bottom: 12px;
}

.rf {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: 24px;
margin-top: 30px;
align-items: start;
}
.rtabs {
display: flex;
flex-direction: column;
gap: 8px;
}
.rtabs button {
text-align: left;
padding: 14px 18px;
border-radius: 12px;
border: 2px solid var(--line);
background: var(--surface);
color: var(--ink);
font: 700 16px var(--body);
cursor: pointer;
transition:
  transform 0.15s,
  background 0.15s;
}
.rtabs button:hover {
transform: translateX(4px);
}
.rtabs button[aria-selected="true"] {
background: var(--lime);
border-color: #0e3b28;
color: #0e3b28;
box-shadow: 4px 4px 0 #0e3b28;
}
.rpanel {
background: var(--hero-ink);
color:   var(--hero-bg);
border-radius: 22px;
padding: clamp(24px, 3.4vw, 38px);
min-height: 300px;
}
.rpanel h3 {
font-size: clamp(22px, 3vw, 30px);
color: var(--ink);
margin-bottom: 12px;
}
.rpanel p {
/*color: #d7dcc6;*/
color: var(--muted);
}
.rpanel h4 {
margin: 22px 0 10px;
font: 700 13px var(--body);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
}
.rpanel ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rpanel li {
padding: 7px 14px;
border-radius: 999px;
background: rgb(106 106 101 / 15%);
border: 1px solid rgba(255, 255, 255, 0.16);
font-size: 14.5px;
}
.rpanel .btn {
margin-top: 24px;
}
@media (max-width: 820px) {
.rf {
  grid-template-columns: 1fr;
}
.rtabs {
  flex-direction: row;
  flex-wrap: wrap;
}
.rtabs button:hover {
  transform: none;
}
}
.sg {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(24px, 4vw, 56px);
align-items: start;
}
@media (max-width: 820px) {
.sg {
  grid-template-columns: 1fr;
}
}



.game {
min-width: 0;
background: var(--hero-bg);
color: var(--hero-ink);
border-radius: 24px;
padding: clamp(22px, 3.4vw, 36px);
}
.ghead {
display: flex;
justify-content: space-between;
gap: 12px;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--hero-muted);
}
.gitem {
font-family: var(--display);
font-size: clamp(28px, 6vw, 46px);
line-height: 1.1;
color: var(--lime);
text-align: center;
padding: 36px 8px;
min-height: 130px;
display: flex;
align-items: center;
justify-content: center;
text-wrap: balance;
}
.gbins {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.gbins button {
padding: 16px 10px;
border-radius: 14px;
border: 2px solid #0e3b28;
font: 700 16px var(--body);
color: #0e3b28;
cursor: pointer;
box-shadow: 3px 3px 0 #0e3b28;
transition:
  transform 0.12s,
  box-shadow 0.12s;
}
.gbins button:hover:not(:disabled) {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 #0e3b28;
}
.gbins button:disabled {
cursor: default;
opacity: 0.55;
}
.gbins button.ok {
opacity: 1;
outline: 4px solid #fff;
}
.gfb {
text-align: center;
margin-top: 18px;
min-height: 3em;
color: #d7dcc6;
}
.gmodes {
display: flex;
gap: 8px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.gmodes button {
font: 700 14px var(--body);
padding: 8px 18px;
border-radius: 999px;
border: 1.5px solid var(--hero-line);
background: transparent;
color: var(--hero-ink);
cursor: pointer;
}
.gmodes button[aria-pressed="true"] {
background: var(--lime);
border-color: var(--lime);
color: #0e3b28;
}
.gitem[data-mode="quiz"] {
font-size: clamp(20px, 3.2vw, 28px);
line-height: 1.3;
font-family: var(--body);
font-weight: 700;
padding: 26px 6px;
min-height: 150px;
}
.gbins[data-mode="quiz"] button {
font-size: 15px;
line-height: 1.3;
padding: 14px 12px;
text-align: left;
}
.gend .acts {
flex-wrap: wrap;
}
.game [hidden] {
display: none !important;
}
.gtitle {
display: inline-block;
padding: 5px 16px;
border-radius: 999px;
background: var(--lime);
color: #0e3b28;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 10px;
}
.grec {
margin: 16px 0 12px;
color: var(--hero-muted);
}
.grec b {
color: var(--lime);
}
.gend button.btn {
font: 700 17px var(--body);
cursor: pointer;
line-height: 1.6;
}
.gend {
text-align: center;
padding: 10px 0;
}
.gend strong {
display: block;
font-family: var(--display);
font-weight: 400;
font-size: clamp(40px, 8vw, 72px);
color: var(--lime);
}
.gend .acts {
margin-top: 20px;
}
.cta {
background: var(--surface);
padding: 70px 0;
text-align: center;
border-top: 1.5px solid var(--line);
}
.cta h2 {
font-size: clamp(30px, 6vw, 56px);
}
.cta h2::after {
margin: 14px auto 0;
}
.cta .sub {
margin: 16px auto 8px;
}
.cta .tag {
font-family: var(--display);
color: var(--olive);
font-size: clamp(18px, 3vw, 26px);
margin: 22px 0 4px;
}
:root[data-theme="dark"] .cta .tag {
color: var(--lime);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cta .tag {
  color: var(--lime);
}
}
.cta .when {
font-weight: 700;
margin-bottom: 26px;
}
.cta .btn.ghost {
color: var(--ink);
border-color: var(--ink);
}
.cta .btn.ghost:hover {
background: var(--lime);
color: #0e3b28;
}
/* footer */
footer {
background: var(--hero-bg);
color: var(--hero-muted);
padding: 56px 0 0;
font-size: 15px;
border-top: 4px solid var(--lime);
}
.fgrid {
display: grid;
grid-template-columns: 1.5fr 1fr 1.3fr;
gap: 40px;
padding-bottom: 44px;
}
.fgrid > * {
min-width: 0;
}
footer .logo {
font-size: 26px;
color: var(--hero-ink);
}
footer p {
margin: 16px 0 0;
max-width: 26em;
}
footer h4 {
font-family: var(--display);
font-weight: 400;
font-size: 17px;
color: var(--hero-ink);
margin: 0 0 14px;
}
footer ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
footer a {
text-decoration: none;
overflow-wrap: anywhere;
}
footer a:hover {
color: var(--lime);
}
.faddr li {
display: grid;
gap: 2px;
}
.faddr b {
color: var(--hero-ink);
font-weight: 500;
}
.fbar {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 20px 0;
font-size: 14px;
}
@media (max-width: 820px) {
.fgrid {
  grid-template-columns: 1fr;
  gap: 28px;
}
}
@media (prefers-reduced-motion: reduce) {
* {
  animation: none !important;
  transition: none !important;
}
html {
  scroll-behavior: auto;
}
}