@font-face {
  font-family: 'Golos Text';
  src: url('fonts/GolosText.woff') format('woff');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded.woff') format('woff');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
:root {
  --navy: #182c45;
  --mint: #88cbb4;
  --coral: #f47d60;
  --cream: #f5e6ce;
}
* { box-sizing: border-box; }
html {
  scroll-padding-top: 24px;
}
body {
  min-width: 1320px;
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: 'Golos Text', Arial, sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 6px;
}
img, svg { display: block; width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; }
h1, h2 { font-family: 'Unbounded', sans-serif; font-weight: 600; letter-spacing: -.045em; }
h1 { font-size: 60px; }
h2 { font-size: 46px; }
h3 { font-size: 26px; }
.container {
  width: 1264px;
  margin: 0 auto;
}
.section { padding: 96px 0; }
.dark { background: var(--navy); color: var(--cream); }
.light { background: var(--cream); color: var(--navy); }
.lead, .body-copy { font-size: 24px; line-height: 1.5; }
.body-copy p + p { margin-top: 24px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 24px;
  background: var(--mint);
  color: var(--navy);
  font-size: 19px;
  font-weight: 700;
}
.button:hover { background: var(--coral); }
.button span { font-size: 25px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid #88cbb466;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  font-weight: 700;
  white-space: nowrap;
}
.brand-mark { width: 44px; }
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-size: 16px;
}
.main-nav a, .footer-nav a { padding: 5px 0; }
.main-nav a:hover, .footer-nav a:hover {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: 32px;
  min-height: 680px;
  padding: 64px 0 90px;
}
.hero .lead { max-width: 620px; margin-top: 32px; }
.hero .button { margin-top: 40px; }
.hero-door svg { max-height: 510px; }
.about-grid, .history-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: 72px;
}
.about .body-copy { margin-top: 32px; }
.ticket {
  display: inline-block;
  margin-top: 38px;
  padding: 20px 24px;
  background: var(--mint);
  font-size: 24px;
  font-weight: 700;
}
.photos { max-width: 390px; overflow: visible; }
.history { padding-top: 20px; }
.history-grid { grid-template-columns: 1fr 1fr; margin-top: 56px; }
.computer { max-width: 540px; }
.space { border-top: 1px solid #182c4533; }
.eyebrow {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.section-heading {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 48px;
}
.section-heading > p { max-width: 460px; font-size: 21px; }
.space-photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.space-photo figcaption { margin-top: 14px; font-size: 15px; }
.space-notes, .values-grid, .people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.space-notes article { border-top: 1px solid var(--navy); padding-top: 22px; }
.number { display: block; margin-bottom: 20px; font-size: 14px; }
.space-notes p, .steps p, .value p, .person p { margin-top: 16px; font-size: 20px; }
.visit { background: var(--mint); color: var(--navy); }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
}
.steps li { border-top: 2px solid var(--navy); padding-top: 22px; }
.step-number { display: block; margin-bottom: 32px; font-size: 48px; line-height: 1; }
.value { padding: 28px; background: var(--cream); color: var(--navy); }
.value img, .person img { width: 80px; height: 90px; margin-bottom: 26px; }
.values-note { margin-top: 36px; color: var(--mint); font-size: 21px; }
.people-grid { padding-top: 40px; border-top: 1px solid var(--navy); }
.objects { background: var(--coral); color: var(--navy); }
.objects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 42px 28px; }
.objects-grid img { aspect-ratio: 16 / 9; object-fit: cover; }
.objects-grid figcaption { padding-top: 20px; }
.objects-grid p { margin-top: 10px; font-size: 19px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px; }
.faq-list { border-top: 1px solid var(--navy); }
.faq-list details { padding: 24px 0; border-bottom: 1px solid var(--navy); }
.faq-list summary { cursor: pointer; font-size: 23px; font-weight: 700; line-height: 1.4; }
.faq-list summary::marker { color: var(--navy); }
.faq-list p { padding-top: 20px; font-size: 20px; }
.join-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; }
.join-note { margin-top: 24px; color: var(--mint); font-size: 17px; }
.join .button { margin-top: 32px; }
.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-top: 40px;
  border-top: 1px solid #88cbb466;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 16px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 0 32px;
  color: var(--mint);
}
.project-credit { font-size: 13px; color: var(--cream); }
.skip-link { position: absolute; left: 20px; top: -100px; padding: 12px; background: var(--mint); color: var(--navy); }
.skip-link:focus { top: 10px; }