/* Written mobile-first: the rules below describe the phone layout, and the one
   @media block at the bottom widens things out from 700px up.

   Contrast discipline on the dark background: --accent (pink) only colors
   large text (24px+) on --bg / --bg-band; body-size pink text always uses the
   lighter --accent-soft; --crimson never appears as text on the background,
   only as a thin decorative rule. */

:root {
    /* color */
    --bg:            #1e353d;   /* page background */
    --bg-band:       #172830;   /* darker full-bleed header + footer bands */
    --surface:       #27434d;   /* cards, pill buttons */
    --surface-2:     #2e4d59;   /* hover elevation */
    --border:        #3c5a66;   /* hairlines */
    --text:          #e8eef2;
    --muted:         #9fb4bc;
    --accent:        #e16792;
    --accent-soft:   #ec8fad;
    --crimson:       #c92a2a;

    /* type */
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* shape */
    --radius: 12px;

    /* space */
    --title-gap: 1rem;   /* under every page title, on every page */
}

* {
    box-sizing: border-box;
}

/* Stop iOS inflating text in portrait->landscape */
html {
    -webkit-text-size-adjust: 100%;
}

/* Flex column so the footer sits at the viewport bottom even on short pages */
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Centered content column. The header/footer bands run full width, so only
   their inner wrappers and <main> line up on the column — and the padding is
   what keeps text off the screen edge on a phone. width: 100% is load-bearing:
   the auto inline margins would otherwise stop the flex container stretching
   these to full width. */
.site-header-inner,
main,
.footer-inner {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Pushes the footer down; header and footer keep their natural height */
main {
    flex: 1 0 auto;
}

/* Nothing should ever be able to push the page wider than the screen */
img {
    max-width: 100%;
}

a {
    color: var(--accent-soft);
}

::selection {
    background: var(--accent);
    color: #14232a;
}

:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 3px;
}

/* ---------- Typography ---------- */
h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.2;
}

h1 {
    margin-block: 0.6em var(--title-gap);
    font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--accent);
}

/* The page title owns the space beneath it, and --title-gap is the whole of
   it. Whatever a page opens with — prose, a section heading, an embed, the
   posts the scripts render — starts flush against that gap instead of
   collapsing a margin of its own into it. Without this the opening gap is
   whichever margin wins the collapse, so it drifts with the font size of the
   first thing on the page: it was 17px on the hero pages, 20px on past events
   and 48px on contacts, where a .section-title led. The descendant half of the
   selector reaches a heading wrapped in a <section> or built by a script,
   which is why this is not written against each page's markup. */
h1 + *,
h1 + * :first-child {
    margin-block-start: 0;
}

/* Short crimson rule under the page title: its one flourish */
h1::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--crimson);
}

h2 {
    font-weight: 600;
}

/* Pink section heading: 1.5rem = 24px, the floor where pink-on-bg passes
   large-text contrast */
.section-title {
    margin: 48px 0 20px;
    font-size: 1.5rem;
    color: var(--accent);
}

/* ---------- Header band + navigation ---------- */
.site-header {
    background: var(--bg-band);
    border-bottom: 1px solid var(--border);
}

.site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 24px;
    padding-block: 10px;
}

.brand {
    padding-block: 8px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

.brand:hover {
    color: var(--accent-soft);
}

/* The menu drops onto its own full-width row under the brand on phones */
nav {
    flex: 1 1 100%;
}

/* A <details> disclosure: collapsed behind a ☰ button on phones, opened out
   into a plain row on desktop (see the media query). scripts/nav.js keeps the
   open state in sync with the same 700px breakpoint. */
.nav-toggle > summary {
    display: block;
    min-height: 44px;      /* comfortable tap target */
    padding: 12px 0;
    cursor: pointer;
    list-style: none;      /* hide the default disclosure triangle */
    font-weight: 500;
}

.nav-toggle > summary::-webkit-details-marker {
    display: none;
}

.nav-toggle > summary::before {
    content: "\2630\00a0";
}

/* Stacked full-width rows while the menu is open on a phone */
.navigation-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.navigation-bar li + li {
    border-top: 1px solid var(--border);
}

.navigation-bar a {
    display: block;
    min-height: 44px;
    padding: 12px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}

.navigation-bar a:hover {
    color: var(--text);
}

/* Pink underline marks the page you're on. Longhands on purpose: old Safari
   ignores the whole shorthand when it carries color/thickness. */
.navigation-bar a[aria-current="page"] {
    color: var(--text);
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* ---------- Hero ---------- */
/* No top padding: the h1's own margin sets the gap under the header band, the
   same as on the pages whose <h1> sits straight in <main>. */
.hero {
    padding-block: 0 8px;
}

.hero p {
    max-width: 65ch;
    font-size: 1.0625rem;
}

.hero strong {
    color: var(--accent-soft);
    font-weight: 600;
}

/* ---------- Inclusion statement ---------- */
/* Body prose sharing the hero's measure and size, so wherever it lands it
   keeps the same left-to-right rhythm as the page's other paragraphs rather
   than reading as a caption. The pink .section-title above it is all the
   separation it needs. */
.welcome p {
    max-width: 65ch;
    font-size: 1.0625rem;
}

/* ---------- Card grid ---------- */
/* As many columns as fit, auto-stacks to one column on phones. The min() keeps
   a 220px column from overflowing a container narrower than 220px. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 20px;
}

.card {
    padding: 22px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Link cards (home page): the whole card is the anchor */
a.card {
    display: block;
    color: var(--text);
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease,
                border-color 0.18s ease;
}

/* Pink lacks contrast on --surface, so card headings stay light */
a.card h2 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}

a.card p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted);
}

a.card:hover,
a.card:focus-visible {
    transform: translateY(-3px);
    background: var(--surface-2);
    border-color: var(--accent);
}

/* ---------- Next event highlight ---------- */
/* A .card that isn't a link, so the accent border it borrows from a.card:hover
   can't be mistaken for a hover state. That border is the whole trick: it lifts
   the card out of the grid below without changing its surface colour.
   Hidden until scripts/next-event.js finds an event to put in it. */
.next-event {
    margin-bottom: 20px;
    border-color: var(--accent);
}

.next-event .eyebrow {
    margin-bottom: 6px;
}

/* Light, not pink: 1.25rem is under the 24px pink floor, and pink lacks
   contrast on --surface anyway — the same reason a.card h2 stays light */
.next-event h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
}

/* Reset the <p>'s default top margin; .post-date sets the 12px below it */
.next-event-meta {
    margin-top: 0;
}

.next-event-desc {
    margin: 0;
    max-width: 65ch;
}

/* Belt and braces: nothing sets `display` on the card, so [hidden] already
   works, but this keeps it working if a layout rule ever lands on it */
[hidden] {
    display: none;
}

/* ---------- Call-to-action button ---------- */
/* The .social-links pill, filled in so it reads as the page's one primary
   action. Dark text on pink inverts the usual pairing and is the only place
   --accent carries body-size text: it measures 5.0:1, clearing AA, and it's
   the pairing ::selection already uses. Padding puts it ~49px tall, over the
   44px tap target the nav and carousel buttons keep. */
/* Sits closer to the card above than to the grid below, so the highlight and
   its call to action read as one block */
.cta-row {
    margin: 0 0 36px;
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: #14232a;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}

/* Team cards (about page) */
.team-grid .card {
    padding: 28px 16px 22px;
    text-align: center;
}

/* Team avatars: fixed square size, cropped to fit without distortion */
.card img {
    width: 120px;
    height: 120px;
    max-width: 100%;
    object-fit: cover;
}

.team-grid .card img {
    border-radius: 50%;
    border: 2px solid var(--border);
}

.team-grid h3 {
    margin: 14px 0 2px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Small uppercase label: a team member's role, or the "Next event" kicker */
.member-role,
.eyebrow {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Calendar embed ---------- */
/* The Google iframes are cross-origin and always render white, so give them a
   deliberate white card frame instead of fighting it. */
.calendar-frame {
    max-width: 820px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Google's month grid has its own ~600px internal minimum and just clips below
   that, so phones get the agenda view (a scrollable list) instead. Only one of
   the two iframes is ever visible. */
.calendar {
    display: block;
    width: 100%;
    max-width: 800px;
    border-radius: 8px;
}

.calendar-agenda {
    min-height: 60vh;
}

.calendar-month {
    display: none;
}

/* ---------- Blog-style posts (past events) ---------- */
/* These class names are generated by scripts/past-events.js — keep in sync */
.post {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border);
}

.post:last-child {
    border-bottom: 0;
}

/* 1.5rem = 24px: the pink large-text floor again */
.post h2 {
    margin-bottom: 4px;
    font-size: 1.5rem;
    color: var(--accent);
}

/* The muted line under a heading: a post's date above its photos, or the
   date · time · room of the next event. Both are inline content by default,
   so the block display is what gives them a line of their own. */
.post-date,
.next-event-meta {
    display: block;
    margin-bottom: 12px;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.post p {
    max-width: 68ch;
}

/* Carousel: shows one image at a time; swipe or use the arrow buttons */
/* The band colour is what shows beside a photo that doesn't fill the frame,
   so the frame reads as a deliberate mat rather than a gap in the page. */
.carousel {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;   /* rounds the photos; the ±8px buttons stay inside */
    background: var(--bg-band);
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;   /* lock scrolling to one image at a time */
    scroll-behavior: smooth;
}

/* Every slide gets the same frame so the carousel keeps one height as you
   scroll, but `contain` fits each photo inside it whole — the event photos are
   a mix of 4:3 and 3:4, and `cover` cut 58% off the portrait ones. The ratio is
   driven by the frame's width rather than a fixed px/vh height: a fixed height
   letterboxes landscape shots on a phone, and vh resizes the frame when mobile
   browser chrome slides away. Square on phones, where a wide frame would leave
   a portrait shot barely half the screen; 3:2 from 700px up. */
.carousel-track img {
    flex: 0 0 100%;                  /* each image fills the carousel width */
    scroll-snap-align: start;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Prev/next arrows overlaid on the sides. They sit on top of an arbitrary
   photo, so they need a background of their own to stay legible. */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(23, 40, 48, 0.8);
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.carousel-btn:hover {
    background: var(--bg-band);
}

.carousel-btn.prev { left: 8px; }
.carousel-btn.next { right: 8px; }

/* ---------- Connect: social + mailing list links ---------- */
/* Row of pill buttons that wraps on narrow screens */
.social-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.social-links a {
    display: inline-block;
    padding: 12px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.social-links a:hover {
    background: var(--surface-2);
    border-color: var(--accent-soft);
}

/* ---------- Footer ---------- */
.site-footer {
    margin-top: 56px;
    background: var(--bg-band);
    border-top: 1px solid var(--border);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-block: 22px 26px;
    font-size: 0.85rem;
}

.footer-copy {
    margin: 0;
    color: var(--muted);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.footer-links a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-links a:hover {
    color: var(--accent-soft);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }

    .carousel-track {
        scroll-behavior: auto;
    }
}

/* ---------- Desktop ---------- */
@media (min-width: 700px) {
    .site-header-inner {
        padding-block: 16px;
    }

    /* The menu joins the brand on one row */
    nav {
        flex: 0 1 auto;
    }

    /* Drop the hamburger and lay the links back out as a horizontal row */
    .nav-toggle > summary {
        display: none;
    }

    .navigation-bar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 26px;
    }

    .navigation-bar li + li {
        border-top: 0;
    }

    .navigation-bar a {
        min-height: 0;
        padding: 0;
    }

    /* Wide enough for a landscape photo to nearly fill a 3:2 frame */
    .carousel-track img {
        aspect-ratio: 3 / 2;
    }

    /* Enough room for the month grid, so swap the agenda list out for it */
    .calendar-agenda {
        display: none;
    }

    .calendar-month {
        display: block;
        aspect-ratio: 4 / 3;
        height: auto;
    }
}