/* Miss Earth Australia 2026 — homepage */
/* Fonts are served from this site (no wait for Google Fonts) and the text stays hidden for a moment until the font is
   ready, so a reload or a slow connection never shows a thick fallback font that changes later. The main ones are
   preloaded in the layout (site/layout.php). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: block; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: block; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: block; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: block; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: block; src: url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: block; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }

:root {
    --white: #ffffff;
    --cream: #f8f3e7;
    --cream-deep: #ece3d0;
    --sage: #e4f0e8;
    --green: #1f7a4d;
    --green-deep: #0c3a28;
    --gold: #b9852a;
    --gold-soft: #ecc87a;
    --ink: #12291f;
    --muted: #55695d;
    --line: rgba(184, 146, 63, .28);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wrap: 1280px;
    --header-h: 108px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0; color: var(--green-deep); }
p { margin: 0; }

.wrap { width: min(var(--wrap), 100% - 3rem); margin-inline: auto; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .75rem;
    font-size: .8rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before, .eyebrow.is-centered::after { content: ""; width: 2.5rem; height: 1px; background: var(--gold); }
.section-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-top: .75rem; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.section-head p { margin-top: 1rem; color: var(--muted); }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 52px; padding: 0 2rem;
    font: 500 .85rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
    border: 1px solid transparent; border-radius: 6px; cursor: pointer;
    transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn:focus-visible, .nav a:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn--gold { color: var(--white); background: var(--green-deep); border-color: var(--green-deep); }
.btn--gold:hover { background: var(--gold); border-color: var(--gold); }

/* Header */
.site-header {
    position: sticky; top: 0; z-index: 50; height: var(--header-h);
    background:
        radial-gradient(520px 150px at 6% 50%, rgba(236, 200, 122, .16), transparent 70%),
        radial-gradient(900px 220px at 78% -20%, rgba(96, 168, 120, .16), transparent 70%),
        radial-gradient(700px 180px at 42% 130%, rgba(236, 200, 122, .07), transparent 70%),
        linear-gradient(180deg, #082a1c 0%, #0c3a28 100%);
    box-shadow: 0 18px 34px -22px rgba(3, 16, 10, .8);
}
.site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, #b9852a 18%, #f1cd82 50%, #b9852a 82%, transparent 100%); opacity: .9; pointer-events: none; }
/* soft gold hint at the bottom edge, centre only */
.site-header::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, #b9852a 18%, #f1cd82 50%, #b9852a 82%, transparent 100%); opacity: .9; pointer-events: none; }
.site-header .wrap { position: relative; width: min(var(--wrap), 100% - 3rem); height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
.brand { grid-column: 1; grid-row: 1; justify-self: start; display: block; }
.brand img { height: 80px; width: auto; max-width: none; filter: drop-shadow(0 0 16px rgba(236, 200, 122, .28)); }
.nav { display: contents; }
.nav ul { display: flex; align-items: center; gap: 2.2rem; list-style: none; margin: 0; padding: 0; }
.nav-left { grid-column: 2; grid-row: 1; justify-self: end; }
.nav .nav-left { margin-right: -1.2rem; height: 48px; padding: 0 2.3rem; background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(3, 20, 12, .1) 100%); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.nav-right { grid-column: 3; grid-row: 1; justify-self: end; gap: .8rem; }
.nav a:not(.btn) {
    position: relative; padding: .9rem 0; text-decoration: none;
    font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .9);
}
.nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--gold); transform: scaleX(0); transition: transform .3s;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--gold-soft); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { min-height: 48px; padding: 0 1.4rem; font-size: .7rem; white-space: nowrap; }
.nav .btn--gold { color: var(--gold-soft); font-weight: 500; background: linear-gradient(180deg, rgba(236, 200, 122, .16) 0%, rgba(236, 200, 122, .06) 100%); border-color: transparent; border-radius: 6px; box-shadow: none; transition: background .25s, color .25s; }
.nav .btn--gold:hover { color: #fff; background: linear-gradient(180deg, rgba(236, 200, 122, .28) 0%, rgba(236, 200, 122, .14) 100%); }
.nav-social { display: flex; align-items: center; gap: .4rem; }
.nav .nav-social a { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--gold-soft); background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(3, 20, 12, .1) 100%); border: 0; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: color .25s, background .25s, transform .25s, box-shadow .25s; }
.nav .nav-social a::after { display: none; }
.nav .nav-social a:hover { color: #082a1c; background: linear-gradient(135deg, #f6d68c, #d49c38); transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(236, 200, 122, .6); }
.nav-social .social-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-toggle {
    display: none; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(236, 200, 122, .6); border-radius: 50%;
    background: transparent; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--gold-soft); transition: transform .3s, opacity .3s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Home: photo hero, a split for the reigning queen, a ledger of facts and a quiet closing band */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mh-hero { background: #f4efe4; }
@media (min-width: 1921px) { .mh-hero__photo img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } }
.mh-hero__photo { max-width: 1920px; margin: 0 auto; }
.mh-hero__photo img { width: 100%; height: auto; aspect-ratio: 1920 / 793; object-fit: cover; object-position: 50% 100%; }

.mh-facts { background: #061f15; }
.mh-facts ul { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0 auto; padding: 0; }
.mh-facts li { padding: 1.7rem 1.5rem; text-align: center; border-left: 1px solid rgba(236, 200, 122, .25); font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: rgba(255, 255, 255, .92); }
.mh-facts li:first-child { border-left: 0; }
.mh-facts li:has(> a) { padding: 0; }
.mh-facts li > a { display: block; padding: 1.7rem 1.5rem; color: inherit; text-decoration: none; transition: background .3s; }
.mh-facts li > a:hover, .mh-facts li > a:focus-visible { background: rgba(236, 200, 122, .07); }
.mh-facts li > a:hover b, .mh-facts li > a:focus-visible b { color: var(--white); }
.mh-facts b { display: block; margin-bottom: .3rem; font: 500 .7rem/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); }

.mh-reigning { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; background: var(--green-deep); }
.mh-reigning__photo { margin: 0; position: relative; overflow: hidden; }
.mh-reigning__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.mh-reigning__panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 5rem clamp(2rem, 7vw, 7rem); color: rgba(255, 255, 255, .86); overflow: hidden; }
.mh-reigning__panel::before {
    content: "2026"; position: absolute; right: -1rem; bottom: -2.2rem; font-family: var(--serif); font-size: clamp(9rem, 17vw, 16rem); line-height: 1;
    color: transparent; -webkit-text-stroke: 1px rgba(236, 200, 122, .35); pointer-events: none;
}
.mh-reigning__panel > * { position: relative; }
.mh-reigning .eyebrow { color: var(--gold-soft); }
.mh-reigning .eyebrow::before { background: var(--gold-soft); }
.mh-reigning .section-title { margin: 1rem 0 .4rem; color: var(--white); font-size: clamp(2.8rem, 5vw, 4.4rem); }
.mh-reigning .section-title em { font-style: italic; font-weight: 400; color: var(--gold-soft); }
.mh-reigning__year { font-size: .85rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); }
.mh-reigning__quote { margin: 2rem 0 2.5rem; max-width: 30rem; padding-top: 1.5rem; border-top: 1px solid rgba(236, 200, 122, .4); font-family: var(--serif); font-size: 1.45rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.mh-reigning .btn--gold { align-self: flex-start; background: transparent; border-color: var(--gold-soft); color: var(--gold-soft); }
.mh-reigning .btn--gold:hover { background: var(--gold-soft); color: var(--green-deep); }

.mh-about { padding: 6.5rem 0; background: var(--cream); }
.mh-about__head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3rem; }
.mh-about__head .section-title { margin-top: .75rem; }
.mh-about__head p { max-width: 30rem; color: var(--muted); }
.mh-about__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.mh-about__item { padding: 2.25rem 1.9rem 2.5rem; background: var(--white); border-radius: 6px; transition: transform .3s, box-shadow .3s; }
.mh-about__item:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(12, 58, 40, .45); }
.mh-about__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.mh-about__top svg { width: 38px; height: 38px; stroke: var(--green); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mh-about__top span { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: rgba(12, 58, 40, .14); }
.mh-about__item h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.mh-about__item p { font-size: .96rem; color: var(--muted); line-height: 1.65; }

.mh-queens { padding: 6.5rem 0; background: var(--white); }
.mh-queens__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.mh-queens__head .section-title { margin-top: .75rem; }
.mh-queens__all { flex: none; font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--green-deep); }
.mh-queens__all:hover { color: var(--gold); }
.mh-queens__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.mh-queens__item { padding: 2.75rem 2.25rem 3rem; background: var(--cream); border-radius: 6px; }
.mh-queens__year { display: block; margin-bottom: 1.4rem; font-family: var(--serif); font-size: 4.2rem; line-height: 1; color: rgba(12, 58, 40, .16); }
.mh-queens__item h3 { font-size: 1.9rem; margin-bottom: .4rem; }
.mh-queens__item p { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mh-queens__item small { display: inline-block; margin-top: 1.1rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.mh-queens__item--current { background: linear-gradient(135deg, #0c3a28, #082a1c); }
.mh-queens__item--current .mh-queens__year { color: rgba(236, 200, 122, .3); }
.mh-queens__item--current h3 { color: var(--white); }
.mh-queens__item--current p { color: rgba(255, 255, 255, .75); }
.mh-queens__item--current small { color: var(--gold-soft); }

@media (max-width: 960px) {
    .mh-facts ul { grid-template-columns: 1fr; }
    .mh-facts li { border-left: 0; border-top: 1px solid rgba(236, 200, 122, .25); padding: 1.1rem; }
    .mh-facts li > a { padding: 1.1rem; }
    .mh-facts li:first-child { border-top: 0; }
    .mh-reigning { grid-template-columns: 1fr; min-height: 0; }
    .mh-reigning__photo { aspect-ratio: 4 / 4.6; }
    .mh-reigning__panel { padding: 4rem 1.75rem 5rem; }
    .mh-about { padding-block: 4.5rem; }
    .mh-about__head { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2rem; }
    .mh-about__grid { grid-template-columns: 1fr 1fr; }
    .mh-queens { padding-block: 4.5rem; }
    .mh-queens__head { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-bottom: 2rem; }
    .mh-queens__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .mh-hero__photo img { aspect-ratio: 4 / 3; }
    .mh-about__grid { grid-template-columns: 1fr; }
}

/* Apply CTA */
.apply { padding: 6rem 0; background: var(--cream); }

/* Footer */
.site-footer { background: var(--white); border-top: 1px solid var(--line); padding: 4rem 0 2rem; }

.footer-nav { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: flex-end; list-style: none; margin: 0; padding: 0; }
.footer-nav a { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.footer-nav a:hover { color: var(--gold); }

/* Reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    * { transition-duration: .01ms !important; }
}

@media (min-width: 961px) and (max-width: 1220px) {
    .nav ul { gap: 1.4rem; }
    .nav a:not(.btn) { font-size: .7rem; letter-spacing: .1em; }
    .nav .nav-social a { width: 44px; height: 44px; }
}

@media (min-width: 961px) and (max-width: 1040px) {
    .nav ul { gap: 1rem; }
    .nav .nav-left { padding: 0 1rem; }
    .nav a:not(.btn) { font-size: .68rem; letter-spacing: .08em; }
    .nav .btn { padding: 0 1rem; font-size: .66rem; }
    .nav .nav-social a { width: 40px; height: 40px; }
    .brand img { height: 68px; }
}
/* Tablet */
@media (max-width: 960px) {
    :root { --header-h: 92px; }
    .brand img { height: 74px; }
    .site-header .wrap { position: static; display: flex; justify-content: space-between; }
    .menu-toggle { display: inline-flex; }
    .nav {
        position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 1.25rem;
        padding: 1.5rem; background: #082a1c; border-bottom: 1px solid var(--gold);
        box-shadow: 0 24px 30px -24px rgba(0, 0, 0, .25); display: none;
 }
    .nav.is-open { display: flex; }
    .nav ul { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .nav ul a { display: block; padding: .9rem 0; border-bottom: 1px solid rgba(236, 200, 122, .2); }
    .nav a:not(.btn)::after { display: none; }
    .nav .btn--gold { box-shadow: none; border-radius: 0; }
    .nav .nav-left { height: auto; padding: 0; background: none; border-radius: 0; box-shadow: none; }
    .nav-social { margin: 1.25rem 0 0; padding: 0; border: 0; justify-content: flex-start; gap: .75rem; }
    .nav ul .nav-social a { display: grid; padding: 0; border: 0; }
    .nav ul a.btn { display: flex; padding: 0 1.6rem; border-bottom: 0; margin-top: 1rem; }
    .nav .btn { width: 100%; min-height: 52px; }

    .footer-nav { justify-content: center; }
}

/* Mobile */
@media (max-width: 560px) {
    :root { --header-h: 78px; }
    body { font-size: 1rem; }
    .wrap { width: min(var(--wrap), 100% - 2rem); }
    .brand img { height: 60px; }

    .intro, .advocacy, .moments, .apply { padding-block: 4rem; }

}

/* Tighter spacing before the apply banner */

.apply { padding-block: 0 4.5rem; }

/* Simple one-row footer */
.site-footer { background: var(--white); border-top: 1px solid var(--line); padding: 0; }
.footer-bar { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; padding-block: 1rem; }

.footer-copy { margin: 0; font-size: .85rem; color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 0 auto; padding: 0; list-style: none; justify-content: flex-end; }
.footer-nav a { font-size: .85rem; letter-spacing: .04em; text-transform: none; color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--gold); text-decoration: underline; }
@media (max-width: 760px) { .footer-bar { flex-direction: column; align-items: flex-start; gap: .9rem; padding-block: 1.5rem; } .footer-nav { margin: 0; justify-content: flex-start; } }

/* ---------- About page ---------- */
.about-hero { padding: 4.5rem 0 5rem; background: linear-gradient(120deg, var(--sage) 0%, var(--cream) 60%, var(--cream-deep) 100%); position: relative; overflow: hidden; }
.about-hero::before { content: ""; position: absolute; width: 560px; height: 560px; right: -180px; top: -240px; border: 1px solid var(--gold-soft); border-radius: 50%; opacity: .45; }
.about-hero .wrap { position: relative; }
.about-hero__head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.about-hero__head h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); margin-top: .75rem; }
.about-hero__head p { margin-top: 1.1rem; font-family: var(--serif); font-size: 1.45rem; line-height: 1.45; color: var(--muted); }
.about-photo { position: relative; margin: 0 auto; max-width: 1080px; }
.about-photo::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); border-radius: 26px; z-index: 0; }
.about-photo img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 24px; border: 6px solid var(--white); box-shadow: 0 40px 70px -35px rgba(12, 58, 40, .6); }

.about-story { padding: 6rem 0; background: var(--white); }
.about-story__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4.5rem; align-items: start; }
.about-story__text .section-title { margin-bottom: 1.25rem; }
.about-story__text p { margin-top: 1.1rem; color: var(--muted); }
.about-story__text strong { color: var(--green-deep); font-weight: 500; }
.about-facts { padding: .5rem 2rem; background: var(--cream); border: 1px solid var(--line); border-radius: 22px; box-shadow: inset 0 0 0 4px var(--white); }
.about-fact { padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.about-fact:last-child { border-bottom: 0; }
.about-fact span { display: block; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.about-fact strong { display: block; margin-top: .3rem; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--green-deep); }

.about-pageants { padding: 6rem 0; background: var(--white); }
.pageant-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.pageant-list li { padding: 2rem 1.75rem; background: var(--cream); border: 1px solid var(--line); border-radius: 20px; transition: transform .3s, box-shadow .3s; }
.pageant-list li:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(12, 58, 40, .5); }
.pageant-list__no { display: block; margin-bottom: .75rem; font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--gold); }
.pageant-list h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.pageant-list p { font-size: .98rem; color: var(--muted); line-height: 1.65; }

@media (max-width: 960px) {
    .about-story__grid, .pageant-list { grid-template-columns: 1fr; }
    .about-story__grid { gap: 2.5rem; }
    .about-story, .about-pageants { padding-block: 4rem; }
    .about-hero { padding: 3rem 0 4rem; }
}
@media (max-width: 560px) {

    .about-hero__head p { font-size: 1.2rem; }
    .about-photo::before { inset: 8px -8px -8px 8px; }
}

/* About: values as a split list (different from the homepage cards), six pageants on cream */
.about-values { padding: 6rem 0; background: var(--white); }
.about-values__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; align-items: start; }
.about-values__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
.about-values__intro p { margin-top: 1.1rem; color: var(--muted); max-width: 26rem; }
.value-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.value-list li { display: grid; grid-template-columns: 64px 1fr; gap: 1.5rem; align-items: start; padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.value-list__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cream); border: 1px solid var(--gold-soft); }
.value-list__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.value-list h3 { font-size: 1.8rem; margin-bottom: .4rem; }
.value-list p { color: var(--muted); }

.about-pageants { background: var(--cream); }
.pageant-list li { background: var(--white); border-left: 3px solid var(--gold-soft); }
.pageant-list h3 { font-size: 1.5rem; line-height: 1.2; }

@media (max-width: 960px) {
    .about-values { padding-block: 4rem; }
    .about-values__grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-values__intro { position: static; }
}
@media (min-width: 961px) and (max-width: 1100px) { .pageant-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .value-list li { grid-template-columns: 52px 1fr; gap: 1rem; } .value-list__icon { width: 52px; height: 52px; } .value-list h3 { font-size: 1.55rem; } }

/* ---------- Mrs of Australia: titleholders ---------- */
.about-hero--plain { padding-block: 5rem 4.5rem; }
.about-hero--plain .about-hero__head { margin-bottom: 0; }

.holder-empty { padding: 2.5rem 1rem; text-align: center; font-family: var(--serif); font-size: 1.4rem; color: var(--muted); }

@media (max-width: 960px) { .about-hero--plain { padding-block: 3.5rem 3rem; } }

/* ---------- Performance: lighter painting while scrolling ---------- */
.site-header { backdrop-filter: none; }

/* sections below the fold are not painted until they come near the screen */
.about-story, .about-values, .about-pageants, .about-connect, .moments, .advocacy { content-visibility: auto; contain-intrinsic-size: auto 760px; }
/* one light band sweeps across the card (transform only, so it stays smooth) */

/* ---------- Pictures that have not loaded yet (class set by site.js) ----------
   ONE look everywhere, the same as the titleholder cards that load on the Pageantry page: a soft grey surface with
   one light band sweeping across it. A picture shows it itself; a picture inside a tile, a round medal or a round logo
   has no size of its own yet, so the whole tile / circle shows it instead. The picture then fades in. */
img.is-loading,
.partner-tile:has(img.is-loading),
.marquee__item:has(img.is-loading),
.vm-split__logo:has(img.is-loading) {
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 50%, transparent 80%) 150% 0 / 200% 100% no-repeat, #eceee9;
    animation: img-loading 1.4s ease-in-out infinite;
}
/* on a dark background (the mission medal, the Apply Now logos, the hero video) the same look in dark colours */
.mrs-panel__medal:has(img.is-loading),
.apply-choice__logo:has(img.is-loading),
.apply-chosen__logo:has(img.is-loading),
.video-hero.is-loading,
.hero-split__arch:has(img.is-loading) {
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .09) 50%, transparent 80%) 150% 0 / 200% 100% no-repeat, #101a12;
    animation: img-loading 1.4s ease-in-out infinite;
}
@keyframes img-loading { to { background-position: -50% 0; } }

/* inside such a tile only the tile shows the loading look */
.partner-tile img.is-loading,
.marquee__item img.is-loading,
.mrs-panel__medal img.is-loading,
.vm-split__logo img.is-loading,
.apply-choice__logo img.is-loading,
.apply-chosen__logo img.is-loading,
.hero-split__arch img.is-loading { background: none; animation: none; filter: none; opacity: 0; }
/* the picture fades in when it arrives */
img.is-loaded { animation: img-in .6s ease-out; }
@keyframes img-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    img.is-loading, .partner-tile:has(img.is-loading), .marquee__item:has(img.is-loading), .vm-split__logo:has(img.is-loading), .mrs-panel__medal:has(img.is-loading),
    .apply-choice__logo:has(img.is-loading), .apply-chosen__logo:has(img.is-loading), .hero-split__arch:has(img.is-loading), .video-hero.is-loading, img.is-loaded { animation: none; }
}

/* =====================================================================
   Vision & Mission, enhanced
   About: green glass cards around a gold-ringed medallion
   Mrs of Australia: black and gold, the logo beside two numbered statements
   ===================================================================== */

/* ---- About Vision & Mission: col-5 / col-7, a deep green brand panel beside two light cards ---- */
.vm-split { padding: 4.5rem 0; background: var(--cream); }
.vm-split__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem; align-items: stretch; }
.vm-split__brand {
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 2.25rem 2.25rem; color: var(--white);
    background: radial-gradient(circle, rgba(243, 220, 154, .5) 0 1px, transparent 1.6px) 0 0 / 60px 60px, radial-gradient(ellipse at 50% 60%, #3c5f43 0%, #243d2a 62%, #1a2d1f 100%);
    background-blend-mode: soft-light, normal; border-radius: 30px; box-shadow: 0 34px 56px -38px rgba(26, 45, 31, .85);
}
.vm-split__brand::before { content: ""; position: absolute; width: 520px; height: 520px; right: -200px; bottom: -220px; border: 1px solid rgba(236, 200, 122, .28); border-radius: 50%; pointer-events: none; }
.vm-split__brand > * { position: relative; z-index: 1; }
.vm-split__brand .eyebrow { color: var(--gold-soft); }
.vm-split__brand .eyebrow::before { background: var(--gold-soft); }
.vm-split__brand .section-title { margin-top: .6rem; color: var(--white); font-size: clamp(2rem, 3vw, 2.7rem); }
.vm-split__logo { align-self: center; display: grid; place-items: center; width: 300px; height: 300px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 0 0 8px var(--gold-soft), 0 0 60px -6px rgba(236, 200, 122, .5); }
.vm-split__logo img { width: 80%; height: auto; }
.vm-split__tagline { margin: 0; align-self: stretch; padding-top: 1.1rem; border-top: 1px solid rgba(236, 200, 122, .4); font-family: var(--serif); font-size: 1.2rem; font-style: italic; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.vm-split__cards {
    display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 3rem; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold-soft); border-radius: 24px;
    box-shadow: inset 0 0 0 6px var(--white), inset 0 0 0 7px rgba(236, 200, 122, .35), 0 30px 50px -38px rgba(12, 58, 40, .5);
}
.vm-split__card { padding: 0; }
.vm-split__divider { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0; }
.vm-split__divider::before, .vm-split__divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.vm-split__divider::after { background: linear-gradient(270deg, transparent, var(--gold-soft)); }
.vm-split__divider i { font-style: normal; font-size: 1.1rem; color: var(--gold); }
.vm-split__card-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.vm-split__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sage); }
.vm-split__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vm-split__card h3 { font-size: 1.75rem; }
.vm-split__lead { margin-bottom: .75rem; font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.4; color: var(--green-deep); }
.vm-split__card p:not(.vm-split__lead) { font-size: .95rem; color: var(--muted); line-height: 1.7; }
@media (max-width: 1100px) { .vm-split__brand { padding: 2rem 1.5rem; } .vm-split__logo { width: 250px; height: 250px; } .vm-split__cards { padding: 2rem 1.75rem; } .vm-split__lead { font-size: 1.2rem; } }
@media (max-width: 860px) {
    .vm-split__logo { width: 220px; height: 220px; }
    .vm-split { padding-block: 3.5rem; }
    .vm-split__grid { grid-template-columns: 1fr; }
    .vm-split__brand { align-items: center; text-align: center; padding: 2.5rem 1.5rem; }
    .vm-split__brand .eyebrow { justify-content: center; }
    .vm-split__brand .eyebrow::after { content: ""; width: 2.5rem; height: 1px; background: var(--gold-soft); }
}
@media (max-width: 560px) { .vm-split__card h3 { font-size: 1.55rem; } .vm-split__lead { font-size: 1.15rem; } .vm-split__logo { width: 220px; height: 220px; } }

/* Titleholder photos: top-aligned (crowns stay in view); the picture is drawn 8% taller than its frame, so the bottom edge (the very white strip) is trimmed */

/* ---------- Pageant pages: titleholders grouped by division ---------- */
.about-hero--plain .section-title { font-size: clamp(2.3rem, 5vw, 3.9rem); }

/* two rows of logos drifting in opposite directions */

/* the circle of support: framed logos */

/* ---------- Footer: developer credit and social icons ---------- */
.footer-copy p { margin: 0; }
.footer-dev { margin-top: .25rem !important; font-size: .78rem; letter-spacing: .04em; color: var(--muted); }
.footer-dev a { color: var(--gold); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.footer-dev a:hover, .footer-dev a:focus-visible { background-size: 100% 1px; }
.footer-social { display: flex; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.footer-social a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--green-deep); border: 1px solid var(--gold-soft); border-radius: 50%; transition: color .25s, background .25s, border-color .25s, transform .25s; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--white); background: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.footer-social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.social-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .footer-social { margin-top: .25rem; } }

/* ---------- Apply Now page ---------- */
.apply { padding: 4rem 0 6.5rem; background: var(--white); }

.apply-panel__head { max-width: 640px; margin: 0 auto 2.5rem; text-align: center; }
.apply-panel__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.apply-panel__head p { margin: .9rem 0 0; color: var(--muted); }
.apply-panel[hidden] { display: none; }

/* step 1: the categories */
.apply-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.apply-choices li { display: flex; }
.apply-choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: .75rem; width: 100%; padding: 2.25rem 1.75rem 1.9rem; font: inherit; text-align: center; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 24px 40px -32px rgba(12, 58, 40, .55); transition: transform .35s, box-shadow .35s, border-color .35s; }
.apply-choice::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(236, 200, 122, .4); border-radius: 19px; pointer-events: none; transition: border-color .35s; }
.apply-choice:hover, .apply-choice:focus-visible { transform: translateY(-6px); border-color: var(--gold-soft); box-shadow: 0 32px 46px -30px rgba(12, 58, 40, .65); }
.apply-choice:hover::before, .apply-choice:focus-visible::before { border-color: var(--gold); }
.apply-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.apply-choice__logo { display: grid; place-items: center; width: 176px; height: 176px; margin-bottom: .6rem; overflow: hidden; font-size: 2.8rem; color: var(--gold-soft); background: #0a1411; border-radius: 34px; box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold-soft), 0 18px 28px -14px rgba(0, 0, 0, .6); }
.apply-choice__logo img { width: 100%; height: 100%; object-fit: contain; }
.apply-choice__name { margin: 0; font-family: var(--serif); font-size: 1.65rem; font-weight: 500; line-height: 1.2; color: var(--green-deep); }
.apply-choice__text { font-size: .9rem; line-height: 1.6; color: var(--muted); }

button.apply-choice__group { cursor: pointer; transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; }
button.apply-choice__group::after { content: "→"; flex: none; margin-left: .15rem; color: var(--gold); transition: transform .25s; }
button.apply-choice__group:hover, button.apply-choice__group:focus-visible { background: var(--white); border-color: var(--gold); box-shadow: 0 10px 22px -16px rgba(12, 58, 40, .6); transform: translateY(-1px); }
button.apply-choice__group:hover::after { transform: translateX(3px); }
button.apply-choice__group:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* steps 2 and 3: the form */
.apply-panel:not([data-step="1"]) { max-width: 860px; margin-inline: auto; padding: 3.25rem; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold-soft); border-radius: 26px; box-shadow: inset 0 0 0 7px var(--white), inset 0 0 0 8px rgba(236, 200, 122, .35), 0 36px 56px -40px rgba(12, 58, 40, .55); }

@media (max-width: 760px) {
    .apply { padding-block: 3rem 4.5rem; }
    .apply-panel:not([data-step="1"]) { padding: 2.25rem 1.4rem; border-radius: 20px; box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 6px rgba(236, 200, 122, .35); }

    .apply-choices { grid-template-columns: 1fr; }

}

/* Creatives cards: the Apply Now card with the photo of the category in the gold frame (a wide picture, set in the CMS). Without a photo the badge shows
   the first letter of the name. The whole card is a link to the form of its category. */
a.creative-card { text-decoration: none; cursor: pointer; }

.creative-letter { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--gold-soft); }

/* The sections under the cards of Creatives have a look of their own */
/* why: a dark green band with four tiles */
.cr-why { padding: 5rem 0; color: var(--white); background: radial-gradient(circle at 15% 0%, #4a6b4f, var(--green-deep) 65%); }
.cr-why .section-head h2, .cr-why .section-head p { color: var(--white); }
.cr-why .section-head p { opacity: .8; }
.cr-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.cr-why__grid li { padding: 1.75rem 1.5rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(236, 200, 122, .35); border-radius: 20px; overflow-wrap: anywhere; transition: transform .35s, background .35s; }
.cr-why__grid li:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .12); }
.cr-why__grid svg { width: 40px; height: 40px; margin-bottom: .9rem; fill: none; stroke: var(--gold-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cr-why__grid h3 { margin: 0 0 .4rem; font-family: var(--serif); font-size: 1.35rem; color: var(--white); }
.cr-why__grid p { margin: 0; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }
/* questions: a centred banner */

@media (prefers-reduced-motion: reduce) { .cr-why__grid li { transition: none; } }
/* the small round picture of the chosen category on the form page */

a.apply-chosen__change { display: inline-block; text-decoration: none; }

/* Long words typed in the database (a name, a description, a fact) wrap instead of pushing the page wider than a small phone */
.apply-choices > li, .holder-grid > *, .story-feature__facts > div, .partners-grid > li { min-width: 0; }
.apply-choice, .holder-card__body, .story-feature__facts, .mrs-panel__item, .section-title, .about-hero__head p, .story-feature__text p { overflow-wrap: anywhere; }

/* The Mrs badge fills its frame (100%) and the Mini Miss artwork is 64% of its disc: the two titles come out the same size */

/* One size for the title and the paragraph of every first screen (About, Partners, Contact, Apply, Creatives, Pageantry ...) */
:root { --hero-title: clamp(2.1rem, 4.4vw, 3.3rem); --hero-lead: clamp(1.1rem, 1.7vw, 1.3rem); }
.about-hero__head h1.section-title, .about-hero--plain .about-hero__head h1.section-title { font-size: var(--hero-title); line-height: 1.12; }
.about-hero__head p { font-size: var(--hero-lead); }

/* Creatives cards: the Apply Now card with the photo of the category in the gold frame (a wide picture, set in the CMS). Without a photo the badge shows
   the first letter of the name. The whole card is a link to the form of its category. */
.creative-photo { display: block; width: 100%; aspect-ratio: 3 / 2; margin-bottom: .6rem; overflow: hidden; background: #0a1411; border-radius: 18px; box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold-soft), 0 16px 26px -16px rgba(12, 58, 40, .7); }
.creative-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
a.creative-card:hover .creative-photo img, a.creative-card:focus-visible .creative-photo img { transform: scale(1.05); }
a.creative-card { text-decoration: none; cursor: pointer; }

.creative-letter { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--gold-soft); }

/* the name of a category is a link to its application page (Google follows it); it looks the same as before */
.apply-choice__name a { color: inherit; text-decoration: none; }
.apply-choice__name a:hover, .apply-choice__name a:focus-visible { color: var(--gold); }
.about-hero__head p a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* Pageantry gallery: a Gallery tab next to the stars (only when the pageant has photos). A pill switch, a bento grid of framed photos (every seventh is tall and
   every seventh, from the fourth, is wide, so the grid is never a plain table of squares) and a dark photo viewer. */

html.has-lightbox { overflow: hidden; }

/* ---------- About page ---------- */
.ab { --ab-ink: var(--green-deep); --ab-soft: var(--muted); --ab-ivory: var(--cream); --ab-champ: var(--cream-deep); --ab-dark: #082a1c; background: var(--ab-ivory); }
.ab h1, .ab h2, .ab h3 { color: var(--ab-ink); }
.ab p { color: var(--ab-soft); }
.ab strong { color: var(--ab-ink); font-weight: 500; }

.ab-ornament { display: flex; align-items: center; gap: 1.1rem; max-width: 320px; margin: 0 auto 1.6rem; }
.ab-ornament span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ab-ornament span:last-child { background: linear-gradient(270deg, transparent, var(--gold)); }
.ab-ornament i { font-style: normal; color: var(--gold); font-size: 1.1rem; }

.ab-hero { padding: 4rem 0 3.5rem; background: radial-gradient(800px 320px at 20% 0%, rgba(236, 200, 122, .24), transparent 70%), var(--ab-ivory); }
.ab-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ab-hero__photo { position: relative; margin: 0; }
.ab-hero__photo img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 25%; border-radius: 6px; box-shadow: 0 35px 60px -35px rgba(60, 40, 10, .6); }
.ab-hero h1 { margin: .9rem 0 1.2rem; font-size: clamp(2.8rem, 4.6vw, 4rem); }
.ab-hero h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.ab-hero__text p + p { margin-top: 1rem; }
.ab-hero__first { font-family: var(--serif); font-size: 1.45rem; line-height: 1.5; color: var(--ab-ink) !important; }
.ab-hero__first strong { color: var(--gold); }
.ab-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin: 1.6rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.ab-facts div { padding: 0 2rem; border-left: 1px solid var(--line); }
.ab-facts div:first-child { padding-left: 0; border-left: 0; }
.ab-facts dt { font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.ab-facts dd { margin: .3rem 0 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--ab-ink); }

.ab-mv { position: relative; padding: 4.5rem 0; overflow: hidden; background: radial-gradient(700px 320px at 15% 0%, rgba(96, 168, 120, .16), transparent 70%), radial-gradient(560px 300px at 95% 100%, rgba(236, 200, 122, .1), transparent 70%), linear-gradient(180deg, #0c3a28 0%, #082a1c 100%); }
.ab-mv .wrap { position: relative; }
.ab-mv h2, .ab-mv h3 { color: var(--white); }
.ab-mv .eyebrow { color: var(--gold-soft); }
.ab-mv .eyebrow::before, .ab-mv .eyebrow::after { background: var(--gold-soft); }
.ab-mv .section-head, .ab-values .section-head { margin-bottom: 2.2rem; }

.ab-mv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ab-mv__card { padding: 2.2rem 2.2rem 2.4rem; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid rgba(236, 200, 122, .3); border-radius: 18px; box-shadow: inset 0 0 0 5px rgba(8, 42, 28, .55), inset 0 0 0 6px rgba(236, 200, 122, .12); transition: transform .3s, border-color .3s; }
.ab-mv__card:hover { transform: translateY(-4px); border-color: rgba(236, 200, 122, .6); }
.ab-mv__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.2rem; border-radius: 50%; border: 1px solid rgba(236, 200, 122, .55); }
.ab-mv__icon svg { width: 27px; height: 27px; fill: none; stroke: var(--gold-soft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-mv__card h3 { margin-bottom: .8rem; font-size: 2rem; }
.ab-goals { list-style: none; margin: 0; padding: 0; }
.ab-goals li { position: relative; padding-left: 1.5rem; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.ab-goals li + li { margin-top: .6rem; }
.ab-goals li::before { content: "\2726"; position: absolute; left: 0; top: .15rem; font-size: .7rem; color: var(--gold-soft); }
.ab-mv__card p { font-size: 1.02rem; line-height: 1.75; color: rgba(255, 255, 255, .82); }

.ab-values { padding: 4rem 0; }
.ab-values .section-head { margin-bottom: 1.8rem; }
.ab-values__list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0; padding: 0; }
.ab-values__list li { padding: 1.9rem 1.9rem 2.1rem; text-align: left; background: var(--white); border: 1px solid rgba(185, 133, 42, .2); border-left: 3px solid var(--gold-soft); border-radius: 18px; transition: transform .3s, box-shadow .3s; }
.ab-values__list li:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(12, 58, 40, .45); }
.ab-values__no { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--gold); }
.ab-values__list h3 { margin-top: .8rem; font-size: 1.6rem; line-height: 1.2; }
.ab-values__list p { margin-top: .7rem; font-size: .96rem; line-height: 1.7; }

.ab-close { padding: 0 0 5rem; }
.mh-close { padding-top: 5rem; }
.mh-close .ab-close__text p { color: var(--muted); }
.ab-close__panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2.5rem; padding: 3rem 3.2rem; background: linear-gradient(135deg, rgba(228, 240, 232, .9), rgba(248, 243, 231, .9) 60%, rgba(236, 227, 208, .9)); border: 1px solid rgba(185, 133, 42, .3); border-radius: 24px; box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 6px rgba(185, 133, 42, .18); }
.ab-close .section-title { margin-top: .7rem; font-size: clamp(2rem, 3.6vw, 2.9rem); }
.ab-close p { max-width: 38rem; margin-top: .9rem; }
.ab-close__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .9rem; }
.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 48px; padding: 0 1.8rem; font: 500 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--gold); border-radius: 6px; transition: background .25s, color .25s, border-color .25s; }
.ab-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ab-btn--solid { color: var(--white); background: linear-gradient(180deg, #c8922f, #a9771f); box-shadow: 0 12px 22px -14px rgba(120, 80, 10, .7); }
.ab-btn--solid:hover { background: linear-gradient(180deg, #0c3a28, #082a1c); border-color: #082a1c; }
.ab-btn--line { color: var(--ab-ink, var(--green-deep)); background: rgba(255, 255, 255, .5); }
.ab-btn--line:hover { background: var(--ab-ink, var(--green-deep)); border-color: var(--ab-ink, var(--green-deep)); color: var(--white); }

@media (max-width: 960px) {
    .ab-hero { padding-block: 2.5rem; }
    .ab-hero__grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .ab-hero__photo { max-width: 420px; margin-inline: auto; }
    .ab-values, .ab-mv { padding-block: 3rem; }
    .ab-close { padding-bottom: 3rem; }
    .mh-close { padding-top: 3rem; }
    .ab-close__panel { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.2rem 1.8rem; }
    .ab-close__actions { justify-content: flex-start; }
    .ab-mv__grid { grid-template-columns: 1fr; }
    .ab-values__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .ab-facts { grid-template-columns: 1fr; gap: 1.2rem; }
    .ab-facts div, .ab-facts div:first-child { padding: 0; border-left: 0; }
    .ab-mv__card { padding: 1.8rem 1.4rem; }
    .ab-values__list { grid-template-columns: 1fr; gap: .9rem; }
    .ab-close__actions .ab-btn { width: 100%; }
}

/* ---------- Gallery page ---------- */
.gl { padding: 4.5rem 0 5.5rem; background: radial-gradient(800px 320px at 50% 0%, rgba(236, 200, 122, .24), transparent 70%), var(--cream); }
/* the top of the page: green and gold like the rest of Miss Earth Australia, with three of the photos stacked like prints */
.gl-hero { position: relative; overflow: hidden; padding: 5rem 0 5.5rem; color: rgba(255, 255, 255, .86); background: radial-gradient(900px 440px at 88% 8%, rgba(236, 200, 122, .22), transparent 65%), linear-gradient(135deg, #0c3a28 0%, #082a1c 58%, #061f15 100%); }
.gl-hero::before, .gl-hero::after { content: ""; position: absolute; border: 1px solid rgba(236, 200, 122, .28); border-radius: 50%; pointer-events: none; }
.gl-hero::before { width: 640px; height: 640px; right: -170px; top: -280px; }
.gl-hero::after { width: 440px; height: 440px; left: -150px; bottom: -240px; }
.gl-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.gl-hero .eyebrow { color: var(--gold-soft); }
.gl-hero .eyebrow::before { background: var(--gold-soft); }
.gl-hero h1 { margin: 1rem 0 1.2rem; font-size: clamp(3rem, 6vw, 5.2rem); color: var(--white); }
.gl-hero h1 em { font-style: italic; font-weight: 400; color: var(--gold-soft); }
.gl-hero__text p { max-width: 34rem; font-family: var(--serif); font-size: 1.4rem; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.gl-hero__facts { display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem; margin: 2.2rem 0; padding: 1.5rem 0 0; list-style: none; border-top: 1px solid rgba(236, 200, 122, .35); }
.gl-hero__facts li { font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.gl-hero__facts b { display: block; margin-bottom: .2rem; font-family: var(--serif); font-size: 2.1rem; font-weight: 500; letter-spacing: .02em; text-transform: none; line-height: 1.1; color: var(--gold-soft); }
.gl-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.gl-hero .ab-btn--line { color: var(--white); background: transparent; border-color: rgba(236, 200, 122, .7); }
.gl-hero .ab-btn--line:hover { color: var(--green-deep); background: var(--gold-soft); border-color: var(--gold-soft); }
.gl-hero__stack { position: relative; height: 460px; }
.gl-hero__shot { position: absolute; width: 230px; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; border: 6px solid var(--cream); border-radius: 4px; background: var(--cream-deep); box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .7); }
.gl-hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.gl-hero__shot--1 { left: 2%; top: 70px; z-index: 1; transform: rotate(-7deg); }
.gl-hero__shot--2 { left: 50%; top: 0; z-index: 3; width: 260px; transform: translateX(-50%); }
.gl-hero__shot--3 { right: 2%; top: 90px; z-index: 2; transform: rotate(7deg); }
.gl-hero__shot--2::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(236, 200, 122, .8); pointer-events: none; }
/* Each photo is laid out in its own shape: a portrait stays tall, a landscape stays wide. Every item grows by its width / height (--ar) and starts from that
   ratio at the height of a row (--gl-row), so a row is filled edge to edge by as many photos as fit, all with the same height and nothing cut. The empty
   item at the end keeps the last row from stretching. */
.gl__grid { --gl-row: 260px; display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.gl__grid::after { content: ""; flex-grow: 1000000; }
.gl__grid.is-filled::after { display: none; } /* site.js: the last row is nearly full, so it is stretched */
.gl__item[hidden] { display: none; }
.gl__item { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--gl-row)); min-width: 0; margin: 0; }
.gl__open { position: relative; display: block; width: 100%; aspect-ratio: var(--ar); padding: 0; border: 0; border-radius: 6px; background: var(--cream-deep); overflow: hidden; cursor: zoom-in; box-shadow: 0 16px 28px -24px rgba(12, 58, 40, .7); transition: transform .3s, box-shadow .3s; }
.gl__open:hover, .gl__open:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(12, 58, 40, .75); }
.gl__open:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gl__open img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gl__open:hover img { transform: scale(1.04); }
.gl__cap { position: absolute; inset: auto 0 0; padding: 2.4rem 1rem .85rem; font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; text-align: left; color: var(--white); background: linear-gradient(to top, rgba(4, 20, 13, .85), transparent); transform: translateY(100%); opacity: 0; transition: transform .35s, opacity .35s; }
.gl__open:hover .gl__cap, .gl__open:focus-visible .gl__cap { transform: none; opacity: 1; }
.gl__viewer { width: min(1240px, 96vw); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.gl__viewer[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; animation: gl-in .3s ease; }
.gl__viewer::backdrop { background: rgba(4, 20, 13, .94); }
.gl__figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; min-width: 0; }
.gl__figure img { display: block; max-width: 100%; max-height: calc(100vh - 11rem); object-fit: contain; border-radius: 6px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); transition: opacity .3s; }
.gl__figure.is-loading img { opacity: 0; }
.gl__figure figcaption { min-height: 1.5em; max-width: 640px; font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.4; text-align: center; color: rgba(255, 255, 255, .88); }
.gl__close, .gl__nav { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; font-size: 1.8rem; line-height: 1; color: var(--gold-soft); background: rgba(255, 255, 255, .05); border: 1px solid rgba(236, 200, 122, .6); border-radius: 50%; cursor: pointer; transition: color .25s, background .25s, transform .25s; }
.gl__close:hover, .gl__nav:hover, .gl__close:focus-visible, .gl__nav:focus-visible { color: var(--green-deep); background: var(--gold-soft); outline: 0; }
.gl__nav:hover { transform: scale(1.06); }
.gl__close { position: absolute; top: -3.2rem; right: 0; }
.gl__count { position: absolute; left: 0; right: 0; bottom: -2.6rem; margin: 0; font-size: .72rem; letter-spacing: .22em; text-align: center; color: var(--gold-soft); }
/* the pager under the photos */
.gl__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.2rem; margin-top: 3.2rem; }
.gl__numbers { display: flex; align-items: center; gap: .4rem; }
.gl__page { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 44px; height: 44px; padding: 0 1rem; font: 500 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--green-deep); background: var(--white); border: 1px solid var(--line); border-radius: 999px; transition: color .25s, background .25s, border-color .25s; }
.gl__page:hover, .gl__page:focus-visible { color: var(--white); background: var(--green-deep); border-color: var(--green-deep); outline: 0; }
.gl__page.is-current { color: var(--white); background: var(--green-deep); border-color: var(--green-deep); }
.gl__page.is-off { opacity: .4; pointer-events: none; }
.gl__gap { padding: 0 .3rem; color: var(--gold); }
@keyframes gl-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 960px) {
    .gl__grid { --gl-row: 210px; }
    .gl { padding-block: 3rem 3.5rem; }
    .gl-hero { padding-block: 3.5rem 4rem; }
    .gl-hero__grid { grid-template-columns: 1fr; }
    .gl-hero__stack { height: 380px; max-width: 520px; width: 100%; margin-inline: auto; }
    .gl-hero__shot { width: 180px; }
    .gl-hero__shot--2 { width: 210px; }
}
@media (max-width: 560px) {
    .gl-hero__text p { font-size: 1.2rem; }
    .gl-hero__facts { gap: 1rem 1.8rem; }
    .gl-hero__facts b { font-size: 1.7rem; }
    .gl-hero__actions .ab-btn { width: 100%; }
    .gl-hero__stack { height: 320px; }
    .gl-hero__shot { width: 140px; border-width: 4px; }
    .gl-hero__shot--2 { width: 170px; }
    .gl__pager { margin-top: 2.2rem; }
    .gl__page.gl__page--step { padding: 0 .9rem; }
    .gl__grid { --gl-row: 220px; gap: .5rem; }
    .gl__cap { opacity: 1; transform: none; font-size: .9rem; padding: 1.8rem .7rem .6rem; }
    .gl__viewer[open] { grid-template-columns: 1fr; }
    .gl__nav { position: absolute; bottom: -3.6rem; z-index: 2; width: 44px; height: 44px; }
    .gl__nav--prev { left: calc(50% - 6.2rem); }
    .gl__nav--next { right: calc(50% - 6.2rem); }
    .gl__count { bottom: -3rem; }
    .gl__close { top: -3.2rem; }
    .gl__figure img { max-height: calc(100vh - 11rem); }
}
@media (prefers-reduced-motion: reduce) { .gl__viewer[open] { animation: none; } .gl__open, .gl__open img, .gl__cap, .gl__figure img { transition: none; } }


/* ---------- Titleholders (site/titleholders.php): the cards, and the window a biography opens in ---------- */
.th { padding-block: 5.5rem 6rem; }
.th-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.th-card { flex: 0 1 calc((100% - 2 * 2.5rem) / 3); max-width: 380px; min-width: 240px; }
.th-card__open { display: block; width: 100%; margin: 0; padding: 0; font: inherit; text-align: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.th-card__open:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 8px; }
/* the photo with the name on it: a big year at the top, the name and title on a green shade at the foot */
.th-card__photo { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: linear-gradient(160deg, var(--sage), var(--cream-deep)); box-shadow: 0 26px 40px -30px rgba(12, 58, 40, .75); transition: transform .35s, box-shadow .35s; }
.th-card__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 20, 13, .42) 0%, transparent 28%, transparent 48%, rgba(4, 20, 13, .92) 100%); pointer-events: none; }
.th-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .8s; }
.th-card--bio:hover .th-card__photo, .th-card__open:focus-visible .th-card__photo { transform: translateY(-6px); box-shadow: 0 34px 46px -30px rgba(12, 58, 40, .85); }
.th-card--bio:hover .th-card__photo img { transform: scale(1.05); }
.th-card__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 4.5rem; letter-spacing: .06em; color: var(--gold); }
.th-card__year { position: absolute; top: 1rem; left: 1.2rem; z-index: 2; font-family: var(--serif); font-size: 2.6rem; font-weight: 500; line-height: 1; letter-spacing: .04em; color: var(--gold-soft); text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.th-card__caption { position: absolute; inset: auto 0 0; z-index: 2; display: block; padding: 0 1.4rem 1.3rem; text-align: left; }
.th-card__caption::before { content: ""; display: block; width: 2.4rem; height: 2px; margin-bottom: .8rem; background: var(--gold-soft); transition: width .4s; }
.th-card--bio:hover .th-card__caption::before { width: 4.2rem; }
.th-card__caption strong { display: block; font-family: var(--serif); font-size: 1.85rem; font-weight: 500; line-height: 1.12; color: var(--white); }
.th-card__caption em { display: block; margin-top: .45rem; font-style: normal; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.th-card__more { display: block; max-height: 0; margin-top: 0; overflow: hidden; font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--white); opacity: 0; transition: max-height .35s, margin .35s, opacity .35s; }
.th-card--bio:hover .th-card__more, .th-card__open:focus-visible .th-card__more { max-height: 2rem; margin-top: .8rem; opacity: 1; }
@media (hover: none) { .th-card__more { max-height: 2rem; margin-top: .8rem; opacity: 1; } }
.th-feature { scroll-margin-top: var(--header-h); }
/* The photos are about 510 x 660 pixels, so the featured one is not stretched over half of the screen: it is shown at 420 pixels at most (sharp), in a frame
   that sits a little off it, beside the text. The rest is design: the green panel, the gold lines and the big year. */
.th-feature { position: relative; display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); min-height: 0; padding: 6rem max(1.5rem, calc((100% - var(--wrap)) / 2)); overflow: hidden; }
.th-feature .mh-reigning__photo { position: relative; z-index: 1; width: 100%; max-width: 420px; min-height: 0; aspect-ratio: 3 / 4; margin-inline: auto; overflow: visible; background: none; }
.th-feature .mh-reigning__photo::before { content: ""; position: absolute; inset: 20px -20px -20px 20px; border: 1px solid var(--gold-soft); border-radius: 6px; }
.th-feature .mh-reigning__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 6px; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7); }
.th-feature .mh-reigning__panel { padding: 0; overflow: visible; }
.th-feature .mh-reigning__panel::before { content: none; }
.th-feature::after { content: attr(data-year); position: absolute; right: -1rem; bottom: -2.4rem; font-family: var(--serif); font-size: clamp(9rem, 17vw, 16rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(236, 200, 122, .3); pointer-events: none; } /* the big year behind the text is the titleholder's */
.th-feature .mh-reigning__quote { font-size: 1.35rem; }
.th-feature .btn--gold { cursor: pointer; }
@media (max-width: 960px) { .th-feature { grid-template-columns: 1fr; gap: 3rem; padding-block: 4rem 4.5rem; } .th-feature .mh-reigning__photo { max-width: 360px; } }
.th .section-head { margin-bottom: 3.2rem; }

html.has-modal { overflow: hidden; }
.th-viewer { width: min(980px, 94vw); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.th-viewer::backdrop { background: rgba(4, 20, 13, .88); backdrop-filter: blur(5px); }
.th-viewer[open] { animation: th-in .3s ease; }
.th-viewer__panel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); height: min(700px, calc(100vh - 3rem)); overflow: hidden; background: var(--white); border: 1px solid var(--gold-soft); border-radius: 26px; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .75); animation: th-rise .4s cubic-bezier(.2, .7, .2, 1); }
.th-viewer__panel::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 4px; background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-soft)); }
/* the photo is shown whole: the column is as wide as the photo is at the height of the window */
.th-viewer__photo { position: relative; margin: 0; min-width: 240px; background: linear-gradient(160deg, var(--sage), var(--cream-deep)); }
.th-viewer__photo img { display: block; width: auto; height: 100%; max-width: min(46vw, 460px); object-fit: cover; object-position: 50% 0; }
.th-viewer__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 20, 13, .18), transparent 22%, transparent 70%, rgba(4, 20, 13, .45)); pointer-events: none; }
.th-viewer__photo::after { content: ""; position: absolute; inset: 14px; z-index: 1; border: 1px solid rgba(236, 200, 122, .7); border-radius: 14px; pointer-events: none; }
.th-viewer__photo .th-card__initials { font-size: 6rem; }
.th-viewer__side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.th-viewer__content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 3rem 3rem 2rem; background: linear-gradient(180deg, var(--cream) 0, var(--white) 9rem); scrollbar-width: thin; scrollbar-color: var(--gold-soft) transparent; }
.th-viewer__content:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.th-viewer__name { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 600; line-height: 1.08; }
.th-viewer__title { display: inline-block; margin-top: .9rem; padding: .4rem 1rem; font-size: .72rem; font-weight: 500; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); background: var(--cream); border: 1px solid var(--gold-soft); border-radius: 999px; }
.th-viewer__rule { display: flex; align-items: center; gap: .7rem; margin: 1.2rem 0 1.4rem; color: var(--gold); font-size: .8rem; }
.th-viewer__rule i { width: 5rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.th-viewer__rule b { order: -1; font-weight: 400; }
.th-viewer__bio > * + * { margin-top: .9rem; }
.th-viewer__bio p, .th-viewer__bio li { font-size: 1rem; line-height: 1.75; color: var(--ink); }
.th-viewer__bio h4 { margin-top: 1.7rem; padding-bottom: .45rem; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; color: var(--green-deep); border-bottom: 1px solid var(--line); }
.th-viewer__bio h4 + * { margin-top: .8rem; }
.th-viewer__bio ul { margin: 0; padding: 0; list-style: none; }
.th-viewer__bio li { position: relative; padding-left: 1.4rem; }
.th-viewer__bio li + li { margin-top: .5rem; }
.th-viewer__bio li::before { content: "\2726"; position: absolute; left: 0; top: .15em; font-size: .7rem; color: var(--gold); }
.th-viewer__bio li strong { font-weight: 500; color: var(--green-deep); }
.th-viewer__bio > p.is-lead:first-child::first-letter { float: left; margin: .1em .1em 0 0; font-family: var(--serif); font-size: 3.4em; font-weight: 600; line-height: .8; color: var(--gold); }
.th-viewer__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.5rem; background: var(--cream); border-top: 1px solid var(--line); }
.th-viewer__nav[hidden] { display: none; }
.th-viewer__step { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1.1rem; font: inherit; font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--green-deep); background: var(--white); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: color .25s, background .25s, border-color .25s; }
.th-viewer__step:hover, .th-viewer__step:focus-visible { color: var(--white); background: var(--green-deep); border-color: var(--green-deep); outline: 0; }
.th-viewer__count { font-size: .72rem; letter-spacing: .22em; color: var(--gold); }
.th-viewer__close { position: absolute; top: .9rem; right: .9rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 1.8rem; line-height: 1; color: var(--green-deep); background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; transition: color .25s, background .25s, transform .25s; }
.th-viewer__close:hover, .th-viewer__close:focus-visible { color: var(--white); background: var(--green-deep); outline: 0; transform: rotate(90deg); }
.th-viewer.is-swapping .th-viewer__photo img { animation: th-fade .45s ease; }
.th-viewer.is-swapping .th-viewer__content > * { animation: th-up .5s cubic-bezier(.2, .7, .2, 1) both; }
.th-viewer.is-swapping .th-viewer__content > :nth-child(2) { animation-delay: .05s; }
.th-viewer.is-swapping .th-viewer__content > :nth-child(3) { animation-delay: .1s; }
.th-viewer.is-swapping .th-viewer__content > :nth-child(4) { animation-delay: .15s; }
@keyframes th-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes th-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes th-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes th-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .th-card { flex-basis: calc((100% - 2.5rem) / 2); } .th-card__caption strong { font-size: 1.55rem; } }
@media (max-width: 560px) {
    .th { padding-block: 3.5rem 3rem; }
    .th-grid { gap: 1.6rem; }
    .th-card { flex-basis: 100%; max-width: 360px; }
    .th-feature { padding: 3.5rem 1.75rem 4rem; }
    .th-feature .mh-reigning__photo { max-width: 340px; }
    .th-feature .mh-reigning__photo::before { inset: 14px -12px -14px 12px; }
    .th-viewer { width: calc(100vw - 1.5rem); }
    .th-viewer__panel { display: block; height: auto; max-height: calc(100vh - 1.5rem); overflow-y: auto; overscroll-behavior: contain; }
    .th-viewer__photo { min-width: 0; }
    .th-viewer__photo img { width: 100%; height: auto; max-width: none; max-height: 70vh; }
    .th-viewer__photo .th-card__initials { position: static; height: 30vh; }
    .th-viewer__side { display: block; }
    .th-viewer__content { overflow: visible; padding: 1.8rem 1.4rem 2rem; }
    .th-viewer__nav { position: sticky; bottom: 0; z-index: 2; padding: .7rem 1rem; }
    .th-viewer__step { padding: .5rem .9rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) { .th-viewer[open], .th-viewer__panel, .th-viewer.is-swapping .th-viewer__photo img, .th-viewer.is-swapping .th-viewer__content > * { animation: none; } .th-card__photo, .th-card__photo img, .th-card__more, .th-card__caption::before, .th-viewer__close, .th-viewer__step { transition: none; } }
.gl__nav[hidden] { display: none; }

/* ---------- The previous titleholder on the home page (site/home.php) ---------- */
.mh-previous { position: relative; overflow: hidden; padding: 6.5rem 0; background: linear-gradient(180deg, var(--cream) 0%, #f2ecdc 100%); }
.mh-previous::before { content: attr(data-year); position: absolute; left: -1rem; bottom: -2.6rem; font-family: var(--serif); font-size: clamp(9rem, 18vw, 17rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(185, 133, 42, .28); pointer-events: none; }
.mh-previous__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 460px); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.mh-previous .section-title { margin: 1rem 0 .4rem; font-size: clamp(2.8rem, 5vw, 4.4rem); }
.mh-previous .section-title em { font-style: italic; font-weight: 400; color: var(--gold); }
.mh-previous__year { font-size: .85rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.mh-previous__lead { max-width: 34rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 1.4rem; line-height: 1.55; color: var(--muted); }
.mh-previous__facts { display: grid; gap: 1.1rem; max-width: 36rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.mh-previous__facts li { padding-left: 1.2rem; border-left: 2px solid var(--gold-soft); }
.mh-previous__facts b { display: block; margin-bottom: .2rem; font: 500 .68rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.mh-previous__facts span { display: block; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.mh-previous__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2.4rem; }
.mh-previous__next { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--green-deep); border-bottom: 1px solid var(--gold-soft); padding-bottom: .25rem; transition: color .25s, border-color .25s; }
.mh-previous__next:hover, .mh-previous__next:focus-visible { color: var(--gold); border-color: var(--gold); outline: 0; }
/* the picture is shown at 460 pixels at most (the file is about 1000 pixels wide, so it is sharp), in a frame that sits a little off it */
.mh-previous__photo { position: relative; width: 100%; max-width: 460px; aspect-ratio: 3 / 4; margin: 0 auto; }
.mh-previous__photo::before { content: ""; position: absolute; inset: 22px 22px -22px -22px; border: 1px solid var(--gold); border-radius: 6px; }
.mh-previous__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; border-radius: 6px; box-shadow: 0 34px 56px -30px rgba(12, 58, 40, .75); }
.mh-previous__photo figcaption { position: absolute; left: 50%; bottom: 1.3rem; transform: translateX(-50%); padding: .5rem 1.2rem; font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--white); background: rgba(12, 58, 40, .88); border: 1px solid var(--gold-soft); border-radius: 999px; }
@media (max-width: 960px) {
    .mh-previous { padding-block: 4rem 4.5rem; }
    .mh-previous__grid { grid-template-columns: 1fr; gap: 3.2rem; }
    .mh-previous__photo { order: -1; max-width: 340px; }
    .mh-previous__photo::before { inset: 16px 16px -16px -16px; }
}
@media (max-width: 560px) { .mh-previous__lead { font-size: 1.2rem; } .mh-previous__actions .btn { width: 100%; } }