/* ============================================================
   QuietMovies.com — Design System
   Cinema That Breathes | Mobile-First | Zero Frameworks
   ============================================================ */

/* --- CSS Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-moz-tab-size:4;tab-size:4}
body{min-height:100dvh;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0}

/* --- Design Tokens --- */
:root{
  /* Color — warm, calm palette */
  --bg-primary:#FAF8F5;
  --bg-surface:#FFFFFF;
  --bg-elevated:#F5F2EE;
  --bg-hero:#1A1A2E;
  --text-primary:#2C2C2C;
  --text-secondary:#6B6B6B;
  --text-inverse:#FAF8F5;
  --accent:#5B7B6F;
  --accent-hover:#4A6A5E;
  --accent-warm:#C4956A;
  --accent-warm-hover:#B3845A;
  --accent-soft:rgba(91,123,111,0.1);
  --accent-warm-soft:rgba(196,149,106,0.1);
  --border:#E8E4E0;
  --border-light:#F0ECE8;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:0 8px 30px rgba(0,0,0,0.08);
  --shadow-xl:0 20px 60px rgba(0,0,0,0.1);
  --overlay:rgba(26,26,46,0.6);

  /* Fluid Typography */
  --text-xs:clamp(0.7rem,0.65rem + 0.25vw,0.8rem);
  --text-sm:clamp(0.8rem,0.75rem + 0.3vw,0.9rem);
  --text-base:clamp(0.95rem,0.9rem + 0.3vw,1.1rem);
  --text-lg:clamp(1.1rem,1rem + 0.5vw,1.35rem);
  --text-xl:clamp(1.3rem,1.1rem + 0.8vw,1.75rem);
  --text-2xl:clamp(1.6rem,1.3rem + 1.2vw,2.4rem);
  --text-3xl:clamp(2rem,1.5rem + 2vw,3.2rem);
  --text-4xl:clamp(2.4rem,1.8rem + 2.5vw,4rem);

  /* Spacing */
  --space-xs:clamp(0.25rem,0.2rem + 0.2vw,0.5rem);
  --space-sm:clamp(0.5rem,0.4rem + 0.4vw,0.75rem);
  --space-md:clamp(0.75rem,0.6rem + 0.6vw,1.25rem);
  --space-lg:clamp(1rem,0.8rem + 1vw,2rem);
  --space-xl:clamp(1.5rem,1rem + 2vw,3rem);
  --space-2xl:clamp(2rem,1.5rem + 2.5vw,4.5rem);
  --space-3xl:clamp(3rem,2rem + 3vw,6rem);
  --space-section:clamp(3rem,2.5rem + 3vw,6rem);

  /* Content widths */
  --content-width:min(90vw,1200px);
  --content-narrow:min(90vw,720px);
  --content-wide:min(95vw,1400px);

  /* Transitions — slower than typical, calm */
  --transition-fast:0.15s ease;
  --transition-base:0.25s ease;
  --transition-slow:0.4s ease;
  --transition-slower:0.6s ease;

  /* Borders */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-full:9999px;
}

/* --- Dark Mode --- */
@media(prefers-color-scheme:dark){
  :root{
    --bg-primary:#121215;
    --bg-surface:#1A1A1E;
    --bg-elevated:#222228;
    --bg-hero:#0A0A10;
    --text-primary:#E8E6E3;
    --text-secondary:#A0A0A0;
    --accent:#7BA393;
    --accent-hover:#8DB3A3;
    --accent-warm:#D4A574;
    --accent-warm-hover:#E4B584;
    --accent-soft:rgba(123,163,147,0.12);
    --accent-warm-soft:rgba(212,165,116,0.12);
    --border:#2E2E34;
    --border-light:#252529;
    --shadow-sm:0 1px 3px rgba(0,0,0,0.2);
    --shadow-md:0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:0 8px 30px rgba(0,0,0,0.35);
    --shadow-xl:0 20px 60px rgba(0,0,0,0.4);
    --overlay:rgba(0,0,0,0.7);
  }
}

/* --- Base Typography --- */
body{
  font-family:'Libre Baskerville',Georgia,'Times New Roman',serif;
  font-size:var(--text-base);
  color:var(--text-primary);
  background:var(--bg-primary);
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-0.01em;
}
h1{font-size:var(--text-3xl);margin-bottom:var(--space-lg)}
h2{font-size:var(--text-2xl);margin-bottom:var(--space-md)}
h3{font-size:var(--text-xl);margin-bottom:var(--space-sm)}
h4{font-size:var(--text-lg);margin-bottom:var(--space-sm)}
p{margin-bottom:var(--space-md);color:var(--text-secondary);line-height:1.8}
strong{font-weight:700;color:var(--text-primary)}
em{font-style:italic}
blockquote{
  border-left:3px solid var(--accent);padding:var(--space-md) var(--space-lg);
  margin:var(--space-lg) 0;background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic;color:var(--text-secondary);
}

/* --- Layout --- */
.container{width:var(--content-width);margin:0 auto;padding:0 var(--space-md)}
.container--narrow{width:var(--content-narrow);margin:0 auto;padding:0 var(--space-md)}
.container--wide{width:var(--content-wide);margin:0 auto;padding:0 var(--space-md)}
.section{padding:var(--space-section) 0}
.section--alt{background:var(--bg-elevated)}

/* --- Skip Link --- */
.skip-link{
  position:absolute;top:-100%;left:16px;z-index:9999;
  padding:12px 24px;background:var(--accent);color:#fff;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);font-weight:600;
  font-size:var(--text-sm);
}
.skip-link:focus{top:0}

/* --- Header --- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-light);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:var(--content-wide);margin:0 auto;padding:var(--space-sm) var(--space-md);
  min-height:60px;
}
.logo{
  display:flex;align-items:center;gap:var(--space-sm);
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:var(--text-xl);font-weight:700;letter-spacing:-0.02em;
  color:var(--text-primary);
}
.logo-icon{
  width:32px;height:32px;color:var(--accent);
}
.logo-dot{
  display:inline-block;width:6px;height:6px;
  background:var(--accent-warm);border-radius:50%;
  margin-left:2px;vertical-align:super;
}

/* Mobile Nav Toggle */
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:44px;height:44px;border:none;background:none;cursor:pointer;
  gap:5px;padding:8px;z-index:1001;
}
.nav-toggle span{
  display:block;width:22px;height:2px;
  background:var(--text-primary);border-radius:2px;
  transition:var(--transition-base);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile Nav Drawer */
.main-nav{
  position:fixed;top:0;right:-100%;
  width:min(85vw,360px);height:100dvh;
  background:var(--bg-surface);
  border-left:1px solid var(--border);
  transition:right var(--transition-slow);
  z-index:1000;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:80px var(--space-lg) var(--space-lg);
}
.nav-open .main-nav{right:0}
.nav-backdrop{
  position:fixed;inset:0;background:var(--overlay);
  opacity:0;visibility:hidden;transition:opacity var(--transition-slow);z-index:999;
}
.nav-open .nav-backdrop{opacity:1;visibility:visible}
.main-nav ul{display:flex;flex-direction:column;gap:var(--space-xs)}
.main-nav a{
  display:block;padding:14px var(--space-md);
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:var(--text-lg);font-weight:600;
  color:var(--text-primary);border-radius:var(--radius-sm);
  transition:background var(--transition-base);
  min-height:44px;
}
.main-nav a:hover,.main-nav a:focus{background:var(--accent-soft)}
.main-nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.nav-label{
  font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:0.1em;color:var(--text-secondary);
  padding:var(--space-md) var(--space-md) var(--space-xs);
  font-family:system-ui,-apple-system,sans-serif;
}

@media(min-width:900px){
  .nav-toggle{display:none}
  .nav-backdrop{display:none}
  .main-nav{
    position:static;width:auto;height:auto;
    background:none;border:none;padding:0;
    overflow:visible;
  }
  .main-nav ul{flex-direction:row;gap:0;align-items:center}
  .main-nav a{
    font-size:var(--text-sm);padding:8px 14px;
    font-family:'Libre Baskerville',Georgia,serif;
    font-weight:400;
  }
  .nav-label{display:none}
}

/* --- Hero Section --- */
.hero{
  position:relative;overflow:hidden;
  background:var(--bg-hero);color:var(--text-inverse);
  padding:var(--space-3xl) 0;
  min-height:70dvh;display:flex;align-items:center;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(26,26,46,0.85),rgba(91,123,111,0.4));
  z-index:1;
}
.hero-content{position:relative;z-index:2;width:var(--content-width);margin:0 auto;padding:0 var(--space-md)}
.hero-eyebrow{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:0.15em;color:var(--accent-warm);
  margin-bottom:var(--space-md);font-weight:600;
}
.hero h1{
  font-size:var(--text-4xl);color:#fff;
  max-width:14ch;margin-bottom:var(--space-lg);
}
.hero p{color:rgba(255,255,255,0.8);max-width:50ch;font-size:var(--text-lg);line-height:1.7}
.hero-cta{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  margin-top:var(--space-xl);padding:14px 32px;
  background:var(--accent-warm);color:#fff;
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:var(--text-lg);font-weight:600;
  border:none;border-radius:var(--radius-full);
  cursor:pointer;transition:background var(--transition-base);
  min-height:44px;
}
.hero-cta:hover,.hero-cta:focus{background:var(--accent-warm-hover)}

/* Page Hero (inner pages) */
.page-hero{
  background:var(--bg-hero);color:var(--text-inverse);
  padding:var(--space-2xl) 0 var(--space-xl);
  position:relative;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,26,46,0.9),rgba(91,123,111,0.3));z-index:1;
}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff;margin-bottom:var(--space-sm)}
.page-hero p{color:rgba(255,255,255,0.75);max-width:55ch}

/* --- Breadcrumbs --- */
.breadcrumbs{
  padding:var(--space-md) 0;
  font-size:var(--text-xs);color:var(--text-secondary);
  font-family:system-ui,-apple-system,sans-serif;
}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}
.breadcrumbs li{display:flex;align-items:center;gap:var(--space-xs)}
.breadcrumbs li:not(:last-child)::after{content:'›';color:var(--border)}
.breadcrumbs a{color:var(--accent);transition:color var(--transition-fast)}
.breadcrumbs a:hover{color:var(--accent-hover)}
.breadcrumbs [aria-current="page"]{color:var(--text-primary);font-weight:600}

/* --- Cards --- */
.card{
  background:var(--bg-surface);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform var(--transition-slow),box-shadow var(--transition-slow);
}
.card-media{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--bg-elevated);
}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slower)}
.card-body{padding:var(--space-lg)}
.card-eyebrow{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:0.1em;color:var(--accent);
  margin-bottom:var(--space-xs);font-weight:600;
}
.card h3{margin-bottom:var(--space-xs)}
.card h3 a{transition:color var(--transition-fast)}
.card h3 a:hover{color:var(--accent)}
.card p{font-size:var(--text-sm);margin-bottom:var(--space-sm)}

/* Card Grid */
.card-grid{
  display:grid;gap:var(--space-lg);
  grid-template-columns:1fr;
}
@media(min-width:600px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card-grid--2col{grid-template-columns:1fr}
@media(min-width:600px){.card-grid--2col{grid-template-columns:repeat(2,1fr)}}

/* Film Card */
.film-card{display:flex;flex-direction:column}
.film-card .card-media{aspect-ratio:2/3}
.film-card-meta{
  display:flex;gap:var(--space-sm);align-items:center;
  font-size:var(--text-xs);color:var(--text-secondary);
  font-family:system-ui,-apple-system,sans-serif;
  margin-bottom:var(--space-sm);flex-wrap:wrap;
}
.film-card-meta span{display:flex;align-items:center;gap:4px}

/* Featured Card (large) */
.featured-card{
  border-radius:var(--radius-xl);overflow:hidden;
  background:var(--bg-surface);border:1px solid var(--border-light);
}
.featured-card .card-media{aspect-ratio:21/9}
.featured-card .card-body{padding:var(--space-xl)}

@media(hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
  .card:hover .card-media img{transform:scale(1.03)}
}
@media(hover:none){
  .card:active{transform:scale(0.98)}
}

/* --- Stillness Rating --- */
.stillness-bar{
  display:flex;gap:3px;align-items:center;
}
.stillness-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--border);transition:background var(--transition-base);
}
.stillness-dot.filled{background:var(--accent)}
.stillness-label{
  font-size:var(--text-xs);color:var(--text-secondary);
  margin-left:var(--space-xs);
  font-family:system-ui,-apple-system,sans-serif;
}

/* Stillness Profile Grid */
.stillness-profile{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);
  padding:var(--space-lg);background:var(--bg-elevated);border-radius:var(--radius-md);
  margin:var(--space-lg) 0;
}
@media(min-width:600px){.stillness-profile{grid-template-columns:repeat(4,1fr)}}
.stillness-metric{text-align:center}
.stillness-metric-label{
  font-size:var(--text-xs);color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:0.08em;
  font-family:system-ui,-apple-system,sans-serif;
  margin-bottom:var(--space-xs);
}
.stillness-metric-value{
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:var(--text-2xl);font-weight:700;color:var(--accent);
}

/* --- YouTube Trailer Embed (Performance-First Facade) --- */
.trailer-embed{
  position:relative;aspect-ratio:16/9;
  background:var(--bg-hero);border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;
}
.trailer-embed img{
  width:100%;height:100%;object-fit:cover;
  transition:opacity var(--transition-slow);
}
.trailer-embed::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.6));
}
.trailer-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;width:68px;height:48px;
  background:rgba(255,0,0,0.85);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition-base),transform var(--transition-base);
}
.trailer-play::after{
  content:'';border-style:solid;border-width:10px 0 10px 18px;
  border-color:transparent transparent transparent #fff;margin-left:3px;
}
.trailer-embed:hover .trailer-play{background:red;transform:translate(-50%,-50%) scale(1.08)}
.trailer-embed iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;
}
.trailer-title{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:var(--space-lg);
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:var(--text-lg);font-weight:600;color:#fff;
}

/* Trailer Grid */
.trailer-grid{
  display:grid;gap:var(--space-lg);grid-template-columns:1fr;
}
@media(min-width:600px){.trailer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.trailer-grid{grid-template-columns:repeat(3,1fr)}}

/* --- Key Takeaways --- */
.key-takeaways{
  background:var(--accent-soft);border-left:4px solid var(--accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-lg) var(--space-xl);margin:var(--space-lg) 0;
}
.key-takeaways h2{
  font-size:var(--text-lg);color:var(--accent);margin-bottom:var(--space-sm);
}
.key-takeaways p{color:var(--text-primary);margin-bottom:0;font-size:var(--text-base)}

/* --- FAQ Section --- */
.faq{margin:var(--space-section) 0}
.faq h2{margin-bottom:var(--space-lg)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-of-type{border-top:1px solid var(--border)}
.faq-item summary{
  padding:var(--space-md) 0;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  font-size:var(--text-base);color:var(--text-primary);
  min-height:44px;gap:var(--space-md);
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:var(--text-lg);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-size:1.5em;color:var(--accent);flex-shrink:0;
  transition:transform var(--transition-base);line-height:1;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-answer{
  padding:0 0 var(--space-lg);color:var(--text-secondary);
  line-height:1.8;max-width:65ch;
}
.faq-answer a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* --- Streaming Links --- */
.streaming-links{
  display:flex;flex-wrap:wrap;gap:var(--space-sm);
  margin:var(--space-md) 0;
}
.streaming-link{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  padding:8px 16px;border:1px solid var(--border);
  border-radius:var(--radius-full);font-size:var(--text-sm);
  color:var(--text-primary);transition:all var(--transition-base);
  min-height:44px;font-family:system-ui,-apple-system,sans-serif;
}
.streaming-link:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* --- Tags / Pills --- */
.tag{
  display:inline-flex;align-items:center;
  padding:4px 12px;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;
  font-family:system-ui,-apple-system,sans-serif;
  background:var(--accent-soft);color:var(--accent);
  transition:background var(--transition-fast);
  min-height:32px;
}
.tag:hover{background:var(--accent);color:#fff}
.tag--warm{background:var(--accent-warm-soft);color:var(--accent-warm)}
.tag--warm:hover{background:var(--accent-warm);color:#fff}

/* --- Mood Prescription Cards --- */
.mood-card{
  position:relative;overflow:hidden;
  background:var(--bg-surface);border:1px solid var(--border-light);
  border-radius:var(--radius-xl);padding:var(--space-xl);
  transition:all var(--transition-slow);
  display:flex;flex-direction:column;min-height:200px;
}
.mood-card-icon{
  font-size:var(--text-3xl);margin-bottom:var(--space-md);
  line-height:1;
}
.mood-card h3{margin-bottom:var(--space-xs)}
.mood-card h3 a{transition:color var(--transition-fast)}
.mood-card h3 a::after{content:'';position:absolute;inset:0}
.mood-card p{font-size:var(--text-sm);flex:1}
.mood-card-count{
  font-size:var(--text-xs);color:var(--accent);
  font-family:system-ui,-apple-system,sans-serif;
  font-weight:600;margin-top:var(--space-sm);
}
@media(hover:hover) and (pointer:fine){
  .mood-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
}

/* Mood Grid */
.mood-grid{
  display:grid;gap:var(--space-lg);grid-template-columns:1fr;
}
@media(min-width:600px){.mood-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.mood-grid{grid-template-columns:repeat(3,1fr)}}

/* --- Prescription Film Entry --- */
.prescription-film{
  display:grid;grid-template-columns:1fr;gap:var(--space-lg);
  padding:var(--space-xl) 0;border-bottom:1px solid var(--border-light);
}
@media(min-width:600px){
  .prescription-film{grid-template-columns:200px 1fr}
}
.prescription-film:last-child{border-bottom:none}
.prescription-film-poster{
  aspect-ratio:2/3;border-radius:var(--radius-md);overflow:hidden;
  background:var(--bg-elevated);
}
.prescription-film-poster img{width:100%;height:100%;object-fit:cover}
.prescription-film-body h3{margin-bottom:var(--space-xs)}
.prescription-film-why{
  font-style:italic;color:var(--accent);
  margin:var(--space-sm) 0;padding-left:var(--space-md);
  border-left:2px solid var(--accent);font-size:var(--text-sm);
}

/* --- Pillar Navigation --- */
.pillar-nav{
  display:flex;gap:var(--space-sm);overflow-x:auto;
  padding:var(--space-md) 0;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pillar-nav::-webkit-scrollbar{display:none}
.pillar-nav a{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  white-space:nowrap;padding:10px 20px;
  border:1px solid var(--border);border-radius:var(--radius-full);
  font-size:var(--text-sm);color:var(--text-secondary);
  font-family:system-ui,-apple-system,sans-serif;
  transition:all var(--transition-base);min-height:44px;
}
.pillar-nav a:hover,.pillar-nav a.active{
  border-color:var(--accent);color:var(--accent);background:var(--accent-soft);
}

/* --- Science Article --- */
.article-meta{
  display:flex;flex-wrap:wrap;gap:var(--space-md);
  font-size:var(--text-sm);color:var(--text-secondary);
  font-family:system-ui,-apple-system,sans-serif;
  margin-bottom:var(--space-xl);
}
.article-body{max-width:65ch;margin:0 auto}
.article-body h2{margin-top:var(--space-2xl)}
.article-body p{font-size:var(--text-base);line-height:1.85}
.article-body ul,.article-body ol{
  margin:var(--space-md) 0;padding-left:var(--space-lg);
  color:var(--text-secondary);
}
.article-body li{margin-bottom:var(--space-sm);line-height:1.7}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Author box */
.author-box{
  display:flex;gap:var(--space-lg);align-items:flex-start;
  padding:var(--space-xl);background:var(--bg-elevated);
  border-radius:var(--radius-lg);margin:var(--space-2xl) 0;
}
.author-avatar{
  width:64px;height:64px;border-radius:50%;
  background:var(--accent-soft);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-2xl);color:var(--accent);
}
.author-name{font-weight:700;margin-bottom:var(--space-xs)}
.author-bio{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:0}

/* --- Film Club --- */
.club-banner{
  background:var(--accent-warm-soft);border:1px solid var(--accent-warm);
  border-radius:var(--radius-xl);padding:var(--space-xl);
  text-align:center;margin:var(--space-lg) 0;
}
.club-banner h3{color:var(--accent-warm)}

/* --- CTA Section --- */
.cta-section{
  text-align:center;padding:var(--space-3xl) var(--space-md);
  background:var(--bg-hero);color:var(--text-inverse);
  position:relative;
}
.cta-section h2{color:#fff}
.cta-section p{color:rgba(255,255,255,0.75);max-width:50ch;margin:0 auto var(--space-xl)}
.cta-button{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  padding:14px 36px;background:var(--accent-warm);color:#fff;
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:var(--text-lg);font-weight:600;border:none;
  border-radius:var(--radius-full);cursor:pointer;
  transition:background var(--transition-base);min-height:44px;
}
.cta-button:hover{background:var(--accent-warm-hover)}

/* --- Footer --- */
.site-footer{
  background:var(--bg-hero);color:var(--text-inverse);
  padding:var(--space-3xl) 0 var(--space-xl);
}
.footer-grid{
  display:grid;gap:var(--space-xl);
  grid-template-columns:1fr;
  margin-bottom:var(--space-2xl);
}
@media(min-width:600px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-brand p{color:rgba(255,255,255,0.6);font-size:var(--text-sm);max-width:30ch}
.footer-heading{
  font-family:system-ui,-apple-system,sans-serif;
  font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:0.12em;color:rgba(255,255,255,0.4);
  margin-bottom:var(--space-md);font-weight:600;
}
.footer-links li{margin-bottom:var(--space-sm)}
.footer-links a{
  color:rgba(255,255,255,0.7);font-size:var(--text-sm);
  transition:color var(--transition-fast);
}
.footer-links a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:var(--space-lg);
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--space-md);font-size:var(--text-xs);
  color:rgba(255,255,255,0.4);
  font-family:system-ui,-apple-system,sans-serif;
}
.footer-bottom a{color:rgba(255,255,255,0.5);transition:color var(--transition-fast)}
.footer-bottom a:hover{color:#fff}

/* --- Numbered List --- */
.numbered-list{counter-reset:list-counter}
.numbered-list-item{
  counter-increment:list-counter;position:relative;
  padding:var(--space-lg) 0 var(--space-lg) 60px;
  border-bottom:1px solid var(--border-light);
}
.numbered-list-item::before{
  content:counter(list-counter,decimal-leading-zero);
  position:absolute;left:0;top:var(--space-lg);
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:var(--text-2xl);font-weight:700;color:var(--accent);
  line-height:1;
}

/* --- Inline Links Section --- */
.related-links{
  display:flex;flex-wrap:wrap;gap:var(--space-sm);
  margin:var(--space-md) 0;
}

/* --- Stat Counter --- */
.stat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg);
  text-align:center;margin:var(--space-xl) 0;
}
@media(min-width:600px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat-number{
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:var(--text-3xl);font-weight:700;color:var(--accent);
  line-height:1;margin-bottom:var(--space-xs);
}
.stat-label{
  font-size:var(--text-xs);color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:0.08em;
  font-family:system-ui,-apple-system,sans-serif;
}

/* --- Newsletter Form --- */
.newsletter-form{
  display:flex;flex-direction:column;gap:var(--space-sm);
  max-width:480px;margin:var(--space-lg) auto 0;
}
@media(min-width:600px){.newsletter-form{flex-direction:row}}
.newsletter-form input[type="email"]{
  flex:1;padding:12px 20px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:var(--radius-full);background:rgba(255,255,255,0.08);
  color:#fff;font-size:var(--text-sm);min-height:44px;
}
.newsletter-form input::placeholder{color:rgba(255,255,255,0.4)}
.newsletter-form button{
  padding:12px 28px;background:var(--accent-warm);color:#fff;
  border:none;border-radius:var(--radius-full);font-weight:600;
  cursor:pointer;transition:background var(--transition-base);
  font-size:var(--text-sm);min-height:44px;white-space:nowrap;
  font-family:system-ui,-apple-system,sans-serif;
}
.newsletter-form button:hover{background:var(--accent-warm-hover)}

/* --- Utility --- */
.visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.text-center{text-align:center}
.text-accent{color:var(--accent)}
.text-warm{color:var(--accent-warm)}
.mt-section{margin-top:var(--space-section)}
.mb-section{margin-bottom:var(--space-section)}
.flex-center{display:flex;align-items:center;justify-content:center}

/* --- Focus Indicators --- */
:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
  border-radius:var(--radius-sm);
}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* --- Print --- */
@media print{
  .site-header,.site-footer,.nav-toggle,.trailer-embed,.cta-section,.newsletter-form{display:none!important}
  body{color:#000;background:#fff;font-size:12pt}
  a{color:#000;text-decoration:underline}
  .container,.container--narrow,.container--wide{width:100%;max-width:100%}
}

/* --- Reduced Motion --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* --- Touch Targets (WCAG 2.2) --- */
a,button,[role="button"],summary,input,select,textarea{
  min-height:44px;
}