/*
Theme Name: Devils in the Windy City V2
Theme URI: https://devilsinthewindycity.com
Author: Elena Chaikin
Description: Cinematic dark fantasy author site theme for Devils in the Windy City.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: devils-windy-city
*/

:root {
--black: #050506;
--panel: #101720;
--gold: #d6a84f;
--gold2: #f3d58a;
--cream: #f1e8d8;
--muted: #b9ad9c;
--line: rgba(214,168,79,.28);
--green: #253f38;
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: var(--black);
color: var(--cream);
font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
line-height: 1.65;
}

body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 20% 10%, rgba(214,168,79,.08), transparent 30%),
radial-gradient(circle at 80% 30%, rgba(38,69,62,.22), transparent 35%),
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
background-size: auto, auto, 100% 4px;
mix-blend-mode: screen;
opacity: .75;
z-index: 5;
}

a {
color: inherit;
}

img {
max-width: 100%;
display: block;
}

/* NAV */

.site-nav {
position: fixed;
inset: 0 0 auto 0;
min-height: 76px;
display: flex;
justify-content: center;
align-items: center;
padding: 18px 5vw;
z-index: 20;
background: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.15));
backdrop-filter: blur(6px);
}

.brand {
display: none;
}

.navlinks {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}

.navlinks a {
text-decoration: none;
font-size: .76rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(241,232,216,.86);
}

.navlinks a:hover {
color: var(--gold2);
}

/* TYPOGRAPHY */

.kicker {
color: var(--gold);
text-transform: uppercase;
letter-spacing: .28em;
font-size: .78rem;
font-weight: 800;
}

h1,
h2,
h3 {
font-family: Cinzel, Georgia, serif;
line-height: 1.03;
margin: 0 0 1rem;
font-weight: 700;
}

h1 {
font-size: clamp(3.2rem, 8vw, 8.8rem);
letter-spacing: .02em;
}

h2 {
font-size: clamp(2.1rem, 5vw, 5rem);
}

h3 {
font-size: clamp(1.35rem, 2.2vw, 2.2rem);
}

.card h3 small {
display: block;
margin-top: .4rem;
color: var(--gold2);
font-family: Cinzel, Georgia, serif;
font-size: .62em;
font-weight: 400;
letter-spacing: .08em;
line-height: 1.3;
opacity: .9;
}

.lede {
font-size: clamp(1.08rem, 1.5vw, 1.42rem);
color: rgba(241,232,216,.9);
max-width: 740px;
}

/* HOMEPAGE HERO */

.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 4vw;
background:
linear-gradient(
90deg,
rgba(0,0,0,.96) 0%,
rgba(0,0,0,.70) 38%,
rgba(0,0,0,0) 62%
),
var(--hero-image) right 6vw center / auto 78vh no-repeat,
#050505;
padding: 130px 6vw 70px;
overflow: hidden;
}

.hero-copy {
max-width: 760px;
position: relative;
z-index: 2;
}

.hero h1 {
font-family: Cinzel, Georgia, serif;
font-weight: 700;
font-size: clamp(3.2rem, 5.2vw, 6rem);
line-height: .92;
letter-spacing: .02em;
max-width: none;
margin: 0 0 1.5rem;
}

.hero .lede {
max-width: 640px;
}

/* BUTTONS */

.btnrow {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
}

.btn {
display: inline-flex;
text-decoration: none;
border: 1px solid var(--gold);
color: #050506;
background: linear-gradient(135deg, var(--gold2), var(--gold));
padding: .9rem 1.25rem;
text-transform: uppercase;
letter-spacing: .15em;
font-size: .78rem;
font-weight: 900;
}

.btn.ghost {
background: transparent;
color: var(--cream);
}

/* LAYOUT */

.section {
padding: 95px 6vw;
border-top: 1px solid rgba(214,168,79,.16);
}

.section.dark {
background: linear-gradient(180deg, #080a0d, #0f141b);
}

.split {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(320px,.82fr);
gap: 5vw;
align-items: center;
}

.split.reverse {
grid-template-columns: minmax(320px,.82fr) minmax(0,1fr);
}

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}

.card {
background: linear-gradient(180deg, rgba(22,28,37,.9), rgba(10,14,20,.95));
border: 1px solid rgba(214,168,79,.2);
padding: 1.4rem;
min-height: 230px;
}

.feature-img {
border: 1px solid var(--line);
box-shadow: 0 30px 80px rgba(0,0,0,.55);
overflow: hidden;
}

.feature-img img {
width: 100%;
height: 680px;
object-fit: cover;
}

.feature-img.short img {
height: 520px;
}

.pills {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin: 1.25rem 0;
}

.pill {
border: 1px solid var(--line);
padding: .45rem .75rem;
color: var(--gold2);
text-transform: uppercase;
letter-spacing: .12em;
font-size: .72rem;
}

/* CHARACTER CARDS */

.characters-intro {
padding-bottom: 70px;
}

.character-grid {
margin-top: 3rem;
}

.character-card {
min-height: 520px;
display: flex;
align-items: flex-end;
padding: 0;
overflow: hidden;
position: relative;
border: 1px solid rgba(214,168,79,.25);
background: #111;
text-decoration: none;
}

.character-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}

.character-card:hover img {
transform: scale(1.04);
}

.character-card:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.35) 52%, rgba(0,0,0,.08));
}

.character-card > div {
position: relative;
z-index: 2;
padding: 1.7rem;
}

.character-card h3 {
margin-bottom: .35rem;
font-size: clamp(1.55rem, 2.2vw, 2.45rem);
}

.character-card p {
margin-top: .9rem;
color: rgba(241,232,216,.85);
line-height: 1.55;
}

.character-card .russian-name {
margin: -.25rem 0 .85rem;
color: rgba(241,232,216,.72);
font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
font-size: .88rem;
letter-spacing: .02em;
line-height: 1.35;
opacity: .9;
text-transform: none;
}

/* CHARACTER PROFILE SECTIONS */

.character-profile {
scroll-margin-top: 90px;
}

.character-profile .split {
gap: 6vw;
}

.character-profile p:not(.lede) {
color: var(--muted);
max-width: 680px;
}

.character-profile .russian-name {
margin: -.4rem 0 1.5rem;
color: var(--gold2);
font-family: Cinzel, Georgia, serif;
font-size: clamp(1rem, 1.4vw, 1.35rem);
letter-spacing: .08em;
line-height: 1.4;
opacity: .85;
}

/* BANNERS */

.quote {
font-family: Cinzel, Georgia, serif;
color: var(--gold2);
font-size: clamp(1.5rem, 3vw, 3rem);
line-height: 1.18;
margin: 0;
}

.wide-banner {
min-height: 58vh;
display: flex;
align-items: flex-end;
padding: 6vw;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}

.wide-banner h1 {
font-size: clamp(3rem, 6.5vw, 7rem);
}

.wide-banner::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.25));
}

.wide-banner > div {
position: relative;
z-index: 2;
max-width: 900px;
}

/* STORY PAGE */

.story-banner {
min-height: 52vh;
background-size: cover;
background-position: center 42%;
}

.story-banner h1 {
font-size: clamp(2.7rem, 5.6vw, 6rem);
line-height: .92;
max-width: 13ch;
}

.story-banner::before {
background: linear-gradient(90deg, rgba(0,0,0,.95), rgba(0,0,0,.62), rgba(0,0,0,.20));
}

/* WORLD PAGE */

.world-banner {
min-height: 52vh;
background-size: cover;
background-position: center 42%;
}

.world-banner h1 {
font-size: clamp(2.4rem, 5vw, 5.4rem);
line-height: .92;
max-width: none;
margin: 0;
}

.world-banner h1 br {
display: block;
content: "";
}

.world-banner .kicker {
margin-bottom: 1rem;
}

.world-banner::before {
background: linear-gradient(
90deg,
rgba(0,0,0,.95),
rgba(0,0,0,.62),
rgba(0,0,0,.20)
);
}

/* GALLERY PAGE */

.gallery-banner {
min-height: 58vh;
background-size: cover;
background-position: center center;
}

/* ABOUT PAGE */

.about-banner {
min-height: 58vh;
background-size: cover;
background-position: center center;
}

/* TIMELINE */

.timeline {
border-left: 1px solid var(--line);
padding-left: 2rem;
max-width: 900px;
}

.event {
position: relative;
margin-bottom: 2rem;
}

.event:before {
content: "";
position: absolute;
left: -2.42rem;
top: .45rem;
width: .8rem;
height: .8rem;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 18px var(--gold);
}

.event h3 {
color: var(--gold2);
margin-bottom: .5rem;
}

.event p {
color: var(--muted);
max-width: 720px;
}

/* GALLERY */

.gallery {
columns: 3 280px;
column-gap: 1rem;
}

.gallery img {
margin: 0 0 1rem;
border: 1px solid rgba(214,168,79,.18);
}

/* DEFAULT CONTENT */

.wp-content {
padding: 130px 6vw 80px;
max-width: 980px;
margin: auto;
}

.footer {
padding: 55px 6vw;
background: #050505;
color: var(--muted);
border-top: 1px solid var(--line);
}

/* TRAILER */

.trailer-section .split {
grid-template-columns: 1fr minmax(280px,420px);
}

.trailer-frame {
aspect-ratio: 9 / 16;
width: 100%;
max-width: 420px;
margin-left: auto;
border: 1px solid var(--line);
box-shadow: 0 30px 80px rgba(0,0,0,.55);
overflow: hidden;
background: linear-gradient(180deg,#090909,#000);
display: grid;
place-items: center;
position: relative;
}

.trailer-frame video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.trailer-credit {
margin-top: 1rem;
color: var(--muted);
font-size: .9rem;
font-style: italic;
opacity: .85;
}

/* ABOUT */

.about-photo img {
height: 760px;
object-position: center;
}

/* MOBILE */

@media(max-width:900px) {
.site-nav {
position: absolute;
height: auto;
align-items: center;
gap: 1rem;
flex-direction: column;
}

.navlinks {
gap: 1rem;
}

.hero {
grid-template-columns: 1fr;
background:
linear-gradient(0deg, rgba(0,0,0,.96), rgba(0,0,0,.6)),
var(--hero-image) center top 120px / contain no-repeat,
#050505;
padding-top: 62vh;
}

.hero h1 {
font-size: clamp(3.1rem, 14vw, 5rem);
max-width: 8ch;
}

.wide-banner,
.story-banner,
.world-banner,
.gallery-banner,
.about-banner {
min-height: 42vh;
padding: 2rem;
background-position: center center;
}

.wide-banner h1,
.story-banner h1,
.world-banner h1 {
font-size: clamp(2.5rem, 13vw, 4.5rem);
}

.split,
.split.reverse {
grid-template-columns: 1fr;
}

.grid {
grid-template-columns: 1fr;
}

.feature-img img {
height: auto;
}

.character-card {
min-height: 560px;
}

.character-card h3 {
font-size: clamp(1.65rem, 9vw, 2.4rem);
}

.character-card .russian-name {
font-size: .85rem;
}

.trailer-frame {
margin-left: 0;
}

.gallery {
columns: 1;
}
}