/* The public invitation uses the same approved palette, type and photography as the game. */
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 10; padding: .7rem; background: var(--paper); color: var(--paper-ink); }
.skip:focus { top: 1rem; }
.site main { min-width: 0; }
.site .hero .copy { width: min(49%, 560px); }
.site .primary { text-decoration: none; width: fit-content; }
.site .release { font-size: .88rem; color: var(--dim); }
.site-section { padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid var(--rule); }
.site-section h2 { font: 400 clamp(2rem, 4.2vw, 3.6rem)/1.16 var(--display); margin: 0 0 1.5rem; text-wrap: balance; }
.site-section h3 { font: 400 1.5rem/1.25 var(--display); margin: 0 0 .65rem; }
.site-section p { max-width: 65ch; }
.demo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 5vw, 5rem); }
.demo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.demo audio { width: 100%; margin: .5rem 0 1rem; }
.site details { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.site summary { cursor: pointer; font-weight: 600; }
.site details p { color: var(--dim); }
.night-steps { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: night; }
.night-steps li::before { counter-increment: night; content: counter(night); display: block; font: 400 3rem/1 var(--display); color: var(--amber); margin-bottom: 1rem; }
.night-steps p { color: var(--dim); margin: 0; }
.included { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; }
.included ul { padding-left: 1.2rem; max-width: 60ch; }
.included li { margin: .8rem 0; }
.requirements { padding: 2rem; background: var(--panel); border-left: 2px solid var(--amber); }
.faq { max-width: 850px; }
.buyer { padding-bottom: 3rem; }
.site-footer { padding: 2rem 0; border-top: 1px solid var(--amber); color: var(--dim); font-size: .85rem; }
.site-footer p { max-width: 75ch; }
.site-footer p:first-child { color: var(--bone); font-weight: 600; }
@media (max-width: 900px) { .night-steps { grid-template-columns: 1fr 1fr; } .included { gap: 2rem; } }
@media (max-width: 700px) {
  .site .topbar { flex-wrap: wrap; gap: 1rem; }
  .site .hero .copy { width: 100%; padding-top: 1rem; }
  .demo, .included, .night-steps { grid-template-columns: 1fr; }
  .demo img { max-height: 320px; }
  .night-steps { gap: 1.8rem; }
  .requirements { padding: 1.4rem; }
}