:root {
  --bg: #f7f7f2;
  --paper: #ffffff;
  --ink: #161616;
  --muted: #62625c;
  --line: #d8d5ca;
  --soft: #ece9df;
  --green: #173f35;
  --oxblood: #8b1f33;
  --cobalt: #244b9f;
  --ochre: #bc8d22;
  font-family: Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; object-fit: cover; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 20px clamp(18px, 5vw, 84px);
  background: rgba(247, 247, 242, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 12px; font-weight: 850; letter-spacing: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--oxblood);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
}

nav { display: flex; gap: 18px; flex-wrap: wrap; color: var(--green); font-size: 13px; font-weight: 850; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .62fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: center;
  min-height: min(760px, calc(84vh - 84px));
  padding: 46px clamp(18px, 6vw, 96px) 64px;
  border-bottom: 1px solid var(--line);
}

.hero h1,
.detail-hero h1 {
  max-width: 930px;
  margin: 0 0 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 400;
  line-height: .94;
  overflow-wrap: anywhere;
}

.hero p,
.detail-hero p {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}

.primary-link {
  display: inline-flex;
  margin-top: 30px;
  padding: 14px 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.primary-link:hover { background: var(--green); border-color: var(--green); }
.hero-media,
.detail-media { margin: 0; }
.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--ink);
  box-shadow: 18px 18px 0 var(--green);
}

.detail-media img {
  width: 100%;
  aspect-ratio: 4 / 3.8;
  border: 1px solid var(--ink);
  box-shadow: 14px 14px 0 var(--soft);
}

.intro-grid,
.essay,
.content-layout,
.page-index,
.related-pages,
.related-band,
.all-pages,
.blog-teaser,
.blog-gallery {
  padding: 56px clamp(18px, 6vw, 96px);
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.intro-grid article,
.topic-list a {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.intro-grid article:nth-child(2) { border-top-color: var(--oxblood); }
.intro-grid article:nth-child(3) { border-top-color: var(--cobalt); }
.intro-grid article:nth-child(4) { border-top-color: var(--ochre); }
.intro-grid img { width: 100%; aspect-ratio: 1 / 1.08; border-radius: 4px; }
.intro-grid span,
.topic-list span,
.back-link,
.blog-teaser span,
.article-kicker {
  color: var(--oxblood);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

h2 {
  margin: 0 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 3.6vw, 56px);
  font-weight: 400;
  line-height: .98;
}

.intro-grid h2,
.topic-list strong { font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; line-height: 1.08; }
.intro-grid p,
.essay p,
.article-body p,
.topic-list em,
.section-heading p,
.site-footer p,
li {
  color: var(--muted);
  font-size: 16px;
  font-style: normal;
  line-height: 1.78;
}

.essay,
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 42px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.article-body,
.essay > div { max-width: 850px; }
.essay aside,
.side-panel {
  padding: 26px;
  background: var(--green);
  color: var(--paper);
  border-radius: 6px;
}

.essay aside h2,
.side-panel h2,
.essay aside li,
.side-panel li { color: var(--paper); }

.partner-note a,
.blog-article a {
  color: var(--oxblood);
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.blog-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 42px;
  align-items: center;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.blog-teaser img {
  width: 100%;
  aspect-ratio: 4 / 3.15;
  border: 1px solid var(--ink);
  box-shadow: 14px 14px 0 var(--oxblood);
}

.page-index,
.related-pages,
.blog-gallery { background: var(--paper); }
.section-heading { max-width: 820px; margin-bottom: 30px; }
.topic-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.topic-list img { width: 100%; aspect-ratio: 4 / 3; border-radius: 4px; }
.topic-list.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 46px;
  align-items: center;
  padding: 58px clamp(18px, 6vw, 96px) 44px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.blog-hero .back-link { display: block; margin-bottom: 14px; overflow-wrap: anywhere; }
.article-kicker { display: inline-block; margin-bottom: 14px; color: var(--cobalt); }
.blog-layout { align-items: start; }
.blog-article section + section { margin-top: 34px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 3 / 4; border: 1px solid var(--line); border-radius: 4px; }

.related-band,
.all-pages { display: flex; gap: 10px; flex-wrap: wrap; background: var(--bg); }
.related-band a,
.all-pages a {
  padding: 10px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--green);
  font-size: 13px;
  font-weight: 850;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  gap: 34px;
  padding: 54px clamp(18px, 6vw, 96px);
  background: var(--ink);
  color: var(--paper);
}

.site-footer p,
.footer-links a { color: #d9d6ca; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-weight: 800; line-height: 1.4; }

@media (max-width: 980px) {
  .site-header,
  .site-footer { display: block; }
  nav { margin-top: 16px; }
  .hero,
  .detail-hero,
  .essay,
  .content-layout,
  .intro-grid,
  .topic-list,
  .topic-list.compact,
  .blog-teaser,
  .gallery-grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero h1,
  .detail-hero h1 { font-size: 44px; line-height: .96; }
  .hero-media img,
  .blog-teaser img { box-shadow: 8px 8px 0 var(--green); }
}