/* ==========================================================================
   APS at 90 — subpage components (page hero, section tabs, article layout,
   photo grids, people lists, documents, testimonials, forms)
   ========================================================================== */

/* ---------- Page hero ---------- */
.page-hero{
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line-strong);
  padding: 48px 0 40px;
  text-align:center;
}
.page-hero .crumb{
  font-family: var(--stamp);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.page-hero .crumb a{ color: var(--maroon); }
.page-hero .crumb a:hover{ text-decoration: underline; }
.page-hero h1{
  font-size: clamp(28px, 3.6vw, 40px);
  margin: 0 0 8px;
}
.page-hero .dateline{
  font-family: var(--stamp);
  font-size: 13px;
  color: var(--brass);
  letter-spacing: 0.04em;
}

/* ---------- Section tabs (wayfinding between related subpages) ---------- */
.section-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper);
}
.section-tabs .container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
  padding-top:14px;
  padding-bottom:14px;
}
.section-tabs a{
  font-size: 13px;
  font-weight:600;
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: var(--radius);
}
.section-tabs a:hover{ color: var(--maroon); background: rgba(110,31,43,0.06); }
.section-tabs a.current{
  color: var(--maroon);
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
}

/* ---------- Article / prose layout ---------- */
.article{
  max-width: 720px;
  margin: 0 auto;
}
.article p{ font-size: 16px; line-height:1.8; color: var(--ink-soft); }
.article h2{ font-size: 24px; margin-top:8px; }

/* ---------- Chairman / letter block ---------- */
.letter-block{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  max-width: 880px;
  margin: 0 auto;
  align-items:start;
}
@media (max-width:700px){
  .letter-block{ grid-template-columns:1fr; gap:32px; }
}
.letter-portrait{
  position: sticky;
  top: 100px;
}
@media (max-width:700px){
  .letter-portrait{
    position: static;
    max-width: 260px;
    margin: 0 auto;
  }
}
.letter-portrait img{
  width:100%;
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 24px rgba(43,27,23,0.14);
  filter: sepia(10%) saturate(0.95);
}
.letter-portrait .cap{
  font-family: var(--stamp);
  font-size: 11px;
  color: var(--ink-faint);
  text-align:center;
  margin-top: 12px;
}
.letter-signoff{
  margin-top: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--maroon-deep);
}
.letter-signoff .role{
  display:block;
  margin-top: 4px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* ---------- Fact list (Sense in Time) ---------- */
.fact-list{
  list-style:none;
  margin: 0 auto;
  padding: 0;
  max-width: 680px;
  border-top: 1px solid var(--line);
}
.fact-list li{
  display:flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height:1.6;
}
.fact-list li::before{
  content: "\2014";
  color: var(--brass);
  flex-shrink:0;
}

/* ---------- Fee box (Early Years aside) ---------- */
.fee-box{
  max-width: 720px;
  margin: 40px auto 0;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  padding: 28px 32px;
}
.fee-box h3{ font-size: 17px; margin: 0 0 10px; }
.fee-box p{ font-size: 14.5px; margin-bottom: 10px; }
.fee-box p:last-child{ margin-bottom:0; }
.fee-box .src{
  font-family: var(--stamp);
  font-size: 10.5px;
  color: var(--ink-faint);
}

/* ---------- Pull quote (alumni memory) ---------- */
.pull-quote{
  max-width: 680px;
  margin: 40px auto 0;
  padding: 28px 32px;
  border-left: 3px solid var(--brass);
  background: var(--paper-deep);
}
.pull-quote p{
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--maroon-deep);
  margin:0;
  line-height:1.65;
}

/* ---------- Photo grid (building/construction archives) ---------- */
.photo-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (max-width:760px){ .photo-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:480px){ .photo-grid{ grid-template-columns: 1fr; } }
.photo-grid figure{ margin:0; }
.photo-grid .thumb{
  aspect-ratio: 4/3;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background: var(--paper-deep);
}
.photo-grid .thumb img{
  width:100%; height:100%; object-fit:cover;
  filter: sepia(14%) saturate(0.92) contrast(1.02);
  transition: transform 300ms ease;
}
.photo-grid figure:hover .thumb img{ transform: scale(1.04); }
.photo-grid figcaption{
  font-family: var(--stamp);
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 10px;
  line-height:1.5;
}

/* ---------- People lists (Heads & Governors) ---------- */
.people-list{
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--line-strong);
}
.people-list .person{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width:600px){
  .people-list .person{ grid-template-columns:1fr; gap:4px; }
}
.people-list .name{
  font-family: var(--serif);
  font-weight:500;
  font-size: 16px;
  color: var(--maroon-deep);
}
.people-list .years{
  display:block;
  font-family: var(--stamp);
  font-size: 11px;
  color: var(--brass);
  margin-top: 3px;
}
.people-list .note{
  font-size: 14px;
  color: var(--ink-soft);
  line-height:1.6;
  margin:0;
}
.people-note{
  max-width: 780px;
  margin: 32px auto 0;
  font-size: 13.5px;
  color: var(--ink-faint);
  font-style: italic;
}

/* ---------- Document grid (Archive) ---------- */
.doc-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width:760px){ .doc-grid{ grid-template-columns: 1fr 1fr; } }
.doc-card{ display:block; }
.doc-card .cover{
  aspect-ratio: 3/4;
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 18px rgba(43,27,23,0.14);
  overflow:hidden;
  background: var(--paper-deep);
  transition: border-color 150ms ease;
}
.doc-card:hover .cover{ border-color: var(--brass); }
.doc-card .cover img{
  width:100%; height:100%; object-fit:cover;
  filter: sepia(14%) saturate(0.92);
  transition: transform 300ms ease;
}
.doc-card:hover .cover img{ transform: scale(1.04); }
.doc-card .label{
  margin-top: 12px;
  font-size: 13px;
  font-weight:600;
  color: var(--ink);
  text-align:center;
}
.doc-group-title{
  font-family: var(--stamp);
  font-size: 12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--maroon);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 14px;
  margin: 0 0 32px;
}
.doc-group + .doc-group{ margin-top: 64px; }

/* ---------- Testimonial cards (Alumni) ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width:760px){ .testimonial-grid{ grid-template-columns:1fr; } }
.testimonial-card{
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  padding: 28px;
}
.testimonial-card img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  margin-bottom: 20px;
}
.testimonial-card p{ font-size: 14.5px; line-height:1.75; }
.testimonial-card .attribution{
  font-family: var(--stamp);
  font-size: 11.5px;
  color: var(--maroon);
  letter-spacing:0.03em;
}

/* ---------- Form embed wrapper ---------- */
.form-panel{
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  padding: 36px;
}
@media (max-width:600px){ .form-panel{ padding: 24px 18px; } }

/* ---------- Gallery (In Pictures) ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width:900px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:600px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
.gallery-grid figure{ margin:0; }
.gallery-grid .thumb{
  aspect-ratio: 1/1;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background: var(--paper-deep);
}
.gallery-grid .thumb img{
  width:100%; height:100%; object-fit:cover;
  filter: sepia(14%) saturate(0.92) contrast(1.02);
  transition: transform 300ms ease;
}
.gallery-grid figure:hover .thumb img{ transform: scale(1.06); }
.gallery-grid figcaption{
  font-family: var(--stamp);
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 8px;
}
.gallery-group-title{
  font-family: var(--stamp);
  font-size: 12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--maroon);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 14px;
  margin: 0 0 28px;
}
.gallery-group + .gallery-group{ margin-top: 56px; }

/* ---------- CTA strip (used at bottom of several pages) ---------- */
.mini-cta{
  text-align:center;
  padding-top: 8px;
}
.mini-cta p{ margin-bottom: 20px; }