/* Lexington 2027: a warmer, clearer visual system built around real school photos. */
:root {
    --deep-black: #173b39;
    --ink: #173b39;
    --ink-soft: #4d6763;
    --ink-faint: #718984;
    --surface-sand: #faf7ef;
    --soft-blue: #e8f4f3;
    --mint-layer: #e1f0e8;
    --signal-lime: #ffd66e;
    --text-subtle: #f7f7f0;
    --hairline: rgba(23, 59, 57, .12);
    --hairline-strong: rgba(23, 59, 57, .2);
    --font-display: 'Fraunces', Georgia, serif;
}

html { scroll-padding-top: 120px; }
body { background: var(--surface-sand); color: var(--ink); }
::selection { background: #ffe89f; color: var(--ink); }
.container { max-width: 1260px; padding-inline: clamp(20px, 4vw, 52px); }
.section-bignum { display: none; }

/* The admissions strip gives parents one immediate, useful next step. */
.announcement-banner {
    padding: .5rem 0;
    background: var(--deep-black);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .015em;
    text-align: center;
    white-space: normal;
}
.announcement-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem .8rem;
    padding-inline: 20px;
}
.announcement-banner .announcement-separator { color: var(--signal-lime); }
.announcement-banner a { color: var(--signal-lime); text-decoration: none; }
.announcement-banner a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Quiet, legible navigation with an admissions action on every page. */
.header {
    background: rgba(250,247,239,.97);
    color: var(--ink);
    padding: .65rem 0;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 8px 24px rgba(23,59,57,.035);
    backdrop-filter: blur(16px);
}
.nav-container { gap: 1.2rem; }
.logo {
    background: transparent;
    border: 0;
    padding: 0;
    gap: .7rem;
    color: var(--ink);
}
.logo-img { height: 50px; width: 50px; object-fit: contain; }
.logo .logo-name { font-size: 1.03rem; font-weight: 700; letter-spacing: -.025em; }
.logo .logo-subtitle { font-size: .68rem; color: var(--ink-soft); }
.navigation { gap: .8rem; }
.navigation ul { background: transparent; border: 0; padding: 0; gap: .1rem; }
.navigation a { color: var(--ink); font-size: .88rem; padding: .55rem .68rem; }
.navigation a:hover { color: var(--ink); background: #e3ede7; }
.navigation .nav-apply-item { display: none; }
.navigation .nav-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--signal-lime);
    border-radius: 999px;
    padding: .72rem 1.05rem;
    white-space: nowrap;
    font-weight: 700;
    box-shadow: 0 3px 0 #c5a954;
}
.navigation .nav-apply:hover { background: #ffe28f; transform: translateY(-1px); }
.lang-btn {
    border: 1px solid var(--hairline-strong);
    background: #fff;
    color: var(--ink);
    min-height: 42px;
    border-radius: 999px;
    box-shadow: none;
}
.lang-btn:hover { background: var(--soft-blue); color: var(--ink); }

/* First screen: one message, one school photograph, and a clear path to apply. */
.hero {
    background: var(--surface-sand);
    padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(4rem, 6vw, 6rem);
    overflow: visible;
}
.hero::before,
.hero::after { display: none; }
.hero .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 6rem);
}
.hero-content { display: block; min-height: 0; margin: 0; }
.hero-text { min-height: 0; padding: 0; display: block; max-width: 650px; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #376c62;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.5;
}
.hero-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d79063;
    flex: none;
}
.hero-title {
    margin: 1.05rem 0 1.25rem;
    overflow: visible;
    max-width: 11ch;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 5.6vw, 6.2rem);
    font-weight: 500;
    line-height: .99;
    letter-spacing: -.055em;
    color: var(--ink);
    text-wrap: balance;
}
.hero-subtitle {
    max-width: 48ch;
    overflow: visible;
    font-size: clamp(1.04rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: var(--ink-soft);
}
.hero-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.4rem;
    margin-top: 2rem;
    padding: 0;
    align-self: auto;
}
.cta-button {
    background: var(--signal-lime);
    color: var(--ink);
    border-radius: 999px;
    box-shadow: 0 4px 0 #c7a850;
    padding: .95rem 1.35rem;
    min-height: 50px;
    font-weight: 700;
    line-height: 1.2;
}
.cta-button::after { content: none; }
.cta-button:hover { background: #ffe391; color: var(--ink); box-shadow: 0 5px 0 #c7a850; }
.hero-link,
.text-link {
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
    text-decoration-color: #d39c58;
}
.hero-link:hover,
.text-link:hover { text-decoration-color: var(--ink); }
.hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .75rem;
    list-style: none;
    padding: 1.45rem 0 0;
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--hairline-strong);
}
.hero-facts li { min-width: 0; }
.hero-facts strong { display: block; font-size: .88rem; line-height: 1.3; }
.hero-facts span { display: block; margin-top: .23rem; color: var(--ink-soft); font-size: .75rem; }
.hero-visual {
    position: relative;
    margin: 0;
    height: clamp(470px, 50vw, 620px);
    border-radius: 46% 46% 28px 28px;
    background: #dfe9d5;
    box-shadow: 24px 26px 0 #e7ede2;
}
.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 44%;
    border-radius: inherit;
}
.hero-visual figcaption {
    position: absolute;
    right: -1.2rem;
    bottom: 1.4rem;
    max-width: 15ch;
    padding: .9rem 1.1rem;
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 14px 35px rgba(23,59,57,.13);
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.15;
    transform: rotate(-3deg);
}

/* A consistent reading rhythm for the long home page. */
.about, .educational-approach, .programs, .director-qualifications,
.branches, .activities, .contact { padding: clamp(4.5rem, 7vw, 7.5rem) 0; }
.about { background: #fff; }
.educational-approach { background: #edf5ef; }
.programs { background: var(--surface-sand); }
.director-qualifications { background: #fff; }
.branches { background: #e6f2f2; }
.activities { background: var(--surface-sand); }
.contact { background: #e2efe8; }
.section-head { margin-bottom: clamp(2rem, 3vw, 3.5rem); }
.section-head h2,
.about-text h2,
.contact-info h2,
.gallery-head h3,
.enrollment-header h1,
.policy-hero h1 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.08;
    text-wrap: balance;
}
.section-head h2,
.about-text h2,
.contact-info h2 { font-size: clamp(2.6rem, 4.5vw, 4.7rem); }
.section-tag {
    border-radius: 999px;
    padding: .42rem .9rem;
    background: #fff;
    border: 1px solid var(--hairline);
    color: #376c62;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
}
.section-tag .num { color: #a46642; }
.section-head .section-tag { margin-bottom: 1.1rem; }
.about-content { gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about-text { max-width: 610px; }
.about-text p { max-width: 56ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.about-text .text-link { display: inline-block; margin-top: 1rem; }
.about-image { flex: 1; }
.about-image img {
    width: 100%;
    height: clamp(360px, 42vw, 520px);
    border-radius: 30px;
    object-fit: cover;
    object-position: center;
    box-shadow: 16px 18px 0 #f7e6cc;
}

/* Learning principles: a calm palette and equal type contrast. */
.approach-grid--bento { gap: 1.2rem; }
.approach-grid--bento .approach-card {
    border-radius: 26px;
    padding: clamp(1.7rem, 3vw, 2.5rem);
    box-shadow: none;
    border: 1px solid var(--hairline);
}
.approach-grid--bento .approach-card--big:first-child { background: #fff; }
.approach-grid--bento .approach-card--lime { background: #fff1cc; }
.approach-grid--bento .approach-card--dark { background: var(--deep-black); color: #fff; }
.approach-grid--bento .approach-card h3 { font-family: var(--font-display); font-size: clamp(1.7rem,2.3vw,2.35rem); }
.approach-grid--bento .approach-card p { line-height: 1.65; }

/* Program cards put descriptions on a solid surface, not over photos. */
.programs-grid--bento { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; }
.programs-grid--bento .program-card,
.programs-grid--bento .program-card:hover {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: 26px;
    box-shadow: 0 12px 28px rgba(23,59,57,.055);
    overflow: hidden;
}
.programs-grid--bento .program-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(23,59,57,.11); }
.programs-grid--bento .program-card::before,
.programs-grid--bento .program-card::after { display: none; }
.programs-grid--bento .program-card-image { position: relative; inset: auto; height: 260px; flex: none; }
.programs-grid--bento .program-card-image img { height: 100%; object-fit: cover; }
.programs-grid--bento .program-card:nth-child(2) .program-card-image img { object-position: center 35%; }
.programs-grid--bento .program-card-overlay { top: 1rem; left: 1rem; right: 1rem; }
.programs-grid--bento .program-chip { background: #fff; color: var(--ink); border-color: transparent; }
.programs-grid--bento .program-card-num { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.programs-grid--bento .program-card-body { position: static; inset: auto; padding: 1.4rem 1.5rem 1.8rem; flex: 1; }
.programs-grid--bento .age-range { color: #8d6542; }
.programs-grid--bento .program-card h3 { color: var(--ink); font-family: var(--font-display); font-size: 1.65rem; line-height: 1.15; }
.programs-grid--bento .program-card p { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }

/* Secondary content retains personality without competing with admissions. */
.qualifications-bento .director-card,
.qualifications-bento .qual-card,
.branches-grid--bento .branch-card,
.events-grid--bento .event-card,
.gallery-grid--mosaic .gallery-item { border-radius: 25px; }
.qualifications-bento .qual-card { border: 1px solid var(--hairline); }
.branches-grid--bento { gap: 1.2rem; }
.branches-grid--bento .branch-card--primary { background: var(--deep-black); }
.branches-grid--bento .branch-card--secondary { background: #f8e8bf; }
.activities-intro { color: var(--ink-soft); }
.events-grid--bento { gap: 1.1rem; }
.events-grid--bento .event-card { box-shadow: none; }
.gallery-grid--mosaic { gap: .85rem; }
.gallery-head h3 { font-size: clamp(2.3rem,3.6vw,3.8rem); }

/* Contact makes the real alternatives visible before the embedded form. */
.contact-content { gap: clamp(2rem,4vw,4.5rem); }
.contact-info > p { color: var(--ink-soft); line-height: 1.7; }
.contact-item { padding-bottom: 1.1rem; border-bottom: 1px solid var(--hairline); }
.contact-item h4 { color: #49746b; }
.contact-form {
    border: 1px solid var(--hairline);
    border-radius: 26px;
    box-shadow: 0 16px 40px rgba(23,59,57,.07);
}
.contact-form h3 { font-family: var(--font-display); font-size: 1.7rem; }
.contact-form .form-container { border: 0; padding: 0; }
.form-fallback { margin-top: .3rem; text-align: left; }
.form-help { margin-top: .35rem; text-align: left; }
.contact-form .google-form { margin-top: 1.25rem; }

.footer { background: var(--deep-black); }
.footer-mega { font-family: var(--font-display); letter-spacing: -.05em; }
.footer-col h4 { color: #fff; opacity: .8; }
.footer-col--admissions p { max-width: 24ch; }
.footer-admissions-link { color: var(--signal-lime) !important; }
.footer-copy, .footer-credit { color: rgba(255,255,255,.65); }

/* The same visual language continues through admissions and policy pages. */
.enrollment-section { background: #e1f0e8; min-height: 0; padding: clamp(4rem,6vw,6rem) 0; }
.enrollment-header h1 { font-size: clamp(2.7rem,4.5vw,4.5rem); }
.enrollment-header h1::after { background: #d99e5e; }
.enrollment-header p { color: var(--ink-soft); }
.admissions-contact-panel { border-radius: 28px; box-shadow: 0 18px 42px rgba(23,59,57,.08); }
.admissions-contact-panel h2 { font-family: var(--font-display); }
.policy-hero { background: var(--deep-black); }
.policy-hero h1 { font-size: clamp(2.6rem,4.5vw,4.5rem); }
.policy-body { background: var(--surface-sand); }
.policy-content .contact-box { background: #fff; }

@media (max-width: 1100px) {
    .navigation ul { gap: 0; }
    .navigation a { padding-inline: .45rem; font-size: .81rem; }
    .navigation .nav-apply { padding-inline: .8rem; }
    .hero .hero-grid { gap: 2.5rem; }
    .hero-title { font-size: clamp(3.2rem,5.2vw,5rem); }
}

@media (max-width: 968px) {
    .programs-grid--bento { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .programs-grid--bento .program-card--primary { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .navigation .nav-apply { display: none; }
    .hero .hero-grid { gap: 2rem; }
    .hero-visual { height: 500px; }
    .hero-visual figcaption { right: -.3rem; }
}

@media (max-width: 768px) {
    .container { padding-inline: 20px; }
    .header { padding: .55rem 0; }
    .logo-img { height: 42px; width: 42px; }
    .logo .logo-name { font-size: .9rem; }
    .logo .logo-subtitle { font-size: .61rem; }
    .navigation .nav-apply-item { display: list-item; }
    .navigation .nav-apply { display: none; }
    .navigation ul { background: var(--surface-sand); border: 1px solid var(--hairline); }
    .navigation ul a { color: var(--ink); }
    .mobile-menu-btn { border-color: var(--hairline-strong); color: var(--ink); }
    .mobile-menu-btn span { background: var(--ink); }
    .hero { padding: 2.3rem 0 3.5rem !important; }
    .hero .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .hero-content { margin: 0; }
    .hero-title { font-size: clamp(3rem,10vw,4.6rem); max-width: 12ch; }
    .hero-subtitle { font-size: 1.03rem; }
    .hero-facts { margin-top: 2rem; }
    .hero-visual { height: min(112vw,560px); max-width: 620px; width: calc(100% - 18px); margin: 0 auto 10px 0; }
    .hero-visual figcaption { right: -1rem; }
    .section-head h2,
    .section-head-left h2,
    .programs h2,
    .activities h2,
    .branches h2,
    .director-qualifications h2,
    .educational-approach h2,
    .contact-info h2,
    .about-text h2,
    .enrollment-header h1,
    .gallery-head h3 {
        font-size: clamp(2.35rem,7.5vw,3.35rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.045em !important;
    }
    .about-image img { height: min(70vw,390px); max-height: none; }
    .programs-grid--bento { grid-template-columns: 1fr; }
    .programs-grid--bento .program-card--primary { grid-column: auto; }
    .programs-grid--bento .program-card { min-height: 0; }
    .programs-grid--bento .program-card-image { height: 240px; }
    .contact-form { width: 100%; }
    .footer-mega { line-height: 1; }
}

@media (max-width: 520px) {
    .announcement-banner .container { gap: .15rem .45rem; }
    .announcement-banner { font-size: .78rem; line-height: 1.4; }
    .announcement-separator { display: none; }
    .nav-container { gap: .4rem; }
    .logo { gap: .38rem; }
    .logo-img { width: 35px; height: 35px; }
    .logo .logo-name { font-size: .78rem; }
    .logo .logo-subtitle { font-size: .53rem; }
    .navigation { gap: .35rem; }
    .hero-eyebrow { font-size: .72rem; letter-spacing: .08em; }
    .hero-title { font-size: clamp(2.75rem,11.3vw,3.8rem); }
    .hero-cta { align-items: stretch; flex-direction: column; }
    .hero-cta .cta-button { justify-content: center; }
    .hero-facts { gap: .55rem; }
    .hero-facts strong { font-size: .82rem; }
    .hero-facts span { font-size: .73rem; }
    .hero-visual { height: min(112vw,470px); box-shadow: 12px 14px 0 #e7ede2; }
    .hero-visual figcaption { right: -.5rem; font-size: .98rem; }
    .about, .educational-approach, .programs, .director-qualifications,
    .branches, .activities, .contact { padding: 4rem 0; }
    .contact-form { padding: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-visual figcaption,
    .programs-grid--bento .program-card:hover { transform: none; }
}

/* Reference-led visual direction: cream canvas, oversized rounded lettering,
   bubblegum pink controls and playful geometric color blocks. */
:root {
    --deep-black: #292925;
    --ink: #292925;
    --ink-soft: #585a54;
    --ink-faint: #777a72;
    --base-white: #fffdf7;
    --surface-sand: #faf7ec;
    --soft-blue: #bdcfee;
    --mint-layer: #a2b16f;
    --signal-lime: #f9d970;
    --text-subtle: #fffdf7;
    --hairline: rgba(41,41,37,.12);
    --hairline-strong: rgba(41,41,37,.22);
    --font-display: 'Outfit', 'Arial Rounded MT Bold', sans-serif;
    --pink: #f7abd4;
    --pink-soft: #fbe3e9;
    --yellow: #f9d970;
    --blue: #bdcfee;
    --olive: #a2b16f;
    --cream: #faf7ec;
}
html { scroll-padding-top: 110px; }
body { background: var(--cream); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Onest', 'Segoe UI', sans-serif; }
::selection { background: var(--pink); color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 3px solid #d7539c; outline-offset: 4px; }

/* Header stays compact so the illustration and headline lead the page. */
.announcement-banner { background: var(--yellow); color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .03em; }
.announcement-banner .announcement-separator { color: var(--ink); opacity: .48; }
.announcement-banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.header { background: rgba(250,247,236,.97); border-bottom: 1px solid var(--hairline); box-shadow: none; }
.logo .logo-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -.045em; }
.logo .logo-subtitle { color: var(--ink-soft); }
.navigation a { color: var(--ink); font-weight: 600; }
.navigation a:hover { background: var(--pink-soft); }
.navigation .nav-apply { background: var(--pink); color: var(--ink); box-shadow: none; border-radius: 16px; padding: .76rem 1rem; font-weight: 800; }
.navigation .nav-apply:hover { background: #f58ac4; transform: translateY(-2px); }
.lang-btn { border: 1.5px solid var(--ink); background: transparent; border-radius: 15px; box-shadow: none; }
.lang-btn:hover { background: var(--yellow); }
.mobile-menu-btn { border-radius: 14px; }

/* A type-led hero with an abstract playground built in CSS around a school photo. */
.hero { background: var(--cream); padding: clamp(2.7rem,5vw,5.5rem) 0 clamp(4.5rem,7vw,7rem); }
.hero .hero-grid { grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(2rem,4vw,4.5rem); min-height: 620px; }
.hero-content { align-self: center; }
.hero-text { max-width: 720px; }
.hero-eyebrow { padding: .52rem .82rem; border-radius: 999px; background: var(--pink-soft); color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.hero-eyebrow::before { background: var(--pink); width: 9px; height: 9px; }
.hero-title { max-width: 10.8ch; margin: 1.55rem 0 1.4rem; font-family: var(--font-display); font-size: clamp(4rem,6.15vw,7.6rem); font-weight: 800; letter-spacing: -.075em; line-height: .94; color: var(--ink); }
.hero-subtitle { max-width: 47ch; color: var(--ink-soft); font-size: clamp(1rem,1.35vw,1.18rem); line-height: 1.65; }
.hero-cta { gap: .9rem 1.2rem; margin-top: 2rem; }
.cta-button { background: var(--pink); color: var(--ink); border: 0; box-shadow: none; border-radius: 17px; padding: 1rem 1.35rem; min-height: 54px; font-weight: 800; }
.cta-button:hover { background: #f58ac4; color: var(--ink); box-shadow: none; transform: translateY(-2px); }
.hero-link, .text-link { color: var(--ink); font-weight: 700; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.hero-facts { gap: .55rem; border: 0; margin-top: 2.4rem; padding: 0; }
.hero-facts li { background: var(--yellow); border-radius: 16px; padding: .9rem .8rem; }
.hero-facts li:nth-child(2) { background: var(--blue); }
.hero-facts li:nth-child(3) { background: #e5ebcd; }
.hero-facts strong { font-weight: 800; font-size: .86rem; }
.hero-facts span { color: #54564d; font-size: .74rem; }
.hero-visual { height: clamp(520px,46vw,650px); border-radius: 34px; background: var(--pink); box-shadow: none; overflow: hidden; isolation: isolate; }
.hero-visual::before { content: ''; display: block; position: absolute; width: 85%; aspect-ratio: 1; left: -28%; top: 15%; border-radius: 50%; background: var(--yellow); z-index: 0; }
.hero-visual::after { content: ''; display: block; position: absolute; width: 74%; height: 66%; right: -23%; top: -16%; background: var(--blue); border-radius: 43% 57% 58% 42%; transform: rotate(-18deg); z-index: 0; }
.hero-shape { position: absolute; display: block; pointer-events: none; }
.hero-shape--blue { left: -13%; bottom: -11%; width: 58%; aspect-ratio: 1; background: var(--blue); clip-path: polygon(50% 0,64% 27%,92% 12%,78% 42%,100% 60%,70% 64%,75% 100%,49% 78%,20% 98%,27% 65%,0 50%,29% 39%,15% 12%); transform: rotate(-16deg); z-index: 1; }
.hero-shape--olive { right: -6%; bottom: -9%; width: 45%; aspect-ratio: 1; background: var(--olive); clip-path: polygon(0 18%,75% 0,100% 78%,20% 100%); transform: rotate(15deg); z-index: 1; }
.hero-shape--spark { left: 14%; top: 12%; width: 22%; aspect-ratio: 1; border: 18px solid var(--cream); border-radius: 40% 60% 38% 62%; transform: rotate(32deg); z-index: 1; }
.hero-visual img { position: absolute; width: 58%; height: 72%; right: 8%; bottom: 7%; border: 8px solid var(--cream); border-radius: 48% 48% 25px 25px; object-fit: cover; object-position: center 44%; transform: rotate(4deg); box-shadow: 0 20px 35px rgba(41,41,37,.18); z-index: 2; }
.hero-visual figcaption { left: 8%; right: auto; bottom: 10%; max-width: 8.5ch; background: var(--cream); color: var(--ink); font-family: var(--font-display); font-size: clamp(1.25rem,2.2vw,2rem); font-weight: 800; line-height: 1.03; letter-spacing: -.05em; border-radius: 22px; padding: .9rem 1rem; transform: rotate(-7deg); box-shadow: 0 12px 20px rgba(41,41,37,.12); z-index: 3; }

/* Bright modular sections, broad headings, and tactile cards. */
.about, .educational-approach, .programs, .director-qualifications, .branches, .activities, .contact { padding: clamp(5rem,7vw,8rem) 0; }
.about { background: #fffdf7; }
.educational-approach { background: #f9e9ed; }
.programs { background: var(--cream); }
.director-qualifications { background: #edf0df; }
.branches { background: #f9e6ec; }
.activities { background: var(--cream); }
.contact { background: #e7edda; }
.section-head { margin-bottom: clamp(2.2rem,4vw,4rem); }
.section-head h2, .about-text h2, .contact-info h2, .gallery-head h3, .enrollment-header h1, .policy-hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.065em; line-height: .98; color: var(--ink); }
.section-head h2, .about-text h2, .contact-info h2 { font-size: clamp(3rem,5vw,5.3rem); max-width: 14ch; }
.section-tag { display: inline-flex; align-items: center; gap: .3rem; background: var(--yellow); color: var(--ink); border: 0; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; padding: .48rem .9rem; }
.section-tag .num { color: var(--ink); opacity: .56; }
.about-text p { color: var(--ink-soft); line-height: 1.7; }
.about-image { position: relative; }
.about-image::before { content: ''; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); right: -6%; top: -7%; }
.about-image img { position: relative; border-radius: 34px; box-shadow: 18px 18px 0 var(--blue); transform: rotate(2deg); }

.approach-grid--bento .approach-card, .approach-grid--bento .approach-card--big:first-child { border: 2px dashed #e99ac5; background: #fffdf7; border-radius: 30px; min-height: 350px; }
.approach-grid--bento .approach-card--lime { background: #fff0bf; }
.approach-grid--bento .approach-card--dark { background: var(--blue); color: var(--ink); }
.approach-grid--bento .approach-card.approach-card--dark h3, .approach-grid--bento .approach-card.approach-card--dark p { color: var(--ink); }
.approach-grid--bento .approach-card-icon, .approach-grid--bento .approach-card--dark .approach-card-icon, .approach-grid--bento .approach-card--lime .approach-card-icon { background: var(--pink); color: var(--ink); border: 0; border-radius: 17px; width: 62px; height: 62px; }
.approach-grid--bento .approach-card--lime .approach-card-icon { background: var(--olive); }
.approach-grid--bento .approach-card--dark .approach-card-icon { background: var(--yellow); }
.approach-grid--bento .approach-card h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.045em; font-size: clamp(1.8rem,2.4vw,2.55rem); }
.approach-grid--bento .approach-card p { color: var(--ink-soft); }
.approach-grid--bento .approach-card--wide { min-height: 260px; }
.approach-grid--bento .approach-card::after { color: var(--ink); opacity: .5; }

.programs-grid--bento .program-card, .programs-grid--bento .program-card:hover { border: 2px dashed #eaa8cc; background: #fffdf7; border-radius: 30px; box-shadow: none; }
.programs-grid--bento .program-card:hover { transform: translateY(-4px); box-shadow: 0 14px 0 rgba(247,171,212,.23); }
.programs-grid--bento .program-card-image { margin: 12px 12px 0; width: calc(100% - 24px); height: 245px; border-radius: 21px; overflow: hidden; }
.programs-grid--bento .program-card-overlay { top: 1.6rem; left: 1.6rem; right: 1.6rem; }
.programs-grid--bento .program-chip { background: var(--pink); color: var(--ink); border: 0; font-weight: 800; }
.programs-grid--bento .program-card-num { color: var(--ink); background: var(--yellow); padding: .35rem .55rem; border-radius: 10px; text-shadow: none; }
.programs-grid--bento .program-card-body { padding: 1.4rem 1.45rem 1.8rem; }
.programs-grid--bento .program-card h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; font-size: clamp(1.6rem,2vw,2.2rem); }
.programs-grid--bento .age-range { color: #5a5d47; font-weight: 800; }

.qualifications-bento .director-card { border-radius: 30px; min-height: 390px; }
.qualifications-bento .director-card-body h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; }
.qualifications-bento .director-chip { background: var(--pink); color: var(--ink); border: 0; font-weight: 800; }
.qualifications-bento .director-chip-dot { background: var(--ink); animation: none; }
.qualifications-bento .qual-card { border-radius: 30px; box-shadow: none; border: 2px dashed #ddabc7; }
.qualifications-bento .qual-card--canadian { background: #fff0bd; }
.qualifications-bento .qual-card--lankan { background: #d4dff4; }
.qualifications-bento .qual-card h4 { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; }

.branches-grid--bento .branch-card--primary, .branches-grid--bento .branch-card--secondary { color: var(--ink); border: 0; box-shadow: none; border-radius: 32px; }
.branches-grid--bento .branch-card--primary { background: var(--yellow); }
.branches-grid--bento .branch-card--secondary { background: var(--blue); }
.branches-grid--bento .branch-card--primary h3, .branches-grid--bento .branch-card--secondary h3 { color: var(--ink); font-family: var(--font-display); font-weight: 800; letter-spacing: -.045em; font-size: clamp(2rem,3vw,3rem); }
.branches-grid--bento .branch-chip, .branches-grid--bento .branch-card--secondary .branch-chip { background: #fffdf7; color: var(--ink); border: 0; font-weight: 800; }
.branches-grid--bento .branch-card--primary .branch-card-num { color: rgba(41,41,37,.5); }
.branches-grid--bento .branch-card-icon, .branches-grid--bento .branch-card--secondary .branch-card-icon { background: var(--pink); color: var(--ink); border: 0; border-radius: 20px; }
.branches-grid--bento .branch-address, .branches-grid--bento .branch-card--secondary .branch-address { background: rgba(255,253,247,.62); color: var(--ink); border-left: 0; border-radius: 13px; }
.branches-grid--bento .branch-card::after { color: var(--ink); opacity: 1; transform: none; }

.events-grid--bento { gap: 1rem; }
.events-grid--bento .event-card { display: flex; flex-direction: column; background: #fffdf7; color: var(--ink); border: 2px dashed #eaa8cc; border-radius: 27px; box-shadow: none; }
.events-grid--bento .event-card--featured { min-height: 510px; }
.events-grid--bento .event-card--small { min-height: 245px; }
.events-grid--bento .event-card::before { display: none; }
.events-grid--bento .event-image { position: relative; inset: auto; height: 60%; min-height: 145px; flex: 1; margin: 10px 10px 0; border-radius: 18px; }
.events-grid--bento .event-card--featured .event-image { min-height: 330px; }
.events-grid--bento .event-card-overlay { top: 1.3rem; left: 1.3rem; right: 1.3rem; }
.events-grid--bento .event-chip { background: var(--pink); color: var(--ink); border: 0; font-weight: 800; }
.events-grid--bento .event-card-num { color: var(--ink); background: var(--yellow); padding: .32rem .5rem; border-radius: 9px; }
.events-grid--bento .event-card-body, .events-grid--bento .event-card--featured .event-card-body { position: static; padding: 1rem 1.3rem 1.3rem; flex: none; }
.events-grid--bento .event-card-body h4, .events-grid--bento .event-card--featured .event-card-body h4 { color: var(--ink); font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; }
.events-grid--bento .event-card-body p, .events-grid--bento .event-card--featured .event-card-body p { color: var(--ink-soft); }
.gallery-head h3 { font-size: clamp(2.6rem,4.5vw,4.9rem); }
.gallery-grid--mosaic .gallery-item { border: 7px solid #fffdf7; border-radius: 28px; box-shadow: 0 0 0 1px #e5d9d3; }
.gallery-load-more, .gallery-collapse { background: var(--pink); color: var(--ink); border: 0; border-radius: 16px; font-weight: 800; }
.gallery-load-more:hover, .gallery-collapse:hover { background: #f58ac4; color: var(--ink); }

.contact-info > p { color: var(--ink-soft); }
.contact-item { border-bottom: 1px solid var(--hairline-strong); }
.contact-item h4 { color: var(--ink); font-weight: 800; }
.contact-form { background: #fffdf7; border: 2px dashed #dba9c4; border-radius: 30px; box-shadow: none; }
.contact-form h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; font-size: 2rem; }
.contact-form .form-fallback a { color: var(--ink); background: var(--pink); border-radius: 14px; padding: .65rem .85rem; display: inline-block; font-weight: 800; }
.footer { background: var(--ink); }
.footer-mega { font-family: var(--font-display); font-weight: 800; letter-spacing: -.075em; }
.footer-admissions-link { color: var(--pink) !important; }

/* The same cheerful system carries through admissions and legal pages. */
.enrollment-section { background: var(--cream); }
.enrollment-header h1 { font-size: clamp(3.2rem,5vw,5.6rem); }
.enrollment-header p { color: var(--ink-soft); }
.admissions-contact-panel { background: #fffdf7; border: 2px dashed #dba9c4; border-radius: 32px; box-shadow: none; }
.admissions-contact-panel h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.05em; }
.admissions-year { background: var(--yellow); color: var(--ink); }
.policy-hero { background: var(--pink-soft); color: var(--ink); }
.policy-hero h1 { color: var(--ink); font-size: clamp(3.2rem,5vw,5.6rem); }
.policy-hero p, .policy-hero .last-updated { color: var(--ink-soft); }
.policy-hero .policy-tag { background: var(--yellow); color: var(--ink); border: 0; }
.policy-body { background: var(--cream); }
.policy-content .contact-box { background: #fffdf7; border: 2px dashed #dba9c4; border-radius: 25px; }

@media (max-width: 1100px) {
    .hero-title { font-size: clamp(3.7rem,6vw,5.8rem); }
    .hero .hero-grid { min-height: 550px; }
}
@media (max-width: 900px) {
    .hero .hero-grid { min-height: 0; }
    .hero-visual { height: 500px; }
    .hero-title { font-size: clamp(3.5rem,6.1vw,5rem); }
    .events-grid--bento .event-card--featured { min-height: 450px; }
}
@media (max-width: 768px) {
    .navigation ul { background: var(--cream); border: 1.5px solid var(--ink); border-radius: 19px; }
    .navigation ul a { border-radius: 12px; }
    .hero { padding: 2rem 0 4rem !important; }
    .hero .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero-title { font-size: clamp(3.5rem,10.5vw,5rem); max-width: 12ch; }
    .hero-visual { width: 100%; height: min(95vw,570px); min-height: 440px; margin: 0; }
    .hero-visual img { width: 55%; height: 72%; }
    .hero-visual figcaption { font-size: clamp(1.25rem,3.7vw,2rem); }
    .section-head h2, .section-head-left h2, .programs h2, .activities h2, .branches h2, .director-qualifications h2, .educational-approach h2, .contact-info h2, .about-text h2, .enrollment-header h1, .gallery-head h3 { font-size: clamp(2.8rem,8.6vw,4rem) !important; line-height: .98 !important; letter-spacing: -.065em !important; }
    .about-image img { transform: rotate(0); }
    .events-grid--bento { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .events-grid--bento .event-card--featured { grid-column: 1 / -1; grid-row: auto; }
    .events-grid--bento .event-card--small { min-height: 280px; }
    .events-grid--bento .event-card--featured .event-image { min-height: 270px; }
}
@media (max-width: 520px) {
    .announcement-banner { font-size: .73rem; }
    .hero-eyebrow { font-size: .62rem; }
    .hero-title { font-size: clamp(3.2rem,12.6vw,4.4rem); }
    .hero-subtitle { font-size: 1.02rem; }
    .hero-facts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .38rem; }
    .hero-facts li { padding: .75rem .55rem; border-radius: 13px; }
    .hero-facts strong { font-size: .74rem; }
    .hero-facts span { font-size: .65rem; }
    .hero-visual { min-height: 365px; height: 110vw; border-radius: 24px; }
    .hero-visual img { width: 61%; height: 70%; right: 6%; bottom: 7%; border-width: 6px; }
    .hero-visual figcaption { left: 5%; bottom: 9%; max-width: 8ch; font-size: 1.12rem; border-radius: 16px; padding: .7rem .8rem; }
    .hero-shape--spark { border-width: 10px; }
    .approach-grid--bento .approach-card { min-height: 310px; }
    .events-grid--bento { grid-template-columns: 1fr; }
    .events-grid--bento .event-card--featured { grid-column: auto; }
    .events-grid--bento .event-card--small { min-height: 320px; }
    .events-grid--bento .event-card--small .event-image { min-height: 210px; }
    .gallery-grid--mosaic .gallery-item { border-width: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-visual img, .about-image img { transform: none; }
}

/* A real contact action replaces the inaccessible embedded form. */
.contact-card { position: relative; display: flex; flex-direction: column; min-height: 570px; overflow: hidden; padding: clamp(1.7rem,3vw,2.8rem); background: var(--pink-soft); }
.contact-card-kicker { align-self: flex-start; position: relative; z-index: 2; padding: .48rem .78rem; border-radius: 999px; background: var(--yellow); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.contact-card h3 { position: relative; z-index: 2; max-width: 8ch; margin: 1.4rem 0 1rem; font-family: var(--font-display); font-size: clamp(3rem,4vw,4.7rem); font-weight: 800; line-height: .95; letter-spacing: -.07em; }
.contact-card > p { position: relative; z-index: 2; max-width: 43ch; color: var(--ink-soft); line-height: 1.65; }
.contact-card-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; margin-top: 1.3rem; }
.contact-card-art { position: relative; width: 100%; height: 170px; margin-top: auto; overflow: hidden; }
.contact-card-art span { position: absolute; display: block; }
.contact-card-art span:nth-child(1) { width: 225px; aspect-ratio: 1; left: -26px; top: 13px; border-radius: 50%; background: var(--yellow); }
.contact-card-art span:nth-child(2) { width: 210px; aspect-ratio: 1; right: 11%; top: -6px; background: var(--blue); clip-path: polygon(50% 0,63% 31%,96% 13%,76% 48%,100% 67%,63% 66%,56% 100%,39% 68%,5% 83%,26% 50%,0 30%,37% 34%); transform: rotate(15deg); }
.contact-card-art span:nth-child(3) { width: 140px; aspect-ratio: 1; right: -6%; bottom: -66px; background: var(--olive); transform: rotate(20deg); }
.mobile-menu-btn[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 520px) {
    .contact-card { min-height: 510px; padding: 1.5rem; }
    .contact-card h3 { font-size: 3.2rem; }
    .contact-card-actions { align-items: stretch; flex-direction: column; }
    .contact-card-actions .cta-button { justify-content: center; }
}
.footer-mega .scribble { align-self: center; font-family: var(--font-display); font-size: .21em; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); background: var(--pink); border-radius: 999px; padding: .28em .5em; transform: rotate(-5deg); }
.footer-mega::after { color: var(--yellow); -webkit-text-stroke-color: var(--yellow); }
.policy-hero > .container > p { color: var(--ink-soft); }

/* Translucent black navigation glass above the pastel page. */
.header {
    background: rgba(19, 19, 21, .78);
    color: #fffdf7;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 12px 32px rgba(15, 15, 17, .16);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}
.logo {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    padding: .2rem .65rem .2rem .2rem;
    color: #fffdf7;
}
.logo .logo-name { color: #fffdf7; }
.logo .logo-subtitle { color: rgba(255, 253, 247, .72); }
.navigation a { color: #fffdf7; }
.navigation a:hover { color: #fffdf7; background: rgba(255, 255, 255, .14); }
.navigation .nav-apply, .navigation .nav-apply:hover { color: var(--ink); }
.lang-btn {
    color: #fffdf7;
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .08);
}
.lang-btn:hover { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.mobile-menu-btn {
    color: #fffdf7;
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .08);
}
.mobile-menu-btn span { background: currentColor; }
@media (max-width: 768px) {
    .navigation ul {
        background: rgba(23, 23, 25, .97);
        border: 1px solid rgba(255, 255, 255, .18);
        box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
        backdrop-filter: blur(22px) saturate(140%);
        -webkit-backdrop-filter: blur(22px) saturate(140%);
    }
    .navigation ul a { color: #fffdf7; }
    .navigation ul a:hover { color: #fffdf7; background: rgba(255, 255, 255, .13); }
}

/* Parent library: bold editorial type, friendly colour, and readable long-form text. */
.resources-section { padding: clamp(4.5rem, 7vw, 7rem) 0; background: var(--cream); }
.resources-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.resources-heading h2, .resources-hero h1, .article-hero h1, .resource-cta h2,
.admissions-details h2, .admissions-faq h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.065em; line-height: .98; color: var(--ink); }
.resources-heading h2 { font-size: clamp(3.2rem, 5vw, 5.8rem); margin: 1rem 0 0; }
.resources-heading > p { max-width: 33ch; margin: 0 0 .35rem; font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.resource-card { display: flex; flex-direction: column; min-width: 0; padding: 1.3rem; border: 2px dashed #e7b6d2; border-radius: 28px; color: var(--ink); text-decoration: none; background: #fffdf7; transition: transform .2s ease, box-shadow .2s ease; }
.resource-card:hover, .resource-card:focus-visible { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(36, 35, 32, .1); }
.resource-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.resource-card__tag { align-self: flex-start; padding: .48rem .72rem; border-radius: 999px; background: var(--pink); font-size: .68rem; font-weight: 800; letter-spacing: .06em; }
.resource-card--yellow .resource-card__tag { background: var(--yellow); }
.resource-card--blue .resource-card__tag { background: var(--blue); }
.resource-card img { display: block; width: 100%; height: 215px; margin: 1.1rem 0 1.4rem; border-radius: 19px; object-fit: cover; }
.resource-card h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2vw, 2.25rem); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
.resource-card p { margin: .85rem 0 1.5rem; color: var(--ink-soft); line-height: 1.58; }
.resource-card__link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid rgba(36,35,32,.16); font-weight: 800; }
.resource-card__link span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--pink); }
.resources-all { display: inline-flex; gap: 1.8rem; align-items: center; margin-top: 2rem; padding: .95rem 1.2rem; border-radius: 15px; background: var(--ink); color: #fffdf7; text-decoration: none; font-weight: 700; }
.resources-all:hover { background: #3c3b38; color: #fffdf7; }
.resources-hero { padding: clamp(3.5rem, 6vw, 6rem) 0; background: var(--pink-soft); }
.resources-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.resources-hero h1 { max-width: 10ch; margin: 1.3rem 0; font-size: clamp(4rem, 7vw, 7.8rem); }
.resources-hero h1 em { font-style: normal; color: #d852a0; }
.resources-hero p { max-width: 50ch; margin-bottom: 1.6rem; font-size: 1.18rem; line-height: 1.6; color: var(--ink-soft); }
.resources-hero .resource-language-note { margin-top: -.7rem; font-size: .85rem; font-weight: 700; }
.resources-hero__art { position: relative; padding: 1rem; border-radius: 30px; background: var(--yellow); transform: rotate(2deg); }
.resources-hero__art img { display: block; width: 100%; height: min(35vw, 470px); min-height: 320px; object-fit: cover; border-radius: 21px; }
.resources-hero__art span { position: absolute; right: -1rem; bottom: -1rem; max-width: 12ch; padding: .9rem; border-radius: 16px; background: var(--blue); font-weight: 800; line-height: 1.1; transform: rotate(-6deg); }
.resources-section--hub { background: var(--cream); }
.resource-cta { padding: clamp(3.5rem, 6vw, 6rem) 0; background: var(--blue); text-align: center; }
.resource-cta h2 { font-size: clamp(3.4rem, 6vw, 6rem); margin: 0 0 1rem; }
.resource-cta p { max-width: 45ch; margin: 0 auto 1.5rem; line-height: 1.6; }
.resource-cta a { display: inline-block; padding: .95rem 1.3rem; border-radius: 15px; background: var(--pink); color: var(--ink); text-decoration: none; font-weight: 800; }
.resource-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding-top: 1.35rem; padding-bottom: 1.35rem; font-size: .78rem; color: var(--ink-soft); }
.resource-breadcrumb a { color: var(--ink); text-underline-offset: 3px; }
.resource-breadcrumb [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42ch; }
.article-hero { padding: clamp(2rem, 4vw, 4rem) 0; background: var(--yellow-pale, #fff0bc); }
.article-hero__grid { display: grid; grid-template-columns: 1.16fr .84fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.article-hero h1 { max-width: 15ch; margin: 1.2rem 0; font-size: clamp(3.5rem, 5.5vw, 6.3rem); }
.article-hero p { max-width: 50ch; font-size: 1.17rem; line-height: 1.58; color: var(--ink-soft); }
.article-byline { display: block; margin-top: 1.3rem; font-size: .82rem; font-weight: 700; }
.article-hero figure { margin: 0; padding: .85rem; background: var(--pink); border-radius: 27px; transform: rotate(2deg); }
.article-hero figure img { display: block; width: 100%; max-height: 410px; min-height: 300px; object-fit: cover; border-radius: 20px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 740px) minmax(210px, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
.article-content { font-size: 1.09rem; line-height: 1.77; color: #393936; }
.article-content p, .article-content ul, .article-content ol { margin: 0 0 1.45rem; }
.article-content h2 { margin: 2.6rem 0 .85rem; font-family: var(--font-display); font-size: clamp(2.1rem, 3.2vw, 3.2rem); font-weight: 800; line-height: 1.06; letter-spacing: -.05em; color: var(--ink); scroll-margin-top: 125px; }
.article-content .article-lede { font-size: 1.34rem; line-height: 1.58; color: var(--ink); }
.article-content a { color: #995074; font-weight: 700; text-underline-offset: 3px; }
.article-content li { padding-left: .3rem; margin-bottom: .8rem; }
.guide-checklist { list-style: none; padding: 0; }
.guide-checklist li { position: relative; padding: .75rem 1rem .75rem 2.7rem; margin-bottom: .55rem; border-radius: 13px; background: #fff6dc; }
.guide-checklist li::before { content: '✓'; position: absolute; left: 1rem; color: #9d5790; font-weight: 900; }
.guide-steps { padding-left: 1.4rem; }
.article-callout { margin: 2.5rem 0; padding: clamp(1.5rem, 3vw, 2.3rem); border-radius: 24px; background: var(--pink-soft); }
.article-callout > strong { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; letter-spacing: -.03em; }
.article-callout p { margin: .8rem 0 !important; }
.article-aside { position: sticky; top: 120px; }
.article-aside > div { display: grid; gap: .8rem; padding: 1.4rem; border-radius: 23px; background: #f7f2e5; }
.article-aside span { font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.article-aside h2 { margin: .2rem 0 .5rem; font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.article-aside a { color: var(--ink); font-weight: 700; text-decoration: none; border-top: 1px solid rgba(36,35,32,.18); padding-top: .7rem; }
.article-aside a:hover { text-decoration: underline; }
.resources-section--related { background: #fff8e8; }
.resources-section--related .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admissions-details, .admissions-faq { padding: clamp(4rem, 7vw, 7rem) 0; }
.admissions-details { background: var(--yellow-pale, #fff0bc); }
.admissions-details__intro { max-width: 720px; }
.admissions-details h2, .admissions-faq h2 { font-size: clamp(3.2rem, 5vw, 5.6rem); margin: 1rem 0; }
.admissions-details__intro p { font-size: 1.12rem; line-height: 1.6; }
.admissions-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.admissions-steps > div { padding: clamp(1.3rem, 2.3vw, 2rem); border-radius: 24px; background: #fffdf7; }
.admissions-steps span { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--pink); font-weight: 800; }
.admissions-steps h3 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; margin: 1.6rem 0 .7rem; letter-spacing: -.03em; }
.admissions-steps p { margin: 0; line-height: 1.6; color: var(--ink-soft); }
.admissions-faq { background: var(--cream); }
.admissions-faq__items { max-width: 850px; margin-top: 2rem; }
.admissions-faq details { padding: 1.2rem 0; border-bottom: 1px solid rgba(36,35,32,.19); }
.admissions-faq summary { cursor: pointer; padding-right: 1.5rem; font-weight: 800; font-size: 1.1rem; }
.admissions-faq details p { max-width: 70ch; margin: .85rem 0 0; line-height: 1.65; color: var(--ink-soft); }
.admissions-faq details a { color: #995074; font-weight: 700; }
@media (max-width: 1100px) and (min-width: 769px) { .navigation { gap: .35rem; } .navigation a { font-size: .76rem; padding-inline: .34rem; } .logo .logo-name { font-size: .88rem; } }
@media (max-width: 850px) { .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .resources-hero__grid, .article-hero__grid { grid-template-columns: 1fr; } .resources-hero__art { max-width: 640px; } .resources-hero__art img { height: 350px; } .article-hero figure { max-width: 680px; } .article-layout { grid-template-columns: 1fr; } .article-aside { position: static; } }
@media (max-width: 640px) { .resources-heading { display: block; } .resources-heading > p { margin-top: 1rem; } .resource-grid, .resources-section--related .resource-grid, .admissions-steps { grid-template-columns: 1fr; } .resource-card img { height: 215px; } .resources-hero h1 { font-size: clamp(3.4rem, 11vw, 5rem); } .resources-hero__art { margin-right: 1rem; } .article-hero h1 { font-size: clamp(3.1rem, 10vw, 4.5rem); } .article-hero figure img { min-height: 220px; } .article-content { font-size: 1rem; } .article-content .article-lede { font-size: 1.18rem; } .resource-breadcrumb [aria-current] { max-width: 19ch; } }
@media (prefers-reduced-motion: reduce) { .resource-card { transition: none; } .resource-card:hover { transform: none; } }
@media print { .header, .announcement-banner, .footer, .article-aside, .resources-section--related { display: none !important; } .article-layout { display: block; } .article-content { color: #000; } }