/* Each chapter is a complete page, with one viewport-sized opening composition. */
:root{--page-header:0px}
html{scroll-padding-top:24px}
body[data-page] #main>section>.chapter-cover{
 min-height:calc(100svh - var(--page-header));padding:40px var(--chapter-gutter) 28px;
 display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
 grid-template-rows:1fr auto auto;gap:28px 48px;align-items:center;position:relative;isolation:isolate;
}
.chapter-cover>div:first-child{grid-column:1;grid-row:1/3;min-width:0}
.chapter-cover h1{font:600 clamp(36px,4.2vw,66px)/1.12 Unbounded,sans-serif;letter-spacing:-2.5px;margin:24px 0 0;color:inherit}
.chapter-cover .heading-character{width:.78em;height:.78em;margin-left:.18em}
body[data-page] #main>section>.chapter-cover>p{grid-column:2;grid-row:2;max-width:none;width:100%;font-size:15px;line-height:1.7}
.cover-art{grid-column:2;grid-row:1;display:grid;place-items:center;min-width:0;align-self:stretch;position:relative}
.cover-art>img{width:min(70%,290px);height:min(36vh,300px);object-fit:contain;transition:transform 600ms cubic-bezier(.45,0,.2,1)}
.cover-bottom{grid-column:1/-1;grid-row:3;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid currentColor;padding-top:20px;margin-top:12px}
.cover-bottom>.eyebrow{font-size:9px;letter-spacing:1.5px}
.cover-scroll{display:inline-flex;align-items:center;gap:22px;font-size:13px;font-weight:500}
.cover-scroll>span{font-size:28px;line-height:1;transition:transform 350ms ease}
.cover-pending{font-size:13px}
.chapter-content{scroll-margin-top:40px}
.cover-colour-grid{display:grid;grid-template-columns:repeat(2,1fr);width:min(85%,330px);aspect-ratio:1;transform:rotate(-6deg);transition:transform 600ms ease}
.cover-colour-grid i{display:block;position:relative;background:#6214FF}
.cover-colour-grid i:nth-child(2){background:#FF2DEA}.cover-colour-grid i:nth-child(3){background:#0DFE69}.cover-colour-grid i:nth-child(4){background:#DAFF0B}
.cover-colour-grid i::after{content:"";position:absolute;inset:23%;border-radius:50%;background:#B9A1FF}
.cover-colour-grid i:nth-child(2)::after{border-radius:0;background:#6214FF}
.cover-colour-grid i:nth-child(3)::after{border-radius:50% 50% 0 0;background:#0F0B0F}
.cover-colour-grid i:nth-child(4)::after{border-radius:0;background:#FF2DEA;transform:rotate(45deg);inset:31%}
.cover-letter{font:550 clamp(120px,17vw,260px)/1 Unbounded,sans-serif;letter-spacing:-.08em;color:#6214FF;position:relative;transition:font-weight 550ms ease}
.cover-letter>span{position:absolute;font-size:.3em;background:#DAFF0B;color:#0F0B0F;right:-.16em;top:-.2em;width:1.2em;height:1.2em;display:grid;place-items:center;letter-spacing:0;transform:rotate(10deg)}
.cover-quote{font:600 clamp(160px,22vw,330px)/.8 Unbounded,sans-serif;color:#B9A1FF;display:flex;align-items:center;gap:0;position:relative;padding-bottom:.1em}
.cover-quote>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-7deg);background:#FF2DEA;color:#0F0B0F;font:600 clamp(24px,3vw,44px)/1.2 Unbounded,sans-serif;padding:18px 24px;white-space:nowrap}
.cover-layout-grid{width:min(90%,350px);aspect-ratio:1.1;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:.7fr 1.5fr .3fr;gap:12px;transform:rotate(-4deg);transition:transform 550ms ease}
.cover-layout-grid i{background:#B9A1FF}.cover-layout-grid i:first-child{grid-column:1/-1;background:#DAFF0B}.cover-layout-grid i:nth-child(2){background:#0F0B0F}.cover-layout-grid i:last-child{grid-column:1/-1;background:#F6F3F0}
body[data-page="photography"] main>#photography{padding-bottom:0}
body[data-page="photography"] #main>#photography>.chapter-cover{grid-template-columns:1fr;grid-template-rows:1fr auto}
body[data-page="photography"] .chapter-cover>div:first-child{grid-row:1}
body[data-page="photography"] .cover-art{display:none}
body[data-page="photography"] .cover-bottom{grid-row:2}
.chapter-pagination{margin:0;padding:0;border-block:1px solid #b9a1ff;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;color:#2A2A2A}
.chapter-step{display:flex;align-items:center;gap:16px;min-height:84px;padding:16px 24px;transition:box-shadow 200ms ease;background:var(--chapter-bg,#E5E4E6);color:var(--chapter-ink,#2A2A2A)}
.chapter-previous{padding-left:var(--chapter-gutter)}
.chapter-next{--chapter-bg:#B9A1FF;padding-right:var(--chapter-gutter)}
.chapter-step+.chapter-step{border-left:1px solid #9B79FF}
.chapter-step:only-child{grid-column:1/-1}
.chapter-step:hover{box-shadow:inset 0 0 0 2px currentColor}
.chapter-step small{display:block;font-size:9px;letter-spacing:1.3px;margin-bottom:6px}
.chapter-step strong{font:500 18px/1.35 Unbounded,sans-serif;letter-spacing:-.4px}
.chapter-step-arrow{font-size:26px;color:var(--chapter-arrow,#6214FF);transition:transform 350ms ease}
.chapter-next{justify-content:flex-end;text-align:right}
body[data-page="overview"] .intro-line{height:56px;min-height:56px;padding-block:20px 0;align-items:start}
body[data-page="overview"] .hero{min-height:calc(100svh - var(--page-header) - 56px);grid-template-columns:1.15fr 1fr}
body[data-page="overview"] .hero-copy{align-self:center;padding-block:28px 42px}
body[data-page="overview"] .hero .character-stage{min-height:0;align-self:stretch}
body[data-page="overview"] .hero .character-stage .aron{height:45%;top:12%}
body[data-page="overview"] .hero .character-stage .vito{height:40%;bottom:16%}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .cover-art-logo:hover img{transform:rotate(-3deg)}
 .cover-art-colours:hover .cover-colour-grid,.cover-art-layout:hover .cover-layout-grid{transform:rotate(0deg)}
 .cover-art-typography:hover .cover-letter{font-weight:850}
 .cover-scroll:hover>span{transform:translateY(4px)}
 .chapter-next:hover .chapter-step-arrow{transform:translateX(4px)}
 .chapter-previous:hover .chapter-step-arrow{transform:translateX(-4px)}
}
@media(max-width:1100px){
 body[data-page] #main>section>.chapter-cover{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;padding-top:32px}
 .chapter-cover h1{font-size:clamp(30px,4.4vw,48px);letter-spacing:-1.5px}
 .cover-letter{font-size:clamp(100px,17vw,180px)}
 .cover-quote{font-size:clamp(140px,22vw,220px)}
 body[data-page="overview"] .hero-copy{padding-left:var(--chapter-gutter);padding-right:0}
 body[data-page="overview"] .hero h1{font-size:clamp(34px,4.5vw,48px)}
}
@media(max-width:700px){
 body[data-page] #main>section>.chapter-cover{grid-template-columns:1fr;grid-template-rows:auto minmax(120px,1fr) auto auto;gap:20px;padding-block:30px 24px}
 .chapter-cover>div:first-child{grid-column:1;grid-row:1}
 .chapter-cover h1{font-size:clamp(30px,7vw,44px);letter-spacing:-1.5px;margin-top:18px}
 .cover-art{grid-column:1;grid-row:2;min-height:130px}
 .cover-art>img{height:150px;width:60%}
 .cover-colour-grid{width:160px}.cover-letter{font-size:140px}.cover-quote{font-size:180px}.cover-quote>span{font-size:26px;padding:12px 18px}
 .cover-layout-grid{width:180px;gap:8px}
 body[data-page] #main>section>.chapter-cover>p{grid-column:1;grid-row:3;font-size:14px;line-height:1.65}
 .cover-bottom{grid-column:1;grid-row:4;margin:0;padding-top:16px;gap:12px}
 .cover-bottom>.eyebrow{font-size:8px;letter-spacing:1px}.cover-scroll{font-size:12px;gap:12px}
 body[data-page="overview"] .hero{grid-template-columns:1fr;grid-template-rows:auto minmax(190px,1fr)}
 body[data-page="overview"] .hero-copy{padding:20px var(--chapter-gutter) 0}
 body[data-page="overview"] .hero h1{font-size:clamp(34px,8vw,46px);margin-block:18px}
 body[data-page="overview"] .hero .character-stage{min-height:190px}
 body[data-page="overview"] .hero .character-stage .aron{height:75%;left:9%;top:4%;width:42%}
 body[data-page="overview"] .hero .character-stage .vito{height:65%;right:9%;bottom:15%;width:37%}
 .chapter-pagination{gap:0;margin:0;padding:0}
 .chapter-step{gap:10px;min-width:0;padding:14px 12px}.chapter-step strong{font-size:14px;letter-spacing:-.3px}
 .chapter-previous{padding-left:var(--chapter-gutter)}.chapter-next{padding-right:var(--chapter-gutter)}
 .chapter-step small{font-size:8px;letter-spacing:.8px}.chapter-step-arrow{font-size:22px}
}
@media(max-width:650px){
 .menu-toggle{position:fixed;left:auto;right:14px;top:14px;background:#FFFFFF;color:#24242a;border:1px solid #E4E4E6;border-radius:6px;padding:7px 12px;gap:10px;z-index:18}
 body[data-page="overview"] .intro-line{height:72px;min-height:72px;padding-top:18px}
 body[data-page="overview"] .intro-line>.eyebrow{max-width:calc(100% - 100px)}
 body[data-page="overview"] .hero{min-height:calc(100svh - 72px)}
 .chapter-cover>div:first-child>.eyebrow{display:block;max-width:calc(100% - 90px)}
}
@media(prefers-reduced-motion:reduce){.cover-art *,.cover-scroll>span,.chapter-step-arrow{transition:none!important;animation:none!important}}

/* The landing page is the chapter directory, with a quiet introduction. */
body[data-page="overview"] #main>.landing-index{min-height:100svh;padding:40px var(--chapter-gutter) 32px;display:flex;flex-direction:column}
.landing-index .intro-bottom{margin:0;align-items:start;gap:40px}
.landing-index .intro-bottom h1{font:550 clamp(26px,2.5vw,36px)/1.25 Unbounded,sans-serif;letter-spacing:-1.2px;margin:0;color:#434343}
.landing-index .intro-bottom p{font-size:14px;line-height:1.65}
.landing-index .chapter-index{margin-top:32px;display:flex;flex-direction:column;flex:1}
.landing-index .chapter-grid{flex:1;grid-template-rows:minmax(180px,1fr) minmax(180px,.9fr) minmax(84px,.45fr)}
.landing-index .chapter-photography{grid-column:1/-1}
@media(max-width:1000px){
 body[data-page="overview"] #main>.landing-index{padding-top:32px}
 .landing-index .intro-bottom{grid-template-columns:1fr;gap:16px}
 .landing-index .chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(160px,1fr))}
 .landing-index .chapter-logo{grid-row:auto}.landing-index .chapter-photography{grid-column:auto}
}
@media(max-width:650px){
 body[data-page="overview"] #main>.landing-index{padding-top:76px;padding-bottom:22px}
 .landing-index .intro-bottom h1{font-size:28px}.landing-index .intro-bottom p{font-size:13px}
 .landing-index .chapter-index{margin-top:26px}.landing-index .chapter-heading>span:last-child{display:none}
 .landing-index .chapter-grid{grid-template-rows:repeat(3,minmax(175px,1fr))}
 .landing-index .chapter{padding:16px}.landing-index .tile-label{font-size:11px}
 .landing-index .tile-foot{font-size:9px}.landing-index .chapter-colours .tile-palette i{width:30px;height:66px}
 .landing-index .chapter-voice p{font-size:20px}.landing-index .tile-aa{font-size:58px}
}

/* Keep each cover's heading and illustration on the same horizontal centre line. */
@media(min-width:701px){
 .chapter-cover>div:first-child{grid-row:1;position:relative}
 .chapter-cover>div:first-child>.eyebrow{position:absolute;left:0;bottom:calc(100% + 24px);margin:0}
 .chapter-cover h1{margin-top:0}
 .cover-quote{top:.12em}
}