@font-face {
    font-family: "Caveat Brush";
    src: url("/assets/fonts/CaveatBrush-Regular.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

:root {
    color-scheme: light;
    --site-paper: #f2eedf;
    --site-paper-light: #faf7eb;
    --site-ink: #202318;
    --site-action: #1f815d;
    --site-action-hover: #176b4d;
    --site-hand: "Caveat Brush", "Segoe Print", "Bradley Hand", cursive;
    --site-sans: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
    color: var(--site-ink);
    background:
        radial-gradient(circle at 20% 10%, rgb(255 255 255 / 50%), transparent 28rem),
        var(--site-paper);
    font-family: var(--site-sans);
    font-size: var(--text-regular);
    line-height: var(--leading-normal);
}
body::before {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: .07;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
body > main { flex: 1 0 auto; }

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 100;
    padding: .65rem 1rem;
    color: white;
    background: var(--site-ink);
    transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.site-header {
    position: relative;
    z-index: 10;
    display: flex;
    min-height: 6rem;
    align-items: center;
    gap: 2rem;
    padding: .6rem clamp(1.25rem, 5vw, 5.5rem);
    background: rgb(242 238 223 / 94%);
    border-bottom: 1px solid rgb(68 74 43 / 10%);
}
.site-brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--site-ink);
    text-decoration: none;
}
.site-brand img {
    display: block;
    width: clamp(13rem, 19vw, 17rem);
    height: auto;
    object-fit: contain;
}
.menu-panel {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1rem, 2.5vw, 3rem);
}
.menu-panel nav > .nav-items {
    display: flex;
    align-items: center;
    gap: clamp(.8rem, 1.65vw, 1.8rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-panel nav a {
    position: relative;
    font-size: clamp(1.125rem, 1.3vw, 1.35rem);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.menu-panel nav a::after {
    position: absolute;
    right: 50%;
    bottom: -.5rem;
    left: 50%;
    height: 3px;
    background: var(--site-action);
    content: "";
    transition: right .25s ease, left .25s ease;
}
.menu-panel nav a:hover,
.menu-panel nav a:focus-visible { color: var(--site-action); }
.menu-panel nav a:hover::after,
.menu-panel nav a:focus-visible::after,
.menu-panel nav a[aria-current="page"]::after,
.menu-panel .is-current-section > .nav-heading > a::after {
    right: 0;
    left: 0;
}
.site-action,
.primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    padding: .75rem 1.4rem;
    color: #fffdf4;
    background: var(--site-action);
    border-radius: .45rem;
    font-size: var(--text-7);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s ease;
}
.site-action:hover,
.primary-action:hover { background: var(--site-action-hover); }
.menu-button { display: none; }

.nav-item { position: relative; }
.nav-heading { display: flex; align-items: center; gap: .15rem; }
.nav-toggle { display: none; }
.menu-ready .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--site-ink);
    font: inherit;
    cursor: pointer;
}
.nav-toggle:hover, .nav-toggle:focus-visible { color: var(--site-action); }
.nav-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.menu-panel .nav-submenu {
    display: grid;
    gap: .3rem;
    margin: .75rem 0 0;
    padding: .75rem;
    list-style: none;
    background: var(--site-paper-light);
    border: 1px solid rgb(68 74 43 / 15%);
    border-radius: .4rem;
}
.menu-panel .nav-submenu a {
    display: block;
    padding: .45rem .5rem;
    font-size: var(--text-7);
    white-space: normal;
}
.menu-panel .nav-submenu a::after { content: none; }
.menu-panel .nav-submenu a:hover,
.menu-panel .nav-submenu a[aria-current="page"] { background: rgb(31 129 93 / 8%); }
.menu-ready .nav-submenu { display: none; }
.menu-ready .nav-item:has(.nav-toggle[aria-expanded="true"]) > .nav-submenu { display: grid; }
@media (min-width: 1051px) {
    .menu-ready .nav-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 18rem;
        max-width: 90vw;
        margin-top: .35rem;
        box-shadow: 0 .7rem 1.5rem rgb(25 28 16 / 12%);
    }
    .site-header:not(.menu-ready) { flex-wrap: wrap; }
    .site-header:not(.menu-ready) .menu-panel { flex-basis: 100%; }
    .site-header:not(.menu-ready) .nav-items { align-items: start; flex-wrap: wrap; }
}
.site-home { padding: 0; padding-block-start: 0; }
.site-search { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.site-search svg { flex-shrink: 0; }
.site-page { padding-block: clamp(3rem, 7vw, 6rem); }
/* Section pages: title and body on the right, an aside on the left. The
   aside follows the body in source order, so mobile simply stacks it. */
.section-page { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.2fr); grid-template-rows: auto auto 1fr; column-gap: clamp(2rem, 4vw, 4rem); }
.section-header, .page-contents-mobile, .section-body { grid-column: 2; min-width: 0; }
.section-header { grid-row: 1; }
.page-contents-mobile { grid-row: 2; display: none; }
.section-body { grid-row: 3; overflow-wrap: anywhere; }
.section-body h2, .section-body h3 { scroll-margin-top: 1rem; }
.section-body img { max-width: 100%; height: auto; }
.section-aside { grid-column: 1; grid-row: 1 / span 3; align-self: start; min-width: 0; display: grid; gap: 2rem; overflow-wrap: anywhere; }
.section-aside h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.section-aside ul { list-style: none; margin: 0; padding: 0; }
.section-aside nav a, .page-contents-mobile a { display: block; padding: .5rem 0; font-size: var(--text-7); line-height: 1.5; }
.page-breadcrumb { margin-bottom: .75rem; color: #505447; font-size: var(--text-7); }
.page-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35rem .65rem; list-style: none; padding: 0; margin: 0; }
.page-breadcrumb li { margin: 0; }
.page-breadcrumb + .section-title { margin-top: 0; }
.breadcrumb-back { display: none; }
.section-title { margin-top: 0; font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.page-subtitle, .page-introduction { color: #505447; }
.page-introduction { margin: 0; }
.membership-availability { margin-bottom: 2rem; }
.content-pending { padding: 1rem; background: rgb(255 255 255 / 35%); border-left: 3px solid #8e967a; }
.education-diagram { max-width: 32rem; margin-inline: 0; }
.education-diagram figcaption { font-size: var(--text-7); }
.newsletter-edition table { width: 100%; table-layout: fixed; }
.newsletter-edition td { overflow-wrap: anywhere; }
.page-sidebar-extra h2 { font-size: 1.25rem; }
.page-sidebar-extra p { font-size: var(--text-7); }
.page-sidebar-extra input { min-width: 0; width: 100%; }
.page-sidebar-extra button { white-space: normal; }
.newsletter-list { list-style: none; padding: 0; display: grid; gap: 2rem; }
.newsletter-list article { height: 100%; border-top: 2px solid rgb(31 129 93 / 35%); padding-top: 1rem; }
.newsletter-list h2 { font-size: 1.5rem; margin-block: .5rem; }
.newsletter-list time { font-size: var(--text-7); }
@media (max-width: 800px) {
    .section-page { display: flex; flex-direction: column; gap: 1.5rem; }
    .breadcrumb-back { display: inline; }
    .breadcrumb-current { display: none; }
    .page-contents-mobile { display: block; padding: 1rem .5rem; border: 1px solid rgb(80 84 71 / 25%); border-radius: .4rem; background: rgb(255 255 255 / 25%); }
    .page-contents-mobile summary { cursor: pointer; font-weight: 600; }
    .page-contents-mobile nav { padding-top: .75rem; }
    .page-contents-mobile ul { list-style: none; margin: 0; padding: 0; }
    .section-aside > .page-featured-image, .section-aside > .page-introduction, .section-aside > .page-contents { display: none; }
    .section-aside .page-related ul, .section-aside .section-navigation ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .section-aside .page-related a, .section-aside .section-navigation a { height: 100%; padding: .9rem; border: 1px solid rgb(80 84 71 / 25%); border-radius: .4rem; background: rgb(255 255 255 / 25%); }
}
@media (max-width: 420px) {
    .section-aside .page-related ul, .section-aside .section-navigation ul { grid-template-columns: 1fr; }
}

.site-footer {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem clamp(1.25rem, 7vw, 8rem);
    color: #dfe3c7;
    background: #27301d;
}
.site-footer p { margin: 0 auto 0 0; font-size: var(--text-7); }
.footer-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.footer-links a { font-weight: 400; white-space: nowrap; }
.page-featured-image { margin: 0; }
.page-featured-image img { display: block; width: 100%; height: auto; }
.footer-brand { color: white; }
.footer-brand img {
    width: 11rem;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: .9;
}

:focus-visible { outline: 3px solid #e0a638; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 1050px) {
    .menu-panel nav, .menu-panel nav > .nav-items { width: 100%; }
    .nav-heading { justify-content: space-between; }
    .menu-panel .nav-submenu { width: 100%; }
    .site-header { flex-wrap: wrap; }
    .menu-panel { display: grid; flex-basis: 100%; justify-content: start; }
    .site-header.menu-ready { flex-wrap: nowrap; }
    .menu-ready .menu-button {
        display: inline-flex;
        margin-left: auto;
        align-items: center;
        gap: .65rem;
        padding: .7rem;
        color: var(--site-ink);
        background: transparent;
        border: 0;
        font: 700 1.125rem var(--site-sans);
    }
    .menu-icon { display: grid; gap: .35rem; width: 1.5rem; }
    .menu-icon i { height: 2px; background: currentColor; transition: transform .25s ease; }
    .menu-button[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(4px) rotate(45deg); }
    .menu-button[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
    .menu-ready .menu-panel {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
        justify-content: stretch;
        justify-items: start;
        gap: 2rem;
        padding: 1.5rem clamp(1.25rem, 5vw, 4rem) 2rem;
        background: var(--site-paper-light);
        box-shadow: 0 1.2rem 2rem rgb(25 28 16 / 18%);
        transform: translateY(-.5rem);
        visibility: hidden;
        opacity: 0;
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .menu-ready .menu-panel.is-open { visibility: visible; opacity: 1; transform: none; }
    .menu-panel nav > .nav-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 2rem; }
    .menu-panel nav a { font-size: 1.25rem; }
    .site-action { min-height: 2.7rem; }
}

@media (max-width: 720px) {
    .site-header { min-height: 5.1rem; padding-block: .7rem; }
    .site-brand img { width: 11.5rem; }
    .menu-button-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .menu-panel nav > .nav-items { grid-template-columns: 1fr; }
    .site-footer { display: grid; gap: 1.25rem; justify-items: center; text-align: center; }
    .site-footer .footer-links { justify-content: center; }
    .site-footer p { margin: 0; }
}

/* People listed on public pages from their profiles: council, affiliated
   teachers and hui speakers. */
.people-section { margin-top: 3rem; }
.people-grid { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 2rem; }
.person-card { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 0; }
.person-photo { display: block; width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; }
.person-initials { display: grid; place-items: center; color: #fff; background: var(--site-action); font-size: 2rem; font-weight: 600; }
.person-text h3 { margin: 0 0 .25rem; font-size: 1.3rem; }
.person-meta { margin: 0 0 .5rem; color: #505447; font-size: var(--text-7); }
.person-bio { white-space: pre-line; margin: 0 0 .5rem; }
.person-link { margin: 0; font-size: var(--text-7); overflow-wrap: anywhere; }
.person-sessions { margin: .5rem 0 0; padding-inline-start: 1.25rem; font-size: var(--text-7); }
.hui-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.25rem; margin: 0 0 1.5rem; }
.hui-facts dt { font-weight: 700; }
.hui-facts dd { margin: 0; }
.programme-list { list-style: none; padding: 0; display: grid; gap: 1.75rem; }
.programme-list li { margin: 0; padding-top: 1rem; border-top: 2px solid rgb(31 129 93 / 25%); }
.programme-list h3 { margin: .25rem 0; font-size: 1.25rem; }
.programme-kind { color: #505447; font-size: var(--text-7); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 520px) {
    .person-card { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
    .person-photo { width: 5rem; height: 5rem; }
    .person-initials { font-size: 1.4rem; }
}
.people-section-untitled { margin-top: 1rem; }

/* Plain form buttons (signup, login, contact, newsletter) match the green actions. */
.site-page button[type="submit"]:not(.menu-button):not(.nav-toggle) { font-weight: 700; }
.site-page button[type="submit"]:not(.menu-button):not(.nav-toggle):hover { background: var(--site-action-hover); }