body { font-family: -apple-system, system-ui, sans-serif; max-width: 680px; margin: 0 auto;
       padding: 1.5rem 1.25rem 4rem; line-height: 1.6; color: #e8e6e1; background: #14181a; }
h1 { color: #d9b873; font-size: 1.7rem; margin: 0.5rem 0 0.25rem; }
h2 { color: #d9b873; font-size: 1.15rem; margin-top: 2.25rem; }
a { color: #d9b873; }
p.muted { color: #9aa39e; font-size: 0.9rem; }

/* Scene banner: full-column-width image between nav and hero. Negative margins cancel
   body padding so the illustration bleeds edge-to-edge within the content column. */
.scene-banner { margin: 0.75rem -1.25rem 0; overflow: hidden; border-radius: 14px; }
.scene-banner img { width: 100%; display: block; }

nav { display: flex; align-items: center; gap: 1.1rem; padding-bottom: 1.25rem;
      border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 1.5rem; }
nav img { width: 32px; height: 32px; border-radius: 8px; }
nav a { color: #e8e6e1; text-decoration: none; font-size: 0.95rem; }
nav a:hover { color: #d9b873; }
nav a.brand { font-weight: 600; margin-right: auto; display: flex; align-items: center; gap: 0.6rem; }

.hero { text-align: center; padding: 1.5rem 0 0.5rem; }
.hero img.appicon { width: 96px; height: 96px; border-radius: 22px;
                    box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.hero .tagline { font-size: 1.15rem; color: #e8e6e1; margin-top: 1rem; }
.hero .sub { color: #9aa39e; }

.shots { display: flex; gap: 12px; justify-content: center; margin: 2rem 0 0.5rem;
         flex-wrap: wrap; }
.shots img { width: 30%; min-width: 150px; max-width: 210px; border-radius: 18px;
             border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 6px 24px rgba(0,0,0,0.45); }

.badge { display: inline-block; background: #1d2426; border: 1px solid rgba(217,184,115,0.35);
         color: #d9b873; border-radius: 999px; padding: 0.4rem 1.1rem; font-size: 0.9rem;
         margin-top: 1.25rem; }

/* Primary hero CTA: solid fill so it outranks the muted informational .badge beside it. */
.hero .cta { display: block; width: fit-content; margin: 1.25rem auto 0; background: #d9b873;
             color: #14181a; font-weight: 600; text-decoration: none; border-radius: 999px;
             padding: 0.65rem 1.6rem; }
.hero .cta:hover { background: #e8c988; }
.hero .badge { display: block; width: fit-content; margin: 0.75rem auto 0; }

/* Inline proof shot: a single supporting screenshot dropped into a section's own prose,
   distinct from the top-of-page .shots preview row. */
.inline-shot { display: block; max-width: 260px; width: 100%; margin: 1.25rem auto;
               border-radius: 18px; border: 1px solid rgba(255,255,255,0.10);
               box-shadow: 0 6px 24px rgba(0,0,0,0.45); }

/* Events list: tighter spacing than a prose list, each item self-contained. */
ul.events-list { padding-left: 1.25rem; margin: 1rem 0; }
ul.events-list li { margin-bottom: 0.6rem; color: #e8e6e1; }
ul.events-list li strong { color: #d9b873; }

/* Ambient mark accent: the free silhouette, centered and hushed, between body and footer. */
.mark-accent { text-align: center; margin: 3rem 0 0; opacity: 0.32; }
.mark-accent img { width: 120px; height: auto; }

footer { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.08);
         color: #9aa39e; font-size: 0.9rem; }
footer a { color: #9aa39e; }
footer a.footer-brand { display: inline-block; margin-bottom: 1rem; opacity: 0.72;
                        transition: opacity 0.15s; }
footer a.footer-brand:hover { opacity: 1; }
/* Stacked logo is taller than horizontal — size by width so proportions are preserved. */
footer img.footer-logo { display: block; width: 120px; height: auto; }
/* Footer text links share the footer's muted color, so underline them to stay distinguishable
   from surrounding text (the brand/logo link is excluded). */
footer p a { text-decoration: underline; }

/* Older engines don't treat <main> as block by default. */
main { display: block; }

/* Skip link: off-screen until keyboard focus brings it into view, so screen-reader and
   keyboard users can jump past the nav straight to the content. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
             background: #1d2426; color: #d9b873; padding: 0.6rem 1rem;
             border: 1px solid rgba(217,184,115,0.35); border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }