/* =========================================================
   Unsolved Mysteries 2026 — built from the approved v.6 design
   ========================================================= */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url('../fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url('../fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-700.woff2') format('woff2'); }

:root {
	--um-bg: #090d0a;
	--um-bg-deep: #080c09;
	--um-bg-green: #0e1712;
	--um-bg-vault: #0b1310;
	--um-bg-card: #0a110c;
	--um-ink: #f4f2ea;
	--um-ink-soft: #e8e4d8;
	--um-muted: #9aa79d;
	--um-muted-2: #7f8a80;
	--um-gold: #d9b24b;
	--um-gold-hover: #e6c25c;
	--um-gold-text: #c7a54f;
	--um-on-gold: #151007;
	--um-line: rgba(255, 255, 255, 0.06);
	--um-ease: cubic-bezier(.2, .7, .2, 1);
	--um-mono: 'Space Mono', ui-monospace, monospace;
	--um-wrap: 1200px;
}

/* ---------- base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { background: var(--um-bg); color: var(--um-ink); font-family: 'Archivo', sans-serif; -webkit-font-smoothing: antialiased; }
img, video, iframe { display: block; max-width: 100%; }
a { color: var(--um-gold-text); text-decoration: none; transition: color .18s; }
a:hover { color: var(--um-gold-hover); }
::selection { background: var(--um-gold); color: var(--um-on-gold); }
input, select, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #637066; }
:focus-visible { outline: 2px solid var(--um-gold); outline-offset: 3px; }

.screen-reader-text, .um-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.um-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--um-gold); color: var(--um-on-gold); padding: 10px 16px; border-radius: 4px; font-weight: 700; }
.um-skip:focus { top: 12px; color: var(--um-on-gold); }

/* film grain over everything */
body::after {
	content: ''; position: fixed; inset: -120px; z-index: 95; pointer-events: none; opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grainShift 1.1s steps(4) infinite;
}

.um-site { background: var(--um-bg); color: var(--um-ink); min-height: 100vh; width: 100%; }
.um-wrap { position: relative; max-width: var(--um-wrap); margin: 0 auto; padding: 0 32px; }
.um-wrap--narrow { max-width: 720px; }
.um-mono { font-family: var(--um-mono); }

/* ---------- keyframes ---------- */
@keyframes riseUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(217,178,75,0.18); } 50% { box-shadow: 0 0 0 8px rgba(217,178,75,0.05); } }
@keyframes kenburns { 0% { transform: scale(1.06); } 100% { transform: scale(1.18); } }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(2); opacity: 0; } 100% { opacity: 0; } }
@keyframes fogDrift { 0% { transform: translate3d(-3%,0,0) scale(1.05); opacity: .7; } 100% { transform: translate3d(3%,-2%,0) scale(1.12); opacity: 1; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rowOut { to { opacity: 0; transform: translateY(-18px); } }
@keyframes bounceY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes charIn { from { opacity: 0; transform: translateY(.6em) rotate(4deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes grainShift { 0% { transform: translate(0,0); } 25% { transform: translate(-40px,30px); } 50% { transform: translate(30px,-50px); } 75% { transform: translate(-30px,-20px); } 100% { transform: translate(0,0); } }

/* ---------- shared bits ---------- */
.um-tri { width: 0; height: 0; border-left: 8px solid var(--um-on-gold); border-top: 5px solid transparent; border-bottom: 5px solid transparent; flex-shrink: 0; }
.um-btn {
	display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--um-on-gold); background: var(--um-gold); padding: 13px 22px; border-radius: 5px; border: 1px solid transparent; cursor: pointer;
	transition: background .2s, transform .2s, border-color .2s, color .2s;
}
.um-btn:hover { background: var(--um-gold-hover); color: var(--um-on-gold); }
.um-btn--lift:hover { transform: translateY(-2px); }
.um-btn--lg { gap: 13px; font-size: 15px; font-weight: 600; letter-spacing: .06em; padding: 18px 30px; border-radius: 3px; color: #1a1408; }
.um-btn--lg .um-tri { border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
.um-btn--ghost { background: transparent; color: var(--um-ink-soft); border-color: rgba(255,255,255,0.22); font-weight: 700; }
.um-btn--ghost:hover { background: transparent; border-color: var(--um-gold); color: var(--um-gold); }
.um-btnrow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.um-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--um-gold-text); margin-bottom: 14px; }
.um-eyebrow--sm { font-size: 11px; letter-spacing: .28em; margin-bottom: 16px; }
.um-h2 { font-size: 46px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: var(--um-ink); line-height: 1.1; }
.um-h2--lg { font-size: 52px; }
.um-h3 { font-size: 40px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: var(--um-ink); line-height: 1.1; }
.um-display { margin-top: 18px; font-size: clamp(32px, 3.6vw, 50px); font-weight: 900; line-height: .98; letter-spacing: -.02em; text-transform: uppercase; color: var(--um-ink); }
.um-rule { width: 72px; height: 2px; background: var(--um-gold); margin-top: 22px; }
.um-lede { margin-top: 22px; font-size: 15.5px; line-height: 1.75; color: #a9b4aa; max-width: 380px; text-wrap: pretty; }
.um-intro { max-width: 640px; margin-top: 18px; font-size: 15.5px; line-height: 1.65; color: var(--um-muted); }
.um-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.um-more { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; padding-bottom: 8px; }
.um-soon { font-size: 10px; font-weight: 700; letter-spacing: .02em; background: var(--um-gold); color: var(--um-on-gold); padding: 3px 9px; border-radius: 999px; text-transform: none; }
.um-soon--sm { font-size: 8px; letter-spacing: .1em; padding: 2px 5px; border-radius: 3px; }
.um-texture { position: absolute; inset: 0; background: url('../img/texture-paper.png') center / cover; opacity: .18; mix-blend-mode: luminosity; pointer-events: none; }
.um-texture--strong { opacity: .22; }
.um-round {
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(244,242,234,0.35); background: rgba(9,13,10,0.55);
	backdrop-filter: blur(6px); color: var(--um-ink); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: border-color .2s, background .2s;
}
.um-round:hover { border-color: var(--um-gold); background: rgba(9,13,10,0.8); }

/* reveal-on-scroll (only hidden once JS is running) */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--um-ease), transform .7s var(--um-ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
[data-parallax], [data-mouse] { will-change: transform; }

/* scroll progress + back to top */
#um-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--um-gold); z-index: 100; transition: width .12s linear; pointer-events: none; }
#um-top {
	position: fixed; right: 26px; bottom: 26px; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--um-gold); color: var(--um-on-gold);
	font-size: 20px; font-weight: 800; cursor: pointer; z-index: 100; opacity: 0; transform: translateY(14px); pointer-events: none;
	transition: opacity .3s, transform .3s, background .2s; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
#um-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
#um-top:hover { background: var(--um-gold-hover); }

/* =========================================================
   Header
   ========================================================= */
.um-header { position: sticky; top: 0; z-index: 50; background: rgba(9,13,10,0.92); border-bottom: 1px solid rgba(255,255,255,0.04); animation: dropIn .6s ease both; transition: box-shadow .3s; }
.admin-bar .um-header { top: 32px; }
.um-header.is-scrolled { box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.um-header__row { padding: 18px clamp(20px, 4vw, 60px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; transition: padding .35s ease; }
.um-header.is-compact .um-header__row { padding-top: 9px; padding-bottom: 9px; }
.um-header__logo { display: block; flex-shrink: 0; }
.um-header__logo img { height: clamp(38px, 5vw, 60px); width: auto; transition: height .35s ease; }
.um-header.is-compact .um-header__logo img { height: 40px; }

.um-nav { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: 14px clamp(20px, 2.4vw, 42px); }
.um-nav__link { font-size: clamp(12px, 1.3vw, 14.5px); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #cfd6d0; display: flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; transition: color .2s; }
.um-nav__link:hover, .um-nav__link.is-current { color: var(--um-gold); }
.um-nav__link:hover { color: var(--um-gold-hover); }
.um-nav__cta { margin-left: clamp(6px, 1vw, 16px); font-size: clamp(11.5px, 1.2vw, 13px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #1a1408; background: var(--um-gold); padding: 12px clamp(14px, 1.8vw, 22px); border-radius: 3px; white-space: nowrap; flex-shrink: 0; transition: background .2s; }
.um-nav__cta:hover { background: var(--um-gold-hover); color: #1a1408; }

.um-burger { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 1px solid rgba(255,255,255,0.14); border-radius: 4px; cursor: pointer; color: var(--um-ink); }
.um-burger span { width: 18px; height: 1.5px; background: currentColor; display: block; }

/* =========================================================
   Hero
   ========================================================= */
.um-hero { position: relative; min-height: 648px; display: flex; align-items: flex-end; overflow: hidden; background: var(--um-bg-deep); }
.um-hero__media { position: absolute; inset: -14% 0; }
.um-hero__media img, .um-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: .62; }
.um-hero__media img { animation: kenburns 26s ease-in-out infinite alternate; }
.um-hero__media video { opacity: 1; } /* The client video is darker than the design clip (2026-10-27). */
.um-hero__ghost { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); font-size: 220px; font-weight: 900; letter-spacing: -.02em; color: rgba(217,178,75,0.045); white-space: nowrap; pointer-events: none; user-select: none; }
.um-hero__fog { position: absolute; inset: 0; pointer-events: none; animation: fogDrift 18s ease-in-out infinite alternate; background: radial-gradient(120% 80% at 20% 100%, rgba(120,150,130,0.10), transparent 60%), radial-gradient(100% 70% at 85% 90%, rgba(90,120,100,0.08), transparent 55%); }
.um-hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, #080c09 2%, transparent 40%), linear-gradient(90deg, rgba(6,10,7,0.85) 0%, rgba(6,10,7,0.45) 42%, rgba(6,10,7,0) 100%); } /* Lightened for the client video (2026-10-27); design was .96 / .72 / .28. */
.um-hero__spot { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.um-hero__content { position: relative; max-width: var(--um-wrap); margin: 0 auto; padding: 100px 32px; width: 100%; }
.um-hero__eyebrow { margin-bottom: 22px; font-size: 15px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--um-gold); white-space: pre-wrap; animation: riseUp .8s var(--um-ease) both .15s; }
.um-hero__title { font-size: 88px; line-height: 1.02; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; max-width: 820px; }
.um-hero__line { display: block; color: #f0eee6; animation: riseUp .8s var(--um-ease) both; }
.um-hero__line.is-gold { color: var(--um-gold); }
.um-hero__line .um-char { display: inline-block; white-space: pre; animation: charIn .8s var(--um-ease) both; }
.um-hero__text { margin-top: 24px; max-width: 560px; font-size: 20px; line-height: 1.55; color: #b9c2ba; animation: riseUp .8s var(--um-ease) both .66s; }
.um-hero__btn { margin-top: 38px; animation: riseUp .8s var(--um-ease) both .8s; }
.um-hero__controls { position: absolute; bottom: 26px; right: 32px; display: flex; gap: 10px; z-index: 5; }
.um-hero__scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; animation: fadeIn 1s ease both 1.1s; }
.um-hero__scroll span { font-size: 10px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #8a938b; }
.um-hero__scroll i { width: 1px; height: 26px; background: linear-gradient(#8a938b, transparent); animation: bounceY 1.8s ease-in-out infinite; }

/* =========================================================
   This week's episode
   ========================================================= */
.um-episode { position: relative; background: var(--um-bg-green); padding: 78px 0 84px; overflow: hidden; }
.um-episode__noise {
	position: absolute; inset: -32% 0; opacity: .3; mix-blend-mode: soft-light; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.02' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
	background-size: 1100px auto, 320px auto;
}
.um-episode__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 35%, transparent 30%, var(--um-bg-green) 95%); pointer-events: none; }
.um-episode__casefile { position: absolute; top: 120px; left: 34px; font-family: var(--um-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(199,165,79,0.16); writing-mode: vertical-rl; user-select: none; pointer-events: none; }
.um-episode__reticle { position: absolute; top: 88px; right: 40px; width: 56px; height: 56px; pointer-events: none; opacity: .14; }
.um-episode__feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
.um-episode__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--um-bg-card); border: 1px solid rgba(255,255,255,0.07); display: block; transition: border-color .2s; }
.um-episode__thumb:hover { border-color: rgba(217,178,75,0.5); }
.um-episode__thumb img, .um-card__media img, .um-row__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--um-ease); }
.um-episode__thumb img { object-position: center 30%; }
[data-zoom]:hover img { transform: scale(1.07); }
.um-episode__thumb-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,12,9,0.6), transparent 55%); }
.um-bigplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; }
.um-bigplay i { position: absolute; inset: 0; border-radius: 50%; background: var(--um-gold); animation: pulseRing 2.4s ease-out infinite; }
.um-bigplay b { position: relative; width: 74px; height: 74px; border-radius: 50%; background: var(--um-gold); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.um-bigplay .um-tri { border-left-width: 22px; border-top-width: 13px; border-bottom-width: 13px; margin-left: 5px; }
.um-episode__meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--um-gold-text); margin-bottom: 16px; }
.um-episode__title { font-size: 34px; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; color: var(--um-ink); }
.um-episode__text { margin-top: 18px; font-size: 15.5px; line-height: 1.65; color: var(--um-muted); }

.um-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.um-card { display: block; }
.js .um-card[data-reveal] { transition: opacity .6s var(--um-ease), transform .6s var(--um-ease); }
.js .um-card[data-reveal].is-in:hover, .um-card:hover { transform: translateY(-6px); }
.um-card__media { position: relative; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; background: var(--um-bg-card); border: 1px solid rgba(255,255,255,0.07); }
.um-card__media img { transition-duration: .55s; }
.um-card__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,12,9,0.55), transparent 60%); }
/* "Coming Soon" over scheduled video episodes. */
/* Video episodes without a live YouTube link: shown as usual, but nothing to click. */
a[aria-disabled="true"] { cursor: default; pointer-events: none; }
.um-comingsoon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,12,9,0.62); pointer-events: none; }
.um-comingsoon > span { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--um-gold); border: 1px solid rgba(217,178,75,0.6); padding: 8px 14px; border-radius: 3px; background: rgba(9,13,10,0.7); }
.um-comingsoon--lg > span { font-size: 14px; padding: 12px 22px; }
.um-chip { position: absolute; top: 10px; left: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--um-gold); background: rgba(9,13,10,0.78); padding: 4px 7px; border-radius: 3px; }
.um-chip--mono { font-family: var(--um-mono); font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--um-ink-soft); }
.um-chip--right { left: auto; right: 10px; }
.um-card__date { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--um-muted-2); margin-top: 14px; }
.um-card__title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; color: var(--um-ink); margin-top: 6px; line-height: 1.15; }
.um-card__note { font-size: 12.5px; color: var(--um-muted-2); margin-top: 8px; }

/* =========================================================
   Audio podcast
   ========================================================= */
.um-audio { position: relative; overflow: hidden; background: var(--um-bg-deep); border-top: 1px solid var(--um-line); padding: 84px 0 90px; }
.um-audio__bg { position: absolute; inset: -16% 0; width: 100%; height: 132%; object-fit: cover; opacity: .22; }
.um-audio__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,9,0.98) 0%, rgba(8,12,9,0.9) 45%, rgba(8,12,9,0.78) 100%); }
.um-audio__grid { max-width: 1180px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 48px; align-items: start; }
.um-live { display: flex; align-items: center; gap: 12px; }
.um-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--um-gold); box-shadow: 0 0 0 4px rgba(217,178,75,0.18); animation: pulseDot 2s ease-in-out infinite; }
.um-live .um-mono { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--um-gold-text); }
.um-pills { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.um-pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--um-ink-soft); border: 1px solid rgba(255,255,255,0.18); padding: 10px 16px; border-radius: 999px; transition: background .22s, color .22s, border-color .22s; }
.um-pill:hover { background: var(--um-gold); color: var(--um-on-gold); border-color: var(--um-gold); }
.um-stats { margin-top: 34px; display: flex; gap: 28px; }
.um-stats__num { font-family: var(--um-mono); font-size: 26px; font-weight: 700; color: var(--um-gold); line-height: 1; }
.um-stats__label { margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--um-muted-2); }

.um-player { position: relative; }
.um-player__frame { position: absolute; inset: -1px; border-radius: 10px; pointer-events: none; background: linear-gradient(135deg, rgba(217,178,75,0.55), rgba(217,178,75,0.08) 40%, rgba(217,178,75,0.02) 60%, rgba(217,178,75,0.4)); }
.um-player__box { position: relative; border-radius: 9px; overflow: hidden; background: #0a0f0b; box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
.um-player__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid rgba(217,178,75,0.18); background: linear-gradient(90deg, var(--um-bg-green), #0a0f0b); }
.um-player__name { display: flex; align-items: center; gap: 10px; color: var(--um-gold); }
.um-player__name .um-mono { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--um-ink); }
.um-player__powered { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--um-muted-2); }
.um-player__embed { position: relative; background: #0a0f0b; }
.um-player__embed iframe { width: 100%; height: 500px; border: 0; filter: sepia(.35) saturate(.9) contrast(1.02); }
.um-player__tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8,12,9,0.35), transparent 18%); mix-blend-mode: multiply; }
.um-player__foot { height: 3px; background: linear-gradient(90deg, var(--um-gold), rgba(217,178,75,0.15)); }

/* =========================================================
   Marquee
   ========================================================= */
.um-marquee { overflow: hidden; background: #0a0f0b; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 24px 0; }
.um-marquee__track { display: flex; white-space: nowrap; will-change: transform; }
.um-marquee__group { display: flex; align-items: center; gap: 52px; padding-right: 52px; flex-shrink: 0; }
.um-marquee__word { font-size: 42px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--um-gold); }
.um-marquee__word.is-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(217,178,75,0.6); }
.um-marquee__sep { color: var(--um-gold-text); font-size: 15px; }

/* =========================================================
   Feature documentary
   ========================================================= */
.um-feature { position: relative; background: var(--um-bg-deep); border-top: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
.um-feature__link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 460px; color: inherit; }
.um-feature__link:hover { color: inherit; }
.um-feature__media { position: relative; overflow: hidden; background: var(--um-bg-card); min-height: 300px; }
.um-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(.35) contrast(1.08); transition: transform .8s var(--um-ease); }
.um-feature__link:hover .um-feature__media img { transform: scale(1.04); }
.um-feature__shade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--um-bg-deep) 100%), linear-gradient(0deg, rgba(8,12,9,0.5), transparent 40%); }
.um-feature__badge { position: absolute; top: 22px; left: 22px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--um-on-gold); background: var(--um-gold); padding: 7px 12px; border-radius: 3px; }
.um-feature__body { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 64px 56px 64px 40px; }
.um-feature__year { position: absolute; top: 16px; right: 28px; font-size: 150px; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: rgba(217,178,75,0.05); pointer-events: none; user-select: none; }
.um-feature__eyebrow { position: relative; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--um-gold-text); }
.um-feature__title { position: relative; margin-top: 16px; font-size: clamp(34px, 3.8vw, 54px); line-height: .96; text-wrap: balance; }
.um-feature__text { position: relative; margin-top: 20px; line-height: 1.7; max-width: 480px; }
.um-feature__cta { position: relative; margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.um-feature__link:hover .um-btn { background: var(--um-gold-hover); }
.um-feature__platform { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--um-muted-2); }

/* =========================================================
   The Library
   ========================================================= */
.um-library { position: relative; background: var(--um-bg-vault); padding: 82px 0 90px; border-top: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
.um-library__bg { position: absolute; inset: -22% 0; background: url('../img/texture-vault.png') center / cover; opacity: .45; mix-blend-mode: luminosity; pointer-events: none; }
.um-library__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 40%, transparent 25%, var(--um-bg-vault) 96%); pointer-events: none; }

.um-eras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.um-era {
	display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 8px; text-align: left; cursor: pointer; color: inherit;
	background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
	animation: riseUp .5s ease both; transition: transform .25s var(--um-ease), border-color .25s, background .25s;
}
.um-era:hover { transform: translateY(-4px); }
.um-era.is-active { background: rgba(217,178,75,0.06); border-color: var(--um-gold); }
.um-era__img { width: 58px; height: 42px; flex-shrink: 0; border-radius: 5px; overflow: hidden; background: var(--um-bg-card); }
.um-era__img img { width: 100%; height: 100%; object-fit: cover; }
.um-era__name { display: block; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--um-ink); }
.um-era__meta { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--um-muted-2); margin-top: 3px; }

.um-library__label { margin-top: 40px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a938b; font-weight: 700; }
.um-library__desc { max-width: 860px; margin-top: 18px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--um-ink-soft); }

.um-filters { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 18px 26px; align-items: end; }
.um-select { position: relative; display: block; }
.um-select::after { content: '▼'; position: absolute; right: 6px; top: 50%; transform: translateY(-62%); pointer-events: none; color: var(--um-muted); font-size: 11px; }
.um-select select {
	appearance: none; -webkit-appearance: none; width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.3); border-radius: 0;
	padding: 10px 26px 10px 2px; font-size: 14.5px; color: var(--um-ink); outline: none; cursor: pointer; transition: border-color .2s;
}
.um-select select:focus { border-color: var(--um-gold); }
.um-select option { background: var(--um-bg-vault); color: var(--um-ink); }
.um-search { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 10px 2px; transition: border-color .2s; }
.um-search:focus-within { border-color: var(--um-gold); }
.um-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-size: 14.5px; color: var(--um-ink); }
.um-search input::-webkit-search-cancel-button { filter: invert(.7); }
.um-library__count { margin-top: 16px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--um-muted-2); }

.um-rows { margin-top: 20px; display: flex; flex-direction: column; }
.um-row { display: flex; align-items: center; gap: 24px; padding: 22px 6px; border-bottom: 1px solid var(--um-line); transition: background .25s, box-shadow .25s, padding-left .25s; animation: rowIn .55s var(--um-ease) both; }
.um-row.is-leaving { animation: rowOut .28s ease both; }
.um-row:hover { background: rgba(217,178,75,0.04); box-shadow: inset 3px 0 0 var(--um-gold); padding-left: 14px; }
.um-row__thumb { position: relative; width: 118px; height: 66px; flex-shrink: 0; border-radius: 5px; overflow: hidden; background: var(--um-bg-card); display: flex; align-items: center; justify-content: center; }
.um-row__thumb::before { content: ''; position: absolute; inset: 0; background: rgba(8,12,9,0.35); z-index: 1; }
.um-row__thumb img { transition-duration: .55s; }
.um-row__play { position: relative; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--um-gold); display: flex; align-items: center; justify-content: center; }
.um-row__play .um-tri { border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; margin-left: 2px; }
.um-row__num { flex-shrink: 0; line-height: .95; font-size: 20px; font-weight: 900; color: var(--um-gold); min-width: 46px; }
.um-row__main { flex: 1; min-width: 0; }
.um-row__title { font-size: 15.5px; font-weight: 700; color: var(--um-ink); line-height: 1.3; }
.um-row__dur { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--um-muted-2); margin-top: 7px; }
.um-row__watch { flex-shrink: 0; text-align: right; }
.um-row__watch-label { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #6f7a71; margin-bottom: 8px; }
.um-row__logos { display: flex; gap: 16px; justify-content: flex-end; align-items: center; }
.um-row__logos a { opacity: .9; transition: opacity .2s; }
.um-row__logos a:hover { opacity: 1; }
.um-row__logos img { height: 19px; width: auto; }
.um-row__logos img.is-prime { height: 15px; }
.um-row__logos img.is-hulu { height: 14px; }
.um-row__netflix { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #e50914; }
.um-row__roku { font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: lowercase; color: var(--um-ink); opacity: .9; }
.um-row__roku:hover { color: var(--um-gold); }
.um-row__netflix:hover { color: #ff1f2b; }
.um-library__empty { padding: 30px 6px; color: var(--um-muted); }
.um-library__more { margin-top: 30px; text-align: center; }

/* =========================================================
   Tip / story bands
   ========================================================= */
.um-bands { display: grid; grid-template-columns: 1fr 1fr; }
.um-band { position: relative; min-height: 320px; display: flex; align-items: center; overflow: hidden; }
.um-band--tip { padding: 64px 32px 64px max(32px, calc((100vw - 1200px) / 2 + 32px)); }
.um-band--story { padding: 64px max(32px, calc((100vw - 1200px) / 2 + 32px)) 64px 32px; }
.um-band__bg { position: absolute; inset: -16% 0; width: 100%; height: 132%; object-fit: cover; opacity: .92; }
.um-band__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,9,0.82) 0%, rgba(8,12,9,0.28) 100%); }
.um-band--story .um-band__shade { background: linear-gradient(90deg, rgba(8,12,9,0.8) 0%, rgba(8,12,9,0.32) 100%); }
.um-band__body { position: relative; max-width: 440px; }
.um-band__text { margin-top: 16px; font-size: 15px; line-height: 1.6; color: #b3beb4; }
.um-band .um-btn { margin-top: 26px; }

/* =========================================================
   Mailing list
   ========================================================= */
.um-newsletter { background: var(--um-bg-green); padding: 88px 0 96px; text-align: center; }
.um-newsletter .um-h2 { letter-spacing: -.005em; }
.um-newsletter__text { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--um-muted); }
.um-newsletter__form { margin: 32px auto 0; display: flex; gap: 12px; justify-content: center; max-width: 520px; }
.um-newsletter__form input[type="email"] { flex: 1; min-width: 0; background: var(--um-bg-card); border: 1px solid rgba(255,255,255,0.14); border-radius: 5px; padding: 14px 16px; font-size: 14px; color: var(--um-ink); outline: none; transition: border-color .2s; }
.um-newsletter__form input[type="email"]:focus { border-color: var(--um-gold); }
.um-newsletter__form .um-btn { letter-spacing: .14em; padding: 0 28px; }
.um-newsletter__form { flex-wrap: wrap; }
.um-consent { order: 3; flex-basis: 100%; display: flex; align-items: flex-start; justify-content: center; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--um-ink-soft); text-align: left; cursor: pointer; }
.um-consent input { margin-top: 2px; width: 15px; height: 15px; flex: none; accent-color: var(--um-gold); }
.um-newsletter__error { margin-top: 22px; color: #e8a27c; font-size: 14px; }
.um-notice { margin-top: 32px; display: inline-flex; align-items: center; gap: 13px; background: rgba(217,178,75,0.1); border: 1px solid rgba(217,178,75,0.4); border-radius: 7px; padding: 16px 26px; font-size: 15px; color: var(--um-ink-soft); animation: riseUp .5s var(--um-ease) both; }
.um-notice__tick { width: 26px; height: 26px; border-radius: 50%; background: var(--um-gold); color: var(--um-on-gold); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }

/* =========================================================
   Footer
   ========================================================= */
.um-footer { background: var(--um-bg-deep); padding: 64px 0 30px; border-top: 1px solid rgba(255,255,255,0.05); }
.um-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.um-footer__logo { height: 50px; width: auto; margin-bottom: 18px; }
.um-footer__tag { font-size: 13.5px; line-height: 1.6; color: var(--um-muted-2); max-width: 260px; }
.um-footer__social { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.um-social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); color: #b7bfb8; transition: color .2s, border-color .2s, background .2s; }
.um-social:hover { color: var(--um-on-gold); background: var(--um-gold); border-color: var(--um-gold); }
.um-footer__head { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--um-gold-text); margin-bottom: 18px; }
.um-footer__links { display: flex; flex-direction: column; gap: 11px; }
.um-footer__links a { font-size: 14px; color: #b7bfb8; display: flex; align-items: center; gap: 8px; }
.um-footer__links a:hover, .um-footer__legal a:hover { color: var(--um-gold-hover); }
.um-footer__bottom { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--um-line); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: #6f7a71; }
.um-footer__legal { display: flex; flex-wrap: wrap; gap: 24px; }
.um-footer__legal a { font-size: 12.5px; color: #8a938b; }

/* =========================================================
   Fallback pages (until each page is redesigned)
   ========================================================= */
.um-basic { padding: 80px 0 100px; background: var(--um-bg-vault); min-height: 60vh; }
.um-basic__entry + .um-basic__entry { margin-top: 48px; }
.um-basic__title { font-size: clamp(32px, 5vw, 52px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; margin-bottom: 28px; }
.um-basic__title--sm { font-size: 28px; margin-bottom: 12px; }
.um-basic__title a { color: var(--um-ink); }
.um-prose { font-size: 16px; line-height: 1.7; color: #cfd6d0; }
.um-prose > * + * { margin-top: 1em; }
.um-prose img { height: auto; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
	.um-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.um-burger { display: flex; }
	.um-nav { display: none; }
	.um-nav[data-open="1"] {
		display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; gap: 0;
		padding: 8px 20px 22px; background: rgba(9,13,10,0.98); border-bottom: 1px solid rgba(255,255,255,0.08); animation: dropIn .25s ease both;
	}
	.um-nav[data-open="1"] > a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--um-line); font-size: 15px; white-space: normal; }
	.um-nav[data-open="1"] > .um-nav__cta { margin: 16px 0 0; justify-content: center; padding: 15px 20px; border-bottom: none; text-align: center; }

	.um-episode__feature, .um-audio__grid, .um-feature__link, .um-bands, .um-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.um-eras { grid-template-columns: minmax(0, 1fr); }
	.um-band--tip, .um-band--story { padding: 56px 24px; }
	.um-hero__ghost { font-size: 120px; top: 10%; }
	.um-feature__body { padding: 48px 24px 56px; }
}

@media (max-width: 782px) {
	.admin-bar .um-header { top: 46px; }
}

@media (max-width: 640px) {
	.um-wrap { padding-left: 20px; padding-right: 20px; }
	.um-hero { min-height: auto; }
	.um-hero__content { padding: 88px 20px 84px; }
	.um-hero__title { font-size: clamp(38px, 11vw, 58px); line-height: 1; }
	.um-hero__ghost { display: none; }
	.um-hero__text { font-size: 17px; }
	.um-hero__controls { right: 20px; }
	.um-h2, .um-h2--lg { font-size: clamp(28px, 7.5vw, 40px); }
	.um-h3 { font-size: clamp(26px, 7vw, 34px); }
	.um-headrow { flex-wrap: wrap; }
	.um-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
	.um-episode__casefile, .um-episode__reticle { display: none; }
	.um-player__embed iframe { height: 440px; }
	.um-marquee__word { font-size: 30px; }
	.um-feature__year { font-size: 96px; }
	.um-filters { grid-template-columns: 1fr 1fr; }
	.um-search { grid-column: 1 / -1; }
	.um-row { flex-wrap: wrap; gap: 14px 16px; padding: 18px 4px; }
	.um-row__thumb { width: 96px; height: 54px; }
	.um-row__main { flex-basis: calc(100% - 180px); }
	.um-row__watch { width: 100%; text-align: left; display: flex; align-items: center; gap: 14px; }
	.um-row__watch-label { margin-bottom: 0; }
	.um-row__logos { justify-content: flex-start; }
	.um-newsletter__form { flex-direction: column; }
	.um-newsletter__form .um-btn { padding: 14px 28px; justify-content: center; }
	.um-footer__grid { gap: 34px; }
	.um-footer__legal { gap: 16px; }
	#um-top { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
	html { scroll-behavior: auto; }
	.js [data-reveal] { opacity: 1; transform: none; }
}