:root {
  --gold: #d9a02a;
  --gold-soft: #b98a34;
  --cream: #f2eadf;
  --muted: #c8b9a5;
  --black: #050403;
  --panel: #17100a;
  --line: rgba(217, 160, 42, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #000; }
body { margin: 0; min-height: 100%; background: #000; color: var(--cream); font-family: Georgia, "Times New Roman", serif; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 2147483647; padding: .75rem 1rem; background: var(--gold); color: #000; }
.skip-link:focus { top: 1rem; }

.hero { position: relative; min-height: min(760px, calc(100vh - 84px)); overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid var(--line); isolation: isolate; }
.hero-backdrop { position: absolute; z-index: -2; inset: 0; background-image: url("assets/interactive-mysteries-gold-master.webp"); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #000 0, #000 48%, rgba(0,0,0,.88) 54%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.08) 100%), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.2) 75%, #080503 100%); }
.hero-copy { width: min(620px, calc(100% - 48px)); margin-left: max(28px, calc((100vw - 1360px) / 2)); padding: 5rem 0; }
.eyebrow { margin: 0 0 1rem; color: var(--gold); font: 700 .72rem Arial, sans-serif; letter-spacing: .27em; text-transform: uppercase; }
.hero h1 { max-width: 10ch; margin: .6rem 0 1.2rem; font-size: clamp(4rem, 6vw, 6.6rem); font-weight: 400; letter-spacing: -.04em; line-height: .9; text-wrap: balance; }
.imprint { margin: 0 0 1rem; color: var(--gold); font-size: 1.22rem; font-weight: 700; }
.hero-copy > p:not(.eyebrow, .imprint, .hero-belief) { max-width: 580px; color: #dfd2c1; font-size: 1.04rem; line-height: 1.67; }
.hero-belief { max-width: 570px; margin-top: 1.6rem; padding: 1.2rem 0; border-block: 1px solid var(--line); color: var(--gold); font-size: 1.02rem; font-weight: 700; letter-spacing: .025em; line-height: 1.55; text-transform: uppercase; }
.scroll-cue { display: inline-block; margin-top: 1.1rem; color: var(--gold); font-style: italic; text-decoration: none; }

.repertoire { padding: 6rem max(24px, 4vw) 6.5rem; background: radial-gradient(circle at 50% 0, #29170c 0, #0d0805 32rem, #050403 70rem); }
.section-intro { max-width: 920px; margin: 0 auto 3.4rem; text-align: center; }
.section-intro .eyebrow, .collection-heading .eyebrow { text-align: center; }
.section-intro h2 { margin: 0; color: var(--gold); font-size: clamp(2.5rem, 4vw, 4.15rem); font-weight: 400; line-height: 1.02; text-wrap: balance; }
.section-intro > p:not(.eyebrow) { max-width: 760px; margin: 1.2rem auto 0; color: #dfd1c0; font-size: 1.15rem; line-height: 1.55; }
.section-intro .catalogue-depth { max-width: 820px; margin-top: 1.55rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; }
.catalogue-depth strong { color: #eadcca; font-weight: 400; }

.mystery-grid { display: grid; width: min(1320px, 100%); margin-inline: auto; gap: 1.25rem; }
.mystery-grid--individual { grid-template-columns: repeat(4, 1fr); }
.mystery-grid--collections { grid-template-columns: repeat(2, 1fr); }
.mystery-card { overflow: hidden; display: flex; min-width: 0; flex-direction: column; background: linear-gradient(145deg, #1c130d, #0d0906); border: 1px solid var(--line); box-shadow: 0 20px 44px rgba(0,0,0,.34); transition: transform .22s ease, border-color .22s ease; }
.mystery-card:hover { transform: translateY(-4px); border-color: rgba(217,160,42,.78); }
.card-art { min-height: 220px; background-color: #0b0805; background-repeat: no-repeat; border-bottom: 1px solid var(--line); }
.image-signfeld { background-image: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18)), url("assets/signfeld-card-clean.webp"); background-size: cover; background-position: center; }
.image-cafe { background-image: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18)), url("assets/cafe-rescue-card-clean.webp"); background-size: cover; background-position: center; }
.image-dead { background-image: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18)), url("assets/dead-reckoning-card-clean.webp"); background-size: cover; background-position: center; }
.image-elliot { background-image: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.2)), url("assets/elliot-brick-collection-clean.webp"); background-size: cover; background-position: center; }
.image-mcdeath { background-image: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.62)), url("assets/mcdeath-hero.webp"); background-size: cover; background-position: center; }
.image-christmas { background-image: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.65)), url("assets/christmas-mysteries-hero.webp"); background-size: cover; background-position: center; }
.card-copy { display: flex; flex: 1; flex-direction: column; padding: 1.45rem 1.45rem 1.55rem; }
.card-kicker { margin: 0 0 .6rem; color: var(--gold); font: 700 .62rem Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.mystery-card h3 { margin: 0; color: #f2e4d0; font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 400; line-height: 1.08; text-transform: uppercase; }
.mystery-card h3 small { display: block; margin-top: .25rem; color: #d8c6b1; font-size: .52em; font-style: italic; line-height: 1.2; text-transform: none; }
.mystery-card .card-copy > p:not(.card-kicker) { color: #d2c3b3; font-size: .9rem; line-height: 1.55; }
.mystery-card a { display: block; margin-top: auto; padding-top: 1rem; color: var(--gold); border-top: 1px solid rgba(217,160,42,.24); font: 700 .67rem Arial, sans-serif; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.mystery-card a span { float: right; }
blockquote { max-width: 1040px; margin: 5.5rem auto; padding: 2.5rem 1.2rem; border-block: 1px solid var(--line); color: #eadcca; font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1.25; text-align: center; }
blockquote::before { content: "“"; display: block; height: 2.2rem; color: var(--gold); font-size: 4.8rem; line-height: .7; }
blockquote strong, blockquote span { display: block; }
blockquote strong { color: var(--gold); font-weight: 400; }

.collection-heading { max-width: 780px; margin: 0 auto 2.5rem; text-align: center; }
.collection-heading h2 { margin: 0; color: #eee0cd; font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 400; line-height: 1.04; text-wrap: balance; }
.collection-card { border-color: rgba(217,160,42,.68); }
.collection-card .card-art { min-height: 310px; }
.collection-card h3 { font-size: clamp(2rem, 3vw, 3.1rem); }
.velvet { background: linear-gradient(145deg, #221927, #0d0906); }
.christmas-collection { background: linear-gradient(145deg, #11231f, #190d0a); }

.closing-thesis { padding: 5.5rem 1.2rem; border-block: 1px solid var(--line); background: #090604; text-align: center; }
.closing-thesis p { max-width: 32ch; margin: auto; color: #e7d8c6; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.3; }
.closing-thesis strong { color: var(--gold); font-weight: 400; }
.continue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 3rem max(24px, 5vw); background: #050403; }
.continue a { position: relative; display: grid; padding: 1.4rem 3.5rem 1.4rem 1.4rem; border: 1px solid var(--line); text-decoration: none; }
.continue b { color: var(--gold); font: 700 .72rem Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.continue span { margin-top: .4rem; color: var(--muted); font: .82rem Arial, sans-serif; }
.continue i { position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-style: normal; }
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem max(24px, 5vw); border-top: 1px solid var(--line); background: #050403; }
.brand-mark { color: var(--gold); font-size: 1.8rem; font-style: italic; }
.site-footer small { color: var(--muted); font: .72rem Arial, sans-serif; }

@media (max-width: 1100px) {
  .hero-backdrop { background-size: auto 100%; background-position: center top; }
  .mystery-grid--individual { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .hero { min-height: 41rem; align-items: end; }
  /* On phones, crop the Gold Master to the scene at right so its embedded
     desktop typography does not ghost behind the live mobile copy. */
  .hero-backdrop { background-size: auto 135%; background-position: right top; }
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.95) 39%, #000 70%); }
  .hero-copy { width: calc(100% - 32px); margin: 0 16px; padding: 3.7rem 0 2.5rem; }
  .hero h1 { max-width: 10ch; font-size: clamp(2.65rem, 11.5vw, 3.45rem); line-height: .92; }
  .hero-copy > p:not(.eyebrow, .imprint, .hero-belief) { font-size: .96rem; }
  .repertoire { padding: 4rem 16px; }
  .section-intro h2 { font-size: 2.45rem; }
  .mystery-grid--individual, .mystery-grid--collections, .continue { grid-template-columns: 1fr; }
  .card-art, .collection-card .card-art { min-height: 230px; }
  blockquote { margin: 4rem auto; }
}

@media (max-width: 440px) {
  .card-art, .collection-card .card-art { min-height: 190px; }
  .card-copy { padding: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mystery-card { transition: none; }
}