/* New York 1926 Centennial — Article page.
   Structural template: Find Your Water (typo scale, container, quote, button).
   NO new components. Uses existing site tokens + editorial layout. */

/* ── Dark page shell (same approach as subpage-dark in gallery.css) ── */
.editorial-main {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.85);
}
.editorial-main ~ footer { background: var(--navy-deep); }

/* Force dark header on this page */
#siteHeader {
  background: rgba(10, 14, 31, 0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── Article container ── */
.editorial-article {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 6% 100px;
}

/* ── Hero Component (from Find Your Water) ── */
.fyw-hero {
  position: relative;
  min-height: 85vh;
  background: var(--navy-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fyw-hero-image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.85);
}
.fyw-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,31,0.55) 0%, rgba(10,14,31,0.2) 35%, rgba(10,14,31,0.95) 100%);
}
.fyw-hero-content {
  position: relative;
  z-index: 2;
  padding: 120px 6% 80px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.fyw-hero-eyebrow {
  color: var(--sky);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}
.h1-visual {
  font-family: 'Noto Serif Display', serif; 
  font-size: clamp(2.2rem, 5vw, 4rem); 
  font-weight: 300; 
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
}
.h1-visual em {
  color: var(--sky);
  font-style: italic;
}
.fyw-hero-sub {
  font-family: 'Noto Serif Display', serif;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  font-weight: 300;
  font-style: italic;
  max-width: 800px;
  margin: 0;
}

/* ── Pull Quotes ── */
.pull-quote {
  font-family: 'Noto Serif Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--sky);
  line-height: 1.3;
  text-align: center;
  margin: 64px auto;
  font-weight: 300;
  border: none;
  padding: 0;
  max-width: 800px;
}

/* ── Gallery Grid ── */
.gallery-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px; 
  margin: 64px 0; 
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-item {
  position: relative; 
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1); 
  border-radius: 4px; 
  overflow: hidden;
  aspect-ratio: 4/3; 
}
.gallery-item img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

/* ── Header ── */
/* Deprecated block */

/* ── Article body ── */
.editorial-content h2 {
  font-family: 'Noto Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  color: #fff;
  margin: 56px 0 20px 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.editorial-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  margin: 40px 0 12px 0;
}

.editorial-content p {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.85);
  font-weight: 300;
}
.editorial-content p:last-child { margin-bottom: 0; }
.editorial-content strong { font-weight: 500; color: #fff; }
.editorial-content em { font-style: italic; }

/* ── Blockquote (same visual pattern as FYW whatfor-quote) ── */
.editorial-content blockquote {
  border-left: 3px solid var(--sky);
  padding: 24px 0 24px 28px;
  margin: 40px 0;
}
.editorial-content blockquote p {
  font-family: 'Noto Serif Display', serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.65;
  color: rgba(255,255,255,0.9);
  font-weight: 300;
}

/* ── Article figure ── */
.article-figure {
  margin: 48px 0;
}
.article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
}
.article-figure figcaption {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 12px;
  line-height: 1.5;
  font-style: italic;
}

/* ── CTA box (mirrors FYW cta pattern) ── */
.cta-box {
  text-align: center;
  margin: 56px 0;
  padding: 48px 32px;
  background: rgba(112,189,234,0.06);
  border: 1px solid rgba(112,189,234,0.15);
  border-radius: 6px;
}
.cta-box p {
  color: rgba(255,255,255,0.85);
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.65;
}

/* ── Section divider ── */
.section-divider {
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 56px 0;
}

/* ── Sources ── */
.sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sources-list li {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  line-height: 1.5;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sources-list li:last-child { border-bottom: none; padding-bottom: 0; }
.sources-list a {
  color: var(--sky);
  text-decoration: none;
}
.sources-list a:hover { text-decoration: underline; }

/* ── About + press contact (bottom sections) ── */
.editorial-about { margin-bottom: 48px; }
.editorial-about p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
}
.press-contact {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 32px;
}
.press-contact strong { color: #fff; font-weight: 500; }
.press-contact a {
  color: var(--sky);
  text-decoration: none;
}
.press-contact a:hover { text-decoration: underline; }