:root {
  color-scheme: dark;
  --sans: "Century Gothic", "Avenir Next", Avenir, system-ui, sans-serif;
  --secondary: #c9c9c9;
}
* { box-sizing: border-box; }
body { margin: 0; background: #000; color: #fff; font: 1rem/1.65 var(--sans); }
.shell { width: min(80%, 76rem); margin-inline: auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-underline-offset: .24em; }
a:hover { color: var(--secondary); }
a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.skip { position: absolute; left: 1rem; top: 1rem; transform: translateY(-200%); background: #fff; color: #000; padding: .5rem; }
.skip:focus { transform: translateY(0); }
.site-header, .site-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; }
.site-header { padding-block: 1.55rem; }
.brand { font-size: clamp(1.65rem, 3.3vw, 2.65rem); font-weight: 750; letter-spacing: -.055em; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: .25rem clamp(1.25rem, 5vw, 4rem); }
nav a { padding-block: .45rem; text-decoration: none; font-weight: 650; font-size: .9rem; }
nav a:hover, .nav-join { text-decoration: underline; }
.hero { padding-block: clamp(2.4rem, 4.9vw, 4.6rem) clamp(4rem, 8vw, 7.5rem); }
h1 { max-width: 49rem; font-size: clamp(1.55rem, 2.7vw, 2.35rem); font-weight: 500; line-height: 1.38; letter-spacing: -.035em; }
.eyebrow { font-size: .88rem; text-transform: uppercase; font-weight: 750; }
.hero .eyebrow { margin-top: clamp(2.4rem, 6vw, 5rem); margin-bottom: .2rem; }
.section, .join { margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.section-label, .join .eyebrow { margin-bottom: .5rem; }
h2 { max-width: 41rem; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.22; font-weight: 550; letter-spacing: -.045em; }
.intro { max-width: 37rem; margin-top: .85rem; color: var(--secondary); }
.topics, .cities { display: grid; gap: 1.5rem; max-width: 37rem; margin-top: 1.75rem; }
h3 { font-size: 1.05rem; font-weight: 700; }
h3 small { color: var(--secondary); font-size: .78rem; font-weight: 400; margin-left: .4rem; }
.topics p, .city p { color: var(--secondary); margin-top: .18rem; }
.city .text-link { display: inline-block; margin-top: .25rem; }
.join-panel > a { display: inline-block; margin-top: 1rem; }
.site-footer { justify-content: flex-start; flex-wrap: wrap; border-top: 1px solid #303030; padding-block: 1.25rem 2.5rem; color: var(--secondary); font-size: .88rem; }
.site-footer .brand { font-size: 1.1rem; color: #fff; }
@media (max-width: 660px) {
  .shell { width: calc(100% - 2.5rem); }
  .site-header { flex-direction: column; gap: .3rem; }
}