/* The original golden-key scene joins the navigation and fades into the page. */
.things-page .page-shell { --things-inset: clamp(1rem, 3vw, 2rem); max-width: none; padding-top: 0; }
.things-page .things-gallery-section, .things-page .tumblethorn-footer { max-width: 1496px; margin-inline: auto; }
.things-page .top-nav.site-nav { position: absolute; top: 1rem; left: max(var(--things-inset), calc((100% - 1496px) / 2)); right: max(var(--things-inset), calc((100% - 1496px) / 2)); margin: 0; }
.things-page .things-hero {
    position: relative; isolation: isolate; display: flex; align-items: center;
    min-height: clamp(30rem, 40vw, 37rem);
    padding: 10rem max(calc(var(--things-inset) + 4vw), calc((100% - 1392px) / 2)) 2.5rem;
    margin: 0 calc(-1 * var(--things-inset)) 0.75rem;
    border: 0; border-radius: 0; background: transparent;
}
.things-hero::before, .things-hero-art {
    position: absolute; inset: 0; pointer-events: none;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent);
}
.things-hero-art { margin: 0; z-index: -2; background: #eaf6ff; }
.things-hero-art img { position: absolute; right: 0; top: 0; width: 76%; height: 100%; object-fit: cover; object-position: center 40%; mask-image: linear-gradient(90deg, transparent, #000 24%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%); }
.things-hero::before { content: ''; z-index: -1; background: linear-gradient(90deg, #eaf6ff 0%, #eaf6fff5 27%, #eaf6ffc4 37%, #eaf6ff35 50%, transparent 60%); }
.things-hero-copy { width: 43%; min-width: 0; max-width: 32rem; }
.things-hero h1 { margin: 0; font: 900 clamp(2rem, 4.4vw, 4.25rem) / 1.12 var(--font-ui); letter-spacing: -0.035em; }
.things-title-emma, .things-title-line { display: block; }
.things-title-emma { color: #eb4f85; }
.things-title-magic { color: #e99224; }
.things-title-things { color: #209bab; }
.things-hero-intro { margin: 1rem 0 1.25rem; color: #193a78; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 800; line-height: 1.5; }
.things-hero .things-game-status {
    display: flex; align-items: center; gap: 0.75rem; max-width: 16rem; min-height: 0;
    padding: 0.75rem 1rem; border: 2px solid #e9bd66; border-radius: 1rem;
    background: linear-gradient(180deg, #9237e4 0%, #641cc2 45%, #360c80 100%);
    color: #fff; font-size: 0.95rem; line-height: 1.25; text-shadow: 0 1px 2px #320c72;
    box-shadow: inset 0 1px 0 #ffffff70, 0 3px 8px #46117a30;
}
.things-count { flex-shrink: 0; font-size: 2.8rem; line-height: 1; font-weight: 900; }
@media (min-width: 721px) and (max-width: 1180px) {
    .things-page .things-hero { min-height: 28rem; padding-top: 7rem; }
}
@media (max-width: 720px) {
    .things-page .things-hero { min-height: 0; padding: calc(9rem + 60vw) 1.25rem 1.5rem; }
    .things-hero-art img { top: 9rem; width: 100%; height: auto; aspect-ratio: 3 / 2; object-position: center; mask-image: none; -webkit-mask-image: none; }
    .things-hero::before { background: linear-gradient(180deg, #eaf6ff 0 9rem, transparent 11rem, transparent calc(9rem + 45vw), #eaf6ff calc(9rem + 64vw)); }
    .things-hero-copy { width: 100%; max-width: none; }
    .things-hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
    .things-hero-intro { margin: 0.65rem 0 0.8rem; }
    .things-hero .things-game-status { font-size: 0.9rem; }
    .things-count { font-size: 2.2rem; }
}