:root {
  --bg: #eee6d4;
  --paper: #fbf7eb;
  --ink: #17251a;
  --muted: #66705f;
  --sage: #49684d;
  --moss: #83936a;
  font-family: Georgia, "Times New Roman", 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: fixed;
  inset: 0 auto 0 0;
  width: 258px;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper);
  box-shadow: 18px 0 60px rgba(23, 37, 26, .08);
  z-index: 20;
}
.brand { display: grid; gap: 12px; font-size: 25px; line-height: 1; font-weight: 700; }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--paper); }
nav { display: grid; gap: 14px; color: var(--muted); font: 700 13px/1.2 Arial, sans-serif; }
main, .site-footer { margin-left: 258px; }

.hero {
  min-height: 92vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: end;
  gap: clamp(34px, 6vw, 86px);
  padding: clamp(54px, 8vw, 108px);
}
.hero h1, .detail-hero h1 { max-width: 820px; margin: 0 0 24px; font-size: clamp(48px, 7vw, 104px); line-height: .92; font-weight: 500; }
.hero p, .detail-hero p { max-width: 690px; margin: 0; color: var(--muted); font: 18px/1.8 Arial, sans-serif; }
.primary-link { display: inline-flex; margin-top: 28px; padding: 15px 22px; background: var(--sage); color: var(--paper); font: 800 12px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.hero-media img { width: 100%; aspect-ratio: 4 / 5.25; border-radius: 190px 190px 26px 26px; box-shadow: 0 28px 90px rgba(23, 37, 26, .19); }
.detail-media img { width: 100%; aspect-ratio: 4 / 4.8; border-radius: 160px 160px 22px 22px; box-shadow: 0 24px 70px rgba(23, 37, 26, .17); }

.intro-grid, .essay, .content-layout, .page-index, .related-pages, .related-band, .all-pages { padding: 54px clamp(34px, 7vw, 108px); }
.intro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; background: #e2dbc7; }
.intro-grid article, .essay aside, .side-panel, .topic-list a { background: var(--paper); border-radius: 24px; padding: 24px; box-shadow: 0 14px 42px rgba(23, 37, 26, .08); }
.intro-grid img { width: 100%; aspect-ratio: 5 / 3; border-radius: 18px; margin-bottom: 20px; }
.intro-grid span, .topic-list span, .back-link { color: var(--sage); font: 800 12px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
h2 { margin: 0 0 16px; font-size: clamp(30px, 3.2vw, 48px); line-height: 1; font-weight: 500; }
.intro-grid h2 { font-size: 30px; }
.intro-grid p, .essay p, .article-body p, .topic-list em, .section-heading p, .site-footer p, li { color: var(--muted); font: 16px/1.78 Arial, sans-serif; }
.essay, .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; }
.article-body, .essay > div { max-width: 820px; }
.page-index { background: var(--paper); }
.section-heading { max-width: 820px; margin-bottom: 28px; }
.topic-list { columns: 3 235px; column-gap: 18px; }
.topic-list a { display: inline-grid; width: 100%; gap: 9px; margin: 0 0 18px; break-inside: avoid; }
.topic-list img { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; }
.topic-list strong { font-size: 23px; font-weight: 500; }
.topic-list.compact { columns: 2 260px; }
.detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: end; padding: 70px clamp(34px, 7vw, 108px) 42px; }
.related-band, .all-pages { display: flex; gap: 12px; flex-wrap: wrap; }
.related-band a, .all-pages a { padding: 12px 16px; border-radius: 999px; background: var(--paper); color: var(--sage); font: 800 13px/1 Arial, sans-serif; }
.partner-note a, .blog-article a { color: var(--sage); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.blog-teaser { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 38px; align-items: end; padding: 54px clamp(34px, 7vw, 108px); background: #d8d2be; }
.blog-teaser span, .article-kicker { display: inline-block; margin-bottom: 14px; color: var(--sage); font: 800 12px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.blog-hero .back-link { display: block; margin-bottom: 12px; overflow-wrap: anywhere; }
.blog-teaser img { width: 100%; aspect-ratio: 4 / 4.4; border-radius: 150px 150px 20px 20px; box-shadow: 0 24px 70px rgba(23, 37, 26, .16); }
.blog-layout { align-items: start; }
.blog-article section + section { margin-top: 34px; }
.blog-gallery { padding: 54px clamp(34px, 7vw, 108px); background: var(--paper); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; box-shadow: 0 14px 42px rgba(23, 37, 26, .08); }
.site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 54px clamp(34px, 7vw, 108px); background: var(--sage); color: var(--paper); }
.site-footer p, .footer-links a { color: #e8e1ce; }
.footer-links { display: grid; gap: 12px; font: 700 14px/1.3 Arial, sans-serif; }

@media (max-width: 900px) {
  .site-header { position: static; width: auto; min-height: 0; }
  main, .site-footer { margin-left: 0; }
  nav { display: flex; flex-wrap: wrap; margin-top: 18px; }
  .hero, .detail-hero, .essay, .content-layout, .intro-grid, .blog-teaser, .gallery-grid { grid-template-columns: 1fr; }
}

/* Distinct layout: English field journal with a fixed book-spine nav. */
@media (min-width: 901px) {
  .site-header {
    width: 286px;
    padding: 42px 30px 34px;
  }

  main,
  .site-footer {
    margin-left: 286px;
  }

  .hero {
    min-height: 100vh;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 30vw);
    align-items: center;
    padding: 62px min(8vw, 118px) 72px;
  }

  .hero h1,
  .detail-hero h1 {
    font-size: 86px;
    line-height: .93;
  }

  .hero-media {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
  }

  .hero-media img {
    height: calc(100vh - 134px);
    max-height: 790px;
    aspect-ratio: 3 / 5;
    border-radius: 999px 999px 28px 28px;
  }

  .intro-grid {
    grid-template-columns: 1.35fr .65fr;
    align-items: start;
    padding-top: 72px;
    padding-bottom: 88px;
  }

  .intro-grid article:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 44% minmax(0, 1fr);
    gap: 28px;
    align-items: end;
    padding: 34px;
  }

  .intro-grid article:nth-child(2n + 3) {
    transform: translateY(34px);
  }

  .essay,
  .content-layout {
    grid-template-columns: minmax(0, 800px) 300px;
    align-items: start;
  }

  .essay aside,
  .side-panel {
    position: sticky;
    top: 32px;
    border-radius: 34px 34px 12px 12px;
  }

  .blog-teaser {
    grid-template-columns: 360px minmax(0, 1fr);
  }

  .blog-teaser img {
    order: -1;
  }

  .gallery-grid {
    grid-template-columns: 1.1fr .9fr 1fr;
    align-items: stretch;
  }

  .gallery-grid figure:nth-child(4n + 1) {
    grid-row: span 2;
  }

  .gallery-grid img {
    height: 100%;
    min-height: 250px;
    aspect-ratio: auto;
  }
}

@media (max-width: 900px) {
  .hero h1,
  .detail-hero h1 {
    font-size: 46px;
    line-height: .98;
  }

  .intro-grid article:first-child {
    display: grid;
    grid-template-columns: 1fr;
  }

  .intro-grid article:nth-child(2n + 3) {
    transform: none;
  }
}