@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #f4f0e8;
  --navy: #102c3d;
  --green: #65ba29;
  --yellow: #f5c84b;
  --red: #e5664f;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--navy); color: var(--ink); font-family: 'Space Grotesk', sans-serif; }
button { font: inherit; }

.fair-display { width: 100vw; height: 100vh; min-height: 520px; position: relative; overflow: hidden; background: var(--navy); }
.brand-mark { position: absolute; top: 4.5vh; left: 5vw; z-index: 5; width: min(18vw, 190px); }
.brand-mark img { display: block; width: 100%; height: auto; }
.slides, .slide { width: 100%; height: 100%; }
.slide { position: absolute; inset: 0; padding: 14vh 10vw 13vh; display: flex; align-items: center; opacity: 0; pointer-events: none; overflow: hidden; transition: opacity .7s ease; }
.slide.is-active { opacity: 1; pointer-events: auto; }
.slide-content { position: relative; z-index: 2; max-width: 760px; }
.kicker, .detail-label { color: var(--yellow); font: 500 .78rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1, h2 { margin-bottom: 1.5rem; font-weight: 600; letter-spacing: -.055em; line-height: .94; }
h1 { font-size: clamp(3.8rem, 8vw, 8.5rem); }
h2 { font-size: clamp(3.3rem, 7vw, 7rem); }
h1 span, h2 em { color: var(--green); font-style: normal; }
.lead { max-width: 590px; color: rgba(244, 240, 232, .78); font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.45; }
.welcome-content { margin-top: 3vh; }
.welcome-tags { display: flex; gap: .75rem; margin-top: 2.5rem; flex-wrap: wrap; }
.welcome-tags span { border: 1px solid rgba(244,240,232,.35); border-radius: 99px; padding: .65rem 1rem; font: .75rem 'DM Mono', monospace; text-transform: uppercase; }
.doodle { position: absolute; opacity: .88; pointer-events: none; }
.doodle--one { width: min(22vw, 260px); right: 11vw; top: 17vh; transform: rotate(12deg); }
.doodle--two { width: min(18vw, 210px); right: 8vw; bottom: 10vh; transform: rotate(-15deg); }
.doodle--three { width: min(16vw, 180px); right: 12vw; top: 18vh; transform: rotate(18deg); }
.doodle--four { width: min(20vw, 230px); right: 10vw; bottom: 13vh; transform: rotate(-12deg); }
.statement-layout, .join-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 33%); gap: 8vw; align-items: center; }
.feature-list { border-top: 1px solid rgba(244,240,232,.35); }
.feature-list div { display: flex; gap: 1.5rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid rgba(244,240,232,.35); }
.feature-list strong { color: var(--yellow); font: .8rem 'DM Mono', monospace; }
.feature-list span { font-size: clamp(1rem, 1.5vw, 1.35rem); }
.slide--green { background: var(--green); color: var(--navy); }
.slide--green .kicker, .slide--green h2 em { color: var(--navy); }
.slide--green .lead { color: rgba(16,44,61,.78); }
.orbit-words { width: min(28vw, 340px); height: min(28vw, 340px); border: 1px solid rgba(16,44,61,.45); border-radius: 50%; position: relative; transform: rotate(-12deg); }
.orbit-words:after { content: ''; position: absolute; inset: 13%; border: 1px solid rgba(16,44,61,.45); border-radius: 50%; }
.orbit-words span { position: absolute; padding: .4rem; background: var(--green); font: .85rem 'DM Mono', monospace; text-transform: uppercase; }
.orbit-words span:nth-child(1) { top: 2%; left: 34%; } .orbit-words span:nth-child(2) { top: 45%; right: -12%; } .orbit-words span:nth-child(3) { bottom: 4%; left: 32%; } .orbit-words span:nth-child(4) { top: 44%; left: -13%; }
.slide--photo { padding: 0; background: #1e2527; }
.photo-backdrop { position: absolute; inset: 0; background-position: center; background-size: cover; filter: saturate(.9); }
.photo-backdrop:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,44,61,.95) 0%, rgba(16,44,61,.65) 37%, rgba(16,44,61,.05) 80%); }
.photo-caption { position: relative; z-index: 1; width: min(56vw, 680px); margin-left: 10vw; margin-top: 35vh; }
.photo-caption h2 { font-size: clamp(2.8rem, 6vw, 6.2rem); }
.slide--join { background: var(--red); color: #fff7e8; }
.slide--join .kicker { color: var(--navy); }
.slide--join h2 em { color: var(--yellow); }
.slide--join .lead { color: rgba(255,247,232,.82); }
.join-details { border-left: 1px solid rgba(255,247,232,.48); padding-left: 2rem; }
.join-details .detail-label { color: var(--navy); margin-bottom: .7rem; }
.url { font: 500 clamp(1rem, 1.8vw, 1.45rem) 'DM Mono', monospace; word-break: break-word; }
.join-rule { margin: 2.2rem 0; border-top: 1px solid rgba(255,247,232,.48); }
.display-controls { position: absolute; right: 5vw; bottom: 6vh; z-index: 5; display: flex; gap: .5rem; }
.control-button { width: 42px; height: 42px; border: 1px solid rgba(244,240,232,.4); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.control-button:hover, .control-button:focus-visible { background: var(--ink); color: var(--navy); outline: none; }
.progress { position: absolute; z-index: 5; left: 5vw; right: 5vw; bottom: 6.9vh; height: 2px; background: rgba(244,240,232,.22); }
.progress:before { content: ''; display: block; height: 100%; width: var(--progress, 16.66%); background: var(--yellow); transition: width .45s ease; }
.slide-count { position: absolute; bottom: 3.2vh; right: 5vw; margin: 0; color: rgba(244,240,232,.62); font: .72rem 'DM Mono', monospace; }

@media (max-width: 700px) {
  .brand-mark { top: 3.5vh; left: 7vw; width: 34vw; }
  .slide { padding: 16vh 9vw 15vh; }
  h1 { font-size: clamp(3.2rem, 16vw, 5rem); } h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .statement-layout, .join-grid { display: block; }
  .feature-list, .join-details { margin-top: 3rem; max-width: 430px; }
  .orbit-words { position: absolute; width: 230px; height: 230px; right: -20px; bottom: 12vh; opacity: .65; }
  .photo-caption { width: 76vw; margin-left: 9vw; margin-top: 38vh; }
  .photo-backdrop:after { background: linear-gradient(0deg, rgba(16,44,61,.94) 0%, rgba(16,44,61,.28) 75%); }
  .doodle--one { width: 35vw; right: 2vw; top: 16vh; } .doodle--two { width: 30vw; right: 2vw; bottom: 13vh; }
  .doodle--three, .doodle--four { width: 28vw; right: 4vw; bottom: 12vh; top: auto; }
  .display-controls { right: 9vw; bottom: 9vh; } .progress { left: 9vw; right: 9vw; bottom: 6vh; }
}

@media (prefers-reduced-motion: reduce) { .slide, .progress:before { transition: none; } }