/* =========================================================
   1) DESIGN TOKENS — change these to reskin the whole site
   ========================================================= */
:root{
  /* Colors */
  --bg: #0f1215;
  --surface: #171a1f;
  --surface-2: #12161b;
  --text: #e6edf3;
  --muted: #9aa4af;
  --brand: #28b0a9;
  --border: #222831;
  

  /* Layout */
  --radius: 14px;
  --container: 1120px;
  --gap: 20px;
  --shadow: 0 10px 24px rgba(0,0,0,.25);

  /* Typography */
  --fz-base: 16px;
  --fz-sm: .94rem;
  --fz-lg: 1.15rem;
  --fz-h1: clamp(28px, 3.6vw, 44px);
  --fz-h2: clamp(22px, 2.4vw, 30px);
}

h1, h2 {
  font-family: 'Playfair Display', Georgia, serif;
}
/* ======================
   2) BASE + UTILITIES
   ====================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: var(--fz-base)/1.65 system-ui, Segoe UI, Inter, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--container), 100% - 2rem); margin-inline: auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: var(--fz-sm); }

/* Spacing helpers (use sparingly) */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}

/* ======================
   3) BUTTONS + LINKS
   ====================== */
.btn {
  display: inline-block;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #062b29;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.sm { padding: 8px 32px; font-weight: 600; }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.link { color: var(--brand); }
.link:hover { text-decoration: underline; }

/* ======================
   4) HEADER / NAV
   ====================== */
/* HEADER / NAV */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,18,21,.72);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; min-height:64px;}
.logo {
  display: flex;
  font-family: 'Playfair Display', Georgia, serif;
  align-items: center;
  gap: 12px;          /* space between name and icons */
  font-weight: 800;
  color: #fff;
}

.logo a {
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
}

.social-icons {
  display: flex;
  gap: 8px;
  margin-left: 6px;
}

.social-icons a {
  color: #cfd7df;
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.social-icons a:hover {
  color: var(--brand, #28b0a9); /* highlight on hover */
}

/* desktop layout: links centered, contact on right */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex:1; /* so the groups can center/right properly */
}
.nav-links{
  display:flex; gap:16px; justify-content:center; flex:1;
}
.nav a{padding:10px 12px; border-radius:10px; color:#cfd7df}
.nav a:hover{background:#1b2027}
.nav .pill{background:#26323c; border:1px solid #26323c}
.nav-contact a{
  padding:10px 16px; border-radius:10px; background:#26323c; border:1px solid #26323c; color:#fff;
}

/* mobile toggle button */
.nav-toggle{
  display:none; padding:8px 10px; border-radius:10px;
  border:1px solid var(--border); background:#1a1f26; color:#dfe7ef;
}

/* MOBILE */
@media (max-width:900px){
  .nav-toggle{display:inline-block}

  /* make the menu a dropdown */
  .nav{
    position:absolute; left:0; right:0; top:64px;
    display:block; background:var(--bg); border-bottom:1px solid var(--border);
    transform:scaleY(0); transform-origin:top; transition:.15s;
  }
  .nav.open{transform:scaleY(1)}

  .nav-links{
    display:grid; gap:0; /* stacked links */
  }
  .nav a{padding:14px 20px; border-radius:0}

  .nav-contact{
    padding:12px 20px; border-top:1px solid var(--border);
  }
  .nav-contact a{
    display:block; width:100%; text-align:center;
    border-radius:10px;
  }
}


/* ======================
   5) HERO
   ====================== */
/* --- Hero base (you already have similar) --- */
.hero{position:relative}
.hero-bg{width:100%;height:58vh;min-height:480px;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(15,18,21,.9))}

/* --- Two-column hero layout --- */
.hero-content{
  position:absolute; inset:0;
  display:grid; align-items:center;
  padding-inline: 1rem;   /* keeps content off edges on very small screens */
  gap: 20px;
}

.hero-content.two-col{
  grid-template-columns: 1fr; /* mobile: stacked */
}
@media (min-width: 960px){
  .hero-content.two-col{
    grid-template-columns: 1.25fr auto;   /* left wider, right auto width */
  }
}


.hero-left{max-width: 640px}
.hero-title{margin:0; font-size: var(--fz-h1)}
.hero-sub{
  margin: .25rem 0 1rem;
  margin-right: 200px; 
  color:#d0dae3; 
  max-width: 500px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}

/* --- Covers on the right --- */
/* Right column: fixed strip that fits inside the hero */
.hero-right{
  /* tweak these 3 knobs if you like */
  --cols: 4;                    /* how many covers to show */
  --gap: 14px;                  /* space between covers */
  --strip-w: min(560px, 40vw);  /* total width of the books strip */

  width: var(--strip-w);
  display: flex;
  gap: var(--gap);
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: clamp(0px, 3vw, 24px);  /* breathing room from edge */
  overflow: visible;                      /* never clip the last cover */
}


/* Covers: same aspect, scale to the strip height without distortion */
.hero-right img{
  width: calc((var(--strip-w) - (var(--gap) * (var(--cols) - 1))) / var(--cols));
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* On very small screens hide the last cover so it doesn't crowd */
@media (max-width: 420px){
  .hero-right img:last-child{ display:none; }
}

@media (max-width: 1100px){
  .hero-right{ --cols: 3; --strip-w: min(480px, 46vw); }
}
@media (max-width: 780px){
  .hero-right{ --cols: 2; --strip-w: min(380px, 60vw); justify-content:center; }
}


/* ======================
   6) SECTIONS / GRIDS
   ====================== */
.section { padding-block: 56px; }         /* add class if you want */
.block { background: var(--surface); border-radius: var(--radius);
         padding: 24px; box-shadow: var(--shadow); }

/* Generic grids */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }

@media (min-width: 800px){ .grid-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 900px){
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(4,1fr); }
}

/* ======================
   7) FEATURE STRIP
   ====================== */
.feature {
  margin-top: 28px;
  padding-block: clamp(56px, 10vw, 140px); /* taller section */
  position: relative;
}

.feature-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr; /* stack on mobile */
  align-items: center;

  /* removed background, radius, padding, shadow */
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;

  min-height: 60vh; /* give good height */
}

@media (min-width: 900px) {
  .feature-grid {
    grid-template-columns: .9fr 1.1fr;
  }
}

.book-3d {
  width: clamp(300px, 42vw, 360px); /* min 200px, scale with 32vw, max 360px */
  margin-inline: auto;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.45));
}

.hero-left, .book-wrap{
  flex: 0 0 auto;   /* optional, if using flexbox */
}
.eyebrow {
  font-size: clamp(3.2rem, 2.2vw, 2rem);
  margin: 0 0 14px;
  line-height: 1.25;
}

.author-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 18px;
}
.author-chip img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}


/* ======================
   8) WHO-IS SPLIT
   ====================== */
/* WHO IS AUTHOR SECTION */
.who {
  padding-block: clamp(60px, 10vw, 120px); /* good vertical height */
}

.who-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr; /* stack on mobile */
  align-items: center;
}

@media (min-width: 900px) {
  .who-grid {
    grid-template-columns: 1.1fr .9fr; /* text left, image right */
  }
}

.who h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin: 0 0 1rem;
  font-size: 48px;
  font-weight: 700;
}

.who p {
  margin: 0 0 1rem;
  font-size: 22px;
  color: var(--text);
  line-height: 1.6;
  max-width: 600px;
}

.who-cover img {
  width: 90%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
/* ======================
   9) BOOKS LIST
   ====================== */

/* ===== Books section ===== */
/* BOOKS SECTION */
.section-title { 
  font-size: clamp(1.8rem, 2.6vw, 3.4rem); 
  margin: 0 0 .35rem; 
}
.section-kicker { margin: 0 0 1.6rem; }

.books { padding-block: clamp(48px, 8vw, 88px); }

.book-grid {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  grid-template-columns: 1fr;  /* 1 col on mobile */
  margin-top: clamp(14px, 2vw, 20px);
}
@media (min-width: 860px) {
  .book-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 600px) {
  .book-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 4 columns */
@media (min-width: 960px) {
  .book-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Card */
.book-card {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 22px);
  box-shadow: var(--shadow);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  min-height: 520px; /* consistent tall cards */
  transition: transform .18s ease, box-shadow .18s ease;
}
.book-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 16px 36px rgba(0,0,0,.38); 
}

.book-card img {
  width: clamp(200px, 70%, 260px);
  aspect-ratio: 260 / 360;
  
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  margin-bottom: 14px;
}

.book-card h3 { 
  font-size: 1.05rem; 
  margin: 6px 0 10px; 
}

/* Format chips */
.formats {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}
.chip {
  padding: 6px 12px;
  font-size: var(--fz-sm);
  color: #e6edf3;
  background: #222831;
  border: 1px solid #2f363e;
  border-radius: 999px;
}

/* Grow spacer to align CTAs at bottom */
.grow { flex: 1; }

/* CTAs */
.w-full { width: 100%; }
.sub-link {
  margin-top: 10px;
  font-size: var(--fz-sm);
  color: #9bbcff;
}
.sub-link:hover { text-decoration: underline; }





/* ======================
   10) BANNER
   ====================== */
.banner img {
  width: 100%; height: 220px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); margin-block: 34px;
}

/* ======================
   ABOUT FRIEND
   ====================== */
#about-video {
  margin-top: 8rem;
}
#about-video h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
  text-align: left;
}

/* Grid layout */
.av-grid {
  display: grid;
  grid-template-columns: 1.0fr 1.35fr; /* left media is wider */
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

/* Video wrapper (keeps 16:9 ratio) */
.media-9x16 {
  width: 100%;
  max-width: 360px;   /* adjust width for portrait video */
  margin: 0 auto;     /* center if needed */
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background: #000;   /* optional: fallback background */
  overflow: hidden;
}

.media-9x16 video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;   /* crop if too tall */
  border-radius: 14px;
}



/* Text column */
.av-copy p { 
 margin-top: 1.5rem;
  font-size: 22px;
  color: var(--text);
  line-height: 1.6;
  max-width: 600px;
}
.av-copy .muted { color:#9aa4af; }
.av-copy .btn.sm { margin-top: .5rem; }

/* Responsive */
@media (max-width: 900px) {
  .av-grid { grid-template-columns: 1fr; }
  #about-video h2 { text-align: center; }
  .av-copy { text-align: center; }
}

/* ======================
    BOOK FAIRS
   ====================== */

   /* Space above the section (tweak as you like) */
#book-fairs { 
  margin-top: 6rem;
  margin-bottom: 5rem;  /* more breathing room above section */
}

/* Grid layout */
.book-fairs .bf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 1.5rem;
}

/* Responsive breakpoints */
@media (max-width: 1100px) {
  .book-fairs .bf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .book-fairs .bf-grid { grid-template-columns: 1fr; }
}

/* 16:9 wrapper + styling */
.video-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;   /* 16:9 ratio */
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background: rgba(255,255,255,.04);
}
.video-16x9 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Optional: subtle card hover */
.bf-item {
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bf-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}

.book-fairs h2.center {
  font-size: clamp(1.8rem, 2.6vw, 3.4rem);
  margin: 0 0 1.2rem;
}



/* ======================
   11) REVIEWS
   ====================== */
/* ===== Reviews: open, centered, no cards ===== */
.reviews { 
  padding-block: clamp(48px, 8vw, 96px);
}

.reviews h2.center {
  font-size: clamp(1.8rem, 2.6vw, 3.4rem);
  margin: 0 0 1.2rem;
}

/* Reviews grid */
.reviews-grid {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  grid-template-columns: 1fr;       /* default: 1 column on mobile */
  justify-content: center;          /* center leftover items */
  justify-items: center;            /* center each review */
}

@media (min-width: 700px) {
  .reviews-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)); /* 2 cols on tablets */
  }
}

@media (min-width: 900px) {
  .reviews-grid {
    grid-template-columns: repeat(3, minmax(280px, 1fr)); /* 3 cols on desktop */
  }
}

/* Review styling */
.review {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  text-align: center;
  max-width: 40ch;      /* keeps text line length nice */
  margin-inline: auto;
}

/* Stars */
.review .stars {
  color: #f6a93b;
  font-size: 1.2rem;
  letter-spacing: 2px;
  margin-bottom: .6rem;
}

/* Quote text */
.review > p:first-of-type {
  color: var(--text);
  margin: 0 0 .75rem;
}

/* Author line */
.review .muted.small {
  color: #cfd4db;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0;
}

/* ======================
   NYC ARTICLES
   ====================== */

/* NYC Article Section */
#nyc-article {
  margin-top: 6rem;
}

.nyc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 4.5rem;
}

.nyc-item {
  text-align: center;
}

.nyc-item1 {
  text-align: center;
}

.nyc-item img {
  width: 88%; /* a bit wider for nice balance */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto; /* ensures images are centered */
}

.nyc-item1 img {
  width: 95%; /* a bit wider for nice balance */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto; /* ensures images are centered */
}


.nyc-link a {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  background: transparent;
  border: 2px solid var(--brand, #0af);
  color: var(--brand, #0af);
  font-weight: 600;
  transition: 0.25s ease;
}

.nyc-link a:hover {
  background: var(--brand, #0af);
  color: #fff;
}

#nyc-article h2.center {
  font-size: clamp(1.8rem, 2.6vw, 3.4rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 1.5rem;
  line-height: 1.2;
}



/* ======================
   12) GALLERY
   ====================== */
/* Responsive image grid */
/* Container spacing */
#gallery {
  margin-top: 10rem; /* spacing above gallery section */
}

/* Justified gallery shell */
.justified{
  --row-h: 180px;            /* target row height (tweak me) */
  --gap: 10px;               /* space between photos */
}

/* Rows are built dynamically */
.jg-row{
  display:flex;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

/* Each image gets its computed width/height */
.jg-item{
  position:relative;
  overflow:hidden;
  border-radius: 12px;       /* soften corners */
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.jg-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Responsive tuning */
@media (max-width: 700px){
  .justified{ --row-h: 140px; --gap: 8px; }
}

#gallery h2.center {
  font-size: clamp(1.8rem, 2.6vw, 3.4rem);
  font-weight: 700;         /* makes it stand out */
  text-align: center;       /* ensures it's centered */
  margin: 0 0 1.5rem;       /* spacing below */
  line-height: 1.2;
}


/* ======================
   13) CONTACT
   ====================== */
/* Contact card */
/* Contact grid – no card background */

/* Add space above contact section */
/* ===== Contact Section ===== */
#contact {
  margin-top: 10rem;                 /* space above (below Gallery) */
}

.contact .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;/* left copy / right form */
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding-block: 3rem;              /* same vertical spacing as other sections */
}

/* Left column */
.contact h2 { margin: 0 0 .4rem;
font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 700; }

.contact .muted { color: #9aa4af; max-width: 44ch }
.contact .contact-list { list-style: none; padding: 0; margin: 16px 0 0 }
.contact .contact-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; color: #cbd5e1;
}

/* ===== Form ===== */
.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 18px);
  margin-bottom: 14px;
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin: 6px 0 6px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #29313a;
  background: rgba(255,255,255,.04);
  color: #e5e7eb;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input[type="checkbox"] {
  width: auto;         /* don’t stretch */
  height: auto;
  accent-color: #0ea5a4;  /* modern browsers: gives it your theme color */
  cursor: pointer;
}

.contact-form textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #7b8794 }

/* Focus state */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #0ea5a4;
  box-shadow: 0 0 0 3px rgba(14,165,164,.15);
}

/* ===== Consent under message ===== */
.contact-form .check.stacked {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 12px 0;                   /* space around consent line */
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.4;
}
.contact-form .check.stacked input { margin: 0 }

/* ===== Full-width submit button ===== */
.contact-form .btn.btn-wide {
  width: 100%;
  display: block;
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;               /* flatter corners like reference */
  background: #0ea5a4;               /* accent color */
  color: #071218;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.contact-form .btn.btn-wide:hover { transform: translateY(-1px) }
.contact-form .btn.btn-wide:active { transform: none }

/* If any old .form-actions rules exist, neutralize them */
.contact-form .form-actions { display: none !important; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .contact .contact-grid { grid-template-columns: 1fr }
  .contact-form .row { grid-template-columns: 1fr }
  /* Button already full width; consent stays above it */
}








/* ======================
   14) FOOTER
   ====================== */
/* Footer wrapper */
.site-footer {
  background:#0c0f12;
  border-top:1px solid var(--border);
  margin-top:44px;
  color:#e5e7eb;
}

/* Grid layout */
.foot {
  display:grid;
  gap:24px;
  align-items:start;
  padding-block:28px;
}
@media(min-width:900px){
  .foot{ grid-template-columns:1fr auto; }
}

/* Left column */
.brand { margin:0 0 12px; font-size:1.4rem; }
.mini-nav { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.mini-nav a { color:#cbd5e1; text-decoration:none; }
.mini-nav a:hover { color:#fff; }
.small { font-size:.85rem; }
.muted { color:#9aa4af; }

/* Right column */
.foot-right { max-width:320px; }
.subscribe-title { margin:0 0 10px; font-size:1.2rem; }
.newsletter {
  display:flex;
  gap:10px;
  margin-bottom:.5rem;
}
.newsletter input {
  flex:1;
  padding:10px 12px;
  border:1px solid var(--border);
  background:#11161b;
  color:#e5e7eb;
  border-radius:6px;
  outline:none;
}
.newsletter input::placeholder { color:#94a3b8; }
.newsletter .btn.ghost {
  background:#1095a6; color:#fff; border-radius:6px; font-weight:600;
}
.newsletter .btn.ghost:hover { filter:brightness(1.05); }

/* Privacy + copyright text */
.privacy, .copyright {
  margin:.4rem 0 0;
  font-size:.85rem;
  line-height:1.4;
}
.privacy a { color:#cbd5e1; text-decoration:underline; }
.copyright { margin-top:.8rem; }

/* Divider */
.foot-divider {
  border: 0;
  border-top: 1px solid var(--border, #2d3339);
  margin: 20px 0 0;
}

/* Bottom bar */
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 10px 18px;
  font-size: 0.85rem;
}
.foot-bottom a {
  color: #9aa4af;
  text-decoration: underline;
}
.foot-bottom a:hover {
  color: #fff;
}



.social-links {
  margin-top: 10px;
  display: flex;
  gap: 14px;
}

.social-links a {
  color: #cbd5e1; /* muted gray */
  font-size: 1.3rem;
  transition: color 0.2s ease;
}

.social-links a:hover {
  color: #17a499; /* your brand teal */
}


.trailer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.trailer-block {
  background: #111;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
}

.trailer-title {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  font-size: clamp(.4rem, 2.6vw, 1.4rem);
}

.trailer-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.trailer-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#trailers {
  margin-top: 10rem;   /* increase space from the section above */
  padding-top: 1rem;  /* optional, adds inner spacing */
}

#trailers h2.center {
  font-size: clamp(1.8rem, 2.6vw, 3.4rem);
  font-weight: 700;         /* makes it stand out */
  text-align: center;       /* ensures it's centered */
  margin: 0 0 1.5rem;       /* spacing below */
  line-height: 1.2;
}