/* =============================================================================
   Ka Puʻuwai ʻO Hawaiʻi — site stylesheet
   =============================================================================

   The design prototypes in design_handoff_hawaii_club_site/designs express
   every rule as an inline style="" attribute (a constraint of the prototyping
   tool). This file is where those were extracted to; templates carry classes
   only. Tokens below are copied verbatim from the handoff's "Design Tokens"
   table — change a colour here, not in a template.

   Structure follows the APS design system's conventions with the tropical
   palette swapped in: the left-accent-border section header, Bootstrap Icons
   as the only icon set, cards on white with a soft shadow, and 0.2s ease as
   the only transition.

   Layout is desktop-first, matching the 1200px prototypes, with two collapse
   points (960px and 640px) added for the real build.
   ============================================================================= */

:root {
    /* Colour */
    --hc-ink: #123a5c;          /* deep navy — headings, bands */
    --hc-footer: #0c2740;
    --hc-teal: #0e7c9b;         /* primary */
    --hc-teal-light: #4fc0d0;
    --hc-coral: #ff5a5f;        /* secondary / CTA */
    --hc-coral-deep: #e23e57;
    --hc-mango: #ff9f1c;
    --hc-magenta: #e23e6b;
    --hc-cream: #fbf7f0;        /* page background */
    --hc-sand: #faf5ec;         /* inset boxes */
    --hc-body: #55524c;
    --hc-muted: #6a665f;
    --hc-muted-soft: #7a766f;
    --hc-hairline: #e7ddd0;
    --hc-hairline-soft: #ece3d6;
    --hc-nav-link: #3a4a55;
    --hc-footer-text: #8fa6bb;
    --hc-on-navy: #c3d3e0;
    --hc-input-border: #d8cdbd;
    --hc-placeholder: #a89b8a;

    /* Tinted icon-tile backgrounds */
    --hc-tint-teal: #eef6f7;
    --hc-tint-coral: #fff0e6;
    --hc-tint-magenta: #fdeaf0;
    --hc-tint-mango: #fff5e3;

    /* Type */
    --hc-display: "DM Serif Display", Georgia, serif;
    --hc-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hc-script: "Caveat", cursive;

    /* Shape */
    --hc-radius-card: 16px;
    --hc-radius-lg: 20px;
    --hc-radius-btn: 8px;
    --hc-pill: 999px;

    /* Shadow */
    --hc-shadow-rest: 0 2px 8px rgba(0, 0, 0, 0.06);
    --hc-shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.06);
    --hc-shadow-feature: 0 8px 30px rgba(0, 0, 0, 0.08);
    --hc-shadow-popover: 0 12px 30px rgba(18, 58, 92, 0.3);

    /* Rhythm — the prototypes' 52px horizontal / 44px vertical section padding */
    --hc-gutter: 52px;
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--hc-cream);
    font-family: var(--hc-sans);
    color: var(--hc-body);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: var(--hc-teal);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--hc-coral);
}

img {
    max-width: 100%;
}

h1,
h2,
h3 {
    font-family: var(--hc-display);
    font-weight: 400;
    color: var(--hc-ink);
}

.hc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--hc-ink);
    color: #fff;
    padding: 10px 18px;
    z-index: 100;
}

.hc-skip-link:focus {
    left: 0;
    color: #fff;
}

/* Visible keyboard focus. The prototypes show none; leaving the browser
   default off would make the site unusable by keyboard. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--hc-teal-light);
    outline-offset: 2px;
}

/* The 1200px centred page the whole design sits inside. */
.hc-shell {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--hc-cream);
    overflow: hidden;
}

.hc-section {
    padding: 44px var(--hc-gutter);
}

.hc-section--tight {
    padding-top: 8px;
}

.hc-section--flush-bottom {
    padding-bottom: 8px;
}

/* First section after a banner header sits a little lower. */
.hc-section--lead {
    padding-top: 48px;
}

.hc-actions--spaced {
    margin-top: 24px;
}

/* -----------------------------------------------------------------------------
   Section headers — the APS left-accent-border motif.
   Non-negotiable per the handoff: every section header is a label with a solid
   3–4px colour bar glued to its left edge.
   -------------------------------------------------------------------------- */

.hc-label {
    border-left: 4px solid var(--hc-coral);
    padding-left: 12px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hc-ink);
    margin: 0 0 24px;
}

.hc-label--teal {
    border-left-color: var(--hc-teal);
}

.hc-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.hc-label-row .hc-label {
    margin-bottom: 0;
}

.hc-label-row a {
    font-weight: 700;
    font-size: 14px;
}

/* The small coral rule-plus-caps eyebrow above hero and page titles. */
.hc-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hc-coral);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.hc-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--hc-coral);
    flex: none;
}

.hc-eyebrow--on-navy {
    color: #ffb3b6;
}

.hc-eyebrow--on-coral {
    color: #ffd6b0;
}

.hc-eyebrow--on-coral::before {
    background: var(--hc-mango);
}

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.hc-btn {
    display: inline-block;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: var(--hc-radius-btn);
    border: 2px solid transparent;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hc-btn--primary {
    background: var(--hc-teal);
    color: #fff;
}

.hc-btn--primary:hover {
    background: #0b6480;
    color: #fff;
}

.hc-btn--coral {
    background: var(--hc-coral);
    color: #fff;
    font-weight: 800;
}

.hc-btn--coral:hover {
    background: var(--hc-coral-deep);
    color: #fff;
}

.hc-btn--outline {
    color: var(--hc-ink);
    border-color: var(--hc-ink);
    background: transparent;
}

.hc-btn--outline:hover {
    background: var(--hc-ink);
    color: #fff;
}

.hc-btn--outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: transparent;
}

.hc-btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.hc-btn--outline-teal {
    color: var(--hc-teal);
    border-color: var(--hc-teal);
    background: transparent;
}

.hc-btn--outline-teal:hover {
    background: var(--hc-teal);
    color: #fff;
}

.hc-btn--white {
    background: #fff;
    color: var(--hc-coral-deep);
    font-weight: 800;
    border-radius: 10px;
}

.hc-btn--white:hover {
    background: #ffeef0;
    color: var(--hc-coral-deep);
}

.hc-btn--sm {
    font-size: 13px;
    padding: 9px 18px;
}

.hc-btn--md {
    font-size: 14px;
    padding: 11px 22px;
    white-space: nowrap;
}

.hc-btn--block {
    display: block;
    width: 100%;
}

.hc-btn--link {
    color: var(--hc-teal);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 4px;
    background: none;
    border: 0;
}

/* -----------------------------------------------------------------------------
   Sticky nav
   -------------------------------------------------------------------------- */

.hc-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 40px;
    background: rgba(251, 247, 240, 0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--hc-hairline);
}

.hc-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
}

.hc-brand:hover {
    color: inherit;
}

.hc-brand__mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4fc0d0, #0e7c9b 60%, #123a5c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    overflow: hidden;
    flex: none;
}

.hc-brand__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hc-brand__text {
    line-height: 1.05;
}

.hc-brand__name {
    font-family: var(--hc-display);
    font-size: 18px;
    color: var(--hc-ink);
}

.hc-brand__sub {
    font-size: 11px;
    color: var(--hc-teal);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hc-menu {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hc-menu a {
    color: var(--hc-nav-link);
}

.hc-menu a:hover,
.hc-menu a[aria-current="page"] {
    color: var(--hc-teal);
}

.hc-menu .hc-btn--coral,
.hc-menu .hc-btn--coral[aria-current="page"] {
    color: #fff;
    padding: 9px 18px;
    font-size: inherit;
}

.hc-nav__toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 24px;
    color: var(--hc-ink);
    cursor: pointer;
    padding: 4px 8px;
}

/* -----------------------------------------------------------------------------
   Image slots
   Every prototype <image-slot> becomes a real Wagtail image. The gradient
   behind it is kept as a fallback tint so an empty slot still reads as a
   deliberate block of colour rather than a hole in the layout.
   -------------------------------------------------------------------------- */

.hc-media {
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.hc-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hc-media--ocean { background: linear-gradient(160deg, #0e7c9b, #123a5c); }
.hc-media--coral { background: linear-gradient(150deg, #ff5a5f, #e23e57); }
.hc-media--lagoon { background: linear-gradient(160deg, #4fc0d0, #0e7c9b); }
.hc-media--sunset { background: linear-gradient(120deg, #ff9f1c, #ff5a5f); }
.hc-media--orchid { background: linear-gradient(135deg, #e23e6b, #b04a8f); }
.hc-media--reef { background: linear-gradient(135deg, #4fc0d0, #0b5d4e); }

/* -----------------------------------------------------------------------------
   Hero (Home) and split hero (Membership)
   -------------------------------------------------------------------------- */

.hc-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 540px;
}

.hc-hero--short {
    min-height: 380px;
}

.hc-hero__body {
    min-width: 0;
    padding: 64px var(--hc-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--hc-cream);
}

.hc-hero--short .hc-hero__body {
    padding: 60px var(--hc-gutter);
}

.hc-hero__title {
    font-size: 54px;
    line-height: 1.04;
    margin: 0 0 8px;
}

.hc-hero--short .hc-hero__title {
    font-size: 48px;
    line-height: 1.05;
    margin-bottom: 14px;
}

.hc-hero__title em {
    font-style: italic;
    color: var(--hc-teal);
}

.hc-script {
    font-family: var(--hc-script);
    font-size: 30px;
    color: var(--hc-coral);
    margin: 2px 0 18px;
}

.hc-hero__intro {
    font-size: 17px;
    line-height: 1.6;
    color: var(--hc-body);
    margin: 0 0 30px;
    max-width: 460px;
}

.hc-hero--short .hc-hero__intro {
    font-size: 16.5px;
    margin-bottom: 0;
}

.hc-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   Banner page header (Events, Donate)
   -------------------------------------------------------------------------- */

.hc-banner {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.hc-banner--tall {
    min-height: 320px;
}

.hc-banner__media {
    position: absolute;
    inset: 0;
}

.hc-banner__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(18, 58, 92, 0.15), rgba(18, 58, 92, 0.82));
}

.hc-banner__scrim--coral {
    background: linear-gradient(180deg, rgba(226, 62, 87, 0.15), rgba(176, 38, 74, 0.85));
}

.hc-banner__body {
    position: relative;
    padding: 40px var(--hc-gutter);
    color: #fff;
}

.hc-banner__body h1 {
    font-size: 52px;
    line-height: 1;
    margin: 0;
    color: #fff;
}

.hc-banner__body p {
    font-size: 17px;
    margin: 12px 0 0;
    max-width: 620px;
    color: #e6eef4;
}

.hc-banner--tall .hc-banner__body p {
    color: #ffe6ea;
    max-width: 600px;
}

/* Plain page header on cream (Gallery, Board) */
.hc-pagehead {
    padding: 52px var(--hc-gutter) 8px;
}

.hc-pagehead h1 {
    font-size: 52px;
    line-height: 1;
    margin: 0 0 10px;
}

.hc-pagehead p {
    font-size: 17px;
    color: var(--hc-body);
    margin: 0;
    max-width: 640px;
}

/* -----------------------------------------------------------------------------
   Mission strip
   -------------------------------------------------------------------------- */

.hc-mission {
    padding: 44px var(--hc-gutter) 8px;
}

.hc-mission__inner {
    border-left: 4px solid var(--hc-coral);
    padding-left: 14px;
    font-size: 20px;
    line-height: 1.5;
    color: #4a463f;
    max-width: 900px;
}

.hc-mission__inner p {
    margin: 0;
}

.hc-mission__inner strong {
    color: var(--hc-ink);
}

/* -----------------------------------------------------------------------------
   Event spotlight (Home)
   -------------------------------------------------------------------------- */

.hc-spotlight {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
}

.hc-featured-mini {
    border-radius: var(--hc-radius-card);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-columns: 130px 1fr;
}

.hc-datechip {
    background: linear-gradient(160deg, #ff5a5f, #e23e57);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 8px;
}

.hc-datechip__month {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hc-datechip__day {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.hc-featured-mini__body {
    padding: 22px 24px;
}

.hc-featured-mini__title {
    font-weight: 700;
    font-size: 19px;
    color: var(--hc-ink);
    margin-bottom: 6px;
}

.hc-featured-mini__body p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-muted);
    margin: 0 0 12px;
}

.hc-minilist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hc-minilist__item {
    display: flex;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid var(--hc-hairline-soft);
    padding-bottom: 14px;
}

.hc-minilist__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.hc-minidate {
    text-align: center;
    min-width: 44px;
}

.hc-minidate__month {
    font-size: 11px;
    font-weight: 700;
    color: var(--hc-coral);
    text-transform: uppercase;
}

.hc-minidate__day {
    font-size: 22px;
    font-weight: 800;
    color: var(--hc-ink);
}

.hc-minilist__title {
    font-weight: 700;
    font-size: 15px;
    color: var(--hc-ink);
}

.hc-minilist__meta {
    font-size: 13px;
    color: var(--hc-muted-soft);
}

.hc-empty {
    color: var(--hc-muted-soft);
    font-size: 15px;
    margin: 0;
}

/* -----------------------------------------------------------------------------
   Why we gather (Home)
   -------------------------------------------------------------------------- */

.hc-why {
    padding: 8px var(--hc-gutter) 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hc-why p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--hc-body);
    margin: 0 0 18px;
}

.hc-valuelist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-valuelist li {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 15px;
    color: var(--hc-nav-link);
}

.hc-valuelist i {
    color: var(--hc-teal);
}

.hc-photogrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.hc-photogrid .hc-media {
    aspect-ratio: 1;
    border-radius: 14px;
}

/* -----------------------------------------------------------------------------
   Bands (navy / gradient full-width callouts)
   -------------------------------------------------------------------------- */

.hc-band {
    margin: 0 var(--hc-gutter) 48px;
    border-radius: 18px;
    background: var(--hc-ink);
    color: #fff;
    padding: 44px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
}

.hc-band--teal {
    background: linear-gradient(120deg, #0e7c9b, #123a5c);
    display: block;
}

.hc-band--sunset {
    background: linear-gradient(120deg, #ff9f1c, #ff5a5f);
}

.hc-band--spaced {
    margin: 44px var(--hc-gutter);
}

.hc-band__title {
    font-family: var(--hc-display);
    font-size: 30px;
    margin-bottom: 8px;
}

.hc-band--teal .hc-band__title {
    font-size: 26px;
    margin-bottom: 20px;
}

.hc-band--sunset .hc-band__title {
    font-size: 28px;
    margin-bottom: 6px;
}

.hc-band p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--hc-on-navy);
    margin: 0;
    max-width: 560px;
}

.hc-band--sunset p {
    color: rgba(255, 255, 255, 0.95);
    max-width: 520px;
}

.hc-band__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hc-band__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hc-band__card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px;
}

.hc-band__card i {
    font-size: 24px;
    color: var(--hc-teal-light);
    display: block;
    margin-bottom: 10px;
}

.hc-band__card-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}

.hc-band__card-meta {
    font-size: 13.5px;
    color: var(--hc-on-navy);
}

/* -----------------------------------------------------------------------------
   Newsletter (Home)
   -------------------------------------------------------------------------- */

.hc-newsletter {
    padding: 0 var(--hc-gutter) 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.hc-newsletter__title {
    font-family: var(--hc-display);
    font-size: 24px;
    color: var(--hc-ink);
}

.hc-newsletter p {
    margin: 4px 0 0;
    color: var(--hc-muted);
    font-size: 15px;
}

.hc-newsletter form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.hc-input,
.hc-select {
    font-family: inherit;
    border: 1px solid var(--hc-input-border);
    border-radius: var(--hc-radius-btn);
    padding: 13px 18px;
    font-size: 14px;
    color: var(--hc-nav-link);
    background: #fff;
    min-width: 260px;
}

.hc-input::placeholder {
    color: var(--hc-placeholder);
}

.hc-field {
    display: block;
}

.hc-field__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--hc-ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.hc-field .hc-input,
.hc-field .hc-select {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
}

.hc-fieldstack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hc-fieldrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* -----------------------------------------------------------------------------
   Cards, icon tiles
   -------------------------------------------------------------------------- */

.hc-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hc-card {
    background: #fff;
    border-radius: var(--hc-radius-card);
    padding: 26px;
    box-shadow: var(--hc-shadow-rest);
}

.hc-card__title {
    font-weight: 700;
    font-size: 17px;
    color: var(--hc-ink);
    margin-bottom: 6px;
}

.hc-card p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-muted);
    margin: 0;
}

.hc-card__icon {
    font-size: 24px;
    display: block;
    margin-bottom: 12px;
}

.hc-icon-tile {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.hc-icon-tile--sm {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 22px;
    margin-bottom: 0;
}

/* Accent pairs: tinted background + saturated glyph. */
.hc-accent-teal { background: var(--hc-tint-teal); color: var(--hc-teal); }
.hc-accent-coral { background: var(--hc-tint-coral); color: var(--hc-coral); }
.hc-accent-magenta { background: var(--hc-tint-magenta); color: var(--hc-magenta); }
.hc-accent-mango { background: var(--hc-tint-mango); color: var(--hc-mango); }

/* When used on a bare icon rather than a tile, only the glyph colour applies. */
.hc-card__icon.hc-accent-teal,
.hc-card__icon.hc-accent-coral,
.hc-card__icon.hc-accent-magenta,
.hc-card__icon.hc-accent-mango {
    background: none;
}

/* -----------------------------------------------------------------------------
   Events index
   -------------------------------------------------------------------------- */

.hc-feature-event {
    border-radius: var(--hc-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--hc-shadow-feature);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hc-feature-event .hc-media {
    min-height: 340px;
}

.hc-feature-event__body {
    min-width: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hc-datepill {
    display: inline-block;
    background: var(--hc-tint-coral);
    color: var(--hc-coral-deep);
    font-weight: 800;
    padding: 6px 14px;
    border-radius: var(--hc-pill);
    font-size: 13px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.hc-feature-event__body h2 {
    font-size: 34px;
    margin: 0 0 12px;
    line-height: 1.1;
}

.hc-feature-event__body p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--hc-body);
    margin: 0 0 20px;
}

.hc-eventlist {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hc-event-row {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 22px;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hc-event-row__date {
    text-align: center;
    background: var(--hc-tint-teal);
    border-radius: 12px;
    padding: 12px 0;
}

.hc-event-row__month {
    font-size: 12px;
    font-weight: 700;
    color: var(--hc-coral);
    text-transform: uppercase;
}

.hc-event-row__day {
    font-size: 30px;
    font-weight: 800;
    color: var(--hc-ink);
    line-height: 1;
}

.hc-event-row__weekday {
    font-size: 11px;
    color: var(--hc-muted-soft);
    margin-top: 2px;
}

.hc-event-row__title {
    font-weight: 700;
    font-size: 19px;
    color: var(--hc-ink);
    margin-bottom: 4px;
}

.hc-event-row__title a {
    color: inherit;
}

.hc-event-row__title a:hover {
    color: var(--hc-teal);
}

.hc-event-row p {
    margin: 0;
    font-size: 14px;
    color: var(--hc-muted);
    line-height: 1.5;
}

.hc-event-row__meta {
    margin-top: 8px;
    font-size: 13px;
    color: var(--hc-teal);
    font-weight: 600;
}

/* Single event page */
.hc-event-detail {
    padding: 44px var(--hc-gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
}

.hc-event-detail .hc-media {
    aspect-ratio: 4 / 3;
    border-radius: var(--hc-radius-card);
}

.hc-event-detail h1 {
    font-size: 42px;
    line-height: 1.1;
    margin: 0 0 14px;
}

.hc-prose {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--hc-body);
}

.hc-prose a {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Membership tiers
   -------------------------------------------------------------------------- */

.hc-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.hc-tier {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: var(--hc-shadow-raised);
    border-top: 5px solid var(--hc-teal-light);
    position: relative;
}

.hc-tier--accent-teal { border-top-color: var(--hc-teal-light); }
.hc-tier--accent-coral { border-top-color: var(--hc-coral); }
.hc-tier--accent-magenta { border-top-color: var(--hc-magenta); }
.hc-tier--accent-mango { border-top-color: var(--hc-mango); }

.hc-tier--popular {
    background: var(--hc-ink);
    color: #fff;
    border-top: 0;
    box-shadow: var(--hc-shadow-popover);
    transform: translateY(-6px);
}

.hc-tier__badge {
    position: absolute;
    top: -12px;
    right: 24px;
    background: var(--hc-coral);
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--hc-pill);
}

.hc-tier__name {
    font-weight: 700;
    font-size: 20px;
    color: var(--hc-ink);
}

.hc-tier--popular .hc-tier__name {
    color: #fff;
}

.hc-tier__price {
    margin: 12px 0 6px;
    font-size: 40px;
    font-weight: 800;
    color: var(--hc-teal);
}

.hc-tier--popular .hc-tier__price {
    color: var(--hc-teal-light);
}

.hc-tier__period {
    font-size: 16px;
    color: #9a938a;
    font-weight: 600;
}

.hc-tier--popular .hc-tier__period {
    color: #9fb4c7;
}

.hc-tier p {
    font-size: 14px;
    color: var(--hc-muted);
    margin: 0 0 18px;
    line-height: 1.5;
}

.hc-tier--popular p {
    color: var(--hc-on-navy);
}

.hc-tier__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: var(--hc-nav-link);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-tier--popular .hc-tier__features {
    color: #e6eef4;
}

.hc-tier__features i {
    color: var(--hc-teal);
}

.hc-tier--popular .hc-tier__features i {
    color: var(--hc-teal-light);
}

.hc-tier .hc-btn {
    margin-top: 22px;
}

/* Sign-up card */
.hc-splitcard {
    background: #fff;
    border-radius: var(--hc-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.hc-splitcard .hc-media {
    min-height: 100%;
}

.hc-splitcard__body {
    min-width: 0;
    padding: 40px;
}

.hc-splitcard__body h2 {
    font-size: 30px;
    margin: 0 0 8px;
}

.hc-splitcard__body > p {
    font-size: 14.5px;
    color: var(--hc-muted);
    margin: 0 0 24px;
}

/* -----------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.hc-chips {
    padding: 28px var(--hc-gutter) 8px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hc-chip {
    background: #fff;
    color: var(--hc-nav-link);
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: var(--hc-pill);
    border: 1px solid var(--hc-hairline);
    transition: all 0.2s ease;
}

.hc-chip:hover {
    border-color: var(--hc-teal);
    color: var(--hc-teal);
}

.hc-chip--active,
.hc-chip--active:hover {
    background: var(--hc-ink);
    color: #fff;
    border-color: var(--hc-ink);
}

.hc-gallerygrid {
    padding: 28px var(--hc-gutter) 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 16px;
}

.hc-gallerygrid .hc-media {
    border-radius: var(--hc-radius-card);
}

.hc-gallerygrid .hc-media--wide {
    grid-column: span 2;
}

.hc-gallerygrid .hc-media--feature {
    grid-column: span 2;
    grid-row: span 2;
}

/* -----------------------------------------------------------------------------
   Board
   -------------------------------------------------------------------------- */

.hc-boardgrid {
    padding: 40px var(--hc-gutter) 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hc-officer {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--hc-shadow-raised);
    transition: all 0.2s ease;
}

.hc-officer:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

.hc-officer .hc-media {
    aspect-ratio: 4 / 3;
}

.hc-officer__body {
    padding: 22px 24px;
}

.hc-officer__name {
    font-weight: 700;
    font-size: 19px;
    color: var(--hc-ink);
}

.hc-officer__role {
    color: var(--hc-coral);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 4px 0 10px;
}

.hc-officer__body p {
    margin: 0;
    font-size: 14px;
    color: var(--hc-muted);
    line-height: 1.55;
}

/* -----------------------------------------------------------------------------
   Donate
   -------------------------------------------------------------------------- */

.hc-donate {
    padding: 48px var(--hc-gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
}

.hc-impact {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hc-impact__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.hc-impact__title {
    font-weight: 700;
    font-size: 16px;
    color: var(--hc-ink);
}

.hc-impact__item p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--hc-muted);
    line-height: 1.55;
}

.hc-donate .hc-media--wide-photo {
    margin-top: 28px;
    aspect-ratio: 16 / 9;
    border-radius: var(--hc-radius-card);
}

.hc-donatecard {
    background: #fff;
    border-radius: var(--hc-radius-lg);
    box-shadow: var(--hc-shadow-feature);
    padding: 36px;
}

.hc-donatecard h2 {
    font-size: 28px;
    margin: 0 0 6px;
}

.hc-donatecard > p {
    font-size: 14px;
    color: var(--hc-muted);
    margin: 0 0 22px;
}

.hc-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.hc-amounts--split {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 18px;
}

.hc-amount {
    text-align: center;
    border: 2px solid var(--hc-hairline);
    border-radius: 10px;
    padding: 14px 0;
    font-family: inherit;
    font-weight: 700;
    color: var(--hc-ink);
    font-size: 16px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hc-amount:hover {
    border-color: var(--hc-teal);
}

.hc-amount[aria-pressed="true"] {
    border-color: var(--hc-teal);
    background: var(--hc-tint-teal);
    color: var(--hc-teal);
    font-weight: 800;
}

.hc-amount-other {
    border: 2px solid var(--hc-hairline);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--hc-ink);
    width: 100%;
}

.hc-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    background: var(--hc-sand);
    border-radius: 10px;
    font-size: 14px;
    color: var(--hc-nav-link);
    font-weight: 600;
    cursor: pointer;
}

.hc-toggle i {
    color: var(--hc-teal);
    font-size: 18px;
}

.hc-secure-note {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: #9a938a;
}

.hc-donatecard .hc-btn--coral {
    margin-top: 22px;
    padding: 15px;
    font-size: 16px;
    border-radius: 10px;
}

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.hc-footer {
    background: var(--hc-footer);
    color: var(--hc-on-navy);
    padding: 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 30px;
}

.hc-footer__name {
    font-family: var(--hc-display);
    font-size: 20px;
    color: #fff;
    margin-bottom: 8px;
}

.hc-footer p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--hc-footer-text);
    margin: 0 0 16px;
    max-width: 320px;
}

.hc-footer__social {
    display: flex;
    gap: 12px;
    font-size: 20px;
}

.hc-footer__social a {
    color: var(--hc-teal-light);
}

.hc-footer__social a:hover {
    color: #fff;
}

.hc-footer__heading {
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.hc-footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.hc-footer__links a,
.hc-footer__contact {
    color: var(--hc-footer-text);
}

.hc-footer__links a:hover {
    color: #fff;
}

.hc-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

/* -----------------------------------------------------------------------------
   Responsive
   The prototypes are desktop at 1200px. Two collapse points: tablet drops the
   multi-column grids to two, mobile to one and swaps the nav for a toggle.
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    :root {
        --hc-gutter: 32px;
    }

    .hc-hero,
    .hc-why,
    .hc-donate,
    .hc-feature-event,
    .hc-splitcard,
    .hc-event-detail {
        grid-template-columns: 1fr;
    }

    .hc-hero__media,
    .hc-feature-event .hc-media,
    .hc-splitcard .hc-media {
        min-height: 300px;
    }

    .hc-spotlight {
        grid-template-columns: 1fr;
    }

    .hc-cards-3,
    .hc-tiers,
    .hc-boardgrid,
    .hc-band__cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .hc-tier--popular {
        transform: none;
    }

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

    .hc-hero__title {
        font-size: 40px;
    }

    .hc-banner__body h1,
    .hc-pagehead h1 {
        font-size: 38px;
    }

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

@media (max-width: 640px) {
    .hc-nav {
        padding: 14px 20px;
        flex-wrap: wrap;
    }

    .hc-nav__toggle {
        display: block;
    }

    .hc-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding-top: 14px;
    }

    .hc-menu.is-open {
        display: flex;
    }

    .hc-cards-3,
    .hc-tiers,
    .hc-boardgrid,
    .hc-band__cards,
    .hc-gallerygrid,
    .hc-fieldrow,
    .hc-footer {
        grid-template-columns: 1fr;
    }

    .hc-gallerygrid .hc-media--wide,
    .hc-gallerygrid .hc-media--feature {
        grid-column: span 1;
    }

    .hc-gallerygrid .hc-media--feature {
        grid-row: span 2;
    }

    .hc-band,
    .hc-band--spaced {
        grid-template-columns: 1fr;
        padding: 30px;
    }

    .hc-event-row {
        grid-template-columns: 72px 1fr;
    }

    .hc-event-row .hc-btn {
        grid-column: 2;
        justify-self: start;
    }

    .hc-featured-mini {
        grid-template-columns: 96px 1fr;
    }

    .hc-hero__body,
    .hc-hero--short .hc-hero__body {
        padding: 40px var(--hc-gutter);
    }

    .hc-hero__title {
        font-size: 34px;
    }

    .hc-input,
    .hc-select {
        min-width: 0;
        width: 100%;
    }

    .hc-newsletter form {
        width: 100%;
    }
}