/* ============================================
   IT TAKES ONE TO KNOW ONE — ITOTKO
   Landing Page Stylesheet
   Aesthetic: 1950s–60s Old Hollywood Tabloid
   ============================================ */

@font-face {
    font-family: 'ClassiqueScript';
    src: url('assets/fonts/ClassiqueScript.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --crimson: #8B1A1A;
    --crimson-deep: #6B1010;
    --crimson-dark: #4A0E0E;
    --gold: #D8A327;   /* sampled from the official lockup artwork */
    --gold-light: #E8C547;
    --gold-dim: #B8860B;
    --parchment: #F0E8D5;
    --parchment-dark: #E0D5BD;
    --cream: #F5F0E1;
    --ink: #1C1810;
    --ink-medium: #3D352A;
    --ink-light: #6B5F50;
    --section-pad: clamp(4rem, 8vh, 7rem);
    --container-max: 860px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.75;
    color: var(--ink);
    background-color: var(--parchment);
    background-image: url('assets/paper-texture.png');
    background-image: image-set(url('assets/paper-texture.webp') type('image/webp'),
                                url('assets/paper-texture.png')  type('image/png'));
    background-size: 600px;
    background-repeat: repeat;
    overflow-x: hidden;
    position: relative;
}

/* --- Grain Overlay --- */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
    mix-blend-mode: multiply;
    animation: grainShift 0.8s steps(8) infinite;
}

@keyframes grainShift {
    0%, 100% { transform: translate(0,0); }
    25% { transform: translate(-1px,1px); }
    50% { transform: translate(1px,-1px); }
    75% { transform: translate(-1px,-1px); }
}

/* --- Utility --- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}

.fade-in {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.4s ease, transform 1.4s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--crimson-deep);
    position: relative;
    overflow: hidden;
    padding: 3rem 1.5rem;
}

.hero-bg-image {
    position: absolute;
    inset: 0;
    background-image: url('assets/hero-atmosphere.png');
    background-image: image-set(url('assets/hero-atmosphere.webp') type('image/webp'),
                                url('assets/hero-atmosphere.png')  type('image/png'));
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: grayscale(30%) contrast(1.1);
    transform: scale(1.15);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(107,16,16,0.4) 0%, rgba(40,8,8,0.85) 70%, rgba(20,4,4,0.95) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.hero-ornament-top,
.hero-ornament-bottom {
    display: block;
    width: min(80%, 400px);
    margin: 0 auto 1rem;
    opacity: 0.25;
    filter: invert(1) sepia(1) saturate(2) hue-rotate(10deg) brightness(0.85);
}
.hero-ornament-bottom {
    margin: 1rem auto 0;
    transform: scaleY(-1);
}

.hero-kicker {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.6rem, 1.2vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: var(--gold-dim);
    margin-bottom: 1.2rem;
}

/* The title is the supplied lockup artwork now, not type. It carries its own
   drop shadow and the "Directed By Trianna Sarma" line, so the old
   ClassiqueScript rules and the two title-line spans are gone. */
.hero-title {
    margin: 0 0 0.6rem;
    line-height: 0;
}

/* .hero-inner is a 700px container and the lockup is wider than that. The old
   type overflowed it too, but text overflows evenly so it still read as
   centred; an image just runs off the right. Centring on the container's
   midpoint lets the artwork stay full size and stay centred. */
.hero-title picture { display: block; }

.hero-lockup {
    display: block;
    width: min(92vw, 1080px);
    max-width: none;
    height: auto;
    margin-left: 50%;
    transform: translateX(-50%);
    /* Keeps the glow the type version had, without doubling the artwork's
       own black shadow. */
    filter: drop-shadow(0 0 70px rgba(216, 163, 39, 0.22));
}

@media (max-width: 780px) {
    .hero-lockup { width: min(88vw, 560px); }
}

.hero-subtitle {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    color: var(--parchment-dark);
    letter-spacing: 0.15em;
    margin-top: 0.8rem;
    opacity: 0.7;
}

.stamp-badge {
    display: inline-block;
    margin: 2rem auto 0.8rem;
    padding: 0.5rem 2rem;
    border: 2px solid var(--gold);
    transform: rotate(-2deg);
    position: relative;
}
.stamp-badge::before,
.stamp-badge::after {
    content: '';
    position: absolute;
    left: 6px; right: 6px;
    height: 1px;
    background: var(--gold);
    opacity: 0.4;
}
.stamp-badge::before { top: 4px; }
.stamp-badge::after { bottom: 4px; }

.stamp-badge span {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.9rem, 2.5vw, 1.4rem);
    color: var(--gold);
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.hero-era {
    font-family: 'Cinzel', serif;
    font-size: clamp(0.55rem, 1vw, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--parchment-dark);
    margin-top: 0.5rem;
    opacity: 0.45;
}

/* ============================================
   SECTIONS — Shared
   ============================================ */
.section {
    padding: var(--section-pad) 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    letter-spacing: 0.08em;
    line-height: 1.15;
    margin: 0.6rem 0 0.3rem;
}

.section-subtitle-stamp {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.7rem, 1.3vw, 0.9rem);
    letter-spacing: 0.3em;
}

/* Ornamental rule with diamond */
.ornamental-rule {
    display: flex;
    align-items: center;
    gap: 0;
    width: 240px;
    margin: 0.6rem auto;
}
.ornamental-rule::before,
.ornamental-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
}
.rule-diamond {
    font-size: 0.5rem;
    margin: 0 0.8rem;
    opacity: 0.5;
}

/* ============================================
   CASTING SECTION
   ============================================ */
.casting {
    background-color: #6B1010;
    color: var(--gold-light);
}
.casting .section-title {
    color: var(--gold);
}
.casting .section-subtitle-stamp {
    color: var(--gold-dim);
}
.casting .ornamental-rule {
    color: var(--gold);
}

/* Deadline Banner */
.deadline-banner {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 0.7rem 1.5rem;
    border: 1px solid rgba(212,160,23,0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(0,0,0,0.15);
}

.deadline-icon {
    font-size: 1rem;
    opacity: 0.6;
}

.deadline-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    letter-spacing: 0.3em;
    color: var(--gold-dim);
}

.deadline-date {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    letter-spacing: 0.12em;
    color: var(--gold-light);
}

/* Role Cards — Newspaper Column Style */
.roles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(212,160,23,0.2);
}

.role-card {
    padding: 1.8rem 1.5rem;
    border: 1px solid rgba(212,160,23,0.15);
    text-align: center;
    background: rgba(0,0,0,0.1);
    transition: background 0.4s ease;
}
.role-card:hover {
    background: rgba(0,0,0,0.2);
}

.role-header {
    margin-bottom: 0.8rem;
}

.role-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    letter-spacing: 0.1em;
    color: var(--gold);
}

.role-divider {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--gold-dim);
    margin: 0.5rem auto;
    opacity: 0.5;
}

.role-type {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(0.75rem, 1vw, 0.85rem);
    color: var(--gold-dim);
    letter-spacing: 0.1em;
}

.role-age {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(0.65rem, 0.9vw, 0.75rem);
    letter-spacing: 0.15em;
    color: var(--gold-dim);
    margin-bottom: 0.8rem;
}

.role-body p {
    font-family: 'IM Fell English', serif;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    line-height: 1.6;
    color: var(--parchment-dark);
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

.role-req {
    font-style: italic;
    color: var(--gold-dim) !important;
    opacity: 1 !important;
    font-size: clamp(0.75rem, 0.9vw, 0.85rem) !important;
    margin-top: 0.5rem;
}

/* Audition Box — Newspaper Ad Style */
.audition-box {
    margin-bottom: 2.5rem;
}

.audition-box-border {
    border: 2px solid var(--gold-dim);
    padding: 2rem 2.5rem;
    text-align: center;
    position: relative;
    background: rgba(0,0,0,0.1);
}
.audition-box-border::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(212,160,23,0.2);
    pointer-events: none;
}

.audition-heading {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    letter-spacing: 0.15em;
    color: var(--gold);
    margin-bottom: 0.8rem;
}

.audition-text {
    font-family: 'IM Fell English', serif;
    color: var(--parchment-dark);
    margin-bottom: 1rem;
}

.audition-list {
    list-style: none;
    font-family: 'IM Fell English', serif;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    color: var(--gold-dim);
    margin-bottom: 1rem;
}
.audition-list li {
    margin-bottom: 0.25rem;
}
.audition-list li::before {
    content: '';
}

.audition-note {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    color: var(--parchment-dark);
    opacity: 0.6;
}

/* CTA Buttons */
.cta-wrap { text-align: center; }

.cta-button {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.75rem, 1.1vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-decoration: none;
    padding: 0.9rem 2.2rem;
    border: 2px solid var(--gold);
    color: var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all 0.35s ease;
    position: relative;
}
.cta-button:hover {
    background: var(--gold);
    color: var(--crimson-deep);
    box-shadow: 0 0 25px rgba(212,160,23,0.15);
}

/* ============================================
   SUPPORT / INVEST SECTION
   ============================================ */
.support {
    background-color: var(--parchment);
    color: var(--ink);
    text-align: center;
}
.support .ornamental-rule.dark { color: var(--ink); }
.support .section-title { color: var(--crimson); }

.support-box {
    max-width: 580px;
    margin: 0 auto 2.5rem;
    padding: 2rem;
    border: 1px solid rgba(28,24,16,0.15);
    background: rgba(255,255,255,0.25);
    position: relative;
}
.support-box::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(28,24,16,0.08);
    pointer-events: none;
}

.support-text {
    font-family: 'IM Fell English', serif;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1.85;
    color: var(--ink-medium);
    font-style: italic;
}

.support-ctas {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.cta-dark {
    border-color: var(--ink);
    color: var(--ink);
}
.cta-dark:hover {
    background: var(--ink);
    color: var(--parchment);
}

.cta-crimson {
    border-color: var(--crimson);
    color: var(--crimson);
}
.cta-crimson:hover {
    background: var(--crimson);
    color: var(--parchment);
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact {
    background-color: #6B1010;
    color: var(--parchment);
    padding-bottom: 2rem;
}
.contact .section-title { color: var(--gold); }
.contact .ornamental-rule { color: var(--gold); }

.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(212,160,23,0.2);
}

.contact-card {
    text-align: center;
    padding: 2rem 1.5rem;
    border: 1px solid rgba(212,160,23,0.15);
    background: rgba(0,0,0,0.1);
}

.contact-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.contact-title {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(0.8rem, 1.1vw, 0.9rem);
    color: var(--gold-dim);
    letter-spacing: 0.1em;
    margin-top: 0.2rem;
}

.contact-divider {
    width: 40px;
    height: 1px;
    background: var(--gold-dim);
    margin: 0.8rem auto;
    opacity: 0.4;
}

.contact-detail {
    font-family: 'IM Fell English', serif;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    margin-bottom: 0.3rem;
    color: var(--parchment-dark);
}

.contact-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--gold-dim);
    margin-right: 0.3rem;
}

.contact-detail a {
    color: var(--parchment);
    text-decoration: none;
    border-bottom: 1px solid rgba(245,240,225,0.25);
    transition: all 0.3s ease;
}
.contact-detail a:hover {
    color: var(--gold-light);
    border-color: var(--gold-light);
}

/* Stay Updated */
.stay-updated {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(212,160,23,0.2);
    position: relative;
    z-index: 1;
}

.updated-heading {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--gold);
    margin-bottom: 1.2rem;
}

.email-form {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 500px;
    margin: 0 auto 0.8rem;
}

.form-input {
    font-family: 'IM Fell English', serif;
    /* 16px floor. Below it, iOS zooms the whole page when the field takes
       focus and the layout jumps sideways mid-signup. */
    font-size: 16px;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(212,160,23,0.3);
    background: rgba(0,0,0,0.2);
    color: var(--parchment);
    flex: 1;
    min-width: 140px;
    transition: border-color 0.3s ease;
}
.form-input::placeholder {
    color: rgba(245,240,225,0.35);
    font-style: italic;
}
.form-input:focus {
    outline: none;
    border-color: var(--gold);
}

.cta-small {
    padding: 0.6rem 1.2rem;
    font-size: clamp(0.65rem, 0.9vw, 0.75rem);
}

.form-note {
    font-family: 'IM Fell English', serif;
    font-size: 0.75rem;
    color: var(--parchment-dark);
    opacity: 0.4;
    font-style: italic;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background-color: var(--ink);
    color: var(--parchment-dark);
    padding: 2.5rem 0;
    text-align: center;
}

.footer-ornament {
    display: block;
    width: min(60%, 280px);
    margin: 0.5rem auto;
    opacity: 0.15;
    filter: invert(1) sepia(1) saturate(1.5) hue-rotate(10deg) brightness(0.7);
}

.footer-title {
    font-family: 'ClassiqueScript', cursive;
    font-weight: normal;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--gold-dim);
    letter-spacing: 0;
    margin: 0.8rem 0 0.4rem;
}

.footer-ig a {
    font-family: 'IM Fell English', serif;
    font-size: clamp(0.75rem, 1vw, 0.85rem);
    color: var(--parchment-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(245,240,225,0.15);
    transition: color 0.3s ease;
}
.footer-ig a:hover { color: var(--gold-light); }

.footer-copy {
    font-family: 'IM Fell English', serif;
    font-size: 0.7rem;
    color: var(--parchment-dark);
    opacity: 0.35;
    margin-top: 0.6rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .roles-grid,
    .contacts-grid {
        grid-template-columns: 1fr;
    }
    .support-ctas {
        flex-direction: column;
        align-items: center;
    }
    .support-ctas .cta-button {
        width: 100%;
        max-width: 300px;
    }
    .email-form {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .hero-kicker { letter-spacing: 0.25em; }
    .deadline-banner { flex-direction: column; gap: 0.3rem; }
    .audition-box-border { padding: 1.5rem 1.2rem; }
    .container { padding: 0 1.2rem; }
}

/* ============================================
   SELECTION
   ============================================ */
::selection {
    background: var(--gold);
    color: var(--crimson-deep);
}

/* =========================================================
   DIRTY WATER PRODUCTIONS BAR
   Ties this film's page into the parent site without
   disturbing its own Old Hollywood identity below.
   ========================================================= */
.dwp-bar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  background: #0c0a09;
  border-bottom: 1px solid rgba(212, 160, 23, 0.22);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.dwp-bar__home { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.dwp-bar__mark {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: #b81e1e;
}
.dwp-bar__sub {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243, 238, 231, 0.45);
  margin-top: 3px;
}
.dwp-bar__nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); flex-wrap: wrap; }
.dwp-bar__nav a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 238, 231, 0.6);
  text-decoration: none;
  transition: color 250ms ease;
}
.dwp-bar__nav a:hover { color: #f3eee7; }
.dwp-bar__nav a[aria-current='page'] { color: #d4a017; }

@media (max-width: 640px) {
  .dwp-bar { justify-content: center; text-align: center; gap: 0.75rem; }
  .dwp-bar__nav { justify-content: center; gap: 1rem; }
  .dwp-bar__nav a { font-size: 0.7rem; }
}


/* ============================================================
   Touch targets.
   Measured on a 390px viewport: the production bar links were 20px tall and
   Subscribe was 37px, against the 44px both Apple and WCAG ask for. Inline
   links inside prose are left alone; the guidance exempts them, and padding
   them would break the line rhythm.
   ============================================================ */
@media (max-width: 780px) {
    .dwp-bar__nav a,
    .dwp-bar__home {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .cta-small,
    .subscribe-form button,
    .subscribe-form .cta-button {
        min-height: 48px;
    }

    .form-input { min-height: 48px; }

    /* The contact emails and Instagram handles were 18px tall. They are the
       actual conversion on this page: someone reads the casting call and taps
       an address. inline-flex keeps them beside their label while giving them
       a real target. */
    .contact-detail a,
    .footer-ig a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}