/********** Template CSS **********/
:root {
    /* Softer, warmer accent than the template's raw #FF6F0F. */
    --primary: #E2680E;
    --primary-soft: #F4A259;
    --secondary: #FBF1E7;
    --light: #F7F5F2;
    --dark: #0B2B33;
    --deep: #071E24;
    --ink: #14343C;
    --muted: #5F7178;
    --hairline: rgba(11, 43, 51, .10);
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-outline-primary:hover {
    color: #FFFFFF;
}

.btn.btn-primary:hover {
    color: var(--primary);
    background: transparent;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.fixed-top {
    transition: .5s;
}

.top-bar {
    height: 45px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        margin-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, .07);
        background: var(--dark);
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 29, 35, .8);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--dark);
    border: 12px solid var(--dark);
    border-radius: 3rem;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    padding-top: 12rem;
    padding-bottom: 6rem;
    background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: #999999;
}


/*** Causes ***/
.causes-item .progress {
    height: 5px;
    border-radius: 0;
    overflow: visible;
}

.causes-item .progress .progress-bar {
    position: relative;
    overflow: visible;
    width: 0px;
    border-radius: 0;
    transition: 5s;
}

.causes-item .progress .progress-bar span {
    position: absolute;
    top: -7px;
    right: 0;
    width: 40px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--primary);
    color: #FFFFFF;
}

.causes-item .causes-overlay {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.causes-item:hover .causes-overlay {
    height: 100%;
    opacity: 1;
}


/*** Service ***/
.service-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .06);
}


/*** Donate ***/
.donate {
    background: rgba(0, 29, 35, .8);
}

.btn-group .btn-light:hover,
.btn-group input[type="radio"]:checked+label {
    color: var(--primary);
    border-color: var(--primary);
}


/*** Team ***/
.team-item img {
    position: relative;
    top: 0;
    transition: .5s;
}

.team-item:hover img {
    top: -30px;
}

.team-item .team-text {
    position: relative;
    height: 100px;
    transition: .5s;
}

.team-item:hover .team-text {
    margin-top: -60px;
    height: 160px;
}

.team-item .team-text .team-social {
    opacity: 0;
    transition: .5s;
}

.team-item:hover .team-text .team-social {
    opacity: 1;
}

.team-item .team-social .btn {
    display: inline-flex;
    color: var(--primary);
    background: #FFFFFF;
    border-radius: 40px;
}

.team-item .team-social .btn:hover {
    color: #FFFFFF;
    background: var(--primary);
}


/*** Testimonial ***/
.testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 300px;
    }
}

.testimonial-carousel .owl-item .testimonial-text {
    background: var(--light);
    transform: scale(.8);
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary);
    transform: scale(1);
}

.testimonial-carousel .owl-item .testimonial-text *,
.testimonial-carousel .owl-item .testimonial-item img {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: var(--light) !important;
}

.testimonial-carousel .owl-item.center .testimonial-item img {
    background: var(--primary) !important;
} 

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 350px;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
    z-index: 1;
}

.testimonial-carousel:hover .owl-nav {
    width: 300px;
    opacity: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    color: var(--primary);
    font-size: 45px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--dark);
}


/*** Footer ***/

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: rgba(255,255,255,0.5);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: rgba(255,255,255,0.5);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--light);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .btn.btn-square {
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.5);
}

.footer .btn.btn-square:hover {
    color: var(--secondary);
    border-color: var(--light);
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--secondary);
}

.footer .copyright a:hover {
    color: var(--primary);
}



/*** ------------------------------------------------------------------
     CheAI Research Inc. — custom additions on top of the ChariTeam base
     ------------------------------------------------------------------ */

/* --- Typography rhythm ------------------------------------------------ */

body { color: var(--ink); }

.section-label {
    display: inline-block;
    font-family: 'Saira', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.1rem;
}

/* Two-line display heading: quiet first line, strong second line. */
.stacked-title {
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.015em;
    margin-bottom: 1.25rem;
}
.stacked-title .lead-line {
    display: block;
    font-weight: 500;
    color: var(--muted);
    font-size: .62em;
    letter-spacing: .01em;
    margin-bottom: .3rem;
}
.stacked-title .main-line { display: block; color: var(--dark); }

.section-intro {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 62ch;
}

/* Generous, consistent vertical rhythm. */
.section-pad { padding-top: 6.5rem; padding-bottom: 6.5rem; }
@media (max-width: 768px) {
    .section-pad { padding-top: 4rem; padding-bottom: 4rem; }
}

.rule-accent {
    width: 54px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    margin-bottom: 1.6rem;
}
.rule-accent.center { margin-left: auto; margin-right: auto; }

/* --- Hero ------------------------------------------------------------- */

.hero-slide {
    position: relative;
    height: 640px;
    overflow: hidden;
    background-color: var(--deep);
}
.hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(7,30,36,.94) 0%, rgba(7,30,36,.80) 42%, rgba(7,30,36,.42) 100%);
}
@media (max-width: 992px) {
    .hero-slide { height: 560px; }
    .hero-slide::after { background: linear-gradient(180deg, rgba(7,30,36,.86), rgba(7,30,36,.94)); }
}

.carousel-caption { z-index: 2; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Saira', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--primary-soft);
    margin-bottom: 1.1rem;
}
.hero-eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--primary-soft);
}

/* --- Figure / image cards -------------------------------------------- */

.figure-frame {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: var(--light);
}
.figure-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s cubic-bezier(.2,.6,.3,1);
}
.figure-frame:hover img { transform: scale(1.04); }
.figure-frame.tall { aspect-ratio: 4 / 5; }
.figure-frame.wide { aspect-ratio: 3 / 2; }
.figure-frame.square { aspect-ratio: 1 / 1; }

/* Stat plate that overlaps an image, for the about composition. */
.stat-plate {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 18px 40px rgba(11,43,51,.14);
    border-bottom: 3px solid var(--primary);
}
.stat-plate .stat-value {
    font-family: 'Saira', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}
.stat-plate .stat-label {
    font-size: .76rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .35rem;
}

/* --- Program cards ---------------------------------------------------- */

.program-card {
    background: #FFFFFF;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    transition: transform .45s cubic-bezier(.2,.6,.3,1), box-shadow .45s ease;
}
.program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(11,43,51,.13);
}
.program-card .card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.program-card .card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .9s cubic-bezier(.2,.6,.3,1);
}
.program-card:hover .card-media img { transform: scale(1.05); }
.program-card .card-tag {
    position: absolute;
    left: 0; bottom: 0;
    background: var(--primary);
    color: #FFF;
    font-family: 'Saira', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .45rem 1rem;
}
.program-card .card-body-pad { padding: 1.9rem 1.75rem 2rem; }
.program-card h3 {
    font-size: 1.28rem;
    margin-bottom: .7rem;
    color: var(--dark);
}
.program-card p { color: var(--muted); margin-bottom: 1.1rem; line-height: 1.7; }
.card-link {
    font-family: 'Saira', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.card-link i { transition: transform .35s ease; }
.card-link:hover { color: var(--dark); }
.card-link:hover i { transform: translateX(5px); }

/* --- Values (C / H / E) ---------------------------------------------- */

.value-item {
    padding: 2rem 1.5rem;
    border-left: 2px solid var(--hairline);
    height: 100%;
}
.value-item .value-letter {
    font-family: 'Saira', sans-serif;
    font-size: 3.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
    opacity: .95;
}
.value-item h4 { margin: .8rem 0 .55rem; font-size: 1.12rem; color: var(--dark); }
.value-item p { color: var(--muted); font-size: .97rem; line-height: 1.7; margin: 0; }

/* --- People ----------------------------------------------------------- */

.person-card {
    background: #FFFFFF;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow .45s ease, transform .45s cubic-bezier(.2,.6,.3,1);
}
.person-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(11,43,51,.13);
}
.person-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--light);
}
.person-photo img {
    width: 100%;
    height: 100%;
    display: block;
    /* Portraits are 4:5 head-and-shoulders; bias the crop just below the
       top edge so the full face stays inside a square frame. */
    object-fit: cover;
    object-position: center 22%;
    transition: transform .9s cubic-bezier(.2,.6,.3,1);
}
.person-card:hover .person-photo img { transform: scale(1.03); }
.person-body { padding: 1.6rem 1.5rem 1.8rem; }
.person-name {
    font-family: 'Saira', sans-serif;
    font-size: 1.22rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: .25rem;
}
.person-role {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .9rem;
}
.person-bio { color: var(--muted); font-size: .96rem; line-height: 1.7; margin: 0; }

.person-card.advisor .person-role { color: var(--muted); }
.person-card.advisor .person-photo img { object-position: center 20%; }

/* --- Feature strip ---------------------------------------------------- */

.feature-row { display: flex; gap: 1.25rem; align-items: flex-start; }
.feature-icon {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    background: var(--secondary);
    color: var(--primary);
    border-radius: 4px;
    font-size: 1.25rem;
}
.feature-row h4 { font-size: 1.08rem; margin-bottom: .45rem; color: var(--dark); }
.feature-row p { color: var(--muted); margin: 0; line-height: 1.7; font-size: .97rem; }

/* --- Quote band ------------------------------------------------------- */

.quote-band {
    position: relative;
    overflow: hidden;
    background: var(--deep);
}
.quote-band img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: .22;
}
.quote-band .quote-inner { position: relative; z-index: 2; }
.quote-text {
    font-family: 'Saira', sans-serif;
    font-weight: 500;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.45;
    color: #FFFFFF;
    max-width: 46ch;
}
.quote-attrib {
    margin-top: 1.4rem;
    font-size: .82rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--primary-soft);
}

/* --- Navbar brand ----------------------------------------------------- */

.navbar-brand-text {
    font-family: 'Saira', sans-serif;
    font-size: 1.92rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.navbar-brand-text .brand-suffix { font-size: .58em; font-weight: 500; letter-spacing: .04em; }
.footer .navbar-brand-text { font-size: 1.7rem; }
@media (max-width: 420px) {
    .navbar-brand-text { font-size: 1.42rem; }
}

/* --- Page header ------------------------------------------------------ */

.page-header { position: relative; overflow: hidden; }
.page-header .ph-media {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: .28;
}
.page-header .container { position: relative; z-index: 2; }



/* --- Curriculum pages ------------------------------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}
.stat-cell { background: #FFF; padding: 1.6rem 1.4rem; text-align: center; }
.stat-n {
    font-family: 'Saira', sans-serif;
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
}
.stat-t {
    font-size: .74rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .45rem;
}

.notice-box {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--secondary);
    border-left: 3px solid var(--primary);
    padding: 1.5rem 1.6rem;
    color: var(--ink);
    line-height: 1.7;
    font-size: .97rem;
}
.notice-box > i { color: var(--primary); font-size: 1.2rem; margin-top: .18rem; }
.notice-box a { color: var(--primary); font-weight: 600; }

.unit-block { margin-bottom: 3.5rem; }
.unit-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    border-bottom: 2px solid var(--dark);
}
.unit-num {
    font-family: 'Saira', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary);
    flex: 0 0 auto;
}
.unit-title {
    font-family: 'Saira', sans-serif;
    font-size: 1.42rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0;
    line-height: 1.25;
}

.wk-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 0 1.25rem;
    align-items: center;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--hairline);
}
.wk-row:hover { background: rgba(226, 104, 14, .028); }
.wk-num {
    font-family: 'Saira', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .05em;
}
.wk-title {
    font-family: 'Saira', sans-serif;
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 .3rem;
    line-height: 1.3;
}
.wk-desc {
    color: var(--muted);
    font-size: .93rem;
    line-height: 1.6;
    margin: 0 0 .5rem;
    max-width: 68ch;
}
.wk-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.wk-dur {
    font-size: .74rem;
    color: var(--muted);
    letter-spacing: .04em;
}
.wk-dur i { margin-right: .3rem; opacity: .7; }
.std-chip {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: .16rem .55rem;
}
.wk-dl { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; }

.dl-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Saira', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #FFF;
    background: var(--primary);
    border: 1px solid var(--primary);
    padding: .48rem .85rem;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.dl-btn:hover { background: var(--dark); border-color: var(--dark); color: #FFF; transform: translateY(-1px); }
.dl-btn.ghost { background: transparent; color: var(--primary); }
.dl-btn.ghost:hover { background: var(--primary); color: #FFF; border-color: var(--primary); }
.dl-btn i { font-size: .84em; }

.dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .7rem;
}
.dl-grid .dl-btn { justify-content: flex-start; white-space: normal; padding: .7rem 1rem; }

@media (max-width: 900px) {
    .wk-row { grid-template-columns: 48px minmax(0, 1fr); }
    .wk-dl { grid-column: 1 / -1; justify-content: flex-start; margin-top: .8rem; }
}
@media (max-width: 520px) {
    .unit-head { flex-direction: column; gap: .3rem; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Grade selector cards on the education page */
.grade-card {
    display: block;
    background: #FFF;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    padding: 2rem 1.9rem;
    height: 100%;
    text-decoration: none;
    transition: transform .45s cubic-bezier(.2,.6,.3,1), box-shadow .45s ease, border-color .3s ease;
}
.grade-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(11,43,51,.13);
    border-color: var(--primary);
}
.grade-card .g-num {
    font-family: 'Saira', sans-serif;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--primary);
}
.grade-card h3 {
    font-family: 'Saira', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark);
    margin: .5rem 0 .7rem;
}
.grade-card p { color: var(--muted); line-height: 1.7; margin-bottom: 1.1rem; font-size: .97rem; }
.grade-card .g-stats {
    display: flex;
    gap: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hairline);
}
.grade-card .g-stat-n {
    font-family: 'Saira', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
}
.grade-card .g-stat-t {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .3rem;
}


/* --- Newsletter ------------------------------------------------------- */

.nl-h3 {
    font-family: 'Saira', sans-serif;
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 1.1rem;
    line-height: 1.3;
}
.nl-h4 {
    font-family: 'Saira', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 .9rem;
}
.nl-p {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 1.15rem;
}
.nl-list { color: var(--muted); font-size: 1.02rem; line-height: 1.85; padding-left: 1.2rem; }
.nl-list li { margin-bottom: .7rem; }
.nl-list strong { color: var(--ink); font-weight: 600; }

.retraction-card {
    background: #FFF;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--primary);
    border-radius: 3px;
    padding: 1.5rem 1.6rem;
    margin-bottom: 1rem;
}
.ret-badge {
    display: inline-block;
    font-family: 'Saira', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #FFF;
    background: #A32E1E;
    padding: .22rem .6rem;
    border-radius: 2px;
    margin-bottom: .8rem;
}
.ret-title {
    font-family: 'Saira', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.4;
    margin: 0 0 .5rem;
}
.ret-meta { color: var(--muted); font-size: .88rem; margin: 0 0 .7rem; }
.ret-link {
    font-size: .88rem;
    color: var(--primary);
    text-decoration: none;
    word-break: break-all;
}
.ret-link:hover { text-decoration: underline; }
.ret-link i { font-size: .78em; margin-left: .25rem; }

.method-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0 1.1rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--hairline);
}
.method-step:last-of-type { border-bottom: 0; }
.ms-num {
    font-family: 'Saira', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--primary);
    padding-top: .2rem;
}
.method-step h4 {
    font-family: 'Saira', sans-serif;
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 .4rem;
}
.method-step p { color: var(--muted); font-size: .98rem; line-height: 1.75; margin: 0; }

.ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}
.ev-cell { background: #FFF; padding: 1.5rem 1.2rem; text-align: center; }
.ev-n {
    font-family: 'Saira', sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
}
.ev-t {
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .5rem;
    line-height: 1.4;
}

@media (max-width: 520px) {
    .method-step { grid-template-columns: 1fr; }
    .ms-num { margin-bottom: .3rem; }
}


/* --- Featured newsletter band (homepage) ------------------------------ */

.nl-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    background: #FFFFFF;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .45s cubic-bezier(.2,.6,.3,1), box-shadow .45s ease, border-color .3s ease;
}
.nl-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 52px rgba(11,43,51,.14);
    border-color: var(--primary);
}

.nl-feature-media { position: relative; overflow: hidden; min-height: 300px; }
.nl-feature-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2,.6,.3,1);
}
.nl-feature:hover .nl-feature-media img { transform: scale(1.05); }
.nl-issue {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    background: var(--primary);
    color: #FFF;
    font-family: 'Saira', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .45rem 1rem;
}

.nl-feature-body { padding: 2.2rem 2.1rem; }
.nl-date {
    font-family: 'Saira', sans-serif;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .7rem;
}
.nl-feature-title {
    font-family: 'Saira', sans-serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.3;
    margin: 0 0 .9rem;
}
.nl-feature-text {
    color: var(--muted);
    font-size: .99rem;
    line-height: 1.75;
    margin: 0 0 1.2rem;
}
.nl-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.3rem; }
.nl-tag {
    font-family: 'Saira', sans-serif;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--secondary);
    border-radius: 999px;
    padding: .3rem .8rem;
}

@media (max-width: 900px) {
    .nl-feature { grid-template-columns: 1fr; }
    .nl-feature-media { min-height: 220px; }
    .nl-feature-body { padding: 1.8rem 1.6rem; }
}


/* --- AI News digest articles ------------------------------------------ */

.news-article {
    padding: 2rem 0;
    border-bottom: 1px solid var(--hairline);
}
.news-article:last-of-type { border-bottom: 0; }
.news-article h3 {
    font-family: 'Saira', sans-serif;
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.35;
    margin: 0 0 .9rem;
}

.also-list { list-style: none; padding: 0; margin: 0; }
.also-list li {
    position: relative;
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.8;
    padding: .55rem 0 .55rem 1.4rem;
    border-bottom: 1px solid var(--hairline);
}
.also-list li:last-child { border-bottom: 0; }
.also-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}
.also-list strong { color: var(--ink); font-weight: 600; }

.sources-list { list-style: none; padding: 0; margin: 0; }
.sources-list li {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.8;
    padding: .5rem 0;
    border-bottom: 1px solid var(--hairline);
}
.sources-list li:last-child { border-bottom: 0; }
.sources-list a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--muted);
    transition: color .2s ease, border-color .2s ease;
}
.sources-list a:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.sources-list a i {
    font-size: .74em;
    margin-left: .3rem;
    opacity: .7;
}

.nl-p a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(226, 104, 14, .35);
    transition: border-color .2s ease;
}
.nl-p a:hover { border-color: var(--primary); }


/* --- AI News archive (research page) ----------------------------------- */

.news-archive-list { display: flex; flex-direction: column; gap: .9rem; }
.news-archive-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: #FFF;
    border: 1px solid var(--hairline);
    border-radius: 3px;
    padding: 1.3rem 1.6rem;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.news-archive-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(11,43,51,.1);
    border-color: var(--primary);
}
.news-archive-item .na-month {
    font-family: 'Saira', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
    white-space: nowrap;
    min-width: 118px;
}
.news-archive-item .na-title {
    font-family: 'Saira', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.4;
    flex: 1;
}
.news-archive-item .na-arrow {
    color: var(--primary);
    transition: transform .35s ease;
    flex-shrink: 0;
}
.news-archive-item:hover .na-arrow { transform: translateX(5px); }

@media (max-width: 620px) {
    .news-archive-item { flex-wrap: wrap; gap: .5rem 1.5rem; }
    .news-archive-item .na-month { min-width: 0; }
}


/* --- News archive (news.html): year-grouped index ----------------------
   Replaces the earlier S-road timeline. At seven issues the road was a
   pleasant flourish; at eighteen it was roughly 3,500px of scrolling with
   one card per screenful. This is a compact grid grouped by year, with a
   sticky year switcher so a reader can jump straight to a month. */

.news-yearnav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--hairline);
    padding: .7rem 0;
    margin-bottom: 2.2rem;
}
.news-yearnav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    justify-content: center;
}
.news-yearnav__label {
    font-family: 'Saira', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: .3rem;
}
.news-yearnav a {
    font-family: 'Saira', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
    padding: .32rem .85rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.news-yearnav a:hover,
.news-yearnav a.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFF;
}

.news-year { margin-bottom: 3rem; }
.news-year:last-child { margin-bottom: 0; }
.news-year__head {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    padding-bottom: .6rem;
    margin-bottom: 1.4rem;
    border-bottom: 2px solid var(--dark);
}
.news-year__num {
    font-family: 'Saira', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--dark);
    margin: 0;
}
.news-year__count {
    font-size: .8rem;
    color: var(--muted);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.news-card {
    display: flex;
    flex-direction: column;
    background: #FFF;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    padding: .95rem 1.05rem;
    text-decoration: none;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(11,43,51,.11);
    border-color: var(--primary);
}
.news-card__month {
    font-family: 'Saira', sans-serif;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .35rem;
}
.news-card__title {
    font-family: 'Saira', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.32;
    margin: 0 0 .4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card__excerpt {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
    margin: 0 0 .7rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card__link {
    margin-top: auto;
    font-family: 'Saira', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.news-card:hover .news-card__link i { transform: translateX(4px); }
.news-card__link i { transition: transform .35s ease; }

@media (max-width: 575px) {
    .news-grid { grid-template-columns: 1fr; }
    .news-year__num { font-size: 1.5rem; }
    .news-yearnav { padding: .55rem 0; }
}

/* --- Research archive (research.html) --------------------------------- */
/* A dated index rather than a card grid: these are seven reports with
   findings and dates, and a list lets a reader scan the finding itself
   instead of seven identically-shaped boxes. */

.report-index {
    border-top: 1px solid var(--hairline);
}
.report-row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 10.5rem;
    gap: 0 2.5rem;
    align-items: baseline;
    padding: 2.1rem 0 2rem;
    border-bottom: 1px solid var(--hairline);
    position: relative;
    transition: background-color .35s ease;
}
.report-row:hover { background-color: rgba(226, 104, 14, .035); }
.report-row .r-date {
    font-family: 'Saira', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.report-row .r-body { min-width: 0; }
.report-row h3 {
    font-size: 1.32rem;
    line-height: 1.32;
    margin: 0 0 .55rem;
    max-width: 34ch;
}
.report-row h3 a {
    color: var(--dark);
    text-decoration: none;
    background-image: linear-gradient(var(--primary), var(--primary));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .4s cubic-bezier(.2,.6,.3,1), color .3s ease;
}
.report-row:hover h3 a,
.report-row h3 a:focus-visible {
    color: var(--primary);
    background-size: 100% 2px;
}
.report-row .r-finding {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.62;
    /* Measured, not assumed: the ch unit is the width of "0", which is
       wider than this face's average letter, so a ch-based measure ran
       long. 620px renders at ~74 characters, inside the 80 ceiling. */
    max-width: 620px;
}
.report-row .r-field {
    font-family: 'Saira', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    padding-top: .3rem;
}
.report-row .r-field.is-interactive {
    /* The brand orange measures 3.38:1 on white, which fails AA at this
       size. This darker cut of the same hue clears 4.5:1. */
    color: #A8480A;
}

/* The whole row is the target; the heading link carries the accessible name. */
.report-row h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.report-row h3 a:focus-visible {
    outline: none;
}
.report-row:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .report-row {
        grid-template-columns: 1fr;
        gap: .5rem;
        padding: 1.7rem 0 1.6rem;
    }
    .report-row .r-field { padding-top: .35rem; }
    .report-row h3 { font-size: 1.18rem; max-width: none; }
}


/* --- AI curriculum: lesson reading experience --------------------------
   A long-form reading layout for the AI curriculum lessons. The site's other
   pages are marketing surfaces built on a grid; a lesson is a single column of
   text that someone reads for twenty minutes, so it gets its own system:
   one measure, one vertical rhythm, and type sized for sustained reading
   rather than for scanning.
   ------------------------------------------------------------------ */

/* Reading progress. Fixed under the navbar, driven by main.js. */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: transparent;
    z-index: 2000;
    pointer-events: none;
}
.read-progress__bar {
    height: 100%;
    width: 0;
    background: var(--primary);
    transition: width .12s linear;
}

/* --- Lesson masthead --------------------------------------------------- */

/* The lesson masthead sits on the site's dark page-header ground. The navbar
   is transparent and expects something dark behind it, so a lesson cannot
   simply open on white: doing that leaves the nav unreadable and lets the
   title collide with it. This is the same header every other page uses, with
   article typography and a left-aligned measure instead of a centred title. */
.lesson-head {
    padding-top: 11rem;
    padding-bottom: 4.5rem;
}
.lesson-head .lesson-head__inner {
    max-width: 43rem;
    margin-left: auto;
    margin-right: auto;
}
.lesson-kicker {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Saira', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.4rem;
}
.lesson-kicker .lk-sep { color: rgba(255, 255, 255, .3); }
.lesson-kicker a { color: var(--primary); text-decoration: none; }
.lesson-kicker a:hover { text-decoration: underline; }

.lesson-title {
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: clamp(2.1rem, 4.6vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #FFFFFF;
    margin-bottom: 1rem;
}
.lesson-standfirst {
    font-size: 1.22rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, .72);
    font-weight: 400;
    margin-bottom: 1.9rem;
    max-width: 34em;
}

/* Byline row: who, how long, when. Sits on a hairline like a masthead. */
.lesson-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.4rem;
    padding: 1.05rem 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: .9rem;
    color: rgba(255, 255, 255, .68);
}
.lesson-meta__org {
    font-family: 'Saira', sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: .01em;
}
.lesson-meta__item { display: inline-flex; align-items: center; gap: .45rem; }
.lesson-meta__item i { color: var(--primary); font-size: .82rem; }

/* --- Lesson body ------------------------------------------------------- */

/* The measure. Everything in the article column inherits this width, so the
   line length stays in the comfortable 65 to 75 character band regardless of
   which element is being rendered. */
.lesson-body {
    max-width: 43rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3rem;
    padding-bottom: 1rem;
    font-size: 1.16rem;
    line-height: 1.78;
    color: var(--ink);
}
.lesson-body > p { margin-bottom: 1.55rem; }
.lesson-body > p:last-child { margin-bottom: 0; }

/* Opening paragraph carries slightly more weight, the way a printed feature
   sets its first line larger than the body that follows. */
.lesson-body .lede {
    font-size: 1.28rem;
    line-height: 1.68;
    color: var(--dark);
}

.lesson-body h2 {
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: 1.62rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--dark);
    margin-top: 3.4rem;
    margin-bottom: 1.15rem;
    scroll-margin-top: 6rem;
}
/* Section numbers are set as a separate, quieter element so the heading text
   itself starts on a consistent left edge. */
.lesson-body h2 .h-num {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .5rem;
}
.lesson-body h3 {
    font-family: 'Saira', sans-serif;
    font-weight: 600;
    font-size: 1.22rem;
    line-height: 1.35;
    color: var(--dark);
    margin-top: 2.5rem;
    margin-bottom: .95rem;
    scroll-margin-top: 6rem;
}

.lesson-body a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(226, 104, 14, .4);
    transition: border-color .2s ease, color .2s ease;
}
.lesson-body a:hover { color: var(--primary); border-color: var(--primary); }

.lesson-body strong { color: var(--dark); font-weight: 600; }

.lesson-body ul,
.lesson-body ol {
    margin-bottom: 1.55rem;
    padding-left: 1.35rem;
}
.lesson-body li { margin-bottom: .7rem; }
.lesson-body li:last-child { margin-bottom: 0; }
.lesson-body li::marker { color: var(--primary); }

/* Pull quote. The lesson's central claim, lifted out of the flow. */
.lesson-quote {
    margin: 2.6rem 0;
    padding: .2rem 0 .2rem 1.6rem;
    border-left: 3px solid var(--primary);
    font-family: 'Saira', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.005em;
    color: var(--dark);
}

/* Figures. The cards are 1080px wide and carry their own framing, so they get
   a hairline and a caption rather than a heavy container. */
.lesson-figure { margin: 2.9rem 0; }
.lesson-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--hairline);
    border-radius: 6px;
}
.lesson-figure figcaption {
    margin-top: .85rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--muted);
}

/* Tables. Horizontal rules only, the way a reference table is set in print. */
.lesson-table-wrap {
    margin: 2.4rem 0;
    overflow-x: auto;
}
.lesson-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .98rem;
    line-height: 1.6;
}
.lesson-table th {
    font-family: 'Saira', sans-serif;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding: 0 1.1rem .75rem 0;
    border-bottom: 2px solid var(--dark);
    white-space: nowrap;
}
.lesson-table td {
    padding: .9rem 1.1rem .9rem 0;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
    color: var(--ink);
}
.lesson-table tr:last-child td { border-bottom: none; }
.lesson-table td:last-child,
.lesson-table th:last-child { padding-right: 0; }
.lesson-table strong { color: var(--dark); }
/* Numeric columns read better aligned right and set in a tabular face. */
.lesson-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sub and superscripts, as used throughout the mathematical passages.
   The browser default raises and lowers them with `vertical-align`, which
   enlarges the line box and makes every line containing a subscript sit
   further from its neighbours than the rest of the paragraph. Positioning
   them relatively instead keeps the leading even down the whole column. */
.lesson-body sub,
.lesson-body sup,
.lesson-math sub,
.lesson-math sup,
.lesson-table sub,
.lesson-table sup {
    font-size: .72em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.lesson-body sup, .lesson-math sup, .lesson-table sup { top: -.5em; }
.lesson-body sub, .lesson-math sub, .lesson-table sub { bottom: -.22em; }

/* A superscript carrying its own subscript, as in the dimensions of a matrix,
   must not shrink twice or it becomes unreadable. The nested one also keeps
   its own offset at zero: nesting two relative offsets pushes the inner mark
   off the line, and because the outer element has line-height 0 the paragraph
   then sets tighter than its neighbours. Measured before and after: 31.8px
   against a 34.4px column, now even. */
.lesson-body sup sub, .lesson-math sup sub,
.lesson-body sub sup, .lesson-math sub sup,
.lesson-table sup sub, .lesson-table sub sup {
    font-size: 1em;
    top: 0;
    bottom: 0;
}

/* A displayed formula or a worked arithmetic step. */
.lesson-math {
    margin: 1.7rem 0;
    padding: 1.15rem 1.4rem;
    background: var(--light);
    border-left: 3px solid var(--primary-soft);
    border-radius: 0 4px 4px 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--dark);
    overflow-x: auto;
}
.lesson-math .m-label {
    display: block;
    font-family: 'Saira', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .5rem;
}

/* A worked example: a run of arithmetic that should read as one block. */
.lesson-worked {
    margin: 2rem 0;
    padding: 1.5rem 1.7rem;
    background: var(--secondary);
    border-radius: 6px;
}
.lesson-worked > *:last-child { margin-bottom: 0; }
.lesson-worked p { margin-bottom: 1rem; }
.lesson-worked .w-head {
    font-family: 'Saira', sans-serif;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .9rem;
}
.lesson-worked ul { margin-bottom: 1rem; }

/* Callout for a definition or a warning the reader should not skim past. */
.lesson-note {
    display: flex;
    gap: 1rem;
    margin: 2.2rem 0;
    padding: 1.3rem 1.5rem;
    background: var(--light);
    border-radius: 6px;
    font-size: 1.02rem;
    line-height: 1.7;
}
.lesson-note > i { color: var(--primary); font-size: 1.05rem; margin-top: .3rem; }
.lesson-note > div > *:last-child { margin-bottom: 0; }

/* --- Closing apparatus: glossary and further reading ------------------- */

.lesson-close {
    max-width: 43rem;
    margin: 0 auto;
    padding-top: 2.5rem;
    padding-bottom: 1rem;
}
.lesson-close h2 {
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--dark);
    margin-bottom: 1.4rem;
    padding-top: 2.6rem;
    border-top: 1px solid var(--hairline);
    scroll-margin-top: 6rem;
}

.glossary { display: flex; flex-direction: column; gap: 1.05rem; }
.glossary div {
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--muted);
}
.glossary dt,
.glossary .g-term {
    font-family: 'Saira', sans-serif;
    font-weight: 600;
    color: var(--dark);
}

.reading-list { list-style: none; padding: 0; margin: 0; }
.reading-list li {
    padding: .85rem 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 1rem;
    line-height: 1.6;
}
.reading-list li:last-child { border-bottom: none; }
.reading-list a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(226, 104, 14, .4);
    transition: border-color .2s ease, color .2s ease;
}
.reading-list a:hover { color: var(--primary); border-color: var(--primary); }

/* --- Prev / next -------------------------------------------------------- */

.lesson-nav {
    max-width: 43rem;
    margin: 0 auto;
    padding: 2.6rem 0 0;
    border-top: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}
.lesson-nav__item {
    display: block;
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color .3s ease, transform .3s ease;
}
.lesson-nav__item:hover { border-color: var(--primary); transform: translateY(-2px); }
.lesson-nav__item.is-next { text-align: right; }
.lesson-nav__dir {
    display: block;
    font-family: 'Saira', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .45rem;
}
.lesson-nav__title {
    display: block;
    font-family: 'Saira', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dark);
}
.lesson-nav__item.is-empty {
    border-style: dashed;
    pointer-events: none;
}
.lesson-nav__item.is-empty .lesson-nav__title { color: var(--muted); }

@media (max-width: 576px) {
    .lesson-nav { grid-template-columns: 1fr; }
    .lesson-nav__item.is-next { text-align: left; }
}

@media (max-width: 768px) {
    .lesson-head { padding-top: 8.5rem; padding-bottom: 3rem; }
    .lesson-body { font-size: 1.08rem; padding-top: 2.2rem; }
    .lesson-body .lede { font-size: 1.16rem; }
    .lesson-body h2 { font-size: 1.42rem; margin-top: 2.8rem; }
    .lesson-quote { font-size: 1.14rem; }
    .lesson-worked { padding: 1.2rem 1.15rem; }
    .lesson-math { padding: 1rem 1.1rem; font-size: .98rem; }
    .lesson-table { font-size: .92rem; }
}


/* --- AI curriculum: the index page ------------------------------------- */

/* Tier grouping. Each tier is a labelled band of lessons. */
.tier { margin-bottom: 3.4rem; }
.tier:last-child { margin-bottom: 0; }
.tier__head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: .9rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--dark);
}
.tier__num {
    font-family: 'Saira', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary);
}
.tier__name {
    font-family: 'Saira', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
    line-height: 1.2;
}
.tier__range {
    margin-left: auto;
    font-size: .88rem;
    color: var(--muted);
    white-space: nowrap;
}

.tier__list { display: flex; flex-direction: column; }

/* One lesson row. Available rows are links; the rest are inert. */
.lesson-row {
    position: relative;
    display: grid;
    grid-template-columns: 3.2rem 1fr auto;
    align-items: baseline;
    gap: 0 1.3rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
}
.lesson-row:last-child { border-bottom: none; }
.lesson-row__num {
    font-family: 'Saira', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.lesson-row__title {
    font-family: 'Saira', sans-serif;
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dark);
    margin: 0;
}
.lesson-row__blurb {
    grid-column: 2;
    margin: .35rem 0 0;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--muted);
}
.lesson-row__state {
    font-family: 'Saira', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Published: the whole row is a target. */
a.lesson-row .lesson-row__state { color: var(--primary); }
a.lesson-row:hover { background: var(--light); }
a.lesson-row:hover .lesson-row__title { color: var(--primary); }
a.lesson-row .lesson-row__title,
a.lesson-row .lesson-row__state { transition: color .25s ease; }
a.lesson-row:hover { box-shadow: -1.1rem 0 0 var(--light), 1.1rem 0 0 var(--light); }

/* Drafted but not yet published, and the one lesson left unwritten. */
.lesson-row.is-pending .lesson-row__num,
.lesson-row.is-pending .lesson-row__title { color: var(--muted); }
.lesson-row.is-pending .lesson-row__state { color: rgba(11, 43, 51, .35); }

@media (max-width: 576px) {
    .lesson-row { grid-template-columns: 2.4rem 1fr; gap: 0 .9rem; }
    .lesson-row__state { grid-column: 2; margin-top: .45rem; }
    .tier__head { flex-wrap: wrap; gap: .4rem .9rem; }
    .tier__range { margin-left: 0; width: 100%; }
}

/* --- Education page: the AI curriculum band ---------------------------
   This runs directly under the page header, above the chemistry programme,
   and is the first thing on the page. It is set on the dark ground so it
   reads as a feature rather than as another section, and it carries two real
   lesson cards using the lesson artwork itself as the thumbnail.
   ------------------------------------------------------------------ */

.ai-band {
    position: relative;
    overflow: hidden;
    background: var(--deep);
    /* The horizontal padding is load-bearing, not decoration. A .container
       nested in a bare container-fluid resolves its auto margins against a
       parent with no gutter, which pulls the whole column to a negative left
       offset and clips the text. The other sections avoid this by sitting in
       container-xxl, which supplies exactly this padding. */
    padding: 5.5rem calc(var(--bs-gutter-x, 1.5rem) * .5);
}
/* A soft warm wash so the flat dark does not read as a slab. */
.ai-band::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    height: 160%;
    background: radial-gradient(ellipse at center, rgba(226, 104, 14, .20), transparent 62%);
    pointer-events: none;
}
.ai-band > .container { position: relative; z-index: 2; }

.ai-band__eyebrow {
    display: inline-block;
    font-family: 'Saira', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--primary-soft);
    padding: .4rem .85rem;
    border: 1px solid rgba(244, 162, 89, .35);
    border-radius: 100px;
    margin-bottom: 1.4rem;
}
.ai-band__title {
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #FFFFFF;
    margin-bottom: 1.3rem;
}
.ai-band__lede {
    color: rgba(255, 255, 255, .74);
    font-size: 1.06rem;
    line-height: 1.75;
    max-width: 44ch;
    margin-bottom: 2rem;
}

.ai-band__stats {
    display: flex;
    gap: 2.6rem;
    padding: 1.3rem 0;
    margin-bottom: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.ai-stat__n {
    display: block;
    font-family: 'Saira', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-soft);
    margin-bottom: .3rem;
}
.ai-stat__t {
    display: block;
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.ai-band__link {
    font-family: 'Saira', sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    transition: color .25s ease;
}
.ai-band__link i { margin-left: .5rem; transition: transform .3s ease; }
.ai-band__link:hover { color: var(--primary-soft); }
.ai-band__link:hover i { transform: translateX(5px); }

/* The published-lesson index. Every live lesson is on this page and one
   click away, grouped by tier so the sequence is still legible. Two cards
   used to sit here, which stopped making sense once fifteen lessons were
   live: a reader could not start where they wanted. */
.ai-index {
    display: flex;
    flex-direction: column;
    gap: 1.45rem;
}
.ai-index__group { display: flex; flex-direction: column; gap: .55rem; }
.ai-index__tier {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    font-family: 'Saira', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    padding-bottom: .45rem;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.ai-index__tier span { color: var(--primary-soft); }

/* Two columns on a wide screen, so fifteen rows do not become a long scroll. */
.ai-index__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem .9rem;
}
.ai-index__item {
    display: grid;
    grid-template-columns: 1.9rem 1fr auto;
    align-items: baseline;
    gap: .3rem .55rem;
    padding: .5rem .6rem;
    margin-left: -.6rem;
    border-radius: 5px;
    text-decoration: none;
    transition: background .25s ease;
}
.ai-index__item:hover { background: rgba(255, 255, 255, .07); }
.ai-i__n {
    font-family: 'Saira', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    color: var(--primary-soft);
    font-variant-numeric: tabular-nums;
}
.ai-i__t {
    font-size: .95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
    transition: color .25s ease;
}
.ai-index__item:hover .ai-i__t { color: #FFFFFF; }
.ai-i__m {
    font-size: .74rem;
    color: rgba(255, 255, 255, .38);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1199.98px) {
    .ai-index__list { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    .ai-band { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .ai-band__stats { gap: 1.8rem; }
}
@media (max-width: 480px) {
    /* The reading time is the first thing to go when the row gets tight. */
    .ai-index__item { grid-template-columns: 1.7rem 1fr; }
    .ai-i__m { grid-column: 2; }
}