/* ============================================================
   SINGLE - the reading experience.
   ============================================================ */

.ic-single { padding-block: var(--ic-space-3xl) 0; }

/* Header */
.ic-single__header { text-align: center; margin-bottom: var(--ic-space-2xl); }
.ic-single__title {
  font-family: var(--ic-font-display);
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height: 1.06;
  color: var(--ic-text-strong);
  margin-block: var(--ic-space-sm) var(--ic-space-lg);
}
.ic-single__title--note { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.ic-single__lede {
  font-size: var(--ic-text-lede);
  line-height: var(--ic-leading-snug);
  color: var(--ic-text);
  max-width: 40ch;
  margin: 0 auto var(--ic-space-lg);
}

/* Byline */
.ic-byline {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--ic-space-md);
  font-family: var(--ic-font-ui); font-size: var(--ic-text-meta);
  color: var(--ic-text-muted);
}
.ic-byline__author { font-weight: var(--ic-weight-semibold); color: var(--ic-text); }

/* Featured image */
.ic-single__featured { margin-block: var(--ic-space-xl) var(--ic-space-2xl); }
.ic-single__featured img { width: 100%; height: auto; border-radius: var(--ic-radius-lg); box-shadow: var(--ic-shadow); }
.ic-single__featured figcaption { margin-top: var(--ic-space-sm); font-size: var(--ic-text-small); color: var(--ic-text-muted); text-align: center; }

/* Entry content - reading measure */
.entry-content { font-size: var(--ic-text-body); line-height: var(--ic-leading-body); color: var(--ic-text); }
.entry-content > * { margin-bottom: var(--ic-space-lg); }
.entry-content h2 { font-size: var(--ic-h2); margin-top: var(--ic-space-3xl); margin-bottom: var(--ic-space-md); }
.entry-content h3 { font-size: var(--ic-h3); margin-top: var(--ic-space-2xl); margin-bottom: var(--ic-space-sm); }
.entry-content h4 { margin-top: var(--ic-space-xl); }
.entry-content a { color: var(--ic-link); text-decoration: underline; text-decoration-color: var(--ic-tint-blue); text-underline-offset: 2px; }
.entry-content a:hover { color: var(--ic-link-hover); text-decoration-color: currentColor; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: var(--ic-space-sm); }
.entry-content img { border-radius: var(--ic-radius); margin-inline: auto; }
.entry-content figure { margin-block: var(--ic-space-xl); }
.entry-content figcaption { font-size: var(--ic-text-small); color: var(--ic-text-muted); text-align: center; margin-top: var(--ic-space-sm); }

/* Wide media may break the reading measure via .full-bleed inside content
   is not used; instead a wide figure can use .alignwide */
.entry-content .alignwide { max-width: var(--ic-content-width); margin-inline: auto; }

/* Drop cap */
body.has-drop-cap .ic-single:not(.ic-single--note) .entry-content > p:first-of-type::first-letter {
  font-family: var(--ic-font-display);
  font-size: 4.2rem;
  line-height: 0.8;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--ic-accent-deep);
}

/* End mark - rotated square diamond flanked by rules */
.ic-end-mark { display: flex; align-items: center; justify-content: center; gap: var(--ic-space-lg); padding-block: var(--ic-space-3xl); }
.ic-end-mark::before, .ic-end-mark::after { content: ""; height: 1px; width: 64px; background: var(--ic-rule); }
.ic-end-mark span { width: 8px; height: 8px; background: var(--ic-accent); transform: rotate(45deg); }

/* Tags */
.ic-single__tags { text-align: center; font-family: var(--ic-font-ui); font-size: var(--ic-text-small); }
.ic-single__tags a { color: var(--ic-text-muted); }
.ic-single__tags a:hover { color: var(--ic-accent-deep); }

/* Author section.
   Renders with or without a bio, so the layout cannot rely on the paragraph
   being there to give it height: the avatar and the name have to hold the
   block on their own. */
.ic-author {
  display: flex;
  gap: var(--ic-space-lg);
  align-items: flex-start;
  background: var(--ic-sage);
  border-radius: var(--ic-radius-lg);
  padding: var(--ic-space-xl);
  margin-block: var(--ic-space-2xl);
}
.ic-author__avatar { flex: none; display: block; line-height: 0; }
.ic-author__avatar img { border-radius: 50%; }
.ic-author__body { display: grid; gap: var(--ic-space-xs); align-content: start; }
.ic-author .ic-eyebrow { margin-bottom: 0; }
.ic-author__name {
  font-family: var(--ic-font-display);
  font-size: var(--ic-h4);
  line-height: 1.2;
  margin: 0;
}
.ic-author__name a { color: var(--ic-text-strong); }
.ic-author__name a:hover { color: var(--ic-accent-deep); }
.ic-author__bio { color: var(--ic-text); font-size: 1.0625rem; margin: 0; max-width: 60ch; }
.ic-author__more {
  justify-self: start;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ic-tracking-label);
  color: var(--ic-link);
  margin-top: var(--ic-space-xs);
}
.ic-author__more:hover { color: var(--ic-link-hover); }

@media (max-width: 560px) {
  .ic-author { flex-direction: column; gap: var(--ic-space-md); }
}

/* Audio player */
.ic-player { margin-block: var(--ic-space-xl) var(--ic-space-2xl); text-align: center; }
.ic-player audio { width: 100%; }
.ic-player__length { display: inline-block; margin-top: var(--ic-space-sm); font-family: var(--ic-font-ui); font-size: var(--ic-text-meta); color: var(--ic-text-muted); }

/* Post nav */
.ic-post-nav { display: flex; justify-content: space-between; gap: var(--ic-space-lg); padding-block: var(--ic-space-2xl); border-top: 1px solid var(--ic-rule); margin-top: var(--ic-space-2xl); font-family: var(--ic-font-ui); font-size: var(--ic-text-small); }
.ic-post-nav a { color: var(--ic-text-strong); }
.ic-post-nav a:hover { color: var(--ic-accent-deep); }
.ic-post-nav__next { text-align: right; margin-left: auto; }

/* Blockquote pull */
.entry-content blockquote { border-left-color: var(--ic-accent); }

/* 404 */
.ic-404 { padding-block: var(--ic-space-4xl); text-align: center; }
.ic-404__search { display: flex; justify-content: center; margin-block: var(--ic-space-lg); }
.ic-404 .ic-search { margin-inline: auto; }