/* THE GRIOT — v0.5.1 permanent illustrated story correction.
 * Loaded after all previous theme styles.  The music and chapter content remain
 * untouched; visual stories are independent of the optional Living Panel. */
:root{
  --griot-story-parchment:#f4d4a2;
  --griot-story-amber:#e5af70;
  --griot-story-paper:#fae6c5;
  --griot-story-ink:#2e4236;
  --griot-story-dust:#a64029;
  --griot-story-river:#28566c;
}
/* The opening is one designed spread, not a full-screen billboard. */
.chapter-spread,
.chapter--cinematic .chapter-spread,
.chapter--archival .chapter-spread,
.chapter--interlude .chapter-spread,
.chapter--typography .chapter-spread{
  display:grid;
  grid-template-columns:minmax(0,43%) minmax(0,57%);
  min-height:0;
  max-width:100%;
  background:linear-gradient(90deg,#eed0a3 0%,#eed0a3 43%,#244b43 43%,#244b43 100%);
}
.chapter-spread__words,
.chapter--cinematic .chapter-spread__words,
.chapter--archival .chapter-spread__words,
.chapter--interlude .chapter-spread__words,
.chapter--typography .chapter-spread__words{
  background:transparent;
  min-height:420px;
  height:auto;
  padding:clamp(1.4rem,2.8vw,3rem);
  color:#3d392f;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.chapter-spread__words::before{
  top:-22%;left:-20%;width:60%;height:auto;aspect-ratio:1;
  background:radial-gradient(circle,rgba(246,190,73,.28),rgba(246,190,73,0) 71%);
  opacity:1;
}
.chapter-spread__words::after{display:none}
.chapter-spread__topline{border:0;font-size:.55rem;letter-spacing:.21em;padding:0;color:#91402d}
.chapter-spread__topline span:first-child{border:0;padding:0}
.chapter-spread__composition{padding:1.5rem 0;gap:0;max-width:100%;min-height:0;display:block}
.chapter-spread__overline{font-size:.52rem;letter-spacing:.21em;margin:0 0 .8rem;color:#775744}
.chapter-spread__title,
.chapter--cinematic .chapter-spread__title,
.chapter--interlude .chapter-spread__title,
.chapter--typography .chapter-spread__title,
.chapter--archival .chapter-spread__title{
  font-family:var(--serif);font-size:clamp(2.55rem,4.5vw,5.3rem);
  line-height:.9;letter-spacing:-.057em;
  margin:0;max-width:100%;color:#503e31;
  text-shadow:none;overflow-wrap:normal;word-break:normal;
}
.chapter--long-title .chapter-spread__title{font-size:clamp(2.25rem,3.75vw,4.55rem)}
.chapter-spread__title-line{display:block;max-width:100%;overflow-wrap:break-word}
.chapter-spread__title-line:nth-child(2),
.chapter--cinematic .chapter-spread__title-line:nth-child(2),
.chapter--interlude .chapter-spread__title-line:nth-child(2){
  margin-left:0;color:var(--griot-story-river);text-shadow:none;
}
.chapter-spread__title-line:nth-child(2)::before{display:none}
.chapter-spread__subtitle,
.chapter--cinematic .chapter-spread__subtitle{
  font:italic clamp(1.05rem,1.55vw,1.45rem)/1.35 var(--serif);
  margin:1rem 0 0;max-width:27ch;color:#265044;
}
.chapter-spread__play{margin-top:1.15rem;border-radius:2px;padding:.7rem 1rem;font-size:.56rem;letter-spacing:.12em;box-shadow:none}
.chapter-spread__seal{font-size:.49rem;letter-spacing:.12em;max-width:35ch}
.chapter-spread__marks{left:.6rem;bottom:4.2rem;gap:.5rem;opacity:.5;transform:scale(.65);transform-origin:bottom left}
.chapter-spread__image{
  min-width:0;min-height:0;height:clamp(330px,35vw,490px);
  padding:clamp(1.1rem,2vw,1.9rem);
  position:relative;display:flex;align-items:center;justify-content:center;
  background:#244b43;
}
.chapter-spread__image::before,
.chapter-spread__image::after,
.chapter-spread__image.has-image::after{display:none}
.chapter-spread__art{
  position:relative;inset:auto;
  display:block;width:100%;height:100%;max-width:100%;max-height:100%;
  aspect-ratio:auto;object-fit:contain;object-position:var(--hero-image-position);
  outline:0;border:0;box-shadow:none;filter:none;
}
.chapter-spread__caption{bottom:.4rem;right:1rem;left:auto;max-width:80%;font-size:.52rem}
/* An authored passage is an optional quiet interlude, never an automatic quotation billboard. */
.chapter-signal{background:#f0d5ad;border:0;isolation:auto}
.chapter-signal::before{display:none}
.chapter-signal__inner{
  max-width:1180px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.2rem,4vw,4rem);padding-block:clamp(2rem,3.8vw,4rem);
}
.chapter-signal__headline{
  font:400 clamp(2rem,3.6vw,3.9rem)/1.03 var(--serif);
  max-width:13ch;color:#513e2c;letter-spacing:-.045em;margin:.6rem 0 0;
}
.chapter-signal__copy{font:clamp(1.08rem,1.6vw,1.45rem)/1.5 var(--serif);max-width:45ch;color:#4a4236;align-self:center}
.chapter-signal__copy::before{display:none}
.chapter-signal__copy blockquote{font:italic 1.15rem/1.55 var(--serif);margin:0;color:#704a37}
.chapter-signal__copy p+blockquote{margin-top:.8rem}
/* This is the PRIMARY permanent visual narrative. */
.griot-story-grid{background:#e8ba80;position:relative;clear:both;}
.griot-story-grid__inner{max-width:1250px;margin:auto;padding-top:clamp(2.8rem,5vw,5rem);padding-bottom:clamp(3.5rem,6vw,6.5rem)}
.griot-story-grid__heading{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin:0 0 clamp(1.3rem,2.5vw,2.25rem);border-bottom:1px solid rgba(65,55,37,.3);padding-bottom:1.2rem}
.griot-story-grid__heading .story-label{margin:0;font-size:.62rem;color:#814027}
.griot-story-grid__heading h2{font:400 clamp(1.5rem,3.1vw,2.6rem)/1.15 var(--serif);letter-spacing:-.03em;margin:.55rem 0 0;color:#3d4034}
.griot-story-grid__count{font:.57rem/1.4 var(--sans);letter-spacing:.15em;color:#814027;white-space:nowrap}
.griot-story-grid__cards{display:grid;gap:clamp(1rem,2.2vw,2rem);align-items:start}
.griot-story-grid__cards--1{grid-template-columns:minmax(0,1fr);max-width:840px;margin:auto}
.griot-story-grid__cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.griot-story-grid__cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.griot-story-grid__cards--4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1060px;margin:auto}
.griot-story-panel{margin:0;min-width:0;background:#f7e3be;border:1px solid rgba(63,51,37,.18);box-shadow:0 6px 16px rgba(65,48,30,.08)}
.griot-story-panel__visual{position:relative;overflow:hidden;background:#31584b}
.griot-story-panel__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;aspect-ratio:4/3}
.griot-story-grid__cards--1 .griot-story-panel__image{aspect-ratio:5/3}
.griot-story-grid__cards--2 .griot-story-panel__image{aspect-ratio:4/3}
.griot-story-grid__cards--3 .griot-story-panel__image{aspect-ratio:4/5}
.griot-story-grid__cards--4 .griot-story-panel__image{aspect-ratio:16/10}
.griot-story-panel__index{position:absolute;bottom:.85rem;left:.85rem;padding:.4rem .55rem;background:rgba(31,61,53,.88);color:#fff0d9;font:.6rem/1 var(--sans);letter-spacing:.12em}
.griot-story-panel__caption{padding:1.15rem 1.2rem 1.45rem;min-height:0;color:#463d31}
.griot-story-panel__caption h3{font:700 .75rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:.15em;margin:0 0 .4rem;color:#293f36}
.griot-story-panel__caption p{font:1.01rem/1.6 var(--serif);margin:0;color:#5b4a3a;overflow-wrap:anywhere}
.griot-story-panel__empty-note{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#f9ecd3;text-align:center;font:400 clamp(2rem,4vw,3rem)/1 var(--serif);padding:1rem}
.griot-story-panel__empty-note small{font:600 .7rem/1.5 var(--sans);max-width:22ch}
.griot-story-grid__editor-note{max-width:840px;margin:2rem auto 0;font:.85rem/1.5 var(--sans);color:#5a4739}
/* Margins, credits and the Living Panel are supplementary, not a second gallery. */
.chapter-ledger.site-shell{padding-top:clamp(2.8rem,5vw,5rem);padding-bottom:clamp(3rem,5vw,5.5rem)}
.chapter-ledger__margins{margin-top:clamp(2rem,4vw,4rem);padding-top:clamp(1.5rem,2.5vw,2.5rem)}
.chapter-ledger__margins .griot-living-panel{max-width:760px}
/* Accessibility and legibility when viewing the illustrated panels on smaller screens. */
@media(max-width:950px){
  .chapter-spread,.chapter--cinematic .chapter-spread,.chapter--archival .chapter-spread,.chapter--interlude .chapter-spread,.chapter--typography .chapter-spread{grid-template-columns:43% 57%}
  .chapter-spread__title{font-size:clamp(2.25rem,4.9vw,4.6rem)}
  .chapter--long-title .chapter-spread__title{font-size:clamp(2.05rem,4vw,3.55rem)}
  .chapter-spread__image{height:clamp(310px,41vw,430px)}
  .griot-story-grid__cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .griot-story-grid__cards--3 .griot-story-panel:last-child{grid-column:1/-1;max-width:560px;justify-self:center;width:100%}
  .griot-story-grid__cards--3 .griot-story-panel__image{aspect-ratio:4/3}
}
@media(max-width:720px){
  .chapter-spread,.chapter--cinematic .chapter-spread,.chapter--archival .chapter-spread,.chapter--interlude .chapter-spread,.chapter--typography .chapter-spread{grid-template-columns:1fr;background:#eed0a3}
  .chapter-spread__words,.chapter--cinematic .chapter-spread__words,.chapter--archival .chapter-spread__words,.chapter--interlude .chapter-spread__words,.chapter--typography .chapter-spread__words{min-height:0;padding:1.5rem 1.3rem 2rem}
  .chapter-spread__topline{margin-bottom:2.2rem}
  .chapter-spread__composition{padding:0 0 1.6rem;min-height:0}
  .chapter-spread__title{font-size:clamp(3rem,10vw,4.5rem)}
  .chapter--long-title .chapter-spread__title{font-size:clamp(2.75rem,8.6vw,4rem)}
  .chapter-spread__subtitle{font-size:1.22rem}
  .chapter-spread__seal{align-self:flex-start}
  .chapter-spread__marks{display:none}
  .chapter-spread__image{height:auto;min-height:0;aspect-ratio:6/5;padding:1rem 1.3rem;background:#244b43}
  .chapter-spread__art{height:100%;width:100%;object-fit:contain}
  .chapter-signal__inner{grid-template-columns:1fr;gap:1.25rem;padding-block:2.5rem}
  .griot-story-grid__cards--3,.griot-story-grid__cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .griot-story-grid__cards--3 .griot-story-panel:last-child{grid-column:1/-1}
  .griot-story-grid__cards--3 .griot-story-panel__image{aspect-ratio:4/3}
}
@media(max-width:560px){
  .griot-story-grid__cards--2,.griot-story-grid__cards--3,.griot-story-grid__cards--4{grid-template-columns:1fr}
  .griot-story-grid__cards--3 .griot-story-panel:last-child{grid-column:auto;max-width:none}
  .griot-story-grid__cards--1 .griot-story-panel__image{aspect-ratio:4/3}
  .griot-story-grid__cards--3 .griot-story-panel__image{aspect-ratio:4/3}
  .griot-story-grid__heading{align-items:start}
  .griot-story-grid__count{padding-top:.15rem}
}