/*
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;
overflow-x: hidden;
}

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 !important;
}

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

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

.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: 1.15fr .85fr;
align-items: center;
gap: 5vw;
background:
linear-gradient(
90deg,
rgba(0,0,0,.96) 0%,
rgba(0,0,0,.75) 42%,
rgba(0,0,0,.15) 100%
),
#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, 5vw, 5.8rem);
line-height: .92;
letter-spacing: .02em;
margin: 0 0 1.5rem;
}

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

.hero-cover {
display: flex;
justify-content: center;
align-items: center;
}

.hero-cover img {
width: 100%;
max-width: 540px;   /* smaller poster */
max-height: 75vh;
object-fit: contain;
margin: 0 auto;
filter: drop-shadow(0 25px 60px rgba(0,0,0,.55));
}

.hero-mobile-cover {
display: none;
}

/* 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;
}

/* UPDATES PAGE */

.updates-page {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}

.updates-page p,
.updates-page .lede {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

.updates-card {
max-width: 700px;
margin: 3rem auto 0;
text-align: center;
}

.updates-instagram a {
text-decoration: none;
color: var(--cream);
font-weight: 600;
font-size: 1.05rem;
}

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

.fa-instagram {
color: var(--gold);
margin-right: .5rem;
font-size: 1.2rem;
}

/* 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)
);
}
.glossary-term {
  color: var(--gold2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
}

.glossary-russian {
  color: rgba(241,232,216,.78);
  font-weight: 400;
}

.glossary-card p {
  margin-bottom: 1.4rem;
}

.glossary-card em {
  color: var(--cream);
}
/* GALLERY PAGE */

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

/* GALLERY LIGHTBOX */

.lightbox-gallery img {
  cursor: zoom-in;
  transition: transform .25s ease, opacity .25s ease;
}

.lightbox-gallery img:hover {
  transform: scale(1.02);
  opacity: .9;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  z-index: 99999;
  transition: opacity .25s ease, visibility .25s ease;
}

.gallery-lightbox.show {
  opacity: 1;
  visibility: visible;
}

.gallery-lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 30px 100px rgba(0,0,0,.85);
}

.gallery-lightbox-close {
  position: fixed;
  top: 18px;
  right: 24px;
  background: transparent;
  border: none;
  color: var(--cream);
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 100000;
}

.gallery-lightbox-close:hover {
  color: var(--gold2);
}

/* 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;
}

/* BACK TO TOP */

#backToTop {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border: 1px solid var(--gold);
border-radius: 50%;
background: rgba(5,5,6,.9);
color: var(--gold2);
cursor: pointer;
z-index: 100;
opacity: 0;
visibility: hidden;
transition: all .3s ease;
}

#backToTop.show {
opacity: 1;
visibility: visible;
}

#backToTop:hover {
box-shadow: 0 0 20px rgba(214,168,79,.5);
}

/* MOBILE */

@media (max-width: 900px) {

  body {
    overflow-x: hidden;
  }

  .site-nav {
    position: relative;
    min-height: auto;
    height: auto;
    padding: 22px 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .brand {
    display: none !important;
  }

  .navlinks {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem 1.25rem;
    flex-wrap: wrap;
    text-align: center;
  }

  .navlinks a {
    font-size: .72rem;
    letter-spacing: .14em;
  }

  h1 {
    font-size: clamp(3rem, 14vw, 4.6rem);
  }

  h2 {
    font-size: clamp(2.2rem, 11vw, 3.7rem);
  }

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

  .section {
    padding: 70px 6vw;
  }

  /* MOBILE HOMEPAGE HERO */

  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding: 70px 6vw 60px;
    background: #050505;
  }

  .hero-copy {
    width: 100%;
    max-width: none;
    display: contents;
  }

  .hero .kicker {
    order: 1;
    font-size: .72rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .hero h1 {
    order: 2;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(2.7rem, 12vw, 4rem);
    line-height: .92;
    max-width: none;
    margin: 0 0 1.4rem;
  }

  .hero .lede {
    order: 3;
    font-size: 1.08rem;
    line-height: 1.55;
    max-width: none;
    margin-top: 0;
  }

  .hero-cover {
    order: 4;
    width: 100%;
    margin: 1.5rem auto 0;
  }

  .hero-cover img {
    width: 100%;
    max-width: 430px;
    max-height: none;
    margin: 0 auto;
    object-fit: contain;
  }

  .hero-mobile-cover {
    display: none;
  }

  .btnrow {
    order: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
    width: 100%;
    margin-top: 1.5rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: .85rem .65rem;
    font-size: .66rem;
    letter-spacing: .1em;
  }

  /* MOBILE STACKING */

  .split,
  .split.reverse,
  .character-profile .split,
  .trailer-section .split {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 2rem !important;
    align-items: stretch !important;
  }

  .split > *,
  .split.reverse > *,
  .character-profile .split > *,
  .trailer-section .split > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .feature-img {
    margin-top: 1.25rem;
  }

  .feature-img img,
  .feature-img.short img,
  .about-photo img {
    width: 100%;
    height: auto !important;
    object-fit: cover;
  }

  .trailer-section .split > div:first-child {
    order: 1;
  }

  .trailer-frame {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2rem 0 0 !important;
  }

  .trailer-section h2 {
    font-size: clamp(2.4rem, 12vw, 4rem);
    line-height: .95;
  }

  .trailer-section .lede {
    max-width: none;
    font-size: 1.05rem;
    line-height: 1.55;
  }

  .pills {
    gap: .65rem;
  }

  .pill {
    font-size: .68rem;
    letter-spacing: .1em;
  }

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

  .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);
  }

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

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

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

  .gallery {
    columns: 1;
  }

  #backToTop {
    width: 44px;
    height: 44px;
    right: 18px;
    bottom: 18px;
  }
}