/*
Theme Name: The People Archives
Theme URI: https://thepeoplearchives.org
Author: The People Archives
Author URI: https://thepeoplearchives.org
Description: A Magnum-grade photographic theme for The People Archives. Image-led, editorial, restrained, confident. Built from magnumphotos.com DOM structure.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tpa
Tags: photography, portfolio, e-commerce, custom-header, featured-images

The People Archives — serious portraits, direct support.
*/

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Fira Sans', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.21; font-weight: 300; color: #302d2d; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; transition: 0.2s; }
img { display: block; max-width: 100%; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #ccc; height: 90px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 30px; }
.header-logo a { font-family: 'Fira Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: #000; white-space: nowrap; }
.header-nav { display: flex; align-items: center; gap: 0; }
.header-nav a { font-family: 'Fira Sans', sans-serif; font-size: 15px; font-weight: 300; color: #000; padding: 8px 14px; position: relative; line-height: 90px; }
.header-nav a::after { content: ''; position: absolute; bottom: 22px; left: 50%; width: 0; height: 1px; background: #000; transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1); transform: translateX(-50%); opacity: 0; }
.header-nav a:hover::after { width: 70%; opacity: 1; }
.header-right { display: flex; align-items: center; }
.header-search { background: none; border: none; cursor: pointer; padding: 8px; color: #000; display: flex; align-items: center; }
.header-search svg { width: 18px; height: 18px; }
.header-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.header-hamburger span { display: block; width: 22px; height: 1px; background: #000; }

.page-content { padding-top: 90px; padding-bottom: 44px; }
.content-outer { width: 100%; }
.content-inner { max-width: 1200px; margin: 0 auto; padding: 0 30px; }

/* HERO — full-bleed */
.content-outer.hero { padding: 0; }
.content-outer.hero .content-inner { max-width: none; padding: 0; }
a.teaser { display: block; position: relative; overflow: hidden; cursor: pointer; }
a.teaser.full.size-hero { width: 100%; }
a.teaser .teaser-image { width: 100%; overflow: hidden; position: relative; }
a.teaser.size-hero .teaser-image { height: 620px; }
.teaser-image-inner { width: 100%; height: 100%; background: #e0e0e0; transition: opacity 0.2s; position: relative; }
.teaser-image-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.teaser:hover .teaser-image-inner { opacity: 0.85; }
.teaser-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 35px; z-index: 2; }
.teaser-overlay p.category { font-family: 'Fira Sans', sans-serif; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.2px; color: #fff; margin-bottom: 8px; }
.teaser-overlay h4.category-hover { font-family: 'Cormorant Garamond', 'Times New Roman', Times, serif; font-size: 34px; font-weight: 300; line-height: 1.15; color: #fff; margin-bottom: 6px; }
.teaser-overlay h5.category-photographer { font-family: 'Fira Sans', sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.8); letter-spacing: 0.5px; }
.teaser-scrim { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: 1; }

/* SWIPER */
.content-outer.teasers.slider { padding: 30px 0; }
.content-outer.teasers.slider .content-inner { position: relative; }
.swiper-header { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #e5e5e5; margin-bottom: 20px; }
.swiper-section-label { font-family: 'Cormorant Garamond', 'Times New Roman', Times, serif; font-size: 28px; font-weight: 300; line-height: 1.1; color: #000; letter-spacing: 0; }
.swiper-container { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; display: flex; gap: 20px; padding-bottom: 5px; }
.swiper-container::-webkit-scrollbar { display: none; }
a.teaser.size-medium { flex: 0 0 auto; width: 276px; scroll-snap-align: start; }
a.teaser.size-medium .teaser-image { height: 184px; }
.teaser-meta { padding: 12px 0 0; }
.teaser-meta p.category { font-family: 'Fira Sans', sans-serif; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.2px; color: #5f9ea0; margin-bottom: 6px; }
.teaser-meta h4.teaser-title { font-family: 'Fira Sans', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.3; color: #000; margin-bottom: 4px; }
.teaser-meta h5.teaser-photographer { font-family: 'Fira Sans', sans-serif; font-size: 12px; font-weight: 300; color: #999; letter-spacing: 0.3px; }
.swiper-nav { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.swiper-arrow { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; padding: 0; color: #999; transition: color 0.2s; }
.swiper-arrow:hover { color: #000; }
.swiper-arrow svg { width: 14px; height: 14px; }

.newsletter-section { border-top: 1px solid #e5e5e5; padding: 60px 0; }
.newsletter-inner { max-width: 1200px; margin: 0 auto; padding: 0 30px; }
.newsletter-heading { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: #000; margin-bottom: 10px; }
.newsletter-subtext { font-family: 'Fira Sans', sans-serif; font-size: 14px; font-weight: 300; color: #666; margin-bottom: 25px; line-height: 1.5; }
.newsletter-categories { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.newsletter-categories label { font-family: 'Fira Sans', sans-serif; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.8px; color: #302d2d; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.newsletter-categories input[type="checkbox"] { width: 14px; height: 14px; accent-color: #000; cursor: pointer; }
.newsletter-form-row { display: flex; max-width: 480px; }
.newsletter-form-row input[type="email"] { flex: 1; padding: 10px 14px; border: 1px solid #ccc; font-family: 'Fira Sans', sans-serif; font-size: 14px; font-weight: 300; color: #302d2d; outline: none; transition: border-color 0.2s; }
.newsletter-form-row input[type="email"]:focus { border-color: #000; }
.newsletter-form-row input[type="email"]::placeholder { color: #aaa; }
.newsletter-form-row button { padding: 10px 20px; border: 1px solid #000; border-left: none; background: #000; color: #fff; font-family: 'Fira Sans', sans-serif; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.2px; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.newsletter-form-row button:hover { background: #302d2d; }

.sticky-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: #000; height: 44px; display: flex; align-items: center; }
.sticky-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 30px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.sticky-footer-copy { font-family: 'Fira Sans', sans-serif; font-size: 10px; font-weight: 300; color: rgba(255,255,255,0.5); letter-spacing: 0.3px; }
.sticky-footer-social { display: flex; gap: 16px; align-items: center; }
.sticky-footer-social a { color: rgba(255,255,255,0.5); transition: color 0.2s; display: flex; align-items: center; }
.sticky-footer-social a:hover { color: #fff; }
.sticky-footer-social svg { width: 14px; height: 14px; }

.product-hero { padding: 40px 0 0; }
.product-hero .content-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product-image img { width: 100%; height: auto; }
.product-info { padding-top: 20px; }
.product-info .category { font-family: 'Fira Sans', sans-serif; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.2px; color: #5f9ea0; margin-bottom: 12px; }
.product-info h1 { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 300; line-height: 1.15; color: #000; margin-bottom: 8px; }
.product-info .photographer { font-family: 'Fira Sans', sans-serif; font-size: 14px; font-weight: 300; color: #666; margin-bottom: 30px; }
.product-info .price { font-family: 'Fira Sans', sans-serif; font-size: 20px; font-weight: 400; color: #000; margin-bottom: 20px; }
.product-info .description { font-family: 'Fira Sans', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; color: #555; margin-bottom: 30px; }
.product-info .add-to-cart { display: inline-block; padding: 14px 36px; background: #000; color: #fff; font-family: 'Fira Sans', sans-serif; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; border: none; cursor: pointer; transition: 0.2s; }
.product-info .add-to-cart:hover { background: #302d2d; }
.product-trust { margin-top: 40px; padding-top: 30px; border-top: 1px solid #e5e5e5; }
.product-trust p { font-family: 'Fira Sans', sans-serif; font-size: 13px; font-weight: 300; line-height: 1.6; color: #888; }

.page-hero { padding: 0; }
.page-hero img { width: 100%; height: 480px; object-fit: cover; }
.page-body { max-width: 720px; margin: 0 auto; padding: 60px 30px; }
.page-body h1 { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; line-height: 1.15; color: #000; margin-bottom: 30px; }
.page-body p { font-family: 'Fira Sans', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.7; color: #444; margin-bottom: 20px; }
.page-body h2 { font-family: 'Fira Sans', sans-serif; font-size: 18px; font-weight: 400; color: #000; margin-top: 40px; margin-bottom: 15px; }

.donation-section { padding: 60px 0; }
.donation-section .content-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.donation-text h2 { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: #000; margin-bottom: 20px; }
.donation-text p { font-family: 'Fira Sans', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.7; color: #555; margin-bottom: 15px; }
.donation-form input[type="number"] { width: 200px; padding: 12px 16px; border: 1px solid #ccc; font-family: 'Fira Sans', sans-serif; font-size: 16px; font-weight: 300; margin-bottom: 16px; outline: none; }
.donation-form input[type="number"]:focus { border-color: #000; }
.donation-form button { display: block; padding: 14px 36px; background: #000; color: #fff; font-family: 'Fira Sans', sans-serif; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; border: none; cursor: pointer; transition: 0.2s; }
.donation-form button:hover { background: #302d2d; }

@media (max-width: 1024px) {
  a.teaser.size-medium { width: 240px; }
  a.teaser.size-medium .teaser-image { height: 160px; }
  a.teaser.size-hero .teaser-image { height: 480px; }
  .product-hero .content-inner, .donation-section .content-inner { gap: 40px; }
}
@media (max-width: 768px) {
  .header-nav { display: none; }
  .header-hamburger { display: flex; }
  .header-logo a { font-size: 12px; letter-spacing: 2px; }
  .site-header { height: 60px; }
  .page-content { padding-top: 60px; }
  .content-inner { padding: 0 16px; }
  .content-outer.hero .content-inner { padding: 0; max-width: none; }
  a.teaser.size-hero .teaser-image { height: 360px; }
  .teaser-overlay { padding: 20px; }
  .teaser-overlay h4.category-hover { font-size: 24px; }
  a.teaser.size-medium { width: 220px; }
  a.teaser.size-medium .teaser-image { height: 147px; }
  .newsletter-inner, .sticky-footer-inner { padding: 0 16px; }
  .newsletter-heading { font-size: 26px; }
  .newsletter-categories { gap: 12px; }
  .swiper-nav { display: none; }
  .swiper-section-label { font-size: 22px; }
  .product-hero .content-inner, .donation-section .content-inner { grid-template-columns: 1fr; gap: 30px; }
  .page-hero img { height: 300px; }
  .page-body { padding: 40px 16px; }
  .page-body h1 { font-size: 32px; }
}
@media (max-width: 480px) {
  a.teaser.size-hero .teaser-image { height: 280px; }
  a.teaser.size-medium { width: 200px; }
  a.teaser.size-medium .teaser-image { height: 133px; }
  .newsletter-form-row { flex-direction: column; }
  .newsletter-form-row button { border-left: 1px solid #000; border-top: none; }
}