/*
    Theme Name: w32026
    Theme URI: https://w3nerds.com
    Description: Theme designed for client
    Version: 1.1
    Author: w3 Global Solutions
    Author URI: https://w3nerds.com
    Tags: HTML5, CSS3
    License: MIT
    License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    BASE — variables, reset, base typography
\*------------------------------------*/
:root {
    --ink: #12242E;
    --ink-2: #1D3A48;
    --teal: #0E5C63;
    --teal-dk: #0A4348;
    --sage: #5C8A72;
    --amber: #C8811F;
    --amber-lt: #F0A93B;
    --cream: #FBF7F0;
    --cream-2: #F3ECE0;
    --line: #E3D9C9;
    --white: #fff;
    --muted: #54646E;
    --radius: 16px;
    --radius-lg: 26px;
    --shadow-sm: 0 1px 2px rgba(18,36,46,.06), 0 4px 14px rgba(18,36,46,.06);
    --shadow-md: 0 10px 34px rgba(18,36,46,.12);
    --maxw: 1200px;
    --fs: 1rem;
    --color-1: var(--teal);
    --color-2: var(--ink);
    --color-3: var(--amber);
    --color-4: var(--cream);
    --color-5: var(--muted);
    --color-6: var(--cream-2);
    --greyZero: var(--cream);
    --greyOne: var(--cream-2);
    --greyTwo: var(--line);
    --greyThree: var(--muted);
    --greyFour: var(--ink-2);
    --greyFive: var(--ink);
}

*, *:after, *:before {
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    font-size: var(--fs);
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--fs);
    line-height: 1.65;
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

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

h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, serif;
    line-height: 1.15;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}

h1 {
    font-size: clamp(2.3rem, 5.2vw, 4rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 700;
}

h3 {
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 700;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--teal);
    text-decoration: none;
}

:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Text-size control (utility bar) retunes the --fs token */
html[data-textsize="lg"] {
    --fs: 1.15rem;
}
html[data-textsize="xl"] {
    --fs: 1.3rem;
}
/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/*------------------------------------*\
    HEADER
\*------------------------------------*/
.announcement-bar {
    background-color: var(--amber);
    color: var(--ink);
    padding: 6px 0;
    text-align: center;
}
.announcement-bar a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--ink);
}
/* Utility bar */
.util {
    background: var(--ink);
    color: #D9E4E9;
    font-size: .86rem;
}

.util .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    align-items: center;
    padding-top: 9px;
    padding-bottom: 9px;
}

.util a {
    color: #D9E4E9;
    text-decoration: none;
}

.util a:hover {
    color: var(--amber-lt);
    text-decoration: underline;
}

.util .sp {
    margin-left: auto;
    display: flex;
    gap: 14px;
    align-items: center;
}

/* Status pill */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    background: rgba(255,255,255,.1);
    padding: 3px 12px;
    border-radius: 999px;
    font-weight: 600;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6FCF97;
    box-shadow: 0 0 0 3px rgba(111,207,151,.22);
}

.dot.closed {
    background: #E88B6A;
    box-shadow: 0 0 0 3px rgba(232,139,106,.22);
}

/* Text size controls */
.txtsize {
    display: flex;
    gap: 4px;
    align-items: center;
}

.txtsize button {
    background: rgba(255,255,255,.1);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit, serif;
    padding: 2px 8px;
    line-height: 1.4;
}

.txtsize button[aria-pressed="true"] {
    background: var(--amber);
    color: #1B1206;
    border-color: var(--amber);
}


/* Site header */
header.site {
    position: sticky;
    top: 0;
    z-index: 120;
    background: rgba(251,247,240,.93);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
}
header.site .wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 12px;
    padding-bottom: 12px;
    max-width: 1600px;
}
/* Brand wordmark */
.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 1;
    min-width: 0;
}
.brand .mark {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--teal), var(--sage));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.brand .mark svg {
    width: 27px;
    height: 27px;
}
/* Logo image — replaces the icon mark on some pages; size by height,
   let width follow the image's own aspect ratio, and neutralize the
   icon-tile background so a wide wordmark isn't boxed into a square. */
.brand img {
    height: 50px;
    width: auto;
    max-width: 260px;
    flex-shrink: 0;
}
.brand .mark:has(img) {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
    display: block;
}
.brand b {
    font-family: 'Fraunces', serif;
    font-size: 1.16rem;
    display: block;
    line-height: 1.1;
}
.brand span {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
/* Main nav */
nav.main {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}
/* nav-list.inc.php renders a <ul>; flatten it for the desktop bar */
nav.main ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    align-items: center;
}
nav.main li {
    margin: 0;
}
nav.main a {
    white-space: nowrap;
    padding: 15px 13px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 550;
    font-size: .96rem;
}
nav.main a:hover {
    background: var(--cream-2);
}
.hdr-cta {
    display: flex;
    gap: 9px;
    align-items: center;
}
.menu-btn {
    display: none;
    background: var(--ink);
    color: var(--white);
    border: 0;
    border-radius: 12px;
    padding: 11px 15px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
#mobilenav {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--cream);
}
#mobilenav.open {
    display: block;
}
#mobilenav ul {
    list-style: none;
    margin: 0;
    padding: 10px 22px 20px;
}
#mobilenav li {
    margin: 0;
}
#mobilenav a {
    display: block;
    padding: 14px 4px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
/*------------------------------------*\
    GLOBAL — patterns reused across 2+ pages
\*------------------------------------*/
section {
    padding: 75px 0;
}
.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 22px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    font-weight: 650;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    padding: .95em 1.6em;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
    min-height: 52px;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--amber);
    color: #1B1206;
    box-shadow: 0 6px 0 #9C6314;
}

.btn-primary:hover {
    background: var(--amber-lt);
    box-shadow: 0 8px 0 #9C6314;
}

.btn-primary:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #9C6314;
}

.btn-dark {
    background: var(--teal);
    color: var(--white);
    box-shadow: 0 6px 0 var(--teal-dk);
}

.btn-dark:hover {
    background: #137780;
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: rgba(18,36,46,.25);
}

.btn-ghost:hover {
    border-color: var(--ink);
    background: rgba(255,255,255,.6);
}

.btn-ghost-light {
    background: rgba(255,255,255,.08);
    color: var(--white);
    border-color: rgba(255,255,255,.4);
}

.btn-ghost-light:hover {
    background: rgba(255,255,255,.18);
}

.hdr-cta .btn {
    white-space: nowrap;
}
.btn-sm {
    padding: .6em 1.15em;
    min-height: 44px;
    font-size: .92rem;
}

/* Eyebrow label */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--teal);
    font-weight: 700;
    font-size: .79rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 7px 15px;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

/* Hero CTA row */
.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 8px;
}

/* Trust badges */
.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-top: 26px;
    font-size: .9rem;
    color: var(--muted);
    font-weight: 550;
}

.trust span {
    display: flex;
    align-items: center;
    gap: .45em;
}

.check {
    color: var(--sage);
    font-weight: 800;
}

/* Hours card */
.hours-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 30px 30px 26px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
}

.hours-card h3 {
    margin-bottom: 4px;
}

.hours-card .status {
    font-size: .92rem;
    font-weight: 650;
    margin-bottom: 18px;
}

.hours-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: .98rem;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 10px;
    border-radius: 9px;
}

.hours-list li.today {
    background: var(--cream-2);
    font-weight: 700;
}

.hours-list li span:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

.hours-card .addr {
    font-size: .95rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin: 0;
}

.hours-card .addr a {
    font-weight: 650;
    text-decoration: none;
}

.hours-card .addr a:hover {
    text-decoration: underline;
}
.hours-container {
    display: block;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hours-container table {
    width: 100%;
    min-width: 240px;
    border-collapse: collapse;
    margin-top: 2px;
}
.hours-container table th {
    text-align: left;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 8px 6px 0;
}
.hours-container table tbody tr td:nth-of-type(3n-2) {
    padding: 4px 8px;
}
.hours-container table tbody tr td:nth-of-type(3n-1) {
    padding: 0 10px 0 0;
}
.hours-container table tr.selected {
    background: var(--cream-2);
    font-weight: 700;
}
/* Quick action banner */
.quickbar {
    background: var(--ink);
    padding: 26px 0 30px;
}

.quickbar h2 {
    color: var(--white);
    font-size: 1.06rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    text-align: center;
    opacity: .72;
    margin-bottom: 20px;
}

.qgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 13px;
}

.qbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    text-align: center;
    background: linear-gradient(160deg, #1E3D4B, #183441);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: var(--radius);
    padding: 24px 12px;
    text-decoration: none;
    color: var(--white);
    font-weight: 650;
    font-size: .97rem;
    min-height: 132px;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.qbtn:hover {
    transform: translateY(-4px);
    background: linear-gradient(160deg, var(--teal), #0C4E55);
    border-color: var(--amber);
}

.qbtn svg {
    width: 31px;
    height: 31px;
    stroke: var(--amber-lt);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Catalog search band */
.searchband {
    background: var(--cream-2);
    border-bottom: 1px solid var(--line);
    padding: 34px 0;
}

.searchband .inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 26px;
    align-items: center;
}

.searchband h2 {
    margin: 0;
    font-size: 1.5rem;
    white-space: nowrap;
}

.searchband p {
    margin: 2px 0 0;
    font-size: .92rem;
    color: var(--muted);
}

form.catalog {
    display: flex;
    gap: 10px;
    min-width: 0;
}

form.catalog input[type="search"] {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: 15px 20px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: var(--white);
    color: var(--ink);
}

form.catalog input[type="search"]:focus {
    border-color: var(--teal);
    outline: none;
}

/* Section header block */
.sec-head {
    max-width: 67ch;
    margin-bottom: 40px;
}

.sec-head .eyebrow {
    margin-bottom: 14px;
}

.sec-head p {
    color: var(--muted);
    font-size: 1.06rem;
    margin-bottom: 0;
}

/* Card grid */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* Card */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Card icon container */
.card .ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--cream-2);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.card .ico svg {
    width: 26px;
    height: 26px;
    stroke: var(--teal);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Card action link */
.lnk {
    font-weight: 700;
    text-decoration: none;
    color: var(--teal);
    display: inline-flex;
    gap: .4em;
    align-items: center;
}

.lnk:hover {
    gap: .7em;
}

/* Price list */
.pricelist {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    font-size: .93rem;
    color: var(--muted);
}

.pricelist li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--line);
}

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

.pricelist b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Contact section */
section.contact .grid,
div.contact .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
}
section.contact .grid > *,
div.contact .grid > * {
    min-width: 0;
}
.pagehero .herogrid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: start;
}

.herohours {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 30px 30px 26px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
}

.herohours h2 {
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.herohours #statusHero {
    font-size: .92rem;
    font-weight: 650;
    margin-bottom: 18px;
    color: var(--muted);
}

.herohours .calnote {
    font-size: .85rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin: 20px 0 0;
}
/* Contact info list */
.info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.info-list li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.info-list li > span {
    min-width: 0;
}

.info-list svg {
    width: 23px;
    height: 23px;
    stroke: var(--teal);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: 3px;
}

.info-list b {
    display: block;
    font-size: .79rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}

.info-list a {
    text-decoration: none;
    font-weight: 650;
    font-size: 1.04rem;
    overflow-wrap: anywhere;
}

.info-list a:hover {
    text-decoration: underline;
}

/* Contact CTA row */
.contact-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* Map embed container */
.mapbox {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    min-height: 340px;
    background: var(--cream-2);
}

.mapbox iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: 0;
    display: block;
}

/* Newsletter signup band */
section.news {
    background: var(--cream-2);
}

section.news .box {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 44px;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}

.news-desc {
    color: var(--muted);
    margin-bottom: 0;
}

section.news form {
    display: grid;
    gap: 12px;
}

section.news .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

section.news input {
    font: inherit;
    padding: 14px 17px;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--cream);
    color: var(--ink);
    width: 100%;
}

section.news input:focus {
    border-color: var(--teal);
    outline: none;
}

section.news small {
    color: var(--muted);
    font-size: .83rem;
}

/* Donate/support — teal gradient band */
section.donate {
    background: linear-gradient(150deg, var(--teal-dk), var(--teal) 55%, #12626A);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

section.donate:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image: radial-gradient(var(--white) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
}

section.donate .wrap {
    position: relative;
}

section.donate .grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 52px;
    align-items: center;
}

section.donate h2 {
    color: var(--white);
}

section.donate p {
    color: #CDE6E8;
}

/* Donate CTA row */
.donate-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Give card — semi-transparent card */
.give-card {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-lg);
    padding: 32px;
    backdrop-filter: blur(6px);
}

.give-card h3 {
    color: var(--white);
    margin-bottom: 18px;
}

/* Donation tiers grid */
.tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}

/* Tier block */
.tier {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    padding: 15px 16px;
}

.tier b {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    color: var(--amber-lt);
}

.tier span {
    font-size: .85rem;
    color: #CDE6E8;
}

/* Donate disclaimer note */
.donate-note {
    font-size: .9rem;
    margin-bottom: 0;
    color: #CDE6E8;
}

/* Story/about — dark band */
section.story {
    background: var(--ink);
    color: #E7EEF1;
}

section.story h2 {
    color: var(--white);
}

section.story .grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    align-items: center;
}

section.story p {
    color: #B9CBD3;
}

/* Portrait frame */
.portrait {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(160deg, #1E3D4B, #12242E);
    padding: 22px;
    margin: 0;
}

.portrait img {
    border-radius: 14px;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.portrait figcaption {
    font-size: .85rem;
    color: #96AEB8;
    margin-top: 14px;
    text-align: center;
}

/* Story CTA row */
.story-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

/* Stats grid */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 46px;
}

/* Stat block */
.stat {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius);
    padding: 22px 20px;
}

.stat b {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 2.6rem;
    color: var(--amber-lt);
    line-height: 1;
    margin-bottom: 7px;
}

.stat span {
    font-size: 1rem;
    color: #A9C0C9;
}

/* Blog posts grid */
.posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* Blog post card */
.post {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.post:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Post thumbnail — CSS gradient placeholder (no image yet) */
.post .thumb {
    height: 132px;
    background: linear-gradient(135deg, var(--sage), var(--teal));
    position: relative;
}

.post:nth-child(2) .thumb {
    background: linear-gradient(135deg, var(--amber), #8E5A12);
}

.post:nth-child(3) .thumb {
    background: linear-gradient(135deg, #3F6E86, var(--ink-2));
}

.post .thumb:after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px);
    background-size: 15px 15px;
}

/* Post body */
.post .body {
    padding: 24px 26px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Category tag pill */
.tag {
    align-self: flex-start;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 750;
    color: var(--teal);
    background: var(--cream-2);
    padding: 5px 11px;
    border-radius: 999px;
    margin-bottom: 12px;
}

/* Post meta line */
.post .meta {
    font-size: .82rem;
    color: var(--muted);
}

.post h3 {
    font-size: 1.16rem;
}

.post p {
    font-size: .95rem;
    color: var(--muted);
    flex: 1;
}
.wrapper {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 28px;
}
/* Calendar section */
.cal-section {
    background: var(--cream-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* Calendar iframe wrapper */
.calwrap {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow-md);
}

.calwrap iframe {
    width: 100%;
    height: 720px;
    border: 0;
    border-radius: 14px;
    display: block;
}

/* Calendar helper note */
.calnote {
    font-size: .88rem;
    color: var(--muted);
    margin: 14px 4px 0;
}

/* Book shelf carousel */
.shelf-section {
    padding-top: 0;
}

.shelf {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 6px 2px 22px;
    scroll-snap-type: x mandatory;
}

.shelf a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
    background: var(--cream-2);
}

.shelf a:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: var(--shadow-md);
}

/* Page hero (sub-page banner) */
.pagehero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(1000px 460px at 85% -20%, rgba(200,129,31,.18), transparent 62%),
        radial-gradient(820px 420px at 5% 120%, rgba(92,138,114,.22), transparent 60%),
        var(--cream);
}

.pagehero:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .45;
    background-image: radial-gradient(rgba(18,36,46,.07) 1px, transparent 1px);
    background-size: 22px 22px;
}

.pagehero .wrap {
    position: relative;
    padding-top: 46px;
    padding-bottom: 56px;
}

.pagehero h1 {
    max-width: 16ch;
}

.pagehero p.lede {
    font-size: 1.14rem;
    color: var(--ink-2);
    max-width: 60ch;
    margin-bottom: 0;
}

/* Breadcrumb navigation */
.crumbs {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 22px;
    display: flex;
    gap: .55em;
    flex-wrap: wrap;
    align-items: center;
}

.crumbs a {
    text-decoration: none;
    font-weight: 600;
}

.crumbs a:hover {
    text-decoration: underline;
}

/* Prose column — max-width text block */
.prose {
    max-width: 72ch;
}

/* Alt background band */
.alt {
    background: var(--cream-2);
}

/* Split layout — two-column grid with prose + sticky side */
.split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 52px;
    align-items: start;
}

/* Sticky side column — stretches to fill parent */
.split > .stickycol {
    align-self: stretch;
}

/* Panel — white card container */
.panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-sm);
}

.panel h3 {
    margin-bottom: 1.7em;
}

.panel p:last-child {
    margin-bottom: 0;
}
.tbl thead th:first-child {
    border-top-left-radius: var(--radius-lg);
}
.tbl thead th:last-child {
    border-top-right-radius: var(--radius-lg);
}
/* Sticky panel — sticks while scrolling within parent */
.panel.sticky {
    position: sticky;
    top: 130px;
}

/* Muted note — small helper text */
.muted-note {
    font-size: .92rem;
    color: var(--muted);
    margin-bottom: 0;
}

/* Costs / pricing table inside a .panel — bleeds to the card edges */
.tbl {
    width: calc(100% + 60px);
    margin: -30px -30px 0;
    border-collapse: collapse;
    font-size: .96rem;
}
.tbl thead th {
    background: var(--cream-2);
    padding: 14px 30px;
    text-align: left;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.tbl thead th:last-child {
    text-align: right;
}
.tbl tbody td {
    padding: 14px 30px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.tbl tbody td:last-child {
    text-align: right;
    font-weight: 700;
}
.tbl tbody tr:last-child td {
    border-bottom: 0;
}

/* Center alignment utility */
.centerItems {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/* card shell (shared with rest of site) */
.card {
    background-color: #fff;
}
.card img.icon {
    width: 75px;
    height: 75px;
    margin: 10px auto;
}
.card h1,
.card h2,
.card h3,
.card h4,
.card h5 {
    display: block;
    color: var(--color-3);
    padding: 10px;
    border-bottom: 1px solid var(--greyZero);
    transition-duration: 0.8s;
    font-family: var(--font-text-strong), sans-serif;
}
.card .flex-block {
    transition-duration: 0.8s;
}
.card .flex-block:hover h2,
.card .flex-block:hover h3,
.card .flex-block:hover h4,
.card .flex-block:hover h5 {
    border-color: var(--color-3);
}
.card .content-container {
    padding: 10px;
    text-align: left;
}
.card .content-container .cta {
    margin-left: 0;
}
.card .content-container .flex-block {
    padding: 10px;
}

/* events list card */
.card.events .table-noresponse .tableRow-noresponse .tableCell-noresponse {
    vertical-align: top;
}
.card.events .table-noresponse .tableRow-noresponse .tableCell-noresponse:first-of-type {
    width: 20%;
}
.card.events .table-noresponse .tableRow-noresponse .tableCell-noresponse:last-of-type {
    width: 80%;
}
.card.events div.icon-container {
    padding: 0 10px 10px;
    margin: 0 10px 0 0;
    text-align: center;
    width: 89px;
}
.card.events div.icon-container div.icon-top {
    background-color: var(--color-3);
    padding: 6px 16px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.card.events div.icon-container div.icon-top span.event.month {
    font-family: var(--font-text-strong), sans-serif;
    color: #fff;
    font-size: 16px;
    line-height: 26px;
    text-transform: uppercase;
}
.card.events div.icon-container div.icon-bot {
    border: 2px solid var(--color-3);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.card.events div.icon-container div.icon-top span.event.day {
    color: #444;
    font-size: 30px;
    line-height: 40px;
}
.card.events div.content-container div.table-noresponse {
    padding: 0 0 20px;
}
.card.events .event {
    font-size: 15px;
    line-height: 24px;
    color: #444;
    font-family: var(--font-text-regular), sans-serif;
}
.card.events .event.name {
    font-size: 24px;
    line-height: 36px;
    display: block;
    color: #000;
    font-family: var(--font-text-strong), sans-serif;
}
.card.events .event.time,
.card.events .event.location {
    display: inline-block;
    color: var(--color-3);
}
.card.events p {
    word-break: break-word;
}
/*------------------------------------*\
    HOME — body.home
\*------------------------------------*/

/* Modern-design baseline — neutralize legacy theme leaks within content only */
body.home .content {
    text-align: left;
    background: transparent;
}

body.home .content h1,
body.home .content h2,
body.home .content h3,
body.home .content h4,
body.home .content h5 {
    font-family: inherit, serif;
    color: inherit;
    text-transform: none;
    border: none;
    display: block;
    padding: 0;
    text-align: inherit;
}

body.home .content a {
    text-decoration: none;
    font-family: inherit, serif;
}

body.home .content ul,
body.home .content ol {
    list-style: none;
    padding: 0;
}

body.home .content button,
body.home .content input {
    font-family: inherit, serif;
}

/* Hero section */
/* The building photo is an <img>, not a background-image, so it keeps the
   fetchpriority hint it needs as the page's LCP element. Layers, bottom up:
   .hero-bg photo (z0) -> :before scrim (z1) -> .wrap content (z2). */
body.home .hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 0;
}

/* padding:0 undoes the global img rule; object-position sits high so the
   carved lettering survives the crop on tall, narrow viewports. */
body.home .hero .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: 50% 32%;
}

/* Scrim: heaviest over the left column where the type sits, lightest at the
   right so the building still reads behind the hours card. */
body.home .hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .75;
    background:
        linear-gradient(90deg, rgba(18,36,46,.92) 0%, rgba(18,36,46,.86) 38%, rgba(18,36,46,.62) 72%, rgba(18,36,46,.46) 100%),
        linear-gradient(0deg, rgba(10,67,72,.30), rgba(10,67,72,.30));
}

body.home .hero .wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 52px;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 64px;
}

/* Light type for the photo ground. Scoped to body.home .hero so .eyebrow,
   .trust and .check keep their cream-ground styling on every other page.
   The white .hours-card is opaque and carries its own contrast, so nothing
   here targets its interior. */
body.home .hero h1 {
    color: var(--white);
}

body.home .hero .eyebrow {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.34);
    color: #EAF1F3;
    box-shadow: none;
}

body.home .hero p.lede {
    font-size: 1.16rem;
    color: #E4ECEF;
    max-width: 38ch;
}

body.home .hero .trust {
    color: #C6D4DA;
}

body.home .hero .check {
    color: #8FC0A4;
}

/*------------------------------------*\
    TIMELINE / STICKYHEAD / BAND — body.about
\*------------------------------------*/

.stickyhead {
	position: sticky;
	top: 130px;
}

body.about .stickyhead h2 {
	background: none;
}

.timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 3px solid var(--line);
}

.timeline li {
	position: relative;
	padding: 0 0 30px 28px;
}

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

.timeline li:before {
	content: "";
	position: absolute;
	left: -9px;
	top: 6px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--amber);
	border: 3px solid var(--cream);
}

.timeline b {
	display: block;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.5rem;
	color: var(--teal-dk);
}

.timeline p {
	margin: .25em 0 0;
	color: var(--muted);
	font-size: 19px;
}

.band {
	background: var(--ink);
	color: #CFDDE3;
}

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

.band p {
	color: #B9CBD3;
	max-width: 56ch;
}

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

@media (max-width: 900px) {
	.panel.sticky,
	.stickyhead {
		position: static;
		top: auto;
	}
}

/*------------------------------------*\
    PEOPLE / STAFF — body.about
\*------------------------------------*/

body.about .people {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

body.about .person {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	box-shadow: var(--shadow-sm);
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

body.about .person .av {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(145deg, var(--teal), var(--sage));
	color: #fff;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .02em;
}

body.about .person b {
	display: block;
	font-size: 1.01rem;
	line-height: 1.25;
}

body.about .person span {
	display: block;
	font-size: .86rem;
	color: var(--muted);
	margin-top: 2px;
}

body.about .person a {
	font-size: .86rem;
	text-decoration: none;
	word-break: break-word;
}

body.about .person a:hover {
	text-decoration: underline;
}

@media (max-width: 1000px) {
	body.about .people {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	body.about .people {
		grid-template-columns: 1fr;
	}
}

/*------------------------------------*\
    DONATE — body.donate
\*------------------------------------*/

.two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.note {
	background: var(--color-4);
	border: 1px dashed var(--greyOne);
	border-radius: 12px;
	padding: 18px 22px;
	font-size: .94rem;
	color: var(--greyThree);
}

.note b {
	color: var(--greyFive);
}

.faq details {
	background: var(--color-4);
	border: 1px solid var(--greyOne);
	border-radius: 12px;
	padding: 18px 22px;
	margin-bottom: 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.faq summary {
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}

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

.faq summary:after {
	content: "+";
	font-size: 1.5rem;
	color: var(--color-3);
	line-height: 1;
	flex-shrink: 0;
}

.faq details[open] summary:after {
	content: "\2013";
}

.faq p {
	margin: .9em 0 0;
	color: var(--greyThree);
	font-size: .97rem;
}

/*------------------------------------*\
    BLOG
\*------------------------------------*/

/* Flex grid utilities — these weren't defined anywhere, which is why
   .one-third / .two-thirds blocks were collapsing to their content width */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-block {
    box-sizing: border-box;
    min-width: 0;
}

.flex-block.two-thirds {
    flex: 1 1 66.6667%;
    max-width: 66.6667%;
}

.flex-block.one-third {
    flex: 1 1 33.3333%;
    max-width: 33.3333%;
}

/* Single post — two-column layout (article + sidebar) */
.blog-details-flex-container {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

/* The generic .two-thirds / .one-third basis percentages sum to exactly
   100%, so the 48px gap above pushes the row past the container's width
   and forces an unwanted wrap. Subtract the gap's share from each side
   here so they still add up correctly with the gap included. */
.blog-details-flex-container > .flex-block.two-thirds {
    flex-basis: calc(66.6667% - 32px);
    max-width: calc(66.6667% - 32px);
}

.blog-details-flex-container > .flex-block.one-third {
    flex-basis: calc(33.3333% - 16px);
    max-width: calc(33.3333% - 16px);
}

.post-details-block {
    min-width: 0;
}

.post-details-block .post-title {
    margin-bottom: .3em;
}

.post-author {
    font-size: .88rem;
    color: var(--muted);
    font-weight: 550;
    margin-bottom: 28px;
}

/* Post images (single post view) */
.post-imgs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 28px;
}

.post-img-container {
    text-align: center;
}

.featured-img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
}

.caption-container {
    margin-top: 8px;
}

.caption-container p {
    font-size: .84rem;
    color: var(--muted);
    margin-bottom: 0;
}

/* Prose styling for rich post body content */
.post-details-block img {
    border-radius: var(--radius);
    margin: 20px 0;
    box-shadow: var(--shadow-sm);
}

.post-details-block ul,
.post-details-block ol {
    margin: 0 0 1.2em 1.3em;
    color: var(--ink);
}

.post-details-block li {
    margin-bottom: .4em;
}

.post-details-block blockquote {
    border-left: 4px solid var(--teal);
    background: var(--cream-2);
    padding: 18px 24px;
    margin: 24px 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink-2);
    font-style: italic;
}

.post-details-block h2 {
    margin-top: 1.3em;
}

.post-details-block h3 {
    margin-top: 1.1em;
}

/* Share row */
.social-sharing-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 8px 0 32px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.social-sharing-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 6px;
}

.social-sharing-buttons a {
    display: inline-flex;
    align-items: center;
    font-weight: 650;
    font-size: .86rem;
    color: var(--ink);
    background: var(--cream-2);
    border: 1px solid var(--line);
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.social-sharing-buttons a:hover {
    background: var(--amber);
    border-color: var(--amber);
    color: #1B1206;
    transform: translateY(-2px);
}

/* Prev / next post navigation */
.blog-detail hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 8px 0 28px;
}

.blog-detail .table a {
    font-weight: 650;
    color: var(--ink);
}

.blog-detail .table a:hover {
    color: var(--teal);
    text-decoration: underline;
}

body.blog .blog-detail .next-post,
body.blog .blog-detail .prev-post {
    padding: 10px;
    font-weight: 650;
    color: var(--ink);
    text-decoration: none;
}

body.blog .blog-detail .next-post:hover,
body.blog .blog-detail .prev-post:hover {
    color: var(--teal);
    text-decoration: underline;
}

/* Right-side author + image variants (blog-post-container layout) */
body.blog .blog-post-container .right-side .post-author {
    font-weight: 700;
    text-align: center;
    color: var(--ink);
}

body.blog .blog-post-container .right-side .post-imgs-container {
    text-align: center;
}

body.blog .blog-post-container .right-side .post-imgs-container .post-img {
    display: inline-block;
    margin: 0 auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

body.blog div.blog-post-container div.right-side img:not(.post-img) {
    padding: 10px;
    border-radius: var(--radius);
}

/* Per-network share button accents (kept within the site palette rather than raw brand hex, matching the unified-accent treatment already used for the footer's .social icons) */
.social-sharing-buttons a.twitter {
    background: var(--ink-2);
    color: var(--white);
}

.social-sharing-buttons a.twitter:hover {
    background: var(--ink);
    color: var(--white);
}

.social-sharing-buttons a.facebook {
    background: var(--teal);
    color: var(--white);
}

.social-sharing-buttons a.facebook:hover {
    background: var(--teal-dk);
    color: var(--white);
}

.social-sharing-buttons a.linkedin {
    background: var(--teal-dk);
    color: var(--white);
}

.social-sharing-buttons a.linkedin:hover {
    background: #072F33;
    color: var(--white);
}

.social-sharing-buttons a.pinterest {
    background: var(--sage);
    color: var(--white);
}

.social-sharing-buttons a.pinterest:hover {
    background: #4A7259;
    color: var(--white);
}

/* Sidebar */
.links-block .sticky-container {
    position: sticky;
    top: 130px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.side-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
}

.blog-section-title {
    display: block;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 16px;
}

.side-item .list,
.side-item .links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-item .list li,
.side-item .links li {
    border-bottom: 1px dashed var(--line);
}

.side-item .list li:last-child,
.side-item .links li:last-child {
    border-bottom: none;
}

.side-item .list a,
.side-item .links a {
    display: block;
    padding: 11px 2px;
    font-size: .93rem;
    font-weight: 550;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.35;
}

.side-item .list a:hover,
.side-item .links a:hover {
    color: var(--teal);
}

/* Blog listing */
#blog-articles .post-container {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px;
    margin-bottom: 24px;
    transition: transform .18s ease, box-shadow .18s ease;
}

#blog-articles .post-container:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

#blog-articles .featured-img {
    border-radius: var(--radius);
}

#blog-articles .object-fit {
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
    border-radius: var(--radius);
}

.post-title {
    margin-bottom: 4px;
}

.post-title a {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    text-decoration: none;
}

.post-title a:hover {
    color: var(--teal);
}

#blog-articles .post-author {
    margin-bottom: 12px;
}

#blog-articles .post-content p {
    color: var(--muted);
    margin-bottom: 0;
}

#blog-articles .post-content p a {
    font-weight: 650;
    color: var(--teal);
}

#blog-articles .post-content p a:hover {
    text-decoration: underline;
}

/* Pagination */
.paging-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 36px;
}

.paging-container a,
.paging-container span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: 10px;
    font-weight: 650;
    font-size: .92rem;
    text-decoration: none;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.paging-container a:hover {
    background: var(--cream-2);
    border-color: var(--teal);
}

.paging-container span.disabled {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--white);
    cursor: default;
}

.paging-container .previous-pg,
.paging-container .next-pg {
    font-size: 1.1rem;
}

@media (max-width: 900px) {
    .blog-details-flex-container > .flex-block.fullOnTablet,
    .blog-details-flex-container > .flex-block.two-thirds {
        flex-basis: 100%;
        max-width: 100%;
    }
    .links-block .sticky-container {
        position: static;
    }
    #blog-articles .post-container .tableCell.medium-4,
    #blog-articles .post-container .tableCell.medium-8 {
        margin-bottom: 14px;
    }
}

/*------------------------------------*\
    FOOTER
\*------------------------------------*/
footer {
    background: var(--ink);
    color: #A9C0C9;
    padding: 64px 0 0;
    font-size: .94rem;
}
footer h4 {
    color: var(--white);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
footer a {
    color: #A9C0C9;
    text-decoration: none;
    padding: 15px 0;
}
footer a:hover {
    color: var(--amber-lt);
    text-decoration: underline;
}
.fgrid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 44px;
}
.fbrand {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 16px;
    flex-direction: column;
}
.fbrand .mark {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--teal), var(--sage));
    display: grid;
    place-items: center;
}
.fbrand .mark svg {
    width: 25px;
    height: 25px;
}
/* Logo image — see .brand img above for why this exists */
.fbrand img {
    height: 46px;
    width: auto;
    max-width: 220px;
    flex-shrink: 0;
}
.fbrand .mark:has(img) {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
    display: block;
}
.fbrand b {
    color: var(--white);
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    display: block;
    line-height: 1.15;
}
.social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.social a {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(255,255,255,.07);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
}
.social a:hover {
    background: var(--amber);
    border-color: var(--amber);
}
.social svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    color: #D9E4E9;
}
.social a:hover svg {
    color: #1B1206;
}
.legal {
    border-top: 1px solid rgba(255,255,255,.11);
    padding: 22px 0 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    font-size: .86rem;
}
.legal .sp {
    margin-left: auto;
}


/*------------------------------------*\
    W3 CRM FORMS — contact (457) + newsletter (458)
\*------------------------------------*/
/* w3GetWidgetHTML() prints an inline style="display:none;" on the <form> when
   the CRM's websitesForms_hidden flag is set, and that flag is set on both of
   this site's forms. Nothing on the site ever reveals them, so unhide here.
   !important is required -- an inline style outranks any selector without it. */
.form-container form {
    display: block !important;
}

/* Field rows */
.form-input {
    margin-bottom: 16px;
}

.form-input:last-child {
    margin-bottom: 0;
}

/* Rows holding nothing but the reCAPTCHA token would otherwise leave a gap.
   The submit row also carries a hidden input, but it has the button beside
   it, so :only-child leaves it alone. */
.form-input:has(> input[type="hidden"]:only-child) {
    display: none;
}

.form-input label {
    display: block;
}

/* The widget wraps each field's caption in a bare <span> */
.form-input label > span {
    display: block;
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 7px;
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="tel"],
.form-container input[type="number"],
.form-container select,
.form-container textarea {
    font: inherit;
    width: 100%;
    padding: 13px 16px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--cream);
    color: var(--ink);
    transition: border-color .16s ease, background .16s ease;
}

.form-container input[type="text"]:focus,
.form-container input[type="email"]:focus,
.form-container input[type="tel"]:focus,
.form-container input[type="number"]:focus,
.form-container select:focus,
.form-container textarea:focus {
    border-color: var(--teal);
    background: var(--white);
    outline: none;
}

.form-container ::placeholder {
    color: var(--muted);
    opacity: 1;
}

.form-container textarea {
    min-height: 132px;
    line-height: 1.6;
    resize: vertical;
}

/* Native select chrome doesn't match the rest of the design; swap in our own
   caret. The data: URI is covered by the existing img-src CSP directive. */
.form-container select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354646E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 17px;
}

/* Submit button — .cta is the framework's class; match .btn-primary */
.form-container .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    padding: .95em 1.6em;
    border-radius: 999px;
    border: 2px solid transparent;
    min-height: 52px;
    margin-top: 4px;
    background: var(--amber);
    color: #1B1206;
    box-shadow: 0 6px 0 #9C6314;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.form-container .cta:hover {
    background: var(--amber-lt);
    box-shadow: 0 8px 0 #9C6314;
    transform: translateY(-2px);
}

.form-container .cta:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #9C6314;
}

/* Validation state. The global .inputError sets a pink fill !important; pair it
   with a border that reads as an error rather than just a tint. */
.form-container .inputError {
    border-color: #B5442F;
}

/* Scoped to the widget so the page-level $msgtouser_error banner keeps its own
   loud treatment. */
.form-container .form-error-container {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FBEAE7;
    border: 2px solid #B5442F;
    color: #7C2D1E;
    font-size: .92rem;
    font-weight: 600;
}

/* The newsletter sits on the white .box; its own form/input rules predate the
   widget markup and assume a hand-written form, so re-assert the widget look. */
section.news .form-container .cta {
    width: 100%;
}

@media (max-width: 640px) {
    .form-container .cta {
        width: 100%;
    }
    .form-container textarea {
        min-height: 112px;
    }
}

/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/

/*------------------------------------*\
    RESPONSIVE — media queries (max-width descending)
\*------------------------------------*/
@media (max-width: 1450px) {
    .hdr-cta .btn:not(.js-card) {
        display: none;
    }
}
@media (max-width: 1360px) {
    nav.main {
        display: none;
    }
    .hdr-cta {
        margin-left: auto;
    }
    .menu-btn {
        display: block;
    }
}
@media (max-width: 900px) {
    .fgrid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}
@media (max-width: 700px) {
    .split {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 720px) {
    .hdr-cta {
        display: none;
    }
    .menu-btn {
        margin-left: auto;
    }

    /* Condensed sticky header: logo + Menu, nothing else.
       header.site and its .wrap each carried their own vertical padding
       (20px + 12px a side = 64px of chrome), which on a phone stacked up with
       a 50px logo and the wordmark to make the sticky bar ~145px tall. Zero the
       outer padding and let .wrap alone set the rhythm. */
    header.site {
        padding: 0;
    }
    header.site .wrap {
        padding-top: 8px;
        padding-bottom: 8px;
        gap: 10px;
    }
    .brand {
        gap: 9px;
        min-width: 0;
    }
    .brand img {
        height: 32px;
        max-width: 105px;
    }
    /* The library name stays in the <a> -- an anchor needs real text, so this
       shrinks to fit rather than hiding. Dropping the inherited uppercase and
       .1em tracking makes it roughly a third narrower, which is what lets it
       hold one line without going illegibly small. */
    .brand > span {
        min-width: 0;
    }
    .brand b {
        font-size: clamp(.68rem, 2.7vw, .95rem);
        line-height: 1.15;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Tagline is the one line that goes -- least load-bearing, and it's a whole
       row of height. The name above it still carries the brand. */
    .brand > span > span {
        display: none;
    }
}
@media (max-width: 380px) {
    .brand img {
        height: 26px;
        max-width: 85px;
    }
    .menu-btn {
        padding: 11px 12px;
    }
}
@media (max-width: 400px) {
    .brand .mark {
        width: 40px;
        height: 40px;
    }
    .brand .mark svg {
        width: 22px;
        height: 22px;
    }
    .brand b {
        font-size: 1rem;
    }
}
@media (max-width: 520px) {
    .fgrid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 960px) {
    .qgrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    /* Stacked grid puts type across the full width, so the scrim goes
       vertical and heavier — the crop is far tighter at this size. */
    body.home .hero:before {
        background:
            linear-gradient(180deg, rgba(18,36,46,.86) 0%, rgba(18,36,46,.92) 100%),
            linear-gradient(0deg, rgba(10,67,72,.30), rgba(10,67,72,.30));
    }

    body.home .hero .wrap {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-top: 48px;
        padding-bottom: 48px;
    }
    section.donate .grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .news .box {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 30px;
    }
}

@media (max-width: 820px) {
    .searchband .inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .searchband h2 {
        white-space: normal;
    }
}

@media (max-width: 450px) {
    form.catalog {
        gap: 8px;
    }

    form.catalog input[type="search"] {
        padding: 12px 16px;
    }

    form.catalog .btn {
        padding: .8em 1.1em;
        min-height: 44px;
    }
}

@media (max-width: 520px) {
    .qgrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .qbtn {
        min-height: 112px;
        padding: 18px 10px;
        font-size: .92rem;
    }
}
@media only screen and (max-width: 1024px) {

    .util .wrap {
        justify-content: center;
    }
    .util .sp {
        margin-left: 0;
    }
}
@media only screen and (max-width: 900px) {
    .cards {
        grid-template-columns: 1fr 1fr;
    }

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

    section.story .grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .portrait {
        max-width: 360px;
        margin: 0 auto;
    }

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

    .donate .grid,
    .pagehero .herogrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact .grid,
    section.news .box {
        grid-template-columns: 1fr !important;
    }
}

@media only screen and (max-width: 640px) {
    section {
        padding: 30px 10px;
    }
    .cards {
        grid-template-columns: 1fr;
    }

    .stats,
    .tiers {
        grid-template-columns: 1fr;
    }
    body.about .people,
    .two {
        grid-template-columns: 1fr;
    }

    footer {
        text-align: center;
    }
    .fbrand {
        align-items: center;
    }

    footer div.footer-sub p.copyright {
        margin: 8px 0;
        text-align: center;
    }

    footer .footer-brand-container {
        text-align: center;
    }
    .legal,
    .social,
    .fbrand {
        justify-content: center;
    }
    .legal .sp {
        margin-left: 0;
    }
}
@media only screen and (max-width: 450px) {
    /* Was flex-direction:column, which stacked the logo above the wordmark and
       roughly doubled the sticky header's height. The header stays one row now;
       the wordmark itself is hidden from 720px down. */
    .brand {
        flex-direction: row;
        align-items: center;
    }
}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
    background: var(--teal);
    color: var(--white);
    text-shadow: none;
}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}

/* Utility rules carried from legacy theme */
.screen-reader-text {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(1px,1px,1px,1px);
}

.skip-to-content-link {
    background: var(--white);
    color: #000;
    height: 30px;
    left: 50%;
    padding: 4px;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
}

.skip-to-content-link:focus {
    transform: translateY(0%);
}

#loader {
    left: 50%;
    top: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    border: 12px solid #f3f3f3;
    border-top: 12px solid var(--teal);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    animation: spin 2s linear infinite;
    z-index: 999;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

p#noscript {
    background-color: red;
    color: white;
    text-align: center;
    width: 100%;
}

a#w3 {
    background-color: transparent;
    background: transparent url(img/w3nerds-logo-web.png) no-repeat;
    background-position: 10% 50%;
    color: #fff;
    display: inline-block;
    font-family: 'opensans-regular', sans-serif;
    font-size: 13px;
    line-height: 22px;
    margin: 10px;
    padding: 10px;
    padding-left: 90px;
    text-align: right;
    transition-duration: 0.8s;
    text-decoration: none;
    width: 180px;
    height: 90px;
}

a#w3:hover {
    background-color: var(--white);
    box-shadow: 15px 15px 0px -10px #4285f4, -15px -15px 0px -10px #fcc934, 5px -5px #ff5252, -5px 5px #34a853;
    color: #151515;
}

.success {
    padding: 12px 20px;
    text-align: left;
    color: var(--white);
    font-weight: bold;
    font-size: 16px;
    background: green;
    position: relative;
    z-index: 9999;
}

.success a {
    color: #ccc;
}

.error, .form-error-container {
    padding: 12px 20px;
    text-align: left;
    font-size: 16px;
    color: var(--white);
    background: red;
    position: relative;
    z-index: 9999;
}

.error span,
.error a {
    vertical-align: middle !important;
}

.inputError {
    background-color: rgb(249,213,212) !important;
}