/* Ominous: a hotel at night. IM Fell English for the voice, Special Elite for the case notes. */

.om {
  --bg: #070506;
  --fg: #e9e2d6;
  --accent: #ff3b2f;
  --violet: #9b6bff;
  --muted: #a39a8e;
  --paper: #d8d0c0;
  --fell: "IM Fell English", Georgia, serif;
  --type: "Special Elite", "Courier New", monospace;
  font: 400 20px/1.55 var(--fell);
}
.om ::selection { background: var(--accent); color: #000; }
.om .bar__brand { color: var(--fg); }
.om .bar__nav a:hover, .om .bar__nav a[aria-current] { background: var(--fg); color: #000; }
.om .kicker { font-family: var(--type); font-variation-settings: normal; letter-spacing: .18em; color: var(--accent); }
.om .btn { --btn-bg: var(--fg); --btn-fg: #0a0607; }
.om .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); }
.om h2 { font: 400 clamp(40px, 5.6vw, 84px)/1 var(--fell); letter-spacing: -.005em; }

/* ---------- hero: the hallway ---------- */
.om-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: max(100svh, 660px); overflow: hidden; background: #000; }
.om-hero .hall { z-index: -1; }
.om-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(7, 5, 6, .95) 4%, rgba(7, 5, 6, .55) 30%, transparent 55%), radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0, 0, 0, .7)); }
.om-hero__in { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter) clamp(44px, 7vh, 80px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; pointer-events: none; }
.om-hero__in a, .om-hero__in button { pointer-events: auto; }
.om-hero .stamp { color: var(--accent); }
.om-hero h1 img { width: min(560px, 82vw); filter: drop-shadow(0 10px 30px #000); }
.om-hero__line { margin-top: 18px; max-width: 26em; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; font-style: italic; text-shadow: 0 2px 20px #000; }
.om-hero__links { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 30px; }
.om-hero .hall__hint { text-align: right; line-height: 1.6; }
.om-hero .hall__hint b { display: block; font-weight: 400; color: var(--accent); }
@media (max-width: 760px) { .om-hero__in { grid-template-columns: 1fr; } .om-hero .hall__hint { text-align: left; } }

/* ---------- the case file ---------- */
.case { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 100px); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(90px, 12vw, 170px) var(--gutter); }
.case h2 { margin: 18px 0 28px; }
.case p { color: var(--muted); max-width: 30em; }
.case p + p { margin-top: 14px; }
.case strong { color: var(--fg); font-weight: 400; }
.dossier { position: relative; padding: clamp(30px, 4vw, 48px); background: var(--paper); color: #231d18; rotate: 1.5deg; font: 400 16px/1.7 var(--type); box-shadow: 0 40px 60px -20px rgba(0, 0, 0, .9), inset 0 0 70px rgba(80, 60, 30, .35); }
.dossier::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .45; mix-blend-mode: multiply; pointer-events: none; }
.dossier__photo { position: relative; width: 74%; margin: -70px 0 22px auto; padding: 10px 10px 34px; background: #f1ece2; rotate: 4deg; box-shadow: 0 16px 30px rgba(0, 0, 0, .45); }
.dossier__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: contrast(1.1) saturate(.85); }
.dossier__photo figcaption { position: absolute; left: 12px; bottom: 10px; font: 400 13px/1 var(--type); letter-spacing: .06em; color: #4a4038; }
.dossier__clip { position: absolute; top: -26px; right: 22%; width: 26px; height: 64px; border: 4px solid #9a9a9a; border-radius: 14px; z-index: 2; }
.dossier dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; }
.dossier dt { text-transform: uppercase; letter-spacing: .08em; color: #6b5f52; }
.dossier dd { margin: 0; }
.dossier { padding-bottom: 92px; }
.dossier__stamp { position: absolute; right: 26px; bottom: 26px; padding: 6px 12px; border: 3px solid #b3261e; color: #b3261e; font: 400 22px/1 var(--type); letter-spacing: .12em; rotate: -14deg; opacity: .8; mix-blend-mode: multiply; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } .dossier { margin-top: 60px; } }

/* ---------- found footage ---------- */
.tapes { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 10vw, 140px); display: grid; gap: clamp(70px, 10vw, 150px); }
.tape { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.tape:nth-child(even) { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.tape:nth-child(even) .footage { order: 2; }
.tape h3 { margin-top: 14px; font: 400 clamp(34px, 3.6vw, 52px)/1.02 var(--fell); }
.tape p { margin-top: 18px; color: var(--muted); }
@media (max-width: 860px) { .tape, .tape:nth-child(even) { grid-template-columns: 1fr; } .tape:nth-child(even) .footage { order: 0; } }

.footage { position: relative; overflow: hidden; background: #000; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.footage img { width: 100%; aspect-ratio: 600 / 338; object-fit: cover; filter: brightness(1.35) contrast(1.08); }
.footage--dark img { filter: brightness(2.3) contrast(1.15); }
.footage::before { /* scanlines */ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.footage::after { /* viewfinder corners */
  content: ""; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(#fff, #fff) 0 0 / 22px 2px, linear-gradient(#fff, #fff) 0 0 / 2px 22px,
    linear-gradient(#fff, #fff) 100% 0 / 22px 2px, linear-gradient(#fff, #fff) 100% 0 / 2px 22px,
    linear-gradient(#fff, #fff) 0 100% / 22px 2px, linear-gradient(#fff, #fff) 0 100% / 2px 22px,
    linear-gradient(#fff, #fff) 100% 100% / 22px 2px, linear-gradient(#fff, #fff) 100% 100% / 2px 22px;
  background-repeat: no-repeat; opacity: .7;
}
.footage__hud { position: absolute; inset: 24px 30px; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; font: 400 clamp(11px, 1vw, 14px)/1 var(--type); letter-spacing: .12em; color: rgba(255, 255, 255, .8); text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
.footage__hud span { display: flex; justify-content: space-between; }
.rec::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; border-radius: 50%; background: var(--accent); animation: rec 1.6s steps(1) infinite; vertical-align: -.05em; }
@keyframes rec { 50% { opacity: 0; } }

/* ---------- evidence (screenshots) ---------- */
.evidence { padding: 0 var(--gutter) clamp(80px, 10vw, 140px); }
.evidence__in { max-width: 1320px; margin: 0 auto; }
.evidence h2 { margin: 14px 0 36px; }
.om .shots a { border-radius: 2px; }
.om .shots img { filter: grayscale(.25) brightness(.92); }
.om .shots a:hover img { filter: none; }

/* ---------- facts ---------- */
.om-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1320px; margin: 0 auto; border-top: 1px solid rgba(233, 226, 214, .15); border-bottom: 1px solid rgba(233, 226, 214, .15); }
.om-facts div { padding: 26px var(--gutter) 28px 0; }
.om-facts div + div { padding-left: 26px; border-left: 1px solid rgba(233, 226, 214, .15); }
.om-facts dt { font: 400 12px/1.3 var(--type); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.om-facts dd { margin: 8px 0 0; font-size: 22px; line-height: 1.25; }
.om-facts-wrap { padding: 0 var(--gutter) clamp(80px, 10vw, 140px); }
@media (max-width: 860px) { .om-facts { grid-template-columns: 1fr 1fr; } .om-facts div:nth-child(3) { padding-left: 0; border-left: 0; } .om-facts div:nth-child(n+3) { border-top: 1px solid rgba(233, 226, 214, .15); } }

/* ---------- call to action: the red door ---------- */
.om-cta { position: relative; isolation: isolate; display: grid; place-items: start center; min-height: 96vh; padding: clamp(80px, 12vh, 140px) var(--gutter) 110px; text-align: center; overflow: hidden; }
.om-cta__art { object-position: 50% 70%; }
.om-cta__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.om-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 50% at 50% 55%, rgba(0, 0, 0, .1), rgba(7, 5, 6, .8) 70%), linear-gradient(0deg, var(--bg), transparent 30%, transparent 75%, var(--bg)); }
.om-cta h2 { font-size: clamp(56px, 9vw, 150px); text-shadow: 0 4px 40px #000; }
.om-cta p { margin: 16px auto 0; max-width: 28em; text-shadow: 0 2px 16px #000; }
.om-cta .om-hero__links { justify-content: center; }

.om .also a { background: rgba(255, 255, 255, .04); }
.om .also small { font-family: var(--type); color: var(--muted); }