/* ── Page hero ── */
.page-hero { background: var(--ink); color: #fff; padding: 90px 0 110px; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background-image: url('../img/stars.svg'); background-size: 520px 520px; background-repeat: repeat; opacity: 0.33; pointer-events: none; animation: starDrift 180s linear infinite; z-index: 0; }
.page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: radial-gradient(ellipse at 50% 100%, rgba(236,30,124,0.16) 0%, transparent 60%); pointer-events: none; z-index: 0; }
.page-hero .hero-cactus { position: absolute; right: -40px; bottom: -8px; width: 170px; opacity: 0.55; pointer-events: none; transform: rotate(8deg); z-index: 1; }
.page-hero .hero-cactus img { width: 100%; height: auto; }
.page-hero .hero-skull-corner { position: absolute; top: 26px; left: -60px; width: 200px; opacity: 0.14; pointer-events: none; transform: rotate(-10deg); z-index: 1; animation: lightbulbFlicker 2.4s ease-out 0.2s 1 both; }
.page-hero .hero-skull-corner img { width: 100%; height: auto; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .label { color: var(--cyan); margin-bottom: 18px; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 80px); font-weight: 700; line-height: 1.02; letter-spacing: -2px; margin-bottom: 22px; }
.page-hero h1 em { color: var(--pink); font-style: normal; }
.page-hero .page-hero-lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.7); max-width: 640px; }

/* Slow galaxy drift for star backgrounds (matches home page) */
@keyframes starDrift {
  from { background-position: 0 0; }
  to   { background-position: -600px -300px; }
}

/* Light-bulb flicker for corner skull at page load */
@keyframes lightbulbFlicker {
  0%   { opacity: 0; }
  4%   { opacity: 0.14; }
  6%   { opacity: 0; }
  10%  { opacity: 0.14; }
  12%  { opacity: 0; }
  20%  { opacity: 0.14; }
  24%  { opacity: 0; }
  30%  { opacity: 0.07; }
  36%  { opacity: 0.14; }
  42%  { opacity: 0; }
  50%  { opacity: 0.10; }
  58%  { opacity: 0; }
  66%  { opacity: 0.14; }
  100% { opacity: 0.14; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::before, .subscribe::after { animation: none; }
  .page-hero .hero-skull-corner { animation: none; opacity: 0.14; }
}

/* ── News list ── */
.news { padding: 80px 0 120px; }

/* Featured article — top row, large card */
.featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid var(--line); }
/* Halftone-dot photo placeholders (swap for real thumbnails later) */
.featured-art {
  position: relative;
  aspect-ratio: 4/3;
  background:
    radial-gradient(circle, rgba(236,30,124,0.32) 2.5px, transparent 3px) 0 0/24px 24px,
    #F5EDF0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.featured-art::after { content: 'PHOTO'; position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: rgba(15,15,18,0.35); font-weight: 600; }
.featured-art .art-icon { font-size: 72px; color: rgba(15,15,18,0.28); position: relative; z-index: 1; }
.featured-art .hero-twinkle { display: none; }
.featured-content .meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.featured-content .meta .tag { background: var(--pink); color: #fff; padding: 4px 10px; font-weight: 600; }
.featured-content .meta .date { color: var(--ink-muted); }
.featured-content h2 { font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); font-weight: 700; line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 18px; }
.featured-content h2 a { color: var(--ink); transition: color 0.2s; }
.featured-content h2 a:hover { color: var(--pink); }
.featured-content p { color: var(--ink-muted); font-size: 16px; line-height: 1.7; margin-bottom: 26px; max-width: 540px; }
.read-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 4px; transition: all 0.2s; }
.read-more i { font-size: 16px; transition: transform 0.2s; }
.read-more:hover { color: var(--pink); border-bottom-color: var(--pink); }
.read-more:hover i { transform: translateX(3px); }

/* Article grid */
.article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 40px; }
.article-card { display: grid; grid-template-rows: auto auto; }
.article-art {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
}
.article-art::after { content: 'PHOTO'; position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: rgba(15,15,18,0.35); font-weight: 600; }
.article-art .hero-twinkle { display: none; }

/* Twinkling stars overlay (matches home page) */
.hero-twinkle { position: absolute; inset: 0; pointer-events: none; z-index: 1; }







.article-art .art-icon { font-size: 56px; color: rgba(15,15,18,0.24); position: relative; z-index: 1; }
.article-art.cyan {
  background:
    radial-gradient(circle, rgba(54,182,224,0.32) 2px, transparent 2.5px) 0 0/20px 20px,
    #E9F4F9;
}
.article-art.yellow {
  background:
    radial-gradient(circle, rgba(200,155,20,0.35) 2px, transparent 2.5px) 0 0/20px 20px,
    #F8F1DE;
}
.article-art.ink {
  background:
    radial-gradient(circle, rgba(15,15,18,0.28) 2px, transparent 2.5px) 0 0/20px 20px,
    #EEECEB;
}
.article-card .meta { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.article-card .tag { padding: 4px 10px; font-weight: 600; color: #fff; }
.article-card .tag.product { background: var(--cyan); color: var(--ink); }
.article-card .tag.feature { background: var(--ink); }
.article-card .tag.program { background: var(--yellow); color: var(--ink); }
.article-card .date { color: var(--ink-muted); }
.article-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.15; margin-bottom: 12px; }
.article-card h3 a { color: var(--ink); transition: color 0.2s; }
.article-card h3 a:hover { color: var(--pink); }
.article-card p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 16px; }
.article-card .read-more { font-size: 11px; padding-bottom: 3px; }

/* Pagination */
.pagination { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.pagination-info { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); }
.pagination-actions { display: flex; gap: 10px; }
.page-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-strong); color: var(--ink); transition: all 0.2s; font-size: 13px; font-weight: 600; }
.page-btn:hover { border-color: var(--ink); }
.page-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.page-btn.disabled { opacity: 0.35; pointer-events: none; }

/* Subscribe CTA */
.subscribe { background: var(--ink); color: #fff; padding: 90px 0; position: relative; overflow: hidden; }
.subscribe::before { content: ''; position: absolute; bottom: -100px; left: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(54,182,224,0.16) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.subscribe::after { content: ''; position: absolute; inset: 0; background-image: url('../img/stars.svg'); background-size: 460px 460px; background-repeat: repeat; opacity: 0.18; pointer-events: none; z-index: 0; animation: starDrift 220s linear infinite; }
.subscribe-pinkglow { position: absolute; top: -80px; right: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(236,30,124,0.14) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.subscribe-cactus { position: absolute; right: 4%; bottom: -20px; width: 140px; opacity: 0.45; pointer-events: none; transform: rotate(-6deg); z-index: 1; }
.subscribe-cactus img { width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(245,204,54,0.3)); }
.subscribe-skull { position: absolute; left: -50px; top: -30px; width: 200px; opacity: 0.10; transform: rotate(-12deg); pointer-events: none; z-index: 1; }
.subscribe-skull img { width: 100%; height: auto; }
.subscribe .wrap { position: relative; z-index: 2; text-align: center; }
.subscribe .label { color: var(--yellow); justify-content: center; margin-bottom: 18px; }
.subscribe h2 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 18px; }
.subscribe h2 em { color: var(--cyan); font-style: normal; }
.subscribe p { font-size: 17px; color: rgba(255,255,255,0.7); max-width: 520px; margin: 0 auto 32px; }
.subscribe-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.subscribe-form input { flex: 1; min-width: 240px; padding: 16px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color 0.2s; }
.subscribe-form input:focus { border-color: var(--cyan); }
.subscribe-form input::placeholder { color: rgba(255,255,255,0.45); }
.subscribe-form button { background: var(--pink); color: #fff; border: 0; padding: 16px 28px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; transition: background 0.2s; }
.subscribe-form button:hover { background: var(--pink-dark); }

/* Responsive */
@media (max-width: 960px) {
  .page-hero { padding: 60px 0 80px; }
  .featured { grid-template-columns: 1fr; gap: 40px; padding-bottom: 60px; margin-bottom: 60px; }
  .article-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 560px) {
  .pagination { justify-content: center; }
}