/**
 * Long-read treatment for blog posts — miasma.com
 * Scoped to .longread; attached only on blog_post full view via the node template.
 * Single light palette, harmonised with the site chrome.
 *
 * Reusable body components an author can drop into the CKEditor source view:
 *   <div class="lr-takeaway"><p class="lr-takeaway__label">The Takeaway</p><p>…</p></div>
 *   <h2><span class="lr-step">Phase 01 — The Setup</span>Heading text</h2>
 *   <blockquote class="lr-pull"><p>Big line…</p><cite>— source</cite></blockquote>
 *   <div class="lr-meter lr-meter--alarm"><span class="lr-meter__label">PM2.5</span>
 *        <span class="lr-meter__val">5-ALARM</span><i></i><i></i><i></i><i></i><i></i></div>
 *   Captioned images: use the editor's image caption (outputs <figure><figcaption>).
 */

.longread {
  --lr-paper:   #edf0f1;
  --lr-surface: #f6f8f8;
  --lr-ink:     #1b1f24;
  --lr-ink-soft:#3c444c;
  --lr-muted:   #6b747d;
  --lr-hair:    #d3d9dc;
  --lr-accent:  #d8324f;
  --lr-accent-ink:#b01e3b;
  --lr-serif:  Charter,"Bitstream Charter","Iowan Old Style",Georgia,serif;
  --lr-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --lr-mono:   ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --lr-measure: 39rem;

  color: var(--lr-ink);
  font-family: var(--lr-serif);
  font-size: 1.125rem;
  line-height: 1.72;
}

/* dark mode — follows the visitor's OS setting via data-bs-theme */
[data-bs-theme="dark"] .longread {
  --lr-paper:   #111417;
  --lr-surface: #1b2126;
  --lr-ink:     #e7ebee;
  --lr-ink-soft:#c2c9ce;
  --lr-muted:   #8c969d;
  --lr-hair:    #2a3138;
  --lr-accent:  #f0576f;
  --lr-accent-ink:#f0576f;
}

/* centered reading column shared by hero text, body, and author components */
.longread .lr-hero-inner,
.longread .lr-body,
.longread .lr-takeaway,
.longread .lr-pull,
.longread .lr-meter,
.longread .lr-foot {
  max-width: var(--lr-measure);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- hero ---------- */
.longread .lr-hero {
  position: relative;
  overflow: hidden;
  padding: 2.6rem 1.25rem 2rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--lr-hair);
}
.longread .lr-haze {
  position: absolute; inset: 0; pointer-events: none; opacity: .38;
  background:
    radial-gradient(2px 2px at 18% 32%, var(--lr-muted) 40%, transparent 42%),
    radial-gradient(1.5px 1.5px at 63% 55%, var(--lr-muted) 40%, transparent 42%),
    radial-gradient(2px 2px at 82% 22%, var(--lr-muted) 40%, transparent 42%),
    radial-gradient(1.5px 1.5px at 42% 72%, var(--lr-muted) 40%, transparent 42%),
    radial-gradient(2px 2px at 10% 64%, var(--lr-muted) 40%, transparent 42%);
}
.longread .lr-kicker {
  font-family: var(--lr-mono);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--lr-accent-ink); margin: 0 0 .9rem;
}
.longread .lr-title {
  font-family: var(--lr-display);
  font-weight: 700; letter-spacing: -.01em; line-height: 1.05;
  font-size: clamp(2.2rem, 6vw, 3.3rem); margin: 0; text-wrap: balance;
}
.longread .lr-dek {
  font-family: var(--lr-serif); font-style: italic;
  font-size: 1.25rem; line-height: 1.5; color: var(--lr-ink-soft);
  margin: 1rem 0 0; max-width: 32em;
}
.longread .lr-byline {
  font-family: var(--lr-mono); font-size: .78rem; letter-spacing: .03em;
  color: var(--lr-muted); margin: 1.5rem 0 0;
  display: flex; flex-wrap: wrap; gap: .45rem .9rem; align-items: center;
}
.longread .lr-byline b { color: var(--lr-ink); font-weight: 600; }
.longread .lr-byline a { color: var(--lr-ink); text-decoration: none; }
.longread .lr-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--lr-muted); display: inline-block; }

/* ---------- lead image (field_image) ---------- */
.longread .lr-lead {
  max-width: 48rem; margin: 0 auto 1.8rem; padding: 0 1.25rem;
}
.longread .lr-lead img { width: 100%; height: auto; border-radius: 2px; display: block; }
.longread .lr-lead .field { margin: 0; }
.longread .lr-lead .field__label { display: none; }
.longread .lr-lead .field__items { display: grid; gap: .5rem; }
.longread .lr-lead .field--type-image .field__item + .field__item { margin-top: 0; }

/* Hide the theme's duplicate page-title block; the hero .lr-title is the h1. */
body.page-node-type-blog-post .block-page-title-block,
body.page-node-type-page .block-page-title-block { display: none; }

/* ---------- body typography ---------- */
/* +2.5rem so the text (inside 1.25rem padding) is the full --lr-measure,
   matching the hero/dek width exactly. */
.longread .lr-body { max-width: calc(var(--lr-measure) + 2.5rem); padding: 0 1.25rem; }
.longread .lr-body p { margin: 0 0 1.35rem; }
.longread .lr-body > p:first-of-type::first-letter {
  font-family: var(--lr-display); float: left; font-weight: 700; color: var(--lr-accent);
  font-size: 3.6rem; line-height: .8; padding: .3rem .5rem 0 0;
}
.longread .lr-body a { color: var(--lr-accent-ink); text-underline-offset: 2px; }
.longread .lr-body h2 {
  font-family: var(--lr-display); font-weight: 700; letter-spacing: -.01em;
  font-size: 1.65rem; line-height: 1.15; margin: 2.6rem 0 .2rem; text-wrap: balance;
}
.longread .lr-body h2 + p { margin-top: .8rem; }
.longread .lr-body h3 {
  font-family: var(--lr-display); font-weight: 700; font-size: 1.28rem; margin: 2rem 0 .3rem;
}
.longread .lr-step {
  display: block; font-family: var(--lr-mono); font-weight: 400;
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--lr-accent-ink); margin-bottom: .5rem;
}
.longread .lr-body ul, .longread .lr-body ol { margin: 0 0 1.35rem; padding-left: 1.4rem; }
.longread .lr-body li { margin: .3rem 0; }
.longread .lr-body hr { border: none; border-top: 1px solid var(--lr-hair); margin: 2.4rem 0; }

/* ---------- figures & images (native captions + legacy inline) ---------- */
.longread .lr-body figure,
.longread .lr-body img { margin-left: auto; margin-right: auto; }
.longread .lr-body figure { margin: 2rem auto; max-width: 48rem; }
.longread .lr-body img { max-width: 100%; height: auto; border-radius: 2px; display: block; }
.longread .lr-body p > img { margin: .4rem auto; }
.longread .lr-body figcaption,
.longread .lr-body .lr-cap {
  font-family: var(--lr-mono); font-size: .76rem; line-height: 1.5; color: var(--lr-muted);
  margin-top: .6rem; padding-left: .9rem; border-left: 2px solid var(--lr-accent);
}
.longread .lr-body figcaption b { color: var(--lr-accent-ink); font-weight: 600; letter-spacing: .04em; }
.longread .lr-body figcaption em { color: var(--lr-ink-soft); }
/* editor alignment classes (filter_align) */
.longread .lr-body .align-center { display: block; margin-left: auto; margin-right: auto; }
.longread .lr-body .align-left { float: left; margin: .3rem 1.4rem .8rem 0; max-width: 50%; }
.longread .lr-body .align-right { float: right; margin: .3rem 0 .8rem 1.4rem; max-width: 50%; }
/* 3-up gallery for a burst of related shots */
.longread .lr-body .lr-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin: 2rem auto; max-width: 48rem;
}
.longread .lr-body .lr-gallery img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; border-radius: 2px; margin: 0;
}
@media (max-width: 540px) { .longread .lr-body .lr-gallery { grid-template-columns: 1fr; } }

/* a wider "climax" figure for a dramatic reveal */
.longread .lr-body figure.lr-wide { max-width: 54rem; }
.longread .lr-body figure.lr-wide figcaption {
  font-family: var(--lr-serif); font-style: italic; font-size: .98rem; color: var(--lr-ink-soft);
  border-left-color: var(--lr-accent);
}

/* ---------- takeaway / Tl;dr card ---------- */
.longread .lr-takeaway {
  margin-top: 0; margin-bottom: 1.8rem; padding: 0 1.25rem;
}
.longread .lr-takeaway > * { max-width: none; }
.longread .lr-takeaway {
  /* inner box via a wrapper element */
}
.longread .lr-takeaway__box,
.longread .lr-takeaway {
  --_pad: 1.15rem 1.3rem;
}
.longread .lr-takeaway {
  background: var(--lr-surface);
  border: 1px solid var(--lr-hair);
  border-left: 3px solid var(--lr-accent);
  border-radius: 2px;
  padding: 1.1rem 1.3rem;
}
.longread .lr-takeaway__label {
  font-family: var(--lr-mono); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--lr-accent-ink); margin: 0 0 .5rem;
}
.longread .lr-takeaway p { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.longread .lr-takeaway em { color: var(--lr-muted); font-style: italic; }

/* ---------- legacy .blog-quote block (nested quotations) ---------- */
.longread .lr-body .blog-quote {
  margin: 2.4rem 0; padding: 1rem 0 1rem 2.25rem; border-left: 2px solid var(--lr-hair);
}
.longread .lr-body .blog-quote p {
  font-family: var(--lr-display); font-style: italic; font-size: 1.12rem; line-height: 1.5;
  color: var(--lr-ink-soft); margin: 0 0 1.15rem;
}
.longread .lr-body .blog-quote p:last-child { margin-bottom: 0; }

/* ---------- responsive video embeds ---------- */
.longread .lr-body iframe {
  display: block; width: 100%; max-width: 48rem; aspect-ratio: 16 / 9; height: auto;
  margin: 2rem auto; border: 0; border-radius: 2px;
}

/* ---------- "screech" refrain motif (the violin stab, made visual) ---------- */
.longread .lr-body .lr-screech {
  font-family: var(--lr-display); font-weight: 700; color: var(--lr-accent);
  font-size: clamp(1.4rem, 4.5vw, 2.1rem); letter-spacing: .08em; line-height: 1.05;
  text-align: center; margin: 1.5rem auto;
}

/* ---------- archival clipping (quoted newspaper / document material) ---------- */
.longread .lr-body .lr-clipping {
  margin: 2rem 0; padding: 1.15rem 1.35rem;
  background: var(--lr-surface); border: 1px solid var(--lr-hair); border-radius: 2px;
  font-size: .95rem; line-height: 1.62; color: var(--lr-ink-soft);
}
.longread .lr-body .lr-clipping::before {
  content: "From the archive"; display: block;
  font-family: var(--lr-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--lr-muted); margin-bottom: .7rem;
}
.longread .lr-body .lr-clipping p { margin: 0 0 .8rem; }
.longread .lr-body .lr-clipping p:last-child { margin-bottom: 0; }
.longread .lr-body .lr-clip-head {
  font-family: var(--lr-display); font-weight: 700; font-size: 1.08rem; line-height: 1.2;
  color: var(--lr-ink); margin: 0 0 .6rem;
}
.longread .lr-body .lr-clipping em { color: var(--lr-muted); }

/* ---------- pull quote ---------- */
.longread .lr-pull { margin: 2.6rem auto; padding: 0 1.25rem; text-align: center; border: 0; }
.longread .lr-pull p {
  font-family: var(--lr-display); font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(1.6rem, 4.4vw, 2.35rem); line-height: 1.15; margin: 0; color: var(--lr-ink);
}
.longread .lr-pull b, .longread .lr-pull strong { color: var(--lr-accent); }
.longread .lr-pull cite {
  display: block; font-family: var(--lr-mono); font-style: normal;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lr-muted); margin-top: 1rem;
}

/* ---------- air-quality-style meter device ---------- */
.longread .lr-meter {
  margin: 1.8rem auto; padding: .85rem 1rem;
  background: var(--lr-surface); border: 1px solid var(--lr-hair); border-radius: 3px;
  display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; align-items: baseline;
}
.longread .lr-meter__label {
  font-family: var(--lr-mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lr-muted);
}
.longread .lr-meter__val { font-family: var(--lr-mono); font-size: .8rem; font-weight: 700; text-align: right; }
.longread .lr-meter i {
  grid-column: 1 / -1; display: inline-block; height: 12px; border-radius: 2px; opacity: .28;
}
.longread .lr-meter { grid-template-columns: repeat(5, 1fr); }
.longread .lr-meter__label { grid-column: 1 / 4; }
.longread .lr-meter__val { grid-column: 4 / 6; }
.longread .lr-meter i:nth-of-type(1) { background: #4fa46a; }
.longread .lr-meter i:nth-of-type(2) { background: #9cb84a; }
.longread .lr-meter i:nth-of-type(3) { background: #e8b93e; }
.longread .lr-meter i:nth-of-type(4) { background: #e07b39; }
.longread .lr-meter i:nth-of-type(5) { background: #d2384e; }
.longread .lr-meter--good i:nth-of-type(1) { opacity: 1; }
.longread .lr-meter--good .lr-meter__val { color: #4fa46a; }
.longread .lr-meter--alarm i { opacity: 1; }
.longread .lr-meter--alarm .lr-meter__val { color: #d2384e; }

/* ---------- footer / tags ---------- */
.longread .lr-foot { margin-top: 2.4rem; padding: 1.3rem 1.25rem 0; border-top: 2px solid var(--lr-ink); }
.longread .lr-foot .field__label {
  font-family: var(--lr-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lr-muted); display: inline-block; margin-right: .6rem;
}
.longread .lr-foot .field__item { display: inline; margin-right: .5rem; }
.longread .lr-foot a { color: var(--lr-accent-ink); text-decoration: none; }