/* =========================================================
   Friends of The Colony Public Library
   ---------------------------------------------------------
   What's in this file, in order (use Ctrl+F to jump to a section):
     Fonts, Design tokens (colors and sizes), Base styles, Buttons,
     Draft notice, Info bar, Header, Navigation, Back to top,
     Library hours, Bands (full-width sections), Home, Photos,
     Join band, Inner page header, About page, Membership levels,
     Join, Videos, Contact, 404 page, Footer, Extra touches
     (waves, open-now notes, spotlight, copy buttons, tabs,
     comparison tables, FAQ, video previews, newsletter drawing,
     timeline), then the layouts for medium screens, tablets and
     phones, printing, and reduced motion.
   ========================================================= */

/* ===== Fonts (stored in the fonts folder) =====
   font-display: swap shows text right away in a backup font,
   then switches once the real font has loaded. */
@font-face {
    font-family: "Public Sans";
    src: url("fonts/public-sans-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Public Sans";
    src: url("fonts/public-sans-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Literata";
    src: url("fonts/literata-latin-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ===== Design tokens =====
   Colors are sampled from the logo. Defined once here, then reused
   everywhere with var(--name). Change one and the whole site updates. */
:root {
    --blue: #135897;
    --blue-dark: #0d3d69;
    --blue-deep: #0a2f52;
    --red: #b32b39;
    --red-dark: #921f2c;
    --green: #79a048;
    --ink: #1f2933;
    --ink-soft: #4a5866;
    --tint: #eef3f8;
    --line: rgba(19, 88, 151, 0.14);
    --white: #ffffff;

    --font-heading: "Literata", Georgia, serif;
    --font-body: "Public Sans", Arial, sans-serif;

    --page-width: 1160px;
    --text-width: 760px;
    --radius: 12px;
}

/* ===== Base styles ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 100px;   /* so the sticky header doesn't cover headings you jump to */
    scroll-behavior: smooth;     /* in-page links glide instead of jumping */
}

/* Highlighted text uses a soft version of the logo green */
::selection {
    background-color: rgba(121, 160, 72, 0.3);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--white);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--blue);
    text-underline-offset: 3px;
    text-decoration-color: rgba(19, 88, 151, 0.4);   /* a softer underline */
}

a:hover {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

/* Headings: a bookish serif, with sizes that grow on bigger screens.
   clamp(smallest, preferred, largest) */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--blue-dark);
    text-wrap: balance;   /* evens out line lengths in headings */
}

h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.4rem);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

h2 {
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    margin: 0 0 16px;
}

h3 {
    font-size: 1.2rem;
    margin: 0 0 8px;
}

p {
    margin: 0 0 16px;
}

/* Avoids a single word stranded on the last line of a paragraph */
p,
li,
dd,
figcaption {
    text-wrap: pretty;
}

/* Anything marked "hidden" stays hidden, even if a style below says otherwise */
[hidden] {
    display: none !important;
}

.lead {
    font-size: 1.25rem;
    color: var(--ink-soft);
}

/* A clear outline for anyone using the keyboard */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

/* Hidden until a keyboard user presses Tab */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 100;
    padding: 8px 16px;
    background-color: var(--white);
    font-weight: 700;
}

.skip-link:focus {
    top: 16px;
}

/* Hidden on screen, but read aloud by screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ===== Buttons ===== */
.button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    color: var(--white);
    background-color: var(--red);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.button:hover {
    background-color: var(--red-dark);
    transform: translateY(-1px);
}

/* A tiny press-down when clicked or tapped */
.button:active {
    transform: translateY(0) scale(0.98);
}

/* Outlined button for less important actions */
.button-secondary {
    color: var(--blue-dark);
    background-color: transparent;
    box-shadow: inset 0 0 0 2px var(--blue);
}

.button-secondary:hover {
    background-color: rgba(19, 88, 151, 0.08);
}

/* White button for dark backgrounds */
.button-light {
    color: var(--blue-dark);
    background-color: var(--white);
}

.button-light:hover {
    background-color: var(--tint);
}

/* An icon inside a button (like the lock on payment buttons) */
.button .icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -2px;
}

.secure-note {
    margin: 10px 0 0;
    font-size: 0.9rem;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Line-drawn icons */
.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;   /* takes the color of the text around it */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* An icon in a soft colored circle. Colors cycle with the logo's three. */
.icon-badge {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    color: var(--blue);
    background-color: rgba(19, 88, 151, 0.1);
}

.icon-badge .icon {
    width: 24px;
    height: 24px;
}

:nth-child(3n + 1) > .icon-badge {
    color: #5c8133;   /* a darker green, so the line stays easy to see */
    background-color: rgba(121, 160, 72, 0.15);
}

:nth-child(3n + 3) > .icon-badge {
    color: var(--red);
    background-color: rgba(179, 43, 57, 0.1);
}

/* ===== Draft notice ===== */
.draft-banner {
    background-color: #fff3cd;
    color: #5c4400;
    text-align: center;
    font-size: 0.9rem;
    padding: 8px 24px;
}

.draft-banner p {
    margin: 0;
}

.draft-banner a {
    color: inherit;
    font-weight: 700;
}

/* ===== Info bar ===== */
.topbar {
    background-color: var(--blue-deep);
    color: var(--white);
    font-size: 0.9rem;
}

.topbar-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.topbar-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: var(--white);
    text-decoration: none;
}

.topbar-link:hover {
    text-decoration: underline;
}

/* Icon-only links get a comfortable tap area */
.topbar-social a[aria-label] {
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.topbar-social a[aria-label]:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.topbar-social {
    gap: 8px;
}

.topbar :focus-visible {
    outline-color: var(--white);
}

/* ===== Header ===== */
.site-header {
    position: sticky;   /* stays at the top while you scroll */
    top: 0;
    z-index: 10;
    background-color: var(--white);
    box-shadow: 0 1px 0 var(--line);
    transition: box-shadow 0.2s ease;
}

/* Added by script.js once you scroll down */
.site-header.is-scrolled {
    box-shadow: 0 6px 20px rgba(13, 61, 105, 0.12);
}

/* The three-color stripe, one color for each figure in the logo */
.site-header::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(
        to right,
        var(--green) 0 33.33%,
        var(--blue) 33.33% 66.66%,
        var(--red) 66.66% 100%
    );
}

.header-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.brand img {
    height: 60px;
    width: auto;
}

/* ===== Navigation ===== */
.main-nav {
    display: flex;
    align-items: center;
    gap: 8px 28px;
}

.main-nav a {
    position: relative;
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    padding: 6px 0;
}

/* An underline that grows out from the middle on hover,
   and stays under the page you're on */
.main-nav a:not(.button)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background-color: var(--blue);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* "a.button" is more specific than ".main-nav a",
   so the button keeps its own look inside the menu. */
.main-nav a.button {
    color: var(--white);
    padding: 10px 22px;
    border-bottom: none;
}

.main-nav a.button[aria-current="page"] {
    background-color: var(--red-dark);
}

/* The "Menu" button and the small "Join" button are hidden on big screens */
.menu-toggle,
.header-join {
    display: none;
}

/* ===== Back to top ===== */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--white);
    background-color: var(--blue-dark);
    box-shadow: 0 6px 18px rgba(13, 61, 105, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--blue);
}

.back-to-top .icon {
    width: 22px;
    height: 22px;
}

/* A two-tone focus ring, so it shows over light and dark parts of the page */
.site-footer .back-to-top:focus-visible {
    outline: 3px solid var(--blue-dark);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--white), 0 6px 18px rgba(13, 61, 105, 0.3);
}

/* ===== Library hours ===== */
.hours {
    margin: 20px 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.hours h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
}

.hours h3 .icon {
    color: var(--blue);
}

.hours dl {
    display: grid;
    gap: 2px;
    margin: 0 0 12px;
}

/* One row per group of days. Today's row is highlighted by script.js. */
.hours-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 16px;
    margin: 0 -12px;
    padding: 8px 12px;
    border-radius: 8px;
}

.hours-row dd {
    text-align: right;
}

.hours dt {
    font-weight: 700;
}

.hours dd {
    margin: 0;
}

.hours-row.today {
    background-color: var(--white);
    box-shadow: inset 4px 0 0 var(--green);
}

.today-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: #4f7329;
    color: var(--white);
    font-size: 0.75rem;
    line-height: 1.5;
    vertical-align: 2px;
}

.hours .open-status {
    margin-bottom: 12px;
}

.hours-note {
    font-size: 0.9rem;
}

/* ===== Bands: full-width sections =====
   Each section stretches edge to edge. ".wrap" keeps the
   content inside at a comfortable width. */
.band {
    padding: clamp(52px, 7vw, 84px) 24px;
}

.band-tint {
    background-color: var(--tint);
}

.band-dark {
    background-color: var(--blue-dark);
    color: rgba(255, 255, 255, 0.88);
}

.band-dark h2,
.band-dark h3 {
    color: var(--white);
}

/* A white focus outline shows up better on dark blue */
.band-dark :focus-visible {
    outline-color: var(--white);
}

/* Lighter underlines for links on dark blue */
.band-dark a:not(.button),
.current-card a:not(.button),
.governance-card a:not(.button),
.site-footer a {
    text-decoration-color: rgba(255, 255, 255, 0.45);
}

.band-dark a:not(.button):hover,
.current-card a:not(.button):hover,
.site-footer a:hover {
    text-decoration-color: currentColor;
}

.wrap {
    max-width: var(--page-width);
    margin: 0 auto;
}

.wrap.narrow {
    max-width: var(--text-width);
}

/* Heading + short intro above a group of items */
.section-head {
    max-width: var(--text-width);
    margin-bottom: 40px;
}

.section-head p {
    font-size: 1.15rem;
    color: var(--ink-soft);
}

.more-link {
    margin: 40px 0 0;
    font-weight: 700;
}

/* Links inside sentences get a taller tap area too, without changing
   the spacing between lines */
.draft-banner a,
.sources a,
.faq-intro a,
.faq-answer a,
.hours-note a,
.library-note a,
.prose a,
.visit-link span a {
    padding-block: 4px;
}

/* Standalone links get at least a 24px-tall tap area (WCAG 2.2) */
.more-link a,
.visit-card p > a,
.help-item > a,
.tier-link,
.feature-more {
    display: inline-block;
    padding: 4px 0;
}

/* Two columns side by side */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}

/* A white box that sits on a tinted band */
.panel {
    padding: 28px 32px;
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(13, 61, 105, 0.06), 0 8px 24px rgba(13, 61, 105, 0.06);
}

/* ===== Home: hero ===== */
.hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(48px, 7vw, 88px);
    padding-bottom: clamp(48px, 7vw, 88px);
    /* Soft glows in the logo colors give the opener a little depth */
    background-image:
        radial-gradient(circle at 82% 30%, rgba(255, 255, 255, 0.9), transparent 38%),
        radial-gradient(circle at 95% 95%, rgba(121, 160, 72, 0.12), transparent 30%),
        radial-gradient(circle at 5% 10%, rgba(19, 88, 151, 0.07), transparent 35%);
}

.hero h1 {
    letter-spacing: -0.02em;
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.hero-note .icon {
    width: 16px;
    height: 16px;
    color: var(--red);
    fill: rgba(179, 43, 57, 0.15);
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
}

.hero .lead {
    max-width: 34em;
    margin-bottom: 32px;
}

/* ===== Home: the Friends logo, brought to life =====
   Like the logo: three friends (green, blue, red) above an open book.
   The friends are real photos; the book is our smiling book. */
.hero-friends {
    position: relative;
    justify-self: center;
    width: min(100%, 560px);
    aspect-ratio: 1 / 0.76;
}

.friend {
    position: absolute;
    background-color: var(--tint);   /* shows while the photo loads */
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--white);
    box-shadow: 0 0 0 6px var(--ring), 0 16px 34px rgba(13, 61, 105, 0.2);
    animation: pop-in 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
}

.friend-center {
    --ring: var(--blue);
    z-index: 1;   /* the center friend sits in front, like the logo */
    width: 46%;
    left: 27%;
    top: 3%;
    object-position: 62% 45%;
    animation-delay: 0.05s;
}

.friend-left {
    --ring: var(--green);
    width: 36%;
    left: 1%;
    top: 17%;
    object-position: 60% 35%;
    animation-delay: 0.2s;
}

.friend-right {
    --ring: var(--red);
    width: 36%;
    right: 1%;
    top: 17%;
    object-position: 60% 8%;
    animation-delay: 0.35s;
}

/* The book sits below the friends at about the size it is in the logo */
.hero-booker {
    position: absolute;
    z-index: 2;
    left: 26%;
    bottom: 0;
    width: 48%;
    animation: rise-in 0.7s ease-out 0.45s both;
}

.booker {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 10px 18px rgba(13, 61, 105, 0.12));
}

/* The book waves twice when the page loads, and again when you hover */
.booker-wave {
    transform-box: fill-box;
    transform-origin: 0% 100%;   /* the shoulder */
    animation: wave 1.1s ease-in-out 1.1s 2;
}

.hero-friends:hover .booker-wave {
    animation: wave-again 1.1s ease-in-out;
}

@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Two copies of the same wave, so hovering can start it over */
@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-18deg); }
    50% { transform: rotate(8deg); }
    75% { transform: rotate(-12deg); }
}

@keyframes wave-again {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-18deg); }
    50% { transform: rotate(8deg); }
    75% { transform: rotate(-12deg); }
}


/* ===== Happening now strip ===== */
.events-strip {
    padding: 20px 24px;
    background-color: var(--white);
    border-bottom: 1px solid var(--line);
}

.events-strip-inner {
    display: flex;
    align-items: center;
    gap: 16px 20px;
    flex-wrap: wrap;
}

.events-strip .icon-badge {
    margin: 0;
    width: 44px;
    height: 44px;
}


/* Facebook / Instagram links under the newsletter */
.follow {
    margin: 28px 0 0;
    color: var(--ink-soft);
}

.follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.follow a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-weight: 700;
}

/* ===== Community partners ===== */
.partners {
    padding-top: 48px;
    padding-bottom: 56px;
    text-align: center;
}

.partners-title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

.partner-logos {
    justify-content: center;
}

.partner-logos li {
    width: 180px;
    height: 100px;
}

.partner-logos a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.partner-logos img {
    max-height: 70px;
    max-width: 100%;
}

/* ===== Plain text pages (Privacy) ===== */
.prose h2 {
    font-size: 1.5rem;
    margin-top: 40px;
}

.prose li {
    margin-bottom: 10px;
}

.note {
    padding: 12px 16px;
    border-radius: 8px;
    background-color: #fff3cd;
    color: #5c4400;
    font-weight: 700;
}

/* ===== What we do ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 32px;
}

.feature-item {
    display: block;
    margin: -16px;
    padding: 16px;
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

a.feature-item:hover {
    background-color: var(--tint);
}

.feature-item p {
    margin: 0;
    color: var(--ink-soft);
}

.feature-more {
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;
    color: var(--blue);
}

a.feature-item:hover .feature-more {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== More ways to help ===== */
.help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.help-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.help-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(13, 61, 105, 0.08);
}

.help-item p {
    color: var(--ink-soft);
}

.help-item a {
    font-weight: 700;
}

.band-tint .help-item {
    background-color: var(--white);
}

/* ===== Photos ===== */
.photo {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--tint);
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* fills the box without stretching */
    transition: transform 0.4s ease;
}

.photo:hover img {
    transform: scale(1.04);
}

.photo {
    position: relative;
}

/* Caption slides up over the bottom of a photo on hover */
.photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 16px 12px;
    background: linear-gradient(to bottom, transparent, rgba(10, 47, 82, 0.8));
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.photo:hover .photo-caption,
.photo:focus-visible .photo-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Touchscreens can't hover, so photo captions show all the time there
   (kept to two lines so they don't cover the photo) */
@media (hover: none) {
    .photo-caption {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        padding: 28px 12px 0;
        border-bottom: 10px solid transparent;   /* spacing that also hides a cut-off third line */
        background-origin: border-box;           /* the shading reaches all the way to the bottom */
        font-size: 0.85rem;
        opacity: 1;
        transform: none;
    }
}

/* Home: one large photo with four smaller ones beside it */
.mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 12px;
}

.photo-large {
    grid-column: span 2;
    grid-row: span 2;
}

/* Gallery page: an even grid of photos */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.photo-grid .photo {
    aspect-ratio: 4 / 3;
}

/* The first photo is shown large, across two rows and two columns */
.photo-grid .photo-feature {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

/* Larger photo view */
.lightbox {
    max-width: min(92vw, 1100px);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background-color: var(--white);
    overflow: visible;
}

.lightbox::backdrop {
    background-color: rgba(10, 47, 82, 0.85);
}

.lightbox img {
    max-height: 78vh;
    width: auto;
    margin: 0 auto;
    border-radius: var(--radius) var(--radius) 0 0;
}

.lightbox-stage {
    position: relative;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--blue-dark);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lightbox-nav:hover {
    background-color: var(--white);
}

.lightbox-prev {
    left: 12px;
}

.lightbox-next {
    right: 12px;
}

.lightbox-caption {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 14px 20px;
    font-weight: 700;
    color: var(--blue-dark);
}

.lightbox-count {
    flex-shrink: 0;
    font-weight: 400;
    color: var(--ink-soft);
}

.lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--blue-dark);
    background-color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* Business Friends logos */
.logo-row {
    list-style: none;
    margin: 24px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.logo-row li {
    display: grid;
    place-items: center;
    width: 140px;
    height: 90px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--white);
}

.logo-row img {
    max-height: 64px;
    width: auto;
}

/* ===== Join band ===== */
.join-band {
    padding-top: 64px;
    padding-bottom: 64px;
}

.join-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.join-band-inner p {
    max-width: 40em;
}

.join-band .button {
    flex-shrink: 0;
}

.join-band-text {
    flex: 1;
}

/* The main button, with a quick way to renew for people who are already members */
.join-band-actions {
    flex-shrink: 0;
    text-align: center;
}

.renew-note {
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.renew-note a {
    padding-block: 4px;
    font-weight: 700;
    color: var(--white);
}

.join-band-text p {
    margin: 0 0 12px;
}

.join-band-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    color: var(--white);
    font-weight: 700;
}

.join-band-benefits li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.join-band-benefits .icon {
    width: 18px;
    height: 18px;
    color: #b9d58f;   /* light green that's easy to see on dark blue */
    stroke-width: 3;
}

/* The book in a white circle beside the join message */
.join-band-mascot {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: var(--white);
}

.join-band-mascot img {
    width: 78%;
}

/* ===== Inner page header ===== */
.page-header {
    position: relative;
    overflow: hidden;   /* hides the bottom of the peeking book */
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(80px, 9vw, 116px);   /* room for the wave and the book */
    text-align: center;
    background-image:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.85), transparent 55%),
        radial-gradient(circle at 92% 100%, rgba(121, 160, 72, 0.12), transparent 30%);
}

.page-header .lead {
    margin: 0 auto 24px;
}

.page-header .lead:last-child {
    margin-bottom: 0;
}

/* The smiling book peeks up over the wave in the bottom corner,
   rising up once when the page opens */
.peek {
    position: absolute;
    z-index: 1;   /* behind the wave */
    right: clamp(16px, 6vw, 96px);
    bottom: clamp(2px, 0.8vw, 12px);
    width: clamp(84px, 10vw, 140px);
    transform: rotate(-8deg);
    pointer-events: none;
    animation: peek-up 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.2) 0.3s backwards;
}

@keyframes peek-up {
    from {
        transform: translateY(80%) rotate(-8deg);
    }
}

/* ===== About page ===== */
.about-hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(72px, 8vw, 108px);   /* room for the wave */
    background-image:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.9), transparent 40%),
        radial-gradient(circle at 5% 90%, rgba(121, 160, 72, 0.1), transparent 30%);
}

.about-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
}

.about-hero .lead {
    max-width: 30em;
    margin-bottom: 32px;
}

/* Three photos pinned up like a scrapbook page */
.polaroid-stack {
    position: relative;
    justify-self: center;
    width: min(100%, 540px);
    aspect-ratio: 1 / 0.8;
}

.polaroid {
    position: absolute;
    width: 48%;
    margin: 0;
    padding: 10px 10px 0;
    border-radius: 4px;
    background-color: var(--white);
    box-shadow: 0 2px 4px rgba(13, 61, 105, 0.08), 0 18px 40px rgba(13, 61, 105, 0.18);
    transform: rotate(var(--tilt));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: settle 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.2) backwards;
}

.polaroid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 2px;
    background-color: var(--tint);
}

.polaroid figcaption {
    padding: 10px 4px 12px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(0.72rem, 1.6vw, 0.95rem);
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    color: var(--blue-dark);
}

/* A strip of tape in one of the logo's colors */
.polaroid::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 84px;
    height: 24px;
    margin-left: -42px;
    background-color: var(--tape);
    transform: rotate(-4deg);
}

.polaroid-1 {
    --tilt: -6deg;
    --tape: rgba(121, 160, 72, 0.55);
    left: 0;
    top: 15%;
    animation-delay: 0.1s;
}

.polaroid-2 {
    --tilt: 2deg;
    --tape: rgba(19, 88, 151, 0.4);
    left: 26%;
    top: 0;
    z-index: 1;
    animation-delay: 0.25s;
}

.polaroid-3 {
    --tilt: 7deg;
    --tape: rgba(179, 43, 57, 0.4);
    right: 0;
    top: 21%;
    animation-delay: 0.4s;
}

/* Hovering a photo straightens it and brings it to the front */
.polaroid:hover {
    z-index: 3;
    transform: rotate(0deg) translateY(-6px) scale(1.03);
    box-shadow: 0 4px 8px rgba(13, 61, 105, 0.1), 0 26px 50px rgba(13, 61, 105, 0.22);
}

@keyframes settle {
    from {
        opacity: 0;
        transform: translateY(-28px) rotate(calc(var(--tilt) * 2));
    }
}

/* Mission: centered, with a large quotation mark behind it */
.mission-band {
    text-align: center;
}

.mission {
    max-width: 880px;
    margin: 0 auto clamp(56px, 8vw, 96px);
}

.mission-band .mission-label {
    justify-content: center;
}

.mission-band .mission p {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.45;
    text-wrap: balance;
}

/* How your support helps: three steps joined by a dashed line */
.flow-title {
    margin-bottom: 40px;
}

.flow {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.flow::before {
    content: "";
    position: absolute;
    top: 36px;
    left: calc((100% - 64px) / 6);
    right: calc((100% - 64px) / 6);
    border-top: 3px dashed rgba(19, 88, 151, 0.28);
    transform-origin: left center;
    transition: transform 1.2s ease 0.2s;
}

.flow-step {
    --step: var(--blue);
    --step-soft: rgba(19, 88, 151, 0.1);
}

.flow-step:nth-child(1) {
    --step: #5c8133;
    --step-soft: rgba(121, 160, 72, 0.16);
}

.flow-step:nth-child(3) {
    --step: var(--red);
    --step-soft: rgba(179, 43, 57, 0.1);
}

.flow-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    border-radius: 50%;
    color: var(--step);
    background-color: var(--white);
    background-image: linear-gradient(var(--step-soft), var(--step-soft));
    box-shadow: 0 0 0 8px var(--white);   /* a white ring that hides the dashed line behind it */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.3), opacity 0.3s ease;
}

.flow-icon .icon {
    width: 30px;
    height: 30px;
}

.flow-step h3 {
    font-size: 1.3rem;
}

.flow-step p {
    max-width: 22em;
    margin: 0 auto;
    color: var(--ink-soft);
}

/* When the steps scroll into view, the line draws in and the icons pop in turn
   (script.js adds these classes) */
.flow.will-reveal::before {
    transform: scaleX(0);
}

.flow.will-reveal .flow-icon {
    opacity: 0;
    transform: scale(0.6);
}

.flow.will-reveal.in-view::before {
    transform: scaleX(1);
}

.flow.will-reveal.in-view .flow-icon {
    opacity: 1;
    transform: scale(1);
}

.flow.in-view .flow-step:nth-child(2) .flow-icon {
    transition-delay: 0.5s;
}

.flow.in-view .flow-step:nth-child(3) .flow-icon {
    transition-delay: 1s;
}

.mission-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.65;
    color: #4f7329;   /* deep green */
}

/* A short line in the logo's three colors */
.tri-rule {
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--green) 0 33.33%,
        var(--blue) 33.33% 66.66%,
        var(--red) 66.66% 100%
    );
}

.mission blockquote {
    margin: 0;
}

.mission p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.5;
    color: var(--blue-dark);
}

/* What we do: four photo cards in a 2 x 2 grid */
.story-rows {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.story-row {
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--white);
    border: 1px solid var(--line);
}

.story-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.story-text {
    position: relative;
    padding: 0 28px 28px;
}

/* The icon badge overlaps the bottom edge of the photo */
.story-text .icon-badge {
    margin-top: -26px;
    border: 4px solid var(--white);
    width: 56px;
    height: 56px;
}

.story-text h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.story-text p {
    margin: 0;
    color: var(--ink-soft);
}

/* ===== Business Friends (home, About and Join) =====
   script.js builds these from the list in sponsors.js. Without
   JavaScript there's nothing to show, so they stay hidden. */
.biz-band,
.business-block,
.biz-proof-block {
    display: none;
}

.js .biz-band,
.js .business-block,
.js .biz-proof-block {
    display: block;
}

.biz-wall,
.biz-row,
.biz-proof {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One business: its logo, its name, and a badge for Partners and Patrons */
.biz-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 18px 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--white);
    text-align: center;
    text-decoration: none;
    color: var(--blue-dark);
}

a.biz-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.biz-card:hover {
    transform: translateY(-3px);
    border-color: rgba(19, 88, 151, 0.4);
    box-shadow: 0 12px 26px rgba(13, 61, 105, 0.12);
}

/* Every logo fits inside the same size box, whatever its shape */
.biz-logo {
    display: block;
    width: 100%;
    height: 84px;
}

.biz-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.biz-name {
    font-weight: 700;
    line-height: 1.3;
}

/* The name is underlined, so it reads as a link */
a.biz-card .biz-name {
    text-decoration: underline;
    text-decoration-color: rgba(19, 88, 151, 0.35);
    text-underline-offset: 3px;
}

a.biz-card:hover .biz-name {
    text-decoration-color: currentColor;
}

.biz-badge {
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--tint);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--blue);
}

/* About page: every business in an even grid */
.biz-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 28px;
}

/* The open spot that invites the next business */
.biz-invite .biz-card {
    justify-content: center;
    border: 2px dashed rgba(19, 88, 151, 0.3);
    background-color: transparent;
}

.biz-invite .biz-card:hover {
    border-color: var(--blue);
}

.biz-plus {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--tint);
    color: var(--blue);
}

.biz-invite-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--blue);
}

.biz-note {
    margin: 16px 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

/* Home page: one centered row that scrolls once it's too long */
.biz-band {
    text-align: center;
}

.biz-band .section-head {
    margin-left: auto;
    margin-right: auto;
}

.biz-marquee {
    padding: 6px 0 10px;   /* room for the lift and shadow when you point at a logo */
}

.biz-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.biz-row .biz {
    flex: 0 0 200px;   /* every logo gets the same width, so the row can measure itself */
}

.biz-marquee.is-scrolling {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.biz-marquee.is-scrolling .biz-track {
    display: flex;
    width: max-content;
    animation: biz-scroll var(--biz-duration, 40s) linear infinite;
}

.biz-marquee.is-scrolling .biz-row {
    flex-wrap: nowrap;
    padding-right: 16px;   /* the same gap where the two copies meet */
}

/* Pointing at a logo, or pressing Pause, stops the row */
.biz-marquee.is-scrolling:hover .biz-track,
.biz-marquee.is-paused .biz-track {
    animation-play-state: paused;
}

@keyframes biz-scroll {
    to {
        transform: translateX(-50%);
    }
}

.biz-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 18px;
    border: 1px solid rgba(19, 88, 151, 0.35);
    border-radius: 999px;
    background-color: var(--white);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--blue-dark);
    cursor: pointer;
}

.biz-toggle:hover {
    border-color: var(--blue);
}

.biz-toggle .icon {
    width: 16px;
    height: 16px;
}

.biz-band-cta {
    margin: 32px 0 0;
}

/* Community partners sit just under the Business Friends */
.biz-band + .partners {
    padding-top: 0;
}

.biz-band + .partners .wrap {
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

/* Join page: a compact list under the business levels */
.biz-proof-block {
    margin-top: 32px;
}

.biz-proof-title {
    margin: 0 0 12px;
    font-weight: 700;
    color: var(--ink-soft);
}

.biz-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.biz-proof .biz-card {
    flex-direction: row;
    gap: 12px;
    padding: 8px 16px 8px 8px;
    text-align: left;
}

.biz-proof .biz-logo {
    flex: 0 0 auto;
    width: 56px;
    height: 40px;
}

.biz-proof .biz-name {
    font-size: 0.95rem;
}

/* Bylaws: a document icon in a rounded square */
.doc-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    color: var(--blue);
    background-color: var(--tint);
}

.doc-icon .icon {
    width: 30px;
    height: 30px;
}

/* Newsletter editions */
.edition-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.edition-list li {
    transition: background-color 0.15s ease;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.edition-list li:last-child {
    border-bottom: none;
}

.edition-list a {
    font-weight: 700;
}

.edition-list li:hover {
    background-color: rgba(19, 88, 151, 0.04);
}

/* Newsletters page: featured current edition beside the archive */
.newsletter-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.current-card {
    padding: clamp(28px, 4vw, 40px);
    border-radius: 16px;
    background-color: var(--blue-dark);
    background-image: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.08), transparent 55%);
    color: rgba(255, 255, 255, 0.88);
}

.current-card .kicker {
    color: #b9d58f;
}

.current-card h2 {
    margin-bottom: 24px;
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    color: var(--white);
}

.current-card-note {
    margin: 12px 0 0;
    font-size: 0.9rem;
}

.inbox-note {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.inbox-note h3 {
    color: var(--white);
}

.inbox-note a {
    display: inline-block;
    padding: 4px 0;
    font-weight: 700;
    color: var(--white);
}

.current-card :focus-visible {
    outline-color: var(--white);
}

.past-editions h2 {
    margin-bottom: 24px;
}

.edition-year {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    padding: 4px 0 12px;
    border-top: 1px solid var(--line);
}

.edition-year h3 {
    margin: 14px 0 0;
    font-size: 1.25rem;
    color: var(--ink-soft);
}

.edition-year .edition-list li:last-child {
    border-bottom: none;
}

.kicker {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--ink-soft);
}

/* ===== Membership levels ===== */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.tier-grid.three {
    grid-template-columns: repeat(3, 1fr);
}

.tier {
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 28px;
    background-color: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    border-top: 5px solid var(--blue);
}

.tier:nth-child(3n + 1) {
    border-top-color: var(--green);
}

.tier:nth-child(3n + 3) {
    border-top-color: var(--red);
}

.tier:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(13, 61, 105, 0.1);
}

.tier h4 {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink-soft);
}

.tier .price {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--blue-dark);
}

.tier .per {
    margin-bottom: 16px;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.tier-link {
    margin-top: auto;   /* keeps every link lined up at the bottom of its card */
    padding-top: 16px;
    font-weight: 700;
}

/* ===== Join: benefits ===== */
.benefit-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.benefit {
    padding: 28px 24px;
    border-radius: var(--radius);
    background-color: var(--tint);
    text-align: center;
}

.benefit .icon-badge {
    width: 60px;
    height: 60px;
    background-color: var(--white);
}

.benefit .icon-badge .icon {
    width: 26px;
    height: 26px;
}

.benefit h3 {
    font-size: 1.15rem;
}

.benefit p {
    margin: 0;
    color: var(--ink-soft);
}

.button-row.centered {
    justify-content: center;
}

.trust-line {
    margin: 20px 0 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
    text-align: center;
}

/* The heart sits inline with the words, so it stays put when the line wraps */
.trust-line .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -2px;
    color: var(--red);
}

/* ===== Join: how to join ===== */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    counter-reset: none;
}

.steps li {
    padding: 28px;
    border-radius: var(--radius);
    background-color: var(--white);
    border: 1px solid var(--line);
}

.steps p {
    color: var(--ink-soft);
}

.steps .button {
    margin-top: 4px;
}

.step-number {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 50%;
    background-color: var(--blue-dark);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.15rem;
}

/* Official membership note, worded exactly as on fotcpl.org */
.official-note {
    margin-top: 24px;
    padding: 20px 24px;
    border-left: 4px solid var(--green);
    border-radius: 0 var(--radius) var(--radius) 0;
    background-color: var(--white);
}

.official-note p {
    margin: 0;
    color: var(--ink);
}

/* ===== Videos ===== */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
}

.video {
    margin: 0;
}

.video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;   /* keeps the video the right shape at any width */
    border: 0;
    border-radius: var(--radius);
    background-color: var(--tint);
}

.video figcaption {
    margin-top: 14px;
    color: var(--ink-soft);
}

.video figcaption strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--blue-dark);
}

/* ===== Contact ===== */
.contact-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.contact-main h2 {
    font-size: 1.6rem;
}

.contact-subhead {
    margin-top: 48px;
}

/* Email cards: the address to click, plus a button that copies it */
.email-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.email-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.email-card:hover {
    border-color: rgba(19, 88, 151, 0.35);
    box-shadow: 0 10px 28px rgba(13, 61, 105, 0.08);
}

.email-card h3 {
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.email-card p {
    color: var(--ink-soft);
}

.email-card-actions {
    margin-top: auto;   /* sits at the bottom of the card */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.email-card-address {
    display: inline-block;
    padding: 4px 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Quick links */
.help-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.help-links a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: var(--radius);
    background-color: var(--tint);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.help-links a:hover {
    background-color: #e1eaf3;
}

.help-links .icon-badge {
    margin: 0;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--white);
}

.help-links .icon-badge .icon {
    width: 20px;
    height: 20px;
}

/* Side column */
.contact-side {
    display: grid;
    gap: 20px;
}

.visit-card {
    padding: 28px;
    border-radius: var(--radius);
    background-color: var(--tint);
}

.visit-card h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.visit-card p {
    color: var(--ink-soft);
}

.visit-card address {
    margin-bottom: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
}

.visit-card a {
    font-weight: 700;
}


.social-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-buttons .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background-color: var(--white);
}

.library-note {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.library-note .icon-badge {
    flex-shrink: 0;
}

.library-note h2 {
    font-size: 1.5rem;
}

.library-note p {
    margin: 0;
}

/* ===== 404 page ===== */
.not-found {
    text-align: center;
}

.not-found-art {
    width: 240px;
    margin: 0 auto 24px;
}

.not-found .button-row {
    justify-content: center;
}

/* ===== Footer ===== */
.site-footer {
    background-color: var(--blue-deep);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

.footer-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 64px 24px 48px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.15fr;
    gap: 32px;
}

/* Turns the colorful logo solid white so it shows on dark blue */
.footer-logo {
    width: 220px;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}

.site-footer h2 {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
}

.site-footer p {
    margin: 0 0 12px;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li + li {
    margin-top: 4px;
}

/* Bigger tap areas for footer links */
.site-footer li a {
    display: inline-block;
    padding: 4px 0;
}

.site-footer a {
    color: var(--white);
}

.site-footer :focus-visible {
    outline-color: var(--white);
}

.site-footer address {
    margin-bottom: 12px;
    font-style: normal;
    line-height: 1.5;
}

.footer-note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.15s ease;
}

.footer-social a:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 20px 24px;
    font-size: 0.9rem;
}

.footer-bottom-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
}

.footer-bottom p {
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 20px;
    margin-right: auto;   /* pushes "Made with love" to the far right */
}

.footer-legal a {
    padding: 4px 0;
}

.made-in {
    color: rgba(255, 255, 255, 0.75);
}

.heart-icon {
    width: 14px;
    height: 14px;
    margin: 0 2px;
    vertical-align: -2px;
    fill: #e0707b;
    stroke: none;
}

/* ===== Footer: night over Lake Lewisville =====
   Stars, a crescent moon, the far shore and a little sailboat.
   The sky fades from the join band's blue into the footer's. */
.lake-scene {
    height: clamp(84px, 9vw, 128px);
    overflow: hidden;
    background: linear-gradient(to bottom, var(--blue-dark), var(--blue-deep));
}

.lake-shore {
    display: block;
    width: 100%;
    height: 100%;
}

.night-boat {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

/* The boat rocks on the waves when you reach the footer (script.js adds
   "in-view"), and again when you point at it */
.lake-scene.in-view .night-boat {
    animation: rock 2.4s ease-in-out 2;
}

.lake-scene:hover .night-boat {
    animation: rock-again 2.4s ease-in-out 2;
}

@keyframes rock {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(1.5px) rotate(-4deg); }
    75% { transform: translateY(-1px) rotate(4deg); }
}

@keyframes rock-again {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(1.5px) rotate(-4deg); }
    75% { transform: translateY(-1px) rotate(4deg); }
}

/* =========================================================
   Extra touches
   ========================================================= */

/* ===== The wave along the bottom of each opening section =====
   A nod to Lake Lewisville. Two layers: a soft one behind, a solid one in front. */
.wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;   /* tucks under the edge so no thin line shows */
    z-index: 2;
    height: clamp(22px, 3.6vw, 52px);
    pointer-events: none;
}

.wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wave path {
    fill: var(--white);
}

.wave-back {
    opacity: 0.5;
}

/* ===== Home: "Happening this week" with the library's open hours ===== */
.events-text {
    flex: 1 1 320px;
}

.events-text p {
    margin: 0;
    font-size: 1.1rem;
}

.events-text .open-status {
    margin-top: 4px;
    font-size: 0.95rem;
}

/* ===== Open now / closed now notes (filled in by script.js) =====
   A line of space is kept for the note before it's filled in,
   so nothing on the page jumps when it appears. */
.open-status {
    display: none;
}

.js .open-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 1.65em;
    margin: 0;
    font-weight: 700;
}

.open-status:empty::before {
    content: none;
}

/* The colored dot, lined up with the first line of words */
.open-status::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: calc(0.825em - 5px);
    border-radius: 50%;
}

.open-status.is-open {
    color: #2f5214;
}

.open-status.is-open::before {
    background-color: var(--green);
    animation: pulse 1.5s ease-out 3;   /* pulses three times, then rests */
}

.open-status.is-closed {
    color: var(--ink);
}

.open-status.is-closed::before {
    background-color: var(--red);
}

@keyframes pulse {
    from {
        box-shadow: 0 0 0 0 rgba(121, 160, 72, 0.6);
    }
    to {
        box-shadow: 0 0 0 9px rgba(121, 160, 72, 0);
    }
}

/* ===== Home: membership spotlight ===== */
.spotlight {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.08), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(179, 43, 57, 0.16), transparent 40%);
}

.spotlight-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}

.spotlight h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 12px;
}

.spotlight-text > p:not(.spotlight-price) {
    max-width: 30em;
    font-size: 1.1rem;
    margin-bottom: 28px;
}

.spotlight-price {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 20px;
}

.spotlight-price .amount {
    font-family: var(--font-heading);
    font-size: clamp(3.6rem, 8vw, 5.4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
}

.spotlight-price .per {
    line-height: 1.4;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
}

.spotlight-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.spotlight-benefits li {
    padding: 24px;
    border-radius: var(--radius);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.spotlight-benefits li:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.spotlight-benefits h3 {
    font-size: 1.1rem;
}

.spotlight-benefits p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.82);
}

/* Light versions of the logo's three colors, easy to see on dark blue */
.spotlight-benefits li > .icon-badge {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    color: #9cc3e6;
    background-color: rgba(156, 195, 230, 0.14);
}

.spotlight-benefits li:nth-child(3n + 1) > .icon-badge {
    color: #b9d58f;
    background-color: rgba(185, 213, 143, 0.14);
}

.spotlight-benefits li:nth-child(3n + 3) > .icon-badge {
    color: #f0a3ab;
    background-color: rgba(240, 163, 171, 0.14);
}

/* Outlined white button for dark backgrounds */
.button-outline-light {
    color: var(--white);
    background-color: transparent;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.button-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ===== Copy buttons (only shown when JavaScript is running) ===== */
.copy-btn {
    display: none;
}

.js .copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid rgba(19, 88, 151, 0.3);
    border-radius: 999px;
    background-color: var(--white);
    color: var(--blue-dark);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.js .copy-btn:hover {
    border-color: var(--blue);
    background-color: var(--tint);
}

.copy-btn .icon {
    width: 14px;
    height: 14px;
}

.copy-btn .icon-check,
.copy-btn.copied .icon-copy {
    display: none;
}

.copy-btn.copied .icon-check {
    display: block;
}

.js .copy-btn.copied {
    color: #2f5214;
    border-color: var(--green);
    background-color: rgba(121, 160, 72, 0.14);
}

/* Kroger's organization number, shown like a coupon code */
.code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.code {
    display: inline-block;
    padding: 4px 14px;
    border: 2px dashed rgba(19, 88, 151, 0.35);
    border-radius: 8px;
    background-color: var(--tint);
    color: var(--blue-dark);
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* ===== Little pop-up message ===== */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 50;
    max-width: calc(100% - 32px);
    padding: 12px 20px;
    border-radius: 999px;
    background-color: var(--ink);
    color: var(--white);
    font-weight: 700;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translate(-50%, 16px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast:empty {
    padding: 0;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ===== Join: Individual and Business tabs =====
   The tabs only show when JavaScript is running. Without it, both lists
   simply appear one after the other. The second list starts hidden, so the
   page doesn't jump while script.js sets the tabs up. */
.tab-list {
    display: none;
}

.js .tabs:not(.tabs-ready) .tab-panel + .tab-panel {
    display: none;
}

.js .tab-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 28px;
    padding: 6px;
    border-radius: 999px;
    background-color: var(--white);
    box-shadow: inset 0 0 0 1px var(--line), 0 4px 14px rgba(13, 61, 105, 0.06);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-soft);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tab:hover {
    color: var(--blue-dark);
    background-color: var(--tint);
}

.tab[aria-selected="true"] {
    color: var(--white);
    background-color: var(--blue-dark);
}

.tab .icon {
    width: 18px;
    height: 18px;
}

/* With tabs on, the tab names do the job of the panel headings on screen
   (the headings stay for screen readers) */
.js .panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.panel-title {
    margin-bottom: 20px;
}

/* Arriving at join.html#business leaves room above for the tabs */
.tab-panel {
    scroll-margin-top: 90px;
}

.tab-panel + .tab-panel {
    margin-top: 40px;
}

.js .tab-panel + .tab-panel {
    margin-top: 0;
}

/* A soft fade when switching tabs (not when the page first opens) */
.tabs-switched .tab-panel:not([hidden]) {
    animation: panel-in 0.3s ease-out;
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ===== Join: compare the levels side by side ===== */
.compare {
    margin-top: 24px;
}

.compare summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 999px;
    background-color: var(--white);
    box-shadow: inset 0 0 0 2px var(--blue);
    color: var(--blue-dark);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.15s ease;
}

.compare summary::-webkit-details-marker {
    display: none;
}

.compare summary:hover {
    background-color: rgba(19, 88, 151, 0.08);
}

/* A chevron that flips when the table opens */
.compare summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border: solid currentColor;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.compare[open] summary::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.compare-scroll {
    margin-top: 16px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--white);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.compare-table th,
.compare-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
}

.compare-table thead th {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--blue-dark);
    vertical-align: bottom;
}

.compare-price {
    display: block;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.compare-table tbody th {
    font-weight: 400;
    text-align: left;
    color: var(--ink);
}

.compare-table tbody th,
.compare-table thead td {
    background-color: var(--white);
}

.compare-table tbody tr:nth-child(even) > * {
    background-color: #f6f9fc;
}

/* Only shown on phones, where the four-level table scrolls sideways */
.compare-hint {
    display: none;
}

.compare-table tbody tr:last-child > * {
    border-bottom: 0;
}

.compare-yes {
    width: 20px;
    height: 20px;
    color: #4f7329;
    stroke-width: 3;
    vertical-align: middle;
}

.compare-no {
    color: #6b7785;
}

/* ===== Join: frequently asked questions ===== */
.faq-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

.faq-intro p {
    font-size: 1.1rem;
    color: var(--ink-soft);
}

.faq details {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--white);
    transition: box-shadow 0.2s ease;
}

.faq details[open] {
    box-shadow: 0 10px 28px rgba(13, 61, 105, 0.08);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--blue-dark);
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

/* A chevron that flips when the answer opens */
.faq summary::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin: -4px 4px 0 0;
    border: solid var(--blue);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.faq details[open] summary::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.faq summary:hover {
    color: var(--blue);
}

.faq summary:focus-visible {
    border-radius: var(--radius);
}

.faq-answer {
    padding: 0 24px 20px;
    color: var(--ink-soft);
}

.faq-answer p {
    margin: 0;
}

.faq-answer a {
    font-weight: 700;
}

#faq .official-note {
    margin-top: clamp(32px, 5vw, 48px);
}

/* ===== Gallery: video previews ===== */
.video-play {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background-color: var(--blue-deep);
}

.video-play img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* trims the black bars from YouTube's preview */
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.video-play:hover img {
    transform: scale(1.04);
    opacity: 0.9;
}

.play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background-color: var(--red);
    color: var(--white);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25), 0 10px 26px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.play-button .icon {
    width: 28px;
    height: 28px;
    margin-left: 4px;   /* the triangle looks centered when nudged right */
    fill: currentColor;
}

.video-play:hover .play-button {
    transform: scale(1.08);
    background-color: var(--red-dark);
}

/* Lightbox: the photo fades softly as it changes */
.lightbox img {
    transition: opacity 0.2s ease;
}

.lightbox img.is-changing {
    opacity: 0.35;
}

/* ===== Newsletters: a little drawing of the newsletter ===== */
.current-card {
    position: relative;
    margin-top: 64px;
    padding-top: 150px;
    text-align: center;
}

.paper-stack {
    position: absolute;
    top: -64px;
    left: 50%;
    width: 150px;
    height: 194px;
    margin-left: -75px;
}

.paper {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.paper-back {
    background-color: #dbe6f1;
    transform: rotate(-8deg) translate(-12px, 6px);
}

.paper-front {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 14px 14px;
    overflow: hidden;
    background-color: var(--white);
    transform: rotate(5deg);
    transition: transform 0.3s ease;
}

.current-card:hover .paper-front {
    transform: rotate(2deg) translateY(-4px);
}

.paper-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(
        to right,
        var(--green) 0 33.33%,
        var(--blue) 33.33% 66.66%,
        var(--red) 66.66% 100%
    );
}

.paper-logo {
    width: 100%;
    height: auto;
}

.paper-edition {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--blue-dark);
}

.paper-photo {
    display: block;
    flex: 1;
    min-height: 36px;
    border-radius: 3px;
    background: linear-gradient(135deg, #cfe0f0, #b9d58f);
}

.paper-line {
    display: block;
    height: 5px;
    border-radius: 3px;
    background-color: #dfe6ee;
}

.paper-line.short {
    width: 60%;
}

.current-card .inbox-note {
    text-align: center;
}

/* ===== About: rooted in the City by the Lake ===== */
.rooted-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: start;
}

.lake-art {
    position: sticky;
    top: 120px;
}

/* A soft green block behind the picture, like a mat in a frame */
.lake-art::before {
    content: "";
    position: absolute;
    inset: 20px -20px -20px 20px;
    border-radius: 24px;
    background-color: rgba(121, 160, 72, 0.2);
}

.lake-art svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(13, 61, 105, 0.18);
}

.day-boat {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.lake-art:hover .day-boat {
    animation: rock 2.4s ease-in-out 2;
}

.rooted-text > p:not(.lead):not(.sources) {
    color: var(--ink-soft);
}

/* A timeline: a circle for each year, joined by a line that runs
   through the logo's three colors */
.timeline {
    list-style: none;
    margin: 28px 0 20px;
    padding: 0;
}

.timeline li {
    position: relative;
    padding: 0 0 18px 36px;
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--blue);
    background-color: var(--white);
}

/* The line from each circle down to the next one */
.timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 24px;
    bottom: -4px;
    width: 2px;
    border-radius: 2px;
    background-color: var(--blue);
}

.timeline li:first-child::before {
    border-color: #5c8133;
}

.timeline li:first-child::after {
    background: linear-gradient(#5c8133, var(--blue));
}

.timeline li:nth-last-child(2)::after {
    background: linear-gradient(var(--blue), var(--red));
}

/* The year still to come gets a dashed circle */
.timeline li:last-child::before {
    border-style: dashed;
    border-color: var(--red);
}

.timeline p {
    margin: 0;
    color: var(--ink-soft);
}

.timeline .timeline-year {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--blue-dark);
}

.pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: rgba(179, 43, 57, 0.1);
    color: var(--red-dark);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
}

.sources {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

/* ===== About: Business Friends, then the bylaws ===== */
.business-governance {
    display: grid;
    gap: 24px;
}

.business-block,
.governance-card {
    padding: clamp(28px, 4vw, 44px);
    border-radius: 16px;
}

.business-block {
    background-color: var(--white);
    border: 1px solid var(--line);
}

.business-block > p {
    color: var(--ink-soft);
}

.governance-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.88);
    background-color: var(--blue-dark);
    background-image: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.1), transparent 55%);
}

.governance-card h2 {
    color: var(--white);
}

.governance-card .doc-icon {
    margin-bottom: 20px;
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.12);
}

.governance-note {
    margin: auto 0 0;
    padding-top: 20px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.governance-card :focus-visible {
    outline-color: var(--white);
}

/* On wider screens the bylaws card lies flat: icon, words, button */
@media (min-width: 761px) {
    .governance-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon title button"
            "icon text button"
            "icon note button";
        column-gap: 28px;
        align-items: center;
    }

    .governance-card .doc-icon {
        grid-area: icon;
        align-self: start;
        margin-bottom: 0;
    }

    .governance-card h2 {
        grid-area: title;
        margin-bottom: 6px;
    }

    .governance-card > p:not(.governance-note) {
        grid-area: text;
        margin: 0;
    }

    .governance-card .button {
        grid-area: button;
    }

    .governance-note {
        grid-area: note;
        margin: 0;
        padding-top: 10px;
    }
}

/* Partners and Patrons get a double-width spot with a bigger logo */
@media (min-width: 360px) {
    .biz-wall .biz-featured {
        grid-column: span 2;
    }

    .biz-wall .biz-featured .biz-logo {
        height: 110px;
    }
}

/* ===== About: arriving from a "Learn more" link =====
   The card you jumped to glows green for a moment */
.story-row:target {
    animation: arrive 2.4s ease-out;
}

@keyframes arrive {
    0%, 35% {
        box-shadow: 0 0 0 4px var(--green), 0 16px 40px rgba(13, 61, 105, 0.16);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(121, 160, 72, 0);
    }
}

/* ===== Contact: on tablets, the address sits beside the hours ===== */
@media (min-width: 600px) and (max-width: 960px) {
    .visit-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
    }

    .visit-card .hours {
        margin: 0;
        padding: 0 0 0 32px;
        border-top: 0;
        border-left: 1px solid var(--line);
    }
}

/* ===== Contact: follow along ===== */
.follow-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 24px;
    border-radius: var(--radius);
    background-color: var(--tint);
}

.follow-card p {
    margin: 0;
    color: var(--ink-soft);
}

/* ===== Contact: directions and phone ===== */
.visit-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.visit-link .icon {
    flex-shrink: 0;
    color: var(--blue);
}

/* Keeps a phone number on one line */
.nowrap {
    white-space: nowrap;
}

/* ===== Style guide page (styleguide.html) ===== */
.swatches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.swatch {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.swatch-color {
    display: block;
    height: 72px;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.swatch-text {
    display: block;
}

.sw-blue { background-color: var(--blue); }
.sw-blue-dark { background-color: var(--blue-dark); }
.sw-blue-deep { background-color: var(--blue-deep); }
.sw-red { background-color: var(--red); }
.sw-red-dark { background-color: var(--red-dark); }
.sw-green { background-color: var(--green); }
.sw-ink { background-color: var(--ink); }
.sw-ink-soft { background-color: var(--ink-soft); }
.sw-tint { background-color: var(--tint); }

.swatch-name {
    display: block;
    font-weight: 700;
}

.swatch-use {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

code {
    padding: 1px 6px;
    border-radius: 4px;
    background-color: var(--tint);
    font-size: 0.85em;
}

.type-samples .type-h1,
.type-samples .type-h2,
.type-samples .type-h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--blue-dark);
}

.type-h1 { font-size: clamp(2.25rem, 4.5vw, 3.4rem); }
.type-h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); }
.type-h3 { font-size: 1.2rem; }

.type-label {
    margin: 4px 0 28px;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.sample-dark {
    margin-top: 24px;
    padding: 28px;
    border-radius: var(--radius);
    background-color: var(--blue-dark);
}

.sample-gap {
    margin-top: 56px;
}

.badge-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
}

/* ===== Medium screens ===== */
@media (max-width: 960px) {
    .feature-grid,
    .tier-grid,
    .benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-layout,
    .newsletter-layout,
    .spotlight-inner,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .newsletter-layout {
        max-width: 640px;
        margin: 0 auto;
    }

    .steps,
    .rooted-inner {
        grid-template-columns: 1fr;
    }

    .help-grid {
        grid-template-columns: 1fr 1fr;
    }

    .help-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .lake-art {
        position: relative;
        top: auto;
        max-width: 560px;
    }

    .mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }

    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .photo-grid .photo-feature {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== Phones and tablets: the menu folds into a "Menu" button ===== */
@media (max-width: 900px) {
    /* Menu button: show the "Menu" button, hide the links until it's tapped.
       Only when JavaScript is running, so the links never get stuck hidden. */
    .header-inner {
        column-gap: 10px;
    }

    .header-join {
        display: inline-block;
        margin-left: auto;   /* sits just left of the Menu button */
        padding: 9px 18px;
        font-size: 0.95rem;
    }

    .js .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        font: inherit;
        font-weight: 700;
        color: var(--ink);
        background: none;
        border: 2px solid rgba(19, 88, 151, 0.25);
        border-radius: 999px;
        cursor: pointer;
    }

    /* Three bars drawn with CSS: the span is the middle bar,
       ::before and ::after are the top and bottom bars */
    .menu-bars,
    .menu-bars::before,
    .menu-bars::after {
        display: block;
        width: 18px;
        height: 2px;
        background-color: currentColor;
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .menu-bars {
        position: relative;
    }

    .menu-bars::before,
    .menu-bars::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .menu-bars::before {
        top: -6px;
    }

    .menu-bars::after {
        top: 6px;
    }

    /* When open, the bars turn into an X */
    .menu-open .menu-bars {
        background-color: transparent;
    }

    .menu-open .menu-bars::before {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-open .menu-bars::after {
        transform: translateY(-6px) rotate(-45deg);
    }

    .js .main-nav {
        display: none;
    }

    .js .menu-open .main-nav {
        display: flex;
        animation: menu-in 0.2s ease-out;
    }

    .main-nav {
        flex-basis: 100%;   /* drops below the logo and button */
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 8px;
    }

    .main-nav a {
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
    }

    .main-nav a:not(.button)::after {
        display: none;   /* the menu uses lines between links instead */
    }

    .main-nav a:not(.button):hover,
    .main-nav a:not(.button)[aria-current="page"] {
        color: var(--blue);
    }

    .main-nav a.button {
        margin-top: 12px;
        text-align: center;
    }
}

@media (max-width: 760px) {

    .brand img {
        height: 48px;
    }

    .library-link {
        display: none;   /* not enough room on phones */
    }

    .hero-inner,
    .split {
        grid-template-columns: 1fr;
    }

    .hero-inner {
        gap: 24px;
        text-align: center;
    }

    .hero-friends {
        grid-row: 1;   /* picture above the words on phones */
        width: min(100%, 380px);
    }

    .friend {
        border-width: 4px;
        box-shadow: 0 0 0 4px var(--ring), 0 10px 24px rgba(13, 61, 105, 0.18);
    }

    .hero .lead {
        margin-left: auto;
        margin-right: auto;
    }

    .hero .button-row,
    .hero-note {
        justify-content: center;
    }

    .join-band-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .join-band-actions {
        text-align: left;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-inner,
    .story-rows,
    .rooted-inner {
        grid-template-columns: 1fr;
    }

    .about-hero-inner {
        gap: 40px;
    }

    .polaroid-stack {
        width: min(100%, 420px);
    }

    .polaroid {
        padding: 7px 7px 0;
    }

    .polaroid figcaption {
        padding: 8px 2px 10px;
        font-size: 0.8rem;
    }

    .polaroid::before {
        width: 60px;
        height: 18px;
        margin-left: -30px;
        top: -8px;
    }

    .lake-art::before {
        inset: 14px -10px -14px 10px;
    }

    .join-band-mascot {
        width: 72px;
        height: 72px;
    }

    .page-header {
        padding-bottom: 96px;   /* room for the wave and the peeking book */
    }

    .panel {
        padding: 24px;
    }

    /* How your support helps: steps stack, joined by a line down the left */
    .flow {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: left;
    }

    .flow::before {
        top: 36px;
        bottom: 36px;
        left: 34px;
        right: auto;
        border-top: 0;
        border-left: 3px dashed rgba(19, 88, 151, 0.28);
        transform-origin: center top;
    }

    .flow.will-reveal::before {
        transform: scaleY(0);
    }

    .flow.will-reveal.in-view::before {
        transform: scaleY(1);
    }

    .flow-step {
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: 20px;
        align-items: start;
    }

    .flow-icon {
        margin-bottom: 0;
    }

    .flow-step p {
        margin: 0;
    }

    .faq summary {
        padding: 16px 18px;
        font-size: 1.05rem;
    }

    .faq-answer {
        padding: 0 18px 18px;
    }

    .current-card {
        padding-top: 132px;
    }

    .paper-stack {
        top: -56px;
        width: 128px;
        height: 166px;
        margin-left: -64px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
        margin-right: 0;
    }

    .play-button {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }
}

/* Small phones: a slightly smaller logo so Join and Menu fit on one line */
@media (max-width: 420px) {
    .header-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .brand img {
        height: 40px;
    }

    /* Slightly slimmer buttons, so two fit side by side */
    .button {
        padding-left: 20px;
        padding-right: 20px;
    }

    .header-join {
        padding: 8px 14px;
    }

    .js .menu-toggle {
        padding: 7px 12px;
    }
}

@media (max-width: 560px) {
    .feature-grid,
    .tier-grid,
    .tier-grid.three,
    .benefit-grid,
    .email-cards,
    .help-links,
    .footer-inner,
    .spotlight-benefits,
    .help-grid {
        grid-template-columns: 1fr;
    }

    /* Benefit cards become compact rows: icon on the left, words on the right */
    .spotlight-benefits li,
    .benefit {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        align-items: start;
        padding: 18px;
        text-align: left;
    }

    .spotlight-benefits li > .icon-badge,
    .benefit > .icon-badge {
        grid-row: span 2;
        margin-bottom: 0;
    }

    .benefit > .icon-badge {
        width: 52px;
        height: 52px;
    }

    .spotlight-benefits h3,
    .benefit h3 {
        margin-bottom: 2px;
    }

    .footer-inner {
        gap: 32px;
        padding-top: 40px;
    }

    .tab {
        padding: 10px 18px;
    }

    .compare-table {
        font-size: 0.85rem;
    }

    .compare-table th,
    .compare-table td {
        padding: 10px 8px;
    }

    .compare-table thead th {
        font-size: 0.95rem;
    }

    .compare-table.wide {
        min-width: 520px;
    }

    .compare-hint {
        display: block;
        margin: 12px 0 0;
        font-size: 0.9rem;
        color: var(--ink-soft);
    }

    /* The benefit names stay in view while the table scrolls */
    .compare-table.wide tbody th,
    .compare-table.wide thead td {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 120px;
        box-shadow: 1px 0 0 var(--line);
    }

    /* Business Friends: smaller tiles, two to a row */
    .business-block {
        padding: 24px 16px;
    }

    .biz-wall {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
    }

    .biz-row {
        gap: 12px;
    }

    .biz-row .biz {
        flex-basis: 150px;
    }

    .biz-marquee.is-scrolling .biz-row {
        padding-right: 12px;
    }

    .biz-card {
        padding: 14px 10px 12px;
    }

    .biz-logo {
        height: 60px;
    }

    .biz-name {
        font-size: 0.95rem;
    }

    /* Style guide: each color chip sits beside its name */
    .swatch {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px;
    }

    .swatch-color {
        flex: 0 0 56px;
        height: 56px;
        margin-bottom: 0;
    }
}

@keyframes menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Printing: just the content, no menus or buttons ===== */
@media print {
    .topbar,
    .site-header nav,
    .menu-toggle,
    .header-join,
    .back-to-top,
    .join-band,
    .peek,
    .wave,
    .lake-scene,
    .events-strip,
    .site-footer nav,
    .footer-support,
    .lightbox,
    .copy-btn,
    .toast,
    .tab-list {
        display: none !important;
    }

    /* Print both membership lists, not just the open tab */
    .tab-panel[hidden] {
        display: block !important;
    }

    .flow.will-reveal::before,
    .flow.will-reveal .flow-icon {
        opacity: 1;
        transform: none;
    }

    .site-header {
        position: static;
        box-shadow: none;
    }

    .band {
        padding: 24px 0;
        background: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
    }
}

/* Respect people who turn off animations in their device settings */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    html {
        scroll-behavior: auto;
    }

    .button:hover,
    .button:active,
    .tier:hover,
    .help-item:hover,
    .photo:hover img,
    .video-play:hover img,
    .spotlight-benefits li:hover {
        transform: none;
    }
}

/* ===== Mission: key words get a highlighter stroke =====
   A soft green band under the words, not a thin line, so they don't look like links */
.mission-band .mission p {
    color: var(--ink-soft);   /* the rest of the sentence is softer, so the key words stand out */
}

.mission .mark {
    font-weight: inherit;   /* the heading font comes in one weight, so color does the work */
    color: var(--blue-dark);
    background-image: linear-gradient(rgba(121, 160, 72, 0.22), rgba(121, 160, 72, 0.22));
    background-repeat: no-repeat;
    background-position: 0 90%;
    background-size: 100% 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 0.08em;
}