/* ================================================================
   Inner pages — banner, prose, About Us, Principal's Message,
   Our Teachers. Loaded after sections.css, which owns the shared
   .reveal, .common-heading em and .faculty-card rules these reuse.
   ================================================================ */

/* ================================================================
   Editor-only placeholder warning
   ================================================================ */
.cbps-placeholder-notice {
    margin: 28px 0 -12px;
    padding: 14px 18px;
    color: #7a4b06;
    background: #fff8e6;
    border: 1px solid #f3d488;
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.6;
}

.cbps-placeholder-notice strong {
    color: #5d3904;
}

/* ================================================================
   Page banner
   ================================================================ */
.page-banner {
    position: relative;
    padding-block: clamp(46px, 6vw, 78px);
    background: var(--color-tint-bg);
    border-bottom: 1px solid var(--color-tint-border);
    overflow: hidden;
}

.page-banner-wash {
    position: absolute;
    top: -260px;
    left: 50%;
    width: min(1000px, 130%);
    height: 560px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(111, 71, 228, 0.13), transparent 68%);
    pointer-events: none;
}

.page-banner-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Usually a <span>, so it needs block behaviour spelling out. */
.page-banner-title {
    display: block;
    /* Wide enough that a long notice title breaks over two lines instead
       of three, still narrow enough to stay a centred block. */
    max-width: 28ch;
    margin: 6px auto 0;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

/* Breadcrumb strip heading — a size down from the display default above,
   so the strip reads as a strip and not as a hero. */
.bread-heading {
    font-size: clamp(20px, 2.5vw, 30px);
}

.page-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.page-crumb a {
    color: var(--color-primary);
    font-weight: 600;
}

.page-crumb a:hover {
    color: var(--color-navy);
    text-decoration: underline;
}

.page-crumb-sep {
    opacity: 0.55;
}

/* ================================================================
   Generic editor prose — Privacy Policy, Terms, any plain page
   ================================================================ */
.page-content {
    max-width: 76ch;
    margin-inline: auto;
    color: var(--color-body);
    font-size: 1rem;
    line-height: 1.85;
}

.page-content > *:first-child {
    margin-top: 0;
}

/* Legal pages — Privacy, Terms — run long, and any ch cap made them feel
   like a narrow ribbon in the middle of a wide page. They run the full
   1320px .container instead. */
.page-content.is-wide {
    max-width: none;
}

.page-updated {
    /* Sits directly above .page-content.is-wide, so it rules off the same
       full-container width. */
    max-width: none;
    margin: 0 0 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.85rem;
}

.page-updated time {
    color: var(--color-navy);
    font-weight: 600;
}

.page-content h2,
.page-content h3,
.page-content h4 {
    margin: 2em 0 0.6em;
    color: var(--color-navy);
    line-height: 1.3;
}

.page-content h2 { font-size: 1.5rem; }
.page-content h3 { font-size: 1.2rem; }
.page-content h4 { font-size: 1.05rem; }

.page-content p {
    margin: 0 0 1.1em;
}

.page-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-content ul,
.page-content ol {
    margin: 0 0 1.3em;
    padding-left: 1.4em;
    list-style: disc;
}

.page-content ol {
    list-style: decimal;
}

.page-content li {
    margin-bottom: 0.5em;
    padding-left: 0.2em;
}

.page-content blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--color-accent);
    color: var(--color-navy);
    font-size: 1.05rem;
}

.page-content table {
    width: 100%;
    margin-bottom: 1.4em;
    border-collapse: collapse;
}

.page-content th,
.page-content td {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.page-content th {
    background: var(--color-tint-bg);
    color: var(--color-navy);
}

/* ================================================================
   ABOUT US — story
   ================================================================ */
.about-story-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(36px, 5vw, 68px);
    align-items: center;
}

.about-story-media {
    position: relative;
}

.about-story-media .image-wrapper {
    position: relative;
    z-index: 1;
    background: var(--color-white);
    box-shadow: 0 24px 46px -20px rgba(26, 58, 110, 0.28);
}

/* Corner brackets, the same accent the home page's about block uses. */
.about-story-media .image-wrapper::before,
.about-story-media .image-wrapper::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 56px;
    height: 56px;
}

.about-story-media .image-wrapper::before {
    top: -14px;
    left: -14px;
    border-top: 6px solid var(--color-accent);
    border-left: 6px solid var(--color-accent);
}

.about-story-media .image-wrapper::after {
    right: -14px;
    bottom: -14px;
    border-right: 6px solid var(--color-accent);
    border-bottom: 6px solid var(--color-accent);
}

.about-story-media img {
    display: block;
    width: 100%;
    height: auto;
}

.about-story-badge {
    position: absolute;
    z-index: 2;
    right: -18px;
    bottom: 28px;
    display: grid;
    gap: 2px;
    padding: 18px 22px;
    background: var(--color-primary);
    border-radius: 16px;
    box-shadow: 0 20px 38px -18px rgba(111, 71, 228, 0.9);
    text-align: center;
}

.about-story-badge strong {
    color: var(--color-white);
    font-family: var(--heading-font-family);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.about-story-badge span {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.75rem;
    line-height: 1.3;
}

.about-story-affiliation {
    margin-bottom: 1.2rem;
    color: #d97706;
    font-weight: 600;
}

.about-story-copy p {
    color: var(--color-body);
    line-height: 1.85;
}

.about-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 30px;
}

.about-facts li {
    padding: 16px 14px;
    background: var(--color-tint-bg);
    border: 1px solid var(--color-tint-border);
    border-radius: 14px;
    text-align: center;
}

.about-facts strong {
    display: block;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.about-facts span {
    display: block;
    margin-top: 5px;
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

/* ---------- Pillars ---------- */
.about-pillars {
    background: var(--color-white);
}

.about-pillars .features-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ================================================================
   ABOUT US — timeline
   ================================================================ */
.about-journey {
    background: var(--color-tint-bg);
}

.timeline {
    position: relative;
    max-width: 780px;
    margin-inline: auto;
    padding-left: 0;
    list-style: none;
    counter-reset: none;
}

/* The spine. Sits under the year bubbles, which paint over it. */
.timeline::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 46px;
    width: 2px;
    background: linear-gradient(var(--color-tint-border), var(--color-primary), var(--color-tint-border));
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 94px 1fr;
    gap: 22px;
    align-items: start;
    padding-bottom: 28px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-year {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    height: 38px;
    color: var(--color-white);
    background: var(--color-primary);
    border: 4px solid var(--color-tint-bg);
    border-radius: 100px;
    font-family: var(--heading-font-family);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.timeline-body {
    padding: 18px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-tint-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 26, 63, 0.04);
}

.timeline-title {
    margin: 0 0 6px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.timeline-desc {
    margin: 0;
    color: var(--color-body);
    font-size: 0.925rem;
    line-height: 1.7;
}

/* ================================================================
   Shared CTA strip — About Us and Our Teachers
   ================================================================ */
.about-cta {
    padding-block: 0 clamp(45px, 6vw, 85px);
}

.about-cta-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    padding: clamp(30px, 4vw, 48px);
    background: linear-gradient(135deg, #171e2e, #2a2350);
    border-radius: 22px;
    box-shadow: 0 26px 52px -30px rgba(17, 26, 63, 0.9);
}

.about-cta-title {
    margin: 0 0 8px;
    color: var(--color-white);
    font-family: var(--heading-font-family);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.about-cta-text {
    max-width: 52ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.95rem;
    line-height: 1.7;
}

.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* .theme-btn.dark is navy on navy here, so it needs its own edge. */
.about-cta-actions .theme-btn.dark {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.34);
}

.about-cta-actions .theme-btn.dark:hover,
.about-cta-actions .theme-btn.dark:focus-visible {
    background: var(--color-white);
    color: var(--color-dark);
    border-color: var(--color-white);
}

.about-cta-actions .theme-btn.dark:hover .icon,
.about-cta-actions .theme-btn.dark:focus-visible .icon {
    filter: brightness(0) saturate(100%) invert(6%) sepia(26%) saturate(2198%) hue-rotate(192deg) brightness(97%) contrast(88%);
}

/* ================================================================
   PRINCIPAL'S MESSAGE
   ================================================================ */
.principal-grid {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: clamp(34px, 4.5vw, 60px);
    align-items: start;
}

.principal-aside {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 20px;
}

/* The Principal is the senior member of the same set of people the faculty
   cards show, so the portrait follows their idiom: the photo fills a 4:5
   frame, the role sits in a chip at the top, and a white plate floats over
   the foot of the picture instead of being a strip stuck underneath it.
   What it does not copy is their 3px violet frame — at this size that read
   as a passport-photo border, so the card carries a hairline and a soft
   shadow and lets the chip carry the brand colour. */
.principal-figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    background: linear-gradient(150deg, #e7e2fb, #d5ccf6);
    border: 1px solid var(--color-tint-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 48px -30px rgba(17, 26, 63, 0.55);
}

/* Pinned rather than sized at 100%, for the reason the faculty cards pin
   theirs: with no in-flow children left, aspect-ratio alone sets the height. */
.principal-photo,
.principal-monogram {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.principal-monogram {
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-family: var(--heading-font-family);
    font-size: 3.4rem;
    font-weight: 800;
    opacity: 0.42;
}

/* Keeps the plate legible over a light photo. */
.principal-figure::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    background: linear-gradient(transparent, rgba(9, 17, 36, 0.42));
    pointer-events: none;
}

.principal-badge {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 14px;
    padding: 7px 13px;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(85, 53, 212, 0.5);
}

.principal-plate {
    position: absolute;
    z-index: 3;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 14px 30px -14px rgba(18, 32, 63, 0.3);
}

.principal-name {
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Qualification and tenure stay blank until the school confirms them, so the
   plate is usually the name on its own — these lines only appear once the
   details box is filled in. */
.principal-qual {
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.principal-contact {
    padding: 22px;
    background: var(--color-tint-bg);
    border: 1px solid var(--color-tint-border);
    border-radius: 16px;
}

.principal-contact h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.principal-contact p {
    margin: 0 0 16px;
    color: var(--color-muted);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* ---------- The letter ---------- */
.principal-message {
    position: relative;
    padding: clamp(22px, 2.4vw, 34px);
    background: var(--color-white);
    border: 1px solid var(--color-tint-border);
    border-radius: 20px;
    box-shadow: 0 20px 44px -30px rgba(17, 26, 63, 0.4);
}

.principal-quote-mark {
    position: absolute;
    top: 6px;
    right: 26px;
    color: var(--color-primary);
    font-family: var(--heading-font-family);
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
}

.principal-message p,
.principal-message .page-content p {
    color: var(--color-body);
    font-size: 1rem;
    line-height: 1.88;
}

/* The letter comes from the editor, so a quote block there has to read as
   the pull-quote the placeholder version renders by hand. */
.principal-message .page-content {
    max-width: none;
    margin-inline: 0;
    font-size: inherit;
}

.principal-message .page-content > *:first-child {
    color: var(--color-navy);
    font-size: 1.05rem;
    font-weight: 600;
}

.principal-message .page-content blockquote {
    margin: 18px 0;
    padding: 10px 16px;
    color: var(--color-navy);
    background: var(--color-tint-bg);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 12px 12px 0;
    font-family: var(--heading-font-family);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.principal-message .page-content blockquote p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* The letter's quote was typed in the editor as a code block inside a quote,
   so it arrives as <pre><code>: a monospace face and a second box's worth of
   padding inside the box the quote already draws. Both are flattened here so
   it reads as the pull-quote it was meant to be. Better fixed in the editor
   by making it a plain quote block. */
.principal-message .page-content blockquote pre,
.principal-message .page-content blockquote code {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    white-space: normal;
}

.principal-lede {
    color: var(--color-navy) !important;
    font-size: 1.05rem !important;
    font-weight: 600;
}

.principal-pull {
    margin: 18px 0;
    padding: 10px 16px;
    color: var(--color-navy);
    background: var(--color-tint-bg);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 12px 12px 0;
    font-family: var(--heading-font-family);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.principal-sign {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px dashed var(--color-tint-border);
}

.principal-sign-name {
    display: block;
    color: var(--color-navy);
    font-family: var(--cursive-font-family);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.principal-sign-role {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* ---------- Commitments ---------- */
.principal-commitments {
    background: var(--color-tint-bg);
}

.features-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.commitment-index {
    display: block;
    margin-bottom: 14px;
    color: var(--hue, var(--color-primary));
    font-family: var(--heading-font-family);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    opacity: 0.45;
}

/* ================================================================
   OUR TEACHERS
   ================================================================ */
.teachers-leadership-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    margin-inline: auto;
}

.teachers-count {
    margin: 32px 0 0;
    color: var(--color-muted);
    font-size: 0.875rem;
    text-align: center;
}

.teachers-count strong {
    color: var(--color-navy);
}

.teachers-dept {
    position: relative;
    padding-block: clamp(38px, 4.5vw, 62px);
}

.teachers-dept.is-tinted {
    background: var(--color-tint-bg);
}

.teachers-dept-head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-tint-border);
}

.teachers-dept-tag {
    display: block;
    margin-bottom: 4px;
    color: var(--hue, var(--color-primary));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.teachers-dept-name {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.teachers-dept-note {
    max-width: 46ch;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.teachers-dept-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* The department hue drives the frame and subject chip, so each department
   reads as its own set without any per-card markup. */
.teachers-dept .faculty-card {
    border-color: var(--hue, var(--color-primary));
}

.teachers-dept .faculty-subject {
    background: var(--hue, var(--color-primary));
    box-shadow: none;
}

.teachers-dept .faculty-monogram,
.teachers-dept .faculty-role {
    color: var(--hue, var(--color-primary));
}

/* ================================================================
   CONTACT — enquiry form, info tiles, map
   ================================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 1.42fr 1fr;
    gap: clamp(32px, 3.5vw, 46px);
    align-items: start;
}

/* ---------- Form heading ---------- */
.contact-form-head {
    margin-bottom: 32px;
    padding-left: 20px;
    border-left: 4px solid var(--color-primary);
}

.contact-form-head h2 {
    max-width: 22ch;
    margin: 0 0 8px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.contact-form-head p {
    max-width: 52ch;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* ---------- Fields ---------- */
.contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 22px;
}

.field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.field.is-wide {
    grid-column: 1 / -1;
}

.field label {
    margin-bottom: 9px;
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.field .req {
    margin-left: 2px;
    color: #d02b4e;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    color: var(--color-navy);
    font-family: inherit;
    font-size: 0.9375rem;
    background: #f1f3f7;
    border: 1.5px solid transparent;
    border-radius: 10px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.field textarea {
    min-height: 158px;
    line-height: 1.6;
    resize: vertical;
}

/* The arrow is a data URI so the select needs no extra request and no
   wrapper element around it. */
.field select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7590' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    cursor: pointer;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #9aa3b8;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    background: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(111, 71, 228, 0.14);
}

.field-msg {
    display: none;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    color: #d02b4e;
    font-size: 0.75rem;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    background: #fef4f6;
    border-color: #d02b4e;
}

.field.has-error .field-msg {
    display: flex;
}

/* Honeypot. Off-screen rather than display:none — some bots skip anything
   that is not rendered, and this one should look real to them. */
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Submit ---------- */
.contact-submit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin-top: 26px;
}

/* The fill, the pill, the arrow chip and the hover flip all come from
   .theme-btn/.theme-btn in style.css. This class is a layout hook only — it used
   to restate the whole button, which is how it drifted out of step with
   every other button in the theme. */
.contact-submit {
    flex: none;
}

.contact-privacy {
    color: var(--color-muted);
    font-size: 0.8125rem;
}

/* ---------- Result banner ---------- */
.contact-status {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.55;
}

.contact-status:empty {
    display: none;
}

.contact-status svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.contact-status.is-ok {
    color: #0b6b45;
    background: #e9f8f1;
    border: 1px solid #b7e6d0;
}

.contact-status.is-err {
    color: #a01f3c;
    background: #fdeff2;
    border: 1px solid #f3c3ce;
}

.contact-status:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* The live region under the button reads as feedback, not a page banner. */
#enquiry-live {
    margin: 18px 0 0;
}

/* ================================================================
   Contact — info panel
   ================================================================ */
.contact-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--color-bg-soft);
    border-radius: 20px;
}

.contact-tile {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    color: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

a.contact-tile:hover,
a.contact-tile:focus-visible {
    transform: translateY(-3px);
    border-color: #d8d2f3;
    box-shadow: 0 14px 30px -18px rgba(18, 32, 63, 0.4);
}

.contact-tile-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    /* Gold on white is the one place the accent carries an icon, so it needs
       a dark glyph rather than the usual white. */
    color: #3a2e05;
    background: var(--color-accent);
    border-radius: 11px;
    transition: background 0.3s ease;
}

a.contact-tile:hover .contact-tile-ico,
a.contact-tile:focus-visible .contact-tile-ico {
    background: #d9a91c;
}

.contact-tile-ico svg {
    width: 22px;
    height: 22px;
}

.contact-tile-body {
    min-width: 0;
}

.contact-tile h3 {
    margin: 2px 0 6px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.contact-tile p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
    line-height: 1.55;
    /* Long email addresses must not push the tile wider than the panel. */
    overflow-wrap: anywhere;
}

.contact-tile p b {
    color: var(--color-navy);
    font-weight: 600;
}

.contact-tile-hint {
    display: block;
    margin-top: 7px;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.contact-tile.is-static {
    cursor: default;
}

.contact-hours {
    margin: 0;
    font-size: 0.875rem;
}

.contact-hours > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    justify-content: space-between;
    padding: 4px 0;
}

.contact-hours > div + div {
    border-top: 1px dashed var(--color-border);
}

.contact-hours dt {
    color: var(--color-muted);
}

.contact-hours dd {
    margin: 0;
    color: var(--color-navy);
    font-weight: 600;
}

/* ---------- What happens next ---------- */
.contact-steps {
    padding: 20px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

.contact-steps h3 {
    margin: 0 0 14px;
    color: var(--color-navy);
    font-size: 0.95rem;
}

.contact-steps ol {
    counter-reset: cbps-step;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-steps li {
    position: relative;
    counter-increment: cbps-step;
    padding: 0 0 14px 38px;
    color: var(--color-body);
    font-size: 0.85rem;
    line-height: 1.6;
}

.contact-steps li:last-child {
    padding-bottom: 0;
}

.contact-steps li::before {
    content: counter(cbps-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--color-primary);
    background: var(--color-tint-chip);
    border-radius: 50%;
    font-family: var(--heading-font-family);
    font-size: 0.78rem;
    font-weight: 700;
}

/* The rail joining the step numbers. */
.contact-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    bottom: 4px;
    left: 12.5px;
    width: 1px;
    background: var(--color-tint-border);
}

/* ---------- Social ---------- */
.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 2px;
}

.contact-social > span {
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.contact-social-links {
    display: flex;
    gap: 8px;
}

.contact-social-links a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* Source icons are flat black; on a white chip they need to be brand ink. */
.contact-social-links .icon {
    filter: brightness(0) saturate(100%) invert(6%) sepia(26%) saturate(2198%) hue-rotate(192deg) brightness(97%) contrast(88%);
    transition: filter 0.3s ease;
}

.contact-social-links a:hover,
.contact-social-links a:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.contact-social-links a:hover .icon,
.contact-social-links a:focus-visible .icon {
    filter: brightness(0) saturate(100%) invert(100%);
}

/* ================================================================
   Contact — map
   ================================================================ */
.contact-map {
    position: relative;
    height: clamp(300px, 42vw, 460px);
    margin-top: clamp(40px, 5vw, 76px);
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(0.92);
}

/* Sits over the map, aligned to the container's right edge rather than the
   viewport's, so it lines up with the page above it at every width. Right
   and not left because the Google place embed draws its own info card in
   the top-left corner, and the two sat on top of each other. */
.contact-map-card {
    position: absolute;
    top: 24px;
    right: max(24px, calc((100% - 1320px) / 2 + 15px));
    z-index: 1;
    max-width: 300px;
    padding: 18px 22px;
    background: var(--color-white);
    border-radius: 14px;
    box-shadow: 0 18px 40px -18px rgba(18, 32, 63, 0.45);
}

.contact-map-card h3 {
    margin: 0 0 6px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1rem;
    font-weight: 700;
}

.contact-map-card p {
    margin: 0 0 14px;
    color: var(--color-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.contact-map-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}

.contact-map-card a svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.contact-map-card a:hover svg,
.contact-map-card a:focus-visible svg {
    transform: translate(3px, -3px);
}

/* ================================================================
   Utility — visible to screen readers only
   ================================================================ */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ================================================================
   ADMISSION — process steps
   ================================================================ */
.admission-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.admission-step {
    position: relative;
    padding: 26px 22px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(17, 26, 63, 0.04);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.6s ease;
}

.admission-step:hover {
    transform: translateY(-5px);
    border-color: var(--color-tint-border);
    box-shadow: 0 20px 40px -22px rgba(17, 26, 63, 0.32);
}

.admission-step.reveal:not(.is-in):hover {
    transform: translateY(18px);
}

/* The connector between cards. Suppressed on the last one and whenever the
   grid wraps, so it never points at empty space. */
.admission-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 46px;
    right: -19px;
    width: 18px;
    height: 2px;
    background: var(--color-tint-border);
}

.admission-step-num {
    display: block;
    margin-bottom: 14px;
    color: var(--color-primary);
    font-family: var(--heading-font-family);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    opacity: 0.4;
}

.admission-step-title {
    margin: 0 0 8px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.admission-step-desc {
    margin: 0;
    color: var(--color-body);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* ---------- Documents + apply ---------- */
.admission-split.is-tinted {
    background: var(--color-tint-bg);
}

.admission-split-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(30px, 4vw, 56px);
    align-items: start;
}

.admission-doc-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admission-doc-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    color: var(--color-body);
    font-size: 0.925rem;
    line-height: 1.55;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.admission-doc-list svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--color-success);
}

.admission-apply {
    position: sticky;
    top: 100px;
    padding: 28px 26px;
    background: var(--color-white);
    border: 1px solid var(--color-tint-border);
    border-radius: 20px;
    box-shadow: 0 20px 44px -30px rgba(17, 26, 63, 0.4);
}

.admission-apply h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
}

.admission-apply > p {
    margin: 0 0 20px;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.admission-apply-note {
    margin: 12px 0 0 !important;
    color: var(--color-muted);
    font-size: 0.75rem;
}

.admission-apply-contact {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed var(--color-tint-border);
}

.admission-apply-contact span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.admission-apply-contact a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--color-primary);
    font-family: var(--heading-font-family);
    font-size: 1.05rem;
    font-weight: 700;
}

.admission-apply-contact svg {
    width: 17px;
    height: 17px;
}

/* ================================================================
   FAQ accordion
   ================================================================ */
/* Photo left, questions right. The accordion used to sit centred and alone,
   which left the section reading as a long unbroken column of grey bars. */
.faq-layout {
    display: grid;
    grid-template-columns: 0.82fr 1fr;
    gap: clamp(34px, 5vw, 70px);
    align-items: center;
}

.faq-media {
    position: relative;
    margin: 0;
}

.faq-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 26px;
}

/* Outline offset behind the photo, peeking out top-right and bottom-left. */
.faq-media::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -18px -18px 18px 18px;
    border: 1.5px solid var(--color-primary);
    border-radius: 30px;
    opacity: 0.45;
}

.faq-badge {
    position: absolute;
    right: -22px;
    bottom: 42px;
    padding: 16px 24px;
    background: var(--color-accent);
    border-radius: 14px;
    box-shadow: 0 18px 36px -18px rgba(224, 175, 30, 0.9);
}

.faq-badge strong {
    display: block;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.faq-badge span {
    display: block;
    margin-top: 4px;
    color: #6b551f;
    font-size: 0.8rem;
    font-weight: 600;
}

.faq-panel .heading-wrap {
    margin-bottom: 26px;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item[open] {
    border-color: var(--color-tint-border);
    box-shadow: 0 14px 32px -22px rgba(17, 26, 63, 0.35);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
}

/* Kill the native disclosure triangle in both engines — .faq-mark replaces it. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

.faq-item summary:hover {
    color: var(--color-primary);
}

.faq-item summary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

.faq-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--color-primary);
    background: var(--color-tint-chip);
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.3s ease, color 0.3s ease;
}

.faq-mark svg {
    width: 15px;
    height: 15px;
}

/* Plus rotates into a minus rather than swapping icons. */
.faq-item[open] .faq-mark {
    color: var(--color-white);
    background: var(--color-primary);
    transform: rotate(135deg);
}

.faq-item > p {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--color-body);
    font-size: 0.925rem;
    line-height: 1.75;
}

/* ================================================================
   POST LIST — blog, archives, search
   ================================================================ */
.post-list-count {
    margin: 0 0 26px;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.post-list-count strong {
    color: var(--color-navy);
}

/* .news-read-more used to be re-styled here. It now belongs entirely to the
   card set in sections.css — this file loads after it, so a stray rule here
   silently overrode the card's layout. */

/* ---------- Pagination ---------- */
.pagination {
    margin-top: 46px;
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    color: var(--color-body);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.pagination .page-numbers.current {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
}

.pagination .prev,
.pagination .next {
    gap: 6px;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .pagination .prev span,
    .pagination .next span {
        display: none;
    }
}

/* ---------- Empty state ---------- */
.post-list-empty {
    max-width: 560px;
    margin-inline: auto;
    padding: 48px 28px;
    text-align: center;
}

.post-list-empty-ico {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 22px;
    color: var(--color-primary);
    background: var(--color-tint-chip);
    border-radius: 50%;
}

.post-list-empty-ico svg {
    width: 30px;
    height: 30px;
}

.post-list-empty h2 {
    margin: 0 0 10px;
    font-size: 1.35rem;
}

.post-list-empty > p {
    margin: 0 0 24px;
    color: var(--color-muted);
    line-height: 1.7;
}

.post-list-search {
    display: flex;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto 20px;
}

.post-list-search input,
.error-404-search input {
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    color: var(--color-navy);
    font-family: inherit;
    font-size: 0.9375rem;
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.post-list-search input:focus,
.error-404-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(111, 71, 228, 0.14);
}

/* The search submits used to restate the whole pill here — fill, radius,
   padding, hover. They carry .theme-btn/.theme-btn now, so their appearance comes
   from the one place every other button in the theme gets it. The inputs
   beside them keep their own rules: a text field is not a button. */
.post-list-search .theme-btn,
.error-404-search .theme-btn {
    flex: none;
}

.post-list-empty-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0;
    color: var(--color-border);
    font-size: 0.875rem;
}

.post-list-empty-links a {
    color: var(--color-primary);
    font-weight: 600;
}

.post-list-empty-links a:hover {
    text-decoration: underline;
}

/* ================================================================
   SINGLE POST
   ================================================================ */
.single-post-shell {
    max-width: 820px;
}

.single-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 24px;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.single-post-meta a {
    color: var(--color-primary);
    font-weight: 600;
}

.single-post-image {
    margin: 0 0 30px;
}

.single-post-image img {
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.single-post-image figcaption {
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.single-post-shell .page-content {
    max-width: none;
    margin-inline: 0;
}

.single-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 0;
}

.single-post-tags a {
    padding: 6px 14px;
    color: var(--color-primary);
    background: var(--color-tint-chip);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
}

.single-post-tags a:hover {
    color: var(--color-white);
    background: var(--color-primary);
}

.single-post-foot {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--color-border);
}

.page-links {
    margin-top: 22px;
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* ---------- Prev / next ---------- */
.post-nav {
    padding-block: 0 clamp(45px, 6vw, 85px);
}

.post-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 820px;
}

.post-nav-card {
    display: block;
    padding: 20px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.post-nav-card:hover,
.post-nav-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--color-tint-border);
    box-shadow: 0 18px 36px -22px rgba(17, 26, 63, 0.35);
}

/* A lone "next" keeps to the right so it never reads as "previous". */
.post-nav-card.is-next {
    grid-column: 2;
    text-align: right;
}

.post-nav-dir {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post-nav-card strong {
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* ================================================================
   404
   ================================================================ */
.error-404-inner {
    max-width: 720px;
    text-align: center;
}

.error-404-code {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--heading-font-family);
    font-size: clamp(5rem, 3rem + 12vw, 10rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.06em;
    opacity: 0.13;
}

.error-404-title {
    margin: -0.35em 0 14px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.error-404-text {
    max-width: 54ch;
    margin: 0 auto 28px;
    color: var(--color-muted);
    line-height: 1.75;
}

.error-404-search {
    display: flex;
    gap: 8px;
    max-width: 440px;
    margin: 0 auto 38px;
}

.error-404-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    text-align: left;
}

.error-404-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.error-404-card:hover,
.error-404-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--color-tint-border);
    box-shadow: 0 18px 36px -22px rgba(17, 26, 63, 0.35);
}

.error-404-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--color-primary);
    background: var(--color-tint-chip);
    border-radius: 12px;
}

.error-404-ico svg {
    width: 21px;
    height: 21px;
}

.error-404-card strong {
    display: block;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.error-404-card strong + span {
    display: block;
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.error-404-arrow {
    margin-left: auto;
    color: var(--color-primary);
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.error-404-card:hover .error-404-arrow {
    transform: translateX(3px);
}

.error-404-help {
    margin: 30px 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.error-404-help a {
    color: var(--color-primary);
    font-weight: 700;
}

/* ================================================================
   SCHOOL AT A GLANCE
   ================================================================ */
.glance-figure-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.glance-figure {
    padding: 26px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(17, 26, 63, 0.04);
    text-align: center;
}

.glance-figure-ico {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    background: var(--color-tint-chip);
    border-radius: 50%;
}

.glance-figure-ico .icon {
    width: 26px;
    height: 26px;
    /* Flat black source art recoloured to brand violet. */
    filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(2618%) hue-rotate(248deg) brightness(93%) contrast(92%);
}

.glance-figure strong {
    display: block;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.95rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.glance-figure > span {
    display: block;
    margin-top: 7px;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.35;
}

/* ---------- The record ---------- */
.glance-facts.is-tinted {
    background: var(--color-tint-bg);
}

.glance-tables {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.glance-table {
    padding: 26px 26px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-tint-border);
    border-radius: 18px;
}

.glance-table h3 {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-accent);
    color: var(--color-navy);
    font-size: 1.05rem;
    /* The rule under the heading is only as wide as the word. */
    display: inline-block;
}

.glance-table dl {
    margin: 0;
}

/* Label left, value right — the shape of a record, not a paragraph. */
.glance-table dl > div {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 6px 18px;
    padding: 11px 0;
}

.glance-table dl > div + div {
    border-top: 1px dashed var(--color-border);
}

.glance-table dt {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.glance-table dd {
    margin: 0;
    color: var(--color-navy);
    font-size: 0.925rem;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.glance-table dd a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.glance-facilities .features-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ================================================================
   PROSPECTUS
   ================================================================ */
.prospectus-grid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
}

.prospectus-download {
    position: sticky;
    top: 100px;
    padding: 32px 28px;
    background: var(--color-white);
    border: 1px solid var(--color-tint-border);
    border-radius: 20px;
    box-shadow: 0 20px 44px -30px rgba(17, 26, 63, 0.4);
    text-align: center;
}

.prospectus-file-ico {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    color: var(--color-primary);
    background: var(--color-tint-chip);
    border-radius: 18px;
}

/* Amber, not violet — a waiting state should not look like a ready one. */
.prospectus-file-ico.is-waiting {
    color: #a07a00;
    background: #fdf4dd;
}

.prospectus-file-ico svg {
    width: 30px;
    height: 30px;
}

.prospectus-download h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.prospectus-file-meta {
    margin: 0 0 20px;
    color: var(--color-muted);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.prospectus-file-note {
    margin: 18px 0 0;
    color: var(--color-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.prospectus-file-note a {
    color: var(--color-primary);
    font-weight: 600;
}

.prospectus-download .cbps-placeholder-notice {
    margin: 20px 0 0;
    text-align: left;
}

/* ---------- Contents list ---------- */
.prospectus-intro {
    max-width: none;
    margin: 0 0 26px;
}

.prospectus-contents {
    counter-reset: cbps-toc;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prospectus-contents li {
    counter-increment: cbps-toc;
    position: relative;
    padding: 18px 20px 18px 58px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.6s ease;
}

.prospectus-contents li:hover {
    transform: translateY(-3px);
    border-color: var(--color-tint-border);
}

.prospectus-contents li.reveal:not(.is-in):hover {
    transform: translateY(18px);
}

.prospectus-contents li::before {
    content: counter(cbps-toc, decimal-leading-zero);
    position: absolute;
    top: 18px;
    left: 20px;
    color: var(--color-primary);
    font-family: var(--heading-font-family);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 0.45;
}

.prospectus-contents h3 {
    margin: 0 0 5px;
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.prospectus-contents p {
    margin: 0;
    color: var(--color-body);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ---------- Quick links ---------- */
.prospectus-links.is-tinted {
    background: var(--color-tint-bg);
}

.prospectus-link-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.prospectus-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.6s ease;
}

.prospectus-link:hover,
.prospectus-link:focus-visible {
    transform: translateY(-3px);
    border-color: var(--color-tint-border);
    box-shadow: 0 18px 36px -22px rgba(17, 26, 63, 0.35);
}

.prospectus-link.reveal:not(.is-in):hover {
    transform: translateY(18px);
}

.prospectus-link-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: var(--color-tint-chip);
    border-radius: 13px;
}

.prospectus-link-ico .icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(2618%) hue-rotate(248deg) brightness(93%) contrast(92%);
}

.prospectus-link strong {
    display: block;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 0.975rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.prospectus-link strong + span {
    display: block;
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.prospectus-link-arrow {
    margin-left: auto;
    color: var(--color-primary);
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.prospectus-link:hover .prospectus-link-arrow {
    transform: translateX(3px);
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1199.98px) {
    .teachers-dept-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Five across stops being readable well before the container narrows. */
    .admission-steps {
        grid-template-columns: repeat(3, 1fr);
    }
    .admission-step::after {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .about-story-grid,
    .principal-grid {
        grid-template-columns: 1fr;
    }
    .about-story-badge {
        right: 18px;
    }
    .about-pillars .features-grid,
    .features-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .principal-aside {
        position: static;
        grid-template-columns: 260px 1fr;
        align-items: start;
    }
    .teachers-leadership-grid,
    .teachers-dept-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Form over panel — the form is what the page is for. */
    .contact-grid {
        grid-template-columns: 1fr;
    }
    /* Two across so four tiles do not become a long scroll on a tablet. */
    .contact-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .contact-steps,
    .contact-social {
        grid-column: 1 / -1;
    }
    .admission-split-grid {
        grid-template-columns: 1fr;
    }
    /* Photo above the questions, and capped — a 4:5 portrait at full tablet
       width would push the accordion off the first screen entirely. */
    .faq-layout {
        grid-template-columns: 1fr;
    }
    .faq-media {
        max-width: 420px;
        margin-inline: auto;
    }
    .faq-badge {
        right: 12px;
    }
    .admission-apply {
        position: static;
    }
    .error-404-links {
        grid-template-columns: 1fr;
    }
    .glance-figure-grid,
    .glance-facilities .features-grid,
    .prospectus-link-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .glance-tables {
        grid-template-columns: 1fr;
    }
    /* Download card above the contents — it is what the page is for. */
    .prospectus-grid {
        grid-template-columns: 1fr;
    }
    .prospectus-download {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .about-facts {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .principal-aside {
        grid-template-columns: 1fr;
    }
    .timeline::before {
        left: 18px;
    }
    .timeline-item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-left: 44px;
    }
    .timeline-year {
        justify-self: start;
        width: 84px;
        margin-left: -44px;
    }
    .admission-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .post-nav-grid {
        grid-template-columns: 1fr;
    }
    /* Stacked, "next" belongs under "previous" and reads left like everything
       else — the right-alignment only made sense side by side. */
    .post-nav-card.is-next {
        grid-column: 1;
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .about-pillars .features-grid,
    .features-grid-3,
    .teachers-leadership-grid {
        grid-template-columns: 1fr;
    }
    .teachers-dept-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .about-story-badge {
        right: 12px;
        bottom: 12px;
        padding: 14px 16px;
    }
    .principal-quote-mark {
        font-size: 5rem;
    }
    .glance-figure-grid,
    .glance-facilities .features-grid,
    .prospectus-link-grid,
    .prospectus-contents {
        grid-template-columns: 1fr;
    }
    .glance-table dl > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .contact-fields {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .contact-panel {
        grid-template-columns: 1fr;
        padding: 14px;
    }
    .contact-submit,
    .contact-submit-row {
        width: 100%;
    }
    /* Label left, arrow chip hard right — the same full-width treatment the
       admission CTA buttons get on a phone. */
    .contact-submit {
        justify-content: space-between;
    }
    /* Full-bleed above the map instead of floating on it — at this width a
       floating card covers most of the map it is pointing at. */
    .contact-map {
        height: auto;
    }
    .contact-map-card {
        position: static;
        max-width: none;
        border-radius: 0;
        border-bottom: 1px solid var(--color-border);
        box-shadow: none;
    }
    .contact-map iframe {
        height: clamp(260px, 60vw, 340px);
    }
    .admission-steps {
        grid-template-columns: 1fr;
    }
    .post-list-search,
    .error-404-search {
        flex-direction: column;
    }
    /* Label left, arrow chip hard right — the same full-width treatment every
       other button gets on a phone. */
    .post-list-search .theme-btn,
    .error-404-search .theme-btn {
        justify-content: space-between;
    }
}

@media (max-width: 400px) {
    .teachers-dept-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   BLOG LAYOUT — listing, archives and single post
   ================================================================
   One grid shared by the blog, the category and tag archives, and the
   single post: article left, sidebar right. Adding .is-solo collapses it
   to a single centred column — that is what search results and school
   notices use, since neither wants a list of blog categories beside it.
   ================================================================ */
/* No align-items: start here. The sidebar has to stretch to the article's
   height, or its last widget has no room to stick in. */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 40px;
}

.blog-layout.is-solo {
    grid-template-columns: minmax(0, 1fr);
}

.blog-main {
    min-width: 0;
}

/* The card grid loses a column to the sidebar. Three cards in the narrower
   track would leave the titles about two words wide. Archives that run
   without an aside (.is-solo — the news archive, a single news post) keep
   the full three from sections.css, which is what the cards' 3-step reveal
   stagger already assumes. */
.blog-layout:not(.is-solo) .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-layout .single-post-shell {
    max-width: none;
}

.blog-layout.is-solo .single-post-shell {
    max-width: 820px;
    margin-inline: auto;
}

/* Prev/next moved inside the article column, so it drops the section
   padding it carried back when it sat full width underneath. */
.blog-main .post-nav {
    padding-block: 0;
    margin-top: 40px;
}

.blog-main .post-nav-grid {
    max-width: none;
}

/* ---------- Sidebar shell ---------- */
.blog-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Only the last widget sticks, not the whole column — the three together are
   taller than most windows, and pinning the lot would park the bottom one
   permanently off-screen.
   A sticky element can only travel inside its own parent, so this works only
   because .blog-aside stretches to the article's height (see .blog-layout,
   which deliberately does not set align-items: start). 100px clears the 64px
   sticky navbar, matching the prospectus sidebar. */
@media (min-width: 992px) {
    .blog-widget.is-sticky {
        position: sticky;
        top: 100px;
    }
}

.blog-widget {
    padding: 26px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
}

.blog-widget-title {
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1.25rem;
    font-weight: 700;
}

/* ---------- Latest posts ---------- */
.aside-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aside-post {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--color-border);
}

.aside-post:first-child {
    padding-top: 0;
    border-top: none;
}

.aside-post:last-child {
    padding-bottom: 0;
}

.aside-post-thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 68px;
    height: 68px;
    overflow: hidden;
    background: var(--color-tint-bg);
    border-radius: 12px;
    color: var(--color-muted);
}

.aside-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aside-post-thumb svg {
    width: 24px;
    height: 24px;
}

.aside-post-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.aside-post-title {
    margin: 0;
    font-family: var(--heading-font-family);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.aside-post-title a {
    color: var(--color-navy);
}

.aside-post-title a:hover,
.aside-post-title a:focus-visible {
    color: var(--color-primary);
}

.aside-post-date {
    color: var(--color-muted);
    font-size: 0.78rem;
}

/* ---------- Categories ---------- */
.aside-cats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aside-cats li {
    border-top: 1px solid var(--color-border);
}

.aside-cats li:first-child {
    border-top: none;
}

.aside-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    color: var(--color-body);
    font-weight: 500;
}

.aside-cats li:first-child a {
    padding-top: 0;
}

.aside-cats li:last-child a {
    padding-bottom: 0;
}

.aside-cats a:hover,
.aside-cats a:focus-visible {
    color: var(--color-primary);
}

.aside-cats .is-current > a {
    color: var(--color-primary);
    font-weight: 700;
}

.aside-cat-count {
    flex: none;
    min-width: 34px;
    padding: 3px 10px;
    background: var(--color-tint-chip);
    border-radius: 100px;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

/* ---------- Contact CTA ---------- */
.aside-cta {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: rgba(255, 255, 255, 0.78);
}

.aside-cta .blog-widget-title {
    border-bottom-color: var(--color-slate);
    color: var(--color-white);
}

.aside-cta p {
    margin: 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.65;
}

/* Button and phone number share one row. Both are trimmed down to make that
   fit inside the card — at full .theme-btn size the pair overflows 390px and the
   number drops to its own line, which is the thing this avoids. They still
   wrap rather than overflow if the column is ever narrower. */
.aside-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.aside-cta-actions .theme-btn {
    gap: 10px;
    padding-left: 20px;
    font-size: 14px;
}

.aside-cta-actions .btn-icon {
    width: 32px;
    height: 32px;
}

.aside-cta-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.aside-cta-call:hover,
.aside-cta-call:focus-visible {
    color: var(--color-accent);
}

.aside-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--color-slate);
    list-style: none;
}

.aside-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background 0.3s ease;
}

.aside-social a:hover,
.aside-social a:focus-visible {
    background: var(--color-primary);
}

/* Both icon sets are black SVGs sitting on a dark card — same filter the
   buttons use to burn them to white. */
.aside-cta-call .icon,
.aside-social .icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(21%) hue-rotate(19deg) brightness(103%) contrast(100%);
}

/* ---------- Anything the school adds to the registered widget area ---------- */
.blog-aside .widget {
    padding: 26px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
}

.blog-aside .widget-title {
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1.25rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .blog-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 30px;
    }
}

@media (max-width: 991.98px) {
    .blog-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

/* Matches the .news-grid breakpoint in sections.css — without this the
   two-column override above would keep two cards per row on a phone. */
@media (max-width: 619.98px) {
    .blog-layout:not(.is-solo) .news-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .blog-widget,
    .blog-aside .widget {
        padding: 22px 18px;
    }

    .aside-post-thumb {
        width: 58px;
        height: 58px;
    }
}

/* ---------- Search in the page banner ----------
   Moved here from the sidebar: on a blog page the search box is the first
   thing a visitor reaches for, and the banner is where their eye already
   is. Centred to match the title and breadcrumb above it. */
.page-banner-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 560px;
    margin: 26px auto 0;
}

.page-banner-search input[type="search"] {
    flex: 1 1 240px;
    min-width: 0;
    padding: 13px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-tint-border);
    border-radius: 50px;
    color: var(--color-dark);
    font-family: var(--body-font-family);
    font-size: 0.925rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.page-banner-search input[type="search"]::placeholder {
    color: var(--color-muted);
}

.page-banner-search input[type="search"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(111, 71, 228, 0.14);
}

.page-banner-search .theme-btn {
    flex: none;
}

@media (max-width: 479.98px) {
    .page-banner-search {
        gap: 12px;
    }

    .page-banner-search input[type="search"] {
        flex-basis: 100%;
    }
}

/* ---------- Blog post header ----------
   Blog posts drop the banner strip and open with their own header instead:
   breadcrumb, featured image, title, then a single row of meta. School
   notices keep the banner, so none of this applies to them. */
.post-crumb {
    margin: 0 0 22px;
}

.post-crumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.post-crumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-crumb li:not(:first-child)::before {
    content: "\203A";
    opacity: 0.55;
}

.post-crumb a {
    color: var(--color-muted);
}

.post-crumb a:hover,
.post-crumb a:focus-visible {
    color: var(--color-primary);
}

.post-crumb [aria-current="page"] {
    color: var(--color-dark);
    font-weight: 600;
}

/* Tops out around 36px on a wide screen — 2.4rem read as 41px, which was
   heavier than the article body needs. */
.single-post-title {
    margin: 0 0 18px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1.22;
    text-wrap: balance;
}

/* Published on / Author / read time / last updated — one row, dot-separated.
   It is a <ul> now, so the flex rule set earlier needs the list defaults
   cleared and a gap wide enough for the dots to sit in. */
.single-post-meta {
    gap: 8px 14px;
    margin-bottom: 30px;
    padding: 0;
    list-style: none;
}

.single-post-meta li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.single-post-meta li:not(:first-child)::before {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    margin-right: 8px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.45;
}

.single-post-meta strong {
    color: var(--color-dark);
    font-weight: 600;
}

.single-post-meta .single-post-cats a {
    color: var(--color-primary);
    font-weight: 600;
}

/* Sits between the fact strip and the article body. */
.single-post .single-post-image {
    margin: 0 0 30px;
}

/* The breadcrumb is a thin line, so a sidebar top-aligned with it appeared to
   float. Drop it by the breadcrumb's height and its first card lines up with
   the H1 instead. Single posts only — listings head their column with the
   banner, not a breadcrumb. */
@media (min-width: 992px) {
    .single-post.has-own-header .blog-aside {
        margin-top: 41px;
    }
}

@media (max-width: 575.98px) {
    /* Dots between four items wrap badly on a narrow screen — stack the row
       and drop them rather than leave orphaned bullets at line starts. */
    .single-post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .single-post-meta li:not(:first-child)::before {
        display: none;
    }
}

/* A blog post has no banner strip above it, so the section's full top
   padding leaves the breadcrumb floating in white. News posts still open
   with the banner and keep the standard spacing. */
.single-post.has-own-header {
    padding-top: clamp(22px, 2.6vw, 36px);
}

/* Featured images come off phones at whatever height they were shot, and a
   portrait one pushed the title below the fold. Cap the box and crop to it —
   width stays 100%, so the mismatch is what object-fit resolves. */
.single-post-image img {
    width: 100%;
    height: auto;
    max-height: clamp(220px, 34vw, 420px);
    object-fit: cover;
    object-position: center;
}

/* ---------- Post fact strip ----------
   Author / published / category / read time, each an icon badge with a
   label above its value. No card, no rules — the tinted icon circles carry
   enough separation on their own.

   Items size to their own content and refuse to shrink, so a long category
   never breaks mid-word; if the row runs out of room the whole item drops
   to the next line intact. */
.post-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.post-fact {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
}

.post-fact-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    background: var(--color-tint-chip);
    border-radius: 50%;
    color: var(--color-primary);
}

.post-fact-ico svg {
    width: 16px;
    height: 16px;
}

.post-fact-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* max() floors both sizes: the root font-size clamps down to 13px on a
   phone, and a plain rem here would take the label under 10px. */
.post-fact-label {
    color: var(--color-muted);
    font-size: max(9.5px, 0.6rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.post-fact-value {
    color: var(--color-navy);
    font-size: max(12px, 0.78rem);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.post-fact-value a {
    color: var(--color-navy);
}

.post-fact-value a:hover,
.post-fact-value a:focus-visible {
    color: var(--color-primary);
}

@media (max-width: 575.98px) {
    .post-facts {
        gap: 12px 18px;
    }

    /* Long values can outrun a narrow phone, so let them wrap here rather
       than push the page sideways. */
    .post-fact-value {
        white-space: normal;
    }
}