/* THE GRIOT · v0.4.1 · Print-inspired house art direction.
   These are COMPLETE defaults, not homework for the chapter editor.
   A chapter author supplies content; the theme composes the page. */
:root {
  --griot-amber:color-mix(in srgb,var(--paper) 74%,#bd6730);
  --griot-gold:var(--paper);
  --griot-light:color-mix(in srgb,var(--paper) 79%,#ffffff);
  --griot-teal:var(--player-bg);
  --griot-forest:var(--ink);
  --griot-brown:#543b2a;
  --griot-rust:var(--copper);
  --griot-blue:var(--sapphire);
  --griot-serif:var(--serif);
  --griot-plate-border:clamp(9px,1.35vw,22px);
}
body{background:var(--griot-gold);color:var(--griot-brown)}
body::before{z-index:40;opacity:.028}
.site-header{background:var(--griot-teal);border-top:7px solid var(--griot-amber);color:#ffe3bc;}
.masthead{min-height:66px;max-width:none;padding-inline:clamp(1.1rem,6.7vw,9rem)}
.wordmark{font-size:.72rem}.wordmark__word small{opacity:.6}
.wordmark__monogram{color:var(--griot-gold)}
.site-nav a{font-weight:700;color:#f7d5a7;letter-spacing:.16em;font-size:.64rem}
.site-nav a:hover{color:white}
.griot-player{max-width:none;padding-inline:clamp(1.1rem,6.7vw,9rem);border-top:1px solid rgba(255,230,191,.12);background:var(--griot-teal)}
.griot-player__title{color:white}
.griot-player__controls #griot-toggle{background:var(--griot-rust);border-color:var(--griot-rust)}
.story-label,.eyebrow,.chapter-spread__topline,.section-kicker{font-family:var(--sans);letter-spacing:.27em;font-weight:750}
/* Home is a designed jacket spread, not an article with a square image. */
.cover-intro{max-width:none;min-height:690px;padding:0;gap:0;display:grid;grid-template-columns:42% 58%;overflow:hidden}
.cover-intro>div:first-child{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;padding:clamp(3rem,6.3vw,8rem) clamp(1.5rem,5vw,7rem) clamp(4rem,6vw,7rem);background:var(--griot-gold);isolation:isolate}
.cover-intro>div:first-child::before{content:"";position:absolute;z-index:-1;left:-17%;top:-24%;width:75%;aspect-ratio:1;border-radius:50%;background:rgba(224,144,61,.22)}
.cover-intro>div:first-child::after{content:"";position:absolute;z-index:-1;right:-7%;bottom:-15%;width:32%;height:78%;background:rgba(40,80,73,.16);clip-path:polygon(70% 0,100% 0,48% 100%,0 100%)}
.cover-intro .display-title{font:400 clamp(5rem,8.4vw,11.5rem)/.79 var(--griot-serif);color:var(--griot-brown);letter-spacing:-.075em;margin:.28em 0 .2em;text-wrap:balance}
.cover-intro .subheading{font:italic clamp(1.24rem,2.5vw,2rem)/1.3 var(--griot-serif);max-width:26ch;color:#3b554f}
.cover-intro .eyebrow{color:var(--griot-rust)}
.cover-intro .button-link{background:var(--griot-rust);border-color:var(--griot-rust);color:white}
.cover-intro .button-link:hover{background:var(--griot-teal);border-color:var(--griot-teal)}
.cover-frame{align-self:stretch;aspect-ratio:auto;overflow:hidden;position:relative;min-height:570px;box-shadow:none;background:var(--griot-teal)}
.cover-frame::before{position:absolute;inset:var(--griot-plate-border);border:1px solid rgba(244,201,133,.48);z-index:2}
.cover-frame img{position:absolute;inset:clamp(15px,3.2vw,60px);width:calc(100% - 2*clamp(15px,3.2vw,60px));height:calc(100% - 2*clamp(15px,3.2vw,60px));object-fit:contain;filter:drop-shadow(0 12px 25px rgba(2,23,22,.45))}
.cover-frame::after{content:"";display:block;position:absolute;width:26%;height:26%;right:-11%;bottom:-10%;background:var(--griot-amber);border-radius:50%;opacity:.7}
/* The album index is a set of art-directed specimens; cards need no per-track styling. */
.album-index{max-width:none;background:var(--griot-gold);padding:clamp(4rem,8vw,9rem) max(4vw,calc((100% - 1380px)/2))}
.album-index .section-heading{color:var(--griot-brown);font-size:clamp(3rem,6vw,7.5rem)}
.album-index .section-kicker{color:var(--griot-rust)}
.album-index__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.55rem,1.2vw,1.1rem);border:none!important;list-style:none!important}
.album-index__tiles .index-track{position:relative;min-height:clamp(155px,16.5vw,270px);padding:clamp(1.1rem,2vw,2.2rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1rem;border:1px solid rgba(85,53,36,.25);background:var(--griot-light);color:var(--griot-brown);overflow:hidden;isolation:isolate;transition:transform .2s ease,border-color .2s ease}
.album-index__tiles .index-track:hover{transform:translateY(-4px);border-color:var(--griot-rust)}
.album-index__tiles .index-track::before{content:"";position:absolute;z-index:-1;width:40%;aspect-ratio:1;border-radius:50%;background:rgba(180,108,57,.23);right:-12%;top:-15%}
.album-index__tiles .index-track:nth-child(4n+2){background:#254e59;color:#f7daab}
.album-index__tiles .index-track:nth-child(4n+3){background:#b24921;color:#ffe4bb}
.album-index__tiles .index-track:nth-child(4n+4){background:#e9b072;color:#51392c}
.album-index__tiles .index-track:nth-child(3n)::before{border-radius:0;clip-path:polygon(10% 0,100% 0,45% 100%,0 100%);height:90%}
.album-index__tiles .index-track:nth-child(5n)::before{width:12%;height:62%;border-radius:0;right:12%;top:0;transform:rotate(17deg)}
.album-index__tiles .index-track__number{font-weight:700;letter-spacing:.25em;color:inherit;opacity:.7}
.album-index__tiles .index-track a{font:400 clamp(1.27rem,2.15vw,2.6rem)/.98 var(--griot-serif);letter-spacing:-.045em;text-transform:uppercase;max-width:11ch;overflow-wrap:anywhere}
.album-index__tiles .index-track button{font-size:.53rem;padding:.36rem .7rem;margin-top:auto;color:inherit;border-color:currentColor}
.album-index__tiles .index-track button:hover{color:var(--griot-brown);background:#ffe6b8}
/* Chapter: permanent graphic language is provided without content-level design work. */
.chapter-spread{grid-template-columns:minmax(0,39%) minmax(0,61%);min-height:clamp(550px,42vw,795px)}
.chapter-spread__words{position:relative;isolation:isolate;min-width:0;background:var(--griot-gold);color:var(--griot-brown);padding:clamp(1.6rem,3.5vw,5rem) clamp(1.6rem,4vw,5.5rem);overflow:hidden}
.chapter-spread__words::before{position:absolute;z-index:-1;content:"";inset:auto;top:-30%;left:-25%;width:85%;height:auto;aspect-ratio:1;background:rgba(221,140,56,.22);border-radius:50%;transform:none;opacity:1}
.chapter-spread__words::after{content:"";position:absolute;z-index:-1;right:-5%;bottom:0;width:37%;height:60%;background:var(--griot-forest);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.9;pointer-events:none}
.chapter-spread__topline{border:0;color:var(--griot-rust);font-size:.65rem;padding-bottom:0}
.chapter-spread__topline span:first-child{border-bottom:2px solid currentColor;padding-bottom:.7rem}
.chapter-spread__composition{max-width:100%;min-width:0;padding:2.5rem 0;}
.chapter-spread__overline{letter-spacing:.25em;color:var(--griot-rust);font-size:.62rem}
.chapter-spread__title{font:400 clamp(3.1rem,5.55vw,8.7rem)/.86 var(--griot-serif);letter-spacing:-.065em;text-transform:uppercase;text-wrap:initial;overflow-wrap:anywhere;word-break:normal;max-width:100%;color:var(--griot-brown);text-shadow:none}
.chapter-spread__title-line{display:block;max-width:100%}
.chapter-spread__title-line:nth-child(2){color:var(--griot-blue);margin-left:clamp(.1rem,1.6vw,1.4rem);text-shadow:2px 2px 0 rgba(70,44,25,.3)}
.chapter-spread__subtitle{color:#25473f;font:italic clamp(1.26rem,1.95vw,2rem)/1.28 var(--griot-serif);max-width:27ch;margin-top:1.8rem}
.chapter-spread__play{background:var(--griot-rust);border-color:var(--griot-rust);color:white}
.chapter-spread__play:hover{background:var(--griot-teal)}
.chapter-spread__seal{letter-spacing:.23em;color:#5a3c2c}
.chapter-spread__image{min-width:0;min-height:430px;position:relative;background:var(--griot-teal);padding:var(--griot-plate-border)}
.chapter-spread__image::before{content:"";position:absolute;z-index:1;inset:calc(var(--griot-plate-border) * 1.5);pointer-events:none;border:1px solid rgba(246,208,153,.5)}
.chapter-spread__art{position:relative;inset:auto;width:100%;height:100%;object-fit:cover;object-position:var(--hero-image-position);outline:solid 1px rgba(245,225,182,.8);outline-offset:-1px}
.chapter-spread__image.has-image::after{inset:auto;z-index:2;right:0;bottom:0;width:7%;height:70%;background:var(--griot-amber);border:0;clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.64}
.chapter-spread__caption{z-index:3;left:var(--griot-plate-border);bottom:var(--griot-plate-border);right:var(--griot-plate-border)}
.chapter--cinematic .chapter-spread{grid-template-columns:38% 62%}
.chapter--cinematic .chapter-spread__words{background:var(--griot-teal)}
.chapter--cinematic .chapter-spread__title,.chapter--cinematic .chapter-spread__subtitle{color:#ffe5bd}
.chapter--cinematic .chapter-spread__title-line:nth-child(2){color:#f3b66b}
.chapter--cinematic .chapter-spread__words::after{background:var(--griot-rust)}
.chapter--archival .chapter-spread__words{background:#d5bc94}
.chapter--archival .chapter-spread__title{color:var(--griot-brown)}
.chapter--archival .chapter-spread__title-line:nth-child(2){color:var(--griot-blue)}
.chapter--interlude .chapter-spread{grid-template-columns:54% 46%}
.chapter--interlude .chapter-spread__words{background:#2b5661}
.chapter--interlude .chapter-spread__title{color:#ffe6bc}
.chapter--interlude .chapter-spread__title-line:nth-child(2){color:#efb575}
.chapter--typography .chapter-spread{grid-template-columns:60% 40%}
.chapter--typography .chapter-spread__title{font-size:clamp(3.5rem,6.8vw,9.2rem)}
.chapter-signal{background:var(--griot-light);isolation:isolate;position:relative;overflow:hidden}
.chapter-signal::before{position:absolute;content:"";width:25vw;max-width:310px;aspect-ratio:1;right:-7vw;bottom:-60%;background:rgba(227,151,67,.16);border-radius:50%;pointer-events:none}
.chapter-signal__inner{max-width:1430px;grid-template-columns:.88fr 1fr;gap:clamp(2rem,8vw,12rem);padding-top:clamp(5rem,8vw,9rem);padding-bottom:clamp(5rem,8vw,9rem)}
.chapter-signal .story-label{color:var(--griot-rust)}
.chapter-signal__headline{font:400 clamp(3.8rem,6.4vw,8.1rem)/.92 var(--griot-serif);letter-spacing:-.06em;color:#fff9e9;max-width:10.5ch}
.chapter-signal__copy{font:clamp(1.25rem,2vw,1.95rem)/1.42 var(--griot-serif);align-self:center;color:var(--griot-brown);max-width:33ch}
.chapter-signal__copy blockquote{font:inherit}
.chapter-storyboard{background:var(--griot-amber);}
.chapter-storyboard__inner{max-width:1430px;}
.chapter-storyboard__heading{color:var(--griot-brown)}
.chapter-storyboard__frames{gap:clamp(.7rem,1.9vw,1.9rem)}
.chapter-frame{background:#f6d8ab;box-shadow:0 14px 20px rgba(86,49,17,.09);transition:transform .2s ease}
.chapter-frame:hover{transform:translateY(-3px)}
.chapter-frame__image{aspect-ratio:4/3}
.chapter-frame__caption{padding:1.1rem 1.2rem 1.4rem;color:var(--griot-brown)}
/* Lyrics: full-width designed spread, discreet when folded, readable when opened. */
.chapter-ledger.site-shell{max-width:none;background:#efb578;color:var(--griot-brown);padding:clamp(4rem,6.5vw,8rem) max(5vw,calc((100vw - 1280px)/2)) clamp(5rem,8vw,9rem);display:block;}
.chapter-ledger__lyrics{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,7rem);border-top:1px solid rgba(73,54,35,.28);padding-top:1rem;align-items:start}
.chapter-ledger__intro .story-label{color:var(--griot-rust)}
.chapter-ledger__intro h2{font:400 clamp(5rem,9vw,10rem)/.9 var(--griot-serif);color:#fff9e8;letter-spacing:-.063em}
.chapter-ledger__intro p:not(.story-label){color:#664431;line-height:1.7}
.griot-lyrics-drawer{margin:0;border:none;border-top:1px solid rgba(84,56,40,.27)}
.griot-lyrics-drawer summary{font:400 clamp(2rem,3.5vw,4rem)/1.1 var(--griot-serif);text-transform:none;letter-spacing:-.03em;padding:1.6rem .1rem;color:#fff9e8;align-items:flex-start}
.griot-lyrics-drawer summary:hover{color:var(--griot-brown)}
.griot-lyrics-drawer__body{border-top:1px solid rgba(84,56,40,.25);color:#3d382d;font:1.12rem/1.8 var(--griot-serif);max-width:70ch}
.chapter-ledger__margins{border-top:1px solid rgba(84,56,40,.3);margin-top:clamp(3rem,6vw,7rem);padding-top:clamp(2rem,3.5vw,4rem);display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);column-gap:clamp(2rem,5vw,6rem)}
.chapter-ledger__margins:has(> :only-child){display:block}
.chapter-ledger__margins .griot-living-panel{border-top:0;margin:0;padding:0}
.chapter-ledger__margins .griot-credits-drawer{grid-column:1/-1;margin-top:2rem}
.chapter-ledger__notes .story-label{color:var(--griot-rust)}
.chapter-turn{background:var(--griot-rust)}
/* About, contact and journal share the same designed house style. */
.world-page__hero{background:var(--griot-gold);color:var(--griot-brown)}
.world-page__hero::before{content:"";position:absolute;width:18vw;height:18vw;min-width:100px;max-width:290px;pointer-events:none;right:15%;top:-8%;background:rgba(226,143,59,.18);border-radius:50%}
.world-page__hero{position:relative;overflow:hidden}
.world-page__hero h1{font-family:var(--griot-serif)}
.world-page__period{color:var(--griot-rust)}
.journal-archive__head,.site-footer{background:var(--griot-teal)}
/* Narrow screens: keep the designed page, never sacrifice words to clipping. */
@media(max-width:1100px){
 .chapter-spread__title{font-size:clamp(2.75rem,5.3vw,5.65rem)}
 .chapter-spread__words{padding-inline:clamp(1.3rem,3vw,3rem)}
 .album-index__tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
 .chapter-spread{grid-template-columns:42% 58%;min-height:560px}
 .chapter-spread__title{font-size:clamp(2.65rem,5.3vw,4.8rem)}
 .chapter-ledger__lyrics{grid-template-columns:1fr 1fr}
 .album-index__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cover-intro{grid-template-columns:45% 55%;min-height:550px}
 .cover-intro .display-title{font-size:clamp(4.2rem,8vw,8rem)}
}
@media(max-width:720px){
 .masthead{padding-inline:1.2rem}.griot-player{padding-inline:1.2rem}
 .cover-intro{display:flex;flex-direction:column;min-height:0}.cover-intro>div:first-child{min-height:450px;padding:3.8rem 1.5rem}
 .cover-intro .display-title{font-size:clamp(5.4rem,16vw,8rem)}.cover-frame{min-height:530px}
 .chapter-spread,.chapter--cinematic .chapter-spread,.chapter--interlude .chapter-spread,.chapter--typography .chapter-spread{display:grid;grid-template-columns:1fr;min-height:0}
 .chapter-spread__words{min-height:460px;padding:2rem 1.6rem}.chapter-spread__title{font-size:clamp(4rem,11vw,6.8rem)}
 .chapter-spread__image{min-height:clamp(335px,90vw,610px)}
 .chapter-signal__inner{grid-template-columns:1fr}.chapter-signal__headline{font-size:clamp(3.5rem,11vw,6rem)}
 .chapter-ledger__lyrics{grid-template-columns:1fr;gap:1.5rem}.chapter-ledger__margins{grid-template-columns:1fr;gap:2rem}
 .chapter-ledger__margins .griot-credits-drawer{grid-column:1}
 .chapter-ledger__intro h2{font-size:clamp(5rem,14vw,8rem)}
 .album-index__tiles .index-track{min-height:180px}
}
@media(max-width:450px){
 .album-index__tiles{grid-template-columns:1fr 1fr;gap:.5rem}
 .album-index__tiles .index-track{min-height:175px;padding:.75rem}
 .album-index__tiles .index-track a{font-size:clamp(1.03rem,5vw,1.65rem)}
 .chapter-spread__title{font-size:clamp(3.4rem,12.2vw,5.3rem)}
 .chapter-spread__title-line:nth-child(2){margin-left:.25rem}
 .chapter-ledger.site-shell{padding-inline:1.3rem}
 .chapter-spread__image{min-height:330px}
 .cover-frame{min-height:380px}
}
@media(prefers-reduced-motion:reduce){.album-index__tiles .index-track,.chapter-frame{transition:none}}