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

   A recolour of hawaii_site.css. Structure, selectors, layout, spacing, type,
   shadows, breakpoints and every --hc-* variable NAME are unchanged, so this is
   a drop-in swap: point the template at this file instead and nothing in the
   markup or JS needs to move.

   What changed: the colour layer only.

   The first palette was warm-tropical — a teal/coral scheme sitting on a warm
   cream field with sand-brown neutrals. This one moves the whole sheet into the
   water. The field is cool shell-white instead of cream, the neutrals are
   slate-blue instead of sand-brown, the primary drops to a deeper marine blue,
   and the light accent becomes sea-glass turquoise. The warm notes are kept but
   pulled back and re-sourced from things that actually live in the Pacific —
   reef coral, plumeria gold, hibiscus — so they read as accents against the
   water rather than as a competing tropical scheme.

   Classy comes from restraint: the saturated colours only ever appear as small
   accents (bars, pills, one CTA), while the large areas are deep ocean navy,
   white cards, and cool off-white. Nothing neon, no gradient backgrounds behind
   text.

   Structure still follows the APS design system's conventions: 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 the same
   collapse points (1050px nav, 960px, 640px).
   ============================================================================= */

:root {
    /* Colour — Pacific
       Deep water for structure, sea glass for lift, reef warmth for accents. */
    --hc-ink: #0a3149;          /* deep ocean navy — headings, bands */
    --hc-footer: #04202f;       /* abyss */
    --hc-teal: #0a6f88;         /* primary — deep lagoon */
    --hc-teal-light: #56c8cf;   /* sea glass */
    --hc-coral: #ef6a55;        /* secondary / CTA — reef coral */
    --hc-coral-deep: #d24a3c;
    --hc-mango: #f0a844;        /* plumeria gold */
    --hc-magenta: #d4547a;      /* hibiscus */
    --hc-cream: #f2f7f8;        /* page background — shell white */
    --hc-sand: #e9f2f3;         /* inset boxes — tide pool */
    --hc-body: #45545c;         /* slate, cooled from the old warm grey */
    --hc-muted: #5d6b73;
    --hc-muted-soft: #77848b;
    --hc-hairline: #d8e4e6;
    --hc-hairline-soft: #e4edee;
    --hc-nav-link: #334a54;
    --hc-footer-text: #8fb0c2;
    --hc-on-navy: #b8d3e0;
    --hc-input-border: #c9d9dd;
    --hc-placeholder: #92a5ab;

    /* Tinted icon-tile backgrounds */
    --hc-tint-teal: #e4f2f4;
    --hc-tint-coral: #fdeee9;
    --hc-tint-magenta: #fbeaf0;
    --hc-tint-mango: #fdf3e3;

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

    /* Shape — unchanged */
    --hc-radius-card: 8px;
    --hc-radius-lg: 8px;
    --hc-radius-btn: 8px;
    --hc-pill: 999px;

    /* Shadow — same tiers, popover tinted to the new navy */
    /* One subtle lift, shared by every rounded card/panel/band/image. */
    --hc-shadow-rest: 0 4px 18px rgba(0, 0, 0, 0.10);
    --hc-shadow-raised: 0 4px 18px rgba(0, 0, 0, 0.10);
    --hc-shadow-feature: 0 4px 18px rgba(0, 0, 0, 0.10);
    --hc-shadow-popover: 0 12px 30px rgba(10, 49, 73, 0.32);

    /* 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: #ffb9a8;
}

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

.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: #08596e;
    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: 8px;
}

.hc-btn--white:hover {
    background: #fdece7;
    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;
    /* Full window width, so the bottom hairline runs edge to edge. */
    background: rgba(242, 247, 248, 0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--hc-hairline);
    margin-bottom: 29px;
}

.hc-nav__inner {
    /* Content held to the page width and the shared left margin. */
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 129px;
    padding: 16px var(--hc-gutter);
}

.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%, #56c8cf, #0a6f88 60%, #0a3149);
    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;
}

/* When a real logo is uploaded, show the whole artwork at nav height rather
   than cropping it into the circular emoji badge. */
.hc-brand__mark--logo {
    width: auto;
    height: 96px;
    border-radius: 0;
    background: none;
}

.hc-brand__mark--logo img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

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

.hc-brand__name {
    font-family: var(--hc-display);
    font-size: 26px;
    line-height: 1.1;
    color: var(--hc-ink);
}

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

.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.

   All six fallbacks are now drawn from the water: open ocean, reef, lagoon,
   sunset over water, orchid, and deep reef shallows.
   -------------------------------------------------------------------------- */

.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, #0a6f88, #0a3149); }
.hc-media--coral { background: linear-gradient(150deg, #ef6a55, #d24a3c); }
.hc-media--lagoon { background: linear-gradient(160deg, #56c8cf, #0a6f88); }
.hc-media--sunset { background: linear-gradient(120deg, #f0a844, #ef6a55); }
.hc-media--orchid { background: linear-gradient(135deg, #d4547a, #8a4f8f); }
.hc-media--reef { background: linear-gradient(135deg, #56c8cf, #0a5d5c); }

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

.hc-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* Inset the left edge to the page margin so the image lines up under the
       heart logo in the nav, rather than running to the very edge. */
    padding-left: var(--hc-gutter);
}

/* The hero image (single or slideshow) is a fixed 575:600 frame, so its shape
   never changes with the viewport — the photos crop to fill it instead. */
.hc-hero__media {
    aspect-ratio: 575 / 600;
    /* center, not stretch: on iOS WebKit, stretch overrides aspect-ratio and
       collapses this frame to 0 height on mobile (its slides are all absolute,
       so there is no in-flow content to hold it open). */
    align-self: center;
    border-radius: var(--hc-radius-card);
    box-shadow: var(--hc-shadow-rest);
}

/* Slideshow slides stack in the frame and cross-fade; hawaii_site.js toggles
   .is-active every 7s. With one image (or the fallback) there is no .hc-slide
   and it simply shows. */
.hc-slide {
    opacity: 0;
    transition: opacity 1s ease;
}

.hc-slide.is-active {
    opacity: 1;
}

.hc-hero--short {
    /* Contained to the page margins on both sides (overrides the home hero's
       left-only inset) so its width conforms to the other sub-pages. */
    padding: 0 var(--hc-gutter);
    column-gap: 44px;
    min-height: 400px;
    /* Top-align so the header text starts at the same y as the pagehead pages. */
    align-items: start;
}

/* Membership hero image: fixed ratio so it always has height (it collapsed
   when the home hero was reworked), plus the shared rounding + lift shadow. */
.hc-hero--short .hc-media {
    aspect-ratio: 4 / 3;
    align-self: center;
    border-radius: var(--hc-radius-card);
    box-shadow: var(--hc-shadow-rest);
}

.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: 52px 0 8px;
    justify-content: flex-start;
}

/* Match the membership hero eyebrow to the other page headers, where the
   eyebrow renders at the larger, muted size (the coral rule stays). */
.hc-hero--short .hc-eyebrow {
    font-size: 17px;
    color: var(--hc-body);
    margin: 0;
}

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

.hc-hero--short .hc-hero__title {
    font-size: 52px;
    line-height: 1;
    margin: 0 0 10px;
}

.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: 17px;
    margin: 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(10, 49, 73, 0.15), rgba(10, 49, 73, 0.84));
}

.hc-banner__scrim--coral {
    background: linear-gradient(180deg, rgba(210, 74, 60, 0.15), rgba(160, 48, 44, 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: #dfeef4;
}

.hc-banner--tall .hc-banner__body p {
    color: #ffe8e0;
    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: #3d4b53;
    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, #ef6a55, #d24a3c);
    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: var(--hc-radius-card);
    box-shadow: var(--hc-shadow-rest);
}

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

.hc-band {
    /* Floating card, inset to the page margin like every other section. */
    margin: 0 var(--hc-gutter) 48px;
    border-radius: var(--hc-radius-card);
    background: var(--hc-ink);
    color: #fff;
    padding: 44px;
    box-shadow: var(--hc-shadow-rest);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
}

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

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

.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: 8px;
    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;
}

/* Standalone form pages (Join / Contact): a white card holding the fields. */
.hc-formcard {
    background: #fff;
    border-radius: var(--hc-radius-card);
    box-shadow: var(--hc-shadow-rest);
    padding: 36px;
    max-width: 680px;
}

.hc-textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.5;
}

/* The muted "(optional)" note inside an uppercase field label. */
.hc-field__opt {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--hc-muted-soft);
}

/* -----------------------------------------------------------------------------
   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: 8px;
    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-deep); }
.hc-accent-magenta { background: var(--hc-tint-magenta); color: var(--hc-magenta); }
.hc-accent-mango { background: var(--hc-tint-mango); color: #d98c22; }

/* 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: 8px;
    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: 8px;
    padding: 12px 0;
}

.hc-event-row__month {
    font-size: 12px;
    font-weight: 700;
    color: var(--hc-coral-deep);
    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: 8px;
    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: #94a3a8;
    font-weight: 600;
}

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

.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: #dfeef4;
}

.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);
    box-shadow: var(--hc-shadow-rest);
}

.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: 8px;
    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(10, 49, 73, 0.14);
}

.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-deep);
    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: 8px;
    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: 8px;
    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: 8px;
    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: #94a3a8;
}

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

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

.hc-footer {
    /* Background bleeds to the full screen width... */
    position: relative;
    background: var(--hc-footer);
    color: var(--hc-on-navy);
    padding: 64px 0;
}

/* Polynesian tattoo border framing the footer, mirrored top and bottom. Teal
   bands with navy detail; the pattern's negative space is transparent so the
   footer shows through. See hawaii_site/static/img/tattoo-border.svg. */
.hc-footer::before,
.hc-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    background: url("../img/tattoo-border.3dfe6149f3a7.svg") repeat-x center;
    background-size: auto 100%;
}

.hc-footer::before {
    top: 0;
}

.hc-footer::after {
    bottom: 0;
    transform: scaleY(-1);
}

.hc-footer__inner {
    /* ...while the content is held to the page width and the shared gutter. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--hc-gutter);
    display: grid;
    /* Heart on the left, then the brand and contact columns. Columns are
       top-aligned, each nudged 39px down from the top edge. */
    grid-template-columns: auto 1.4fr 1fr;
    align-items: start;
    gap: 36px;
}

.hc-footer__inner > * {
    margin: 19px 0;
}

.hc-footer__brandmark {
    display: flex;
    align-items: center;
}

.hc-footer__logo {
    display: block;
    line-height: 0;
}

.hc-footer__logo img {
    height: 150px;
    width: auto;
    display: block;
}

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

.hc-footer p {
    font-size: 15px;
    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. Collapse points: the nav swaps to a
   hamburger at 1050px (the brand lockup crowds the menu below that); the grids
   drop to two columns at 960px and to one at 640px.
   -------------------------------------------------------------------------- */

/* Nav: hamburger menu at 1050px and below. */
@media (max-width: 1050px) {
    .hc-nav__inner {
        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;
    }
}

@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-feature-event .hc-media,
    .hc-splitcard .hc-media {
        min-height: 300px;
    }

    /* Once the hero stacks to one column, the left-only inset that aligns the
       image under the logo would leave it flush on the right. Give the hero a
       matching right margin, and drop the body's own side padding so the text
       lines up with the image edges instead of indenting twice. */
    .hc-hero {
        padding-right: var(--hc-gutter);
    }

    .hc-hero__body,
    .hc-hero--short .hc-hero__body {
        padding-left: 0;
        padding-right: 0;
    }

    .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__inner {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .hc-cards-3,
    .hc-tiers,
    .hc-boardgrid,
    .hc-band__cards,
    .hc-gallerygrid,
    .hc-fieldrow,
    .hc-footer__inner {
        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 {
        /* Horizontal inset comes from the hero's own padding when stacked;
           keep only the vertical rhythm here. */
        padding: 40px 0;
    }

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

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

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