/* =====================================================================
   Music Therapy: The Sounds of Healing (post-music-therapy-article.php).
   Loads after css/rethinking-endo.css, which supplies the layout; these
   rules adapt it to a personal essay. Copied from the approved staging
   prototype, plus the WordPress guards at the end.
   ===================================================================== */
/* light only: the site has no dark mode, and "only" also opts the page
   out of browsers' automatic darkening (Chrome, Samsung Internet) */
:root{color-scheme:only light}
/* subhead under the title */
.wrap h1{margin-bottom:1rem}
.subhead{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.1rem,1.8vw,1.3rem);
  line-height:1.45;
  color:var(--brand);
  text-align:center;
  max-width:40ch;
  margin:0 auto 2.25rem;
}
/* the opening paragraph, as an attributed quote: the lede's size and
   color, in italic, without the drop cap; attribution as .callout-attr */
.lede-quote{margin:0 0 40px;max-width:none}
.lede-quote blockquote{
  margin:0 0 1.1rem;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.42;
  letter-spacing:0.02em;
  color:var(--brand);
}
.lede-quote blockquote p{margin:0}
/* hanging punctuation: the opening quote mark sits in the margin so the
   text, not the mark, lines up with the column (0.41em = the mark's
   width plus the 0.02em tracking, measured in Averia italic 300) */
.lede-quote .hang{margin-left:-0.41em}
.lede-quote figcaption{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  line-height:1.35;
  color:var(--brand);
  margin:0;
}
/* running prose: the essay's own voice, in the display face, at the
   size the theme's style.css gives body text on every Insights post
   (:root 22px / 1.45455 Averia 300), at every width; italic, and a
   half-line paragraph gap instead of the theme's 34px */
.prose{margin:0 0 2.5rem}
.prose p{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:22px;
  letter-spacing:normal;
  line-height:1.45455;
  color:var(--prose);
  max-width:none;
  margin:0 0 16px;
}
.prose p:last-child{margin-bottom:0}
/* the two paragraphs under the question are the article's voice, not
   the personal story, so they stay upright */
.prose.prose-upright p{font-style:normal}
.part-section + .part-section{margin-top:3.5rem}
/* the essay's central question, as the section heading */
/* section heads run the full column instead of breaking at 24ch */
h2.part-title{max-width:none}
h2.part-title.part-question{max-width:none;margin-bottom:1.4rem}
/* drop-downs that open onto prose: text aligns under the heading */
.era > summary{align-items:center;padding-left:1.1rem;padding-right:1.1rem}
/* the arrow joins the flex row instead of being absolutely positioned, so
   it is inset like the dot and centers on the title even when the title
   wraps (phones). Rotated -45deg it points right and is optically
   centered; rotated 45deg (open) its visible V sits in the lower half of
   the box, so it is lifted 3px to look centered too */
.era > summary::after{
  position:static;
  flex:0 0 auto;
  align-self:center;
  margin-left:0.25rem;
  transform:rotate(-45deg);
}
.era[open] > summary::after{transform:translateY(-3px) rotate(45deg)}
.era .era-inner{padding:0.1rem 0 1.75rem}
.era .era-inner > .body{
  padding:0 2rem 0 calc(1.1rem + 10px + 0.9rem);
  font-size:1.02rem;
  line-height:1.75;
}
.era .era-inner > .body p + p{margin-top:1rem}
.era[open]{background:var(--tint)}
.viz-title{margin-top:0.1rem}
/* closing lines */
.coda{margin:2.25rem 0 0}
.coda p{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.42rem);
  line-height:1.45;
  color:var(--brand);
  margin:0;
}
/* references */
.wrap > footer ol.refs{margin:0;padding:0 0 0 1.25rem}
.wrap > footer ol.refs li{margin:0 0 0.55rem;padding-left:0.2rem}
/* source lines: the separators are real "; " text, so drop the theme's
   generated dots (a + a still matches across the text between links) */
.sources a + a::before{content:none;display:none}
/* reference links in the references' own muted color, not the footer's ink */
.wrap > footer ol.refs a{color:inherit;text-decoration-color:var(--rule);overflow-wrap:anywhere}
.wrap > footer ol.refs a:hover{text-decoration-color:currentColor}
/* related cards: the interactive's screenshot is 16:9, the photos 5:3 */
section.latest-insights .section-image img{aspect-ratio:5/3;object-fit:cover}
@media (max-width:640px){
  .era > summary{padding-left:0.8rem;padding-right:0.8rem}
  .era .era-inner > .body{padding:0 0.8rem}
}


/* --- WordPress guards ------------------------------------------------ */
/* sticky breadcrumb: same fix rethinking-endo.css applies to its own
   template (.page-wrapper's overflow:hidden would stop sticky working) */
body.post-template-post-music-therapy-article .page-wrapper,
body.post-template-post-music-therapy-article-php .page-wrapper,
body.page-template-post-music-therapy-article .page-wrapper,
body.page-template-post-music-therapy-article-php .page-wrapper{overflow-x:clip;overflow-y:visible}
/* style.css adds its own curly quotes to every blockquote; this quote
   carries its own (with the opening mark hung in the margin) */
.lede-quote blockquote p::before,
.lede-quote blockquote p::after{content:none;display:none}
.lede-quote blockquote p:last-of-type{margin-bottom:0}
/* style.css numbers ol items itself (floated, 1.4em counters); the
   references use the browser's own numbering, as in the prototype */
.wrap > footer ol.refs{list-style:decimal outside;counter-reset:none;width:auto}
.wrap > footer ol.refs li{float:none;width:auto;margin-block:0 0.55rem}
.wrap > footer ol.refs li::before{content:none;display:none}
.wrap > footer ol.refs li:last-of-type{margin-bottom:0.55rem !important}
/* rethinking-endo.css: main a{text-decoration:none} reaches the references
   here (the whole template sits inside the theme's <main>) */
.wrap > footer ol.refs a{text-decoration:underline}
/* style.css: h1-h4{line-height:1} */
.wrap > footer h3{line-height:inherit}