/* Green sampled from the user-approved colour image; gold and ivory from the logo PDF.
   Olive #404330 / Gold #ae9b75 / Ivory #e8ddc8.
   A deeper gold is used for small text on light paper. */
:root{--brand-green:#404330;--brand-gold:#ae9b75;--brand-ivory:#e8ddc8;--accent:#7d6b45}
/* Straight cover photograph edges in landscape, portrait and print. */
#book .page.cover img.cover-photo{border-radius:0!important}
button,select{color:inherit}
.brand{gap:15px;letter-spacing:0}
.brand-symbol{width:42px;height:52px;object-fit:contain}
.brand-wordmark{width:205px;height:48px;object-fit:contain}
.edition>span{background:var(--brand-gold)}
.bars{height:5px;width:104px}
.bars i:nth-child(1){background:var(--brand-green)}
.bars i:nth-child(2){background:var(--brand-gold)}
.bars i:nth-child(3){background:var(--brand-ivory)}
.bars i:nth-child(4){background:#171717}
.dark .bars i:nth-child(4),.cover .bars i:nth-child(4){background:#ffffff}
.dark .bars i:nth-child(1),.cover .bars i:nth-child(1){background:#929779}
.dark .bars i:nth-child(2),.cover .bars i:nth-child(2){background:var(--brand-gold)}
.dark .bars i:nth-child(3),.cover .bars i:nth-child(3){background:var(--brand-ivory)}
.dark em,.dark .label,.dark .folio span:last-child,.factory-stats b,.client-number,.client-list article>span{color:var(--brand-ivory)}
.cover-left .label{color:var(--brand-ivory)}
.cover-right{width:205px}
.cover-logo{width:205px;height:75px;object-fit:contain!important}
.cover-left p{color:#f3ead9}
.cover-right p{color:var(--brand-green)}
.years{color:var(--brand-gold)}
.group-grid img{filter:url('assets/brand-tint.svg#green')}
.back-logo{display:flex;justify-content:center;align-items:center;gap:38px}
.back-logo img.back-symbol{width:110px;height:135px;margin:0;object-fit:contain}
.back-logo img.back-wordmark{width:285px;height:82px;margin:0;object-fit:contain}
.back-message{margin-top:45px}
.back-message h2{font-size:55px}

/* Hollow journey markers; connectors stop at each circle's edge. */
.journey-grid b{background:transparent;border:1.5px solid var(--brand-gold)}
.journey-grid article{border-top:0}
.journey-grid article::before{content:'';position:absolute;left:40px;right:0;top:0;height:1px;background:#e8ddc84d}

/* Keep the reader compact after removing the introductory and footer sections. */
main{padding-top:24px;padding-bottom:24px}
@media(max-width:800px){main{padding-top:16px;padding-bottom:20px}}

/* White leads on green; the approved cream is reserved for small accents. */
:root{--cream-text:#f0d4ac;--cream-accent-on-light:#9e784b}
.page.dark{color:#ffffff}
.dark :is(h2,h3,p,em,.label,.role,.folio,.made),.dark .folio span,.dark .factory-stats :is(b,span),.dark .client-number,.dark .client-list :is(h3,p,span),.dark .journey-grid b,.cover-left :is(h2,p,em,.label),.download{color:#ffffff}
.page:not(.dark):not(.cover) em{color:var(--cream-accent-on-light)}

/* Keep portrait pages and navigation stable while long content scrolls inside. */
.reading-hint{display:none}
.cover-photo{left:calc(56% - 225px);top:40px;width:450px;height:520px;border-radius:0;object-fit:contain;object-position:50% 50%}
@media(max-width:800px){.brand{gap:8px}.brand-symbol{width:29px;height:39px}.brand-wordmark{width:136px;height:36px}.download{padding:12px 10px}}
@media print{.group-grid img{filter:url('assets/brand-tint.svg#green')}}

/* Black reading text on light paper; brand colours remain in labels and accents. */
:root{--reading-ink:#171717}
.page:not(.dark):not(.cover),
.page:not(.dark):not(.cover) p,
.page:not(.dark):not(.cover) h3,
.page:not(.dark):not(.cover) .stat-grid span,
.page:not(.dark):not(.cover) .story-bottom,
.page:not(.dark):not(.cover) .book-contents>div>span,
.cover-right p,
.vertical-label,
.intro h1,
.intro>p,
.reference-note p{color:var(--reading-ink)}




/* Restrained cream touches: section labels, numbered markers and short closing emphasis. */
.dark .label,.dark .made,.dark .journey-grid b,.dark .client-list article>span,.dark .closing-line em{color:var(--cream-text)}

/* Landscape cover title centred in the right cream panel. */
.cover-profile-title{position:absolute;left:895px;top:300px;width:250px;display:flex;justify-content:center;gap:12px;font:500 16px/1.4 var(--sans);letter-spacing:3.5px;white-space:nowrap}
.cover-profile-title span:first-child{color:#171717}
.cover-profile-title span:last-child{color:#171717}

/* Approved cream emphasis on the cover keyword. */
.cover .cover-left h2 em{font-weight:600;font-style:italic;color:var(--cream-text)}

/* Keep the pale stripe visible against the ivory back cover. */
.back-cover .bars i:nth-child(3){background:#ffffff}

/* Use the supplied complete logo without recomposing its emblem and wordmark. */
.back-logo{height:135px}
.back-logo img.back-full-logo{width:440px;height:auto;max-width:100%;margin:0;object-fit:contain}


/* Two compact, accessible orientation icons on every screen size. */
.view-switch{display:inline-flex;width:auto;order:0;padding:3px;flex-shrink:0}
.view-switch button{display:grid;place-items:center;flex:none;width:44px;height:40px;padding:9px}
.view-switch button svg{width:22px;height:22px;stroke-width:1.5}


/* Preserve the complete arch of the newly supplied cover artwork. */
.cover .cover-photo[src$="decor-gallery-front-page-22.png"]{object-fit:contain!important}
/* Centre the cover copy in the space beside the arch, with a clear photo gutter. */
@media screen and (min-width:701px){
 body .cover .cover-left{left:36px;width:390px;text-align:left}
 body .cover .cover-left h2{font-size:60px;line-height:1.02}
 body .cover .cover-left>p{font-size:17px;line-height:1.45}
 body .cover .cover-left>.bars{margin-inline:0}
 body.book-arabic #book .cover-left{width:340px;text-align:right}
 body.book-arabic #book .cover-left>.bars{margin-left:auto;margin-right:0}
 body.book-arabic #book .cover-left h2{font-size:48px;line-height:1.28}
 body.book-arabic #book .cover-left>p{font-size:14px;line-height:1.6}
}
@media print{
 .cover .cover-left{left:36px;width:390px;text-align:left}
 .cover .cover-left h2{font-size:60px;line-height:1.02}
 .cover .cover-left>p{font-size:17px;line-height:1.45}
 .cover .cover-left>.bars{margin-inline:0}
 .book-arabic #book .cover-left{width:390px;text-align:right}
 .book-arabic #book .cover-left>.bars{margin-left:auto;margin-right:0}
 .book-arabic #book .cover-left h2{font-size:48px;line-height:1.28}
 .book-arabic #book .cover-left>p{font-size:14px;line-height:1.6}
}
