/*
Theme Name: Rock Illustrated
Theme URI: https://rockillustrated.com/
Author: Tony Pierce
Description: A fast, editorial WordPress theme for concert reporting, setlists and live-music history.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: rock-illustrated
*/

:root {
  --ri-black: #111111;
  --ri-paper: #f5f3ee;
  --ri-red: #e33b2e;
  --ri-yellow: #ffe95a;
  --ri-gray: #6d6b66;
  --ri-line: #d8d4cb;
  --ri-wide: 1180px;
  --ri-copy: 760px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ri-black); background: var(--ri-paper); font-family: Arial, Helvetica, sans-serif; line-height: 1.55; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed; top: 10px; left: 10px; z-index: 9999; width: auto; height: auto; padding: 12px 16px; clip: auto; background: white; color: black; }

.site-header { position: relative; z-index: 10; border-bottom: 1px solid var(--ri-line); background: var(--ri-paper); }
.site-header__inner { width: min(var(--ri-wide), 88vw); min-height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-title { margin: 0; font: 700 27px/1 Georgia, serif; letter-spacing: -.035em; }
.site-title a { text-decoration: none; }
.site-nav ul { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.site-nav a { font-size: 15px; text-decoration: none; }
.site-nav a:hover, .site-nav .current-menu-item > a, .site-nav .current_page_item > a { color: var(--ri-red); }

.hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; color: white; background: var(--ri-black); }
.hero__image, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__image { object-fit: cover; object-position: center center; }
.hero__shade { background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.27) 100%); }
.hero__inner { position: relative; z-index: 1; width: min(var(--ri-wide), 88vw); margin: auto; padding: 78px 0 82px; }
.eyebrow { margin: 0 0 24px; color: #ff5146; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { max-width: 1050px; margin: 0; font-size: clamp(66px, 9vw, 132px); font-weight: 900; line-height: .84; letter-spacing: -.075em; text-transform: uppercase; }
.hero__dek { max-width: 900px; margin: 32px 0 30px; font: 400 clamp(23px, 2.25vw, 34px)/1.25 Georgia, serif; }
.buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-block; padding: 14px 20px; border: 2px solid white; color: white; font-weight: 700; text-decoration: none; }
.button--primary { border-color: var(--ri-red); background: var(--ri-red); }
.button:hover { border-color: var(--ri-yellow); background: var(--ri-yellow); color: var(--ri-black); }

.section, .page-shell { width: min(var(--ri-wide), 88vw); margin: auto; padding: 64px 0 92px; }
.section__header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; border-bottom: 5px solid var(--ri-red); padding-bottom: 16px; }
.section__title, .archive-title, .page-title { margin: 0; font: 700 clamp(38px, 5vw, 58px)/1 Georgia, serif; letter-spacing: -.045em; }
.section__link { font-weight: 700; text-decoration: none; }
.section__link:hover { color: var(--ri-red); }

.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 30px; }
.story-card { border-top: 1px solid #bcb8af; padding-top: 16px; }
.story-card__image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #292929; }
.story-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.story-card__image:hover img { transform: scale(1.025); }
.story-card__kicker { margin: 15px 0 6px; color: var(--ri-red); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.story-card__title { margin: 0 0 9px; font: 700 26px/1.08 Georgia, serif; letter-spacing: -.02em; }
.story-card__title a { text-decoration: none; }
.story-card__title a:hover { color: var(--ri-red); }
.story-card__date, .entry-meta { color: var(--ri-gray); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.story-card__excerpt { margin: 12px 0 0; font-family: Georgia, serif; color: #3d3b37; }
.story-card__excerpt p { margin: 0; }
.empty-state { grid-column: 1 / -1; padding: 44px 0; font: 24px/1.4 Georgia, serif; }

.archive-header { padding: 64px 0 34px; border-bottom: 5px solid var(--ri-red); }
.archive-description { max-width: 760px; font: 21px/1.45 Georgia, serif; }
.pagination { margin-top: 50px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.page-numbers { padding: 8px 12px; border: 1px solid var(--ri-line); text-decoration: none; }
.page-numbers.current { color: white; background: var(--ri-black); }

.entry { width: min(var(--ri-copy), 88vw); margin: auto; padding: 62px 0 92px; }
.entry--wide { width: min(var(--ri-wide), 88vw); }
.entry-title { margin: 0 0 18px; font: 700 clamp(44px, 6.5vw, 82px)/.98 Georgia, serif; letter-spacing: -.055em; }
.entry-featured { width: min(var(--ri-wide), 100%); margin: 36px 50% 42px; transform: translateX(-50%); }
.entry-featured img { width: 100%; max-height: 720px; object-fit: cover; }
.entry-content { font: 19px/1.7 Georgia, serif; }
.entry-content > * { max-width: var(--ri-copy); margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: var(--ri-wide); }
.entry-content > .alignfull { max-width: none; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.entry-content h2, .entry-content h3 { line-height: 1.15; letter-spacing: -.025em; }
.entry-content blockquote { margin-top: 36px; margin-bottom: 36px; padding-left: 24px; border-left: 5px solid var(--ri-red); font-size: 1.25em; }
.entry-content figcaption { color: var(--ri-gray); font: 13px/1.45 Arial, sans-serif; }

.site-footer { color: #34322f; background: #dedbd3; }
.site-footer__inner { width: min(var(--ri-wide), 88vw); margin: auto; padding: 42px 0; display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.site-footer__title { margin: 0 0 5px; font: 700 23px/1 Georgia, serif; }
.site-footer p { margin: 0; font-size: 14px; }
.footer-nav ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.footer-nav a { text-decoration: none; }

@media (max-width: 850px) {
  .site-header__inner { align-items: flex-start; flex-direction: column; padding: 22px 0; }
  .site-nav ul { flex-wrap: wrap; gap: 12px 22px; }
  .hero { min-height: 500px; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .site-footer__inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 580px) {
  .hero h1 { font-size: 58px; }
  .hero__inner { padding: 58px 0 64px; }
  .story-grid { grid-template-columns: 1fr; }
  .section__header { align-items: flex-start; flex-direction: column; }
  .footer-nav ul { flex-wrap: wrap; }
}