/* Moogalooga Academy: ordinary CSS-safe to edit in TextPad. */
:root { --maroon:#4d0b24; --wine:#711534; --gold:#d6a93e; --ink:#351a1e; --paper:#f5ebd4; --cream:#fff9ea; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:18px/1.58 Georgia, 'Times New Roman', serif; }
a { color:var(--wine); }
.wrap { width:min(1120px,92%); margin:auto; }
.site-header { background:var(--maroon); border-bottom:5px double var(--gold); }
.brand-image { display:block; width:100%; max-height:210px; object-fit:cover; }
nav { background:#330817; text-align:center; padding:10px 5px; }
nav a { display:inline-block; color:#ffe9a1; text-decoration:none; font-size:15px; letter-spacing:.04em; padding:5px 11px; }
nav a:hover, nav a.active { color:white; text-decoration:underline; }
.satire-note { margin:0; text-align:center; background:#f8dda0; border-bottom:1px solid #c59128; padding:7px 12px; font:italic 14px/1.3 Georgia,serif; }
.hero { background:#260817; }
.hero img { display:block; width:100%; max-width:1536px; margin:auto; }
.page-hero { text-align:center; background:linear-gradient(135deg,#350817,#711534); color:#ffecad; padding:52px 18px 42px; border-bottom:4px double var(--gold); }
h1,h2,h3 { color:var(--maroon); line-height:1.14; }
.page-hero h1 { color:#ffe9a1; font-size:clamp(32px,5vw,55px); margin:0 0 8px; }
.page-hero p { max-width:720px; margin:0 auto; font-style:italic; }
main { padding:46px 0 60px; }
.intro { max-width:820px; margin:0 auto 40px; text-align:center; font-size:21px; }
.gold-rule { color:var(--gold); font-size:25px; text-align:center; margin:25px auto; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid.two { grid-template-columns:repeat(2,1fr); }
.card { background:var(--cream); padding:25px; border:1px solid #dfc78c; box-shadow:0 3px 14px #4d0b241c; }
.card h2,.card h3 { margin-top:0; }
.button { display:inline-block; background:var(--wine); color:#ffe9a1; padding:10px 19px; text-decoration:none; border:2px solid var(--gold); border-radius:25px; font-weight:bold; }
.lecture { display:grid; grid-template-columns:360px 1fr; gap:36px; align-items:center; background:#fff7e3; border:3px double var(--gold); padding:25px; margin:40px 0; }
.lecture img { width:100%; max-height:380px; object-fit:cover; object-position:center; border:6px solid var(--maroon); }
blockquote { margin:18px 0; color:#5d1630; font-size:22px; font-style:italic; }
.quote { border-left:4px solid var(--gold); padding-left:18px; }
.testimonial { background:#fffaf0; border-top:5px solid var(--gold); }
.details { padding:0; margin:0; list-style:none; }
.details li { padding:8px 0; border-bottom:1px dotted #c8aa6c; }
.gallery-card { min-height:180px; display:flex; align-items:end; padding:18px; color:white; text-shadow:0 2px 5px #000; background:linear-gradient(#0004,#000c),linear-gradient(135deg,#8f643a,#381523); border:5px solid #f8e4ad; }
.gallery-card h2 { color:#fff9dd; margin:0; text-shadow:0 2px 5px #000; }
.footer-strip { display:block; width:min(1500px,100%); margin:10px auto 0; }
footer { background:#320817; color:#f8dd9e; padding:28px 0; font-size:14px; text-align:center; border-top:4px double var(--gold); }
footer p { margin:5px auto; max-width:900px; }
@media (max-width:760px) { .grid,.grid.two,.lecture { grid-template-columns:1fr; } .lecture { gap:18px; } nav a { padding:5px 7px; font-size:13px; } }

/* Click-to-expand photos: fixed lightbox, so the page never jumps. */
.card img,
.gallery-card img,
.featured-photo {
    cursor: pointer;
}

.featured-card > img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    margin: -25px -25px 20px;
    width: calc(100% + 50px);
}

.gallery-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    overflow: hidden;
}

.gallery-card img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    margin: 0 0 15px;
}

.gallery-card h2 {
    margin-top: auto;
}

.photo-help {
    text-align: center;
    font-style: italic;
    font-size: 15px;
    color: #6b3948;
    margin: -15px auto 25px;
}

/* The enlarged photo floats above the page instead of changing page layout. */
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(20, 5, 13, .88);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.photo-lightbox.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.photo-lightbox img {
    display: block;
    max-width: min(94vw, 1400px);
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #16050c;
    border: 6px solid #f8e4ad;
    box-shadow: 0 14px 45px rgba(0,0,0,.65);
    cursor: pointer;
}

.photo-lightbox .photo-lightbox-caption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 12px;
    text-align: center;
    color: #fff4cf;
    font: italic 16px/1.3 Georgia, "Times New Roman", serif;
    pointer-events: none;
}

@media (max-width: 760px) {
    .featured-card > img {
        height: 210px;
    }

    .photo-lightbox {
        padding: 12px;
    }

    .photo-lightbox img {
        max-width: 96vw;
        max-height: 84vh;
        border-width: 4px;
    }
}