/* Each phase can receive its own colour as the exhibition palette arrives. */
#phase-1{--phase-colour:#6b6f5a;background:var(--phase-colour);border-color:var(--phase-colour)}
#phase-1:not([open]) .chapter-index,#phase-1:not([open]) .chapter-hint{color:#fffdf8}
#phase-1:not([open]) .chapter-symbol{color:#fffdf8;border-color:#fffdf866}
#phase-1:not([open]) summary:hover{background:#ffffff06}
#phase-1[open]{background:#f8f5ee}
#phase-1[open] summary{border-bottom-color:#6b6f5a44}
#phase-1[open] .chapter-index{color:var(--phase-colour)}
#phase-1[open] .chapter-symbol{background:#6b6f5a18;color:var(--phase-colour);border-color:#6b6f5a66}
#phase-1[open] .reading-link{border-color:#6b6f5a66}
#phase-1[open] .reading-link small,#phase-1[open] .reading-link .arrow{color:var(--phase-colour)}
#phase-1[open] .reading-link .display-icon{background:#6b6f5a18;border-color:#6b6f5a33}
#phase-1 summary:focus-visible{outline-color:#fffdf8}
#phase-1[open] summary:focus-visible,#phase-1 .reading-link:focus-visible{outline-color:var(--phase-colour)}

#phase-2{--phase-colour:#733334;background:var(--phase-colour);border-color:var(--phase-colour)}
#phase-2:not([open]) .chapter-index,#phase-2:not([open]) .chapter-hint{color:#fffdf8}
#phase-2:not([open]) .chapter-symbol{color:#fffdf8;border-color:#fffdf866}
#phase-2:not([open]) summary:hover{background:#ffffff06}
#phase-2[open]{background:#f8f5ee}
#phase-2[open] summary{border-bottom-color:#73333444}
#phase-2[open] .chapter-index{color:var(--phase-colour)}
#phase-2[open] .chapter-symbol{background:#73333418;color:var(--phase-colour);border-color:#73333466}
#phase-2[open] .reading-link{border-color:#73333466}
#phase-2[open] .reading-link small,#phase-2[open] .reading-link .arrow{color:var(--phase-colour)}
#phase-2[open] .reading-link .display-icon{background:#73333418;border-color:#73333433}
#phase-2 summary:focus-visible{outline-color:#fffdf8}
#phase-2[open] summary:focus-visible,#phase-2 .reading-link:focus-visible{outline-color:var(--phase-colour)}

#phase-3{--phase-colour:#002a36;background:var(--phase-colour);border-color:var(--phase-colour)}
#phase-3:not([open]) .chapter-index,#phase-3:not([open]) .chapter-hint{color:#fffdf8}
#phase-3:not([open]) .chapter-symbol{color:#fffdf8;border-color:#fffdf866}
#phase-3:not([open]) summary:hover{background:#ffffff06}
#phase-3[open]{background:#f8f5ee}
#phase-3[open] summary{border-bottom-color:#002a3644}
#phase-3[open] .chapter-index{color:var(--phase-colour)}
#phase-3[open] .chapter-symbol{background:#002a3618;color:var(--phase-colour);border-color:#002a3666}
#phase-3[open] .reading-link{border-color:#002a3666}
#phase-3[open] .reading-link small,#phase-3[open] .reading-link .arrow{color:var(--phase-colour)}
#phase-3[open] .reading-link .display-icon{background:#002a3618;border-color:#002a3633}
#phase-3 summary:focus-visible{outline-color:#fffdf8}
#phase-3[open] summary:focus-visible,#phase-3 .reading-link:focus-visible{outline-color:var(--phase-colour)}

#phase-4{--phase-colour:#493d51;background:var(--phase-colour);border-color:var(--phase-colour)}
#phase-4:not([open]) .chapter-index,#phase-4:not([open]) .chapter-hint{color:#fffdf8}
#phase-4:not([open]) .chapter-symbol{color:#fffdf8;border-color:#fffdf866}
#phase-4:not([open]) summary:hover{background:#ffffff06}
#phase-4[open]{background:#f8f5ee}
#phase-4[open] summary{border-bottom-color:#493d5144}
#phase-4[open] .chapter-index{color:var(--phase-colour)}
#phase-4[open] .chapter-symbol{background:#493d5118;color:var(--phase-colour);border-color:#493d5166}
#phase-4[open] .reading-link{border-color:#493d5166}
#phase-4[open] .reading-link small,#phase-4[open] .reading-link .arrow{color:var(--phase-colour)}
#phase-4[open] .reading-link .display-icon{background:#493d5118;border-color:#493d5133}
#phase-4 summary:focus-visible{outline-color:#fffdf8}
#phase-4[open] summary:focus-visible,#phase-4 .reading-link:focus-visible{outline-color:var(--phase-colour)}

#phase-5{--phase-colour:#897b6e;background:var(--phase-colour);border-color:var(--phase-colour)}
#phase-5:not([open]) .chapter-index,#phase-5:not([open]) .chapter-hint{color:#fffdf8}
#phase-5:not([open]) .chapter-symbol{color:#fffdf8;border-color:#fffdf866}
#phase-5:not([open]) summary:hover{background:#ffffff06}
#phase-5[open]{background:#f8f5ee}
#phase-5[open] summary{border-bottom-color:#897b6e44}
#phase-5[open] .chapter-index{color:var(--phase-colour)}
#phase-5[open] .chapter-symbol{background:#897b6e18;color:var(--phase-colour);border-color:#897b6e66}
#phase-5[open] .reading-link{border-color:#897b6e66}
#phase-5[open] .reading-link small,#phase-5[open] .reading-link .arrow{color:var(--phase-colour)}
#phase-5[open] .reading-link .display-icon{background:#897b6e18;border-color:#897b6e33}
#phase-5 summary:focus-visible{outline-color:#fffdf8}
#phase-5[open] summary:focus-visible,#phase-5 .reading-link:focus-visible{outline-color:var(--phase-colour)}

/* Shared Option B reader. Add a phase-specific variable when its colour arrives. */
html[data-phase]{--phase-colour:#004a43;--phase-tint:#e9eae3;background:#f8f5ee;color:#231f20}
html[data-phase="1"]{--phase-colour:#6b6f5a}
html[data-phase="2"]{--phase-colour:#733334}
html[data-phase="3"]{--phase-colour:#002a36}
html[data-phase="4"]{--phase-colour:#493d51}
html[data-phase="5"]{--phase-colour:#897b6e}

html[data-phase] body{background:#f8f5ee;color:#231f20}
html[data-phase] header{background:#004a43;color:#fffdf8}
html[data-phase] .brand{color:#fffdf8}
html[data-phase] .all-phases{color:#bca77a}
html[data-phase] .nav{border-bottom-color:#bca77a66}
html[data-phase] h1,html[data-phase] .eyebrow,html[data-phase] .aside-label{color:var(--phase-colour)}
html[data-phase] .breadcrumb,html[data-phase] .breadcrumb span:last-child,
html[data-phase] .lead,html[data-phase] .copy,html[data-phase] .reading-note{color:#231f20}
html[data-phase] .rule{background:var(--phase-colour);max-width:none;opacity:.6}
html[data-phase] .display-icon{background:var(--phase-tint);background:color-mix(in srgb,var(--phase-colour) 10%,#f8f5ee);border-color:var(--phase-colour);color:var(--phase-colour)}
html[data-phase] .reading-note{background:var(--phase-tint);background:color-mix(in srgb,var(--phase-colour) 10%,#f8f5ee);border:1px solid var(--phase-colour);border-radius:12px;padding:18px 20px}
html[data-phase] .aside{border-color:var(--phase-colour);border-color:color-mix(in srgb,var(--phase-colour) 20%,transparent)}
html[data-phase] #aside-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
html[data-phase] #aside-links a{display:grid;place-items:center;min-height:44px;padding:8px 0;margin:0;border:1px solid var(--phase-colour);border-radius:10px;color:#231f20;transition:background-color 160ms ease,color 160ms ease}
html[data-phase] #aside-links a[aria-current="page"]{background:var(--phase-colour);color:#fffdf8}
html[data-phase] #aside-links a:hover{text-decoration:none;background:var(--phase-tint);color:#231f20}
html[data-phase] #aside-links a[aria-current="page"]:hover{background:var(--phase-colour);color:#fffdf8}
html[data-phase] #aside-overview{color:var(--phase-colour);border:0;font-size:14px;margin-top:8px}
html[data-phase] .pager{background:#f8f5ee;border:0;padding-bottom:36px}
html[data-phase] .pager-inner{gap:16px}
html[data-phase] .pager a,html[data-phase] .pager a:last-child{background:var(--phase-tint);background:color-mix(in srgb,var(--phase-colour) 10%,#f8f5ee);border:1px solid var(--phase-colour);border-radius:12px;padding:20px;min-height:105px;transition:background-color 160ms ease}
html[data-phase] .pager a:hover,html[data-phase] .pager a:last-child:hover{background:#fffdf8;padding:20px}
html[data-phase] .pager small{color:var(--phase-colour)}
html[data-phase] .pager strong{color:#231f20}
html[data-phase] .pager-inner:has(#previous[aria-disabled="true"]) #next{grid-column:1/-1;grid-row:1}
html[data-phase] .pager-inner:has(#next[aria-disabled="true"]) #previous{grid-column:1/-1;grid-row:1}
html[data-phase] footer{background:#004a43;color:#fffdf8;border-color:#bca77a55}
html[data-phase] .footer-inner a{color:#bca77a}
html[data-phase] a:focus-visible,html[data-phase] button:focus-visible{outline:2px solid var(--phase-colour)}
html[data-phase] header a:focus-visible,html[data-phase] footer a:focus-visible{outline-color:#bca77a}
@media(max-width:760px){
  html[data-phase] .reader{gap:34px;padding-top:38px;padding-bottom:34px}
  html[data-phase] .aside{padding-top:22px}
  html[data-phase] .pager strong{font-size:18px;line-height:1.4}
  html[data-phase] .display-heading{justify-content:space-between}
  html[data-phase] .display-heading .display-icon{order:2}
}
@media(prefers-reduced-motion:reduce){html[data-phase] #aside-links a,html[data-phase] .pager a{transition:none}}

html[data-phase] .pager a[aria-disabled="true"]{display:none}

/* Display titles remain prominent while their phase label stays compact. */
.reading-link .reading-name{min-width:0;flex:1;line-height:1.45}
.reading-link .display-icon,.reading-link .arrow{flex-shrink:0}
.chapter .reading-link .reading-name{container-type:inline-size}
.chapter .reading-link small{font-size:11px;font-size:clamp(9px,3.6cqi,11px);font-weight:500;letter-spacing:.01em;text-transform:none;line-height:1.45;margin-bottom:7px;white-space:nowrap}
.chapter .reading-link .display-title{display:block;font-size:18px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
html[data-named-display] .display-heading{align-items:flex-start}
html[data-named-display] .display-heading h1{min-width:0;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1.12;overflow-wrap:anywhere}
html[data-named-display] .display-heading .display-icon{margin-top:8px}
@media(max-width:760px){html[data-named-display] .display-heading h1{font-size:clamp(2.4rem,10vw,3.4rem)}}

/* Display photographs keep their complete original proportions. */
.display-photo{width:100%;max-width:520px;margin:0 0 32px;-webkit-touch-callout:none;user-select:none}
.display-photo img{display:block;width:100%;height:auto;border-radius:12px;-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;pointer-events:none}

html[data-phase] .display-heading{display:block}

html[data-phase] .copy blockquote{margin:28px 0;padding:18px 20px;border-left:3px solid var(--phase-colour);border-radius:0 12px 12px 0;background:#e9eae3;background:color-mix(in srgb,var(--phase-colour) 8%,#f8f5ee)}
html[data-phase] .copy blockquote p{margin:0}

/* Keep display titles balanced and avoid isolated final words. */
.chapter .reading-link .display-title{text-wrap:balance}
.chapter .reading-link .title-phrase{white-space:nowrap}

.chapter .reading-link .title-fixed-lines{text-wrap:wrap}