/* Interior-page furniture. The comp has no example of these, so they live here
   rather than in styles.css, which stays extraction-only from design/homepage.html.
   Built from the comp's own tokens — no new colours are introduced. */

.lede-block { padding-block: clamp(2.5rem, 5.5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem); }
.lede-block h1 { font-size: clamp(2.1rem, 4.8vw, 3.35rem); letter-spacing: -.036em; max-width: 20ch; }
.lede-block .standfirst { margin-top: 1.35rem; font-size: 1.12rem; color: var(--slate); max-width: 56ch; }
.lede-block .standfirst strong { color: var(--char); font-weight: 600; }

.prose { padding-block: clamp(2rem, 4vw, 3rem); }
.prose h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.032em; max-width: 24ch; }
.prose h3 { font-size: 1.18rem; margin-top: 2rem; }
.prose p { margin-top: 1.1rem; font-size: 1.05rem; color: var(--slate); max-width: 66ch; line-height: 1.68; }
.prose p strong { color: var(--char); font-weight: 600; }
.prose > h2 + p { margin-top: 1.2rem; }

.pull-fact {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-left: 3px solid var(--glacier-deep);
  padding: 1.25rem 0 1.25rem 1.5rem;
  max-width: 62ch;
}
.pull-fact b { display: block; font-family: var(--disp); font-weight: 700; font-size: 1.28rem; letter-spacing: -.028em; }
.pull-fact span { display: block; margin-top: .5rem; font-size: 1rem; color: var(--slate); line-height: 1.6; }
.pull-fact.caution { border-left-color: var(--amber); }
.pull-fact.caution b { color: var(--amber); }

.quoted {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--card); border: 1px solid var(--hair); border-radius: 3px;
  padding: clamp(1.35rem, 3vw, 2rem);
  max-width: 62ch;
}
.quoted blockquote { margin: 0; font-size: 1.12rem; line-height: 1.6; color: var(--char); }
.quoted cite { display: block; margin-top: .9rem; font-style: normal; font-size: .88rem; color: var(--slate); }

/* a ruled figure table, reusing the account rhythm */
.figures-table { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 2px solid var(--navy); overflow-x: auto; }
.figures-table table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.figures-table th, .figures-table td { text-align: left; padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; font-size: .97rem; }
.figures-table thead th { font-size: .88rem; color: var(--slate); font-weight: 500; }
.figures-table tbody th { font-family: var(--disp); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; width: 30%; }
.figures-table td { color: var(--slate); }
.figures-table td.num { font-family: var(--disp); font-weight: 700; color: var(--char); text-align: right; padding-right: 0; }
/* --amber is 3.46:1 on linen — fine for the 20px caution heading (large text),
   too low for these 17px bold figures, which need 4.5:1. */
.figures-table td.num.warn { color: #8A5710; }

.checklist { margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; max-width: 64ch; }
.checklist li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .85rem; font-size: 1.02rem; color: var(--slate); line-height: 1.6; }
.checklist li::before { content: "\2014"; color: var(--glacier-deep); }
.checklist li b { color: var(--char); font-weight: 600; }

.next-steps { background: var(--card); border-block: 1px solid var(--hair); }
.next-steps .gutter { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.next-steps h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.03em; }
.next-steps p { margin-top: 1rem; font-size: 1.05rem; color: var(--slate); max-width: 56ch; }
.next-steps .press { margin-top: 1.75rem; }

.onward-links { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--hair); }
.onward-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding-block: 1.05rem; border-bottom: 1px solid var(--hair); text-decoration: none; transition: padding-left .16s ease; }
.onward-links a:hover { padding-left: .55rem; }
.onward-links strong { font-family: var(--disp); font-weight: 700; font-size: 1.06rem; letter-spacing: -.024em; }
.onward-links span { display: block; margin-top: .2rem; font-size: .95rem; color: var(--slate); font-family: var(--text); font-weight: 400; letter-spacing: 0; }
.onward-links i { font-style: normal; color: var(--glacier-deep); font-size: 1.15rem; }

/* ============================================================
   PORTAL — the two-login split, drawn
   ============================================================ */
.split-logins { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .split-logins { grid-template-columns: 1fr; } }
.login-card { background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--glacier-deep); border-radius: 3px; padding: 1.5rem 1.5rem 1.6rem; }
.login-card kbd { display: inline-block; font-family: var(--text); font-weight: 700; font-size: 1.02rem; background: var(--glacier-mist); color: var(--navy); border-radius: 2px; padding: .25rem .55rem; }
.login-card h3 { margin-top: .85rem; font-size: 1.12rem; }
.login-card p { margin-top: .6rem; font-size: .95rem; color: var(--slate); line-height: 1.6; }
.login-card ul { margin: .85rem 0 0; padding: 0 0 0 1.1rem; }
.login-card li { font-size: .94rem; color: var(--slate); line-height: 1.55; margin-top: .35rem; }

/* glossary of the school's own words */
.lexicon { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 2px solid var(--navy); }
.lexicon dl { margin: 0; display: grid; }
.lexicon .term { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.25rem); padding-block: 1.15rem; border-bottom: 1px solid var(--hair); }
@media (max-width: 720px) { .lexicon .term { grid-template-columns: 1fr; gap: .3rem; } }
.lexicon dt { font-family: var(--disp); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; }
.lexicon dd { margin: 0; font-size: .97rem; color: var(--slate); line-height: 1.62; }
.lexicon dd b { color: var(--char); font-weight: 600; }

/* ============================================================
   TEAM
   ============================================================ */
.bench { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.person { background: var(--card); border: 1px solid var(--hair); border-radius: 3px; padding: 1.6rem 1.5rem; }
.person .initials { width: 3rem; height: 3rem; border-radius: 999px; background: var(--navy); color: var(--linen); display: grid; place-items: center; font-family: var(--disp); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.person h3 { margin-top: 1rem; font-size: 1.14rem; }
.person .role { margin-top: .3rem; font-size: .9rem; color: var(--glacier-deep); font-weight: 600; }
.person p { margin-top: .8rem; font-size: .95rem; color: var(--slate); line-height: 1.6; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.filters { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button { font-family: var(--text); font-size: .93rem; font-weight: 500; color: var(--slate); background: var(--card); border: 1px solid var(--hair-2); border-radius: 999px; padding: .55rem 1.05rem; min-height: 44px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.filters button:hover { border-color: var(--glacier); color: var(--navy); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--linen); font-weight: 600; }
.filters button span { opacity: .6; }

.reviews { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.review { background: var(--card); border: 1px solid var(--hair); border-radius: 3px; padding: 1.5rem 1.5rem 1.6rem; }
.review[hidden] { display: none; }
.stars { color: var(--glacier-deep); font-size: 1rem; letter-spacing: .12em; }
.review blockquote { margin: .85rem 0 0; font-size: 1rem; color: var(--char); line-height: 1.62; }
.review footer { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--hair); font-size: .9rem; color: var(--dim); }
.review footer b { display: block; color: var(--char); font-family: var(--disp); font-weight: 700; font-size: .98rem; letter-spacing: -.02em; }
.reviews-empty { margin-top: 1.5rem; font-size: 1rem; color: var(--dim); }

/* ============================================================
   ARTICLES
   ============================================================ */
.article-meta { margin-top: 1.35rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; font-size: .92rem; color: var(--dim); }
.article-meta b { color: var(--char); font-weight: 600; }
.answer-first { margin-top: clamp(1.5rem, 3vw, 2rem); background: var(--glacier-mist); border-left: 3px solid var(--glacier-deep); padding: 1.25rem 1.5rem; max-width: 64ch; }
.answer-first p { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--char); }

.faq { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 2px solid var(--navy); }
.faq-item { padding-block: 1.25rem; border-bottom: 1px solid var(--hair); }
.faq-q { font-size: 1.08rem; font-weight: 700; font-family: var(--disp); letter-spacing: -.022em; }
.faq-a { margin-top: .6rem; }
.faq-a p { margin: 0; font-size: .98rem; color: var(--slate); line-height: 1.65; max-width: 66ch; }

.index-list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--navy); }
.index-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; padding-block: 1.35rem; border-bottom: 1px solid var(--hair); text-decoration: none; align-items: baseline; transition: padding-left .16s ease; }
.index-list a:hover { padding-left: .55rem; }
.index-list strong { font-family: var(--disp); font-weight: 700; font-size: 1.14rem; letter-spacing: -.026em; }
.index-list span { display: block; margin-top: .3rem; font-size: .97rem; color: var(--slate); line-height: 1.55; max-width: 70ch; }
.index-list em { font-style: normal; font-size: .88rem; color: var(--dim); }
.index-list i { font-style: normal; color: var(--glacier-deep); font-size: 1.15rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }