/* Friendship College Boys — Modern, distinct design */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* ── Global text justification ───────────────────────────────────────────── */
p, li, td, .prose p, .prose li, blockquote {
    text-align: justify;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Contact page map — smaller on mobile */
.contact-map-iframe {
    height: 380px;
    min-height: 380px;
}
@media (min-width: 640px) {
    .contact-map-iframe { height: 550px; min-height: 550px; }
}
@media (min-width: 1024px) {
    .contact-map-iframe { height: 650px; min-height: 650px; }
}

:root {
    --brand-primary: #2272ab;
    --brand-accent: #2F80ED;
    --brand-dark: #0F2F4A;
    --brand-teal: #0ea5a4;
    --memoir-sky: #e8f4fc;
    --memoir-wave-top: #b8daf5;
    --memoir-wave-deep: #2272ab;
    --memoir-band-h: 4.35rem;
    /* Founder flipbook outer silhouette (TL TR BR BL) — asymmetric spine */
    --founder-book-r: 20px 26px 32px 22px;
    /* Custom surfaces — light elevation only (flat UI aligned with Tailwind shadow overrides) */
    --elev-1: 0 1px 2px rgb(15 47 74 / 0.035);
    --elev-2: 0 2px 10px rgb(15 47 74 / 0.045);
}

/* Two-column intro (text + image or stats) — explicit gap in plain CSS (works if Tailwind gap utilities are purged) */
.intro-two-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
}
@media (min-width: 1024px) {
    .intro-two-col {
        flex-direction: row;
        align-items: center;
        column-gap: 5rem;
        row-gap: 2.5rem;
    }
    .intro-two-col__primary {
        flex: 1 1 0;
        min-width: 0;
        padding-right: 1.5rem;
        box-sizing: border-box;
    }
    .intro-two-col__secondary {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 1.5rem;
        box-sizing: border-box;
    }
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Responsive base — prevent horizontal overflow, improve touch */
body { overflow-x: hidden; }
button, a { touch-action: manipulation; }
/* Listing card thumbs (blog/news/events): never stretch bitmaps — matches common “cover in aspect box” pattern */
.post-card-media img {
    object-fit: cover;
    /* Prefer heads/faces in portrait crops (listing cards) */
    object-position: center 20%;
}
/* Prevent images from overflowing on small screens */
.hero-swiper img, .prose-content img, .gallery-item img { max-width: 100%; height: auto; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #2272ab; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2F80ED; }

/* Hero Swiper — full-height slides, pagination bullets */
.hero-slider .hero-swiper { min-height: 60vh; }
/* Animated gradient background on slides */
.hero-swiper .swiper-slide {
    position: relative;
    background: #2272ab;
    overflow: hidden;
}
.hero-swiper .swiper-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(47, 128, 237, 0.5) 20%,
        rgba(96, 165, 250, 0.7) 50%,
        rgba(47, 128, 237, 0.5) 80%,
        transparent 100%
    );
    background-size: 250% 100%;
    animation: hero-bg-shimmer 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes hero-bg-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-swiper .swiper-slide {
        animation: none;
        background: #2272ab;
    }
}
@media (min-width: 640px) { .hero-slider .hero-swiper { min-height: 55vh; } }
@media (min-width: 1024px) { .hero-slider .hero-swiper { min-height: 65vh; } }
.hero-swiper .swiper-slide { height: auto; display: flex; align-items: center; }
.hero-swiper .hero-swiper-pagination .hero-bullet,
.hero-swiper .swiper-pagination-bullet {
    display: inline-block; width: 8px; height: 8px;
    background: rgba(255,255,255,0.5); opacity: 0.8;
    border-radius: 50%; transition: all 0.3s ease; cursor: pointer;
}
.hero-swiper .hero-swiper-pagination .hero-bullet-active,
.hero-swiper .swiper-pagination-bullet-active {
    width: 24px; border-radius: 4px;
    background: #fff; opacity: 1;
}

/* Swiper pagination — dark bullets for light background */
.reviews-swiper .swiper-pagination-bullet { background: #94a3b8; opacity: 0.6; }
.reviews-swiper .swiper-pagination-bullet-active { background: #2272ab; opacity: 1; }

/* Prose content */
.prose-content {
    line-height: 1.8;
    color: #374151;
}
.prose-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 2rem 0 1rem;
}
.prose-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2272ab;
    margin: 1.5rem 0 0.75rem;
}
.prose-content p { margin-bottom: 1.25rem; }
.prose-content ul, .prose-content ol { margin: 1rem 0 1.25rem 1.5rem; }
.prose-content li { margin-bottom: 0.5rem; }
.prose-content blockquote {
    border-left: 4px solid #2272ab;
    padding-left: 1rem;
    color: #6b7280;
    font-style: italic;
    margin: 1.5rem 0;
}

/* Gallery filter — selected keeps blue bg + white text in all states */
[data-filter].filter-active,
[data-filter].filter-active:hover,
[data-filter].filter-active:focus,
[data-filter].filter-active:focus-visible {
    background-color: #2272ab !important;
    color: #fff !important;
}
[data-filter]:not(.filter-active) {
    color: #334155 !important; /* slate-700, always visible on light bg */
}
[data-filter]:not(.filter-active):hover {
    color: #2272ab !important; /* blue on hover, still visible */
}

/* Gallery grid */
.gallery-item { overflow: hidden; border-radius: 1rem; cursor: pointer; }
.gallery-item img { transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.08); }

/* Team card hover — subtle lift, minimal shadow */
.team-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.team-card:hover { transform: translateY(-2px); box-shadow: var(--elev-1); }

/* Badge status */
.badge-published { background: #dcfce7; color: #166534; }
.badge-pending   { background: #fef9c3; color: #854d0e; }
.badge-draft     { background: #f3f4f6; color: #374151; }

/* Fade in */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.6s ease forwards; }

/* Line clamp utilities */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Reviews Swiper */
.reviews-swiper .swiper-slide { height: auto; }

/* TinyMCE — full width */
.tox-tinymce, .tox .tox-edit-area__iframe { width: 100% !important; max-width: 100% !important; }

/* Alpine x-cloak */
[x-cloak] { display: none !important; }

/* Facility flip cards — 3D rotate, all cards flip in sync, fluid animation */
.facility-card {
    perspective: 1200px;
    aspect-ratio: 4/3;
    transform-style: preserve-3d;
}
.facility-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(0deg) translate3d(0, 0, 0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.facility-section.in-view .facility-card-inner {
    transition: none;
    will-change: transform;
}
.facility-card:hover .facility-card-inner {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotateY(180deg) translate3d(0, 0, 0);
}
.facility-card-front,
.facility-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1.125rem;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}
.facility-card-back {
    transform: rotateY(180deg) translate3d(0, 0, 0);
}
.facility-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* All cards flip together every 5s — only when section is in view; removed when out of view */
@keyframes facility-card-auto-flip {
    0%, 40%  { transform: rotateY(0deg) translate3d(0, 0, 0); }
    48%      { transform: rotateY(180deg) translate3d(0, 0, 0); }
    48%, 90% { transform: rotateY(180deg) translate3d(0, 0, 0); }
    98%      { transform: rotateY(0deg) translate3d(0, 0, 0); }
    98%, 100% { transform: rotateY(0deg) translate3d(0, 0, 0); }
}
.facility-section.in-view .facility-card-inner {
    animation: facility-card-auto-flip 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.facility-section.in-view .facility-card:hover .facility-card-inner {
    animation: none;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .facility-section.in-view .facility-card-inner { animation: none; }
}

/* ── History page — Founder story book (StPageFlip, physical-book styling) ─ */
.founder-story-shell {
    position: relative;
    max-width: 100%;
}

.founder-story-stage {
    position: relative;
    /* Deeper perspective + milder pose reduces raster blur from the wrapper transform */
    perspective: 2800px;
    perspective-origin: 48% 38%;
    padding: clamp(1.25rem, 4vw, 2.75rem) clamp(0.5rem, 3vw, 2rem) clamp(2rem, 5vw, 3.25rem);
}

.founder-story-book-vignette {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -42%);
    width: min(118%, 54rem);
    height: 82%;
    z-index: 0;
    background:
        radial-gradient(ellipse 42% 38% at 28% 52%, rgba(15, 23, 42, 0.06) 0%, transparent 72%),
        radial-gradient(ellipse 52% 46% at 50% 52%, rgba(44, 36, 25, 0.045) 0%, transparent 68%),
        radial-gradient(ellipse 48% 44% at 78% 48%, rgba(15, 23, 42, 0.05) 0%, transparent 62%);
    opacity: 0.95;
}

/*
 * No filter / backdrop-filter here — they create a containing block and break StPageFlip’s 3D page transforms.
 * Depth cues use box-shadow on the book root + inset shading on .stf__wrapper only.
 */
.founder-story-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transform-style: preserve-3d;
    /* Shallower tilt keeps type sharper under GPU compositing (vs steep rotateY/rotateX). */
    transform: rotateY(-8deg) rotateX(3deg);
    border-radius: var(--founder-book-r);
    background: transparent;
    transition: transform 0.45s ease;
}

@media (hover: hover) and (pointer: fine) {
    .founder-story-shell:hover .founder-story-wrapper {
        transform: rotateY(-6deg) rotateX(2.5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .founder-story-wrapper {
        transform: rotateY(-4deg) rotateX(1.5deg);
        transition: none;
    }
    .founder-story-shell:hover .founder-story-wrapper {
        transform: rotateY(-4deg) rotateX(1.5deg);
    }
}

@media (max-width: 767px) {
    /*
     * Flat layout immediately — before JS toggles founder-story-shell--mobile-book.
     * Perspective + rotate on narrow screens often hid/collapsed the flip canvas (“book not open”).
     * Mirrors portrait-first UX described for StPageFlip / react-pageflip demos:
     * https://nodlik.github.io/react-pageflip/
     */
    .founder-story-stage {
        perspective: none;
        perspective-origin: 50% 40%;
        padding: 0.35rem 0 0.75rem;
        overflow-x: hidden;
    }
    .founder-story-book-vignette {
        display: none;
    }
    .founder-story-wrapper {
        transform: none;
        max-width: 100%;
        overscroll-behavior: contain;
    }
    .founder-story-wrapper::after {
        display: none;
    }
    .founder-story-section .founder-story-book-root {
        width: 100%;
        max-width: 100%;
        /*
         * Avoid vh/min(74vh): Safari URL bar changes viewport height while scrolling and fights JS sizing.
         * PageFlip sets portrait height from JS; keep a modest floor only.
         */
        min-height: 380px;
        box-shadow:
            8px 16px 26px rgba(15, 23, 42, 0.18),
            4px 8px 12px rgba(0, 0, 0, 0.08);
    }
}

/*
 * Phone / narrow tablet: class toggled from JS when `usePortrait` is on — flat book, full single-page width (StPageFlip portrait).
 * Avoids microscopic half-spreads from forced landscape + preserves readable text + scroll on inner leaves.
 */
.founder-story-shell--mobile-book .founder-story-stage {
    perspective: none;
    padding: 0.35rem 0 0.75rem;
    overflow-x: hidden;
}

.founder-story-shell--mobile-book .founder-story-wrapper {
    transform: none;
    max-width: 100%;
    overscroll-behavior: contain;
}

.founder-story-shell--mobile-book .founder-story-wrapper::after {
    display: none;
}

.founder-story-shell--mobile-book .founder-story-book-root {
    width: 100%;
    max-width: 100%;
    box-shadow:
        8px 16px 26px rgba(15, 23, 42, 0.18),
        4px 8px 12px rgba(0, 0, 0, 0.08);
}

/* Fore-edge hint — keep z-index ≥ 0 so it isn’t clipped behind ancestors */
.founder-story-wrapper::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 8%;
    bottom: 8%;
    width: 8px;
    z-index: 0;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(90deg, rgba(55, 48, 42, 0.42), rgba(252, 249, 243, 0.14));
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    opacity: 0.8;
}

.founder-story-book-root {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    border-radius: inherit;
    box-shadow:
        14px 28px 38px rgba(15, 23, 42, 0.28),
        6px 12px 18px rgba(0, 0, 0, 0.14);
}

.founder-story-wrapper .stf__parent {
    border-radius: var(--founder-book-r) !important;
}

.founder-story-wrapper .stf__wrapper {
    border-radius: var(--founder-book-r);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset -14px 0 28px rgba(0, 0, 0, 0.065),
        inset 9px 0 18px rgba(0, 0, 0, 0.04);
}

/*
 * StPageFlip ships stPageFlip.css: `.stf__parent { transform: translateZ(0) }` and
 * `.stf__block { perspective: 2000px }`. That stacks the whole flipbook in a GPU / 3-D context,
 * so glyphs are rasterised like textures — fine on desktop, often visibly soft on phones.
 * Flatten only for narrow viewports + portrait shell (tablet portrait uses the class too).
 */
@media (max-width: 767px) {
    .founder-story-wrapper .stf__parent {
        transform: none;
    }

    .founder-story-wrapper .stf__block {
        perspective: none;
    }
}

.founder-story-shell--mobile-book .founder-story-wrapper .stf__parent {
    transform: none;
}

.founder-story-shell--mobile-book .founder-story-wrapper .stf__block {
    perspective: none;
}

/* Inner leaves — paper grain & gutter shading */
.founder-story-section .story-page {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    padding: 1.1rem 1.35rem 1.2rem;
    background-color: #faf7f1;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 38%, rgba(0, 0, 0, 0.025) 100%),
        linear-gradient(155deg, #fdfbf7 0%, #f1e9df 48%, #e8dfd2 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.052'/%3E%3C/svg%3E");
    border-left: 1px solid rgba(44, 36, 25, 0.09);
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #2c2419;
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

.founder-story-section .story-page p {
    text-align: left;
    margin: 0 0 0.5rem;
}

.founder-story-section .story-page p:last-child {
    margin-bottom: 0;
}

/* Inner narrative leaves — type scales to the leaf (container size); desktop avoids in-leaf scrolling */
.founder-story-section .story-page--inner.story-page--twoup {
    container-type: size;
    container-name: founder-leaf;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(0.42rem, 1.55cqh, 0.92rem) clamp(0.48rem, 2cqw, 1rem);
    font-size: 0.8125rem;
    line-height: 1.42;
    text-wrap: pretty;
}

.founder-story-section .story-page--inner.story-page--twoup p {
    margin: 0 0 0.38em;
}

.founder-story-section .story-page--inner.story-page--twoup p:last-child {
    margin-bottom: 0;
}

@supports (font-size: 1cqh) {
    .founder-story-section .story-page--inner.story-page--twoup {
        font-size: clamp(0.68rem, min(2.2cqh, 3.8cqw), 0.875rem);
        line-height: 1.42;
    }
}

@media (min-width: 768px) {
    .founder-story-section .story-page--inner.story-page--twoup {
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    .founder-story-section .story-page--inner.story-page--twoup p {
        text-align: justify;
    }

    .founder-story-section .story-page--inner.story-page--twoup .story-page__quote {
        text-align: left;
        hyphens: none;
        -webkit-hyphens: none;
    }
}

/* Phones: comfortable reading size + scroll inside the leaf when needed */
@media (max-width: 767px) {
    /*
     * PageFlip keeps leaves on 3D-transformed layers; grayscale/antialiased smoothing +
     * geometricPrecision often rasterises softer on mobile. Drop paper grain (noise reads as blur).
     */
    .founder-story-section .story-page--cover {
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
        text-rendering: optimizeLegibility;
    }

    .founder-story-section .story-page--inner.story-page--twoup {
        justify-content: flex-start;
        container-type: normal;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        font-size: 1.03rem;
        line-height: 1.62;
        padding: 1rem 1.2rem 1.15rem;
        text-align: left;
        hyphens: none;
        -webkit-hyphens: none;
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
        text-rendering: optimizeLegibility;
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 38%, rgba(0, 0, 0, 0.025) 100%),
            linear-gradient(155deg, #fdfbf7 0%, #f1e9df 48%, #e8dfd2 100%);
    }

    .founder-story-section .story-page--inner.story-page--twoup p {
        text-align: left;
        margin-bottom: 0.42em;
    }

    .founder-story-section .story-page__lead {
        font-size: 1.13em;
        margin-bottom: 0.5em;
    }

    .founder-story-section .story-page__quote {
        margin-top: 0.85em;
        padding-top: 0.65em;
        font-size: 1em;
    }

    .memoir-jacket__titles {
        left: 0.45rem;
        right: 0.45rem;
        bottom: calc(var(--memoir-band-h, 4.85rem) + 0.38rem);
    }

    .memoir-jacket-back__bio {
        font-size: 0.875rem;
        line-height: 1.58;
    }
}

/* Portrait / single-page layout toggled by PageFlip */
.founder-story-section .founder-story-shell--mobile-book .story-page--cover {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

.founder-story-section .founder-story-shell--mobile-book .story-page--inner.story-page--twoup {
    justify-content: flex-start;
    container-type: normal;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    font-size: 1.03rem;
    line-height: 1.62;
    padding: 1rem 1.2rem 1.15rem;
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 38%, rgba(0, 0, 0, 0.025) 100%),
        linear-gradient(155deg, #fdfbf7 0%, #f1e9df 48%, #e8dfd2 100%);
}

.founder-story-section .founder-story-shell--mobile-book .story-page--inner.story-page--twoup p {
    text-align: left;
    margin-bottom: 0.42em;
}

.founder-story-section .story-page__lead {
    font-weight: 700;
    font-size: 1.12em;
    color: #1a1510;
    margin-bottom: 0.45em;
}

.founder-story-section .story-page__emph {
    font-weight: 700;
    font-style: italic;
    color: #1a1510;
    margin-top: 0.42em;
}

.founder-story-section .story-page__quote {
    margin: 0.65em 0 0;
    padding: 0.55em 0 0 0.85em;
    border-left: 3px solid var(--brand-primary, #2272ab);
    font-style: italic;
    color: #3d3428;
}

/* Blank leaf paired with front cover (spread [0,1]) — no reliance on showCover slot rendering */
.founder-story-section .story-page--blank {
    padding: 0;
    border-left: none;
    background: linear-gradient(90deg, #f0ebe3 0%, #faf7f1 42%, #f4efe6 100%);
    box-shadow:
        inset 0 0 0 1px rgba(44, 36, 25, 0.07),
        inset 8px 0 18px rgba(44, 36, 25, 0.045);
}

/* ── Memoir-style jacket covers (founder story) — site blues + Great Vibes ─ */
/* PageFlip sets inline `display:block` on `.stf__item`; flex must win so the jacket fills the slot and the band stays flush to the bottom. */
.founder-story-section .story-page--cover.story-page--cover-memoir-front {
    display: flex !important;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-left: none;
    background: var(--memoir-sky, #e8f4fc);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.65),
        inset 0 -18px 36px rgba(15, 47, 74, 0.06);
}

.memoir-jacket {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

.memoir-jacket--front {
    --memoir-band-h: 4.85rem;
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f4fafd 0%, var(--memoir-sky, #e8f4fc) 100%);
}

.memoir-jacket__photo {
    flex: 1 1 58%;
    min-height: clamp(64px, 24%, 118px);
    position: relative;
    overflow: hidden;
}

.memoir-jacket__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.memoir-jacket__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(232, 244, 252, 0.25) 85%, rgba(232, 244, 252, 0.65) 100%);
    pointer-events: none;
}

.memoir-jacket__swoosh {
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: calc(var(--memoir-band-h, 4.85rem) - 6px);
    height: 46%;
    z-index: 2;
    pointer-events: none;
}

.memoir-jacket__swoosh-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.memoir-jacket__titles {
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: calc(var(--memoir-band-h, 4.85rem) + 0.5rem);
    z-index: 3;
    text-align: center;
}

.memoir-jacket__title-heavy {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(0.92rem, 4.2vw, 1.28rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: #ffffff;
    margin: 0 0 0.45rem;
    /* Tight single-layer shadow reads sharper on 3D-transformed pages than wide multi-blur */
    text-shadow: 0 1px 3px rgba(15, 47, 74, 0.35);
}

.memoir-jacket__title-script {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.45rem, 6.5vw, 2rem);
    line-height: 1.15;
    color: #f0f9ff;
    margin: 0.15rem 0 0.4rem;
    text-shadow: 0 1px 5px rgba(15, 47, 74, 0.28);
}

.memoir-jacket__tag-caps {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.94);
    margin: 0.35rem 0 0;
    padding-top: 0.42rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    text-shadow: none;
}

.memoir-jacket__band {
    flex: 0 0 auto;
    min-height: var(--memoir-band-h, 4.85rem);
    padding: 0.88rem 0.85rem 0.92rem;
    text-align: center;
    background: linear-gradient(180deg, var(--brand-primary, #2272ab) 0%, #185a8c 52%, var(--brand-dark, #0F2F4A) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    z-index: 4;
    isolation: isolate;
    transform: translateZ(0);
}

.memoir-jacket__band-name {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(0.82rem, 3.5vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    margin: 0;
    line-height: 1.35;
    text-shadow: none;
}

/* Back cover — tilted panel + portrait + bio band */
/* PageFlip sets inline `display: block` on `.stf__item`; flex here must win so the jacket can fill the page. */
.founder-story-section .story-page--cover.story-page--cover-memoir-back {
    display: flex !important;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-left: none;
    background: linear-gradient(165deg, #f7fbff 0%, #e8f2fa 55%, #dfeaf6 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.8),
        inset 0 -14px 28px rgba(34, 114, 171, 0.06);
}

.memoir-jacket--back {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    align-self: stretch;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.memoir-jacket-back__label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-primary, #2272ab);
    margin: 0 0 0.4rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.memoir-jacket-back__feature {
    position: relative;
    min-height: 6rem;
    padding-bottom: 1.5rem;
    margin-bottom: 0.35rem;
    overflow: visible;
}

.memoir-jacket-back__tilt {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 14%;
    bottom: 22%;
    background: linear-gradient(148deg, #5ba3d9 0%, var(--brand-primary, #2272ab) 48%, #154d78 100%);
    border-radius: 5px;
    transform: rotate(-8deg);
    box-shadow: 0 10px 22px rgba(15, 47, 74, 0.22);
    opacity: 0.96;
}

.memoir-jacket-back__dots {
    position: absolute;
    left: 0.35rem;
    top: 40%;
    display: flex;
    gap: 5px;
    z-index: 3;
}

.memoir-jacket-back__dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary, #2272ab);
    opacity: 0.85;
}

.memoir-jacket-back__frame {
    position: relative;
    margin: 0.35rem auto 0.85rem;
    width: 54%;
    max-width: 9.25rem;
    z-index: 2;
    border: 3px solid #ffffff;
    box-shadow: 0 12px 28px rgba(15, 47, 74, 0.28);
    transform: rotate(2deg);
}

.memoir-jacket-back__frame img {
    width: 100%;
    height: auto;
    display: block;
}

.memoir-jacket-back__bio {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.48;
    color: #355a78;
    margin: 0.75rem 0 0.35rem;
    padding-top: 0.85rem;
    text-align: left;
    flex: 0 1 auto;
    position: relative;
    z-index: 4;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

/* Founder name: serif + spaced “rn” on bio; front band stays one sans stack for crisp glyphs on blue */
.memoir-jacket-back__bio .memoir-jacket__founder-given {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
    font-size: 1.16em;
    color: #243e54;
}

.memoir-jacket__band-name .memoir-jacket__founder-given {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1em;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-shadow: none;
    opacity: 1;
}

.memoir-rn-pair {
    letter-spacing: 0.14em;
}

.memoir-jacket__founder-given--script {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    font-size: 1.08em;
}

.memoir-rn-pair--script {
    letter-spacing: 0.12em;
}

.memoir-jacket-back__name-script {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.12rem, 4.5vw, 1.42rem);
    color: var(--brand-dark, #0F2F4A);
    margin: 0.35rem 0 0.4rem;
    text-align: center;
    line-height: 1.15;
    flex: 0 0 auto;
    position: relative;
    z-index: 4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

.memoir-jacket-back__band {
    flex-shrink: 0;
    margin: auto -0.65rem 0;
    padding: 0.52rem 0.65rem 0.58rem;
    background: linear-gradient(180deg, var(--brand-primary, #2272ab) 0%, var(--brand-dark, #0F2F4A) 100%);
    color: rgba(255, 255, 255, 0.96);
    text-align: center;
    box-shadow: 0 -6px 18px rgba(15, 47, 74, 0.12);
}

.memoir-jacket-back__band-school {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    margin: 0 0 0.12rem;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.memoir-jacket-back__band-meta {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.625rem;
    margin: 0;
    opacity: 0.88;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}