/* SHRS Flagship Prospectus — Production v1.0
   Implements docs/prospectus-visual-design-system.md exactly: page
   geometry, grid, type scale, colour ratios, component specs. Shares
   brand.css's colour tokens and Google Fonts rather than redefining
   them — the prospectus is the same institution as the website, not a
   parallel brand. Print-first (@page rules for actual PDF export via
   browser print-to-PDF), screen-viewable for review. */

@page {
  size: 210mm 297mm;
  margin: 0;
}

.pros-body{
  margin:0; background:var(--charcoal-deep-bg,rgb(var(--lv-chd,28,25,20))); color:var(--ink);
  font-family:'Inter','Cairo',sans-serif;
}
.pros-toolbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px; background:var(--navy-deep-bg); color:var(--gold-bright);
  font-family:'Cinzel','Amiri',serif; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
}
.pros-toolbar button{
  font-family:'Cinzel','Amiri',serif; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--gold); color:var(--navy-deep); border:none; padding:8px 16px; cursor:pointer;
}
.pros-toolbar button:hover{background:var(--gold-bright);}

.spread{
  width:210mm; min-height:297mm; margin:20px auto; position:relative; overflow:hidden; isolation:isolate;
  background:var(--ivory-bg); box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
  padding:16mm 12mm; box-sizing:border-box; page-break-after:always;
}
.spread + .spread{margin-top:20px;}
.spread .folio-mark{
  position:absolute; bottom:8mm; font-family:'Cinzel','Amiri',serif; font-size:7.5pt; letter-spacing:0.1em;
  color:var(--ink-soft); text-transform:uppercase;
}
.spread .folio-mark.left{left:12mm;} .spread .folio-mark.right{right:12mm;text-align:right;}

/* ---- Cover / closing (dark, full-bleed) ---- */
.spread.dark{background:var(--navy-deep-bg); color:var(--ivory); padding:0;}
.spread.cover{display:flex; align-items:flex-end;}
/* Unscoped so any dark spread can use a full-bleed background photo,
   not only the literal cover — used by chapter-divider and quote
   spreads (Campus of Distinction, Testimonials) as well as the cover. */
.cover-photo{
  position:absolute; inset:0; background-size:cover; background-position:center; z-index:-1;
}
.cover-scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(var(--lv-cfd5,34,23,9),0.15) 0%, rgba(var(--lv-cfd5,34,23,9),0.55) 55%, rgba(var(--lv-cfd5,34,23,9),0.94) 100%);
}
.spread.cover .cover-content{position:relative; padding:24mm 16mm; width:100%;}
.spread.cover .cover-crest{width:64px; height:64px; margin-bottom:18px;}
.spread.cover h1{
  font-family:'Cinzel','Amiri',serif; font-size:34pt; line-height:1.08; letter-spacing:0.02em;
  color:#fff; margin:0 0 10px;
}
.spread.cover .cover-sub{
  font-family:'Cinzel','Amiri',serif; font-size:9.5pt; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:22px;
}
.spread.cover .cover-line{
  font-family:'Cormorant Garamond','Amiri',serif; font-style:italic; font-size:14pt;
  color:rgba(var(--lv-p3,247,238,223),0.88); max-width:70%; line-height:1.5;
}

/* ---- Eyebrow / heading system ---- */
.eyebrow{
  font-family:'Cinzel','Amiri',serif; font-size:8.5pt; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); margin:0 0 8px;
}
.spread h2{
  font-family:'Cinzel','Amiri',serif; font-size:24pt; line-height:1.15; color:var(--navy); margin:0 0 6px;
}
.spread h2::after{
  content:''; display:block; width:60px; height:2px; margin:18px 0 16px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%);
}
.spread.dark h2::after, .spread.charcoal h2::after{background:linear-gradient(90deg, var(--gold-bright) 0%, var(--gold) 100%);}
.spread h3{
  font-family:'Cinzel','Amiri',serif; font-size:15pt; color:var(--navy); margin:0 0 8px; letter-spacing:0.01em;
}
.spread p{font-size:10.5pt; line-height:1.6; color:var(--ink); margin:0 0 12px; text-align:justify; hyphens:auto; -webkit-hyphens:auto;}
.spread .lede{
  font-family:'Cormorant Garamond','Amiri',serif; font-style:italic; font-size:14.5pt; line-height:1.55;
  color:var(--navy); margin:0 0 16px; text-align:left; hyphens:none;
}
.caption{font-size:8pt; color:var(--ink-soft); margin-top:6px; text-align:left;}

/* ---- Drop cap — applied by hand to a small number of major narrative
   openings (Director's Message, Heritage, Foundation). Never automatic
   across every paragraph — that would read as decorative clutter. ---- */
.drop-cap::first-letter{
  font-family:'Cinzel','Amiri',serif; font-size:44pt; line-height:0.78; font-weight:600;
  color:var(--gold); float:left; margin:4px 8px 0 0;
}

/* ---- Corner ornament — a restrained eight-point khatam star marking a
   handful of ceremonial section openers (Governance, Admissions, Academic
   Pathways, Islamic & Qur'an Excellence, Student Life). Outline only, low
   opacity, positioned clear of running text — a watermark, not a graphic. ---- */
.corner-ornament{position:absolute; top:14mm; right:14mm; width:40px; height:40px; opacity:0.16; pointer-events:none; z-index:0;}

/* ---- Institutional Publication Information (imprint) page — same visual
   language as the Governance Charter's own .imprint-table (constitution-
   print.css), reused verbatim rather than reinvented, so every flagship
   publication's ownership page reads as one family. ---- */
.imprint-table{width:100%; border-collapse:collapse; margin-top:8px;}
.imprint-table th{
  font-family:'Cinzel','Amiri',serif; font-size:7.5pt; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--gold); text-align:left; vertical-align:top; padding:9px 14px 9px 0; width:2.1in;
  border-bottom:1px solid rgba(var(--lv-gs,198,161,91),0.25); white-space:nowrap;
}
.imprint-table td{
  font-family:'Inter','Cairo',sans-serif; font-size:9pt; line-height:1.55; color:var(--ink);
  text-align:left; padding:9px 0; border-bottom:1px solid rgba(var(--lv-gs,198,161,91),0.25);
}
.spread.dark .corner-ornament, .spread.charcoal .corner-ornament{opacity:0.22;}

/* ---- Grid ---- */
.grid12{display:grid; grid-template-columns:repeat(12,1fr); gap:4mm;}
.col-narrative{grid-column:span 7;}
.col-panel{grid-column:span 5;}
.col-full{grid-column:span 12;}

/* ---- Editorial spread photo ---- */
.spread-photo{width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--parchment-bg);}
.spread-photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:4mm;}

/* ---- Feature template (Four Institutions) ---- */
.feature-hero{position:relative; margin:-16mm -12mm 0; height:150mm;}
.feature-hero img, .feature-hero .photo-pending{width:100%; height:100%; object-fit:cover; display:block;}
/* Solid dark bar behind the title, not just a text-shadow relying on
   the photo being dark enough — the photo-pending placeholder is a
   light striped pattern, and white text with only a shadow reads as
   near-invisible against it (the same contrast-bug class fixed
   repeatedly elsewhere in this project: never assume a background
   context, guarantee it). Works identically over a real photo. */
.feature-hero .feature-title-bar{
  position:absolute; left:0; right:0; bottom:0; padding:14mm 12mm 10mm;
  background:linear-gradient(0deg, rgba(var(--lv-cfd5,34,23,9),0.88) 0%, rgba(var(--lv-cfd5,34,23,9),0) 100%);
}
.feature-hero .feature-title-bar h2.feature-title{
  font-family:'Cinzel','Amiri',serif; color:#fff; font-size:26pt; margin:0;
}
.data-panel{
  background:var(--parchment-bg); border-top:2pt solid var(--gold); padding:14px 16px; height:fit-content;
}
.data-panel .dp-row{display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid rgba(var(--lv-gs,198,161,91),0.3); font-size:9pt;}
.data-panel .dp-row:last-child{border-bottom:none;}
.data-panel .dp-label{font-family:'Cinzel','Amiri',serif; font-size:7.5pt; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);}
.data-panel .dp-value{color:var(--navy); font-weight:600;}

/* ---- Academic Resource Ecosystem: numbered medallions on a connecting
   gold thread, reading as one integrated framework rather than a list ---- */
.resource-ecosystem{margin:4px 0 2px;}
.re-label-top{
  font-family:'Cinzel','Amiri',serif; font-size:7.5pt; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--bronze); text-align:center; margin-bottom:10px;
}
.re-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:2mm; position:relative; padding-top:2px;}
.re-grid::before{
  content:''; position:absolute; top:15px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
}
.re-node{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px;}
.re-icon{
  width:30px; height:30px; border-radius:50%; background:var(--navy-bg); color:var(--gold-bright);
  display:flex; align-items:center; justify-content:center; font-family:'Cinzel','Amiri',serif;
  font-size:11pt; font-weight:600; border:2px solid var(--gold); position:relative; z-index:1;
}
.re-label{font-family:'Cinzel','Amiri',serif; font-size:6.8pt; letter-spacing:0.02em; color:var(--navy); line-height:1.3;}

/* ---- Photography-pending honest placeholder (NOT a fabricated image) ---- */
.photo-pending{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  background:repeating-linear-gradient(45deg, var(--parchment-bg), var(--parchment-bg) 10px, var(--cream-bg) 10px, var(--cream-bg) 20px);
  border:1.5px dashed var(--bronze); color:var(--bronze); text-align:center; padding:20px;
}
.photo-pending .pp-label{font-family:'Cinzel','Amiri',serif; font-size:8pt; letter-spacing:0.1em; text-transform:uppercase;}
.photo-pending .pp-note{font-size:8pt; max-width:70%;}

/* ---- Statistic / infographic ---- */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:4mm; margin:18px 0;}
.stat-block{text-align:center; padding:16px 8px;}
.stat-block .num{font-family:'Cinzel','Amiri',serif; font-size:30pt; color:var(--gold-bright);}
.stat-block .label{font-family:'Cinzel','Amiri',serif; font-size:8pt; letter-spacing:0.08em; text-transform:uppercase; color:rgba(var(--lv-p3,247,238,223),0.7); margin-top:4px;}
.figure-pending{font-family:'Inter',sans-serif; font-style:italic; font-size:9pt; color:var(--crimson);}
.spread.charcoal{background:var(--charcoal-bg); color:var(--ivory);}
.spread.charcoal h2, .spread.charcoal h3{color:#fff;}
.spread.charcoal p{color:rgba(var(--lv-w30,241,231,214),0.85);}

/* ---- Diagram nodes ---- */
.diagram-row{display:flex; align-items:center; justify-content:space-between; gap:6px; margin:20px 0; flex-wrap:wrap;}
.diagram-node{
  flex:1; min-width:110px; text-align:center; padding:14px 8px; border:2pt solid var(--gold);
  border-radius:50%; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel','Amiri',serif; font-size:8pt; letter-spacing:0.03em; text-transform:uppercase; color:var(--navy);
}
.diagram-connector{flex:0 0 24px; height:2pt; background:var(--gold);}
@media (max-width:900px){.diagram-connector{display:none;}}

/* ---- Pull quote ---- */
.pull-quote{
  font-family:'Cormorant Garamond','Amiri',serif; font-style:italic; font-size:15pt; color:var(--navy);
  border-inline-start:2pt solid var(--gold); padding-inline-start:16px; margin:18px 0; max-width:60%;
}
.pull-quote .mark{color:var(--gold); font-size:24pt; line-height:0;}

/* ---- Data panel icon ---- */
.icon-32{width:32pt; height:32pt; color:var(--gold);}

@media screen and (max-width:1000px){
  .spread{width:100%; min-height:auto; padding:8vw;}
  .feature-hero{margin:-8vw -8vw 0; height:60vw;}
  .grid12{display:block;}
  .col-narrative, .col-panel{grid-column:auto;}
  .stat-row{grid-template-columns:1fr;}
}

@media print{
  .pros-toolbar{display:none;}
  .spread{box-shadow:none; margin:0; width:auto; height:297mm; min-height:297mm; max-height:297mm;}
}

/* ============================================================
   Definitive Flagship Publication — additional components.
   Extends the base system above rather than duplicating it;
   every rule below composes with .spread/.grid12/.eyebrow/etc.
   ============================================================ */

/* ---- Dedication (in memoriam) page ---- */
.spread.dark .dedication-page{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 20mm; z-index:1;
}
.dedication-page .ded-eyebrow{font-family:'Cinzel','Amiri',serif; font-size:8.5pt; letter-spacing:0.2em; color:var(--gold); margin-bottom:22px;}
.dedication-page p{font-family:'Cormorant Garamond','Amiri',serif; font-style:italic; font-size:17pt; line-height:1.6; color:rgba(var(--lv-p3,247,238,223),0.92); max-width:520px;}
.dedication-page .ded-name{color:var(--gold-bright); font-style:normal; font-weight:600;}
.dedication-page hr{border:none; border-top:1px solid rgba(var(--lv-gbs,233,206,138),0.3); width:80px; margin:22px auto;}
.dedication-page .ded-small{font-family:'Inter',sans-serif; font-style:italic; font-size:10pt; color:rgba(var(--lv-p3,247,238,223),0.6); margin-top:6px;}
.dedication-page .ded-final{font-size:11pt; color:rgba(var(--lv-p3,247,238,223),0.45); margin-top:20px;}
.dedication-page .ded-tag{margin-top:30px; font-family:'Cinzel','Amiri',serif; font-size:7.5pt; letter-spacing:0.14em; color:var(--gold); text-transform:uppercase;}

/* ---- Table of contents ---- */
.toc-cols{display:grid; grid-template-columns:1fr 1fr; gap:16mm; margin-top:16px;}
.toc-group + .toc-group{margin-top:18px;}
.toc-group-label{font-family:'Cinzel','Amiri',serif; font-size:7.5pt; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;}
.toc-row{display:flex; align-items:baseline; gap:8px; padding:6px 0; border-bottom:1px dotted rgba(var(--lv-gs,198,161,91),0.35);}
.toc-row .toc-title{font-size:11pt; color:var(--navy); white-space:nowrap;}
.toc-row .toc-fill{flex:1; border-bottom:1px dotted rgba(var(--lv-gs,198,161,91),0.35); margin-bottom:3px;}
.toc-row .toc-page{font-family:'Cinzel','Amiri',serif; font-size:10pt; color:var(--gold);}
.toc-row.toc-sub .toc-title{font-size:9pt; color:var(--ink-soft); padding-inline-start:14px;}
.toc-row.toc-sub{border-bottom:none; padding:2px 0;}

/* ---- Timeline (vertical, chronological) ---- */
.v-timeline{position:relative; padding-inline-start:28px; border-inline-start:1px solid rgba(var(--lv-gs,198,161,91),0.4);}
.v-timeline .vt-item{position:relative; padding-bottom:22px;}
.v-timeline .vt-item::before{
  content:''; position:absolute; left:-32.5px; top:6px; width:9px; height:9px; border-radius:50%;
  background:var(--gold); border:2px solid var(--ivory-bg);
}
.v-timeline .vt-year{font-family:'Cinzel','Amiri',serif; font-size:17pt; color:var(--gold); margin-bottom:2px;}
.v-timeline .vt-body{font-size:9.5pt; line-height:1.55; color:var(--ink);}
.spread.dark .v-timeline{border-inline-start-color:rgba(var(--lv-gbs,233,206,138),0.3);}
.spread.dark .v-timeline .vt-body{color:rgba(var(--lv-p3,247,238,223),0.8);}
.spread.dark .v-timeline .vt-item::before{border-color:var(--navy-deep-bg);}

/* ---- CLEVER-style single-letter value cards ---- */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin:16px 0;}
.value-card{background:var(--parchment-bg); padding:18px 16px; min-height:150px;}
.value-card .vc-letter{font-family:'Cinzel','Amiri',serif; font-size:34pt; color:var(--navy); line-height:1;}
.value-card .vc-label{font-family:'Cinzel','Amiri',serif; font-size:7.5pt; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin:4px 0 8px;}
.value-card p{font-size:9pt; line-height:1.5; margin:0; color:var(--ink);}
@media (max-width:900px){.value-grid{grid-template-columns:repeat(2,1fr);}}

/* ---- Core-values list (single-letter monogram row) ---- */
.mono-values{display:flex; flex-direction:column; gap:0;}
.mono-value-row{display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-bottom:1px solid rgba(var(--lv-gs,198,161,91),0.25);}
.mono-value-row:last-child{border-bottom:none;}
.mono-value-row .mv-letter{
  flex:0 0 auto; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel','Amiri',serif; font-size:18pt; color:var(--navy-deep); background:var(--gold); font-weight:600;
}
.mono-value-row .mv-body .mv-title{font-family:'Cinzel','Amiri',serif; font-size:9.5pt; letter-spacing:0.06em; text-transform:uppercase; color:var(--navy); margin-bottom:2px;}
.mono-value-row .mv-body p{font-size:9pt; color:var(--ink); margin:0; line-height:1.5; text-align:left;}

/* ---- Org chart ---- */
.org-chart{display:flex; flex-direction:column; align-items:center; gap:0; margin:20px 0;}
.org-node{
  background:linear-gradient(180deg, var(--navy-bg) 0%, var(--navy-deep-bg) 100%); color:#fff; text-align:center;
  padding:12px 20px; min-width:220px; font-family:'Cinzel','Amiri',serif;
  border-top:2px solid var(--gold); box-shadow:0 6px 16px -6px rgba(var(--lv-cfd5,34,23,9),0.45);
}
.org-node.org-top{background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%); color:var(--navy-deep); border-top-color:var(--navy-deep-bg);}
.org-node.org-founding{background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%); color:var(--navy-deep); font-size:9pt; max-width:420px; border-top-color:var(--navy-deep-bg);}
.org-node .org-title{font-size:7pt; letter-spacing:0.1em; text-transform:uppercase; opacity:0.75;}
.org-node .org-name{font-size:10.5pt; margin-top:2px;}
.org-node .org-cred{font-family:'Inter',sans-serif; font-style:italic; font-size:7.5pt; opacity:0.7; margin-top:3px;}
.org-connector{width:1px; height:18px; background:linear-gradient(180deg, var(--gold) 0%, var(--gold) 40%, transparent 100%); position:relative;}
.org-connector::after{content:''; position:absolute; left:50%; bottom:-3px; width:5px; height:5px; transform:translateX(-50%) rotate(45deg); background:var(--gold);}
.org-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.org-row .org-node{
  background:linear-gradient(180deg, var(--cream-bg) 0%, var(--parchment-bg) 100%); color:var(--navy); flex:1; min-width:150px;
  box-shadow:0 4px 12px -6px rgba(var(--lv-cfd5,34,23,9),0.3);
}
.org-row .org-node .org-title{color:var(--ink-soft);}

/* ---- Org tree — vertical stem to a horizontal spine, then an individual
   drop-line into each peer node. A designed branching chart, not a flat
   caption pretending to describe a hierarchy. ---- */
.org-tree-label{
  text-align:center; font-family:'Cinzel','Amiri',serif; font-size:7.5pt; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--gold); margin:2px 0 20px;
}
.org-tree-label .otl-sub{
  display:block; font-family:'Cormorant Garamond','Amiri',serif; font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0; font-size:9.5pt; color:var(--ink-soft); margin-top:5px;
}
.org-tree{position:relative; padding-top:16px;}
.org-tree-spine{
  position:absolute; top:0; left:3%; right:3%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 6%, var(--gold) 94%, transparent);
}
.org-row-tree .org-node{position:relative;}
.org-row-tree .org-node::before{
  content:''; position:absolute; top:-16px; left:50%; width:1px; height:16px; background:var(--gold); transform:translateX(-50%);
}
.org-row-tree .org-node::after{
  content:''; position:absolute; top:-3px; left:50%; width:4px; height:4px; transform:translateX(-50%) rotate(45deg); background:var(--gold);
}

/* ---- Leadership roster ---- */
.roster-row{display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); align-items:flex-start;}
.roster-row:last-child{border-bottom:none;}
.roster-initials{
  flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--navy-bg); color:var(--gold-bright); font-family:'Cinzel','Amiri',serif; font-size:12pt; font-weight:600;
}
.roster-body .roster-name{font-family:'Cinzel','Amiri',serif; font-size:12pt; color:var(--navy);}
.roster-body .roster-role{font-size:8.5pt; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold); margin-top:1px;}
.roster-body .roster-cred{font-family:'Cormorant Garamond','Amiri',serif; font-style:italic; font-size:9.5pt; color:var(--ink-soft); margin-top:3px;}

/* ---- Numbered step (admissions) ---- */
.step-row{display:flex; gap:14px; margin-bottom:16px;}
.step-num{font-family:'Cinzel','Amiri',serif; font-size:26pt; color:var(--gold); line-height:1; flex:0 0 auto; width:48px;}
.step-body .step-title{font-family:'Cinzel','Amiri',serif; font-size:8.5pt; letter-spacing:0.08em; text-transform:uppercase; color:var(--navy); margin-bottom:3px;}
.step-body p{font-size:9.5pt; color:var(--ink); margin:0; line-height:1.5; text-align:left;}

/* ---- Testimonial columns ---- */
.testimonial-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px;}
.testimonial-block .mark{font-family:'Cormorant Garamond','Amiri',serif; font-size:30pt; color:var(--gold); line-height:0.5; display:block; margin-bottom:8px;}
.testimonial-block p{font-family:'Cormorant Garamond','Amiri',serif; font-style:italic; font-size:12.5pt; line-height:1.6; color:var(--ivory); text-align:left;}
.testimonial-block .who{font-family:'Cinzel','Amiri',serif; font-size:8pt; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-bright); margin-top:10px;}
@media (max-width:900px){.testimonial-cols{grid-template-columns:1fr;}}

/* ---- Awards table ---- */
.awards-table{width:100%; border-collapse:collapse; font-size:8.5pt; margin-top:10px;}
.awards-table th{
  background:var(--navy-bg); color:var(--gold-bright); font-family:'Cinzel','Amiri',serif; font-size:7pt;
  letter-spacing:0.06em; text-transform:uppercase; padding:8px 10px; text-align:start;
}
.awards-table td{padding:8px 10px; border-bottom:1px solid var(--line); color:var(--ink);}
.awards-table tr:nth-child(even) td{background:var(--parchment-bg);}
.verify-note{font-size:7.5pt; font-style:italic; color:var(--crimson); margin-top:8px;}

/* ---- Quad stat bar ---- */
.stat-bar-quad{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--gold); margin:18px 0;
  box-shadow:0 8px 22px -10px rgba(var(--lv-cfd5,34,23,9),0.35);
}
.stat-bar-quad .sbq-cell{background:linear-gradient(180deg, var(--cream-bg) 0%, var(--parchment-bg) 100%); text-align:center; padding:16px 6px 14px; border-top:2px solid var(--gold);}
.stat-bar-quad .sbq-num{font-family:'Cinzel','Amiri',serif; font-size:24pt; color:var(--navy); text-shadow:0 1px 0 rgba(255,255,255,0.4);}
.stat-bar-quad .sbq-label{font-size:7.5pt; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px;}
.spread.dark .stat-bar-quad{background:var(--gold);}
.spread.dark .stat-bar-quad .sbq-cell{background:linear-gradient(180deg, var(--navy-bg) 0%, var(--navy-deep-bg) 100%); border-top-color:var(--gold-bright);}
.spread.dark .stat-bar-quad .sbq-num{color:var(--gold-bright); text-shadow:none;}
.spread.dark .stat-bar-quad .sbq-label{color:rgba(var(--lv-p3,247,238,223),0.6);}

/* ---- School summary card (Four Schools spread) ---- */
.school-card{background:var(--navy-deep-bg); border:1px solid rgba(var(--lv-gbs,233,206,138),0.35); padding:16px 18px;}
.school-card .sc-eyebrow{font-family:'Cinzel','Amiri',serif; font-size:7pt; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold);}
.school-card .sc-title{font-family:'Cinzel','Amiri',serif; font-size:14pt; color:#fff; margin:4px 0 4px;}
.school-card .sc-meta{font-size:8pt; color:rgba(var(--lv-p3,247,238,223),0.65);}
.school-card.sc-center{background:var(--gold); border-color:var(--gold);}
.school-card.sc-center .sc-eyebrow{color:var(--navy-deep); opacity:0.7;}
.school-card.sc-center .sc-title{color:var(--navy-deep);}
.school-card.sc-center .sc-meta{color:var(--navy-deep); opacity:0.8;}
.school-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

/* ---- Pillars (three-column, cognitive/affective/psychomotor) ---- */
.pillars-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0;}
.pillar-block .pillar-title{font-family:'Cormorant Garamond','Amiri',serif; font-style:italic; font-size:12pt; color:var(--gold); margin-bottom:4px;}
.pillar-block p{font-size:9pt; color:var(--ink); line-height:1.5; margin:0;}

/* ---- Photo pending, small inline variant ---- */
.photo-pending.pp-small{padding:10px; min-height:80px;}
.photo-pending.pp-small .pp-label{font-size:7pt;}
.photo-pending.pp-small .pp-note{font-size:7pt;}

/* ---- Ten-reasons numbered list ---- */
.reasons-list{counter-reset:reason;}
.reason-item{display:flex; gap:8px; padding:5px 0; border-bottom:1px solid rgba(var(--lv-gs,198,161,91),0.2);}
.reason-item .r-num{font-family:'Cinzel','Amiri',serif; font-size:11pt; color:var(--gold); flex:0 0 auto; width:22px;}
.reason-item p{font-size:8.3pt; margin:0; color:var(--ink); line-height:1.4; text-align:left;}

/* ---- Icon panel — an elegant, deliberate substitute where no real
   photography exists, styled as a design choice (solid parchment
   panel, gold top-rule, large brand-coloured badge icon), not a
   dashed "pending" box. Composes with .col-panel and grid cells. ---- */
.icon-panel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:26px 18px; height:100%; box-sizing:border-box;
  background:var(--parchment-bg); border-top:2pt solid var(--gold);
}
.icon-panel .icon-badge{
  width:76px; height:76px; border-radius:50%; background:var(--navy-bg);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; flex:0 0 auto;
}
.icon-panel .icon-badge svg{width:38px; height:38px;}
.icon-panel .icon-label{
  font-family:'Cinzel','Amiri',serif; font-size:8.5pt; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--navy); margin-bottom:5px;
}
.icon-panel .icon-note{font-size:8pt; color:var(--ink-soft); max-width:280px; line-height:1.5; text-align:left;}
.spread.dark .icon-panel, .spread.charcoal .icon-panel{
  background:rgba(var(--lv-wh,255,255,255),0.05); border-top-color:var(--gold-bright);
}
.spread.dark .icon-panel .icon-badge, .spread.charcoal .icon-panel .icon-badge{background:var(--gold);}
.spread.dark .icon-panel .icon-label, .spread.charcoal .icon-panel .icon-label{color:#fff;}
.spread.dark .icon-panel .icon-note, .spread.charcoal .icon-panel .icon-note{color:rgba(var(--lv-p3,247,238,223),0.65);}
.icon-panel.icon-panel-inline{flex-direction:row; text-align:left; padding:18px; gap:14px;}
.icon-panel.icon-panel-inline .icon-badge{margin-bottom:0;}
.icon-panel.icon-panel-inline .icon-note{max-width:none;}

/* ============================================================
   Flagship visual-density pass — richer treatments for spreads
   that were print-page-height (300mm) but content-thin, producing
   large unintentional blank regions. These enlarge existing
   components and add legitimate premium devices (full-bleed
   watermarks, vertical-centring beside full-height photography,
   larger stat displays) rather than inventing new content.
   ============================================================ */

/* Larger CLEVER value cards — more generous internal space */
.value-card{padding:26px 20px; min-height:210px; display:flex; flex-direction:column; justify-content:center;}
.value-card .vc-letter{font-size:42pt;}
.value-card .vc-label{font-size:8.5pt; margin:6px 0 10px;}
.value-card p{font-size:9.5pt;}

/* Larger school-summary cards */
.school-card{padding:22px 20px; min-height:170px; display:flex; flex-direction:column; justify-content:center;}
.school-card .sc-title{font-size:16pt; margin:6px 0 6px;}
.school-card .sc-meta{font-size:8.5pt; line-height:1.5;}

/* Larger, more generous stat-bar-quad cells */
.stat-bar-quad.stat-bar-quad-lg .sbq-cell{padding:28px 12px;}
.stat-bar-quad.stat-bar-quad-lg .sbq-num{font-size:34pt;}
.stat-bar-quad.stat-bar-quad-lg .sbq-label{font-size:8pt; margin-top:6px;}

/* Full-bleed low-opacity background watermark — a deliberate luxury
   device for otherwise text-light pages (dedication, quote spreads),
   not a substitute for content. */
.spread-watermark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:-1;
}
.spread-watermark img{width:60%; max-width:340px; opacity:0.06;}

/* Hero pull-quote — a full-scale "quote spread" treatment (Testimonials,
   Commissioning) rather than a small inline callout */
.pull-quote.pull-quote-hero{
  font-size:22pt; line-height:1.5; max-width:100%; border-inline-start-width:3pt; padding-inline-start:24px;
}
.pull-quote.pull-quote-hero .mark{font-size:42pt;}

/* Vertically centred narrative column, for pairing short copy with a
   full-height photograph rather than leaving it stranded at the top */
.col-narrative.col-center, .col-panel.col-center{display:flex; flex-direction:column; justify-content:center; height:100%;}

/* Governance/community mini-diagram — small labelled row used to give
   otherwise-brief pages (Org Structure, Foundation) real supporting
   substance rather than empty lower space */
.support-row{display:flex; gap:0; margin-top:24px; border-top:1px solid rgba(var(--lv-gs,198,161,91),0.3);}
.support-row .support-cell{flex:1; padding:16px 14px; border-inline-end:1px solid rgba(var(--lv-gs,198,161,91),0.2); text-align:center;}
.support-row .support-cell:last-child{border-inline-end:none;}
.support-row .support-cell .support-title{font-family:'Cinzel','Amiri',serif; font-size:8pt; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin-bottom:4px;}
.support-row .support-cell p{font-size:8.5pt; color:var(--ink-soft); margin:0; line-height:1.5; text-align:left;}
.spread.dark .support-row, .spread.charcoal .support-row{border-top-color:rgba(var(--lv-gbs,233,206,138),0.25);}
.spread.dark .support-row .support-cell, .spread.charcoal .support-row .support-cell{border-inline-end-color:rgba(var(--lv-gbs,233,206,138),0.18);}
.spread.dark .support-row .support-cell p, .spread.charcoal .support-row .support-cell p{color:rgba(var(--lv-p3,247,238,223),0.7);}

/* ============================================================
   Realignment to the approved master reference (26-page A4
   brand book) — components matching its specific compositions:
   the dark portrait-rail bio spread, department list, pathway
   steps, and a bordered corner-marked quote box. Editorial
   refinement only — these compose with the existing system
   above rather than replacing it.
   ============================================================ */

/* Two-column bio spread: fixed-width dark portrait rail (photo +
   name pinned to the foot) beside a wide ivory content column —
   matches the reference Director's Message / Leadership portrait
   pages exactly, at A4. */
.bio-layout{display:grid; grid-template-columns:62mm 1fr; margin:-16mm -12mm; min-height:297mm;}
.bio-rail{background:var(--navy-deep-bg); color:var(--ivory); padding:16mm 8mm 20mm; display:flex; flex-direction:column; box-sizing:border-box;}
.bio-rail .bio-photo{width:100%; aspect-ratio:3/4; object-fit:cover; margin-bottom:auto;}
.bio-rail .icon-panel{margin-bottom:16px; padding:16px 10px; height:auto; width:100%; aspect-ratio:3/4; box-sizing:border-box;}
.bio-rail .icon-panel .icon-badge{width:96px; height:96px;}
.bio-rail .icon-panel .icon-badge span{font-size:24pt !important;}
.bio-rail .bio-name{font-family:'Cinzel','Amiri',serif; font-size:15pt; line-height:1.2; color:#fff; margin-top:16px;}
.bio-rail .bio-role{font-size:7.5pt; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-bright); margin-top:6px;}
.bio-rail .bio-cred{font-size:7pt; color:rgba(var(--lv-p3,247,238,223),0.6); margin-top:6px; line-height:1.5;}
.bio-content{padding:16mm 14mm 14mm 16mm; box-sizing:border-box; min-width:0;}
.bio-content h2{font-size:27pt;}

/* Academic department list (Royal College — Academic Pathway) */
.pros-list{display:flex; flex-direction:column; gap:0; margin:14px 0;}
.pros-list-item{padding:11px 0; border-bottom:1px solid rgba(var(--lv-gs,198,161,91),0.25);}
.pros-list-item:last-child{border-bottom:none;}
.pros-list-item .pl-title{font-family:'Cinzel','Amiri',serif; font-size:10pt; color:var(--navy); margin-bottom:3px;}
.pros-list-item .pl-body{font-size:8.5pt; color:var(--ink-soft); line-height:1.5; text-align:left;}
.spread.dark .pros-list-item, .spread.charcoal .pros-list-item{border-bottom-color:rgba(var(--lv-gbs,233,206,138),0.2);}
.spread.dark .pros-list-item .pl-title, .spread.charcoal .pros-list-item .pl-title{color:#fff;}
.spread.dark .pros-list-item .pl-body, .spread.charcoal .pros-list-item .pl-body{color:rgba(var(--lv-p3,247,238,223),0.7);}

/* Bordered pull-quote box with corner ticks — the reference's ToC
   feature-quote treatment */
.quote-box{
  position:relative; border:1px solid rgba(var(--lv-gs,198,161,91),0.5); background:var(--parchment-bg);
  padding:26px 30px; margin:22px 0; text-align:center;
}
.quote-box::before, .quote-box::after,
.quote-box .qb-tick-tl, .quote-box .qb-tick-br{position:absolute; width:14px; height:14px; border:2px solid var(--gold);}
.quote-box::before{content:''; top:-1px; left:-1px; border-width:2px 0 0 2px;}
.quote-box::after{content:''; bottom:-1px; right:-1px; border-width:0 2px 2px 0;}
.quote-box p{font-family:'Cormorant Garamond','Amiri',serif; font-style:italic; font-size:14.5pt; line-height:1.6; color:var(--navy); margin:0; text-align:left;}
.quote-box .qb-who{font-family:'Cinzel','Amiri',serif; font-size:8pt; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-top:14px; display:block;}

/* Larger monogram badge for the leadership roster, matching the
   reference's square SZ/AO/AI/AS/FB/KA idiom */
.roster-row{gap:16px; padding:10px 0;}
.roster-initials{width:48px; height:48px; font-size:12.5pt; letter-spacing:0.02em;}
.roster-row img.roster-photo{width:48px; height:48px; object-fit:cover; flex:0 0 auto;}
.roster-body .roster-name{font-size:11.5pt;}

@media screen and (max-width:1000px){
  .bio-layout{display:block;}
  .bio-rail{padding:8vw;}
}
@media print{
  .bio-layout{margin:-16mm -12mm;}
}

/* ============================================================
   Flagship cover elevation — front/back cover only. Adds visual
   depth (layered gradients, a fine luxury frame, restrained corner
   ornaments, subtle texture) to the existing cover composition.
   No new content, no structural change — same crest, same title,
   same information, presented with more editorial sophistication.
   ============================================================ */
.cover-frame{
  position:absolute; inset:10mm; border:1pt solid rgba(var(--lv-gbs,233,206,138),0.55); pointer-events:none; z-index:2;
}
.cover-frame::before{
  content:''; position:absolute; inset:4mm; border:0.5pt solid rgba(var(--lv-gbs,233,206,138),0.28);
}
.cover-frame .cf-tick{position:absolute; width:16px; height:16px; border:1.5pt solid var(--gold-bright);}
.cover-frame .cf-tick.tl{top:-1pt; left:-1pt; border-width:1.5pt 0 0 1.5pt;}
.cover-frame .cf-tick.tr{top:-1pt; right:-1pt; border-width:1.5pt 1.5pt 0 0;}
.cover-frame .cf-tick.bl{bottom:-1pt; left:-1pt; border-width:0 0 1.5pt 1.5pt;}
.cover-frame .cf-tick.br{bottom:-1pt; right:-1pt; border-width:0 1.5pt 1.5pt 0;}
.cover-texture{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5;
  background-image:repeating-linear-gradient(45deg, rgba(var(--lv-gbs,233,206,138),0.035) 0px, rgba(var(--lv-gbs,233,206,138),0.035) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(-45deg, rgba(var(--lv-gbs,233,206,138),0.035) 0px, rgba(var(--lv-gbs,233,206,138),0.035) 1px, transparent 1px, transparent 26px);
}
.cover-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(var(--lv-cfd5,34,23,9),0) 0%, rgba(var(--lv-cfd5,34,23,9),0.06) 55%, rgba(var(--lv-w22,20,13,5),0.62) 100%),
    linear-gradient(180deg, rgba(var(--lv-w22,20,13,5),0.35) 0%, rgba(var(--lv-cfd5,34,23,9),0) 16%, rgba(var(--lv-cfd5,34,23,9),0) 78%, rgba(var(--lv-w22,20,13,5),0.5) 100%);
}
.cover-rule{width:64px; height:1pt; background:linear-gradient(90deg, transparent, var(--gold-bright), transparent); margin:18px auto;}
.spread.cover h1{text-shadow:0 2px 24px rgba(0,0,0,0.45);}
.spread.cover .cover-crest{filter:drop-shadow(0 4px 18px rgba(0,0,0,0.5));}

/* ---- Front-cover photograph: the real, named building anchors the top
   third; a deep bottom-weighted scrim gives the title block a legible,
   authoritative field to sit on, so the cover reads as "a real, serious
   place" rather than a flat colour panel with text on it. ---- */
.spread.cover .cover-photo{opacity:1; z-index:-2;}
/* Duotone colour-grade — pulls the raw photograph into the brand's
   navy/gold palette rather than letting it sit in untouched daylight
   colour, the difference between "a photo on a cover" and "a cover". */
.cover-duotone{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(135deg, rgba(var(--lv-gs,198,161,91),0.22) 0%, rgba(var(--lv-cfd5,34,23,9),0.1) 45%, rgba(var(--lv-w22,20,13,5),0.35) 100%);
  mix-blend-mode:color;
}
.cover-crest-glow{
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  width:220px; height:220px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(var(--lv-gbs,233,206,138),0.28) 0%, rgba(var(--lv-gbs,233,206,138),0) 70%);
}
.cover-frame-triple::after{
  content:''; position:absolute; inset:8mm; border:0.5pt solid rgba(var(--lv-gbs,233,206,138),0.16);
}
.cover-vignette.cover-vignette-photo{
  background:radial-gradient(ellipse at 50% 100%, rgba(var(--lv-w56,15,10,4),0.2) 0%, transparent 55%),
    linear-gradient(180deg,
      rgba(var(--lv-w22,20,13,5),0.82) 0%,
      rgba(var(--lv-w233,24,16,6),0.55) 14%,
      rgba(var(--lv-w118,28,19,7),0.32) 30%,
      rgba(var(--lv-w118,28,19,7),0.4) 46%,
      rgba(var(--lv-w234,22,15,6),0.86) 62%,
      rgba(var(--lv-w235,18,12,5),0.96) 78%,
      rgba(var(--lv-w56,15,10,4),0.98) 100%);
}

/* ---- Governance tier — numbered institutional-level row, for the
   full Board-to-Class-Captain governance spread ---- */
.gov-tier{display:flex; gap:20px; padding:26px 0; border-bottom:1px solid rgba(var(--lv-gs,198,161,91),0.25); align-items:flex-start;}
.gov-tier:last-child{border-bottom:none;}
.gov-tier-num{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--navy-bg) 0%, var(--navy-deep-bg) 100%); color:var(--gold-bright);
  display:flex; align-items:center; justify-content:center; font-family:'Cinzel','Amiri',serif; font-size:15pt; font-weight:600;
  border:2px solid var(--gold); box-shadow:0 4px 12px -4px rgba(var(--lv-cfd5,34,23,9),0.4);
}
.gov-tier-body{flex:1;}
.gov-tier-body .gov-tier-eyebrow{font-family:'Cinzel','Amiri',serif; font-size:7.5pt; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:3px;}
.gov-tier-body .gov-tier-title{font-family:'Cinzel','Amiri',serif; font-size:15pt; color:var(--navy); margin-bottom:8px;}
.gov-tier-body .gov-tier-desc{font-size:10pt; color:var(--ink-soft); line-height:1.6; margin-bottom:10px; max-width:90%; text-align:left;}
.gov-tier-body .gov-tier-chips{display:flex; flex-wrap:wrap; gap:8px;}
.gov-tier-body .gov-tier-chips span{
  font-size:9pt; color:var(--navy); background:linear-gradient(180deg, var(--cream-bg) 0%, var(--parchment-bg) 100%);
  border:1px solid rgba(var(--lv-gs,198,161,91),0.5); border-top:2px solid var(--gold);
  padding:6px 14px; border-radius:2px; box-shadow:0 2px 6px -2px rgba(var(--lv-cfd5,34,23,9),0.2);
}