.blog-index,
.blog-article {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.blog-intro {
  max-width: 760px;
  margin-bottom: 2.5rem;
}

.blog-intro h1,
.blog-article h1 {
  margin: .35rem 0 .8rem;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
}

.blog-intro p:not(.section-label),
.blog-article .lede {
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.7;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.blog-card {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}

.blog-card:hover {
  border-color: var(--brand-teal);
  transform: translateY(-2px);
}

.blog-card h2 {
  margin: .7rem 0 .6rem;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 1.35rem;
}

.blog-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.blog-card-meta,
.blog-meta {
  color: var(--muted);
  font-size: .82rem;
}

.blog-article {
  max-width: 840px;
}

.blog-article header {
  margin-bottom: 2rem;
}

.blog-article h2 {
  margin: 2.5rem 0 .75rem;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 1.55rem;
}

.blog-article h3 {
  margin: 1.6rem 0 .5rem;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
}

.blog-article p,
.blog-article li {
  color: var(--ink-soft);
  line-height: 1.75;
}

.blog-article ul,
.blog-article ol {
  padding-left: 1.35rem;
}

.blog-callout {
  margin: 1.75rem 0;
  padding: 1.25rem 1.35rem;
  border-left: 4px solid var(--brand-orange);
  background: var(--canvas);
}

.blog-callout p {
  margin: 0;
}

.blog-article a {
  color: var(--brand-teal-dark);
  font-weight: 700;
  text-underline-offset: 3px;
}

.blog-sources {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.blog-sources p,
.blog-sources li {
  font-size: .9rem;
}

@media (max-width: 700px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* Pull quotes -------------------------------------------------------------
   The loudness article carries eleven verbatim quotations from six named
   people, and the roles are the point: a re-recording mixer saying a cinema
   runs cold carries different weight from a director defending a mix. So the
   attribution is part of the design rather than a trailing line of small text.

   Teal, where .blog-callout is orange, so a quotation never reads as the
   article talking to you. Contrast on --teal-wash was checked: --ink 16.1:1,
   --ink-soft 7.3:1, --muted 5.3:1, all past the AA floor of 4.5. */
.pull-quote {
  position: relative;
  margin: 2rem 0;
  padding: 1.4rem 1.5rem 1.15rem 3.3rem;
  border-left: 4px solid var(--brand-teal-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--teal-wash);
}

/* Decorative only. Generated content, so it carries no meaning a reader loses
   if it is not announced, and the quotation is already marked up as one. */
.pull-quote::before {
  content: "\201C";
  position: absolute;
  top: 0.35rem;
  left: 0.9rem;
  color: var(--brand-teal-dark);
  font-family: 'Inter', sans-serif;
  font-size: 3.1rem;
  line-height: 1;
  opacity: 0.4;
}

.pull-quote blockquote {
  margin: 0;
}

.pull-quote blockquote p {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
}

.pull-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.55rem;
  align-items: baseline;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(13, 110, 122, 0.25);
}

.pq-name {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-style: normal;   /* <cite> italicises by default and reads as emphasis */
  font-weight: 700;
}

.pq-role {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  .pull-quote { padding: 1.2rem 1.1rem 1rem 2.6rem; }
  .pull-quote::before { font-size: 2.4rem; left: 0.6rem; }
}