:root {
  --cardinal: #8c1515;
  --cardinal-dark: #620f12;
  --ink: #181716;
  --paper: #f7f5f0;
  --white: #fffdfa;
  --sand: #e8e1d5;
  --blush: #f2d5cf;
  --muted: #69655e;
  --line: rgba(24, 23, 22, 0.16);
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Libre Caslon Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header { position: sticky; top: 0; z-index: 20; min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-symbol { font-family: var(--serif); font-size: 2rem; line-height: 1; letter-spacing: -.08em; }
.brand-symbol sup { position: relative; top: -.42em; margin: 0 .08em; color: var(--cardinal); font-family: var(--sans); font-size: .42em; font-weight: 700; letter-spacing: 0; }
.brand-rule { width: 1px; height: 32px; background: var(--cardinal); }
.brand-name { font-size: .71rem; line-height: 1.12; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 1.8rem; }
.nav-links a { text-decoration: none; font-size: .88rem; font-weight: 600; }
.nav-links a:hover { color: var(--cardinal); }
.nav-cta { padding: .65rem 1rem; border: 1px solid var(--ink); }
.menu-toggle { display: none; border: 0; background: transparent; font: inherit; font-weight: 600; }

.hero { min-height: auto; display: block; padding: 6rem 7vw; background: var(--paper); }
.hero-copy { max-width: 1000px; }
.eyebrow, .section-kicker { margin: 0 0 1.2rem; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; }
.hero h1 { max-width: 900px; margin: 0; font-size: clamp(4rem, 7vw, 7.6rem); line-height: .92; }
.hero-lede { max-width: 720px; margin: 2.1rem 0 0; font-size: clamp(1.08rem, 1.55vw, 1.34rem); color: #413f3a; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-top: 2.2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.15rem; border: 1px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--cardinal); color: white; }
.button.primary:hover { background: var(--cardinal-dark); }
.button.text { padding-left: 0; padding-right: 0; border-bottom-color: var(--ink); }
.button.dark { background: var(--ink); color: white; }
.light-button { border-color: rgba(255,255,255,.6); color: white; }
.light-button:hover { background: white; color: var(--cardinal-dark); }

.manifesto-card { min-height: 520px; padding: 1.5rem; overflow: hidden; background: var(--ink); color: white; display: flex; flex-direction: column; justify-content: space-between; }
.manifesto-topline { display: flex; justify-content: space-between; color: #bbb7af; font-size: .7rem; letter-spacing: .13em; }
.manifesto-topline sup { font-size: .65em; }
.agora-wordmark { padding: 3rem 0; color: var(--paper); }
.agora-wordmark > span { display: block; font-family: var(--serif); font-size: clamp(4.5rem, 8vw, 8rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
.agora-wordmark > small { display: block; margin-top: .7rem; padding-left: .2rem; font-family: var(--sans); font-size: 1rem; letter-spacing: .25em; text-transform: uppercase; color: var(--blush); }
.manifesto-card > p { margin: 0; padding-top: 1.2rem; border-top: 1px solid #54514c; color: #dedad2; font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.15; }
.manifesto-card em { color: var(--blush); font-weight: 400; }

.signal-strip { display: flex; align-items: center; justify-content: space-around; gap: 1rem; overflow: hidden; padding: 1rem 3vw; background: var(--cardinal); color: white; font-size: .7rem; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.signal-strip i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: white; opacity: .6; }
.section { padding: 7.5rem 7vw; border-bottom: 1px solid var(--line); }
.section h2 { margin: 0; font-size: clamp(3rem, 5vw, 5.8rem); line-height: .98; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: start; }
.prose { max-width: 680px; font-size: 1.14rem; color: #47443f; }
.prose p:first-child { margin-top: .4rem; }
.status-note { display: grid; grid-template-columns: 70px 1fr; gap: 1rem; margin-top: 2.1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.status-note span { color: var(--cardinal); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.status-note strong { color: var(--ink); font-size: .92rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 4rem; }
.section-heading > div { max-width: 530px; }
.section-heading h2 { max-width: 650px; text-align: right; }
.section-intro { margin: 0; color: var(--muted); font-size: 1.03rem; }

.benefits { background: var(--white); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.benefit-card { min-height: 300px; display: flex; flex-direction: column; padding: 1.6rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.benefit-card > span { color: var(--cardinal); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.benefit-card h3 { margin: auto 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 2.7vw, 3rem); font-weight: 400; line-height: 1; }
.benefit-card p { margin: 0; color: var(--muted); }
.benefit-card.future { background: var(--sand); }

.community { min-height: calc(100svh - 82px); display: flex; flex-direction: column; justify-content: center; background: var(--ink); color: white; }
.section-heading.light { align-items: start; }
.section-heading.light h2 { text-align: right; }
.participation-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #5b5852; border-left: 1px solid #5b5852; }
.participation-card { min-height: 340px; display: flex; flex-direction: column; padding: 1.8rem; border-right: 1px solid #5b5852; border-bottom: 1px solid #5b5852; }
.participation-label { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid #5b5852; color: #d9d5cd; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.participation-label small { color: #aaa7a1; font-size: inherit; letter-spacing: .08em; }
.participation-card h3 { max-width: 560px; margin: 1.7rem 0 .7rem; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.3rem); font-weight: 400; line-height: 1; }
.participation-card > p:not(.support-terms) { max-width: 610px; margin: 0 0 1.5rem; color: #c8c4bc; }
.participation-card ul { display: grid; gap: 0; margin: auto 0 0; padding: 0; list-style: none; border-top: 1px solid #5b5852; }
.participation-card li { display: grid; grid-template-columns: minmax(120px, .7fr) 1.3fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #5b5852; font-size: .88rem; }
.participation-card li strong { color: white; }
.participation-card li span { color: #bdb9b1; }
.member-card { background: var(--cardinal-dark); }
.membership-button { align-self: flex-start; margin-top: 1rem; border-color: var(--blush); color: white; }
.membership-button:hover { background: var(--blush); color: var(--cardinal-dark); }
.support-terms { max-width: 620px; margin: .75rem 0 0; color: #c3aaa5; font-size: .74rem; line-height: 1.4; }

.sprint { background: var(--white); }
.sprint-meta { display: flex; gap: .7rem; align-items: center; margin-bottom: 5rem; font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #16804c; box-shadow: 0 0 0 5px rgba(22,128,76,.12); }
.deadline { margin-left: auto; color: var(--cardinal); }
.sprint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.red { color: var(--cardinal); }
.sprint-copy { color: #46433e; font-size: 1.05rem; }
.criteria { display: grid; margin: 2rem 0; border-top: 1px solid var(--line); }
.criteria span { padding: .9rem 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.support-note { font-size: .92rem; }

.sponsors { background: var(--cardinal-dark); color: white; }
.sponsor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.sponsors h2 { max-width: 720px; }
.sponsor-copy { max-width: 660px; color: #f3e8e4; font-size: 1.08rem; }
.sponsor-copy > p:first-child { margin-top: .3rem; }
.sponsor-copy h3 { margin: 2.5rem 0 .5rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.sponsor-copy ul { margin: 0 0 2rem; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.28); }
.sponsor-copy li { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.4rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.28); }
.sponsor-copy li span { color: #d9c4be; font-size: .92rem; }
.partner-note { color: #d9c4be; font-size: .83rem; }

.roadmap { background: var(--sand); }
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.roadmap-step { min-height: 270px; display: flex; flex-direction: column; padding: 1.5rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.roadmap-step > span { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.roadmap-step h3 { margin: auto 0 .7rem; font-family: var(--serif); font-size: 2.25rem; font-weight: 400; }
.roadmap-step p { margin: 0; color: var(--muted); }
.roadmap-step.active { background: var(--ink); color: white; }
.roadmap-step.active > span, .roadmap-step.active p { color: #d2cec6; }

.join { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; background: #eadfd1; }
.join-copy { max-width: 560px; font-size: 1.12rem; }
.microcopy { min-height: 1.5em; margin: .8rem 0 0; color: var(--muted); font-size: .82rem; }
footer { display: grid; grid-template-columns: 1fr 2fr auto; gap: 3rem; align-items: start; padding: 2.5rem 5vw; background: var(--ink); color: #d6d2cb; font-size: .76rem; }
.footer-brand { color: white; font-weight: 700; }
footer p { max-width: 700px; margin: 0; }
footer a { text-decoration: none; }

@media (max-width: 980px) {
  .site-header { min-height: 72px; }
  .menu-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; padding: 1rem 5vw 1.5rem; flex-direction: column; align-items: stretch; gap: .6rem; background: var(--paper); border-bottom: 1px solid var(--line); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .65rem 0; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 5rem; }
  .manifesto-card { min-height: 500px; }
  .intro-grid, .sprint-grid, .sponsor-grid, .join { grid-template-columns: 1fr; }
  .section-heading { display: block; }
  .section-heading h2, .section-heading.light h2 { margin-top: 2rem; text-align: left; }
  .benefit-grid, .roadmap-grid { grid-template-columns: 1fr 1fr; }
  .participation-grid { grid-template-columns: 1fr; }
  .community { min-height: auto; }
  footer { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 600px) {
  .brand-symbol { font-size: 1.7rem; }
  .brand-name { font-size: .63rem; }
  .section, .hero { padding-left: 5vw; padding-right: 5vw; }
  .section { padding-top: 5rem; padding-bottom: 5rem; }
  .hero h1 { font-size: clamp(3.2rem, 15vw, 4.7rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .button.text { width: auto; align-self: flex-start; }
  .manifesto-card { min-height: 440px; }
  .benefit-grid, .roadmap-grid { grid-template-columns: 1fr; }
  .benefit-card { min-height: 265px; }
  .participation-card { min-height: auto; }
  .participation-label { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .participation-card li { grid-template-columns: 1fr; gap: .15rem; }
  .signal-strip { justify-content: flex-start; }
  .deadline { margin-left: 0; }
  .sprint-meta { align-items: flex-start; flex-wrap: wrap; }
  .sponsor-copy li { grid-template-columns: 1fr; gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }

.join-form { display: grid; gap: 1rem; }
.join-form label { display: grid; gap: .35rem; font-size: 1rem; }
.join-form label > span { font-weight: 400; }
.join-form input:not([type="checkbox"]) { width: 100%; min-height: 48px; padding: .7rem; border: 1px solid #82889b; border-radius: 3px; background: #fffdfa; color: var(--ink); font: inherit; }
.join-form .join-consent { display: flex; align-items: flex-start; gap: .7rem; font-size: .875rem; }
.join-consent input { flex: 0 0 auto; margin-top: .25rem; width: 18px; height: 18px; }
.join-form button:disabled { opacity: .6; cursor: wait; }

.name-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 2rem; margin-top: 3rem; border-top: 1px solid #a46c6c; padding-top: 2rem; }
.name-list strong { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.name-list small { display: block; color: #ead3cd; font-size: .875rem; margin-top: .5rem; }
.school-list { list-style: none; padding: 0; }
.school-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1.2rem; }
.school-list small { display: block; color: var(--muted); font-size: .875rem; }

[hidden] { display: none !important; }

.community-tabs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #504e48; border-bottom: 1px solid #504e48; }
.community-tab { padding: 2rem 0; border: 0; border-bottom: 4px solid transparent; background: transparent; color: #aaa7a1; text-align: left; cursor: pointer; font: inherit; }
.community-tab + .community-tab { padding-left: 2rem; border-left: 1px solid #504e48; }
.community-tab span { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 2.8vw, 3rem); line-height: 1.1; }
.community-tab small { display: block; font-size: 1rem; margin-top: .25rem; }
.community-tab[aria-selected="true"] { color: white; border-bottom-color: var(--blush); }
.community-tab:focus-visible, .community-panel:focus-visible { outline: 2px solid var(--blush); outline-offset: 4px; }
.community-statement { max-width: 1100px; font-family: var(--serif); font-size: clamp(2rem, 3.7vw, 4rem); line-height: 1.16; margin: 3.5rem 0; }
.community-perks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.community-perks li { border-top: 1px solid #504e48; padding-top: 1rem; color: #c8c4bc; }
@media (max-width: 600px) { .community-tab { padding: 1.4rem .6rem 1.4rem 0; } .community-tab + .community-tab { padding-left: 1rem; } .community-tab small { font-size: .875rem; } .community-perks { grid-template-columns: 1fr 1fr; } .community-statement { margin: 2.5rem 0; } }

.field-section { background: var(--paper); }
.field-note { margin: 1.5rem 0 2.5rem; color: var(--muted); }
.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.field-grid > div { border-top: 1px solid var(--line); padding-top: 1rem; }
.field-grid span { color: var(--cardinal); font-size: .875rem; }
.field-grid h3 { font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1.15; margin: 1rem 0 .5rem; }
.field-grid p { color: var(--muted); font-size: .875rem; margin: 0; }
.sponsor-invite { padding: 3rem 7vw; display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-top: 1px solid var(--line); }
.sponsor-invite p { margin: 0; }
.sponsor-invite .section-kicker { margin-bottom: .5rem; }
.sponsor-invite .button { flex-shrink: 0; }
@media(max-width: 600px) { .field-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .field-grid h3 { font-size: 1.65rem; } .sponsor-invite { padding: 2.5rem 5vw; flex-direction: column; align-items: flex-start; } }

#community > .section-heading { display: block; }
#community > .section-heading h2 { max-width: none; text-align: right; font-size: clamp(2.5rem, 5.2vw, 5.8rem); }
@media (min-width: 981px) { #community > .section-heading h2 { white-space: nowrap; } }
@media (max-width: 980px) { #community > .section-heading h2 { text-align: left; } }

#about .prose p + p { margin-top: 1.75rem; }

/* Illustrations sit in the layout, never over the text. */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3.5vw; align-items: center; padding-top: 5rem; padding-bottom: 5rem; }
.hero-copy, .intro-editorial { min-width: 0; }
.hero h1 { font-size: clamp(3.2rem, 4.7vw, 5.8rem); line-height: 1.03; }
.hero-art { margin: 0; width: 100%; max-width: 680px; justify-self: center; padding: 0; background: transparent; }
.hero-art img, .editorial-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 72% 74% at 50% 50%, #000 48%, transparent 100%); mask-image: radial-gradient(ellipse 72% 74% at 50% 50%, #000 48%, transparent 100%); }
.editorial-art { margin: 0; pointer-events: none; }
.notes-art { width: 82%; max-width: 380px; margin: 2.5rem auto 0; }
.fields-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: center; margin-bottom: 3rem; }
.gathering-art { width: 100%; max-width: 490px; justify-self: end; }
@media (max-width: 980px) {
 .hero { grid-template-columns: 1fr; gap: 2rem; }
 .hero-art { width: 85%; max-width: 600px; }
 .hero h1 { font-size: clamp(3.2rem, 8vw, 5.8rem); }
 .notes-art { max-width: 320px; margin: 2rem 0; }
 .fields-intro { gap: 2rem; }
}
@media (max-width: 600px) {
 .hero { padding-top: 3.5rem; padding-bottom: 3rem; }
 .hero-art { width: 100%; }
 .hero h1 { font-size: clamp(2.75rem, 11vw, 4rem); }
 .fields-intro { grid-template-columns: 1fr; margin-bottom: 2rem; gap: .5rem; }
 .gathering-art { max-width: 360px; justify-self: center; }
 .notes-art { width: 75%; max-width: 280px; margin: 2rem auto; }
}
.hero-art img, .editorial-art img {
 -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(to bottom, transparent, #000 15%, #000 82%, transparent);
 -webkit-mask-composite: source-in;
 mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(to bottom, transparent, #000 15%, #000 82%, transparent);
 mask-composite: intersect;
}

.sponsor-logos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; width:100%; }
.sponsor-logo-placeholder { min-height: 110px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.5rem; border:1px dashed var(--line); text-align:center; padding:1rem; }
.sponsor-logo-placeholder>span { font-family:var(--serif); font-size:1.65rem; color:var(--muted); }
.sponsor-logo-placeholder small { font-size:.75rem; color:var(--muted); }
.sponsor-heading { display:flex; justify-content:space-between; align-items:center; gap:2rem; width:100%; }
.contact-form { display:grid; gap:1.25rem; min-width:0; }
.contact-form label { display:grid; gap:.45rem; font-size:1rem; }
.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.contact-form input:not([type=checkbox]), .contact-form select, .contact-form textarea { width:100%; min-width:0; min-height:48px; padding:.8rem; border:1px solid #9a9a92; border-radius:4px; background:white; color:var(--ink); font:inherit; }
.contact-form textarea { resize:vertical; }
.contact-form .form-consent { display:flex; align-items:flex-start; gap:.65rem; font-size:.875rem; }
.form-consent input { width:18px; height:18px; margin-top:.2rem; flex-shrink:0; }
.optional { color:var(--muted); font-size:.875rem; }
.form-status { margin:0; font-size:.875rem; }
.contact-form button { justify-self:start; }
.contact-form button:disabled { opacity:.6; cursor:wait; }
@media(max-width:700px) { .sponsor-heading { align-items:flex-start; flex-direction:column; } .sponsor-logos { gap:.75rem; } .sponsor-logo-placeholder { padding:.75rem; } .form-pair { grid-template-columns:1fr; } }
@media(max-width:400px) { .sponsor-logos { grid-template-columns:1fr; } }

.sponsor-invite { flex-direction:column; align-items:stretch; gap:2rem; }
.sponsor-contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:8vw; }
.contact-intro p:not(.eyebrow) { max-width:370px; color:var(--muted); margin-top:1.5rem; }
@media(max-width:800px) { .sponsor-contact { grid-template-columns:1fr; gap:2.5rem; } }
.hero-art img { -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent); }
/* An open, illustrated first screen with a quiet paper wash under the copy. */
.hero { position:relative; isolation:isolate; display:flex; align-items:center; min-height: min(800px,calc(100svh - 82px)); padding:6rem 7vw; overflow:hidden; }
.hero-copy { position:relative; z-index:2; width: min(100%,720px); max-width:none; }
.hero h1 { max-width:720px; font-size:clamp(3.6rem,6vw,6.4rem); line-height:1; }
.hero-lede { max-width:550px; font-size:1.15rem; }
.hero .eyebrow { max-width:510px; }
.hero-art { position:absolute; z-index:0; width:88%; max-width:none; right:-7%; top:50%; transform:translateY(-50%); margin:0; pointer-events:none; }
.hero-art img { width:100%; height:auto; }
.hero::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--paper) 0%,rgba(247,245,240,.98) 21%,rgba(247,245,240,.89) 36%,rgba(247,245,240,.55) 49%,rgba(247,245,240,.1) 65%,transparent 78%); }
@media(min-width:1600px) { .hero { min-height:850px; } .hero-art { width:80%; right:-2%; } }
@media(max-width:980px) { .hero { min-height:720px; padding-top:4.5rem; padding-bottom:4.5rem; } .hero-copy { width:85%; } .hero h1 { font-size:clamp(3.5rem,7.7vw,5.4rem); } .hero-art { width:120%; right:-37%; } .hero::after { background:linear-gradient(90deg,var(--paper) 0%,rgba(247,245,240,.94) 28%,rgba(247,245,240,.75) 50%,rgba(247,245,240,.2) 80%,transparent); } }
@media(max-width:600px) { .hero { display:block; min-height:0; padding:3.5rem 5vw 300px; } .hero-copy { width:100%; } .hero h1 { font-size:clamp(2.75rem,11vw,4rem); } .hero-lede { font-size:1.05rem; max-width:100%; } .hero-art { width:125%; right:-17%; top:auto; bottom:-15px; transform:none; } .hero::after { background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 48%,rgba(247,245,240,.94) 58%,rgba(247,245,240,.25) 73%,transparent 86%); } }

.simple-footer { background:var(--ink); color:var(--paper); padding:1.5rem 7vw; min-height:0; border:0; }
.simple-footer p { color:#c8c4bc; }
#join-dialog { border:0; padding:3rem; width:min(560px,calc(100% - 2rem)); max-height:90svh; overflow:auto; background:var(--paper); color:var(--ink); }
#join-dialog::backdrop { background:rgba(24,23,22,.6); backdrop-filter:blur(5px); }
#join-dialog h2 { font-size:3.5rem; margin:.5rem 0 2rem; }
.dialog-close { position:absolute; right:1rem; top:.5rem; border:0; background:none; font:2rem var(--sans); cursor:pointer; width:44px; height:44px; }
@media(max-width:600px) { #join-dialog { padding:2rem 1.5rem; } .simple-footer { padding:1.25rem 5vw; flex-direction:column; align-items:flex-start; gap:1rem; } }

/* Keep the page still while the signup dialog is open. */
html.modal-open { overflow:hidden; scroll-behavior:auto; }
body.modal-open { position:fixed; width:100%; overflow:hidden; }
#join-dialog { padding:2rem 2.25rem; max-height:calc(100dvh - 2rem); overscroll-behavior:contain; }
#join-dialog .eyebrow { margin-bottom:.5rem; }
#join-dialog h2 { font-size:clamp(2.25rem,6vw,3rem); line-height:1.08; margin:.5rem 0 1.25rem; }
#join-dialog [hidden] { display:none !important; }
#join-dialog .join-form { gap:.8rem; }
#join-dialog .microcopy:empty { display:none; }
#join-success { padding:1rem 0; }
.success-mark { font-size:2rem; color:var(--cardinal); margin:0 0 1rem; }
#join-success > p:not(.success-mark) { color:var(--muted); margin:0 0 1.5rem; }
#success-title:focus { outline:none; }
@media(max-width:600px) { #join-dialog { padding:1.75rem 1.5rem; } }

/* A deep garnet invitation with a slow, soft wash of light. */
#open-join {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:48px;
  min-width:124px;
  padding:.65rem 1.65rem;
  border:1px solid #741b25;
  border-radius:999px;
  background:linear-gradient(115deg,#50101b 0%,#8c2635 32%,#a64049 48%,#6b1726 70%,#50101b 100%);
  background-size:240% 160%;
  color:#fff9f2;
  box-shadow:0 3px 10px rgba(80,16,27,.16),inset 0 1px 0 rgba(255,235,216,.2);
  font-size:1rem;
  font-weight:500;
  line-height:1.25;
  letter-spacing:.01em;
  animation:agora-button-flow 9s ease-in-out infinite alternate;
  transition:box-shadow .25s ease,transform .25s ease;
}
#open-join::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-80% -40%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,212,180,.2),transparent 62%);
  transform:translateX(-25%) rotate(-20deg);
  animation:agora-button-light 7s ease-in-out infinite alternate;
}
#open-join:hover {
  background-color:#741b25;
  box-shadow:0 5px 16px rgba(80,16,27,.25),inset 0 1px 0 rgba(255,235,216,.3);
  transform:translateY(-1px);
}
#open-join:active { transform:translateY(0); box-shadow:0 2px 6px rgba(80,16,27,.18); }
#open-join:focus-visible { outline:2px solid var(--cardinal-dark); outline-offset:4px; }
@keyframes agora-button-flow { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@keyframes agora-button-light { from { transform:translateX(-25%) rotate(-20deg); } to { transform:translateX(25%) rotate(15deg); } }
@media(max-width:600px) {
  #open-join { min-height:44px; min-width:108px; padding:.55rem 1.35rem; font-size:.9375rem; }
  .hero-actions { margin-top:1.75rem; }
}
@media(prefers-reduced-motion:reduce) {
  #open-join,#open-join::before { animation:none; transition:none; }
  #open-join { background-position:45% 50%; }
  #open-join:hover { transform:none; }
}